\n The introduction of the PSD2 regulation in Europe requires re-entering your card details before we can allow the modification of payment details or\n access to the payment history.\n
\n )\n }}\n secondary={\n isUpdatingPaymentDetails && (\n setIsUpdatingPaymentDetails(false)}\n onComplete={onCardConfirm}\n onSubmit={() => dispatch(startCardUpdate())}\n setSnackbar={text => dispatch(setSnackbar(text))}\n />\n )\n }\n notification={\n hasUnpaid && (\n \n \n You have an unpaid invoice. Please check your payment card details\n
\n )\n }\n />\n );\n};\n\nexport default OrganizationPaymentSettings;\n","// Copyright 2022 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Link, useNavigate } from 'react-router-dom';\n\n// material ui\nimport { Error as ErrorIcon, OpenInNew as OpenInNewIcon } from '@mui/icons-material';\nimport { LinearProgress, List } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport moment from 'moment';\n\nimport { cancelRequest } from '../../../actions/organizationActions';\nimport { ADDONS, PLANS } from '../../../constants/appConstants';\nimport { toggle } from '../../../helpers';\nimport { getAcceptedDevices, getDeviceLimit, getIsEnterprise, getOrganization, getUserRoles } from '../../../selectors';\nimport Alert from '../../common/alert';\nimport CancelRequestDialog from '../dialogs/cancelrequest';\nimport OrganizationPaymentSettings from './organizationpaymentsettings';\nimport OrganizationSettingsItem, { maxWidth } from './organizationsettingsitem';\n\nconst useStyles = makeStyles()(theme => ({\n deviceLimitBar: { backgroundColor: theme.palette.grey[500], margin: '15px 0' },\n wrapper: {\n backgroundColor: theme.palette.background.lightgrey,\n marginTop: theme.spacing(6),\n padding: theme.spacing(2),\n '&>h5': { marginTop: 0, marginBottom: 0 }\n }\n}));\n\nexport const TrialExpirationNote = ({ trial_expiration }) => (\n \n \n \n Your trial expires in {moment().from(moment(trial_expiration), true)}. Upgrade to a paid plan\n \n
\n);\n\nexport const DeviceLimitExpansionNotification = ({ isTrial }) => (\n \n
\n
\n To increase your device limit,{' '}\n
\n {isTrial ? (\n
upgrade to a paid plan\n ) : (\n
\n contact our sales team\n \n )}\n
.
\n
We've started the process to cancel your plan and deactivate your account.
\n \n We'll send you an email confirming your deactivation. If you have any question at all, contact us at our{' '}\n \n \n support portal\n \n .\n \n
\n \n);\n\nexport const CancelSubscriptionButton = ({ handleCancelSubscription, isTrial }) => (\n \n \n {isTrial ? 'End trial' : 'Cancel subscription'} and deactivate account\n \n
\n);\n\nexport const Billing = () => {\n const [cancelSubscription, setCancelSubscription] = useState(false);\n const [cancelSubscriptionConfirmation, setCancelSubscriptionConfirmation] = useState(false);\n const { isAdmin } = useSelector(getUserRoles);\n const { total: acceptedDevices = 0 } = useSelector(getAcceptedDevices);\n const deviceLimit = useSelector(getDeviceLimit);\n const isEnterprise = useSelector(getIsEnterprise);\n const organization = useSelector(getOrganization);\n const { plan: currentPlan = PLANS.os.id } = organization;\n const dispatch = useDispatch();\n const navigate = useNavigate();\n const { classes } = useStyles();\n\n const planName = PLANS[currentPlan].name;\n\n const enabledAddOns =\n organization.addons?.reduce((accu, addon) => {\n if (addon.enabled) {\n const { title } = ADDONS[addon.name];\n let addonPrice = '';\n if (!organization.trial && !isEnterprise) {\n const planAddon = ADDONS[addon.name][currentPlan] ? ADDONS[addon.name][currentPlan] : ADDONS[addon.name].os;\n addonPrice = ` - ${planAddon.price}`;\n }\n accu.push(`${title}${addonPrice}`);\n }\n return accu;\n }, []) || [];\n\n const cancelSubscriptionSubmit = async reason =>\n dispatch(cancelRequest(organization.id, reason)).then(() => {\n setCancelSubscription(false);\n setCancelSubscriptionConfirmation(true);\n });\n\n const handleCancelSubscription = e => {\n if (e !== undefined) {\n e.preventDefault();\n }\n setCancelSubscription(toggle);\n };\n\n return (\n \n
Billing
\n
\n : null}\n />\n {deviceLimit > 0 && (\n }\n notification={}\n />\n )}\n navigate('/settings/upgrade') },\n description: enabledAddOns.length ? enabledAddOns.join(', ') : `You currently don't have any add-ons`\n }}\n notification={organization.trial && }\n sideBarContent={\n \n }\n />\n {!organization.trial && !isEnterprise && }\n
\n {cancelSubscriptionConfirmation &&
}\n {isAdmin && !cancelSubscriptionConfirmation && (\n
\n )}\n {cancelSubscription &&
setCancelSubscription(false)} onSubmit={cancelSubscriptionSubmit} />}\n \n
SAML metadata
\n
\n
\n {({ getRootProps, getInputProps }) => (\n \n \n }>\n Import from a file\n \n
\n )}\n \n\n
\n \n \n
\n
There was an error parsing the metadata.
}\n \n \n {hasSSOConfig && !isEditing ? (\n
\n \n \n }>\n Copy to clipboard\n \n
\n ) : (\n <>\n
\n
\n \n )}\n
\n {hasSSOConfig ? (\n
View metadata in the text editor\n ) : (\n <>\n
\n
\n {({ getRootProps, getInputProps }) => (\n \n
\n
Drag here or
browse to upload a metadata\n document\n
\n
\n \n )}\n
\n {hasSSOConfig && !isEditing ? (\n \n ) : (\n <>\n \n \n \n )}\n
\n
\n {configDetails.map(item => (\n \n ))}\n
\n )}\n \n \n );\n};\n\nexport default SAMLConfig;\n","// Copyright 2017 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useCallback, useEffect, useState } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { useDispatch, useSelector } from 'react-redux';\n\n// material ui\nimport { FileCopy as CopyPasteIcon } from '@mui/icons-material';\nimport { Button, Checkbox, Collapse, FormControlLabel, List } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport copy from 'copy-to-clipboard';\nimport moment from 'moment';\n\nimport { setSnackbar } from '../../../actions/appActions';\nimport {\n changeSamlConfig,\n deleteSamlConfig,\n downloadLicenseReport,\n getSamlConfigs,\n getUserOrganization,\n storeSamlConfig\n} from '../../../actions/organizationActions';\nimport { TIMEOUTS } from '../../../constants/appConstants';\nimport { createFileDownload, toggle } from '../../../helpers';\nimport { getCurrentSession, getFeatures, getIsEnterprise, getIsPreview, getOrganization, getUserRoles } from '../../../selectors';\nimport ExpandableAttribute from '../../common/expandable-attribute';\nimport { HELPTOOLTIPS, MenderHelpTooltip } from '../../helptips/helptooltips';\nimport Billing from './billing';\nimport OrganizationSettingsItem, { maxWidth } from './organizationsettingsitem';\nimport { SAMLConfig } from './samlconfig';\n\nconst useStyles = makeStyles()(theme => ({\n copyNotification: { height: 30, padding: 15 },\n deviceLimitBar: { backgroundColor: theme.palette.grey[500], margin: '15px 0' },\n ssoToggle: { width: `calc(${maxWidth}px + ${theme.spacing(4)})` },\n tenantInfo: { marginTop: 11, paddingBottom: 3, 'span': { marginLeft: theme.spacing(0.5), color: theme.palette.text.disabled } },\n tenantToken: { width: `calc(${maxWidth}px - ${theme.spacing(4)})` },\n tokenTitle: { paddingRight: 10 },\n tokenExplanation: { margin: '1em 0' }\n}));\n\nexport const OrgHeader = () => {\n const { classes } = useStyles();\n return (\n \n
Organization token
\n
\n
\n
\n }>Copy to clipboard\n \n
{copied && Copied to clipboard.}
\n
\n
Organization and billing
\n
\n \n {org.name}\n ({org.id})\n
\n Important\n
\n Do not share your organization token with others. Treat this token like a password, as it can be used to request authorization for new\n devices.\n
\n )}\n \n }\n sideBarContent={}\n />\n \n {isEnterprise && isAdmin && (\n \n }\n label=\"Enable SAML single sign-on\"\n />\n {isResettingSSO && !isConfiguringSSO && (\n <>\n \n \n \n )}\n
\n )}\n \n \n \n {isHosted && }\n {(canPreview || !isHosted) && isEnterprise && isAdmin && (\n \n )}\n \n );\n};\n\nexport default Organization;\n","// Copyright 2021 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { CheckCircle as CheckCircleIcon } from '@mui/icons-material';\nimport { Button } from '@mui/material';\n\nimport { twoFAStates } from '../../../../constants/userConstants';\nimport Form from '../../../common/forms/form';\nimport TextInput from '../../../common/forms/textinput';\nimport Loader from '../../../common/loader';\n\nexport const AuthSetup = ({ currentUser, handle2FAState, has2FA, onClose, qrImage, verify2FA }) => {\n const current2FA = useRef(has2FA);\n const [validated2fa, setValidated2fa] = useState(false);\n const [validating2fa, setValidating2fa] = useState(false);\n\n useEffect(() => {\n current2FA.current = has2FA;\n }, [has2FA]);\n\n useEffect(() => {\n const onUnload = e => {\n if (!e || (validated2fa && current2FA.current) || !qrImage) {\n return;\n }\n e.returnValue = '2fa setup incomplete';\n return e.returnValue;\n };\n\n window.addEventListener('beforeunload', onUnload);\n return () => {\n if (!current2FA.current && qrImage) {\n handle2FAState(twoFAStates.disabled);\n }\n window.removeEventListener('beforeunload', onUnload);\n };\n }, [handle2FAState, qrImage, validated2fa]);\n\n const validate2faSetup = formData => {\n setValidating2fa(true);\n formData.email = currentUser.email;\n return verify2FA(formData)\n .then(() => setValidated2fa(true))\n .catch(() => setValidated2fa(false))\n .finally(() => setValidating2fa(false));\n };\n\n return (\n \n Setup:\n
\n
\n - \n To use Two Factor Authentication, first download a third party authentication app such as{' '}\n \n Authy\n {' '}\n or{' '}\n \n Google Authenticator\n \n .\n
\n - Scan the QR code on the right with the authenticator app you just downloaded on your device.
\n - \n
\n Type in the generated code in the input field below and click Verify.\n {validated2fa ? (\n
\n \n
\n Verified\n
\n \n ) : (\n <>\n
\n {validating2fa && (\n
\n \n \n
\n )}\n \n )}\n
\n - Then each time you log in, you will be asked for a verification code which you can retrieve from the authentication app on your device.
\n
\n {!qrImage ?
:
}\n
\n
\n \n \n
\n
\n Please verify your email address first, to enable Two Factor Authentication.\n
\n Once you click the button below we will send you an email with a confirmation link in it and a confirmation field will appear below. Click on the link to\n complete the verification. If the link does not work, you can also enter the confirmation code from the link in a confirmation field that will appear\n below once you clicked the button.\n {!isVerifying ? (\n
\n \n \n
\n ) : (\n
\n )}\n
\n
\n
Enable Two Factor authentication
\n
\n
\n
\n Two Factor Authentication adds a second layer of protection to your account by asking for an additional verification code each time you log in.\n \n {showEmailVerification && (\n
dispatch(verifyEmailComplete(data))}\n verifyEmailStart={() => dispatch(verifyEmailStart())}\n />\n )}\n \n dispatch(verify2FA(data))}\n onClose={() => setQrExpanded(false)}\n />\n \n \n \n Roles\n selected.map(role => roles[role].name).join(', ')}\n >\n {editableRoles.map(role => (\n \n ))}\n \n {showRoleUsageNotification && (\n \n The selected {pluralize('role', selectedRoleIds.length)} may prevent {currentUser.email === user.email ? 'you' : {user.email}} from using the\n Mender UI.\n
\n Consider adding the {rolesById[rolesByName.readOnly].name} role as well.\n \n )}\n \n \n
\n );\n};\n\nconst PasswordLabel = () => (\n \n Optional\n
\n You can skip setting a password for now - you can opt to send the new user an email containing a password reset link by checking the box below.
\n Organizations using Single Sign-On or other means of authorization may want to create users with no password.
\n \n }\n >\n \n \n \n
Edit user
\n
\n {currentUser.id !== id && (\n \n )}\n \n \n \n
\n
\n
{provider.icon}
\n
\n This user logs in using his {provider.name} account.\n
\n He can connect to {provider.name} to update his login settings.\n
\n
\n \n \n
\n \n );\n};\n\nexport default UserDefinition;\n","// Copyright 2017 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { Button, Switch, TextField } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { setSnackbar } from '../../../actions/appActions';\nimport { editUser, saveUserSettings } from '../../../actions/userActions';\nimport { DARK_MODE, LIGHT_MODE } from '../../../constants/appConstants';\nimport * as UserConstants from '../../../constants/userConstants';\nimport { isDarkMode, toggle } from '../../../helpers';\nimport { getCurrentSession, getCurrentUser, getFeatures, getIsEnterprise, getUserSettings } from '../../../selectors';\nimport ExpandableAttribute from '../../common/expandable-attribute';\nimport Form from '../../common/forms/form';\nimport PasswordInput from '../../common/forms/passwordinput';\nimport TextInput from '../../common/forms/textinput';\nimport InfoText from '../../common/infotext';\nimport AccessTokenManagement from '../accesstokenmanagement';\nimport { CopyTextToClipboard } from '../organization/organization';\nimport TwoFactorAuthSetup from './twofactorauthsetup';\nimport { getUserSSOState } from './userdefinition';\n\nconst useStyles = makeStyles()(() => ({\n formField: { width: 400, maxWidth: '100%' },\n changeButton: { margin: '30px 0 0 15px' },\n infoText: { margin: 0, width: '75%' },\n jwt: { maxWidth: '70%' },\n oauthIcon: { fontSize: '36px', marginRight: 10 },\n widthLimit: { maxWidth: 750 }\n}));\n\nexport const SelfUserManagement = () => {\n const [editEmail, setEditEmail] = useState(false);\n const [editPass, setEditPass] = useState(false);\n const { classes } = useStyles();\n const dispatch = useDispatch();\n\n const { isHosted } = useSelector(getFeatures);\n const isEnterprise = useSelector(getIsEnterprise);\n const canHave2FA = isEnterprise || isHosted;\n const currentUser = useSelector(getCurrentUser);\n const hasTracking = useSelector(state => !!state.app.trackerCode);\n const { trackingConsentGiven: hasTrackingConsent, mode } = useSelector(getUserSettings);\n const { token } = useSelector(getCurrentSession);\n\n const editSubmit = userData => {\n if (userData.password != userData.password_confirmation) {\n dispatch(setSnackbar(`The passwords don't match`));\n } else {\n dispatch(editUser(UserConstants.OWN_USER_ID, userData)).then(() => {\n setEditEmail(false);\n setEditPass(false);\n });\n }\n };\n\n const handleEmail = () => setEditEmail(toggle);\n\n const toggleMode = () => {\n const newMode = isDarkMode(mode) ? LIGHT_MODE : DARK_MODE;\n dispatch(saveUserSettings({ mode: newMode }));\n };\n\n const handlePass = () => setEditPass(toggle);\n const email = currentUser.email;\n const { isOAuth2, provider } = getUserSSOState(currentUser);\n return (\n \n
My profile
\n {!editEmail && currentUser.email ? (\n
\n \n {!isOAuth2 && (\n \n )}\n
\n ) : (\n
\n )}\n {!isOAuth2 &&\n (!editPass ? (\n
\n ) : (\n <>\n
Change password
\n
\n \n ))}\n
\n
Enable dark theme
\n
\n
\n {!isOAuth2 ? (\n canHave2FA &&
\n ) : (\n
\n
{provider.icon}
\n
\n You are logging in using your {provider.name} account.\n
\n Please connect to {provider.name} to update your login settings.\n
\n
\n )}\n
\n {!isOAuth2 &&
}\n {isEnterprise && hasTracking && (\n
\n
dispatch(saveUserSettings({ trackingConsentGiven: !hasTrackingConsent }))}>\n
Help us improve Mender
\n
\n
\n
Enable usage data and errors to be sent to help us improve our service.\n
\n )}\n
\n
\n
Users
\n \n \n\n
\n {showCreate &&
}\n
\n
\n
\n {editing ? (\n \n {urlInput}\n \n ) : (\n urlInput\n )}\n {editing ? (\n \n {descriptionInput}\n \n ) : (\n descriptionInput\n )}\n \n setSecret(e.target.value)}\n type={editing ? 'password' : 'text'}\n value={secret}\n />\n \n
\n \n \n \n {!editing && (\n \n )}\n
\n \n );\n};\n\nexport const WebhookCreation = ({ adding, onCancel, ...props }) => (\n \n \n
\n
Add a webhook
\n \n \n
\n \n \n
\n
\n
= 400 ? 'muted' : ''}>{status.code}
\n
{triggerMap[entry.type] ?? entry.type}
},\n { key: 'status', title: 'Status', render: ({ entry, webhook }) => },\n {\n key: 'details',\n title: 'Details',\n render: ({ isExpanded }) => (isExpanded ? : )\n }\n];\n\nconst ListItem = ({ entry = {}, webhook }) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const { data = {} } = entry;\n\n return (\n \n setIsExpanded(toggle)}>\n {columns.map(({ key, render: Column }) => (\n \n ))}\n \n \n {JSON.stringify(data)}\n \n \n );\n};\n\nconst { page: defaultPage, perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;\nconst WebhookActivity = ({ events = [], getWebhookEvents, eventTotal, webhook }) => {\n const { classes } = useStyles();\n const [page, setPage] = useState(defaultPage);\n\n useEffect(() => {\n getWebhookEvents({ page, perPage: defaultPerPage });\n }, [getWebhookEvents, page]);\n\n return (\n \n {events.length ? (\n <>\n
\n {columns.map(({ key, title }) => (\n
{title}
\n ))}\n
\n
\n {events.map(entry => (\n
\n ))}\n {eventTotal > defaultPerPage && (\n
\n )}\n
\n \n ) : (\n
No webhook activity yet.
\n )}\n
\n
Manage webhook
\n
\n \n \n \n \n
\n
\n
Webhooks
\n {webhooks.length ? (\n
\n ) : (\n
\n No webhooks are configured yet. Learn more about webhooks in our \n
\n )}\n
\n
\n \n \n \n \n
\n );\n};\n\nconst ConnectionStringInput = ({ connectionConfig, isEditing, setConnectionConfig, title }) => {\n const [value, setValue] = useState(connectionConfig.connection_string);\n const debouncedValue = useDebounce(value, TIMEOUTS.debounceDefault);\n\n const { classes } = useStyles();\n\n useEffect(() => {\n setConnectionConfig({ connection_string: debouncedValue });\n }, [debouncedValue, setConnectionConfig]);\n\n useEffect(() => {\n setValue(connectionConfig.connection_string);\n }, [connectionConfig.connection_string]);\n\n const updateConnectionConfig = ({ target: { value = '' } }) => setValue(value);\n\n return (\n \n );\n};\n\nconst providerConfigMap = {\n 'iot-core': ConnectionDetailsInput,\n 'iot-hub': ConnectionStringInput\n};\n\nexport const IntegrationConfiguration = ({ integration, isLast, onCancel, onDelete, onSave }) => {\n const { credentials = {}, provider } = integration;\n const [connectionConfig, setConnectionConfig] = useState(credentials);\n // eslint-disable-next-line no-unused-vars\n const { type, ...otherProps } = credentials;\n const [isEditing, setIsEditing] = useState(!Object.values(otherProps).some(i => i));\n const [isDeleting, setIsDeleting] = useState(false);\n\n const { classes } = useStyles();\n\n useEffect(() => {\n const { credentials = {} } = integration;\n // eslint-disable-next-line no-unused-vars\n const { type, ...otherProps } = credentials;\n setConnectionConfig(credentials);\n setIsEditing(!Object.values(otherProps).some(i => i));\n }, [integration]);\n\n const onCancelClick = () => {\n setIsEditing(false);\n setConnectionConfig(credentials);\n onCancel(integration);\n };\n const onDeleteClick = () => setIsDeleting(true);\n const onDeleteConfirm = () => onDelete(integration);\n const onEditClick = () => setIsEditing(true);\n const onSaveClick = () =>\n onSave({\n ...integration,\n credentials: {\n type: EXTERNAL_PROVIDER[provider].credentialsType,\n ...connectionConfig\n }\n });\n\n const ConfigInput = providerConfigMap[provider];\n const { configHint, title } = EXTERNAL_PROVIDER[provider];\n return (\n <>\n {title}
\n \n
\n
\n {isEditing ? (\n <>\n \n \n \n ) : (\n <>\n \n \n \n )}\n
\n {isDeleting &&
setIsDeleting(false)} />}\n \n
Integrations
\n {configuredIntegrations.map((integration, index) => (\n dispatch(deleteIntegration(integration))}\n onSave={onSaveClick}\n />\n ))}\n {!configuredWebhook && !!availableIntegrations.length && (\n \n )}\n {!!configuredWebhook && }\n \n \n );\n};\n\nexport default Integrations;\n","// Copyright 2020 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect, useMemo, useState } from 'react';\n\n// material ui\nimport { Close as CloseIcon, InfoOutlined as InfoOutlinedIcon, WarningAmber as WarningIcon } from '@mui/icons-material';\nimport {\n Box,\n Button,\n Checkbox,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n Divider,\n Drawer,\n FormControl,\n FormHelperText,\n IconButton,\n InputLabel,\n MenuItem,\n Select,\n TextField,\n Tooltip\n} from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport validator from 'validator';\n\nimport { ALL_DEVICES } from '../../constants/deviceConstants';\nimport { ALL_RELEASES } from '../../constants/releaseConstants';\nimport { emptyRole, emptyUiPermissions, itemUiPermissionsReducer, rolesById, uiPermissionsByArea, uiPermissionsById } from '../../constants/userConstants';\nimport { deepCompare, isEmpty, toggle } from '../../helpers';\n\nconst menuProps = {\n anchorOrigin: {\n vertical: 'bottom',\n horizontal: 'left'\n },\n transformOrigin: {\n vertical: 'top',\n horizontal: 'left'\n }\n};\n\nconst permissionEnabledDisabled = (uiPermission, values, permissionsArea, unscoped) => {\n const { permissionLevel, value: permissionValue, unscopedOnly = {} } = uiPermission;\n const disabled = values.some(permission => uiPermissionsById[permission].permissionLevel > permissionLevel);\n const enabled = values.some(permission => permission === permissionValue) || disabled;\n const skip = unscopedOnly[permissionsArea] && !unscoped;\n return { enabled, disabled, skip };\n};\n\nconst useStyles = makeStyles()(theme => ({\n buttons: { '&.flexbox.centered': { justifyContent: 'flex-end' } },\n roleDeletion: { marginRight: theme.spacing(2) },\n permissionSelect: { marginLeft: theme.spacing(-1.5) },\n permissionsTitle: { marginBottom: theme.spacing(-1), minHeight: theme.spacing(3) }\n}));\n\nconst PermissionsSelect = ({ disabled, label, onChange, options, permissionsArea, unscoped, values }) => {\n const { classes } = useStyles();\n\n const onInputChange = ({ target: { value } }) => {\n if (value.includes('')) {\n return onChange([]);\n }\n return onChange(value);\n };\n\n const { editablePermissions, selectedValues } = useMemo(\n () =>\n options.reduce(\n (accu, uiPermission) => {\n const { enabled, disabled, skip } = permissionEnabledDisabled(uiPermission, values, permissionsArea, unscoped);\n if (skip) {\n return accu;\n }\n accu.editablePermissions.push({ enabled, disabled, ...uiPermission });\n if (enabled) {\n accu.selectedValues.push(uiPermission.value);\n }\n return accu;\n },\n { editablePermissions: [], selectedValues: [] }\n ),\n [options, permissionsArea, unscoped, values]\n );\n\n return (\n \n {label && !values.length ? label : ''}\n (selectedValues.length ? selectedValues.map(value => uiPermissionsById[value].title).join(', ') : 'None')}\n value={values}\n >\n {editablePermissions.map(uiPermission => (\n \n ))}\n \n \n \n );\n};\n\nconst PermissionsAreaTitle = ({ className = '', explanation, title }) => (\n \n {title}\n \n \n \n
\n);\n\nconst PermissionsItem = ({ area, ...remainder }) => (\n <>\n \n \n \n);\n\nconst groupsFilter = stateGroups =>\n Object.entries(stateGroups).reduce(\n (accu, [name, groupInfo]) => {\n if (!groupInfo.filters.length) {\n accu.push(name);\n }\n return accu;\n },\n [ALL_DEVICES]\n );\n\nconst releasesFilter = stateReleaseTags => [ALL_RELEASES, ...Object.keys(stateReleaseTags)];\n\nconst scopedPermissionAreas = {\n groups: {\n key: 'groups',\n filter: groupsFilter,\n placeholder: 'Search groups',\n excessiveAccessConfig: {\n selector: ALL_DEVICES,\n warning: `For 'All devices', users with the Manage permission may also create, edit and delete devices groups.`\n }\n },\n releases: {\n key: 'releases',\n filter: releasesFilter,\n placeholder: 'Search release tags',\n excessiveAccessConfig: {\n selector: ALL_RELEASES,\n warning: `For 'All releases', users with the Manage permission may also upload and delete releases.`\n }\n }\n};\n\nconst maybeExtendPermissionSelection = (changedGroupSelection, currentGroup, items) => {\n if (items.every(item => changedGroupSelection.some(selectionItem => selectionItem.item === item))) {\n return changedGroupSelection;\n }\n if (changedGroupSelection.every(selection => selection.item && selection.uiPermissions.length)) {\n changedGroupSelection.push(emptyItemSelection);\n return changedGroupSelection;\n }\n // the following is horrible, but I couldn't come up with a better solution that ensures only a single partly defined definition exists\n const filtered = changedGroupSelection.filter(selection => !((!selection.item || !selection.uiPermissions.length) && selection !== currentGroup));\n if (!filtered.some(selection => !selection.item || !selection.uiPermissions.length)) {\n filtered.push(emptyItemSelection);\n }\n return filtered;\n};\n\nconst ItemSelection = ({\n disableEdit,\n items,\n itemsSelection,\n setter,\n permissionsArea,\n placeholder,\n excessiveAccessConfig: { selector: excessiveAccessSelector, warning: excessiveAccessWarning }\n}) => {\n const onItemSelect = (index, { target: { value } }, currentSelection) => {\n let changedSelection = [...currentSelection];\n changedSelection[index] = { ...changedSelection[index], item: value };\n changedSelection = maybeExtendPermissionSelection(changedSelection, changedSelection[index], items);\n setter(changedSelection);\n };\n\n // find missing items in selected items\n itemsSelection.forEach((selection, key) => {\n if (selection.item && !items.includes(selection.item)) {\n items.push(selection.item);\n itemsSelection[key].notFound = true;\n }\n });\n\n const onItemPermissionSelect = (index, selectedPermissions, currentSelection) => {\n let changedSelection = [...currentSelection];\n changedSelection[index] = { ...changedSelection[index], uiPermissions: selectedPermissions };\n changedSelection = maybeExtendPermissionSelection(changedSelection, changedSelection[index], items);\n setter(changedSelection);\n };\n\n const isItemNotFound = item => !!itemsSelection.filter(selection => selection.item === item && selection.notFound === true).length;\n\n const { title, uiPermissions, explanation } = uiPermissionsByArea[permissionsArea];\n return (\n <>\n \n {itemsSelection.map((itemSelection, index) => {\n const disabled = disableEdit || itemSelection.disableEdit;\n return (\n \n
\n {disabled ? (\n // empty label as a shortcut to align the layout with the select path\n
\n ) : (\n
\n {!itemSelection.item ? placeholder : ''}\n \n \n )}\n
onItemPermissionSelect(index, selectedPermissions, itemsSelection)}\n options={uiPermissions}\n permissionsArea={permissionsArea}\n unscoped={itemSelection.item === excessiveAccessSelector}\n values={itemSelection.uiPermissions}\n />\n \n {itemSelection.item === excessiveAccessSelector && (\n
\n {excessiveAccessWarning}\n
\n )}\n
\n
{adding ? 'Add a' : 'Edit'} role
\n
\n {editing && !rolesById[selectedRole.id] && (\n \n delete role\n \n )}\n \n \n \n
\n
\n \n \n {nameError && Invalid character in role name. Valid characters are a-z, A-Z, 0-9, _ and -}\n \n setDescription(e.target.value)}\n value={description}\n />\n
\n\n \n Permissions\n \n \n
\n
\n {!hasReleaseTags && (\n
\n )}\n
\n \n \n
\n \n \n );\n};\n\nexport default RoleDefinition;\n","// Copyright 2020 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\n// material ui\nimport { Add as AddIcon, ArrowRightAlt as ArrowRightAltIcon } from '@mui/icons-material';\nimport { Chip } from '@mui/material';\n\nimport { getDynamicGroups, getGroups } from '../../actions/deviceActions';\nimport { createRole, editRole, getRoles, removeRole } from '../../actions/userActions';\nimport { BENEFITS } from '../../constants/appConstants';\nimport { emptyRole, rolesById } from '../../constants/userConstants';\nimport { getFeatures, getGroupsByIdWithoutUngrouped, getIsEnterprise, getReleaseTagsById, getRolesList } from '../../selectors';\nimport DetailsTable from '../common/detailstable';\nimport { DocsTooltip } from '../common/docslink';\nimport EnterpriseNotification from '../common/enterpriseNotification';\nimport { InfoHintContainer } from '../common/info-hint';\nimport RoleDefinition from './roledefinition';\n\nconst columns = [\n { key: 'name', title: 'Role', render: ({ name }) => name },\n { key: 'description', title: 'Description', render: ({ description }) => description || '-' },\n {\n key: 'manage',\n title: 'Manage',\n render: () => (\n \n )\n }\n];\n\nexport const RoleManagement = () => {\n const [adding, setAdding] = useState(false);\n const [editing, setEditing] = useState(false);\n const [role, setRole] = useState({ ...emptyRole });\n const dispatch = useDispatch();\n const features = useSelector(getFeatures);\n const groups = useSelector(getGroupsByIdWithoutUngrouped);\n const releaseTags = useSelector(getReleaseTagsById);\n const roles = useSelector(getRolesList);\n const isEnterprise = useSelector(getIsEnterprise);\n\n useEffect(() => {\n if (Object.keys(groups).length) {\n return;\n }\n dispatch(getDynamicGroups());\n dispatch(getGroups());\n dispatch(getRoles());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dispatch, JSON.stringify(groups)]);\n\n const addRole = () => {\n setAdding(true);\n setEditing(false);\n setRole({ ...emptyRole });\n };\n\n const onEditRole = editedRole => {\n setAdding(false);\n setEditing(true);\n setRole(editedRole);\n };\n\n const onCancel = () => {\n setAdding(false);\n setEditing(false);\n };\n\n const onSubmit = submittedRole => {\n if (adding) {\n dispatch(createRole(submittedRole));\n } else {\n dispatch(editRole(submittedRole));\n }\n onCancel();\n };\n\n const items = useMemo(\n () =>\n Object.keys(rolesById)\n .reverse()\n .reduce((accu, key) => {\n const index = accu.findIndex(({ id }) => id === key);\n accu = [accu[index], ...accu.filter((item, itemIndex) => index !== itemIndex)];\n return accu;\n }, roles),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(roles)]\n );\n\n return (\n \n
\n
Roles
\n \n \n \n \n \n
\n
} label=\"Add a role\" onClick={addRole} disabled={!isEnterprise} />\n
dispatch(removeRole(name))}\n selectedRole={role}\n stateGroups={groups}\n stateReleaseTags={releaseTags}\n />\n {isTrial ? '1. Choose a plan' : 'Plans'}
\n \n {Object.values(PLANS).map(item => (\n
onPlanSelect(item.id)}\n >\n {!isTrial && canUpgrade(item.id) && (\n {item.id === currentPlan ? 'current plan' : 'upgrade'}
\n )}\n \n {item.name} {item.offer && isTrial && offerValid ? offerTag : null}\n
\n \n {item.offer && isTrial && offerValid ? (\n <>\n
{item.offerprice}
\n
{item.price2}
\n \n ) : (\n <>\n
{item.price}
\n
{item.deviceCount}
\n \n )}\n
\n {item.features.map((feature, index) => (\n - \n {feature}\n
\n ))}\n
\n Get more features with add-ons
\n\n \n
\n Extend Mender features with our add-ons. Select one or more from the list and submit to request add-ons to be added to your plan. We'll adjust\n your subscription and confirm it with you.\n
\n {relevantAddons.map(addOn => {\n const isEligible = addOn.eligible.indexOf(updatedPlan) > -1;\n\n return (\n
(isEligible ? onAddOnClick(e, addOn.name, !addOn.isEnabled) : () => false)}\n >\n \n {addOn.title}
\n {isUpgrade && (\n \n
{addOn[updatedPlan].price}
\n
{addOn[updatedPlan].deviceCount}
\n
\n
{title}
\n {isEnterpriseUpgrade ? 'You are requesting a quote for the following subscription:' : 'You are requesting the following changes:'}\n
\n
\n Plan: {isUpgrade ? 'Upgrade to ' : ''}\n {PLANS[updatedPlan].name}\n {!isTrial && !!addOns.length && (\n \n
\n Add-ons: {addOns.map(addon => ADDONS[addon.name].title).join(', ')}\n \n )}\n
\n
\n
\n Your message\n setMessage(e.target.value)} />\n \n
\n {isTrial || isEnterpriseUpgrade\n ? `After we receive your request, we'll be in touch to discuss your needs and provide a quote.`\n : `We'll send you a confirmation of any changes to your subscription.`}\n
\n
onSendMessage(message)}\n style={{ alignSelf: 'flex-start' }}\n variant=\"contained\"\n >\n Submit request\n \n \n
Upgrade now
\n
\n
\n Your upgrade was successful! You are now signed up to the {newPlan} plan.\n
\n
Redirecting you to your organization page...
\n
\n
\n
\n
{title}
\n
{description}
\n
\n Learn more about the different plans and at {/* eslint-disable-next-line react/jsx-no-target-blank */}\n \n mender.io/plans/pricing\n \n . Prices can change at larger device counts, please see our {/* eslint-disable-next-line react/jsx-no-target-blank */}\n \n price calculator\n {' '}\n for more.\n
\n
\n {isTrial && offerValid && (\n
\n {offerTag} – upgrade before December 31st to get a 20% discount for 6 months on Mender Basic and Mender Professional plans. The discount will be\n automatically applied to your account.\n
\n )}\n {isTrial ?
:
}\n {isTrial && updatedPlan !== PLANS.enterprise.id && (\n <>\n
2. Enter your payment details
\n
\n You are upgrading to{' '}\n \n Mender {PLANS[updatedPlan].name}\n {' '}\n for {PLANS[updatedPlan].price}\n
\n
Promise.resolve(dispatch(cancelUpgrade(org.id)))}\n onComplete={handleUpgrade}\n onSubmit={() => Promise.resolve(dispatch(startUpgrade(org.id)))}\n setSnackbar={message => dispatch(setSnackbar(message))}\n isSignUp={true}\n />\n \n )}\n {(!isTrial || updatedPlan === PLANS.enterprise.id) && (\n \n )}\n \n
\n
\n {loadingFinished && (\n \n \n \n )}\n
\n
\n
\n
An error occured.
\n
Try refreshing the page, or look below for more information on the error that occured.
\n
\n {this.state.error.toString()}\n
\n {this.state.info.componentStack}\n \n
\n
\n We prepared an image, ready for Mender, for you to start with. You can find it in the{' '}\n documentation, which also contains\n instructions for initial device setup. Once you're done flashing you can go ahead and proceed to the next step.\n
\n);\n\nconst IntegrationsLink = () => (\n \n Integration settings\n \n);\n\nexport const ExternalProviderTip = ({ hasExternalIntegration, integrationProvider }) => (\n \n {hasExternalIntegration ? (\n \n Devices added here will be automatically integrated with the {EXTERNAL_PROVIDER[integrationProvider].title} you set in the{' '}\n .\n
\n ) : (\n \n To connect your devices with {EXTERNAL_PROVIDER[integrationProvider].title}, go to and set up the integration.\n
\n )}\n \n }\n >\n \n \n);\n\nexport const DeviceTypeSelectionStep = ({\n hasConvertedImage,\n hasExternalIntegration,\n integrationProvider,\n onboardingState,\n onSelect,\n selection = '',\n version\n}) => {\n const shouldShowOnboardingTip = !onboardingState.complete && onboardingState.showTips;\n const hasExternalIntegrationSupport = versionCompare(version, '3.2') > -1;\n return (\n <>\n Enter your device type
\n Setting this attribute on the device ensures that the device will only receive updates for compatible software releases.
\n\n \n
{\n // Value selected with enter, right from the input\n if (typeof option === 'string') {\n return option;\n }\n if (option.key === 'custom' && option.value === selection) {\n return option.value;\n }\n return option.title;\n }}\n handleHomeEndKeys\n includeInputInList\n filterOptions={(options, params) => {\n const filtered = filter(options, params);\n if (filtered.length !== 1 && params.inputValue !== '') {\n filtered.push({\n value: params.inputValue,\n key: 'custom',\n title: `Use \"${params.inputValue}\"`\n });\n }\n return filtered;\n }}\n options={types}\n onChange={onSelect}\n renderInput={params => (\n \n )}\n style={{ maxWidth: 300 }}\n value={selection}\n />\n {hasExternalIntegrationSupport && }\n {shouldShowOnboardingTip ? : }\n Log into your device and install the Mender client
\n \n Copy & paste and run this command on your device:\n
\n advanceOnboarding(onboardingSteps.DASHBOARD_ONBOARDING_START)} withDescription={true} />\n This downloads the Mender client on the device, sets the configuration and starts the client.
\n \n Once the client has started, your device will attempt to connect to the server. It will then appear in your Pending devices tab and you can continue.\n
\n \n );\n};\n\nconst steps = {\n 1: DeviceTypeSelectionStep,\n 2: InstallationStep\n};\n\nconst integrationProvider = EXTERNAL_PROVIDER['iot-hub'].provider;\n\nexport const PhysicalDeviceOnboarding = ({ progress }) => {\n const [selection, setSelection] = useState('');\n const hasExternalIntegration = useSelector(state => {\n const { credentials = {} } = state.organization.externalDeviceIntegrations.find(integration => integration.provider === integrationProvider) ?? {};\n const { [EXTERNAL_PROVIDER['iot-hub'].credentialsAttribute]: azureConnectionString = '' } = credentials;\n return !!azureConnectionString;\n });\n const ipAddress = useSelector(state => state.app.hostAddress);\n const isEnterprise = useSelector(getIsEnterprise);\n const { isDemoMode, isHosted } = useSelector(getFeatures);\n const isPreRelease = useSelector(getIsPreview);\n const onboardingState = useSelector(getOnboardingState);\n const { tenant_token: tenantToken } = useSelector(getOrganization);\n const { Integration: version } = useSelector(getFullVersionInformation);\n const { token } = useSelector(getCurrentSession);\n const dispatch = useDispatch();\n\n useEffect(() => {\n dispatch(setOnboardingApproach('physical'));\n }, [dispatch]);\n\n const onSelect = (e, deviceType, reason) => {\n if (reason === 'selectOption') {\n dispatch(setOnboardingDeviceType(deviceType.value));\n setSelection(deviceType.value);\n } else if (reason === 'clear') {\n dispatch(setOnboardingDeviceType(''));\n setSelection('');\n }\n };\n\n const hasConvertedImage = !!selection && selection.length && (selection.startsWith('raspberrypi3') || selection.startsWith('raspberrypi4'));\n\n const ComponentToShow = steps[progress];\n return (\n dispatch(advanceOnboarding(step))}\n hasExternalIntegration={hasExternalIntegration}\n hasConvertedImage={hasConvertedImage}\n integrationProvider={integrationProvider}\n ipAddress={ipAddress}\n isEnterprise={isEnterprise}\n isHosted={isHosted}\n isDemoMode={isDemoMode}\n isPreRelease={isPreRelease}\n onboardingState={onboardingState}\n onSelect={onSelect}\n selection={selection}\n tenantToken={tenantToken}\n token={token}\n version={version}\n />\n );\n};\n\nexport default PhysicalDeviceOnboarding;\n","// Copyright 2019 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { setOnboardingApproach } from '../../../actions/onboardingActions';\nimport { initialState as onboardingReducerState } from '../../../reducers/onboardingReducer';\nimport { getFeatures, getOrganization } from '../../../selectors';\nimport CopyCode from '../copy-code';\nimport DocsLink from '../docslink';\n\nexport const getDemoDeviceCreationCommand = tenantToken =>\n tenantToken\n ? `TENANT_TOKEN='${tenantToken}'\\ndocker run -it -p ${onboardingReducerState.demoArtifactPort}:${onboardingReducerState.demoArtifactPort} -e SERVER_URL='https://${window.location.hostname}' \\\\\\n-e TENANT_TOKEN=$TENANT_TOKEN --pull=always mendersoftware/mender-client-qemu`\n : './demo --client up';\n\nexport const VirtualDeviceOnboarding = () => {\n const dispatch = useDispatch();\n const { isHosted } = useSelector(getFeatures);\n const { tenant_token: tenantToken } = useSelector(getOrganization);\n\n useEffect(() => {\n dispatch(setOnboardingApproach('virtual'));\n }, [dispatch]);\n\n const codeToCopy = getDemoDeviceCreationCommand(tenantToken);\n\n return (\n \n {isHosted ? (\n
\n ) : (\n
\n
1. Prerequisites\n
\n As you are running Mender on-premise, for these instructions we assume that you already have Docker installed and the Mender integration environment\n up and running on your machine.\n
\n
To start a virtual device, change directory into the folder where you cloned Mender integration.
\n
\n )}\n
\n 2. Copy & paste and run the following command to start the virtual device:\n
\n
\n
The device should appear in the Pending devices view in a couple of minutes.
\n
\n Visit for more information on managing the virtual\n device.\n
\n
\n You can connect almost any device and Linux OS with Mender, but to make things simple during evaluation we recommend you use a Raspberry Pi as a test\n device.\n
\n \n
Raspberry Pi quick start
\n
We'll walk you through the steps to connect a Raspberry Pi and deploy your first update with Mender.
\n
\n
\n {[raspberryPi, raspberryPi4].map((tile, index) => (\n
\n ))}\n
\n
\n
\n
\n
\n
\n
Use a virtual device
\n
\n
\n
Don't have a Raspberry Pi?
\n
You can use our Docker-run virtual device to go through the same tutorial.
\n {hasMonitor && (\n
\n If you want to evaluate our commercial components such as mender-monitor, please use a physical device instead as the virtual client does not\n support these components at this time.\n \n )}\n
setVirtualDevice(true)}>Try a virtual device\n
\n
\n
Other devices
\n
See the documentation to integrate the following with Mender:
\n
\n {[\n { key: 'debian', target: 'operating-system-updates-debian-family', title: 'Debian family' },\n { key: 'yocto', target: 'operating-system-updates-yocto-project', title: 'Yocto OSes' }\n ].map(item => (\n - \n \n
\n ))}\n
\n Or visit {/* eslint-disable-next-line react/jsx-no-target-blank */}\n
\n Mender Hub\n {' '}\n and search integrations for your device and OS.\n
\n
\n {targets.map(({ key, target, title }) => {\n return (\n /* eslint-disable-next-line react/jsx-no-target-blank */\n
\n {title}\n \n );\n })}\n
\n
\n
\n {announcement}\n
\n
\n
Demo mode
\n \n Mender is currently running in demo mode.\n
\n \n .\n
\n \n }\n >\n <>\n \n Demo mode\n \n \n);\n\nexport default DemoNotification;\n","// Copyright 2017 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\n// material ui\nimport { Refresh as RefreshIcon } from '@mui/icons-material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { DEPLOYMENT_ROUTES } from '../../constants/deploymentConstants';\n\nconst useStyles = makeStyles()(theme => ({\n icon: { color: theme.palette.grey[500], margin: '0 7px 0 10px', top: '5px', fontSize: '20px' }\n}));\n\nconst DeploymentNotifications = props => {\n const { classes } = useStyles();\n return (\n \n {props.inprogress}\n \n \n );\n};\n\nexport default DeploymentNotifications;\n","\"use client\";\n\nimport createSvgIcon from './utils/createSvgIcon';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon( /*#__PURE__*/_jsx(\"path\", {\n d: \"M22 9V7h-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2v-2h-2V9h2zm-4 10H4V5h14v14zM6 13h5v4H6zm6-6h4v3h-4zM6 7h5v5H6zm6 4h4v6h-4z\"\n}), 'DeveloperBoard');","// Copyright 2017 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\n// material ui\nimport { DeveloperBoard as DeveloperBoardIcon } from '@mui/icons-material';\n\nimport pluralize from 'pluralize';\n\nimport { MenderTooltipClickable } from '../common/mendertooltip';\nimport { DeviceLimitContact } from '../devices/dialogs/preauth-dialog';\n\nconst DeviceNotifications = ({ total, limit, pending }) => {\n const approaching = limit && total / limit > 0.8;\n const warning = limit && limit <= total;\n const content = (\n <>\n \n {total.toLocaleString()}\n {limit ? /{limit.toLocaleString()} : null}\n\n \n \n {pending ? (\n \n {pending.toLocaleString()} pending\n \n ) : null}\n \n );\n if (!limit) {\n return {content}
;\n }\n return (\n \n Device limit
\n {approaching || warning ? (\n You {approaching ? are nearing : have reached} your device limit.
\n ) : (\n \n You can still connect another {(limit - total).toLocaleString()} {pluralize('devices', limit - total)}.\n
\n )}\n \n \n Learn about the different plans available by visiting {/* eslint-disable-next-line react/jsx-no-target-blank */}\n \n mender.io/pricing\n \n
\n \n }\n >\n {content}\n \n );\n};\nexport default DeviceNotifications;\n","// Copyright 2020 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React from 'react';\n\nimport { Announcement as AnnouncmentIcon, Close as CloseIcon } from '@mui/icons-material';\n\nimport DocsLink from '../common/docslink';\n\nconst OfferHeader = ({ onHide }) => (\n \n);\n\nexport default OfferHeader;\n","// Copyright 2020 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nimport { InfoOutlined as InfoIcon, Payment } from '@mui/icons-material';\nimport { Button } from '@mui/material';\n\nimport moment from 'moment';\nimport momentDurationFormatSetup from 'moment-duration-format';\nimport pluralize from 'pluralize';\n\nimport { MenderTooltipClickable } from '../common/mendertooltip';\n\nmomentDurationFormatSetup(moment);\n\nconst today = new Date();\n\nconst TrialInformation = () => (\n <>\n Trial plan
\n You're using the trial version of Mender – it's free for up to 10 devices for 12 months.
\n \n Upgrade to a plan to add more devices and continue using Mender after the trial expires.\n
\n \n Or compare the plans at {/* eslint-disable-next-line react/jsx-no-target-blank */}\n \n mender.io/plans/pricing\n \n .\n
\n \n);\n\nconst TrialNotification = ({ iconClassName, sectionClassName, expiration }) => {\n const expirationDate = moment(expiration);\n const duration = moment.duration(expirationDate.diff(moment(today)));\n const daysLeft = Math.floor(duration.asDays());\n return (\n \n
}>\n <>\n
\n Trial plan\n \n \n
} to=\"/settings/upgrade\">\n Upgrade now\n \n\n {expiration && daysLeft <= 100 && daysLeft >= 0 && (\n
\n You have {daysLeft} {pluralize('day', daysLeft)} remaining on the trial plan\n
\n )}\n
\n {Object.entries(versionInformation).reduce((accu, [key, version]) => {\n if (version) {\n accu.push(\n
\n {linkables[key] ? (\n \n {key}\n \n ) : (\n {key}
\n )}\n \n {version}\n
\n \n );\n }\n return accu;\n }, [])}\n
\n {title}\n
\n \n );\n};\n\nexport const LeftNav = () => {\n const releasesRef = useRef();\n const { classes } = useStyles();\n\n const userCapabilities = useSelector(getUserCapabilities);\n return (\n \n \n {listItems.reduce((accu, item, index) => {\n if (!item.canAccess({ userCapabilities })) {\n return accu;\n }\n accu.push(\n \n \n \n );\n return accu;\n }, [])}\n
\n \n \n \n \n \n }\n secondary={}\n />\n \n
\n
\n );\n};\n\nexport default LeftNav;\n","// Copyright 2022 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\n\nimport { Close as CloseIcon } from '@mui/icons-material';\n// material ui\nimport { ClickAwayListener, Drawer, IconButton, Typography } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport pluralize from 'pluralize';\n\nimport { setSearchState } from '../actions/appActions';\nimport { setDeviceListState } from '../actions/deviceActions';\nimport { SORTING_OPTIONS, TIMEOUTS } from '../constants/appConstants';\nimport { getIdAttribute, getMappedDevicesList, getUserSettings } from '../selectors';\nimport { getHeaders } from './devices/authorized-devices';\nimport { routes } from './devices/base-devices';\nimport Devicelist from './devices/devicelist';\n\nconst useStyles = makeStyles()(theme => ({\n drawerOffset: {\n top: theme.mixins.toolbar.minHeight + 1,\n left: 200\n },\n paper: {\n maxWidth: '100vw',\n minHeight: '20vh',\n boxShadow: 'none'\n }\n}));\n\nconst leftNavOffset = 500;\nconst ResultTitle = ({ onClick, term, total }) => {\n const content = `${total ? total : 'No'} ${pluralize('device', total)} found for \"${term}\"`;\n let props = { className: 'bold' };\n let style = {};\n if (!total) {\n props = { className: 'info' };\n style = { width: `calc(100% - ${leftNavOffset}px)` };\n }\n return (\n \n );\n};\n\nexport const SearchResult = ({ onToggleSearchResult, open = true }) => {\n const navigate = useNavigate();\n const dispatch = useDispatch();\n\n const { columnSelection } = useSelector(getUserSettings);\n const customColumnSizes = useSelector(state => state.users.customColumns);\n const devices = useSelector(state => getMappedDevicesList(state, 'search'));\n const idAttribute = useSelector(getIdAttribute);\n const searchState = useSelector(state => state.app.searchState);\n\n const { classes } = useStyles();\n\n const [columnHeaders, setColumnHeaders] = useState(getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute));\n\n const { isSearching, searchTerm, searchTotal, sort = {} } = searchState;\n const { direction: sortDown = SORTING_OPTIONS.desc, key: sortCol } = sort;\n\n useEffect(() => {\n const columnHeaders = getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute);\n setColumnHeaders(columnHeaders);\n }, [columnSelection, idAttribute, idAttribute.attribute]);\n\n useEffect(() => {\n if (!open && isSearching) {\n onToggleSearchResult();\n }\n }, [open, isSearching, onToggleSearchResult]);\n\n useEffect(() => {\n if (open && !searchTerm) {\n onToggleSearchResult();\n }\n }, [onToggleSearchResult, open, searchTerm]);\n\n const onDeviceSelect = device => {\n dispatch(setDeviceListState({ selectedId: device.id }));\n onToggleSearchResult();\n setTimeout(() => navigate(`/devices/${device.status}?id=${device.id}`), TIMEOUTS.debounceShort);\n };\n\n const handlePageChange = page => {\n dispatch(setSearchState({ page }));\n };\n\n const onSortChange = attribute => {\n let changedSortCol = attribute.name;\n let changedSortDown = sortDown === SORTING_OPTIONS.desc ? SORTING_OPTIONS.asc : SORTING_OPTIONS.desc;\n if (changedSortCol !== sortCol) {\n changedSortDown = SORTING_OPTIONS.desc;\n }\n dispatch(setSearchState({ page: 1, sort: { direction: changedSortDown, key: changedSortCol, scope: attribute.scope } }));\n };\n\n const onClearClick = () => {\n dispatch(setSearchState({ searchTerm: '' }));\n onToggleSearchResult();\n };\n\n return (\n \n \n \n \n \n \n \n
\n {!!searchTotal && (\n \n )}\n \n \n );\n};\n\nexport default SearchResult;\n","// Copyright 2022 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useCallback, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { Cancel as CancelIcon } from '@mui/icons-material';\nimport { Drawer, IconButton, LinearProgress, Tooltip, drawerClasses } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport pluralize from 'pluralize';\n\nimport { cancelFileUpload } from '../actions/releaseActions';\nimport { FileSize } from '../helpers';\n\nconst useStyles = makeStyles()(theme => ({\n progress: {\n backgroundColor: theme.palette.grey[600],\n gridColumn: 1,\n margin: '15px 0'\n },\n drawer: {\n [`.${drawerClasses.paper}`]: {\n maxWidth: 'initial'\n }\n },\n progressBarContainer: {\n position: 'fixed',\n display: 'grid',\n bottom: 0,\n gridTemplateRows: 'min-content',\n height: 'max-content',\n padding: `0 ${theme.spacing(2)}px`,\n overflow: 'hidden',\n width: '100%',\n zIindex: 10000,\n transition: 'all 0.2s ease-in-out'\n },\n progressContainer: {\n backgroundColor: theme.palette.background.default,\n borderColor: theme.palette.grey[300],\n color: theme.palette.grey[600],\n display: 'grid',\n gridTemplateRows: '30px 30px',\n gridTemplateColumns: '1fr 60px',\n columnGap: theme.spacing(2),\n ['> .MuiIconButton-root']: {\n gridColumn: 2,\n gridRowStart: 1,\n gridRowEnd: 2,\n height: 60\n }\n }\n}));\n\nconst UploadProgressBar = ({ classes, upload, uploadId }) => {\n const { name, size, uploadProgress } = upload;\n const dispatch = useDispatch();\n const onCancelClick = useCallback(() => dispatch(cancelFileUpload(uploadId)), [dispatch, uploadId]);\n return (\n \n
\n {Math.round(uploadProgress)}% - {name} ()\n
\n
\n
\n \n \n \n \n
\n {isUploading && !isHovering && }\n \n {pluralize('Upload', Object.keys(uploads).length)} in progress
\n {Object.entries(uploads).map(([uploadId, upload]) => (\n \n ))}\n \n
\n );\n};\n\nexport default Uploads;\n","// Copyright 2015 Northern.tech AS\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { useIdleTimer, workerTimers } from 'react-idle-timer';\nimport { Provider, useDispatch, useSelector } from 'react-redux';\nimport { BrowserRouter, useLocation, useNavigate } from 'react-router-dom';\n\nimport createCache from '@emotion/cache';\nimport { CacheProvider } from '@emotion/react';\nimport { CssBaseline } from '@mui/material';\nimport { ThemeProvider, createTheme } from '@mui/material/styles';\nimport withStyles from '@mui/styles/withStyles';\nimport { LocalizationProvider } from '@mui/x-date-pickers';\nimport { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';\nimport { makeStyles } from 'tss-react/mui';\n\nimport Cookies from 'universal-cookie';\n\nimport { parseEnvironmentInfo, setSnackbar } from '../actions/appActions';\nimport { logoutUser, setAccountActivationCode, setShowConnectingDialog } from '../actions/userActions';\nimport { getSessionInfo, maxSessionAge, updateMaxAge } from '../auth';\nimport SharedSnackbar from '../components/common/sharedsnackbar';\nimport { PrivateRoutes, PublicRoutes } from '../config/routes';\nimport { TIMEOUTS } from '../constants/appConstants';\nimport ErrorBoundary from '../errorboundary';\nimport { isDarkMode, toggle } from '../helpers';\nimport store from '../reducers';\nimport { getCurrentSession, getCurrentUser, getUserSettings } from '../selectors';\nimport { dark as darkTheme, light as lightTheme } from '../themes/Mender';\nimport Tracking from '../tracking';\nimport ConfirmDismissHelptips from './common/dialogs/confirmdismisshelptips';\nimport DeviceConnectionDialog from './common/dialogs/deviceconnectiondialog';\nimport Footer from './footer';\nimport Header from './header/header';\nimport LeftNav from './leftnav';\nimport SearchResult from './search-result';\nimport Uploads from './uploads';\n\nconst cache = createCache({ key: 'mui', prepend: true });\n\nconst activationPath = '/activate';\nconst trackingBlacklist = [/\\/password\\/.+/i];\nconst timeout = maxSessionAge * 1000; // 15 minutes idle time\nconst cookies = new Cookies();\n\nconst reducePalette =\n prefix =>\n (accu, [key, value]) => {\n if (value instanceof Object) {\n return {\n ...accu,\n ...Object.entries(value).reduce(reducePalette(`${prefix}-${key}`), {})\n };\n } else {\n accu[`${prefix}-${key}`] = value;\n }\n return accu;\n };\n\nconst cssVariables = ({ palette }) => {\n const muiVariables = Object.entries(palette).reduce(reducePalette('--mui'), {});\n return {\n '@global': {\n ':root': {\n ...muiVariables,\n '--mui-overlay': palette.grey[400]\n }\n }\n };\n};\n\nconst WrappedBaseline = withStyles(cssVariables)(CssBaseline);\n\nconst useStyles = makeStyles()(() => ({\n public: {\n display: 'grid',\n gridTemplateRows: 'max-content 1fr max-content',\n height: '100vh',\n '.content': {\n alignSelf: 'center',\n justifySelf: 'center'\n }\n }\n}));\n\nexport const AppRoot = () => {\n const [showSearchResult, setShowSearchResult] = useState(false);\n const navigate = useNavigate();\n const { pathname = '', hash } = useLocation();\n\n const dispatch = useDispatch();\n const { id: currentUser } = useSelector(getCurrentUser);\n const showDismissHelptipsDialog = useSelector(state => !state.onboarding.complete && state.onboarding.showTipsDialog);\n const showDeviceConnectionDialog = useSelector(state => state.users.showConnectDeviceDialog);\n const snackbar = useSelector(state => state.app.snackbar);\n const trackingCode = useSelector(state => state.app.trackerCode);\n const { mode } = useSelector(getUserSettings);\n const { token: storedToken } = getSessionInfo();\n const { expiresAt, token = storedToken } = useSelector(getCurrentSession);\n\n const trackLocationChange = useCallback(\n pathname => {\n let page = pathname;\n // if we're on page whose path might contain sensitive device/ group/ deployment names etc. we sanitize the sent information before submission\n if (page.includes('=') && (page.startsWith('/devices') || page.startsWith('/deployments'))) {\n const splitter = page.lastIndexOf('/');\n const filters = page.slice(splitter + 1);\n const keyOnlyFilters = filters.split('&').reduce((accu, item) => `${accu}:${item.split('=')[0]}&`, ''); // assume the keys to filter by are not as revealing as the values things are filtered by\n page = `${page.substring(0, splitter)}?${keyOnlyFilters.substring(0, keyOnlyFilters.length - 1)}`; // cut off the last & of the reduced filters string\n } else if (page.startsWith(activationPath)) {\n dispatch(setAccountActivationCode(page.substring(activationPath.length + 1)));\n navigate('/settings/my-profile', { replace: true });\n } else if (trackingBlacklist.some(item => !!page.match(item))) {\n return;\n }\n Tracking.pageview(page);\n },\n [dispatch, navigate]\n );\n\n useEffect(() => {\n dispatch(parseEnvironmentInfo());\n if (!trackingCode) {\n return;\n }\n if (!cookies.get('_ga')) {\n Tracking.cookieconsent().then(({ trackingConsentGiven }) => {\n if (trackingConsentGiven) {\n Tracking.initialize(trackingCode);\n Tracking.pageview();\n }\n });\n } else {\n Tracking.initialize(trackingCode);\n }\n }, [dispatch, trackingCode]);\n\n useEffect(() => {\n if (!(trackingCode && cookies.get('_ga'))) {\n return;\n }\n trackLocationChange(pathname);\n }, [pathname, trackLocationChange, trackingCode]);\n\n useEffect(() => {\n trackLocationChange(pathname);\n // the following is added to ensure backwards capability for hash containing routes & links (e.g. /ui/#/devices => /ui/devices)\n if (hash) {\n navigate(hash.substring(1));\n }\n }, [hash, navigate, pathname, trackLocationChange]);\n\n const updateExpiryDate = useCallback(() => updateMaxAge({ expiresAt, token }), [expiresAt, token]);\n\n const onIdle = useCallback(() => {\n if (!!expiresAt && currentUser) {\n // logout user and warn\n return dispatch(logoutUser())\n .catch(updateExpiryDate)\n .then(() => {\n navigate('//'); // double / to ensure the logged out URL conforms to `/ui/` in order to not trigger a redirect and potentially use state\n // async snackbar setting to ensure the login screen has loaded as the snackbar might be cleared by other actions otherwise\n setTimeout(() => dispatch(setSnackbar('Your session has expired. You have been automatically logged out due to inactivity.')), TIMEOUTS.oneSecond);\n });\n }\n }, [currentUser, dispatch, expiresAt, navigate, updateExpiryDate]);\n\n useIdleTimer({ crossTab: true, onAction: updateExpiryDate, onActive: updateExpiryDate, onIdle, syncTimers: 400, timeout, timers: workerTimers });\n\n const onToggleSearchResult = () => setShowSearchResult(toggle);\n\n const theme = createTheme(isDarkMode(mode) ? darkTheme : lightTheme);\n\n const { classes } = useStyles();\n\n return (\n \n \n <>\n {token ? (\n \n
\n
\n
\n {showDismissHelptipsDialog &&
}\n {showDeviceConnectionDialog &&
dispatch(setShowConnectingDialog(false))} />}\n