{message}
\r\n } else {\r\n switch (action) {\r\n case LoginActions.Login:\r\n return (Loading Login Page ...
);\r\n case LoginActions.LoginCallback:\r\n return (Logging In ...
);\r\n case LoginActions.Profile:\r\n case LoginActions.Register:\r\n return ();\r\n default:\r\n throw new Error(`Invalid action '${action}'`);\r\n }\r\n }\r\n }\r\n\r\n async login(returnUrl) {\r\n\t\tconst state = { returnUrl };\r\n const result = await authService.signIn(state);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n break;\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(returnUrl);\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(`Invalid status result ${result.status}.`);\r\n }\r\n }\r\n\r\n async processLoginCallback() {\r\n const url = window.location.href;\r\n const result = await authService.completeSignIn(url);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n // There should not be any redirects as the only time completeSignIn finishes\r\n // is when we are doing a redirect sign in flow.\r\n throw new Error('Should not redirect.');\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(this.getReturnUrl(result.state));\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(`Invalid authentication result status '${result.status}'.`);\r\n }\r\n }\r\n\r\n getReturnUrl(state) {\r\n const params = new URLSearchParams(window.location.search);\r\n const fromQuery = params.get(QueryParameterNames.ReturnUrl);\r\n if (fromQuery && !fromQuery.startsWith(`${window.location.origin}/`)) {\r\n // This is an extra check to prevent open redirects.\r\n throw new Error(\"Invalid return url. The return url needs to have the same origin as the current page.\")\r\n }\r\n\r\n return (state && state.returnUrl) || fromQuery || `${window.location.origin}/`;\r\n }\r\n\r\n redirectToRegister() {\r\n this.redirectToApiAuthorizationPath(`${ApplicationPaths.IdentityRegisterPath}?${QueryParameterNames.ReturnUrl}=${encodeURI(ApplicationPaths.Login)}`);\r\n }\r\n\r\n redirectToProfile() {\r\n this.redirectToApiAuthorizationPath(ApplicationPaths.IdentityManagePath);\r\n }\r\n\r\n redirectToApiAuthorizationPath(apiAuthorizationPath) {\r\n const redirectUrl = `${window.location.origin}${apiAuthorizationPath}`;\r\n // It's important that we do a replace here so that when the user hits the back arrow on the\r\n // browser he gets sent back to where it was on the app instead of to an endpoint on this\r\n // component.\r\n window.location.replace(redirectUrl);\r\n }\r\n\r\n navigateToReturnUrl(returnUrl) {\r\n // It's important that we do a replace here so that we remove the callback uri with the\r\n // fragment containing the tokens from the browser history.\r\n window.location.replace(returnUrl);\r\n }\r\n}\r\n","import React from 'react'\r\nimport { Component } from 'react';\r\nimport authService from './AuthorizeService';\r\nimport { AuthenticationResultStatus } from './AuthorizeService';\r\nimport { QueryParameterNames, LogoutActions, ApplicationPaths } from './ApiAuthorizationConstants';\r\n\r\n// The main responsibility of this component is to handle the user's logout process.\r\n// This is the starting point for the logout process, which is usually initiated when a\r\n// user clicks on the logout button on the LoginMenu component.\r\nexport class Logout extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n message: undefined,\r\n isReady: false,\r\n authenticated: false\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const action = this.props.action;\r\n switch (action) {\r\n case LogoutActions.Logout:\r\n if (!!window.history.state.state.local) {\r\n this.logout(this.getReturnUrl());\r\n } else {\r\n // This prevents regular links to {message}
);\r\n } else {\r\n const action = this.props.action;\r\n switch (action) {\r\n case LogoutActions.Logout:\r\n return (Logging Out ...
);\r\n case LogoutActions.LogoutCallback:\r\n return (Logging Out ...
);\r\n case LogoutActions.LoggedOut:\r\n return ({message}
);\r\n default:\r\n throw new Error(`Invalid action '${action}'`);\r\n }\r\n }\r\n }\r\n\r\n async logout(returnUrl) {\r\n this.props.online(false);\r\n\r\n const state = { returnUrl };\r\n const isauthenticated = await authService.isAuthenticated();\r\n if (isauthenticated) {\r\n const result = await authService.signOut(state);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n break;\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(returnUrl);\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(\"Invalid authentication result status.\");\r\n }\r\n } else {\r\n this.setState({ message: \"You successfully logged out!\" });\r\n }\r\n }\r\n\r\n async processLogoutCallback() {\r\n const url = window.location.href;\r\n const result = await authService.completeSignOut(url);\r\n switch (result.status) {\r\n case AuthenticationResultStatus.Redirect:\r\n // There should not be any redirects as the only time completeAuthentication finishes\r\n // is when we are doing a redirect sign in flow.\r\n throw new Error('Should not redirect.');\r\n case AuthenticationResultStatus.Success:\r\n await this.navigateToReturnUrl(this.getReturnUrl(result.state));\r\n break;\r\n case AuthenticationResultStatus.Fail:\r\n this.setState({ message: result.message });\r\n break;\r\n default:\r\n throw new Error(\"Invalid authentication result status.\");\r\n }\r\n }\r\n\r\n async populateAuthenticationState() {\r\n const authenticated = await authService.isAuthenticated();\r\n this.setState({ isReady: true, authenticated });\r\n }\r\n\r\n getReturnUrl(state) {\r\n const params = new URLSearchParams(window.location.search);\r\n const fromQuery = params.get(QueryParameterNames.ReturnUrl);\r\n if (fromQuery && !fromQuery.startsWith(`${window.location.origin}/`)) {\r\n // This is an extra check to prevent open redirects.\r\n throw new Error(\"Invalid return url. The return url needs to have the same origin as the current page.\")\r\n }\r\n return (state && state.returnUrl) ||\r\n fromQuery ||\r\n `${window.location.origin}${ApplicationPaths.LoggedOut}`;\r\n }\r\n\r\n navigateToReturnUrl(returnUrl) {\r\n return window.location.replace(returnUrl);\r\n }\r\n}\r\n","import React, { Fragment } from 'react';\r\nimport { Route } from 'react-router';\r\nimport { Login } from './Login'\r\nimport { Logout } from './Logout'\r\nimport { ApplicationPaths, LoginActions, LogoutActions } from './ApiAuthorizationConstants';\r\n\r\nexport default function ApiAuthorizationRoutes({ online }) {\r\n\r\n function loginAction(name) {\r\n return (\r\n {\r\n expandedInUI ?\r\n (devices.fetching ? (
\r\n );\r\n }\r\n\r\n function tableHead() {\r\n return expandedInUI ?\r\n (\r\n No devices found
)) :\r\n (\r\n \r\n {tableHead()}\r\n {tableBody()}\r\n
\r\n
)\r\n }\r\n \r\n
\r\n );\r\n }\r\n\r\n let contents = renderAirserversTable();\r\n\r\n return (\r\n \r\n \r\n {tableHead()}\r\n {tableBody()}\r\n
\r\n
\r\n \r\n {contents}\r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faPlusCircle, faTimesCircle } from '@fortawesome/pro-regular-svg-icons';\r\nimport 'react-tippy/dist/tippy.css';\r\nimport { Tooltip, } from 'react-tippy';\r\n\r\nexport default function PlusX({ name, checked, setChecked, multipleEdit, plusXPadding = '' }) {\r\n function handleChange() {\r\n setChecked(!checked);\r\n }\r\n\r\n return (\r\n \r\n {/* fake fields are a workaround for chrome autofill getting the wrong fields */}\r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { Form, Col } from 'react-bootstrap';\r\n\r\nfunction prettyText(text) {\r\n return text === '' ? 'Not Available' : text;\r\n}\r\n\r\nexport default function InfoRow({ label, value, valueLink = '' }) {\r\n return (\r\n \\n\");\r\n }\r\n\r\n return (\r\n \r\n );\r\n}\r\n","import React, { Fragment } from 'react';\r\nimport { Form, Col } from 'react-bootstrap';\r\nimport PlusX from '../PlusX';\r\nimport Switch from '../Switch';\r\n\r\nexport default function GuestConnectivityTab({ builtInHotspot, checked_builtInHotspot, setChecked_builtInHotspot, handleToggleHotspot, multipleEdit, checked_hotspotPassword, handleSetHotspotPassword,\r\n hotspotInterfaceInfoRegdom,\r\n hotspotInterfaceInfoWidth, hotspotPassword, setChecked_hotspotPassword, requestedFrequency, irChannels, set_requestedFrequency, currentFrequency, clientIsolation, set_clientIsolation, guestAccessType,\r\n checked_guestAccessType, handleGuestAccessTypeChange, setChecked_guestAccessType,\r\n hotspotPasswordValid, deviceInfo, checked_clientIsolation, setChecked_clientIsolation}) {\r\n\r\n function getChannel(freq, width)\r\n {\r\n // Channel (Band) Width\r\n\r\n /* see 802.11 17.3.8.3.2 and Annex J */\r\n if (freq === 2484)\r\n return 14 + \" (2.4 GHz) \" + width;\r\n else if (freq < 2484)\r\n return ((freq - 2407) / 5) + \" (2.4 GHz) \" + width;\r\n else if (freq >= 4910 && freq <= 4980)\r\n return ((freq - 4000) / 5) + \" (4.9 GHz) \" + width;\r\n else if (freq < 5925)\r\n return ((freq - 5000) / 5) + \" (5 GHz) \" + width;\r\n else if (freq === 5935)\r\n return 2 + \" (6 GHz) \" + width;\r\n else if (freq <= 45000) /* DMG band lower limit */\r\n /* see 802.11ax D6.1 27.3.22.2 */\r\n return ((freq - 5950) / 5) + \" (6 GHz) \" + width;\r\n else if (freq >= 58320 && freq <= 70200)\r\n return ((freq - 56160) / 2160) + \" (802.11ad) \" + width;\r\n else\r\n return 0;\r\n }\r\n\r\n function getBand(freq) {\r\n if (freq < 2495)\r\n return \"2.4 GHz\";\r\n else if (freq >= 3655 && freq <= 3695)\r\n return \"3.65 GHz\";\r\n else if (freq >= 4910 && freq < 4990)\r\n return \"4.9 GHz\";\r\n else if (freq > 5150 && freq < 5895)\r\n return \"5 GHz\";\r\n else if (freq > 5855 && freq < 5990)\r\n return \"5.9 GHz\";\r\n else if (freq > 5925 && freq < 7125)\r\n return \"6 GHz\";\r\n else return \"\";\r\n }\r\n\r\n function getChannelListItem(freq, dfs) {\r\n let dfsSuffix = dfs ? \" (DFS)\" : \"\"\r\n\r\n if (freq === 2484)\r\n return 14 + \" (2.4 GHz) \" + dfsSuffix;\r\n else if (freq < 2484)\r\n return ((freq - 2407) / 5) + \" (2.4 GHz) \" + dfsSuffix;\r\n else if (freq >= 4910 && freq <= 4980)\r\n return ((freq - 4000) / 5) + \" (4.9 GHz) \" + dfsSuffix;\r\n else if (freq < 5925)\r\n return ((freq - 5000) / 5) + \" (5 GHz) \" + dfsSuffix;\r\n else if (freq === 5935)\r\n return 2 + \" (6 GHz) \" + dfsSuffix;\r\n else if (freq <= 45000) /* DMG band lower limit */\r\n /* see 802.11ax D6.1 27.3.22.2 */\r\n return ((freq - 5950) / 5) + \" (6 GHz) \" + dfsSuffix;\r\n else if (freq >= 58320 && freq <= 70200)\r\n return ((freq - 56160) / 2160) + \" (802.11ad) \" + dfsSuffix;\r\n else\r\n return 0;\r\n }\r\n\r\n function getChannelKey(freq) {\r\n return \"freq-\"+freq\r\n }\r\n\r\n function mapChannels() {\r\n let retval = [];\r\n retval.push();\r\n if (irChannels && Array.isArray(irChannels)) {\r\n //let lastBand = \"\";\r\n for (let i = 0; i < irChannels.length; i++) {\r\n let frequency = irChannels[i].frequency;\r\n let dfs = irChannels[i].dfs;\r\n //let band = getBand(frequency)\r\n\r\n //if (band !== lastBand) {\r\n // if (lastBand !== \"\") {\r\n // retval.push()\r\n // }\r\n // lastBand = band;\r\n // retval.push()\r\n //}\r\n }\r\n return retval;\r\n }\r\n\r\n function mapGuestAccessType() {\r\n if (multipleEdit && !checked_guestAccessType) return null;\r\n let retval = [];\r\n retval.push();\r\n retval.push();\r\n retval.push();\r\n return retval;\r\n }\r\n\r\n function changeSelectedFrequency(e) {\r\n set_requestedFrequency(e.target.value);\r\n }\r\n\r\n function prettyText(text) {\r\n return text ? text : 'Not Available';\r\n }\r\n\r\n function getHotspotPasswordClass() {\r\n let retval = hotspotPasswordValid ? '' : 'formIsInvalid';\r\n if (multipleEdit && !checked_hotspotPassword) retval += ' form-control-disabled'\r\n return retval;\r\n }\r\n\r\n return (\r\n \r\n );\r\n}\r\n","import React, { useState } from 'react';\r\nimport { Modal, Button } from 'react-bootstrap';\r\nimport Switch from './Switch';\r\n\r\nexport default function ConfirmationDialog({ show, text, result, header = 'Confirmation', extraQuestion = '' }) {\r\n const [questionChecked, set_questionChecked] = useState(false);\r\n\r\n function callTrueResult() {\r\n if (extraQuestion === '') {\r\n result(true);\r\n } else {\r\n result(true, questionChecked);\r\n }\r\n \r\n set_questionChecked(false);\r\n }\r\n\r\n function callFalseResult() {\r\n result(false);\r\n set_questionChecked(false);\r\n }\r\n\r\n return (\r\n
Edit Multiple Devices
);\r\n }\r\n let ip = getIpAddress();\r\n if (ip) {\r\n return ({name} ({ip})
);\r\n } else {\r\n return ({name}
);\r\n }\r\n }\r\n\r\n function getDeviceAlias() {\r\n let deviceName = name;\r\n if (!deviceName) {\r\n deviceName = deviceId;\r\n }\r\n let ip = getIpAddress();\r\n if (ip) {\r\n return `${deviceName} (${ip})`;\r\n } else {\r\n return deviceName;\r\n }\r\n }\r\n\r\n function changeRedCrossCount(delta) {\r\n set_numRedCrosses(numRedCrosses + delta);\r\n }\r\n\r\n function applyButtonDisabled() {\r\n return applyButtonText === APPLYING_TEXT || (multipleEdit && numRedCrosses === 0) ?true : false;\r\n }\r\n\r\n\tfunction showEndSessionConfirmation() {\r\n set_showConfirmationEndSession(true);\r\n }\r\n\r\n if (!paneVisible) {\r\n if (!loading) set_loading(true);\r\n\r\n return (\r\n\r\n
);\r\n }\r\n\r\n if (loading && !multipleEdit) {\r\n if (!sentFetch) {\r\n authService.getAccessToken()\r\n .then(token => axios.get(`CloudManagement/GetDeviceDetails/${deviceId}`, { headers: !token ? {} : { 'Authorization': `Bearer ${token}` }, timeout: DETAILPAGE_TIMEOUT }))\r\n .then(response => {\r\n return response.data;\r\n })\r\n .then(data => {\r\n saveHubData(data);\r\n set_loading(false);\r\n set_sentFetch(false);\r\n })\r\n .catch(error => {\r\n console.log('Fetching detail returned error: ' + error);\r\n\r\n if (error.message.includes('401')) {\r\n // Close Details pane and show a notification that the user should log in again:\r\n displayError('Please log in again');\r\n exitPane();\r\n }\r\n\r\n set_loading(false);\r\n set_sentFetch(false);\r\n if (error.message.toLowerCase().includes('timeout loading device details')) {\r\n set_showTimeout(true);\r\n exitPane();\r\n }\r\n });\r\n\r\n set_sentFetch(true);\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
);\r\n } else {\r\n if (loading && multipleEdit) {\r\n set_loading(false);\r\n set_airplayMode(1);\r\n set_googleCastMode(1);\r\n set_miracastMode(1);\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n\r\n {/*Device Management*/}\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React, { useState } from 'react';\r\nimport { Button, Container, Col, Row, Form } from 'react-bootstrap';\r\nimport '../main.css';\r\nimport authService from './api-authorization/AuthorizeService';\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nexport default function CreateGroupPane({ paneVisible, closeCreateGroupPane, displayNotification, displayError }) {\r\n const [groupName, set_groupName] = useState('');\r\n\r\n function handleCreateGroupClick() {\r\n let groupDeviceId = uuidv4();\r\n\r\n authService.getAccessToken()\r\n .then(token =>\r\n fetch(`CloudManagement/CreateGroup`,\r\n {\r\n body: JSON.stringify({ deviceId: groupDeviceId, groupName }),\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}`, 'Accept': 'application/json', 'Content-Type': 'application/json' },\r\n method: 'POST'\r\n })\r\n )\r\n .then(response => response.json())\r\n .then(data => {\r\n console.log(`CreateGroup returned: '${JSON.stringify(data)}'`);\r\n if (data.status !== undefined && data.status !== null) {\r\n if (data.status === 409) {\r\n displayError('Group already exists');\r\n closeCreateGroupPane();\r\n return;\r\n } else if (data.status === 401) {\r\n handleUnauthorized();\r\n return;\r\n }\r\n }\r\n\r\n if (data && data === '409') {\r\n displayError(`${groupName} already exists`);\r\n closeCreateGroupPane();\r\n set_groupName('');\r\n return;\r\n }\r\n\r\n closeCreateGroupPane();\r\n displayNotification(`Creating ${groupName}...`);\r\n set_groupName('');\r\n })\r\n .catch(error => {\r\n if (error.message.includes('401')) {\r\n handleUnauthorized();\r\n return;\r\n }\r\n });\r\n }\r\n\r\n function handleUnauthorized() {\r\n // Close Create Group pane and show a notification that the user should log in again:\r\n displayError('Please log in again');\r\n set_groupName('');\r\n closeCreateGroupPane();\r\n }\r\n\r\n function handleCreateGroupCancel() {\r\n set_groupName('');\r\n closeCreateGroupPane();\r\n }\r\n\r\n function handleGroupNameChange(e) {\r\n set_groupName(e.target.value);\r\n }\r\n\r\n function handleGroupNameKeyPress(e) {\r\n var code = e.keyCode || e.which;\r\n if (code === 13) { //13 is the enter keycode\r\n handleCreateGroupClick();\r\n }\r\n }\r\n\r\n if (!paneVisible) {\r\n return (\r\n \r\n
\r\n );\r\n } else {\r\n return (\r\n Create Group
\r\n \r\n\r\n
\r\n );\r\n } else {\r\n return (\r\n Attach Device to Cloud
\r\n \r\n\r\n \r\n {\r\n loading || groups === null\r\n ? (
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { Jumbotron, Button, Table } from \"react-bootstrap\";\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faTrashAlt, faPen, faUserTag, faCheck, faTimes } from '@fortawesome/pro-regular-svg-icons';\r\nimport { Tooltip } from 'react-tippy';\r\n\r\nexport default function Roles({ roles, handleShowAdd, handleShowEdit, getRoleClassByName, removeRoleClick, iotGroups }) {\r\n\tfunction getRoleGroupsClassByGroups(groups) {\r\n\t\tif (groups.length === 0) {\r\n\t\t\treturn 'managesAllGroups';\r\n\t\t} else {\r\n\t\t\treturn '';\r\n }\r\n\t}\r\n\t\r\n\tfunction getCanCreateData(role) {\r\n\t\tif (role.canManageUsers === true) {\r\n\t\t\treturn \r\n {groups.length === 0 ? () : groups.map(group =>\r\n \r\n \r\n { typingGroupName(e.target.value) }} maxLength='29'\r\n onBlur={() => { groupNameChanged(group) }} autoFocus onFocus={(e) => e.target.select()} className='lblGroup'\r\n onKeyPress={(e) => { handleGroupKeyPress(e, group); }} />) :\r\n (\r\n \r\n \r\n startRenamingGroup(group.deviceId, group.groupName)} />\r\n \r\n \r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t removeGroupClick(group.deviceId, group)} />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t \r\n \r\n )\r\n : null\r\n }\r\n\r\n \r\n \r\n toggleExpandedInUI(group.deviceId)} />\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n\r\n
)\r\n }\r\n {group.groupName}
)\r\n }\r\n\r\n {\r\n (selectedDeviceId === '' && canManageUsers) ? (\r\n\r\n
\r\n \r\n\t\t\t\t\t\t\tRoles\r\n\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t | ||||
| ROLE | \r\n\t\t\t\t\t\tMANAGES THESE DEVICE GROUPS | \r\n\t\t\t\t\t\tCAN MANAGE USERS | \r\n\t\t\t\t\t\tEDIT | \r\n\t\t\t\t\t\tREMOVE | \r\n\t\t\t\t\t|
|---|---|---|---|---|---|
| {role.name} | \r\n\t\t\t\t\t\t\t\t{getGroups(role.deviceGroupsManaged)} | \r\n\t\t\t\t\t\t\t\t{getCanCreateData(role)} | \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t|
\r\n\t\t\t\t\t\t\tUsers\r\n\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t | ||||
| NAME | \r\n\t\t\t\t\t\tROLE | \r\n\t\t\t\t\t\tCREATED | \r\n\t\t\t\t\t\tEDIT | \r\n\t\t\t\t\t\tREMOVE | \r\n\t\t\t\t\t|
|---|---|---|---|---|---|
| {user.name} | \r\n\t\t\t\t\t\t\t\t{user.email} | \r\n\t\t\t\t\t\t\t\t{getRoleText(user.role)} | \r\n\t\t\t\t\t\t\t\t{getRoleCreated(user)} | \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t
{`Clicking on \"APPLY\" will send an email to the new user with a link from which he/she can register and use this site.`}
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\tManages These Device Groups \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tOr select specific groups: \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tmyIotGroups.map(g =>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\r\n\t\t\t{\r\n\t\t\t\terror500 &&\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tisRenamingOrgName === true ?\r\n\t\t\t\t\t\t { typingOrgName(e.target.value) }} maxLength='50'\r\n\t\t\t\t\t\t\tonBlur={() => { changeOrganizationName() }} autoFocus onFocus={(e) => e.target.select()} className='lblGroup'\r\n\t\t\t\t\t\t\tonKeyPress={(e) => { handleOrgKeyPress(e); }}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t startRenamingOrgName()} />\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t \r\n\t\t\t{\r\n\t\t\t\t(roles.length === 0 || !fetchedIotGroups) ?\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{/*Roles*/}\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t \r\n }\r\n\t\t
\r\n\t);\r\n}\r\n","import { createBrowserHistory as history} from 'history';\r\n\r\nexport default history();","import React, { useState } from 'react';\r\nimport { Form, Button } from \"react-bootstrap\";\r\nimport UserHandler from \"./UserHandler\";\r\nimport history from './History';\r\nimport Loader from 'react-loader-spinner';\r\n\r\nfunction FirstLogin() {\r\n\tconst [password, set_password] = useState('');\r\n\tconst [passwordRetyped, set_passwordRetyped] = useState('');\r\n\tconst [illegalPassword, set_illegalPassword] = useState(false);\r\n\tconst [loggingIn, set_loggingIn] = useState(false);\r\n\r\n\tlet search = window.location.search;\r\n\tlet params = new URLSearchParams(search);\r\n\tlet name = params.get('name');\r\n\tlet email = params.get('email');\r\n\tlet token = params.get('token');\r\n\r\n\tfunction succeeded() {\r\n\t\thistory.push('./');\r\n\t\twindow.location.reload();\r\n\t}\r\n\r\n\tfunction failed() {\r\n\t\tset_loggingIn(false);\r\n\t\tset_illegalPassword(true);\r\n\t}\r\n\r\n\tfunction clickLogin() {\r\n\t\tset_illegalPassword(false);\r\n\t\tset_loggingIn(true);\r\n\t\tUserHandler.confirmAccount(email, token, password, succeeded, failed);\r\n\t}\r\n\r\n\treturn (\r\n\t\tInternal error, try again later...
{orgName}
\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\r\n\t\t\t\t \r\n\r\n\t\t\t\r\n\t\t\t\t \r\n\r\n\t\t\t\r\n\t\t\t\t {set_password(e.target.value)}}> \r\n\t\t\t \r\n\r\n\t\t\t\r\n\t\t\t\tRe-type your password here \r\n\t\t\t\t {set_passwordRetyped(e.target.value)}}> \r\n\t\t\t \r\n\r\n\t\t\t\r\n\t\t\t\t{\r\n\t\t\t\t\tloggingIn ?\r\n\t\t\t\t\t \r\n\r\n\t\t\t{\r\n\t\t\t\tillegalPassword &&\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\tPasswords have to contain both upper and lower case letters in addition to alphanumeric and special characters.\r\n\t\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t}\r\n\t\t
\r\n\t);\r\n}\r\n\r\nexport default FirstLogin;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Route, Redirect, Switch } from 'react-router';\r\nimport Layout from './components/Layout';\r\nimport AuthorizeRoute from './components/api-authorization/AuthorizeRoute';\r\nimport ApiAuthorizationRoutes from './components/api-authorization/ApiAuthorizationRoutes';\r\nimport { ApplicationPaths } from './components/api-authorization/ApiAuthorizationConstants';\r\nimport './main.css';\r\nimport MainPage from './components/MainPage';\r\nimport UserManagement from './components/UserManagement/UserManagement';\r\nimport FirstLogin from './components/UserManagement/FirstLogin';\r\nimport { DISCONNECTED } from './components/Utils';\r\nimport authService from './components/api-authorization/AuthorizeService';\r\nimport axios from 'axios';\r\nimport { toast } from 'react-toastify';\r\n\r\nexport default function App() {\r\n const [detailsPaneVisible, set_detailsPaneVisible] = useState(false);\r\n const [createGroupPaneVisible, set_createGroupPaneVisible] = useState(false);\r\n const [addingDevice, set_addingDevice] = useState(false);\r\n const [selectedDeviceId, set_selectedDeviceId] = useState('');\r\n const [selectedDeviceConnectionState, set_selectedDeviceConnectionState] = useState(DISCONNECTED);\r\n const [numSelectedDevices, set_numSelectedDevices] = useState(0);\r\n const [multipleEdit, set_multipleEdit] = useState(false);\r\n const [loggedIn, set_loggedIn] = useState(false);\r\n const [noGroupsCreated, set_noGroupsCreated] = useState(true);\r\n\tconst [selectedPage, set_selectedPage] = useState('Devices');\r\n\tconst [canManageUsers, set_canManageUsers] = useState(false);\r\n\r\n\tconst TIMEOUT = 20000; // Timeout in milliseconds.\r\n\r\n useEffect(() => {\r\n if (loggedIn) {\r\n async function checkIfUserCanManageOtherUsers() {\r\n try {\r\n authService.getAccessToken().then(token => {\r\n if (token == null || Object.keys(token).length === 0) {\r\n // Token is empty.\r\n return;\r\n }\r\n\r\n axios.get('UserManagement/CanManageUsers', {\r\n headers: !token ? {} : { 'Authorization': `Bearer ${token}` },\r\n timeout: TIMEOUT\r\n }).then(response => {\r\n set_canManageUsers(response.data.canManageUsers);\r\n })\r\n });\r\n } catch (error) {\r\n toast.error('Unexpected error while checking if this user can manage other users. Check with helpdesk or try again later.')\r\n }\r\n }\r\n\r\n checkIfUserCanManageOtherUsers();\r\n }\r\n }, [loggedIn, set_canManageUsers]);\r\n \r\n function numGroups(num) {\r\n set_noGroupsCreated(num === 0 ? true : false);\r\n }\r\n\r\n function online(yes) {\r\n set_loggedIn(yes);\r\n }\r\n\r\n function addDevice() {\r\n set_addingDevice(true);\r\n }\r\n\r\n function closeAddDevicePane() {\r\n set_addingDevice(false);\r\n }\r\n\r\n function createGroup() {\r\n set_createGroupPaneVisible(true);\r\n }\r\n\r\n function editMultipleDevices() {\r\n set_detailsPaneVisible(true);\r\n set_multipleEdit(true);\r\n }\r\n\r\n function closeCreateGroupPane() {\r\n set_createGroupPaneVisible(false);\r\n }\r\n\r\n function closeDetailsPane() {\r\n set_detailsPaneVisible(false);\r\n set_selectedDeviceId('');\r\n set_addingDevice(false);\r\n set_multipleEdit(false);\r\n }\r\n\r\n function openDetailsPane(deviceId, connectionState) {\r\n set_detailsPaneVisible(true);\r\n set_selectedDeviceId(deviceId);\r\n set_selectedDeviceConnectionState(connectionState);\r\n }\r\n\r\n function handleNumSelectedDevices(count) {\r\n set_numSelectedDevices(count);\r\n\t}\r\n\r\n return (\r\n Welcome to Cloud Management, {name}
\r\n\t\t\t\r\n\t\t\t\t\tPlease create a password \r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\tNOTE! Passwords have to contain both upper and lower case letters in addition to alphanumeric and special characters. \r\n\t\t\t\t
\r\n\t\t\t