{"version":3,"file":"main.93e2cb19bb28d77f1f34.js","mappings":";;;;AAQA;;;;;;;;;;ACaA;;ACdA;ACAA;AAuBA;;ACvBA;;;;;;ACNA;;;;;;;;;;;;;;;;;;ACEA;;;;ACMA;ACIA;;;AA+EA;;;;;;;;;;;;;;;;;;;;;;AAtDA;;;;;;;;;;;;;;;;;ACtCA;;;;AAUA;;;;AAUA;;;;AAQA;;;;AAUA;;;;AAQA;;;;AAUA;;;;AAUA;;;;AAQA;;AC1EA;;ACWA;;;;;;;AAQA;;;;;;;;;;;;;AAqBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACRA;;;;AChBA;;ACTA;;;;;;;;;;;;;;;ACwBA;;;;ACtBA;;;;;;;;;;;;;;;;;;;;ACyBA;;;;;;;;;;;;;;ACXA;;;;;;ACOA;;;;ACNA;;;;;;;;;;;;;;;ACOA;;AChBA;;;;;;;;;;;;;;;;AAsBA;AC9BA;;;;;AAKA;;;;;;;AAmBA;AACA;;AAQA;AChCA;;;;AAWA;;;;;ACFA;;;;;;;;;ACaA;;;;;ACPA;;;;;;ACTA;;;;;;;;;;;AAYA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;AAQA;;;;ACZA;AACA;;;;;;;;AA8BA;;;;AC7DA;;;;;;;;;;;;;;ACNA;;;;;ACmSA;;;;AAwgCA;AACA;AACA;;;AAGA;;;;;;AAQA;AACA;;;AAGA;;AC3zCA;;;;;;;;;;;ACgBA;;;;;;AAQA;;AAIA;;;AAIA;;;;;;;;;AASA;;;;AAIA;AACA;AACA;;;AAQA;;;;;;;;;;;;;;AC/BA;;;ACoKA;;AAIA;;AAEA;AACA;;;AAGA;;;;;;;;;;AC/KA;;;AAqKA;;AAIA;;AAEA;AACA;;;AAGA;;;;;;;;;;;;;;;;ACzLA;;;;;;;;;;;AAYA;;;;;;;AAOA;;;;AAIA;;;;AAIA;;;AAQA;;ACzCA;;ACAA;;;;;;;;;;;;;;;;;;;;;;ACsBA;;;;ACjBA;;;;ACCA;;;;;;;ACQA;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;;;;ACtCA;;;;;;;;;;;;;;;;;;AA0BA;;;;;;;;;;;;;;;;;ACHA;;;AC8QA;AACA;AAGA;;;ACzGA;AACA;AAGA;;;;;;;;;;;;;;AC5LA;;;;;AAUA;;;ACkRA;AACA;AAGA;;;ACJA;AACA;AACA;;;;AC6KA;;;;;;;;;;;;;;;;;;;;AAoBA;;;AAGA;;;;AAIA;;;AAKA","sources":["webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/heading/heading.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/link/link.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/p/p.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/svg/svg.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/t/t.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/popover/popoverStyle.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/portal/portal.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/box/box.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/core/vuiProvider/globalStyle.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/core/vuiProvider/animations.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/notification/consts.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/button/button.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/core/vuiProvider/vuiProvider.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/spinner/spinner.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/divider/divider.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/list/listItem.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/image/image.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/avatar/avatar.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/header/headerNotifications.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/header/header.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/footer/footer.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/input/inputInput.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/input/input.js","webpack://veracity-identity-web/./src/components/PasswordStrengthMeter.tsx","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/modal/modalBackdrop.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/modal/modalContent.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/dialog/dialog.js","webpack://veracity-identity-web/./node_modules/react-google-recaptcha-v3/src/utils.ts","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/checkbox/checkbox.js","webpack://veracity-identity-web/./src/components/Flag/index.tsx","webpack://veracity-identity-web/./src/components/LeftContainer.tsx","webpack://veracity-identity-web/./src/utils/defaultGetInitials.ts","webpack://veracity-identity-web/./src/pages/UserProfilePage.tsx","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/switch/context.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/switch/switchButton.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/switch/switchMain.js","webpack://veracity-identity-web/./src/pages/PreferencesPage.tsx","webpack://veracity-identity-web/./src/pages/TermsPage.tsx","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/radio/radio.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/table/td.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/table/tr.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/table/tbody.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/table/th.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/table/thead.js","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/table/table.js","webpack://veracity-identity-web/./src/components/select/selectSelect.tsx","webpack://veracity-identity-web/./src/components/select/select.tsx","webpack://veracity-identity-web/./src/pages/ForgotPasswordPage.tsx","webpack://veracity-identity-web/./src/pages/ResetPasswordPage.tsx","webpack://veracity-identity-web/./node_modules/@veracity/vui/dist/esm/textarea/textarea.js","webpack://veracity-identity-web/./src/pages/LostTotpPage.tsx","webpack://veracity-identity-web/./src/pages/ResetTotpPage.tsx","webpack://veracity-identity-web/./src/app.tsx"],"sourcesContent":["import React from 'react';\r\nimport { omitThemingProps, styled, useStyleConfig, useUp, vui } from '../core';\r\nimport { cs, filterUndefined } from '../utils';\r\nexport const HeadingBase = styled.h2Box `\n  font-weight: demi;\n  transition-duration: fast;\n`;\r\n/** Used to define headings and titles for pages, articles, panels, etc. */\r\nexport const Heading = vui((props, ref) => {\r\n    const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props);\r\n    const styles = useStyleConfig('Heading', props);\r\n    const { fontSize, lineHeight, ...restStyles } = styles;\r\n    const hClassName = props.size ? `vui-${props.size}` : '';\r\n    const aliasedProps = filterUndefined({\r\n        fontWeight: weight,\r\n        textAlign: align,\r\n        textDecoration: decoration,\r\n        textTransform: casing\r\n    });\r\n    const isDesktop = useUp(993);\r\n    const fontSizeDesktop = fontSize?.desktop || fontSize;\r\n    const fontSizeMobile = fontSize?.mobile || fontSize;\r\n    const lineHeightDesktop = lineHeight?.desktop || lineHeight;\r\n    const lineHeightMobile = lineHeight?.mobile || lineHeight;\r\n    return (React.createElement(HeadingBase, { className: cs('vui-heading', hClassName, className), fontSize: isDesktop ? fontSizeDesktop : fontSizeMobile, lineHeight: isDesktop ? lineHeightDesktop : lineHeightMobile, ref: ref, ...restStyles, ...aliasedProps, ...rest }, children ?? text));\r\n});\r\nexport default Heading;\r\n","import React, { useMemo } from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { cs, filterUndefined, isReactText, isString } from '../utils';\r\nimport { LinkProvider } from './context';\r\nimport LinkIcon from './linkIcon';\r\nimport LinkText from './linkText';\r\nexport const LinkBase = styled.aBox `\n  align-items: center;\n  border-radius: none;\n  cursor: pointer;\n  display: inline-flex;\n  line-height: normal;\n  outline: none;\n  text-decoration: none;\n  transition-duration: instant;\n  width: fit-content;\n`;\r\n/**\r\n * Displays a link item. Handles different underline scenarios and opening external links in new tab.\r\n * Exposes some props to the children via context.\r\n */\r\nexport const Link = vui((props, ref) => {\r\n    const { children, className, decoration, hoverDecoration = 'underline', iconLeft, iconRight, isExternal, isUnderlined, size, text, variant, weight, ...rest } = props;\r\n    const styles = useStyleConfig('Link', props);\r\n    const context = useMemo(() => filterUndefined({ size, variant }), [size, variant]);\r\n    const aliasedProps = filterUndefined({\r\n        fontWeight: weight,\r\n        rel: isExternal ? 'noopener' : undefined,\r\n        target: isExternal ? '_blank' : undefined,\r\n        textDecoration: decoration ?? (isUnderlined ? 'underline' : undefined)\r\n    });\r\n    return (React.createElement(LinkProvider, { value: context },\r\n        React.createElement(LinkBase, { className: cs('vui-link', className), focusRing: 2, hoverTextDecoration: hoverDecoration, ref: ref, ...styles.container, ...aliasedProps, ...rest },\r\n            isString(iconLeft) ? React.createElement(LinkIcon, { mr: 1, name: iconLeft }) : iconLeft,\r\n            children ?? (isReactText(text) ? React.createElement(LinkText, { text: text }) : text),\r\n            isString(iconRight) ? React.createElement(LinkIcon, { ml: 1, name: iconRight }) : iconRight)));\r\n});\r\nLink.Icon = LinkIcon;\r\nLink.Text = LinkText;\r\nexport default Link;\r\n","import React from 'react';\r\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core';\r\nimport { cs, filterUndefined } from '../utils';\r\nexport const PBase = styled.pBox `\n  transition-duration: fast;\n`;\r\n/** Displays a paragraph of text. */\r\nexport const P = vui((props, ref) => {\r\n    const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props);\r\n    const styles = useStyleConfig('P', props);\r\n    const aliasedProps = filterUndefined({\r\n        fontWeight: weight,\r\n        textAlign: align,\r\n        textDecoration: decoration,\r\n        textTransform: casing\r\n    });\r\n    return (React.createElement(PBase, { className: cs('vui-p', className), ref: ref, ...styles, ...aliasedProps, ...rest }, children ?? text));\r\n});\r\nexport default P;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { css, styled, vui } from '../core';\r\nimport { cs } from '../utils';\r\nimport cache from './cache';\r\nimport { getAttributes, getSvgContent, initState, stringToHTML } from './helpers';\r\nexport const SvgBase = styled.svgBox(({ pathFill }) => {\r\n    return css `\n    ${pathFill !== undefined &&\r\n        (Array.isArray(pathFill)\r\n            ? pathFill\r\n                .map((fill, index) => `\n\t\t\t\t\t& > path:nth-child(${index + 1}) {\n\t\t\t\t\t\tfill: ${fill};\n\t\t\t\t\t}\n\t\t\t\t`)\r\n                .join()\r\n            : `\n\t\t\t\t& > path {\n\t\t\t\t\tfill: ${pathFill};\n\t\t\t\t}\n\t\t\t`)}\n  `;\r\n});\r\n/**\r\n * Displays an svg element based on provided children or 'src' prop.\r\n *\r\n * When using src, it loads the content from the given URL and saves in in cache.\r\n *\r\n * Then, renders the svg by parsing loaded content (Review potential for XSS due to innerHTML).\r\n */\r\nexport const Svg = vui((props, ref) => {\r\n    const { children, className, src, ...rest } = props;\r\n    const [state, setState] = useState(initState());\r\n    const isMountedRef = useRef(false);\r\n    const srcRef = useRef(src);\r\n    const { content = '', svgAttributes = {} } = state;\r\n    const innerHTML = !children ? { __html: content } : undefined;\r\n    useEffect(() => {\r\n        isMountedRef.current = true;\r\n        return () => {\r\n            isMountedRef.current = false;\r\n        };\r\n    }, []);\r\n    useEffect(() => {\r\n        srcRef.current = src;\r\n        async function loadSvg(src) {\r\n            try {\r\n                const response = await cache.get(src);\r\n                const content = getSvgContent(response);\r\n                const svgEl = stringToHTML(response);\r\n                const svgAttributes = getAttributes(svgEl);\r\n                svgAttributes['data-src'] = src ?? '';\r\n                // Update state only when requested 'src' and current 'src' are the same\r\n                if (srcRef.current === src && isMountedRef.current) {\r\n                    setState({ content, svgAttributes });\r\n                }\r\n            }\r\n            catch (error) {\r\n                console.error(error); // eslint-disable-line no-console\r\n                if (isMountedRef.current) {\r\n                    setState(initState());\r\n                }\r\n            }\r\n        }\r\n        src && loadSvg(src);\r\n    }, [src]);\r\n    return (React.createElement(SvgBase, { className: cs('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: \"http://www.w3.org/2000/svg\", ...svgAttributes, ...rest }, children));\r\n});\r\nexport default Svg;\r\n","import React from 'react';\r\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core';\r\nimport { cs, filterUndefined } from '../utils';\r\nexport const TBase = styled.spanBox `\n  transition-duration: fast;\n`;\r\n/** Displays given text and allows easy styling. */\r\nexport const T = vui((props, ref) => {\r\n    const { align, casing, centerV, children, className, decoration, text, weight, ...rest } = omitThemingProps(props);\r\n    const styles = useStyleConfig('T', props);\r\n    const aliasedProps = filterUndefined({\r\n        alignItems: centerV ? 'center' : undefined,\r\n        display: centerV ? 'inline-flex' : undefined,\r\n        fontWeight: weight,\r\n        textAlign: align,\r\n        textDecoration: decoration,\r\n        textTransform: casing\r\n    });\r\n    return (React.createElement(TBase, { className: cs('vui-t', className), ref: ref, ...styles, ...aliasedProps, ...rest }, children ?? text));\r\n});\r\nexport default T;\r\n","import { createGlobalStyle } from '../core';\r\nexport default createGlobalStyle `\n\t[data-tippy-root] {\n\t\tmax-width: calc(100vw - 10px);\n\t}\n\n\t.tippy-box {\n\t\tposition: relative;\n\t\ttransition-property: transform, visibility, opacity;\n\t}\n\n\t.tippy-box[data-animation=fade][data-state=hidden] {\n\t\topacity: 0;\n\t}\n\n\t.tippy-content {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n`;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\n/** Provided children are portaled to document.body or custom container. */\r\nexport const Portal = props => {\r\n    const { children, containerRef, disablePortal } = props;\r\n    const [mountNode, setMountNode] = useState();\r\n    useEffect(() => {\r\n        if (!disablePortal) {\r\n            setMountNode(containerRef?.current ?? document.body);\r\n        }\r\n    }, [disablePortal]);\r\n    if (disablePortal)\r\n        return React.createElement(React.Fragment, null, children);\r\n    return mountNode ? createPortal(children, mountNode) : React.createElement(React.Fragment, null, mountNode);\r\n};\r\nexport default Portal;\r\n","import React from 'react';\r\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core';\r\nimport { cs, filterUndefined } from '../utils';\r\nexport const BoxBase = styled.divBox `\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n`;\r\n/** Organizes content layout into columns or rows with easy centering. */\r\nexport const Box = vui((props, ref) => {\r\n    const { align, center, centerH, centerV, className, column, direction, elevation, hoverShadow: hoverBoxShadow, justify, radius: borderRadius, shadow, wrap, ...rest } = omitThemingProps(props);\r\n    const styles = useStyleConfig('Box', props);\r\n    const alignItems = center || (column ? centerH : centerV) ? 'center' : undefined;\r\n    const flexDirection = column ? 'column' : undefined;\r\n    const justifyContent = center || (column ? centerV : centerH) ? 'center' : undefined;\r\n    const aliasedProps = filterUndefined({\r\n        alignItems: align ?? alignItems,\r\n        borderRadius,\r\n        boxShadow: elevation ?? shadow,\r\n        flexDirection: direction ?? flexDirection,\r\n        flexWrap: wrap ? 'wrap' : undefined,\r\n        justifyContent: justify ?? justifyContent\r\n    });\r\n    return React.createElement(BoxBase, { className: cs('vui-box', className), ref: ref, ...styles, ...aliasedProps, ...rest });\r\n});\r\nexport default Box;\r\n","import foundations from '../../theme/foundations';\r\nimport { isObject } from '../../utils';\r\nimport { createGlobalStyle, css } from '../styled';\r\nimport { bounce, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, pulse, spin } from './animations';\r\nimport fontFaces from './fontFaces';\r\n/**\r\n * Provides global styles, such as:\r\n * - font face definitions\r\n * - font base styles (color, size, family)\r\n * - animation keyframes\r\n * - CSS variables for each theme value\r\n */\r\nexport default createGlobalStyle `\n  ${fontFaces}\n\n  :root {\n    ${generateCSSVariables}\n  }\n\n  * {\n    --x-ring-color: var(--vui-colors-focusColor);\n    // Fixes a box-shadow issue between some parent and child components\n    --x-shadow: 0 0 0 0 transparent;\n  }\n\n  button,\n  .vui-switchTrack {\n    --x-ring-color: transparent;\n  }\n\n  button:focus-visible,\n  li:focus-visible,\n  .vui-switchTrack:focus-visible {\n    --x-ring-color: var(--vui-colors-focusColor);\n    outline: var(--vui-colors-focusColor) solid 3px;\n    z-index: 1;\n  }\n\n  ${p => p.globalStyle &&\r\n    css `\n      body {\n        color: sandstone.10;\n        font-family: avenir;\n        font-size: md;\n      }\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        color: darkBlue.18;\n      }\n    `}\n\n  @keyframes vui-bounce {\n  ${bounce}\n  }\n\n  @keyframes vui-fadeDown {\n  ${fadeDown}\n  }\n\n  @keyframes vui-fadeIn {\n  ${fadeIn}\n  }\n\n  @keyframes vui-fadeLeft {\n  ${fadeLeft}\n  }\n\n  @keyframes vui-fadeOut {\n  ${fadeOut}\n  }\n\n  @keyframes vui-fadeRight {\n  ${fadeRight}\n  }\n\n  @keyframes vui-fadeUp {\n  ${fadeUp}\n  }\n\n  @keyframes vui-pulse {\n  ${pulse}\n  }\n\n  @keyframes vui-spin {\n  ${spin}\n  }\n`;\r\n/** Recursively maps through all theme styles and generates a set of CSS properties. */\r\nfunction generateCSSVariables() {\r\n    function computeStyle(name, value) {\r\n        if (!isObject(value))\r\n            return `${name}: ${typeof value === 'string' ? value : `${value}px`};\\n`;\r\n        return Object.entries(value).reduce((str, [key, value]) => {\r\n            return (str += computeStyle(`${name}-${key}`, value));\r\n        }, '');\r\n    }\r\n    const { animations, transformers, ...styles } = foundations;\r\n    return computeStyle('--vui', styles);\r\n}\r\n","export const bounce = `\n\t0%, 100% {\n\t\tanimationTimingFunction: cubic-bezier(0.8, 0, 1, 1);\n\t\ttransform: translateY(-25%);\n\t}\n\t50% {\n\t\tanimationTimingFunction: cubic-bezier(0, 0, 0.2, 1);\n\t\ttransform: translateY(0);\n\t}\n`;\r\nexport const fadeDown = `\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(-20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0)\n\t}\n`;\r\nexport const fadeIn = `\n\tfrom {\n\t\topacity: 0;\n\t}\n\tto {\n\t\topacity: 1;\n\t}\n`;\r\nexport const fadeLeft = `\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0)\n\t}\n`;\r\nexport const fadeOut = `\n\tfrom {\n\t\topacity: 1;\n\t}\n\tto {\n\t\topacity: 0;\n\t}\n`;\r\nexport const fadeRight = `\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0)\n\t}\n`;\r\nexport const fadeUp = `\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0)\n\t}\n`;\r\nexport const pulse = `\n\t0%, 100% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: .5;\n\t}\n`;\r\nexport const spin = `\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n`;\r\n","export const notificationStatusMapping = {\r\n    error: {\r\n        iconProps: {\r\n            name: 'falTimesCircle'\r\n        },\r\n        variant: 'subtleRed'\r\n    },\r\n    info: {\r\n        iconProps: {\r\n            name: 'falInfoCircle'\r\n        },\r\n        variant: 'subtleBlue'\r\n    },\r\n    loading: {\r\n        iconProps: {\r\n            animation: 'vui-spin 0.6s linear infinite',\r\n            name: 'fadSpinnerThird',\r\n            pathFill: ['blue.40', 'blue.60']\r\n        },\r\n        variant: 'subtleBlue'\r\n    },\r\n    success: {\r\n        iconProps: {\r\n            name: 'falCheckCircle'\r\n        },\r\n        variant: 'subtleGreen'\r\n    },\r\n    warning: {\r\n        iconProps: {\r\n            name: 'falExclamationCircle'\r\n        },\r\n        variant: 'subtleYellow'\r\n    }\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport { useButtonGroupContext } from '../buttonGroup/context';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { activeClassName, cs, filterUndefined, isReactText, isString } from '../utils';\r\nimport ButtonIcon from './buttonIcon';\r\nimport ButtonText from './buttonText';\r\nimport { buttonStateMapping } from './consts';\r\nimport { ButtonProvider } from './context';\r\nconst ContentWrapper = styled.span `\n  visibility: hidden;\n`;\r\nconst StateWrapper = styled.span `\n  bottom: 0;\n  display: flex;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n`;\r\nexport const ButtonBase = styled.buttonBox `\n  align-items: center;\n  border-radius: none;\n  display: inline-flex;\n  flex-shrink: 0;\n  font-weight: medium;\n  justify-content: center;\n  line-height: normal;\n  overflow: hidden;\n  position: relative;\n  transition-duration: fast;\n  user-select: none;\n  width: fit-content;\n`;\r\n/**\r\n * Triggers given actions on click. Supports multiple states, sizes and variants.\r\n *\r\n * Comes with additional props for extra behavior, like loading, disabled or elevated.\r\n *\r\n * Exposes some props to the children via context.\r\n */\r\nexport const Button = vui((props, ref) => {\r\n    const buttonGroupProps = useButtonGroupContext();\r\n    const mergedProps = { ...buttonGroupProps, ...props };\r\n    const { borderWidth: borderWidthProp, children, className, colorScheme, disabled, dropDownIcon = 'falAngleDown', icon, iconLeft, iconRight, isActive, isDropDown, isElevated, isFullWidth, isLoading, // eslint-disable-line\r\n    isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, title, variant: variantProp, ...rest } = mergedProps;\r\n    const hasState = Boolean(state) && state !== 'idle';\r\n    const states = { ...buttonStateMapping, ...stateMapping };\r\n    const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {};\r\n    const variant = filterUndefined({\r\n        variant: states[state]?.variant ?? variantProp\r\n    });\r\n    const styles = useStyleConfig('Button', { ...mergedProps, ...variant });\r\n    const { borderWidth, h, spaceX = 0, ...buttonStyles } = styles.container;\r\n    const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);\r\n    const Content = hasState ? ContentWrapper : React.Fragment;\r\n    // Apply more space for text and less space for icons\r\n    const border = borderWidthProp ?? borderWidth ?? 1;\r\n    const spaceXItem = spaceX - border;\r\n    const spaceXText = spaceX * 2 - border;\r\n    const iconLeftMr = spaceXItem + 1 + 'px';\r\n    const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';\r\n    const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';\r\n    const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';\r\n    let ariaLabel = 'vui-button';\r\n    if (title) {\r\n        ariaLabel = title;\r\n    }\r\n    else {\r\n        if (isString(text)) {\r\n            ariaLabel = text;\r\n        }\r\n        else if (isReactText(text)) {\r\n            ariaLabel = text.toString();\r\n        }\r\n        else {\r\n            if (isString(icon)) {\r\n                ariaLabel = icon;\r\n            }\r\n            else if (isString(iconLeft)) {\r\n                ariaLabel = iconLeft;\r\n            }\r\n            else if (isString(iconRight)) {\r\n                ariaLabel = iconRight;\r\n            }\r\n        }\r\n    }\r\n    const disabledProps = disabled\r\n        ? {\r\n            'aria-disabled': disabled,\r\n            disabledBg: 'bg',\r\n            disabledBorderColor: 'borderColor',\r\n            disabledColor: 'color',\r\n            hoverBg: 'bg',\r\n            hoverBorderColor: 'borderColor',\r\n            activeBg: 'bg',\r\n            cursor: 'not-allowed',\r\n            opacity: 0.5\r\n        }\r\n        : {};\r\n    const aliasedProps = filterUndefined({\r\n        borderRadius: isRound ? h / 2 : 0,\r\n        boxShadow: isElevated ? '2' : undefined,\r\n        minW: icon ? 0 : undefined,\r\n        pointerEvents: hasState ? 'none' : undefined,\r\n        w: isFullWidth ? '100%' : undefined\r\n    });\r\n    return (React.createElement(ButtonProvider, { value: context },\r\n        React.createElement(ButtonBase, { \"aria-label\": ariaLabel, borderWidth: border, className: cs('vui-button', className, isActive && activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, title: title, type: \"button\", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },\r\n            hasState && (React.createElement(StateWrapper, { onClick: (e) => e.stopPropagation(), ...stateProps },\r\n                React.createElement(ButtonIcon, { m: \"auto\", ...stateIconProps }))),\r\n            React.createElement(Content, null,\r\n                isString(icon) ? React.createElement(ButtonIcon, { name: icon }) : icon,\r\n                !icon && (React.createElement(React.Fragment, null,\r\n                    isString(iconLeft) ? React.createElement(ButtonIcon, { mr: isDropDown ? 0 : iconLeftMr, name: iconLeft }) : iconLeft,\r\n                    children ?? (isReactText(text) ? React.createElement(ButtonText, { ...{ isTruncated, text } }) : text),\r\n                    isString(iconRight) ? React.createElement(ButtonIcon, { ml: iconRightMl, name: iconRight }) : iconRight)),\r\n                isDropDown && React.createElement(ButtonIcon, { name: dropDownIcon })))));\r\n});\r\nButton.Icon = ButtonIcon;\r\nButton.Text = ButtonText;\r\nexport default Button;\r\n","import React, { useReducer } from 'react';\r\nimport { ThemeProvider } from 'styled-components';\r\nimport ModalStyle from '../../modal/modalStyle';\r\nimport PopoverStyle from '../../popover/popoverStyle';\r\nimport { Portal } from '../../portal';\r\nimport defaultTheme from '../../theme';\r\nimport { Toaster } from '../../toast';\r\nimport { VuiContextProvider } from './context';\r\nimport GlobalStyle from './globalStyle';\r\nimport NotifyOffline from './notifyOffline';\r\nimport { genericReducer, toastsReducer } from './reducers';\r\nimport ResetCSS from './resetCSS';\r\n/** Provides theme to all wrapped components and by default includes CSS reset and global styles. */\r\nconst VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = defaultTheme, notifyOffline = false }) => {\r\n    const [toasts, toastsDispatch] = useReducer(toastsReducer, { list: [] });\r\n    const [portalSlot, setPortalSlot] = useReducer(genericReducer, null);\r\n    const addToast = (toast) => toastsDispatch({ type: 'add', toast });\r\n    const removeToast = (id) => toastsDispatch({ type: 'remove', toast: { id } });\r\n    const context = { toasts, addToast, removeToast, setPortalSlot };\r\n    return (React.createElement(VuiContextProvider, { value: context },\r\n        React.createElement(ThemeProvider, { theme: theme },\r\n            React.createElement(React.Fragment, null,\r\n                resetCSS && React.createElement(ResetCSS, null),\r\n                React.createElement(GlobalStyle, { globalStyle: globalStyle }),\r\n                React.createElement(ModalStyle, null),\r\n                React.createElement(PopoverStyle, null),\r\n                children,\r\n                notifyOffline && React.createElement(NotifyOffline, null),\r\n                React.createElement(Portal, null,\r\n                    portalSlot,\r\n                    React.createElement(Toaster, null))))));\r\n};\r\nexport default VuiProvider;\r\n","import React from 'react';\r\nimport Box from '../box';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport T from '../t';\r\nimport { cs, filterUndefined } from '../utils';\r\nimport { spinnerPositionMapping, spinnerSpeedMapping } from './consts';\r\nexport const SpinnerCircle = styled.divBox `\n  border-radius: round;\n  display: flex;\n  flex-shrink: 0;\n`;\r\n/**\r\n * Displays a spinning circular element with optional text to signify loading content.\r\n *\r\n * Handles different positioning scenarios, speeds and coloring of the circle.\r\n */\r\nexport const Spinner = vui((props, ref) => {\r\n    const { className, emptyColor, size, speed: speedProp = 'normal', text, textPosition = 'bottom', thickness, ...rest } = props;\r\n    const styles = useStyleConfig('Spinner', props);\r\n    const isCustomSize = typeof size === 'number';\r\n    const positionProps = spinnerPositionMapping[textPosition];\r\n    const speed = spinnerSpeedMapping[speedProp] ?? speedProp;\r\n    const circleProps = filterUndefined({\r\n        borderColor: emptyColor,\r\n        borderWidth: isCustomSize ? thickness ?? 4 : thickness,\r\n        h: isCustomSize ? size : undefined,\r\n        w: isCustomSize ? size : undefined\r\n    });\r\n    return (React.createElement(Box, { center: true, className: cs('vui-spinner', className), gap: 1, ref: ref, transitionDuration: \"fast\", ...styles.container, ...positionProps.container, ...rest },\r\n        React.createElement(SpinnerCircle, { animation: `vui-spin ${speed} linear infinite`, className: \"vui-spinnerCircle\", ...styles.circle, ...circleProps }),\r\n        text && (React.createElement(T, { className: \"vui-spinnerText\", ...styles.text }, text))));\r\n});\r\nexport default Spinner;\r\n","import React from 'react';\r\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core';\r\nimport { cs, filterUndefined } from '../utils';\r\nexport const DividerBase = styled.hrBox `\n  border-color: sandstone.90;\n`;\r\n/** Visually separates content with a horizontal or vertical line. */\r\nexport const Divider = vui((props, ref) => {\r\n    const { className, isVertical, width, ...rest } = omitThemingProps(props);\r\n    const styles = useStyleConfig('Divider', props);\r\n    const borderSide = isVertical ? 'Right' : 'Bottom';\r\n    const borderWidth = `border${borderSide}Width`;\r\n    const height = isVertical ? '100%' : '';\r\n    const aliasedProps = filterUndefined({\r\n        [borderWidth]: width ?? 1\r\n    });\r\n    return (React.createElement(DividerBase, { className: cs('vui-divider', className), h: height, ref: ref, ...styles, ...aliasedProps, ...rest }));\r\n});\r\nexport default Divider;\r\n","import React, { Fragment } from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport Link from '../link';\r\nimport { cs, filterUndefined, isReactText, isString } from '../utils';\r\nimport { useListContext } from './context';\r\nimport ListIcon from './listIcon';\r\nimport ListText from './listText';\r\n/** Used as optional content wrapper when list item should be a link. */\r\nconst ListItemLink = vui((props, ref) => (React.createElement(Link, { borderRadius: \"none\", className: \"vui-listItemLink\", h: \"100%\", px: 2, ref: ref, variant: \"plain\", w: \"100%\", ...props })));\r\n/*@formatter:off*/\r\nexport const ListItemBase = styled.liBox `\n  display: flex;\n  line-height: normal;\n  outline: none;\n  transition-duration: fast;\n\n  &[aria-disabled='true'] {\n    color: sandstone.main;\n    cursor: not-allowed;\n    user-select: none;\n  }\n\n  &:focus-visible {\n    z-index: 1;\n  }\n`;\r\n/*@formatter:on*/\r\n/**\r\n * Displays a list item with text and optional icons. Can be shown as interactive or selected.\r\n * Optionally wraps the content with an <a> element when rendering a link.\r\n */\r\nexport const ListItem = vui((props, ref) => {\r\n    const mergedProps = { ...useListContext(), ...props };\r\n    const { children, center, centerH, centerV = true, className, column, disabled, iconLeft, iconRight, isInteractive: isInteractiveProp, isSelected, isTruncated, itemLeft, itemRight, linkProps, onClick, text, ...rest } = mergedProps;\r\n    const styles = useStyleConfig('List', useListContext());\r\n    const { activeBg, hoverBg, selectedBg, ...itemStyles } = styles.item;\r\n    const isLinkItem = linkProps !== undefined;\r\n    const isInteractive = isInteractiveProp || isLinkItem || onClick !== undefined;\r\n    const alignItems = (center || (column ? centerH : centerV)) && 'center';\r\n    const flexDirection = column && 'column';\r\n    const justifyContent = (center || (column ? centerV : centerH)) && 'center';\r\n    const ContentWrapper = isLinkItem ? ListItemLink : Fragment;\r\n    const interactiveProps = !disabled && isInteractive\r\n        ? {\r\n            cursor: 'pointer',\r\n            focusVisibleRing: 2,\r\n            hoverBg,\r\n            activeBg,\r\n            tabIndex: !isLinkItem ? 0 : undefined,\r\n            userSelect: 'none'\r\n        }\r\n        : {};\r\n    const aliasedProps = filterUndefined({\r\n        alignItems,\r\n        bg: isSelected ? selectedBg : undefined,\r\n        'aria-disabled': disabled,\r\n        flexDirection,\r\n        justifyContent,\r\n        px: isLinkItem ? 0 : undefined\r\n    });\r\n    return (React.createElement(ListItemBase, { bg: disabled ? 'sandstone.95' : undefined, className: cs('vui-listItem', className), onClick: !disabled ? onClick : undefined, ref: ref, ...itemStyles, ...interactiveProps, ...aliasedProps, ...rest },\r\n        React.createElement(ContentWrapper, { ...linkProps },\r\n            itemLeft,\r\n            isString(iconLeft) ? React.createElement(ListIcon, { mr: 1, name: iconLeft }) : iconLeft,\r\n            children ?? (isReactText(text) ? React.createElement(ListText, { ...{ isTruncated, text } }) : text),\r\n            isString(iconRight) ? React.createElement(ListIcon, { ml: \"auto\", name: iconRight }) : iconRight,\r\n            itemRight)));\r\n});\r\nexport default ListItem;\r\n","import React from 'react';\r\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core';\r\nimport { cs } from '../utils';\r\nexport const ImageBase = styled.imgBox `\n  height: auto;\n  object-fit: cover;\n  width: 100%;\n`;\r\n/** Displays an image. Includes base styling. */\r\nexport const Image = vui((props, ref) => {\r\n    const { alt, className, title, ...rest } = omitThemingProps(props);\r\n    const styles = useStyleConfig('Image', props);\r\n    return (React.createElement(ImageBase, { alt: alt ? alt : title ? title : '', className: cs('vui-image', className), ref: ref, title: title, ...styles, ...rest }));\r\n});\r\nexport default Image;\r\n","import React from 'react';\r\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core';\r\nimport Icon from '../icon';\r\nimport Image from '../image';\r\nimport { cs, filterUndefined } from '../utils';\r\nimport { defaultGetInitials } from './helpers';\r\nfunction imageExists(image_url) {\r\n    const http = new XMLHttpRequest();\r\n    http.open('HEAD', image_url, false);\r\n    http.send();\r\n    return http.status !== 404;\r\n}\r\nexport const AvatarBase = styled.spanBox `\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  font-weight: medium;\n  justify-content: center;\n  line-height: normal;\n  outline: none;\n  overflow: hidden;\n  transition-duration: fast;\n\n  &:focus {\n    border-color: transparent;\n  }\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    user-select: none;\n  }\n`;\r\n/** Displays user data, such as name initials or profile image. */\r\nexport const Avatar = vui((props, ref) => {\r\n    const { children, className, disabled, getInitials = defaultGetInitials, icon, isInteractive = props.onClick !== undefined, isSquare, name = '', src, ...rest } = omitThemingProps(props);\r\n    const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig('Avatar', props);\r\n    const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%';\r\n    const initials = getInitials(name);\r\n    const internalIcon = src && !imageExists(src) ? 'falUser' : icon;\r\n    const interactiveProps = !disabled && isInteractive\r\n        ? {\r\n            cursor: 'pointer',\r\n            hoverBg,\r\n            hoverOpacity: src ? 0.85 : 1,\r\n            activeOpacity: src ? 0.7 : 1,\r\n            activeBg,\r\n            focusRing: 3,\r\n            tabIndex: 0,\r\n            userSelect: 'none'\r\n        }\r\n        : {};\r\n    const aliasedProps = filterUndefined({\r\n        borderRadius: borderRadius,\r\n        'aria-disabled': disabled\r\n    });\r\n    return (React.createElement(AvatarBase, { borderRadius: borderRadius, className: cs('vui-avatar', className), h: h, ref: ref, w: h, ...styles, ...interactiveProps, ...aliasedProps, ...rest }, children ? (children) : src && imageExists(src) ? (React.createElement(Image, { ...{ borderRadius, src } })) : internalIcon ? (React.createElement(Icon, { name: internalIcon, size: iconSize })) : initials ? (initials) : null));\r\n});\r\nexport default Avatar;\r\n","import React from 'react';\r\nimport Button from '../button';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { cs } from '../utils';\r\nimport { useHeaderContext } from './context';\r\n/*@formatter:off*/\r\nconst Badge = styled.spanBox `\n  align-items: center;\n  background-color: energyRed.main;\n  border-radius: round;\n  color: white;\n  display: flex;\n  font-size: 12px;\n  font-weight: medium;\n  height: 20px;\n  justify-content: center;\n  position: absolute;\n  right: 1px;\n  top: 1px;\n  width: 20px;\n`;\r\n/*@formatter:on*/\r\n/** Icon link to Veracity notifications engine with an optional number of new notifications. */\r\nexport const HeaderNotifications = vui((props, ref) => {\r\n    const { children, className, count = 0, url, ...rest } = props;\r\n    const { links } = useHeaderContext() ?? {};\r\n    const styles = useStyleConfig('Header', useHeaderContext()).notifications;\r\n    return (React.createElement(Button, { as: \"a\", className: cs('vui-headerNotifications', className), href: url ?? links.notifications, minW: 0, ml: 1, position: \"relative\", px: \"7px\", ref: ref, size: \"lg\", title: \"Notifications\", variant: \"tertiaryDark\", ...styles.container, ...rest }, children ?? (React.createElement(React.Fragment, null,\r\n        React.createElement(Button.Icon, { name: \"falBell\" }),\r\n        count > 0 && React.createElement(Badge, null, count < 100 ? count : '99+')))));\r\n});\r\nexport default HeaderNotifications;\r\n","import React, { useRef, useState } from 'react';\r\nimport { styled, useLinks, useStyleConfig, useUp, vui } from '../core';\r\nimport { cs, useClickOutside } from '../utils';\r\nimport { HeaderProvider } from './context';\r\nimport HeaderAccount from './headerAccount';\r\nimport HeaderAccountUserInfo from './headerAccountUserInfo';\r\nimport HeaderApplicationName from './headerApplicationName';\r\nimport HeaderContent from './headerContent';\r\nimport HeaderCreateAccount from './headerCreateAccount';\r\nimport HeaderDivider from './headerDivider';\r\nimport HeaderLinkItem from './headerLinkItem';\r\nimport HeaderLogo from './headerLogo';\r\nimport HeaderMainLinks from './headerMainLinks';\r\nimport HeaderMobileContent from './headerMobileContent';\r\nimport HeaderMobileToggle from './headerMobileToggle';\r\nimport HeaderNotifications from './headerNotifications';\r\nimport HeaderServices from './headerServices';\r\nimport HeaderServicesMessage from './headerServicesMessage';\r\nimport HeaderSignIn from './headerSignIn';\r\nimport HeaderSupport from './headerSupport';\r\n/*@formatter:off*/\r\nexport const HeaderBase = styled.headerBox `\n  align-items: center;\n  background-color: white;\n  border-bottom: 1px solid darkBlue.main;\n  display: flex;\n  position: relative;\n`;\r\n/*@formatter:on*/\r\n/** Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content. */\r\nexport const Header = vui((props, ref) => {\r\n    const { className, size, variant, ...rest } = props;\r\n    const [isMobileOpen, setIsMobileOpen] = useState(false);\r\n    const mobileContentRef = useRef(null);\r\n    const mobileToggleRef = useRef(null);\r\n    const styles = useStyleConfig('Header', props);\r\n    const headerHeight = 72;\r\n    const [links] = useLinks();\r\n    useClickOutside([mobileContentRef, mobileToggleRef], () => {\r\n        setIsMobileOpen(false);\r\n    });\r\n    const isDesktop = useUp('lg');\r\n    const isMobile = !isDesktop;\r\n    const context = {\r\n        headerHeight,\r\n        isDesktop,\r\n        isMobile,\r\n        isMobileOpen,\r\n        links,\r\n        mobileContentRef,\r\n        mobileToggleRef,\r\n        setIsMobileOpen,\r\n        size,\r\n        variant\r\n    };\r\n    return (React.createElement(HeaderProvider, { value: context },\r\n        React.createElement(HeaderBase, { className: cs('vui-header', className), h: headerHeight, px: { xs: 2, lg: 5 }, ref: ref, role: \"banner\", ...styles.container, ...rest })));\r\n});\r\nHeader.Account = HeaderAccount;\r\nHeader.AccountUserInfo = HeaderAccountUserInfo;\r\nHeader.Support = HeaderSupport;\r\nHeader.ApplicationName = HeaderApplicationName;\r\nHeader.Content = HeaderContent;\r\nHeader.CreateAccount = HeaderCreateAccount;\r\nHeader.Divider = HeaderDivider;\r\nHeader.LinkItem = HeaderLinkItem;\r\nHeader.Logo = HeaderLogo;\r\nHeader.MainLinks = HeaderMainLinks;\r\nHeader.MobileContent = HeaderMobileContent;\r\nHeader.MobileToggle = HeaderMobileToggle;\r\nHeader.Notifications = HeaderNotifications;\r\nHeader.Services = HeaderServices;\r\nHeader.ServicesMessage = HeaderServicesMessage;\r\nHeader.SignIn = HeaderSignIn;\r\nexport default Header;\r\n","import React from 'react';\r\nimport { Box } from '../box';\r\nimport { styled, useDown, useStyleConfig, vui } from '../core';\r\nimport { Divider } from '../divider';\r\nimport { Link } from '../link';\r\nimport { T } from '../t';\r\nimport { cs } from '../utils';\r\nimport { FooterProvider } from './context';\r\nimport FooterColumn from './footerColumn';\r\nimport FooterContent from './footerContent';\r\nimport FooterHeading from './footerHeading';\r\nimport FooterLink from './footerLink';\r\nimport FooterRow from './footerRow';\r\nimport FooterSection from './footerSection';\r\nimport FooterSlimColumn from './footerSlimColumn';\r\nimport { defaultLinkedInUrl, FooterTrademark } from './footerTrademark';\r\n/*@formatter:off*/\r\nexport const FooterBase = styled.divBox `\n  background-color: darkBlue.main;\n  color: white;\n  padding: 5 3;\n`;\r\n/*@formatter:on*/\r\n/** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */\r\nexport const Footer = vui((props, ref) => {\r\n    const { applicationLinks, applicationStaticItems = [], children, className, columns, isApplication = false, linkedIn, size, variant, isSlim, ...rest } = props;\r\n    const context = { size, variant };\r\n    const styles = useStyleConfig('Footer', props);\r\n    if (isApplication) {\r\n        if (!applicationLinks) {\r\n            console.error('Footer: isApplication is true but applicationLinks is not set.');\r\n        }\r\n    }\r\n    const slimLinks = [\r\n        {\r\n            id: 'home',\r\n            text: 'veracity.com',\r\n            url: 'https://www.veracity.com/'\r\n        }\r\n    ];\r\n    columns?.map(column => {\r\n        column.map(section => {\r\n            section.links?.map(link => {\r\n                if (!link)\r\n                    return;\r\n                if (['home', 'support', 'status'].includes(link.id || '')) {\r\n                    slimLinks.push(link);\r\n                }\r\n            });\r\n        });\r\n    });\r\n    const downMd = useDown('md');\r\n    const downLg = useDown('lg');\r\n    return (React.createElement(FooterProvider, { value: context },\r\n        React.createElement(FooterBase, { className: cs('vui-footer', isApplication ? 'vui-footer-app' : '', className), px: isApplication ? '40px' : 3, py: isSlim ? (downMd ? '16px' : '9px') : 5, role: \"contentinfo\", ...styles.container, ref: ref, ...rest },\r\n            isApplication && (React.createElement(FooterContent, { alignContent: \"center\", alignItems: \"center\", maxW: \"100%\" },\r\n                React.createElement(FooterRow, { alignContent: \"space-between\", w: 1 },\r\n                    React.createElement(Box, { alignItems: \"self-start\", columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true }, applicationLinks?.map((link, index) => (React.createElement(Box, { flex: { xs: '0 0 50%', sm: '0 0 auto' }, key: index, minW: 70 },\r\n                        React.createElement(FooterLink, { ...link }))))),\r\n                    downLg && React.createElement(Divider, { borderColor: \"sandstone.main\", mb: 0.5, mt: 1, w: 1 }),\r\n                    React.createElement(Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true },\r\n                        applicationStaticItems?.map((text, index) => (React.createElement(Box, { key: index },\r\n                            React.createElement(T, { size: \"sm\" }, text)))),\r\n                        React.createElement(Box, null,\r\n                            React.createElement(Link, { fontWeight: \"demi\", href: linkedIn ?? defaultLinkedInUrl, iconLeft: React.createElement(Link.Icon, { mr: 1, name: \"cubCircleLinkedIn\", radius: \"50%\", size: \"xs\" }), isExternal: true, size: { _: 'sm', md: 'md' }, ...styles.link },\r\n                                React.createElement(FooterHeading, { fontSize: \"16px\", mb: 0, text: \"Follow us\" }))))))),\r\n            !isApplication && isSlim && (React.createElement(FooterContent, { alignContent: \"center\", alignItems: \"center\", maxW: { xs: 343, sm: 305, md: 720, lg: 975 } },\r\n                React.createElement(FooterRow, null,\r\n                    slimLinks.map((link, index) => {\r\n                        /** if the screen is small drop one specific link */\r\n                        if (downLg && link?.id === 'support')\r\n                            return;\r\n                        return (React.createElement(FooterSlimColumn, { key: index },\r\n                            React.createElement(FooterLink, { ...link })));\r\n                    }),\r\n                    downMd && React.createElement(Divider, { borderColor: \"sandstone.main\", mb: 0.5, mt: 1, w: 1 }),\r\n                    React.createElement(FooterSlimColumn, { centerV: true },\r\n                        React.createElement(T, { size: \"xs\" },\r\n                            React.createElement(T, { size: \"xs\", weight: \"demi\" }, \"Veracity by DNV\"),\r\n                            \", DNV AS\")),\r\n                    React.createElement(FooterSlimColumn, null,\r\n                        React.createElement(Link, { fontWeight: \"demi\", href: linkedIn ?? defaultLinkedInUrl, iconLeft: React.createElement(Link.Icon, { mr: 1, name: \"cubCircleLinkedIn\", radius: \"50%\", size: \"xs\" }), isExternal: true, size: { _: 'sm', md: 'md' }, ...styles.link },\r\n                            React.createElement(FooterHeading, { fontSize: \"16px\", mb: 0, text: \"Follow us\" })))))),\r\n            !isApplication && !isSlim && (React.createElement(FooterContent, null,\r\n                children ??\r\n                    (columns && (React.createElement(FooterRow, null, columns.map((sections, index) => (React.createElement(FooterColumn, { key: index, sections: sections })))))),\r\n                children || columns ? React.createElement(Divider, { borderColor: \"sandstone.main\", my: 4 }) : null,\r\n                React.createElement(FooterRow, null,\r\n                    React.createElement(FooterTrademark, { linkedIn: linkedIn })))))));\r\n});\r\nFooter.Column = FooterColumn;\r\nFooter.Content = FooterContent;\r\nFooter.Heading = FooterHeading;\r\nFooter.Link = FooterLink;\r\nFooter.Row = FooterRow;\r\nFooter.Section = FooterSection;\r\nexport default Footer;\r\n","import React from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { cs, filterUndefined } from '../utils';\r\nimport { useInputContext } from './context';\r\nexport const InputInputBase = styled.input `\n  align-self: stretch;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n  padding: 0 1;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`;\r\n/** Displays an input element within the Input component. */\r\nexport const InputInput = vui((props, ref) => {\r\n    const { className, ...rest } = props;\r\n    const inputProps = useInputContext();\r\n    const mergedProps = { ...inputProps, ...props };\r\n    const styles = useStyleConfig('Input', mergedProps);\r\n    const aliasedProps = filterUndefined({\r\n        'aria-disabled': mergedProps.disabled\r\n    });\r\n    return (React.createElement(InputInputBase, { \"aria-label\": \"input-text\", autoComplete: \"false\", className: cs('vui-inputInput', className), ref: ref, ...styles.input, ...aliasedProps, ...rest }));\r\n});\r\nexport default InputInput;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { List } from '../list';\r\nimport { Popover } from '../popover';\r\nimport { T } from '../t';\r\nimport { cs, filterUndefined, isString } from '../utils';\r\nimport { inputColors, inputStateMapping } from './consts';\r\nimport { InputProvider } from './context';\r\nimport { getInitialCount } from './helpers';\r\nimport HelpText from './helpText';\r\nimport InputIcon from './inputIcon';\r\nimport InputInput from './inputInput';\r\nexport const InputContainer = styled.divBox `\n  width: 100%;\n`;\r\nexport const InputBase = styled.divBox `\n  align-items: center;\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  outline: none;\n  position: relative;\n  transition-duration: fast;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\r\n/**\r\n * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.\r\n * Forwards many relevant props to the inner input. Handles different states, like loading or error.\r\n * Exposes some props to the children via context.\r\n */\r\nexport const Input = vui((props, ref) => {\r\n    const { autoCompleteOptions, autoFocus, children, className, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size, state = '', stateMapping, step, type = 'text', value, variant, ...rest } = props;\r\n    const [count, setCount] = useState(getInitialCount(props));\r\n    const [valueInternal, setValueInternal] = useState(defaultValue || '');\r\n    const states = { ...inputStateMapping, ...stateMapping };\r\n    const styles = useStyleConfig('Input', props);\r\n    const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);\r\n    function onChange(e) {\r\n        setValueInternal(e.target.value);\r\n        setCount(e.target.value.length);\r\n        onChangeProp?.(e);\r\n    }\r\n    const aliasedProps = filterUndefined({\r\n        'aria-disabled': disabled,\r\n        bg: readOnly ? inputColors.disabled : undefined,\r\n        focusWithinBorderColor: !readOnly ? 'transparent' : undefined,\r\n        focusWithinRingColor: readOnly ? 'transparent' : undefined\r\n    });\r\n    useEffect(() => {\r\n        setValueInternal(value ?? '');\r\n        setCount(`${value}`?.length ? `${value}`.length : 0);\r\n    }, [value]);\r\n    const filterAutoCompleteOptions = (i) => valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase());\r\n    return (React.createElement(InputProvider, { value: context },\r\n        React.createElement(Popover, { placement: \"bottom-start\" },\r\n            React.createElement(Popover.Trigger, { as: InputContainer },\r\n                React.createElement(InputBase, { className: cs('vui-input', className), ref: ref, ...styles.container, ...aliasedProps, ...rest },\r\n                    itemLeft,\r\n                    isString(iconLeft) ? React.createElement(InputIcon, { ml: 1, name: iconLeft }) : iconLeft,\r\n                    children ?? input ?? (React.createElement(InputInput, { ref: inputRef, ...{\r\n                            autoFocus,\r\n                            defaultValue,\r\n                            disabled,\r\n                            id,\r\n                            max,\r\n                            maxLength,\r\n                            min,\r\n                            name,\r\n                            onBlur,\r\n                            onChange,\r\n                            onFocus,\r\n                            pattern,\r\n                            placeholder,\r\n                            readOnly,\r\n                            required,\r\n                            step,\r\n                            type\r\n                        }, value: valueInternal, ...inputProps })),\r\n                    isString(iconRight) ? React.createElement(InputIcon, { mr: 1, name: iconRight }) : iconRight,\r\n                    itemRight,\r\n                    state && React.createElement(InputIcon, { mr: 1, ...states[state]?.iconProps }),\r\n                    showCount && (React.createElement(T, { className: \"vui-inputCount\", color: maxLength && count > maxLength ? inputColors.error : inputColors.helpText, position: \"absolute\", right: 0, size: \"sm\", top: \"calc(100% + 1px)\" },\r\n                        count,\r\n                        \" \",\r\n                        maxLength ? `/ ${maxLength}` : null)))),\r\n            !!autoCompleteOptions && (React.createElement(Popover.Content, null,\r\n                React.createElement(List, null, autoCompleteOptions.filter(filterAutoCompleteOptions).map((i) => (React.createElement(List.Item, { cursor: \"pointer\", hoverBg: \"skyBlue.hover\", key: i, onClick: () => setValueInternal(i) }, i))))))),\r\n        !!helpText && React.createElement(HelpText, null, helpText),\r\n        !!errorText && React.createElement(HelpText, { isError: true }, errorText)));\r\n});\r\nInput.Icon = InputIcon;\r\nInput.Input = InputInput;\r\nInput.HelpText = HelpText;\r\nexport default Input;\r\n","import React, { Component } from \"react\";\r\nimport { styled, SystemProps, th } from \"@veracity/vui\"\r\nimport { LazyPasswordEntropy } from \"../utils/LazyPasswordEntropy\";\r\nimport { identityClient } from \"..\";\r\nimport { Observer } from \"mobx-react-lite\";\r\n\r\nexport const PasswordStrengthMeterBase = styled.divBox<{ strength: number; }>`\r\n    background: ${th.color(\"grey.20\")};\r\n    position: relative;\r\n\theight: 4px;\r\n\r\n    &:before {\r\n        background: ${p => {\r\n            switch (p.strength) {\r\n                case 0:\r\n                    return th.color(\"red.80\");\r\n                case 1:\r\n                case 2:\r\n                    return th.color(\"yellow.80\");\r\n                case 3:\r\n                    return th.color(\"blue.80\");\r\n                case 4:\r\n                    return th.color(\"green.80\");\r\n            }\r\n        }};\r\n        bottom: 0;\r\n        content: \"\";\r\n        display: block;\r\n        left: 0;\r\n        position: absolute;\r\n        top: 0;\r\n        transition: all ${th.animation(\"standard\")} .2s;\r\n        width: ${p => (p.strength + 1) * 100 / 5}%;\r\n    }\r\n`;\r\n\r\nexport interface PasswordStrengthMeterProps extends SystemProps {\r\n    password: string;\r\n}\r\n\r\nexport class PasswordStrengthMeter extends Component<PasswordStrengthMeterProps> {\r\n\r\n    constructor(props: PasswordStrengthMeterProps) {\r\n        super(props);\r\n        this._lazyPasswordEntropy = new LazyPasswordEntropy(props.password, identityClient);\r\n    }\r\n\r\n    private _lazyPasswordEntropy: LazyPasswordEntropy;\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<PasswordStrengthMeterProps>, nextState: Readonly<{}>, nextContext: any) {\r\n        this._lazyPasswordEntropy.password = nextProps.password;\r\n        return true;\r\n    }\r\n\r\n    render() {\r\n        \r\n        let { password, ...rest } = this.props;\r\n\r\n        return <Observer>{() => <PasswordStrengthMeterBase strength={this._lazyPasswordEntropy.state.result?.Score} {...rest} />}</Observer>;\r\n    }\r\n}","import React from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { colors } from '../theme';\r\nimport { cs, HSLToRGBA, parseHSL } from '../utils';\r\nimport { useModalContext } from './context';\r\nconst { h, s, l } = parseHSL(colors.sandstone[5]);\r\nconst rgba = HSLToRGBA(h, s, l, 0.6);\r\nexport const ModalBackdropBase = styled.divBox `\n  background-color: ${rgba};\n  inset: 0;\n  position: fixed;\n  z-index: modal;\n`;\r\n/** Displays a dark overlay underneath modal content, but on top of page content. */\r\nexport const ModalBackdrop = vui((props, ref) => {\r\n    const { className, ...rest } = props;\r\n    const styles = useStyleConfig('Modal', useModalContext());\r\n    return (React.createElement(ModalBackdropBase, { animation: \"fadeIn\", className: cs('vui-modalBackdrop', className), ref: ref, ...styles.backdrop, ...rest }));\r\n});\r\nexport default ModalBackdrop;\r\n","import React from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { callAll, cs } from '../utils';\r\nimport { useModalContext } from './context';\r\nexport const ModalContentBase = styled.divBox `\n  display: flex;\n  inset: 0px;\n  position: fixed;\n  z-index: modal;\n`;\r\n/** Wraps the content provided to the Modal component. */\r\nexport const ModalContent = vui((props, ref) => {\r\n    const { className, ...rest } = props;\r\n    const { onBackdropClick } = useModalContext() ?? {};\r\n    const styles = useStyleConfig('Modal', useModalContext());\r\n    return (React.createElement(ModalContentBase, { className: cs('vui-modalContent', className), ref: ref, tabIndex: -1, ...styles.content, ...rest, onClick: callAll(props.onClick, onBackdropClick) }));\r\n});\r\nexport default ModalContent;\r\n","import React, { useRef } from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { Modal } from '../modal';\r\nimport { cs, isJsx, isReactText, random, useIds } from '../utils';\r\nimport { DialogProvider } from './context';\r\nimport DialogBody from './dialogBody';\r\nimport DialogCancelButton from './dialogCancelButton';\r\nimport DialogCloseButton from './dialogCloseButton';\r\nimport DialogFooter from './dialogFooter';\r\nimport DialogHeader from './dialogHeader';\r\nimport DialogIcon from './dialogIcon';\r\nimport DialogSubmitButton from './dialogSubmitButton';\r\nimport DialogTitle from './dialogTitle';\r\nexport const DialogBase = styled.divBox `\n  background-color: white;\n  border-radius: 1px;\n  box-shadow: modal;\n  display: flex;\n  flex-direction: column;\n  margin: 16px;\n  max-height: calc(100vh - 32px); // full height - margin top/bottom\n  width: 100%;\n`;\r\n/**\r\n * Displays content in a Modal window. Includes required accessibility configuration.\r\n *\r\n * Dialog is built upon `Modal`.\r\n *\r\n * The content can include important information, like warnings or errors, simple forms or prompts for user's decision. It blocks interaction with the rest of the page, but often can be disabled by pressing Escape, clicking on the backdrop or close button.\r\n */\r\nexport const Dialog = vui((props, ref) => {\r\n    const { body: bodyProp, cancelButton, children, className, closeButton, footer, header, icon, id, isOpen, modalProps: modalPropsProp, onClose, size, status, submitButton, title, variant, ...rest } = props;\r\n    const styles = useStyleConfig('Dialog', props);\r\n    const idRef = useRef(id ?? random().toString());\r\n    const [dialogId, bodyId, titleId] = useIds(idRef.current, ['dialog', 'dialog-body', 'dialog-title']);\r\n    const body = isReactText(bodyProp) ? { children: bodyProp } : bodyProp;\r\n    const showFooter = Boolean(footer || cancelButton || submitButton);\r\n    const showHeader = Boolean(header || closeButton || icon || title);\r\n    const ariaProps = {\r\n        'aria-describedby': bodyId,\r\n        'aria-labelledby': titleId\r\n    };\r\n    const modalProps = {\r\n        ...modalPropsProp,\r\n        contentProps: { alignItems: 'center', justifyContent: 'center', ...modalPropsProp?.contentProps }\r\n    };\r\n    const context = { bodyId, icon, isOpen, onClose, size, status, titleId, variant };\r\n    return (React.createElement(DialogProvider, { value: context },\r\n        React.createElement(Modal, { ...{ isOpen, onClose }, ...modalProps },\r\n            React.createElement(DialogBase, { className: cs('vui-dialog', className), id: dialogId, ref: ref, role: \"dialog\", ...ariaProps, ...styles.container, ...rest }, children ?? (React.createElement(React.Fragment, null,\r\n                isJsx(header) ? header : showHeader && React.createElement(DialogHeader, { ...{ closeButton, icon, title }, ...header }),\r\n                isJsx(body) ? body : body && React.createElement(DialogBody, { ...body }),\r\n                isJsx(footer) ? footer : showFooter && React.createElement(DialogFooter, { ...{ cancelButton, submitButton }, ...footer })))))));\r\n});\r\nDialog.Body = DialogBody;\r\nDialog.CancelButton = DialogCancelButton;\r\nDialog.CloseButton = DialogCloseButton;\r\nDialog.Footer = DialogFooter;\r\nDialog.Header = DialogHeader;\r\nDialog.Icon = DialogIcon;\r\nDialog.SubmitButton = DialogSubmitButton;\r\nDialog.Title = DialogTitle;\r\nexport default Dialog;\r\n","interface IInjectGoogleReCaptchaScriptParams {\n  render: string;\n  onLoadCallbackName: string;\n  useRecaptchaNet: boolean;\n  useEnterprise: boolean;\n  onLoad: () => void;\n  onError: () => void;\n  language?: string;\n  scriptProps?: {\n    nonce?: string;\n    defer?: boolean;\n    async?: boolean;\n    appendTo?: 'head' | 'body';\n    id?: string;\n  };\n}\n\n/**\n * Function to generate the src for the script tag\n *\n * @param param0\n * @returns\n */\nconst generateGoogleRecaptchaSrc = ({\n  useRecaptchaNet,\n  useEnterprise\n}: {\n  useRecaptchaNet: boolean;\n  useEnterprise: boolean;\n}) => {\n  const hostName = useRecaptchaNet ? 'recaptcha.net' : 'google.com';\n  const script = useEnterprise ? 'enterprise.js' : 'api.js';\n\n  return `https://www.${hostName}/recaptcha/${script}`;\n};\n\n/**\n * Function to clean the recaptcha_[language] script injected by the recaptcha.js\n */\nconst cleanGstaticRecaptchaScript = () => {\n  const script = document.querySelector(\n    'script[src^=\"https://www.gstatic.com/recaptcha/releases\"]'\n  );\n\n  if (script) {\n    script.remove();\n  }\n};\n\n/**\n * Function to check if script has already been injected\n *\n * @param scriptId\n * @returns\n */\nexport const isScriptInjected = (scriptId: string) =>\n  !!document.querySelector(`#${scriptId}`);\n\n/**\n * Function to remove default badge\n *\n * @returns\n */\nconst removeDefaultBadge = () => {\n  const nodeBadge = document.querySelector('.grecaptcha-badge');\n  if (nodeBadge && nodeBadge.parentNode) {\n    document.body.removeChild(nodeBadge.parentNode);\n  }\n};\n\n/**\n * Function to clear custom badge\n *\n * @returns\n */\nconst cleanCustomBadge = (customBadge: HTMLElement | null) => {\n  if (!customBadge) {\n    return;\n  }\n\n  while (customBadge.lastChild) {\n    customBadge.lastChild.remove();\n  }\n};\n\n/**\n * Function to clean node of badge element\n *\n * @param container\n * @returns\n */\nexport const cleanBadge = (container?: HTMLElement | string) => {\n  if (!container) {\n    removeDefaultBadge();\n\n    return;\n  }\n\n  const customBadge = typeof container === 'string' ? document.getElementById(container) : container;\n\n  cleanCustomBadge(customBadge);\n};\n\n/**\n * Function to clean google recaptcha script\n *\n * @param scriptId\n * @param container\n */\nexport const cleanGoogleRecaptcha = (scriptId: string, container?: HTMLElement | string) => {\n  // remove badge\n  cleanBadge(container);\n\n  // remove old config from window\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  (window as any).___grecaptcha_cfg = undefined;\n\n  // remove script\n  const script = document.querySelector(`#${scriptId}`);\n  if (script) {\n    script.remove();\n  }\n\n  cleanGstaticRecaptchaScript();\n};\n\n/**\n * Function to inject the google recaptcha script\n *\n * @param param0\n * @returns\n */\nexport const injectGoogleReCaptchaScript = ({\n  render,\n  onLoadCallbackName,\n  language,\n  onLoad,\n  useRecaptchaNet,\n  useEnterprise,\n  scriptProps: {\n    nonce = '',\n    defer = false,\n    async = false,\n    id = '',\n    appendTo\n  } = {}\n}: IInjectGoogleReCaptchaScriptParams) => {\n  const scriptId = id || 'google-recaptcha-v3';\n\n  // Script has already been injected, just call onLoad and does othing else\n  if (isScriptInjected(scriptId)) {\n    onLoad();\n\n    return;\n  }\n\n  /**\n   * Generate the js script\n   */\n  const googleRecaptchaSrc = generateGoogleRecaptchaSrc({\n    useEnterprise,\n    useRecaptchaNet\n  });\n  const js = document.createElement('script');\n  js.id = scriptId;\n  js.src = `${googleRecaptchaSrc}?render=${render}${\n    render === 'explicit' ? `&onload=${onLoadCallbackName}` : ''\n  }${\n    language ? `&hl=${language}` : ''\n  }`;\n\n  if (!!nonce) {\n    js.nonce = nonce;\n  }\n\n  js.defer = !!defer;\n  js.async = !!async;\n  js.onload = onLoad;\n\n  /**\n   * Append it to the body // head\n   */\n  const elementToInjectScript =\n    appendTo === 'body'\n      ? document.body\n      : document.getElementsByTagName('head')[0];\n\n  elementToInjectScript.appendChild(js);\n};\n\n/**\n * Function to log warning message if it's not in production mode\n *\n * @param message String\n * @returns\n */\nexport const logWarningMessage = (message: string) => {\n  const isDevelopmentMode =\n    typeof process !== 'undefined' && !!process.env && process.env.NODE_ENV !== 'production';\n\n  if (isDevelopmentMode) {\n    return;\n  }\n\n  console.warn(message);\n};\n","import React, { useEffect, useState } from 'react';\r\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core';\r\nimport Icon from '../icon';\r\nimport T from '../t';\r\nimport { cs, filterUndefined } from '../utils';\r\nimport { checkboxColors } from './consts';\r\nimport { useCheckboxGroupContext } from './context';\r\nconst CheckboxControl = styled.spanBox `\n  border-radius: none;\n  display: inline-flex;\n  flex-shrink: 0;\n  position: relative;\n  transition-duration: fast;\n`;\r\nconst CheckboxInput = styled.input `\n  cursor: inherit;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n`;\r\nexport const CheckboxBase = styled.labelBox `\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):hover .vui-checkboxControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  &[aria-disabled='true'] {\n    color: ${checkboxColors.disabled};\n    cursor: not-allowed;\n\n    .vui-checkboxControl {\n      color: ${checkboxColors.disabled};\n    }\n  }\n`;\r\n/**\r\n * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.\r\n * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.\r\n */\r\nexport const Checkbox = vui((props, ref) => {\r\n    const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {};\r\n    const mergedProps = { ...checkboxGroupProps, ...props };\r\n    const { checked, children, className, defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined, disabled, icon: iconProp = 'cuiCheckboxUnselected', iconChecked = 'cuiCheckboxSelected', iconIndeterminate = 'cuiCheckboxIndeterminate', id, inputProps, inputRef, isIndeterminate, label, name, onChange, required, value, ...rest } = omitThemingProps(mergedProps);\r\n    const [isChecked, setIsChecked] = useState(defaultChecked);\r\n    const styles = useStyleConfig('Checkbox', mergedProps);\r\n    const { color: controlColor, hoverColor, ...controlStyles } = styles.control;\r\n    const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;\r\n    const controlMr = children || label ? '12px' : 0;\r\n    const color = controlColor ? controlColor : checkboxColors.main;\r\n    const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover;\r\n    const isLongLabel = label && label?.length >= 60;\r\n    useEffect(() => {\r\n        checked !== undefined && setIsChecked(checked);\r\n    }, [checked]);\r\n    function handleOnChange(e) {\r\n        setIsChecked(e.target.checked);\r\n        onChange?.(e);\r\n    }\r\n    const aliasedProps = filterUndefined({\r\n        'aria-disabled': disabled\r\n    });\r\n    return (React.createElement(CheckboxBase, { alignItems: isLongLabel ? 'flex-start' : 'center', className: cs('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest },\r\n        React.createElement(CheckboxControl, { bg: \"white\", className: \"vui-checkboxControl\", color: color, focusWithinRing: 3, mr: controlMr, role: \"none\", ...controlStyles },\r\n            React.createElement(CheckboxInput, { \"aria-label\": label ? label : 'input-checkbox', className: \"vui-checkboxInput\", onChange: handleOnChange, ref: inputRef, type: \"checkbox\", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),\r\n            React.createElement(Icon, { className: \"vui-checkboxIcon\", h: \"100%\", name: icon, w: \"100%\" })),\r\n        children ??\r\n            (label && (React.createElement(T, { className: \"vui-checkboxLabel\", lineHeight: isLongLabel ? '26px' : 'normal', ...styles.label }, label)))));\r\n});\r\nexport default Checkbox;\r\n","import { cs, omitThemingProps, styled, SystemProps, ThemingProps, useStyleConfig, vui } from \"@veracity/vui\"\r\nimport React from \"react\"\r\nimport flagsUrl from \"./flags.png\"\r\n\r\nexport type FlagProps = SystemProps &\r\n\tThemingProps<\"Flag\"> & {\r\n\t\tcountryCode: keyof typeof BACKGROUND_POSITIONS\r\n\t}\r\n\r\nexport const Flag = vui<\"span\", FlagProps>((props, ref) => {\r\n\tlet { className, countryCode, ...rest } = omitThemingProps(props)\r\n\tlet styles = useStyleConfig(\"Flag\", props)\r\n\r\n\treturn Boolean(BACKGROUND_POSITIONS[countryCode.toUpperCase()]) ? (\r\n\t\t<FlagBase\r\n\t\t\tclassName={cs(\"vui-flag\", className)}\r\n\t\t\tstyle={{ backgroundPosition: BACKGROUND_POSITIONS[countryCode.toUpperCase()] }}\r\n\t\t\tref={ref}\r\n\t\t\t{...styles}\r\n\t\t\t{...rest}\r\n\t\t/>\r\n\t) : (\r\n\t\t<CountryCodeBase {...styles} {...rest}>\r\n\t\t\t({countryCode})\r\n\t\t</CountryCodeBase>\r\n\t)\r\n})\r\n\r\nexport const CountryCodeBase = styled.spanBox`\r\n\tdisplay: inline-block;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n`\r\n\r\nexport default Flag\r\n\r\nexport const FlagBase = styled.spanBox`\r\n\tbackground-image: url(${flagsUrl});\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-size: 100% 49494%;\r\n\tbox-sizing: content-box;\r\n\tdisplay: inline-block;\r\n\toverflow: hidden;\r\n\tposition: relative;\r\n\tvertical-align: top;\r\n`\r\n\r\n// https://www.freakflagsprite.com/ Taiwan is excluded: DZ,AO,BJ,BW,BF,BI,CM,CV,CF,TD,CD,DJ,EG,GQ,ER,ET,GA,GM,GH,GN,GW,CI,KE,LS,LR,LY,MG,MW,ML,MR,MU,YT,MA,MZ,NA,NE,NG,CG,RE,RW,SH,ST,SN,SC,SL,SO,ZA,SS,SD,SR,SZ,TG,TN,UG,TZ,EH,YE,ZM,ZW,AI,AG,AR,AW,BS,BB,BQ,BZ,BM,BO,VG,BR,CA,KY,CL,CO,KM,CR,CU,CW,DM,DO,EC,SV,FK,GF,GL,GD,GP,GT,GY,HT,HN,JM,MQ,MX,MS,NI,PA,PY,PE,PR,BL,KN,LC,PM,VC,SX,TT,TC,US,VI,UY,VE,AB,AF,AZ,BD,BT,BN,KH,CN,GE,HK,IN,ID,JP,KZ,LA,MO,MY,MV,MN,MM,NP,KP,MP,PW,PG,PH,SG,KR,LK,TJ,TH,TL,TM,VN,AL,AD,AM,AT,BY,BE,BA,BG,HR,CY,CZ,DK,EE,FO,FI,FR,DE,GI,GR,HU,IS,IE,IM,IT,JE,XK,LV,LI,LT,LU,MT,MD,MC,ME,NL,MK,NO,PL,PT,RO,RU,SM,RS,SK,SI,ES,SE,CH,TR,UA,GB,VA,BH,IR,IQ,IL,KW,JO,KG,LB,OM,PK,PS,QA,SA,SY,AE,UZ,AS,AU,CX,CC,CK,FJ,PF,GU,KI,MH,FM,NC,NZ,NR,NU,NF,WS,SB,TK,TO,TV,VU,WF\r\n\r\n// function generateBackgroundPositionsFromCss(str) {\r\n//     return str.split(\"\\n\")\r\n//         .map(l => {\r\n//             let i = (l = l.trim()).indexOf(\"background-position:\");\r\n//             return { l, i };\r\n//         }\r\n//         )\r\n//         .filter(l => l.i !== -1)\r\n//         .map(l => {\r\n//             let countryCode = l.l.substr(\".fflag-\".length, 2);\r\n//             let backgroundPosition = l.l.substring(l.i + \"background-position:\".length);\r\n//             backgroundPosition = backgroundPosition.substring(0, backgroundPosition.length - 1);\r\n//             return { countryCode, backgroundPosition };\r\n//         })\r\n//         .reduce((prev, curr, i) => { prev[curr.countryCode] = curr.backgroundPosition; return prev; }, {});\r\n// }\r\n\r\n//const BACKGROUND_POSITIONS = { \"DZ\": \"center 0.2287%\", \"AO\": \"center 0.4524%\", \"BJ\": \"center 0.6721%\", \"BW\": \"center 0.8958%\", \"BF\": \"center 1.1162%\", \"BI\": \"center 1.3379%\", \"CM\": \"center 1.5589%\", \"CV\": \"center 1.7805%\", \"CF\": \"center 2.0047%\", \"TD\": \"center 2.2247%\", \"CD\": \"left 2.4467%\", \"DJ\": \"left 2.6674%\", \"EG\": \"center 2.8931%\", \"GQ\": \"center 3.1125%\", \"ER\": \"left 3.3325%\", \"ET\": \"center 3.5542%\", \"GA\": \"center 3.7759%\", \"GM\": \"center 4.0015%\", \"GH\": \"center 4.2229%\", \"GN\": \"center 4.441%\", \"GW\": \"left 4.66663%\", \"CI\": \"center 4.8844%\", \"KE\": \"center 5.1061%\", \"LS\": \"center 5.3298%\", \"LR\": \"left 5.5495%\", \"LY\": \"center 5.7712%\", \"MG\": \"center 5.994%\", \"MW\": \"center 6.2156%\", \"ML\": \"center 6.4363%\", \"MR\": \"center 6.658%\", \"MU\": \"center 6.8805%\", \"YT\": \"center 7.1038%\", \"MA\": \"center 7.3231%\", \"MZ\": \"left 7.5448%\", \"NA\": \"left 7.7661%\", \"NE\": \"center 7.98937%\", \"NG\": \"center 8.2099%\", \"CG\": \"center 8.4316%\", \"RE\": \"center 8.6533%\", \"RW\": \"right 8.875%\", \"SH\": \"center 9.0967%\", \"ST\": \"center 9.32237%\", \"SN\": \"center 9.5426%\", \"SC\": \"left 9.7628%\", \"SL\": \"center 9.9845%\", \"SO\": \"center 10.2052%\", \"ZA\": \"left 10.4269%\", \"SS\": \"left 10.6486%\", \"SD\": \"center 10.8703%\", \"SR\": \"center 11.0945%\", \"SZ\": \"center 11.3135%\", \"TG\": \"left 11.5354%\", \"TN\": \"center 11.7593%\", \"UG\": \"center 11.9799%\", \"TZ\": \"center 12.2005%\", \"EH\": \"center 12.4222%\", \"YE\": \"center 12.644%\", \"ZM\": \"center 12.8664%\", \"ZW\": \"left 13.0873%\", \"AI\": \"center 13.309%\", \"AG\": \"center 13.5307%\", \"AR\": \"center 13.7524%\", \"AW\": \"left 13.9741%\", \"BS\": \"left 14.1958%\", \"BB\": \"center 14.4175%\", \"BQ\": \"center 14.6415%\", \"BZ\": \"center 14.8609%\", \"BM\": \"center 15.0826%\", \"BO\": \"center 15.306%\", \"VG\": \"center 15.528%\", \"BR\": \"center 15.7496%\", \"CA\": \"center 15.9694%\", \"KY\": \"center 16.1911%\", \"CL\": \"left 16.4128%\", \"CO\": \"left 16.6345%\", \"KM\": \"center 16.8562%\", \"CR\": \"center 17.0779%\", \"CU\": \"left 17.2996%\", \"CW\": \"center 17.5213%\", \"DM\": \"center 17.743%\", \"DO\": \"center 17.968%\", \"EC\": \"center 18.1864%\", \"SV\": \"center 18.4081%\", \"FK\": \"center 18.6298%\", \"GF\": \"center 18.8515%\", \"GL\": \"left 19.0732%\", \"GD\": \"center 19.2987%\", \"GP\": \"center 19.518%\", \"GT\": \"center 19.7383%\", \"GY\": \"center 19.96%\", \"HT\": \"center 20.1817%\", \"HN\": \"center 20.4034%\", \"JM\": \"center 20.6241%\", \"MQ\": \"center 20.8468%\", \"MX\": \"center 21.0685%\", \"MS\": \"center 21.2902%\", \"NI\": \"center 21.5119%\", \"PA\": \"center 21.7336%\", \"PY\": \"center 21.9553%\", \"PE\": \"center 22.177%\", \"PR\": \"left 22.4002%\", \"BL\": \"center 22.6204%\", \"KN\": \"center 22.8421%\", \"LC\": \"center 23.0638%\", \"PM\": \"center 23.2855%\", \"VC\": \"center 23.5072%\", \"SX\": \"left 23.732%\", \"TT\": \"center 23.9506%\", \"TC\": \"center 24.1723%\", \"US\": \"center 24.394%\", \"VI\": \"center 24.6157%\", \"UY\": \"left 24.8374%\", \"VE\": \"center 25.0591%\", \"AB\": \"center 25.279%\", \"AF\": \"center 25.5025%\", \"AZ\": \"center 25.7242%\", \"BD\": \"center 25.9459%\", \"BT\": \"center 26.1676%\", \"BN\": \"center 26.3885%\", \"KH\": \"center 26.611%\", \"CN\": \"left 26.8327%\", \"GE\": \"center 27.0544%\", \"HK\": \"center 27.2761%\", \"IN\": \"center 27.4978%\", \"ID\": \"center 27.7195%\", \"JP\": \"center 27.9412%\", \"KZ\": \"center 28.1615%\", \"LA\": \"center 28.3846%\", \"MO\": \"center 28.6063%\", \"MY\": \"center 28.829%\", \"MV\": \"center 29.0497%\", \"MN\": \"left 29.2714%\", \"MM\": \"center 29.4931%\", \"NP\": \"left 29.7148%\", \"KP\": \"left 29.9365%\", \"MP\": \"center 30.1582%\", \"PW\": \"center 30.3799%\", \"PG\": \"center 30.6016%\", \"PH\": \"left 30.8233%\", \"SG\": \"left 31.045%\", \"KR\": \"center 31.2667%\", \"LK\": \"right 31.4884%\", \"TJ\": \"center 31.7101%\", \"TH\": \"center 31.9318%\", \"TL\": \"left 32.1535%\", \"TM\": \"center 32.3752%\", \"VN\": \"center 32.5969%\", \"AL\": \"center 32.8186%\", \"AD\": \"center 33.0403%\", \"AM\": \"center 33.25975%\", \"AT\": \"center 33.4837%\", \"BY\": \"left 33.7054%\", \"BE\": \"center 33.9271%\", \"BA\": \"center 34.1488%\", \"BG\": \"center 34.3705%\", \"HR\": \"center 34.5922%\", \"CY\": \"center 34.8139%\", \"CZ\": \"left 35.0356%\", \"DK\": \"center 35.2555%\", \"EE\": \"center 35.479%\", \"FO\": \"center 35.7007%\", \"FI\": \"center 35.9224%\", \"FR\": \"center 36.1441%\", \"DE\": \"center 36.3658%\", \"GI\": \"center 36.5875%\", \"GR\": \"left 36.8092%\", \"HU\": \"center 37.0309%\", \"IS\": \"center 37.2526%\", \"IE\": \"center 37.4743%\", \"IM\": \"center 37.696%\", \"IT\": \"center 37.9177%\", \"JE\": \"center 38.1394%\", \"XK\": \"center 38.3611%\", \"LV\": \"center 38.5828%\", \"LI\": \"left 38.8045%\", \"LT\": \"center 39.0262%\", \"LU\": \"center 39.2479%\", \"MT\": \"left 39.4696%\", \"MD\": \"center 39.6913%\", \"MC\": \"center 39.913%\", \"ME\": \"center 40.1347%\", \"NL\": \"center 40.3564%\", \"MK\": \"center 40.5781%\", \"NO\": \"center 40.7998%\", \"PL\": \"center 41.0215%\", \"PT\": \"center 41.2432%\", \"RO\": \"center 41.4649%\", \"RU\": \"center 41.6866%\", \"SM\": \"center 41.9083%\", \"RS\": \"center 42.13%\", \"SK\": \"center 42.3517%\", \"SI\": \"center 42.5734%\", \"ES\": \"left 42.7951%\", \"SE\": \"center 43.0168%\", \"CH\": \"center 43.2385%\", \"TR\": \"center 43.4602%\", \"UA\": \"center 43.6819%\", \"GB\": \"center 43.9036%\", \"VA\": \"right 44.1253%\", \"BH\": \"center 44.347%\", \"IR\": \"center 44.5687%\", \"IQ\": \"center 44.7904%\", \"IL\": \"center 45.0121%\", \"KW\": \"left 45.2338%\", \"JO\": \"left 45.4555%\", \"KG\": \"center 45.6772%\", \"LB\": \"center 45.897%\", \"OM\": \"left 46.1206%\", \"PK\": \"center 46.3423%\", \"PS\": \"center 46.561%\", \"QA\": \"center 46.7857%\", \"SA\": \"center 47.0074%\", \"SY\": \"center 47.2291%\", \"AE\": \"center 47.4508%\", \"UZ\": \"left 47.6725%\", \"AS\": \"right 47.8942%\", \"AU\": \"center 48.1159%\", \"CX\": \"center 48.3376%\", \"CC\": \"center 48.5593%\", \"CK\": \"center 48.781%\", \"FJ\": \"center 49.002%\", \"PF\": \"center 49.2244%\", \"GU\": \"center 49.4445%\", \"KI\": \"center 49.6678%\", \"MH\": \"left 49.8895%\", \"FM\": \"center 50.1112%\", \"NC\": \"center 50.3329%\", \"NZ\": \"center 50.5546%\", \"NR\": \"left 50.7763%\", \"NU\": \"center 50.998%\", \"NF\": \"center 51.2197%\", \"WS\": \"left 51.4414%\", \"SB\": \"left 51.6631%\", \"TK\": \"center 51.8848%\", \"TO\": \"left 52.1065%\", \"TV\": \"center 52.3282%\", \"VU\": \"left 52.5499%\", \"WF\": \"center 52.7716%\" };\r\nconst BACKGROUND_POSITIONS = {\r\n\tDZ: \"center 0.2287%\",\r\n\tAO: \"center 0.4524%\",\r\n\tBJ: \"center 0.6721%\",\r\n\tBW: \"center 0.8958%\",\r\n\tBF: \"center 1.1162%\",\r\n\tBI: \"center 1.3379%\",\r\n\tCM: \"center 1.5589%\",\r\n\tCV: \"center 1.7805%\",\r\n\tCF: \"center 2.0047%\",\r\n\tTD: \"center 2.2247%\",\r\n\tCD: \"left 2.4467%\",\r\n\tDJ: \"left 2.6674%\",\r\n\tEG: \"center 2.8931%\",\r\n\tGQ: \"center 3.1125%\",\r\n\tER: \"left 3.3325%\",\r\n\tET: \"center 3.5542%\",\r\n\tGA: \"center 3.7759%\",\r\n\tGM: \"center 4.0015%\",\r\n\tGH: \"center 4.2229%\",\r\n\tGN: \"center 4.441%\",\r\n\tGW: \"left 4.66663%\",\r\n\tCI: \"center 4.8844%\",\r\n\tKE: \"center 5.1061%\",\r\n\tLS: \"center 5.3298%\",\r\n\tLR: \"left 5.5495%\",\r\n\tLY: \"center 5.7712%\",\r\n\tMG: \"center 5.994%\",\r\n\tMW: \"center 6.2156%\",\r\n\tML: \"center 6.4363%\",\r\n\tMR: \"center 6.658%\",\r\n\tMU: \"center 6.8805%\",\r\n\tYT: \"center 7.1038%\",\r\n\tMA: \"center 7.3231%\",\r\n\tMZ: \"left 7.5448%\",\r\n\tNA: \"left 7.7661%\",\r\n\tNE: \"center 7.98937%\",\r\n\tNG: \"center 8.2099%\",\r\n\tCG: \"center 8.4316%\",\r\n\tRE: \"center 8.6533%\",\r\n\tRW: \"right 8.875%\",\r\n\tSH: \"center 9.0967%\",\r\n\tST: \"center 9.32237%\",\r\n\tSN: \"center 9.5426%\",\r\n\tSC: \"left 9.7628%\",\r\n\tSL: \"center 9.9845%\",\r\n\tSO: \"center 10.2052%\",\r\n\tZA: \"left 10.4269%\",\r\n\tSS: \"left 10.6486%\",\r\n\tSD: \"center 10.8703%\",\r\n\tSR: \"center 11.0945%\",\r\n\tSZ: \"center 11.3135%\",\r\n\tTG: \"left 11.5354%\",\r\n\tTN: \"center 11.7593%\",\r\n\tUG: \"center 11.9799%\",\r\n\tTZ: \"center 12.2005%\",\r\n\tEH: \"center 12.4222%\",\r\n\tYE: \"center 12.644%\",\r\n\tZM: \"center 12.8664%\",\r\n\tZW: \"left 13.0873%\",\r\n\tAI: \"center 13.309%\",\r\n\tAG: \"center 13.5307%\",\r\n\tAR: \"center 13.7524%\",\r\n\tAW: \"left 13.9741%\",\r\n\tBS: \"left 14.1958%\",\r\n\tBB: \"center 14.4175%\",\r\n\tBQ: \"center 14.6415%\",\r\n\tBZ: \"center 14.8609%\",\r\n\tBM: \"center 15.0826%\",\r\n\tBO: \"center 15.306%\",\r\n\tVG: \"center 15.528%\",\r\n\tBR: \"center 15.7496%\",\r\n\tCA: \"center 15.9694%\",\r\n\tKY: \"center 16.1911%\",\r\n\tCL: \"left 16.4128%\",\r\n\tCO: \"left 16.6345%\",\r\n\tKM: \"center 16.8562%\",\r\n\tCR: \"center 17.0779%\",\r\n\tCU: \"left 17.2996%\",\r\n\tCW: \"center 17.5213%\",\r\n\tDM: \"center 17.743%\",\r\n\tDO: \"center 17.968%\",\r\n\tEC: \"center 18.1864%\",\r\n\tSV: \"center 18.4081%\",\r\n\tFK: \"center 18.6298%\",\r\n\tGF: \"center 18.8515%\",\r\n\tGL: \"left 19.0732%\",\r\n\tGD: \"center 19.2987%\",\r\n\tGP: \"center 19.518%\",\r\n\tGT: \"center 19.7383%\",\r\n\tGY: \"center 19.96%\",\r\n\tHT: \"center 20.1817%\",\r\n\tHN: \"center 20.4034%\",\r\n\tJM: \"center 20.6241%\",\r\n\tMQ: \"center 20.8468%\",\r\n\tMX: \"center 21.0685%\",\r\n\tMS: \"center 21.2902%\",\r\n\tNI: \"center 21.5119%\",\r\n\tPA: \"center 21.7336%\",\r\n\tPY: \"center 21.9553%\",\r\n\tPE: \"center 22.177%\",\r\n\tPR: \"left 22.4002%\",\r\n\tBL: \"center 22.6204%\",\r\n\tKN: \"center 22.8421%\",\r\n\tLC: \"center 23.0638%\",\r\n\tPM: \"center 23.2855%\",\r\n\tVC: \"center 23.5072%\",\r\n\tSX: \"left 23.732%\",\r\n\tTT: \"center 23.9506%\",\r\n\tTC: \"center 24.1723%\",\r\n\tUS: \"center 24.394%\",\r\n\tVI: \"center 24.6157%\",\r\n\tUY: \"left 24.8374%\",\r\n\tVE: \"center 25.0591%\",\r\n\tAB: \"center 25.279%\",\r\n\tAF: \"center 25.5025%\",\r\n\tAZ: \"center 25.7242%\",\r\n\tBD: \"center 25.9459%\",\r\n\tBT: \"center 26.1676%\",\r\n\tBN: \"center 26.3885%\",\r\n\tKH: \"center 26.611%\",\r\n\tCN: \"left 26.8327%\",\r\n\tGE: \"center 27.0544%\",\r\n\tHK: \"center 27.2761%\",\r\n\tIN: \"center 27.4978%\",\r\n\tID: \"center 27.7195%\",\r\n\tJP: \"center 27.9412%\",\r\n\tKZ: \"center 28.1615%\",\r\n\tLA: \"center 28.3846%\",\r\n\tMO: \"center 28.6063%\",\r\n\tMY: \"center 28.829%\",\r\n\tMV: \"center 29.0497%\",\r\n\tMN: \"left 29.2714%\",\r\n\tMM: \"center 29.4931%\",\r\n\tNP: \"left 29.7148%\",\r\n\tKP: \"left 29.9365%\",\r\n\tMP: \"center 30.1582%\",\r\n\tPW: \"center 30.3799%\",\r\n\tPG: \"center 30.6016%\",\r\n\tPH: \"left 30.8233%\",\r\n\tSG: \"left 31.045%\",\r\n\tKR: \"center 31.2667%\",\r\n\tLK: \"right 31.4884%\",\r\n\tTJ: \"center 31.9318%\",\r\n\tTH: \"center 32.1535%\",\r\n\tTL: \"left 32.3752%\",\r\n\tTM: \"center 32.5969%\",\r\n\tVN: \"center 32.8186%\",\r\n\tAL: \"center 33.0403%\",\r\n\tAD: \"center 33.25975%\",\r\n\tAM: \"center 33.4837%\",\r\n\tAT: \"center 33.7054%\",\r\n\tBY: \"left 33.9271%\",\r\n\tBE: \"center 34.1488%\",\r\n\tBA: \"center 34.3705%\",\r\n\tBG: \"center 34.5922%\",\r\n\tHR: \"center 34.8139%\",\r\n\tCY: \"center 35.0356%\",\r\n\tCZ: \"left 35.2555%\",\r\n\tDK: \"center 35.479%\",\r\n\tEE: \"center 35.7007%\",\r\n\tFO: \"center 35.9224%\",\r\n\tFI: \"center 36.1441%\",\r\n\tFR: \"center 36.3658%\",\r\n\tDE: \"center 36.5875%\",\r\n\tGI: \"center 36.8092%\",\r\n\tGR: \"left 37.0309%\",\r\n\tGG: \"center 37.2526%\",\r\n\tHU: \"center 37.4743%\",\r\n\tIS: \"center 37.696%\",\r\n\tIE: \"center 37.9177%\",\r\n\tIM: \"center 38.1394%\",\r\n\tIT: \"center 38.3611%\",\r\n\tJE: \"center 38.5828%\",\r\n\tXK: \"center 38.8045%\",\r\n\tLV: \"center 39.0262%\",\r\n\tLI: \"left 39.2479%\",\r\n\tLT: \"center 39.4696%\",\r\n\tLU: \"center 39.6913%\",\r\n\tMT: \"left 39.913%\",\r\n\tMD: \"center 40.1347%\",\r\n\tMC: \"center 40.3564%\",\r\n\tME: \"center 40.5781%\",\r\n\tNL: \"center 40.7998%\",\r\n\tMK: \"center 41.0215%\",\r\n\tNO: \"center 41.2432%\",\r\n\tPL: \"center 41.4649%\",\r\n\tPT: \"center 41.6866%\",\r\n\tRO: \"center 41.9083%\",\r\n\tRU: \"center 42.13%\",\r\n\tSM: \"center 42.3517%\",\r\n\tRS: \"center 42.5734%\",\r\n\tSK: \"center 42.7951%\",\r\n\tSI: \"center 43.0168%\",\r\n\tES: \"left 43.2385%\",\r\n\tSE: \"center 43.4602%\",\r\n\tCH: \"center 43.6819%\",\r\n\tTR: \"center 43.9036%\",\r\n\tUA: \"center 44.1253%\",\r\n\tGB: \"center 44.347%\",\r\n\tVA: \"right 44.5687%\",\r\n\tBH: \"center 44.7904%\",\r\n\tIR: \"center 45.0121%\",\r\n\tIQ: \"center 45.2338%\",\r\n\tIL: \"center 45.4555%\",\r\n\tKW: \"left 45.6772%\",\r\n\tJO: \"left 45.897%\",\r\n\tKG: \"center 46.1206%\",\r\n\tLB: \"center 46.3423%\",\r\n\tOM: \"left 46.561%\",\r\n\tPK: \"center 46.7857%\",\r\n\tPS: \"center 47.0074%\",\r\n\tQA: \"center 47.2291%\",\r\n\tSA: \"center 47.4508%\",\r\n\tSY: \"center 47.6725%\",\r\n\tAE: \"center 47.8942%\",\r\n\tUZ: \"left 48.1159%\",\r\n\tAS: \"right 48.3376%\",\r\n\tAU: \"center 48.5593%\",\r\n\tCX: \"center 48.781%\",\r\n\tCC: \"center 49.002%\",\r\n\tCK: \"center 49.2244%\",\r\n\tFJ: \"center 49.4445%\",\r\n\tPF: \"center 49.6678%\",\r\n\tGU: \"center 49.8895%\",\r\n\tKI: \"center 50.1112%\",\r\n\tMH: \"left 50.3329%\",\r\n\tFM: \"center 50.5546%\",\r\n\tNC: \"center 50.7763%\",\r\n\tNZ: \"center 50.998%\",\r\n\tNR: \"left 51.2197%\",\r\n\tNU: \"center 51.4414%\",\r\n\tNF: \"center 51.6631%\",\r\n\tWS: \"left 51.8848%\",\r\n\tSB: \"left 52.1065%\",\r\n\tTK: \"center 52.3282%\",\r\n\tTO: \"left 52.5499%\",\r\n\tTV: \"center 52.7716%\",\r\n\tVU: \"left 52.9933%\",\r\n\tWF: \"center 53.215%\",\r\n\tAQ: \"center 53.4385%\",\r\n\tEU: \"center 53.6584%\",\r\n\tJR: \"center 53.875%\",\r\n\tOL: \"center 54.099%\",\r\n\tUN: \"center 54.32%\"\r\n}\r\n","import { mediaUp, styled } from \"@veracity/vui\"\r\n\r\nexport const LeftContainer = styled.divBox`\r\n\r\n    margin-right: auto;\r\n\r\n\t${mediaUp(\"md\")} {\r\n\t\tmax-width: 720px;\r\n\t}\r\n\r\n    width: 100%;\r\n\r\n    > * {\r\n\t\t&:first-child {\r\n\t\t\tmargin-top: 0;\r\n\t\t}\r\n\t\t&:last-child {\r\n\t\t\tmargin-bottom: 0;\r\n\t\t}\r\n\t}\r\n`;","export function defaultGetInitials(name = '') {\r\n\tconst [first = '', last = ''] = name.split(' ')\r\n\r\n\treturn `${first.charAt(0)}${last.charAt(0)}`.toUpperCase()\r\n}\r\n","import {\r\n\tAvatar,\r\n\tCard,\r\n\tNotification,\r\n\tH2,\r\n\tH3,\r\n\tH4,\r\n\tIcon,\r\n\tT,\r\n\tv,\r\n\tImage,\r\n\tSpinner,\r\n\tSpinnerCircle,\r\n\tDivider,\r\n\tH5,\r\n\tButton,\r\n\tButtonIcon,\r\n\tstyled,\r\n\tH6,\r\n\tth,\r\n\tLink,\r\n\tInput,\r\n\tLineButton,\r\n\tBox,\r\n\tP,\r\n\tuseLinks,\r\n\tmediaUp,\r\n\tmediaDown,\r\n\tuseToast,\r\n} from \"@veracity/vui\";\r\nimport { Observer } from \"mobx-react-lite\";\r\nimport React, { useCallback, useEffect, useState } from \"react\";\r\nimport { NavLink, useNavigate } from \"react-router-dom\";\r\nimport { identityClient } from \"..\";\r\nimport { Label } from \"../components/Label\";\r\nimport { LeftContainer } from \"../components/LeftContainer\";\r\nimport { Page } from \"../components/Page\";\r\nimport { UserItemRefAvatar } from \"../components/UserItemRefAvatar\";\r\nimport { CompanyRefDto } from \"../models/auto-generated/CompanyRefDto\";\r\nimport { UserItemRef } from \"../models/UserItemRef\";\r\nimport { OVERVIEW_ROUTE, ROUTES } from \"../routes\";\r\nimport { CancellationToken } from \"../utils/CancellationToken\";\r\nimport { delayAsync } from \"../utils/delayAsync\";\r\nimport { Formik } from \"formik\";\r\nimport * as yup from \"yup\";\r\nimport * as libphonenumber from \"libphonenumber-js\";\r\nimport { stringIsEmpty } from \"../utils/stringIsEmpty\";\r\nimport { Ids } from \"../components/Ids\";\r\nimport { InputHelpText } from \"../components/InputHelpText\";\r\nimport { CountrySelector } from \"../components/CountrySelector\";\r\nimport { CountryDto } from \"../models/auto-generated/CountryDto\";\r\nimport { CountryCallingCodeSelector } from \"../components/CountryCallingCodeSelector\";\r\nimport { fetchVeracityVoid } from \"../services/fetchVeracity\";\r\nimport { UpdateUserWithMobileDto } from \"../models/auto-generated/UpdateUserWithMobileDto\";\r\nimport { showErrorDialogAsync } from \"../showErrorDialogAsync\";\r\nimport { computed } from \"mobx\";\r\nimport { ENFORCE_MFA_PATH } from \"../misc/auto-generated/constants\";\r\nimport { showPendingDialogAsync } from \"../showPendingDialogAsync\";\r\nimport { showChangePictureDialogAsync } from \"../showChangePictureDialogAsync\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport { UserProfile } from \"../models/UserProfile\";\r\nimport { UserOptInState } from \"../models/UserOptInState\";\r\nimport { profile } from \"console\";\r\nimport { showAskQuestionDialogAsync } from \"../showAskQuestionDialogAsync\";\r\nimport { OperationCancelledError } from \"../utils/OperationCancelledError\";\r\nimport { showOkCancelDialogAsync } from \"../showOkCancelDialogAsync\";\r\nimport { DirectoryUsers } from \"../services/DirectoryUsers\";\r\nimport { showVerifyPhoneNumberDialogAsync } from \"../showVerifyPhoneNumberDialogAsync\";\r\nimport { defaultGetInitials } from \"../utils/defaultGetInitials\";\r\n\r\n// https://www.figma.com/file/8LOpBedHx2JODBsttyzoKh/Profile---to-fix?node-id=4373%3A598\r\n// https://dnvgl-one.visualstudio.com/Veracity/_workitems/edit/333241\r\n\r\nexport function UserProfilePage() {\r\n\tlet [state, setState] = useState<{\r\n\t\tisLoading: boolean;\r\n\t\tthrew?: boolean;\r\n\t\terror?;\r\n\t}>({ isLoading: true });\r\n\r\n\tif (state.threw) throw state.error;\r\n\r\n\tuseEffect(() => {\r\n\t\tlet ct = new CancellationToken();\r\n\r\n    (async () => {\r\n      try {\r\n        await Promise.all([\r\n          identityClient.fetchIsLoggedInWithMfaAsync(),\r\n          identityClient.fetchSortedCountriesAsync(),\r\n          (async () => {\r\n            try {\r\n              await identityClient.clearLoggedInUserProfileApiCacheAsync();\r\n            } catch (e) {\r\n              console.error(e);\r\n            }\r\n            await identityClient.refreshLoggedInUserProfileAsync();\r\n            await identityClient.fetchAffiliatedCompaniesAsync();\r\n            await identityClient.fetchAvailableCompaniesAsync();\r\n          })(),\r\n        ]);\r\n\r\n        ct.throwIfCancellationRequested();\r\n\r\n\t\t\t\t// A small hack to ensure that the UserProfile.country property is able to initialize immediately before feeding it into Formik's initialValues\r\n\t\t\t\tidentityClient.lazyCountriesByCountryCode;\r\n\t\t\t\tawait new Promise<void>((r) => queueMicrotask(r));\r\n\t\t\t\tct.throwIfCancellationRequested();\r\n\t\t\t} catch (e) {\r\n\t\t\t\tif (ct.isCancellationRequested) return;\r\n\r\n\t\t\t\tif (IS_DEVELOPMENT) console.debug(e);\r\n\r\n\t\t\t\tsetState({\r\n\t\t\t\t\tisLoading: false,\r\n\t\t\t\t\tthrew: true,\r\n\t\t\t\t\terror: e,\r\n\t\t\t\t});\r\n\t\t\t}\r\n\r\n\t\t\tsetState({\r\n\t\t\t\tisLoading: false,\r\n\t\t\t});\r\n\t\t})();\r\n\r\n\t\treturn ct.cancel.bind(ct);\r\n\t}, []);\r\n\r\n\tif (state.isLoading)\r\n\t\treturn (\r\n\t\t\t<Page key=\"LOADING_USER_PROFILE\" center>\r\n\t\t\t\t<Spinner />\r\n\t\t\t</Page>\r\n\t\t);\r\n\r\n\treturn (\r\n\t\t<Page>\r\n\t\t\t<LeftContainer\r\n\t\t\t\tdisplay=\"flex\"\r\n\t\t\t\tflexDirection=\"column\"\r\n\t\t\t\talignItems=\"center\"\r\n\t\t\t>\r\n\t\t\t\t<Picture />\r\n\t\t\t\t<H3 mt={2} mb={{ xs: 30 / 8, md: 40 / 8 }}>\r\n\t\t\t\t\t<Observer>\r\n\t\t\t\t\t\t{() =>\r\n\t\t\t\t\t\t\tidentityClient.loggedInUserProfile?.dto\r\n\t\t\t\t\t\t\t\t.DisplayName || (null as any)\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</Observer>\r\n\t\t\t\t</H3>\r\n\t\t\t\t<Observer>\r\n\t\t\t\t\t{() => {\r\n\t\t\t\t\t\tlet loggedInUserProfile =\r\n\t\t\t\t\t\t\tidentityClient.loggedInUserProfile;\r\n\r\n\t\t\t\t\t\tif (!loggedInUserProfile) return null;\r\n\r\n\t\t\t\t\t\tlet dto = loggedInUserProfile.dto;\r\n\r\n\t\t\t\t\t\tif (loggedInUserProfile.canUpdateProfileInformation) {\r\n\t\t\t\t\t\t\tif (dto.VerifiedPhone)\r\n\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t<EditPersonalInformationCard\r\n\t\t\t\t\t\t\t\t\t\tcanEditMobile={false}\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t<EditPersonalInformationCard\r\n\t\t\t\t\t\t\t\t\tcanEditMobile={true}\r\n\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}\r\n\r\n\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t<Observer>\r\n\t\t\t\t\t\t\t\t\t{() => {\r\n\t\t\t\t\t\t\t\t\t\tif (\r\n\t\t\t\t\t\t\t\t\t\t\tstringIsEmpty(\r\n\t\t\t\t\t\t\t\t\t\t\t\tloggedInUserProfile.dto\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t.EditProfileUrl\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t\t\t\t<Notification\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"falInfoCircle\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttext=\"Please access your company webpage to edit your profile\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tw=\"100%\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tmb={20 / 8}\r\n\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);\r\n\t\t\t\t\t\t\t\t\t\treturn null;\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t</Observer>\r\n\t\t\t\t\t\t\t\t<NonEditablePersonalInformationCard />\r\n\t\t\t\t\t\t\t</>\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}}\r\n\t\t\t\t</Observer>\r\n\t\t\t\t<Observer>\r\n\t\t\t\t\t{() => {\r\n\t\t\t\t\t\tlet loggedInUserProfile =\r\n\t\t\t\t\t\t\tidentityClient.loggedInUserProfile;\r\n\r\n\t\t\t\t\t\tif (!loggedInUserProfile) return null;\r\n\r\n\t\t\t\t\t\treturn loggedInUserProfile.canChangeEmail ? (\r\n\t\t\t\t\t\t\t<EditEmailCard\r\n\t\t\t\t\t\t\t\tuserProfile={identityClient.loggedInUserProfile}\r\n\t\t\t\t\t\t\t\tshowTitle\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t<NonEditableEmailCard />\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}}\r\n\t\t\t\t</Observer>\r\n\t\t\t\t<AffiliatedCompaniesCard />\r\n\t\t\t</LeftContainer>\r\n\t\t</Page>\r\n\t);\r\n}\r\n\r\nfunction Picture() {\r\n\tlet onDrop = useCallback((acceptedFiles: File[]) => {\r\n\t\tif (acceptedFiles?.length)\r\n\t\t\tshowChangePictureDialogAsync(acceptedFiles[0]);\r\n\t}, []);\r\n\r\n\tlet { getRootProps, getInputProps } = useDropzone({\r\n\t\tonDrop,\r\n\t\taccept: { \"image/*\": [] },\r\n\t\tmultiple: false,\r\n\t});\r\n\r\n\treturn (\r\n\t\t<Avatar\r\n\t\t\tw=\"116px\"\r\n\t\t\th=\"116px\"\r\n\t\t\tfontSize=\"lg\"\r\n\t\t\t{...getRootProps()}\r\n\t\t\ttitle=\"Change picture\"\r\n\t\t>\r\n\t\t\t<input {...getInputProps()} />\r\n\t\t\t<PictureInnerDiv>\r\n\t\t\t\t<Observer>\r\n\t\t\t\t\t{() => {\r\n\t\t\t\t\t\tlet loggedInUserProfile =\r\n\t\t\t\t\t\t\tidentityClient.loggedInUserProfile;\r\n\t\t\t\t\t\tif (!loggedInUserProfile) return null;\r\n\t\t\t\t\t\tlet pictureUrlState = loggedInUserProfile.pictureUrl;\r\n\t\t\t\t\t\tif (pictureUrlState.isExecuting)\r\n\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t<SpinnerCircle\r\n\t\t\t\t\t\t\t\t\tanimation={`vui-spin .9s linear infinite`}\r\n\t\t\t\t\t\t\t\t\tclassName=\"vui-spinnerCircle\"\r\n\t\t\t\t\t\t\t\t\tw=\"96px\"\r\n\t\t\t\t\t\t\t\t\th=\"96px\"\r\n\t\t\t\t\t\t\t\t\tborderWidth={5}\r\n\t\t\t\t\t\t\t\t\tborderColor=\"blue.20\"\r\n\t\t\t\t\t\t\t\t\tborderTopColor=\"blue.50\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\tif (pictureUrlState.result)\r\n\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t<Image\r\n\t\t\t\t\t\t\t\t\tsrc={pictureUrlState.result}\r\n\t\t\t\t\t\t\t\t\tw=\"96px\"\r\n\t\t\t\t\t\t\t\t\th=\"96px\"\r\n\t\t\t\t\t\t\t\t\tanimation=\"fadeIn\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\treturn defaultGetInitials(\r\n\t\t\t\t\t\t\tloggedInUserProfile.dto.DisplayName\r\n\t\t\t\t\t\t) as any;\r\n\t\t\t\t\t}}\r\n\t\t\t\t</Observer>\r\n\t\t\t</PictureInnerDiv>\r\n\t\t</Avatar>\r\n\t);\r\n}\r\n\r\nconst PictureInnerDiv = styled.divBox`\r\n\tborder-radius: 50%;\r\n\toverflow: hidden;\r\n\tposition: relative;\r\n\tuser-select: none;\r\n`;\r\n\r\n// https://www.figma.com/file/8LOpBedHx2JODBsttyzoKh/Profile---to-fix?node-id=4373%3A598\r\nfunction NonEditablePersonalInformationCard() {\r\n\treturn (\r\n\t\t<Card\r\n\t\t\tw=\"100%\"\r\n\t\t\tpx={{ xs: 2, md: 4 }}\r\n\t\t\tpy={{ xs: 2.5, md: 28 / 8 }}\r\n\t\t\tcolumn\r\n\t\t\tshadow={0}\r\n\t\t\tborder=\"1px solid grey.30\"\r\n\t\t>\r\n\t\t\t<v.div display=\"flex\" alignItems=\"center\">\r\n\t\t\t\t<H5 mr={1}>Personal information</H5>\r\n\t\t\t\t<Observer>\r\n\t\t\t\t\t{() => {\r\n\t\t\t\t\t\tlet editProfileUrl =\r\n\t\t\t\t\t\t\tidentityClient.loggedInUserProfile?.dto\r\n\t\t\t\t\t\t\t\t.EditProfileUrl;\r\n\r\n\t\t\t\t\t\tif (stringIsEmpty(editProfileUrl)) return null;\r\n\r\n\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\tas=\"a\"\r\n\t\t\t\t\t\t\t\thref={editProfileUrl}\r\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\t\tml=\"auto\"\r\n\t\t\t\t\t\t\t\tvariant=\"secondaryDark\"\r\n\t\t\t\t\t\t\t\tcolorScheme=\"blue\"\r\n\t\t\t\t\t\t\t\ticonRight={\r\n\t\t\t\t\t\t\t\t\t<ButtonIcon\r\n\t\t\t\t\t\t\t\t\t\tml={1}\r\n\t\t\t\t\t\t\t\t\t\tname=\"falExternalLink\"\r\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\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>\r\n\t\t\t\t\t\t\t\tEdit\r\n\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}}\r\n\t\t\t\t</Observer>\r\n\t\t\t</v.div>\r\n\t\t\t<Divider mt={11 / 8} />\r\n\t\t\t<Label mt={3}>Name</Label>\r\n\t\t\t<T mt={1}>\r\n\t\t\t\t<Observer>\r\n\t\t\t\t\t{() => {\r\n\t\t\t\t\t\tlet dto = identityClient.loggedInUserProfile.dto;\r\n\t\t\t\t\t\treturn [dto.FirstName || \"\", dto.LastName || \"\"]\r\n\t\t\t\t\t\t\t.map((p) => p.trim())\r\n\t\t\t\t\t\t\t.join(\" \") as any;\r\n\t\t\t\t\t}}\r\n\t\t\t\t</Observer>\r\n\t\t\t</T>\r\n\t\t\t<Label mt={3}>Country</Label>\r\n\t\t\t<T mt={1}>\r\n\t\t\t\t<Observer>\r\n\t\t\t\t\t{() => {\r\n\t\t\t\t\t\tlet loggedInUserProfile =\r\n\t\t\t\t\t\t\tidentityClient.loggedInUserProfile;\r\n\t\t\t\t\t\tif (!loggedInUserProfile) return null;\r\n\t\t\t\t\t\tlet country = loggedInUserProfile.country;\r\n\t\t\t\t\t\tif (country) return country.Name || (null as any);\r\n\t\t\t\t\t\tlet dto = loggedInUserProfile.dto;\r\n\t\t\t\t\t\tif (dto.Country) {\r\n\t\t\t\t\t\t\tlet countriesByCountryCode =\r\n\t\t\t\t\t\t\t\tidentityClient.lazyCountriesByCountryCode.state;\r\n\t\t\t\t\t\t\tif (countriesByCountryCode.isExecuting)\r\n\t\t\t\t\t\t\t\treturn \"\\u00A0\";\r\n\t\t\t\t\t\t\treturn dto.Country;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\treturn \"N/A\" as any;\r\n\t\t\t\t\t}}\r\n\t\t\t\t</Observer>\r\n\t\t\t</T>\r\n\t\t\t<Label mt={3}>Phone number</Label>\r\n\t\t\t<T mt={1}>\r\n\t\t\t\t<Observer>\r\n\t\t\t\t\t{() =>\r\n\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\tidentityClient.loggedInUserProfile?.dto.Mobile || \"\"\r\n\t\t\t\t\t\t).trim() || (\"N/A\" as any)\r\n\t\t\t\t\t}\r\n\t\t\t\t</Observer>\r\n\t\t\t</T>\r\n\t\t</Card>\r\n\t);\r\n}\r\n\r\nfunction EditPersonalInformationCard(props: { canEditMobile: boolean }) {\r\n\tlet { showSuccess } = useToast();\r\n\r\n\treturn (\r\n\t\t<Card\r\n\t\t\tw=\"100%\"\r\n\t\t\tpx={{ xs: 2, md: 4 }}\r\n\t\t\tpy={{ xs: 2.5, md: 28 / 8 }}\r\n\t\t\tcolumn\r\n\t\t\tshadow={0}\r\n\t\t\tborder=\"1px solid grey.30\"\r\n\t\t>\r\n\t\t\t<H5>Personal information</H5>\r\n\t\t\t<Divider mt={11 / 8} />\r\n\t\t\t<Formik\r\n\t\t\t\tinitialValues={generateInitialValuesForPersonalInformationSchema()}\r\n\t\t\t\tvalidationSchema={personalInformationSchema}\r\n\t\t\t\tonSubmit={async (values, { setFieldError, resetForm }) => {\r\n\t\t\t\t\ttry {\r\n\t\t\t\t\t\tlet loggedInUserProfile =\r\n\t\t\t\t\t\t\tidentityClient.loggedInUserProfile;\r\n\r\n\t\t\t\t\t\tif (props.canEditMobile) {\r\n\t\t\t\t\t\t\tlet mobile = values.nationalPhoneNumber?.trim();\r\n\r\n\t\t\t\t\t\t\tif (mobile)\r\n\t\t\t\t\t\t\t\tmobile =\r\n\t\t\t\t\t\t\t\t\t\"+\" +\r\n\t\t\t\t\t\t\t\t\tvalues.phoneNumberCountry.CallingCode +\r\n\t\t\t\t\t\t\t\t\tmobile;\r\n\r\n\t\t\t\t\t\t\tif (stringIsEmpty(mobile)) {\r\n\t\t\t\t\t\t\t\tlet allAvailableOptIns =\r\n\t\t\t\t\t\t\t\t\tawait identityClient.getAllAvailableOptInsAsync(\r\n\t\t\t\t\t\t\t\t\t\t\"security\"\r\n\t\t\t\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\t\t\t\tif (allAvailableOptIns) {\r\n\t\t\t\t\t\t\t\t\tfor (let o of allAvailableOptIns) {\r\n\t\t\t\t\t\t\t\t\t\tif (\r\n\t\t\t\t\t\t\t\t\t\t\to.id === \"security.mfa\" &&\r\n\t\t\t\t\t\t\t\t\t\t\to.displayEnabledWithPendingTakenIntoAccount\r\n\t\t\t\t\t\t\t\t\t\t) {\r\n\t\t\t\t\t\t\t\t\t\t\ttry {\r\n\t\t\t\t\t\t\t\t\t\t\t\tawait showOkCancelDialogAsync(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"Confirm changes\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"Because you have previously enabled two-factor authentication and because the phone number is about to be removed, two-factor authentication will become disabled.\"\r\n\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} catch (e) {\r\n\t\t\t\t\t\t\t\t\t\t\t\tif (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\te instanceof\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tOperationCancelledError\r\n\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\treturn;\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\tthrow e;\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t\t\ttry {\r\n\t\t\t\t\t\t\t\t\t\t\t\tawait o.displayEnableDisableAsync(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfalse\r\n\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} catch (e) {\r\n\t\t\t\t\t\t\t\t\t\t\t\tshowErrorDialogAsync(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"Error when disabling two-factor authentication\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\te\r\n\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\treturn;\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t\t\tbreak;\r\n\t\t\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} else if (\r\n\t\t\t\t\t\t\t\tmobile !==\r\n\t\t\t\t\t\t\t\t\tloggedInUserProfile.dto.Mobile?.trim() &&\r\n\t\t\t\t\t\t\t\tloggedInUserProfile.dto.VerifiedPhone\r\n\t\t\t\t\t\t\t) {\r\n\t\t\t\t\t\t\t\ttry {\r\n\t\t\t\t\t\t\t\t\tawait showOkCancelDialogAsync(\r\n\t\t\t\t\t\t\t\t\t\t\"Confirm changes\",\r\n\t\t\t\t\t\t\t\t\t\t\"Because you have previously verified your phone number, you will need to confirm the new phone number.\"\r\n\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\t\t\t\tif (e instanceof OperationCancelledError)\r\n\t\t\t\t\t\t\t\t\t\treturn;\r\n\r\n\t\t\t\t\t\t\t\t\tthrow e;\r\n\t\t\t\t\t\t\t\t}\r\n\r\n                // try {\r\n                // \tawait showPendingDialogAsync(DirectoryUsers.updateCurrentUsersPhone({ OldAddress: loggedInUserProfile.dto.Mobile, NewAddress: mobile }), \"Please wait...\");\r\n                // }\r\n\r\n                // catch (e) {\r\n                // \tshowErrorDialogAsync(\"Error when requesting SMS verification code\", e);\r\n                // \treturn;\r\n                // }\r\n\r\n\t\t\t\t\t\t\t\ttry {\r\n\t\t\t\t\t\t\t\t\tawait showVerifyPhoneNumberDialogAsync(\r\n\t\t\t\t\t\t\t\t\t\tmobile\r\n\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\t\t\t\tif (e instanceof OperationCancelledError)\r\n\t\t\t\t\t\t\t\t\t\treturn;\r\n\r\n\t\t\t\t\t\t\t\t\tthrow e;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\tawait loggedInUserProfile.updateProfileInformationWithMobile(\r\n\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\tFirstName: values.firstName,\r\n\t\t\t\t\t\t\t\t\tLastName: values.lastName,\r\n\t\t\t\t\t\t\t\t\tDisplayName: values.displayName,\r\n\t\t\t\t\t\t\t\t\tMobile: mobile,\r\n\t\t\t\t\t\t\t\t\tCountry: values.country.Code,\r\n\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} else\r\n\t\t\t\t\t\t\tawait loggedInUserProfile.updateProfileInformationWithoutMobile(\r\n\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\tFirstName: values.firstName,\r\n\t\t\t\t\t\t\t\t\tLastName: values.lastName,\r\n\t\t\t\t\t\t\t\t\tDisplayName: values.displayName,\r\n\t\t\t\t\t\t\t\t\tCountry: values.country.Code,\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\tshowErrorDialogAsync(\"Error when saving profile\", e);\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tshowSuccess(\"Successfully saved the personal information\");\r\n\t\t\t\t\tresetForm({\r\n\t\t\t\t\t\tvalues: generateInitialValuesForPersonalInformationSchema(),\r\n\t\t\t\t\t});\r\n\t\t\t\t}}\r\n\t\t\t>\r\n\t\t\t\t{({\r\n\t\t\t\t\tvalues,\r\n\t\t\t\t\terrors,\r\n\t\t\t\t\ttouched,\r\n\t\t\t\t\tisSubmitting,\r\n\t\t\t\t\thandleSubmit,\r\n\t\t\t\t\tgetFieldProps,\r\n\t\t\t\t\tsetFieldValue,\r\n\t\t\t\t\tresetForm,\r\n\t\t\t\t}) => {\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<form noValidate onSubmit={handleSubmit}>\r\n\t\t\t\t\t\t\t<v.fieldset disabled={isSubmitting} p={0}>\r\n\t\t\t\t\t\t\t\t<Ids\r\n\t\t\t\t\t\t\t\t\tlength={2}\r\n\t\t\t\t\t\t\t\t\tfn={(ids) => (\r\n\t\t\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t\t\t<Label mt={24} htmlFor={ids[0]}>\r\n\t\t\t\t\t\t\t\t\t\t\t\tFirst name\r\n\t\t\t\t\t\t\t\t\t\t\t</Label>\r\n\t\t\t\t\t\t\t\t\t\t\t<Input\r\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"email\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tmt={2}\r\n\t\t\t\t\t\t\t\t\t\t\t\tmaxW={{ md: \"320px\" }}\r\n\t\t\t\t\t\t\t\t\t\t\t\tid={ids[0]}\r\n\t\t\t\t\t\t\t\t\t\t\t\tstate={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.firstName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.firstName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"error\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"success\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\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\tvariant={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.firstName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.firstName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"red\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"green\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\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\tinputProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tautoComplete: \"given-name\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"aria-invalid\": !!(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.firstName &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.firstName\r\n\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\"aria-errormessage\":\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.firstName &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.firstName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? ids[1]\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}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t{...getFieldProps(\"firstName\")}\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t{touched.firstName &&\r\n\t\t\t\t\t\t\t\t\t\t\t\terrors.firstName && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<InputHelpText\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[1]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor=\"red.80\"\r\n\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{errors.firstName}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</InputHelpText>\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\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<Ids\r\n\t\t\t\t\t\t\t\t\tlength={2}\r\n\t\t\t\t\t\t\t\t\tfn={(ids) => (\r\n\t\t\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t\t\t<Label mt={24} htmlFor={ids[0]}>\r\n\t\t\t\t\t\t\t\t\t\t\t\tLast name\r\n\t\t\t\t\t\t\t\t\t\t\t</Label>\r\n\t\t\t\t\t\t\t\t\t\t\t<Input\r\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"email\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tmt={2}\r\n\t\t\t\t\t\t\t\t\t\t\t\tmaxW={{ md: \"320px\" }}\r\n\t\t\t\t\t\t\t\t\t\t\t\tid={ids[0]}\r\n\t\t\t\t\t\t\t\t\t\t\t\tstate={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.lastName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.lastName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"error\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"success\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\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\tvariant={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.lastName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.lastName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"red\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"green\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\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\tinputProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tautoComplete: \"family-name\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"aria-invalid\": !!(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.lastName &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.lastName\r\n\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\"aria-errormessage\":\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.lastName &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.lastName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? ids[1]\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}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t{...getFieldProps(\"lastName\")}\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t{touched.lastName &&\r\n\t\t\t\t\t\t\t\t\t\t\t\terrors.lastName && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<InputHelpText\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[1]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor=\"red.80\"\r\n\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{errors.lastName}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</InputHelpText>\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\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<Ids\r\n\t\t\t\t\t\t\t\t\tlength={2}\r\n\t\t\t\t\t\t\t\t\tfn={(ids) => (\r\n\t\t\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t\t\t<Label mt={24} htmlFor={ids[0]}>\r\n\t\t\t\t\t\t\t\t\t\t\t\tDisplay name\r\n\t\t\t\t\t\t\t\t\t\t\t</Label>\r\n\t\t\t\t\t\t\t\t\t\t\t<Input\r\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"email\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tmt={2}\r\n\t\t\t\t\t\t\t\t\t\t\t\tmaxW={{ md: \"320px\" }}\r\n\t\t\t\t\t\t\t\t\t\t\t\tid={ids[0]}\r\n\t\t\t\t\t\t\t\t\t\t\t\tstate={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.displayName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.displayName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"error\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"success\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\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\tvariant={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.displayName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.displayName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"red\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"green\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\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\tinputProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"aria-invalid\": !!(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.displayName &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.displayName\r\n\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\"aria-errormessage\":\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.displayName &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.displayName\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? ids[1]\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}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t{...getFieldProps(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"displayName\"\r\n\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/>\r\n\t\t\t\t\t\t\t\t\t\t\t{touched.displayName &&\r\n\t\t\t\t\t\t\t\t\t\t\t\terrors.displayName && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<InputHelpText\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[1]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor=\"red.80\"\r\n\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{errors.displayName}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</InputHelpText>\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\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<Ids\r\n\t\t\t\t\t\t\t\t\tlength={2}\r\n\t\t\t\t\t\t\t\t\tfn={(ids) => (\r\n\t\t\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t\t\t<Label mt={24} htmlFor={ids[0]}>\r\n\t\t\t\t\t\t\t\t\t\t\t\tCountry / region\r\n\t\t\t\t\t\t\t\t\t\t\t</Label>\r\n\t\t\t\t\t\t\t\t\t\t\t<CountrySelector\r\n\t\t\t\t\t\t\t\t\t\t\t\trequired\r\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tid: ids[1],\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tmt: 2,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tmaxW: { md: \"320px\" },\r\n\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\tvalue={values.country}\r\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(c) => {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetFieldValue(\"country\", c);\r\n\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/>\r\n\t\t\t\t\t\t\t\t\t\t\t{touched.country &&\r\n\t\t\t\t\t\t\t\t\t\t\t\terrors.country && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<InputHelpText\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[1]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor=\"red.80\"\r\n\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{errors.country}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</InputHelpText>\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\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<Ids\r\n\t\t\t\t\t\t\t\t\tlength={2}\r\n\t\t\t\t\t\t\t\t\tfn={(ids) => (\r\n\t\t\t\t\t\t\t\t\t\t<v.div mb={3}>\r\n\t\t\t\t\t\t\t\t\t\t\t<Label mt={24} htmlFor={ids[0]}>\r\n\t\t\t\t\t\t\t\t\t\t\t\tPhone number{\" \"}\r\n\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\tcolor=\"grey.80\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontWeight=\"regular\"\r\n\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(optional)\r\n\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</Label>\r\n\t\t\t\t\t\t\t\t\t\t\t<v.div\r\n\t\t\t\t\t\t\t\t\t\t\t\tmt={2}\r\n\t\t\t\t\t\t\t\t\t\t\t\tmaxW={{ md: \"320px\" }}\r\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay=\"flex\"\r\n\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<CountryCallingCodeSelector\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tbuttonProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!props.canEditMobile,\r\n\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\tvalue={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalues.phoneNumberCountry\r\n\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\tonChange={(c) => {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetFieldValue(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"phoneNumberCountry\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tc\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}}\r\n\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<Input\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t!props.canEditMobile\r\n\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\ttype=\"tel\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tml={1}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tflex=\"1\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[0]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstate={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.nationalPhoneNumber\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.nationalPhoneNumber\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"error\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: values.nationalPhoneNumber\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"success\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\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\tvariant={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.nationalPhoneNumber\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.nationalPhoneNumber\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"red\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: values.nationalPhoneNumber\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"green\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\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\tinputProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tautoComplete:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"tel-national\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"aria-invalid\": !!(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.nationalPhoneNumber &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.nationalPhoneNumber\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\"aria-errormessage\":\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.nationalPhoneNumber &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.nationalPhoneNumber\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? ids[1]\r\n\t\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}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{...getFieldProps(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"nationalPhoneNumber\"\r\n\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/>\r\n\t\t\t\t\t\t\t\t\t\t\t</v.div>\r\n\t\t\t\t\t\t\t\t\t\t\t{props.canEditMobile &&\r\n\t\t\t\t\t\t\t\t\t\t\t\ttouched.nationalPhoneNumber &&\r\n\t\t\t\t\t\t\t\t\t\t\t\terrors.nationalPhoneNumber && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<InputHelpText\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[1]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor=\"red.80\"\r\n\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\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.nationalPhoneNumber\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</InputHelpText>\r\n\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{!props.canEditMobile && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t<InputHelpText\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[1]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize=\"sm\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisplay=\"flex\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tmt={8}\r\n\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<Icon\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tname=\"falInfoCircle\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tmr={1}\r\n\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{/* <div>\r\n\t\t\t\t\t\t\t\t\t\t\t\tIf you wish to update your phone number, you must be logged in using two-factor authentication. Please <Link href={ENFORCE_MFA_PATH}>click here</Link> to sign in using two-factor authentication.\r\n\t\t\t\t\t\t\t\t\t\t\t</div> */}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tIf you wish to update\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tyour phone number,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplease contact support.\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</InputHelpText>\r\n\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t</v.div>\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<v.div display=\"flex\" mt={24}>\r\n\t\t\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\r\n\t\t\t\t\t\t\t\t\t\tisLoading={isSubmitting}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\tSave\r\n\t\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t\t\t<LineButton\r\n\t\t\t\t\t\t\t\t\t\tml={1}\r\n\t\t\t\t\t\t\t\t\t\tonClick={() =>\r\n\t\t\t\t\t\t\t\t\t\t\tresetForm({\r\n\t\t\t\t\t\t\t\t\t\t\t\tvalues: generateInitialValuesForPersonalInformationSchema(),\r\n\t\t\t\t\t\t\t\t\t\t\t})\r\n\t\t\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\t\tReset\r\n\t\t\t\t\t\t\t\t\t</LineButton>\r\n\t\t\t\t\t\t\t\t</v.div>\r\n\t\t\t\t\t\t\t</v.fieldset>\r\n\t\t\t\t\t\t</form>\r\n\t\t\t\t\t);\r\n\t\t\t\t}}\r\n\t\t\t</Formik>\r\n\t\t</Card>\r\n\t);\r\n}\r\n\r\nexport const personalInformationSchema = yup.object().shape({\r\n\tfirstName: yup.string().required(\"Please enter your first name\"),\r\n\tlastName: yup.string().required(\"Please enter your last name\"),\r\n\tdisplayName: yup.string().required(\"Please enter a display name\"),\r\n\tcountry: yup.object().nullable().required(\"Please select your country\"),\r\n\tphoneNumberCountry: yup.object().nullable(),\r\n\tnationalPhoneNumber: yup\r\n\t\t.string()\r\n\t\t.optional()\r\n\t\t.test(\r\n\t\t\t\"national-phone-number\",\r\n\t\t\t\"Please enter a valid phone number\",\r\n\t\t\t(value, context) => {\r\n\t\t\t\tif (!value?.trim()) return true;\r\n\t\t\t\ttry {\r\n\t\t\t\t\treturn libphonenumber\r\n\t\t\t\t\t\t.parsePhoneNumber(\r\n\t\t\t\t\t\t\tvalue,\r\n\t\t\t\t\t\t\tcontext.parent.phoneNumberCountry?.Code\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t\t.isValid();\r\n\t\t\t\t} catch {\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t),\r\n});\r\n\r\nexport function generateInitialValuesForPersonalInformationSchema() {\r\n\tlet loggedInUserProfile = identityClient.loggedInUserProfile;\r\n\r\n\tif (!loggedInUserProfile) return {};\r\n\r\n  let dto = loggedInUserProfile.dto;\r\n\r\n\ttry {\r\n\t\tvar parsedPhoneNumber = libphonenumber.parsePhoneNumber(dto.Mobile);\r\n\r\n\t\tif (parsedPhoneNumber.country) {\r\n\t\t\tlet countriesByCountryCode =\r\n\t\t\t\tidentityClient.lazyCountriesByCountryCode.state;\r\n\t\t\tif (countriesByCountryCode.result)\r\n\t\t\t\tvar phoneNumberCountry =\r\n\t\t\t\t\tcountriesByCountryCode.result[\r\n\t\t\t\t\t\tparsedPhoneNumber.country.toUpperCase()\r\n\t\t\t\t\t];\r\n\t\t}\r\n\t} catch {}\r\n\r\n\treturn {\r\n\t\tfirstName: dto.FirstName,\r\n\t\tlastName: dto.LastName,\r\n\t\tdisplayName: dto.DisplayName,\r\n\t\tcountry: loggedInUserProfile.country,\r\n\t\tphoneNumberCountry,\r\n\t\tnationalPhoneNumber: parsedPhoneNumber?.nationalNumber,\r\n\t};\r\n}\r\n\r\n// https://www.figma.com/file/8LOpBedHx2JODBsttyzoKh/Profile---to-fix?node-id=4373%3A598\r\nfunction NonEditableEmailCard() {\r\n\treturn (\r\n\t\t<Card\r\n\t\t\tw=\"100%\"\r\n\t\t\tpx={{ xs: 2, md: 4 }}\r\n\t\t\tpy={{ xs: 2.5, md: 28 / 8 }}\r\n\t\t\tmt={3}\r\n\t\t\tcolumn\r\n\t\t\tshadow={0}\r\n\t\t\tborder=\"1px solid grey.30\"\r\n\t\t>\r\n\t\t\t<H5 mr={1}>E-mail address</H5>\r\n\t\t\t<Divider mt={11 / 8} />\r\n\t\t\t<T mt={3}>\r\n\t\t\t\t<Observer>\r\n\t\t\t\t\t{() =>\r\n\t\t\t\t\t\tidentityClient.loggedInUserProfile?.dto.Email ||\r\n\t\t\t\t\t\t(null as any)\r\n\t\t\t\t\t}\r\n\t\t\t\t</Observer>\r\n\t\t\t</T>\r\n\t\t</Card>\r\n\t);\r\n}\r\n\r\nexport function EditEmailCard(props: {\r\n\tshowTitle: boolean;\r\n\tuserProfile: UserProfile;\r\n}) {\r\n\tlet { showInfo } = useToast();\r\n\tconst navigate = useNavigate();\r\n\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\tprops.userProfile?.dto.MfaMethod &&\r\n\t\t\tprops.userProfile?.dto.VerifiedPhone == false\r\n\t\t) {\r\n\t\t\tnavigate(\"/profile_refresh\", { replace: true });\r\n\t\t\tnavigate(0);\r\n\t\t}\r\n\t}, [])\r\n\r\n\treturn (\r\n\t\t<Card\r\n\t\t\tw=\"100%\"\r\n\t\t\tpx={{ xs: 2, md: 4 }}\r\n\t\t\tpy={{ xs: 2.5, md: 28 / 8 }}\r\n\t\t\tcolumn\r\n\t\t\tshadow={0}\r\n\t\t\tborder=\"1px solid grey.30\"\r\n\t\t\tmt={3}\r\n\t\t>\r\n\t\t\t{props.showTitle && (\r\n\t\t\t\t<>\r\n\t\t\t\t\t<H5>E-mail address</H5>\r\n\t\t\t\t\t<Divider mt={11 / 8} mb={3} />\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t\t<Formik\r\n\t\t\t\tinitialValues={{ newEmailAddress: \"\" }}\r\n\t\t\t\tvalidationSchema={emailSchema}\r\n\t\t\t\tonSubmit={async (values, { setFieldError, resetForm }) => {\r\n\t\t\t\t\ttry {\r\n\t\t\t\t\t\tawait props.userProfile.changeEmailAsync(\r\n\t\t\t\t\t\t\tvalues.newEmailAddress\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\tshowErrorDialogAsync(\r\n\t\t\t\t\t\t\t\"Error when saving e-mail address\",\r\n\t\t\t\t\t\t\te\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tlet dto = props.userProfile?.dto;\r\n\r\n\t\t\t\t\tshowInfo(\r\n\t\t\t\t\t\t\"An e-mail containing a verification link has been sent to \" +\r\n\t\t\t\t\t\t\t(props.userProfile.isLimited\r\n\t\t\t\t\t\t\t\t? dto.AlternateEmail\r\n\t\t\t\t\t\t\t\t: dto.PendingEmail)\r\n\t\t\t\t\t);\r\n\t\t\t\t\tresetForm({ values: { newEmailAddress: \"\" } });\r\n\t\t\t\t}}\r\n\t\t\t>\r\n\t\t\t\t{({\r\n\t\t\t\t\tvalues,\r\n\t\t\t\t\terrors,\r\n\t\t\t\t\ttouched,\r\n\t\t\t\t\tisSubmitting,\r\n\t\t\t\t\thandleSubmit,\r\n\t\t\t\t\tgetFieldProps,\r\n\t\t\t\t\tsetFieldValue,\r\n\t\t\t\t\tresetForm,\r\n\t\t\t\t}) => {\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<form noValidate onSubmit={handleSubmit}>\r\n\t\t\t\t\t\t\t<v.fieldset disabled={isSubmitting} p={0}>\r\n\t\t\t\t\t\t\t\t<Label>Current e-mail address</Label>\r\n\t\t\t\t\t\t\t\t<T>\r\n\t\t\t\t\t\t\t\t\t<Observer>\r\n\t\t\t\t\t\t\t\t\t\t{() =>\r\n\t\t\t\t\t\t\t\t\t\t\tprops.userProfile?.dto.Email ||\r\n\t\t\t\t\t\t\t\t\t\t\t(null as any)\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t</Observer>\r\n\t\t\t\t\t\t\t\t</T>\r\n\t\t\t\t\t\t\t\t<Ids\r\n\t\t\t\t\t\t\t\t\tlength={2}\r\n\t\t\t\t\t\t\t\t\tfn={(ids) => (\r\n\t\t\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t\t\t<Label mt={24} htmlFor={ids[0]}>\r\n\t\t\t\t\t\t\t\t\t\t\t\tNew e-mail address\r\n\t\t\t\t\t\t\t\t\t\t\t</Label>\r\n\t\t\t\t\t\t\t\t\t\t\t<Input\r\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"email\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tmt={1}\r\n\t\t\t\t\t\t\t\t\t\t\t\tmaxW={{ md: \"320px\" }}\r\n\t\t\t\t\t\t\t\t\t\t\t\tid={ids[0]}\r\n\t\t\t\t\t\t\t\t\t\t\t\tstate={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.newEmailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.newEmailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"error\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"success\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\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\tvariant={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.newEmailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.newEmailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"red\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"green\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\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\tinputProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tautoComplete: \"email\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"aria-invalid\": !!(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.newEmailAddress &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.newEmailAddress\r\n\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\"aria-errormessage\":\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.newEmailAddress &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.newEmailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? ids[1]\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}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t{...getFieldProps(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"newEmailAddress\"\r\n\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/>\r\n\t\t\t\t\t\t\t\t\t\t\t{touched.newEmailAddress &&\r\n\t\t\t\t\t\t\t\t\t\t\t\terrors.newEmailAddress && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<InputHelpText\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[1]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor=\"red.80\"\r\n\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{errors.newEmailAddress}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</InputHelpText>\r\n\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<InputHelpText\r\n\t\t\t\t\t\t\t\t\t\t\t\tid={ids[1]}\r\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize=\"sm\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay=\"flex\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tmt={8}\r\n\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<Icon\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname=\"falInfoCircle\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tmr={1}\r\n\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<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Observer>\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\tprops.userProfile\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.isLimited\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"An e-mail containing a verification link will be sent to your e-mail address. Please click the verification link in order to complete the process.\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: (\"An e-mail containing a verification link will be sent to the new e-mail address. Please click the verification link in order to complete the process.\" as any)\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</Observer>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t</InputHelpText>\r\n\t\t\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<v.div display=\"flex\" mt={30}>\r\n\t\t\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\r\n\t\t\t\t\t\t\t\t\t\tisLoading={isSubmitting}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\tChange\r\n\t\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t\t\t<LineButton\r\n\t\t\t\t\t\t\t\t\t\tml={2}\r\n\t\t\t\t\t\t\t\t\t\tonClick={() => resetForm()}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\tClear\r\n\t\t\t\t\t\t\t\t\t</LineButton>\r\n\t\t\t\t\t\t\t\t</v.div>\r\n\t\t\t\t\t\t\t\t<Observer>\r\n\t\t\t\t\t\t\t\t\t{() => {\r\n\t\t\t\t\t\t\t\t\t\tlet dto = props.userProfile?.dto;\r\n\r\n\t\t\t\t\t\t\t\t\t\tif (dto?.ChangeEmailPending)\r\n\t\t\t\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t\t\t\t<Notification\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tmt={3}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"falInfoCircle\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tw=\"100%\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttext={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"An e-mail containing a verification link has been sent to \" +\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(props.userProfile\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.isLimited\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? dto.AlternateEmail\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: dto.PendingEmail)\r\n\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\taction={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Notification.Button\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttext=\"Resend\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Resend verification e-mail\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={async () => {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttry {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tawait showPendingDialogAsync(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops.userProfile.changeEmailAsync(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdto.PendingEmail\r\n\t\t\t\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\t\t\"Resending verification e-mail...\"\r\n\t\t\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} catch (e) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tshowErrorDialogAsync(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Error when resending verification e-mail\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\te\r\n\t\t\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\treturn;\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// TODO: Toast\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\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/>\r\n\t\t\t\t\t\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\t\t\t\t\t\treturn null;\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t</Observer>\r\n\t\t\t\t\t\t\t</v.fieldset>\r\n\t\t\t\t\t\t</form>\r\n\t\t\t\t\t);\r\n\t\t\t\t}}\r\n\t\t\t</Formik>\r\n\t\t</Card>\r\n\t);\r\n}\r\n\r\nexport const emailSchema = yup.object().shape({\r\n\tnewEmailAddress: yup\r\n\t\t.string()\r\n\t\t.required(\"Please enter an e-mail address\")\r\n\t\t.test(\r\n\t\t\t\"email-address-format\",\r\n\t\t\t\"Please enter a valid e-mail address\",\r\n\t\t\t(value, context) => {\r\n\t\t\t\treturn (async () => {\r\n\t\t\t\t\treturn await identityClient.validateEmailAddressFormatAsync(\r\n\t\t\t\t\t\tvalue || \"\"\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\t.test(\r\n\t\t\t\"email-address-domain\",\r\n\t\t\t\"Email address domain not allowed\",\r\n\t\t\t(value, context) => {\r\n\t\t\t\treturn (async () => {\r\n\t\t\t\t\treturn await identityClient.validateEmailAddressDomainAsync(\r\n\t\t\t\t\t\tvalue || \"\"\r\n\t\t\t\t\t);\r\n\t\t\t\t})();\r\n\t\t\t}\r\n\t\t),\r\n});\r\n\r\nconst applyToCompany = async (tenantId: string) => {\r\n  return await identityClient.fetchApplyForCompanyResult(tenantId);\r\n};\r\n\r\n// https://www.figma.com/file/8LOpBedHx2JODBsttyzoKh/Profile---to-fix?node-id=4373%3A598\r\nfunction AffiliatedCompaniesCard() {\r\n  let { showSuccess } = useToast();\r\n  const systemTenantId = \"00000000-0000-0000-0000-000000000000\";\r\n  const filteredCompanies = identityClient.affiliatedCompanies.filter(\r\n    (c) => c.Id != systemTenantId && c.Administrators.length != 0\r\n  );\r\n\r\n  return (\r\n    <Card\r\n      w=\"100%\"\r\n      px={{ xs: 2, md: 4 }}\r\n      py={{ xs: 2.5, md: 28 / 8 }}\r\n      mt={3}\r\n      column\r\n      shadow={0}\r\n      border=\"1px solid grey.30\"\r\n    >\r\n      <H5 mr={1}>Affiliated companies</H5>\r\n      <Divider mt={11 / 8} />\r\n      <v.div display={{ md: \"grid\" }} gridTemplateColumns=\"50% 50%\">\r\n        {filteredCompanies &&\r\n          filteredCompanies.map((c) => (\r\n            <AffiliatedCompany key={c.Id}>\r\n              <div>\r\n                <v.div display=\"flex\" pr={1}>\r\n                  <Icon name=\"falBuilding\" color=\"blue.80\" mr={2} />\r\n                  <div>\r\n                    <H5>{c.Name}</H5>\r\n                    <v.div whiteSpace=\"pre\" mt={1}>\r\n                      {[\r\n                        c.AddressLine1,\r\n                        c.AddressLine2,\r\n                        c.AddressLine3,\r\n                        c.AddressLine4,\r\n                      ]\r\n                        .map((x) => x?.trim() || \"\")\r\n                        .filter((x) => x)\r\n                        .join(\"\\n\")}\r\n                    </v.div>\r\n                  </div>\r\n                </v.div>\r\n              </div>\r\n              <div>\r\n                {c.Administrators.length > 0 && <H6>Company administrators</H6>}\r\n                {c.Administrators?.map((a) => (\r\n                  <Administrator key={a.Id}>\r\n                    <UserItemRefAvatar\r\n                      w=\"56px\"\r\n                      h=\"56px\"\r\n                      userItemRef={UserItemRef.byId.get(a.Id)}\r\n                      spinnerCircleProps={{\r\n                        w: (96 / 116) * 56,\r\n                        h: (96 / 116) * 56,\r\n                        borderWidth: 3,\r\n                      }}\r\n                    />\r\n                    <v.div mt={1}>{a.Name}</v.div>\r\n                    <Link mt={1} href={\"mailto:\" + a.Email} isUnderlined>\r\n                      {a.Email}\r\n                    </Link>\r\n                    <v.div mt={1}>{a.Phone}</v.div>\r\n                  </Administrator>\r\n                ))}\r\n              </div>\r\n            </AffiliatedCompany>\r\n          ))}\r\n      </v.div>\r\n      <H6 mt={3}>Connect with your company</H6>\r\n      <P mt={1}>\r\n        You may be eligible to connect with companies using the domain{\" \"}\r\n        <em>\r\n          <Observer>\r\n            {() => {\r\n              let email = identityClient.loggedInUserProfile?.dto.Email;\r\n              if (!email) return null;\r\n              let i = email.indexOf(\"@\");\r\n              if (i === -1) return null;\r\n              return email.substring(i + 1) as any;\r\n            }}\r\n          </Observer>\r\n        </em>\r\n        .\r\n      </P>\r\n      {identityClient.availableCompanies &&\r\n        identityClient.availableCompanies.map((c) => (\r\n          <AffiliatedCompany key={c.TenantId}>\r\n            <div>\r\n              <v.div display=\"flex\" pr={1}>\r\n                <Icon name=\"falBuilding\" color=\"blue.80\" mr={2} />\r\n                <div>\r\n                  <H5>{c.Name}</H5>\r\n                </div>\r\n                <Button\r\n                  ml={2}\r\n                  onClick={() => {\r\n                    applyToCompany(c.TenantId).then((x) =>\r\n                      showSuccess(\"Successfully applied to company\")\r\n                    );\r\n                  }}\r\n                >\r\n                  Apply to join\r\n                </Button>\r\n              </v.div>\r\n            </div>\r\n          </AffiliatedCompany>\r\n        ))}\r\n    </Card>\r\n  );\r\n}\r\n\r\nconst AffiliatedCompany = styled.div`\r\n\tdisplay: contents;\r\n\r\n  > * {\r\n    border-bottom: 1px solid ${th.color(\"grey.30\")};\r\n    padding-bottom: ${th.space(3)};\r\n    padding-top: ${th.space(20 / 8)};\r\n\r\n    &:first-child {\r\n      ${mediaDown(\"md\")} {\r\n        border-bottom: none;\r\n        padding-bottom: 0;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Administrator = styled.div`\r\n\tmargin-top: ${th.space(40 / 8)};\r\n\r\n\t&:first-of-type {\r\n\t\tmargin-top: ${th.space(2)};\r\n\t}\r\n`;\r\n","import { createContext } from '../utils';\r\nconst [SwitchProvider, useSwitchContext] = createContext({ isOptional: true });\r\nexport { SwitchProvider, useSwitchContext };\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core';\r\nimport { cs, filterUndefined } from '../utils';\r\nimport { switchColors } from './consts';\r\nimport { useSwitchContext } from './context';\r\nconst SwitchInput = styled.inputBox `\n  cursor: inherit;\n  height: calc(100% + 10px);\n  left: -5px;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: -5px;\n  width: calc(100% + 10px);\n  z-index: 1;\n`;\r\nconst SwitchFoundation = styled.spanBox `\n  border-radius: 100px;\n  display: inline-flex;\n  flex-shrink: 0;\n  transition-duration: fast;\n  position: relative;\n`;\r\n/** Circular element that moves along the track when toggled. */\r\nconst SwitchThumb = styled(SwitchFoundation) `\n  position: absolute;\n`;\r\n/** Track element along which the thumb moves when toggled. */\r\nconst SwitchTrack = styled(SwitchFoundation) `\n  align-items: center;\n  flex: 1;\n`;\r\nexport const SwitchButtonBase = styled(SwitchFoundation) `\n  color: white;\n  cursor: pointer;\n  --x-ring-color: green;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n\n    .vui-switchThumb {\n      background-color: ${switchColors.disabled};\n    }\n\n    .vui-switchTrack {\n      --x-ring-color: ${switchColors.disabled};\n      background-color: ${switchColors.disabledBg};\n      color: ${switchColors.disabled};\n    }\n  }\n`;\r\n/**\r\n * Controls the logic and visuals of multiple inner parts, such as input, track or thumb elements.\r\n * Handles controlled and uncontrolled modes.\r\n */\r\nexport const SwitchButton = vui((props, ref) => {\r\n    const mergedProps = { ...useSwitchContext(), ...props };\r\n    const { checked, className, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, name, onBlur, onChange, onFocus, required, value, ...rest } = omitThemingProps(mergedProps);\r\n    const { current: isControlled } = useRef(checked !== undefined);\r\n    const [isChecked, setIsChecked] = useState(checked ?? defaultChecked);\r\n    const [isFocused, setIsFocused] = useState(false);\r\n    const styles = useStyleConfig('Switch', useSwitchContext());\r\n    const { thumb: thumbStyles, track: trackStyles, ...buttonStyles } = styles.button;\r\n    useEffect(() => {\r\n        isControlled && setIsChecked(checked);\r\n    }, [checked, isControlled]);\r\n    function handleOnBlur(e) {\r\n        setIsFocused(false);\r\n        onBlur?.(e);\r\n    }\r\n    function handleOnChange(e) {\r\n        !isControlled && setIsChecked(e.target.checked);\r\n        onChange?.(e);\r\n    }\r\n    function handleOnFocus(e) {\r\n        setIsFocused(true);\r\n        onFocus?.(e);\r\n    }\r\n    const hDiff = (thumbStyles.h - trackStyles.h) / 2;\r\n    const thumbOffset = `calc(100% - ${Math.abs(hDiff - thumbStyles.h)}px)`;\r\n    const labelOffset = `${thumbStyles.h - hDiff + 4}px`;\r\n    const aliasedProps = filterUndefined({\r\n        'aria-checked': isChecked ? true : false,\r\n        'aria-disabled': disabled,\r\n        'data-focused': isFocused ? true : false\r\n    });\r\n    const thumbAliasedProps = filterUndefined({\r\n        left: isChecked ? thumbOffset : -hDiff,\r\n        ring: isFocused ? thumbStyles.ring : 0\r\n    });\r\n    const trackAliasedProps = filterUndefined({\r\n        bg: isChecked ? trackStyles.bg : switchColors.disabled,\r\n        pl: isChecked ? 1 : labelOffset,\r\n        pr: isChecked ? labelOffset : 1,\r\n        ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 3\r\n    });\r\n    return (React.createElement(SwitchButtonBase, { className: cs('vui-switchButton', className), ref: ref, ...buttonStyles, ...aliasedProps, ...rest },\r\n        React.createElement(SwitchInput, { className: \"vui-switchInput\", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, tabIndex: -1, type: \"checkbox\", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),\r\n        React.createElement(SwitchTrack, { className: \"vui-switchTrack\", tabIndex: 0, ...trackStyles, ...trackAliasedProps },\r\n            !isChecked && innerLabelOff,\r\n            React.createElement(SwitchThumb, { className: \"vui-switchThumb\", ...thumbStyles, ...thumbAliasedProps }),\r\n            isChecked && innerLabelOn)));\r\n});\r\nexport default SwitchButton;\r\n","import React, { useMemo } from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { cs, filterUndefined, isReactText } from '../utils';\r\nimport { SwitchProvider } from './context';\r\nimport { SwitchButton } from './switchButton';\r\nimport { SwitchLabel } from './switchLabel';\r\nexport const SwitchBase = styled.labelBox `\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  line-height: normal;\n  width: fit-content;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n\n    .vui-switchLabel {\n      color: disabled.color;\n    }\n  }\n`;\r\n/**\r\n * Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.\r\n * Forwards many relevant props to the innner input element. Exposes some props to the children via context.\r\n */\r\nexport const Switch = vui((props, ref) => {\r\n    const { button, checked, children, className, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, labelLeft, labelRight, name, onBlur, onChange, onFocus, required, size, value, variant, ...rest } = props;\r\n    const styles = useStyleConfig('Switch', props);\r\n    const context = useMemo(() => filterUndefined({\r\n        checked,\r\n        defaultChecked,\r\n        disabled,\r\n        name,\r\n        onBlur,\r\n        onChange,\r\n        onFocus,\r\n        required,\r\n        size,\r\n        value,\r\n        variant\r\n    }), [checked, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]);\r\n    const aliasedProps = filterUndefined({\r\n        'aria-disabled': disabled\r\n    });\r\n    return (React.createElement(SwitchProvider, { value: context },\r\n        React.createElement(SwitchBase, { className: cs('vui-switch', className), ref: ref, ...styles.container, ...aliasedProps, ...rest },\r\n            isReactText(labelLeft) ? React.createElement(SwitchLabel, { mr: 1, text: labelLeft }) : labelLeft,\r\n            children ?? button ?? React.createElement(SwitchButton, { ...{ id, innerLabelOff, innerLabelOn, inputProps, inputRef } }),\r\n            isReactText(labelRight) ? React.createElement(SwitchLabel, { ml: 1, text: labelRight }) : labelRight)));\r\n});\r\nSwitch.Button = SwitchButton;\r\nSwitch.Label = SwitchLabel;\r\nexport default Switch;\r\n","import { Avatar, Card, H1, H2, H3, H4, Icon, T, v, Image, Spinner, SpinnerCircle, Divider, H5, Button, ButtonIcon, styled, H6, th, Link, Switch, ListItem, ListIcon, RenderOnScreen } from '@veracity/vui';\r\nimport { Observer } from 'mobx-react-lite';\r\nimport React, { Fragment, useEffect, useState } from 'react';\r\nimport { NavLink } from 'react-router-dom';\r\nimport { identityClient } from '..';\r\nimport { Label } from '../components/Label';\r\nimport { LeftContainer } from '../components/LeftContainer';\r\nimport { Page } from '../components/Page';\r\nimport { UserItemRefAvatar } from '../components/UserItemRefAvatar';\r\nimport { CompanyRefDto } from '../models/auto-generated/CompanyRefDto';\r\nimport { ServiceItemRef } from '../models/ServiceItemRef';\r\nimport { UserItemRef } from '../models/UserItemRef';\r\nimport { UserOptInState } from '../models/UserOptInState';\r\nimport { OVERVIEW_ROUTE, ROUTES } from '../routes';\r\nimport { showAcceptedTermsDialogAsync } from '../showAcceptedTermsDialogAsync';\r\nimport { showNewTermsToAcceptDialogAsync } from '../showNewTermsToAcceptDialogAsync';\r\nimport { CancellationToken } from '../utils/CancellationToken';\r\nimport { toDateString } from '../utils/toDateString';\r\nimport { delayAsync } from '../utils/delayAsync';\r\nimport { OperationCancelledError } from '../utils/OperationCancelledError';\r\nimport { stringIsEmpty } from '../utils/stringIsEmpty';\r\n\r\n// https://www.figma.com/file/3XVH46wO2NB1H23BCowTpl/Log--in-%2F-sign-up?node-id=6392%3A1367\r\n\r\nexport function PreferencesPage() {\r\n\r\n\tlet [state, setState] = useState<{\r\n\r\n\t\tisLoading: boolean;\r\n\t\tallAvailableOptIns?: UserOptInState[];\r\n\t\tthrew?: boolean;\r\n\t\terror?;\r\n\r\n\t}>({ isLoading: true });\r\n\r\n\tif (state.threw)\r\n\t\tthrow state.error;\r\n\r\n\tuseEffect(() => {\r\n\r\n\t\tlet ct = new CancellationToken();\r\n\r\n\t\t(async () => {\r\n\r\n\t\t\ttry {\r\n\r\n\t\t\t\tvar allAvailableOptIns = (await identityClient.getAllAvailableOptInsAsync(\"!security\")).filter(x => x.dto.Category !== \"terms\");\r\n\r\n\t\t\t\tct.throwIfCancellationRequested();\r\n\t\t\t}\r\n\r\n\t\t\tcatch (e) {\r\n\r\n\t\t\t\tif (ct.isCancellationRequested)\r\n\t\t\t\t\treturn;\r\n\r\n\t\t\t\tif (IS_DEVELOPMENT)\r\n\t\t\t\t\tconsole.debug(e);\r\n\r\n\t\t\t\tsetState({\r\n\t\t\t\t\tisLoading: false,\r\n\t\t\t\t\tthrew: true,\r\n\t\t\t\t\terror: e\r\n\t\t\t\t});\r\n\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (IS_DEVELOPMENT)\r\n\t\t\t\tconsole.debug(\"allAvailableOptIns\", allAvailableOptIns);\r\n\r\n\t\t\tsetState({\r\n\t\t\t\tisLoading: false,\r\n\t\t\t\tallAvailableOptIns\r\n\t\t\t});\r\n\r\n\t\t})();\r\n\r\n\t\treturn ct.cancel.bind(ct);\r\n\r\n\t}, []);\r\n\r\n\tif (state.isLoading)\r\n\t\treturn <Page key=\"PREFERENCES\" center><Spinner /></Page>;\r\n\r\n\treturn (\r\n\t\t<Page>\r\n\t\t\t<LeftContainer display=\"flex\" flexDirection=\"column\">\r\n\t\t\t\t<RenderOnScreen minWidth=\"lg\">\r\n\t\t\t\t\t<H3>Preferences</H3>\r\n\t\t\t\t</RenderOnScreen>\r\n\t\t\t\t<Observer>{() => {\r\n\r\n\t\t\t\t\tlet platformOptInsList: UserOptInState[] = [];\r\n\t\t\t\t\tlet serviceOptInsMap = new Map<string, { serviceName: string; serviceId: string; optIns: UserOptInState[]; }>();\r\n\r\n\t\t\t\t\tif (state.allAvailableOptIns) {\r\n\t\t\t\t\t\tfor (let o of state.allAvailableOptIns) {\r\n\t\t\t\t\t\t\tif (shouldDisplayOptIn(o)) {\r\n\t\t\t\t\t\t\t\tif (stringIsEmpty(o.dto.ServiceId))\r\n\t\t\t\t\t\t\t\t\tplatformOptInsList.push(o);\r\n\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\tlet serviceOptInsEntry = serviceOptInsMap.get(o.dto.ServiceId);\r\n\t\t\t\t\t\t\t\t\tif (!serviceOptInsEntry)\r\n\t\t\t\t\t\t\t\t\t\tserviceOptInsMap.set(o.dto.ServiceId, serviceOptInsEntry = { serviceName: o.dto.ServiceName || o.service?.state.result?.dto.Name, serviceId: o.dto.ServiceId, optIns: [] });\r\n\t\t\t\t\t\t\t\t\tserviceOptInsEntry.optIns.push(o);\r\n\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}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t{!!platformOptInsList.length && <v.div mt={40 / 8}>\r\n\t\t\t\t\t\t\t\t<T textTransform=\"uppercase\" color=\"grey.80\" fontWeight=\"demi\" fontSize=\"sm\" as=\"div\">Platform</T>\r\n\t\t\t\t\t\t\t\t<OptInsCard title=\"Veracity\" optIns={platformOptInsList} />\r\n\t\t\t\t\t\t\t</v.div>}\r\n\t\t\t\t\t\t\t{!!serviceOptInsMap.size && (\r\n\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t<T textTransform=\"uppercase\" color=\"grey.80\" fontWeight=\"demi\" fontSize=\"sm\" mt={38 / 8} as=\"div\">My services</T>\r\n\t\t\t\t\t\t\t\t\t{[...serviceOptInsMap].sort((a, b) => {\r\n\t\t\t\t\t\t\t\t\t\tlet A = a[1].serviceName || a[0];\r\n\t\t\t\t\t\t\t\t\t\tlet B = b[1].serviceName || b[0];\r\n\r\n\t\t\t\t\t\t\t\t\t\treturn A < B ? -1 : B < A ? 1 : 0;\r\n\t\t\t\t\t\t\t\t\t}).map(x => x[1]).map(x => <OptInsCard key={x.serviceId} title={x.serviceName || x.serviceId} optIns={x.optIns} />)\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)}\r\n\t\t\t\t\t\t</>\r\n\t\t\t\t\t);\r\n\r\n\t\t\t\t}}</Observer>\r\n\t\t\t</LeftContainer>\r\n\t\t</Page>\r\n\t);\r\n}\r\n\r\nexport function shouldDisplayOptIn(optIn: UserOptInState) {\r\n\tlet dto = optIn.dto;\r\n\tif (!stringIsEmpty(dto.Category) && dto.Category !== \"terms\" && dto.Mandatory)\r\n\t\treturn false;\r\n\treturn true;\r\n}\r\n\r\nfunction OptInsCard(props: { title: string; optIns: UserOptInState[]; }) {\r\n\r\n\tlet termsOptIns: UserOptInState[] = [];\r\n\tlet nonTermsOptIns: UserOptInState[] = [];\r\n\r\n\tfor (let o of props.optIns) {\r\n\t\tif (o.dto.Category === \"terms\")\r\n\t\t\ttermsOptIns.push(o);\r\n\t\telse nonTermsOptIns.push(o);\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Card w=\"100%\" px={{ xs: 2, md: 4 }} py={{ xs: 2.5, md: 28 / 8 }} column shadow={0} border=\"1px solid grey.30\" mt={2}>\r\n\t\t\t<H4>{props.title}</H4>\r\n\t\t\t<Divider my={2} />\r\n\t\t\t{termsOptIns.map(x => (\r\n\t\t\t\t<TermsContainer key={x.id}>\r\n\t\t\t\t\t<ListItem as=\"div\" isInteractive iconLeft={<ListIcon mr={2} name=\"falFile\" color=\"blue.80\" />} iconRight={<ListIcon ml=\"auto\" name=\"falChevronRight\" color=\"blue.80\" size=\"sm\" />} border=\"1px solid grey.30\" py={2} px={22 / 8} h={null} borderRadius=\"md\" onClick={() => showAcceptedTermsDialogAsync(x)}>\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<Observer>{() => <H6>{x.dto.Name}</H6>}</Observer>\r\n\t\t\t\t\t\t\t<Observer>{() => x.acceptedDate ? \"Accepted on \" + toDateString(x.acceptedDate) : null as any}</Observer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ListItem>\r\n\t\t\t\t\t<Observer>{() => x.dto.OptIn && !x.dto.OptIn.LatestVersion ? <v.div textAlign=\"right\" mt={1}><Link isUnderlined as=\"span\" role=\"button\" tabIndex={0} userSelect=\"none\" onClick={() => showNewTermsToAcceptDialogAsync(x).catch(e => { if (!(e instanceof OperationCancelledError)) console.error(e); })}>New version available</Link></v.div> : null as any}</Observer>\r\n\t\t\t\t</TermsContainer>\r\n\t\t\t))}\r\n\t\t\t{nonTermsOptIns.map(x => (\r\n\t\t\t\t<OptInContainer key={x.id} className=\"optIn\">\r\n\t\t\t\t\t<v.div display=\"flex\" alignItems=\"center\">\r\n\t\t\t\t\t\t<v.div mr={2}>\r\n\t\t\t\t\t\t\t<H6><Observer>{() => x.dto.Name || null as any}</Observer></H6>\r\n\t\t\t\t\t\t\t<v.label><Observer>{() => x.dto.OptInText || null as any}</Observer></v.label>\r\n\t\t\t\t\t\t</v.div>\r\n\t\t\t\t\t\t<Observer>{() => <Switch size=\"lg\" innerLabelOff=\"OFF\" innerLabelOn=\"ON\" ml=\"auto\" checked={x.displayEnabledWithPendingTakenIntoAccount} disabled={x.pendingEnabled !== null} onChange={e => x.displayEnableDisableAsync(e.currentTarget.checked)} />}</Observer>\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t</OptInContainer>\r\n\t\t\t))}\r\n\t\t</Card>\r\n\t);\r\n}\r\n\r\nconst TermsContainer = styled.div`\r\n\r\n\t&:not(:last-child) {\r\n\t\tmargin-bottom: ${th.space(3)};\r\n\t}\r\n`;\r\n\r\nexport const OptInContainer = styled.div`\r\n\r\n\tpadding-bottom: ${th.space(2)};\r\n\tpadding-top: ${th.space(2)};\r\n\r\n\t& + .optIn {\r\n\t\tborder-top: 1px solid ${th.color(\"grey.30\")};\r\n\t}\r\n\r\n\t&:first-child {\r\n\t\tpadding-top: 0;\r\n\t}\r\n\r\n\t&:last-child {\r\n\t\tpadding-bottom: 0;\r\n\t}\r\n`;","import { Avatar, Card, H1, H2, H3, H4, Icon, T, v, Image, Spinner, SpinnerCircle, Divider, H5, Button, ButtonIcon, styled, H6, th, Link, Switch, ListItem, ListIcon, RenderOnScreen } from '@veracity/vui';\r\nimport { Observer } from 'mobx-react-lite';\r\nimport React, { Fragment, useEffect, useState } from 'react';\r\nimport { NavLink } from 'react-router-dom';\r\nimport { identityClient } from '..';\r\nimport { Label } from '../components/Label';\r\nimport { LeftContainer } from '../components/LeftContainer';\r\nimport { Page } from '../components/Page';\r\nimport { UserItemRefAvatar } from '../components/UserItemRefAvatar';\r\nimport { CompanyRefDto } from '../models/auto-generated/CompanyRefDto';\r\nimport { ServiceItemRef } from '../models/ServiceItemRef';\r\nimport { UserItemRef } from '../models/UserItemRef';\r\nimport { UserOptInState } from '../models/UserOptInState';\r\nimport { OVERVIEW_ROUTE, ROUTES } from '../routes';\r\nimport { showAcceptedTermsDialogAsync } from '../showAcceptedTermsDialogAsync';\r\nimport { showNewTermsToAcceptDialogAsync } from '../showNewTermsToAcceptDialogAsync';\r\nimport { CancellationToken } from '../utils/CancellationToken';\r\nimport { toDateString } from '../utils/toDateString';\r\nimport { delayAsync } from '../utils/delayAsync';\r\nimport { OperationCancelledError } from '../utils/OperationCancelledError';\r\nimport { stringIsEmpty } from '../utils/stringIsEmpty';\r\n\r\n// https://www.figma.com/file/3XVH46wO2NB1H23BCowTpl/Log--in-%2F-sign-up?node-id=6392%3A1367\r\n\r\nexport function TermsPage() {\r\n\r\n\tlet [state, setState] = useState<{\r\n\r\n\t\tisLoading: boolean;\r\n\t\tallAvailableOptIns?: UserOptInState[];\r\n\t\tthrew?: boolean;\r\n\t\terror?;\r\n\r\n\t}>({ isLoading: true });\r\n\r\n\tif (state.threw)\r\n\t\tthrow state.error;\r\n\r\n\tuseEffect(() => {\r\n\r\n\t\tlet ct = new CancellationToken();\r\n\r\n\t\t(async () => {\r\n\r\n\t\t\ttry {\r\n\r\n\t\t\t\tvar allAvailableOptIns = (await identityClient.getAllAvailableOptInsAsync(\"!security\")).filter(x => x.dto.Category === \"terms\");\r\n\r\n\t\t\t\tct.throwIfCancellationRequested();\r\n\t\t\t}\r\n\r\n\t\t\tcatch (e) {\r\n\r\n\t\t\t\tif (ct.isCancellationRequested)\r\n\t\t\t\t\treturn;\r\n\r\n\t\t\t\tif (IS_DEVELOPMENT)\r\n\t\t\t\t\tconsole.debug(e);\r\n\r\n\t\t\t\tsetState({\r\n\t\t\t\t\tisLoading: false,\r\n\t\t\t\t\tthrew: true,\r\n\t\t\t\t\terror: e\r\n\t\t\t\t});\r\n\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (IS_DEVELOPMENT)\r\n\t\t\t\tconsole.debug(\"allAvailableOptIns\", allAvailableOptIns);\r\n\r\n\t\t\tsetState({\r\n\t\t\t\tisLoading: false,\r\n\t\t\t\tallAvailableOptIns\r\n\t\t\t});\r\n\r\n\t\t})();\r\n\r\n\t\treturn ct.cancel.bind(ct);\r\n\r\n\t}, []);\r\n\r\n\tif (state.isLoading)\r\n\t\treturn <Page key=\"LOADING_TERMS\" center><Spinner /></Page>;\r\n\r\n\treturn (\r\n\t\t<Page>\r\n\t\t\t<LeftContainer display=\"flex\" flexDirection=\"column\">\r\n\t\t\t\t<RenderOnScreen minWidth=\"lg\">\r\n\t\t\t\t\t<H3>Terms</H3>\r\n\t\t\t\t</RenderOnScreen>\r\n\t\t\t\t<Observer>{() => {\r\n\r\n\t\t\t\t\tlet platformOptInsList: UserOptInState[] = [];\r\n\t\t\t\t\tlet serviceOptInsMap = new Map<string, { serviceName: string; serviceId: string; optIns: UserOptInState[]; }>();\r\n\r\n\t\t\t\t\tif (state.allAvailableOptIns) {\r\n\t\t\t\t\t\tfor (let o of state.allAvailableOptIns) {\r\n\t\t\t\t\t\t\tif (shouldDisplayOptIn(o)) {\r\n\t\t\t\t\t\t\t\tif (stringIsEmpty(o.dto.ServiceId))\r\n\t\t\t\t\t\t\t\t\tplatformOptInsList.push(o);\r\n\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\tlet serviceOptInsEntry = serviceOptInsMap.get(o.dto.ServiceId);\r\n\t\t\t\t\t\t\t\t\tif (!serviceOptInsEntry)\r\n\t\t\t\t\t\t\t\t\t\tserviceOptInsMap.set(o.dto.ServiceId, serviceOptInsEntry = { serviceName: o.dto.ServiceName || o.service?.state.result?.dto.Name, serviceId: o.dto.ServiceId, optIns: [] });\r\n\t\t\t\t\t\t\t\t\tserviceOptInsEntry.optIns.push(o);\r\n\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}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t{!!platformOptInsList.length && <v.div mt={40 / 8}>\r\n\t\t\t\t\t\t\t\t<T textTransform=\"uppercase\" color=\"grey.80\" fontWeight=\"demi\" fontSize=\"sm\" as=\"div\">Platform</T>\r\n\t\t\t\t\t\t\t\t<OptInsCard title=\"Veracity\" optIns={platformOptInsList} />\r\n\t\t\t\t\t\t\t</v.div>}\r\n\t\t\t\t\t\t\t{!!serviceOptInsMap.size && (\r\n\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t<T textTransform=\"uppercase\" color=\"grey.80\" fontWeight=\"demi\" fontSize=\"sm\" mt={38 / 8} as=\"div\">My services</T>\r\n\t\t\t\t\t\t\t\t\t{[...serviceOptInsMap].sort((a, b) => {\r\n\t\t\t\t\t\t\t\t\t\tlet A = a[1].serviceName || a[0];\r\n\t\t\t\t\t\t\t\t\t\tlet B = b[1].serviceName || b[0];\r\n\r\n\t\t\t\t\t\t\t\t\t\treturn A < B ? -1 : B < A ? 1 : 0;\r\n\t\t\t\t\t\t\t\t\t}).map(x => x[1]).map(x => <OptInsCard key={x.serviceId} title={x.serviceName || x.serviceId} optIns={x.optIns} />)\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)}\r\n\t\t\t\t\t\t</>\r\n\t\t\t\t\t);\r\n\r\n\t\t\t\t}}</Observer>\r\n\t\t\t</LeftContainer>\r\n\t\t</Page>\r\n\t);\r\n}\r\n\r\nexport function shouldDisplayOptIn(optIn: UserOptInState) {\r\n\tlet dto = optIn.dto;\r\n\tif (!stringIsEmpty(dto.Category) && dto.Category !== \"terms\" && dto.Mandatory)\r\n\t\treturn false;\r\n\treturn true;\r\n}\r\n\r\nfunction OptInsCard(props: { title: string; optIns: UserOptInState[]; }) {\r\n\r\n\tlet termsOptIns: UserOptInState[] = [];\r\n\tlet nonTermsOptIns: UserOptInState[] = [];\r\n\r\n\tfor (let o of props.optIns) {\r\n\t\tif (o.dto.Category === \"terms\")\r\n\t\t\ttermsOptIns.push(o);\r\n\t\telse nonTermsOptIns.push(o);\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Card w=\"100%\" px={{ xs: 2, md: 4 }} py={{ xs: 2.5, md: 28 / 8 }} column shadow={0} border=\"1px solid grey.30\" mt={2}>\r\n\t\t\t<H4>{props.title}</H4>\r\n\t\t\t<Divider my={2} />\r\n\t\t\t{termsOptIns.map(x => (\r\n\t\t\t\t<TermsContainer key={x.id}>\r\n\t\t\t\t\t<ListItem as=\"div\" isInteractive iconLeft={<ListIcon mr={2} name=\"falFile\" color=\"blue.80\" />} iconRight={<ListIcon ml=\"auto\" name=\"falChevronRight\" color=\"blue.80\" size=\"sm\" />} border=\"1px solid grey.30\" py={2} px={22 / 8} h={null} borderRadius=\"md\" onClick={() => showAcceptedTermsDialogAsync(x)}>\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<Observer>{() => <H6>{x.dto.Name}</H6>}</Observer>\r\n\t\t\t\t\t\t\t<Observer>{() => x.acceptedDate ? \"Accepted on \" + toDateString(x.acceptedDate) : null as any}</Observer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ListItem>\r\n\t\t\t\t\t<Observer>{() => x.dto.OptIn && !x.dto.OptIn.LatestVersion ? <v.div textAlign=\"right\" mt={1}><Link isUnderlined as=\"span\" role=\"button\" tabIndex={0} userSelect=\"none\" onClick={() => showNewTermsToAcceptDialogAsync(x).catch(e => { if (!(e instanceof OperationCancelledError)) console.error(e); })}>New version available</Link></v.div> : null as any}</Observer>\r\n\t\t\t\t</TermsContainer>\r\n\t\t\t))}\r\n\t\t\t{nonTermsOptIns.map(x => (\r\n\t\t\t\t<OptInContainer key={x.id} className=\"optIn\">\r\n\t\t\t\t\t<v.div display=\"flex\" alignItems=\"center\">\r\n\t\t\t\t\t\t<v.div mr={2}>\r\n\t\t\t\t\t\t\t<H6><Observer>{() => x.dto.Name || null as any}</Observer></H6>\r\n\t\t\t\t\t\t\t<v.label><Observer>{() => x.dto.OptInText || null as any}</Observer></v.label>\r\n\t\t\t\t\t\t</v.div>\r\n\t\t\t\t\t\t<Observer>{() => <Switch size=\"lg\" innerLabelOff=\"OFF\" innerLabelOn=\"ON\" ml=\"auto\" checked={x.displayEnabledWithPendingTakenIntoAccount} disabled={x.pendingEnabled !== null} onChange={e => x.displayEnableDisableAsync(e.currentTarget.checked)} />}</Observer>\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t</OptInContainer>\r\n\t\t\t))}\r\n\t\t</Card>\r\n\t);\r\n}\r\n\r\nconst TermsContainer = styled.div`\r\n\r\n\t&:not(:last-child) {\r\n\t\tmargin-bottom: ${th.space(3)};\r\n\t}\r\n`;\r\n\r\nexport const OptInContainer = styled.div`\r\n\r\n\tpadding-bottom: ${th.space(2)};\r\n\tpadding-top: ${th.space(2)};\r\n\r\n\t& + .optIn {\r\n\t\tborder-top: 1px solid ${th.color(\"grey.30\")};\r\n\t}\r\n\r\n\t&:first-child {\r\n\t\tpadding-top: 0;\r\n\t}\r\n\r\n\t&:last-child {\r\n\t\tpadding-bottom: 0;\r\n\t}\r\n`;","import React, { useEffect, useState } from 'react';\r\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core';\r\nimport Icon from '../icon';\r\nimport T from '../t';\r\nimport { cs, filterUndefined } from '../utils';\r\nimport { radioColors } from './consts';\r\nimport { useRadioGroupContext } from './context';\r\nconst RadioControl = styled.spanBox `\n  border-radius: 50%;\n  display: inline-flex;\n  flex-shrink: 0;\n  position: relative;\n  transition-duration: fast;\n`;\r\nconst RadioInput = styled.input `\n  cursor: inherit;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n`;\r\nexport const RadioBase = styled.labelBox `\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):hover .vui-radioControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  &[aria-disabled='true'] {\n    color: ${radioColors.disabled};\n    cursor: not-allowed;\n\n    .vui-radioControl {\n      color: ${radioColors.disabled};\n    }\n  }\n`;\r\n/**\r\n * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.\r\n * Uses icons to display itself in different states.\r\n */\r\nexport const Radio = vui((props, ref) => {\r\n    const { defaultValue: groupDefaultValue, isChecked: groupIsChecked, onChange: groupOnChange, value: groupValue, ...radioGroupProps } = useRadioGroupContext() ?? {};\r\n    const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined;\r\n    const mergedProps = { ...radioGroupProps, ...props };\r\n    const { checked = groupValue !== undefined ? props.value === groupValue : undefined, children, className, defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined, disabled, icon: iconProp = 'cuiRadioUnselected', iconChecked = 'cuiRadioSelected', id, inputProps, inputRef, label, name, onChange, required, value, ...rest } = omitThemingProps(mergedProps);\r\n    const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked);\r\n    const styles = useStyleConfig('Radio', mergedProps);\r\n    const { color: controlColor, hoverColor, ...controlStyles } = styles.control;\r\n    const icon = isChecked ? iconChecked : iconProp;\r\n    const controlMr = children || label ? 1 : 0;\r\n    const color = controlColor ? controlColor : radioColors.main;\r\n    const controlHoverColor = hoverColor ? hoverColor : radioColors.hover;\r\n    useEffect(() => {\r\n        if (groupIsChecked !== undefined) {\r\n            setIsChecked(groupIsChecked === value);\r\n        }\r\n        else if (checked !== undefined) {\r\n            setIsChecked(checked);\r\n        }\r\n    }, [checked, groupIsChecked]);\r\n    function handleOnChange(e) {\r\n        groupOnChange?.(e);\r\n        onChange?.(e);\r\n    }\r\n    const aliasedProps = filterUndefined({\r\n        'aria-disabled': disabled\r\n    });\r\n    return (React.createElement(RadioBase, { className: cs('vui-radio', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest },\r\n        React.createElement(RadioControl, { bg: \"white\", className: \"vui-radioControl\", color: color, focusWithinRing: 3, mr: controlMr, ...controlStyles },\r\n            React.createElement(RadioInput, { \"aria-label\": \"input-radio\", className: \"vui-radioInput\", onChange: handleOnChange, ref: inputRef, type: \"radio\", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),\r\n            React.createElement(Icon, { className: \"vui-radioIcon\", h: \"100%\", name: icon, w: \"100%\" })),\r\n        children ??\r\n            (label && (React.createElement(T, { className: \"vui-radioLabel\", lineHeight: \"normal\", ...styles.label }, label)))));\r\n});\r\nexport default Radio;\r\n","import React from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { cs } from '../utils';\r\nimport { useTableContext } from './context';\r\nexport const TdBase = styled.tdBox `\n  transition-duration: fast;\n`;\r\n/** Displays a cell inside Table row. */\r\nexport const Td = vui((props, ref) => {\r\n    const { className, ...rest } = props;\r\n    const styles = useStyleConfig('Table', useTableContext());\r\n    return React.createElement(TdBase, { className: cs('vui-td', className), px: 2, ref: ref, ...styles.td, ...rest });\r\n});\r\nexport default Td;\r\n","import React from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { cs } from '../utils';\r\nimport { useTableContext } from './context';\r\nexport const TrBase = styled.trBox `\n  transition-duration: fast;\n`;\r\n/** Displays Table row that can contain heading or data cells. */\r\nexport const Tr = vui((props, ref) => {\r\n    const { className, isSelected, ...rest } = props;\r\n    const { variant } = useTableContext() ?? {};\r\n    const styles = useStyleConfig('Table', useTableContext());\r\n    const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {};\r\n    return (React.createElement(TrBase, { className: cs('vui-tr', className), \"data-selected\": Boolean(isSelected), \"data-variant\": variant, ref: ref, ...styles.tr, ...selectedProps, ...rest }));\r\n});\r\nexport default Tr;\r\n","import React from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { cs } from '../utils';\r\nimport { useTableContext } from './context';\r\nimport Td from './td';\r\nimport Tr from './tr';\r\nexport const TbodyBase = styled.tbodyBox `\n  tr {\n    :hover td {\n      background-color: skyBlue.hover;\n    }\n\n    &[data-selected='true']:hover td {\n      background-color: skyBlue.hover;\n    }\n\n    &[data-selected='true'] td {\n      border-bottom-color: sandstone.main;\n    }\n\n    &[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {\n      background-color: sandstone.95;\n    }\n\n    &[data-variant='basic']:hover td {\n      background-color: transparent;\n    }\n  }\n`;\r\n/** Displays Table body with built-in support for rows. */\r\nexport const Tbody = vui((props, ref) => {\r\n    const { children, className, ...rest } = props;\r\n    const { columns, rows } = useTableContext() ?? {};\r\n    const styles = useStyleConfig('Table', useTableContext());\r\n    return (React.createElement(TbodyBase, { className: cs('vui-tbody', className), ref: ref, ...styles.tbody, ...rest }, children ??\r\n        rows?.map((row, index) => (React.createElement(Tr, { key: index }, columns?.map(column => (React.createElement(Td, { key: column.field }, row[column.field]))))))));\r\n});\r\nexport default Tbody;\r\n","import React from 'react';\r\nimport Box from '../box';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { T } from '../t';\r\nimport { cs, useCallbackRef } from '../utils';\r\nimport { useTableContext } from './context';\r\nimport TableSortIcon from './tableSortIcon';\r\nexport const ThBase = styled.thBox `\n  font-weight: demi;\n  text-align: left;\n  transition-duration: fast;\n`;\r\n/** Displays Table heading with support for sort. */\r\nexport const Th = vui((props, ref) => {\r\n    const { children, className, disabled, field, isInteractive: isInteractiveProp, isSortable, onClick: onClickProp, title, ...rest } = props;\r\n    const { onSortChange, sort } = useTableContext() ?? {};\r\n    const styles = useStyleConfig('Table', useTableContext());\r\n    const onClick = isSortable\r\n        ? useCallbackRef((e) => {\r\n            onClickProp?.(e);\r\n            field && onSortChange(field);\r\n        })\r\n        : onClickProp;\r\n    const isActive = !disabled && sort?.key === field;\r\n    const sortOrder = isActive ? sort.order : undefined;\r\n    const isInteractive = isInteractiveProp ?? onClick !== undefined;\r\n    const activeProps = isActive ? { bg: 'skyBlue.active' } : {};\r\n    const disabledProps = disabled ? { bg: 'disabled.bg', color: 'disabled.color', cursor: 'not-allowed' } : {};\r\n    const hoverBg = isSortable ? 'skyBlue.hover' : undefined;\r\n    const interactiveProps = !disabled && isInteractive\r\n        ? {\r\n            cursor: 'pointer',\r\n            onClick,\r\n            tabIndex: 0,\r\n            userSelect: 'none'\r\n        }\r\n        : {};\r\n    return (React.createElement(ThBase, { className: cs('vui-th', className), \"data-active\": isActive, \"data-disabled\": disabled, hoverBg: hoverBg, px: 2, ref: ref, ...styles.th, ...activeProps, ...disabledProps, ...interactiveProps, ...rest },\r\n        children ?? (React.createElement(Box, { centerV: true, display: \"inline-flex\" },\r\n            title,\r\n            isSortable && React.createElement(TableSortIcon, { ml: 1, my: 0.5, order: sortOrder }))),\r\n        !title && React.createElement(T, { color: \"white\" }, \"a11y fix\")));\r\n});\r\nexport default Th;\r\n","import React from 'react';\r\nimport { styled, useStyleConfig, vui } from '../core';\r\nimport { cs } from '../utils';\r\nimport { useTableContext } from './context';\r\nimport Th from './th';\r\nimport Tr from './tr';\r\n/*@formatter:off*/\r\nconst TheadBase = styled.theadBox `\n  tr th {\n    border-bottom: 1px solid sandstone.main;\n  }\n`;\r\n/*@formatter:on*/\r\n/** Displays Table head with support for columns and sticky. */\r\nexport const Thead = vui((props, ref) => {\r\n    const { children, className, ...rest } = props;\r\n    const { columns, stickyHeader } = useTableContext() ?? {};\r\n    const styles = useStyleConfig('Table', useTableContext());\r\n    const stickyProps = stickyHeader\r\n        ? {\r\n            bg: 'white',\r\n            position: 'sticky',\r\n            top: 0,\r\n            zIndex: 3\r\n        }\r\n        : {};\r\n    return (React.createElement(TheadBase, { className: cs('vui-thead', className), ref: ref, ...stickyProps, ...styles.thead, ...rest }, children ?? (React.createElement(Tr, null, columns?.map(column => (React.createElement(Th, { key: column.field, role: \"columnheader\", ...column })))))));\r\n});\r\nexport default Thead;\r\n","import React, { useMemo } from 'react';\r\nimport { css, styled, useStyleConfig, vui } from '../core';\r\nimport { compareBy, cs } from '../utils';\r\nimport { TableProvider } from './context';\r\nimport TableSortIcon from './tableSortIcon';\r\nimport Tbody from './tbody';\r\nimport Td from './td';\r\nimport Tfoot from './tfoot';\r\nimport Th from './th';\r\nimport Thead from './thead';\r\nimport Tr from './tr';\r\nimport useTable from './useTable';\r\n/**\r\n * Displays a Table with support for columns, rows and sort.\r\n */\r\nexport const TableBase = styled.tableBox `\n  border-collapse: separate;\n  border-spacing: 0px;\n  display: table;\n  position: relative;\n  width: 100%;\n\n  ${p => p.stickyColumn &&\r\n    css `\n      thead tr:last-of-type th:first-of-type,\n      td:first-of-type {\n        left: 0;\n        position: sticky;\n        z-index: 2;\n\n        ::after {\n          bottom: -1px;\n          box-shadow: inset 10px 0 8px -8px #00000026;\n          content: '';\n          pointer-events: none;\n          position: absolute;\n          right: 0;\n          top: 0;\n          transform: translate(100%);\n          transition: box-shadow 0.3s;\n          width: 10px;\n        }\n      }\n\n      thead tr:last-of-type th:first-of-type:not([data-active='true']):not([data-disabled='true']),\n      td:first-of-type {\n        background-color: white;\n      }\n    `}\n`;\r\n/** Displays a Table with support for columns, rows and sort. */\r\nexport const Table = vui((props, ref) => {\r\n    const { children, className, columns, defaultSort, onSortChange, rows, size, sort: sortProp, stickyColumn, stickyHeader, variant, ...rest } = props;\r\n    const styles = useStyleConfig('Table', props);\r\n    const tableProps = useTable({ defaultSort, onSortChange, sort: sortProp });\r\n    const { isControlled, sort } = tableProps;\r\n    // Rows are sorted internally only in uncontrolled mode, that is when 'sort' prop is not provided.\r\n    const sortedRows = useMemo(() => (!isControlled ? rows?.slice().sort(compareBy(sort.key, sort.order)) : rows), [rows, sort, isControlled]);\r\n    const context = { ...tableProps, columns, rows: sortedRows, size, stickyColumn, stickyHeader, variant };\r\n    return (React.createElement(TableProvider, { value: context },\r\n        React.createElement(TableBase, { className: cs('vui-table', className), ref: ref, stickyColumn: stickyColumn, ...styles.container, ...rest }, children ?? (React.createElement(React.Fragment, null,\r\n            React.createElement(Thead, null),\r\n            React.createElement(Tbody, null))))));\r\n});\r\nTable.SortIcon = TableSortIcon;\r\nTable.Tbody = Tbody;\r\nTable.Td = Td;\r\nTable.Tfoot = Tfoot;\r\nTable.Th = Th;\r\nTable.Thead = Thead;\r\nTable.Tr = Tr;\r\nexport default Table;\r\n","import React from 'react'\r\n\r\nimport { styled, th, useStyleConfig, vui } from '@veracity/vui'\r\nimport { cs, filterUndefined } from '@veracity/vui'\r\nimport { useSelectContext } from './context'\r\nimport { SelectSelectProps, SelectState } from './select.types'\r\n\r\n// https://yoksel.github.io/url-encoder/\r\n\r\nexport const SelectSelectBase = styled.select<{ state: SelectState | \"\"; }>`\r\n\talign-self: stretch;\r\n\tappearance: none;\r\n\tbackground-color: transparent;\r\n\t${p => p.state === \"loading\" ? \"\" : `\r\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6016 15.3255L6.16407 9.80361C5.94376 9.58329 5.94376 9.22704 6.16407 9.00673L6.49689 8.67392C6.7172 8.45361 7.07345 8.45361 7.29376 8.67392L12 13.4692L16.7063 8.67861C16.9266 8.45829 17.2828 8.45829 17.5031 8.67861L17.8359 9.01142C18.0563 9.23173 18.0563 9.58798 17.8359 9.80829L12.3984 15.3302C12.1781 15.5458 11.8219 15.5458 11.6016 15.3255Z' fill='%230067C5'/%3E%3C/svg%3E\");\r\n\t\tbackground-repeat: no-repeat;\r\n\t\tbackground-position: right 8px center;\r\n\t\tbackground-size: 24px 24px;`\r\n\t}\r\n\tborder: none;\r\n\tborder-radius: md;\r\n\tflex: 1;\r\n\tfont-size: inherit;\r\n\tmin-width: 0;\r\n\toutline: none;\r\n\tpadding: 0 5 0 1;\r\n\r\n\t&::placeholder {\r\n\t\tcolor: grey.60;\r\n\t}\r\n\r\n\t&[aria-disabled='true'],\r\n\t&[aria-disabled='true']::placeholder {\r\n\t\tcolor: disabled.color;\r\n\t\tcursor: not-allowed;\r\n\t}\r\n`\r\n\r\n/** Displays an select element within the Select component. */\r\nexport const SelectSelect = vui<'select', SelectSelectProps>((props, ref) => {\r\n\tconst { className, ...rest } = props\r\n\tconst selectProps = useSelectContext()\r\n\tconst mergedProps = { ...selectProps, ...props }\r\n\tconst styles = useStyleConfig('Select', mergedProps)\r\n\r\n\tconst aliasedProps = filterUndefined({\r\n\t\t'aria-disabled': mergedProps.disabled\r\n\t})\r\n\r\n\treturn (\r\n\t\t<SelectSelectBase\r\n\t\t\tclassName={cs('vui-selectSelect', className)}\r\n\t\t\tref={ref}\r\n\t\t\t{...styles.select}\r\n\t\t\t{...aliasedProps}\r\n\t\t\t{...rest}\r\n\t\t/>\r\n\t)\r\n})\r\n\r\nSelectSelect.displayName = 'SelectSelect'\r\n\r\nexport default SelectSelect\r\n","import React, { useMemo, useState } from 'react'\r\n\r\nimport { styled, useStyleConfig, vui, VuiComponent } from '@veracity/vui'\r\nimport { T } from '@veracity/vui'\r\nimport { ChangeEvent, cs, filterUndefined, isString } from '@veracity/vui'\r\nimport { selectStateMapping } from './consts'\r\nimport { SelectProvider } from './context'\r\nimport { getInitialCount } from './helpers'\r\nimport { SelectProps } from './select.types'\r\nimport SelectIcon from './selectIcon'\r\nimport SelectSelect from './selectSelect'\r\n\r\nexport const SelectBase = styled.divBox`\r\n\talign-items: center;\r\n\tbackground-color: white;\r\n\tborder-radius: md;\r\n\tborder-width: 1px;\r\n\tdisplay: flex;\r\n\tflex-shrink: 0;\r\n\toutline: none;\r\n\tposition: relative;\r\n\ttransition-duration: fast;\r\n\twidth: 100%;\r\n\r\n\t&[aria-disabled='true'] {\r\n\t\tbackground-color: disabled.bg;\r\n\t\tcolor: disabled.color;\r\n\t\tcursor: not-allowed;\r\n\t}\r\n`\r\n\r\n/**\r\n * Displays an select element wrapped in a div to allow extra content, like counter, side icons or buttons.\r\n * Forwards many relevant props to the inner select. Handles different states, like loading or error.\r\n * Exposes some props to the children via context.\r\n */\r\nexport const Select = vui<'div', SelectProps>((props, ref) => {\r\n\tconst [count, setCount] = useState(getInitialCount(props))\r\n\tconst {\r\n\t\tautoComplete,\r\n\t\tautoFocus,\r\n\t\tchildren,\r\n\t\tclassName,\r\n\t\tcolorScheme,\r\n\t\tdefaultValue,\r\n\t\tdisabled,\r\n\t\ticonLeft,\r\n\t\ticonRight,\r\n\t\tid,\r\n\t\tselect,\r\n\t\tselectProps,\r\n\t\tselectRef,\r\n\t\tisInvalid,\r\n\t\titemLeft,\r\n\t\titemRight,\r\n\t\tmax,\r\n\t\tmaxLength,\r\n\t\tmin,\r\n\t\tname,\r\n\t\tonBlur,\r\n\t\tonChange: onChangeProp,\r\n\t\tonFocus,\r\n\t\tpattern,\r\n\t\tplaceholder,\r\n\t\treadOnly,\r\n\t\trequired,\r\n\t\tshowCount,\r\n\t\tsize,\r\n\t\tstate = '',\r\n\t\tstateMapping,\r\n\t\tstep,\r\n\t\ttype = 'text',\r\n\t\tvalue,\r\n\t\tvariant,\r\n\t\t...rest\r\n\t} = props\r\n\tconst states = { ...selectStateMapping, ...stateMapping }\r\n\tconst computedColorScheme = filterUndefined({\r\n\t\tcolorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme\r\n\t})\r\n\r\n\tconst styles = useStyleConfig('Select', { ...computedColorScheme, ...props })\r\n\r\n\tconst context = useMemo(\r\n\t\t() => filterUndefined({ colorScheme, disabled, size, variant }),\r\n\t\t[colorScheme, disabled, size, variant]\r\n\t)\r\n\r\n\tfunction onChange(e: ChangeEvent<HTMLSelectElement>) {\r\n\t\tsetCount(e.target.value.length)\r\n\t\tonChangeProp?.(e)\r\n\t}\r\n\r\n\tconst aliasedProps = filterUndefined({\r\n\t\t'aria-disabled': disabled,\r\n\t\tbg: readOnly ? 'grey.10' : undefined,\r\n\t\tfocusWithinBorderColor: !readOnly ? 'transparent' : undefined,\r\n\t\tfocusWithinRingColor: readOnly ? 'transparent' : undefined\r\n\t})\r\n\r\n\treturn (\r\n\t\t<SelectProvider value={context}>\r\n\t\t\t<SelectBase className={cs('vui-select', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>\r\n\t\t\t\t{itemLeft}\r\n\r\n\t\t\t\t{isString(iconLeft) ? <SelectIcon ml={1} name={iconLeft} /> : iconLeft}\r\n\r\n\t\t\t\t{select ?? (\r\n\t\t\t\t\t<SelectSelect\r\n\t\t\t\t\t\tref={selectRef}\r\n\t\t\t\t\t\t{...{\r\n\t\t\t\t\t\t\tautoComplete,\r\n\t\t\t\t\t\t\tautoFocus,\r\n\t\t\t\t\t\t\tdefaultValue,\r\n\t\t\t\t\t\t\tdisabled,\r\n\t\t\t\t\t\t\tid,\r\n\t\t\t\t\t\t\tmax,\r\n\t\t\t\t\t\t\tmaxLength,\r\n\t\t\t\t\t\t\tmin,\r\n\t\t\t\t\t\t\tname,\r\n\t\t\t\t\t\t\tonBlur,\r\n\t\t\t\t\t\t\tonChange,\r\n\t\t\t\t\t\t\tonFocus,\r\n\t\t\t\t\t\t\tpattern,\r\n\t\t\t\t\t\t\tplaceholder,\r\n\t\t\t\t\t\t\treadOnly,\r\n\t\t\t\t\t\t\trequired,\r\n\t\t\t\t\t\t\tstep,\r\n\t\t\t\t\t\t\ttype,\r\n\t\t\t\t\t\t\tvalue,\r\n\t\t\t\t\t\t\tchildren,\r\n\t\t\t\t\t\t\tstate\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t{...selectProps}\r\n\t\t\t\t\t/>\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t{isString(iconRight) ? <SelectIcon mr={1} name={iconRight} /> : iconRight}\r\n\r\n\t\t\t\t{itemRight}\r\n\r\n\t\t\t\t{state && <SelectIcon mr={1} {...states[state]?.iconProps} />}\r\n\r\n\t\t\t\t{showCount && (\r\n\t\t\t\t\t<T className=\"vui-selectCount\" color=\"grey.80\" position=\"absolute\" right={0} size=\"sm\" top=\"calc(100% + 1px)\">\r\n\t\t\t\t\t\t{count} / {maxLength}\r\n\t\t\t\t\t</T>\r\n\t\t\t\t)}\r\n\t\t\t</SelectBase>\r\n\t\t</SelectProvider>\r\n\t)\r\n}) as VuiComponent<'div', SelectProps> & {\r\n\tIcon: typeof SelectIcon\r\n\tSelect: typeof SelectSelect\r\n}\r\n\r\nSelect.displayName = 'Select'\r\n\r\nSelect.Icon = SelectIcon\r\nSelect.Select = SelectSelect\r\n\r\nexport default Select\r\n","import {\r\n\tButton,\r\n\tCard,\r\n\tH1,\r\n\tH2,\r\n\tH3,\r\n\tInput,\r\n\tLineButton,\r\n\tLink,\r\n\tP,\r\n\tstyled,\r\n\tth,\r\n\tuseLinks,\r\n\tv,\r\n} from \"@veracity/vui\";\r\nimport * as yup from \"yup\";\r\nimport { Formik } from \"formik\";\r\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { ForgotPasswordDto } from \"../models/auto-generated/ForgotPasswordDto\";\r\nimport { Page } from \"../components/Page\";\r\nimport { showErrorDialogAsync } from \"../showErrorDialogAsync\";\r\nimport { Ids } from \"../components/Ids\";\r\nimport { Label } from \"../components/Label\";\r\nimport { InputHelpText } from \"../components/InputHelpText\";\r\nimport { ReCAPTCHA } from \"../components/ReCAPTCHA\";\r\nimport { VeracityByDNV } from \"../components/VeracityByDNV\";\r\nimport { DNV } from \"../components/DNV\";\r\nimport { PaperAirplane } from \"../components/PaperAirplane\";\r\nimport { delayAsync } from \"../utils/delayAsync\";\r\nimport { fetchVeracityVoid } from \"../services/fetchVeracity\";\r\nimport { getCurrentReturnUrl } from \"../utils/getCurrentReturnUrl\";\r\nimport { useGoogleReCaptcha } from \"react-google-recaptcha-v3\";\r\n\r\nconst SLIDE_WIDTH = 387;\r\n\r\nexport function ForgotPasswordPage() {\r\n\tlet [state, setState] = useState<{\r\n\t\tstep: ForgotPasswordStep;\r\n\t\temailAddress?: string;\r\n\t}>({ step: ForgotPasswordStep.ForgotPassword });\r\n\tlet [links] = useLinks();\r\n\tconst { executeRecaptcha } = useGoogleReCaptcha();\r\n\tconst [token, setToken] = useState(\"\");\r\n\tconst [dynamicAction, setDynamicAction] = useState(\"forgotPassword\");\r\n\r\n\tconst handleReCaptchaVerify = useCallback(async () => {\r\n\t\tif (!executeRecaptcha) {\r\n\t\t\tconsole.log(\"Execute recaptcha not yet available\");\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst token = await executeRecaptcha(dynamicAction);\r\n\t\tsetToken(token);\r\n\t}, [executeRecaptcha]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!executeRecaptcha || !dynamicAction) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst handleReCaptchaVerify = async () => {\r\n\t\t\tconst token = await executeRecaptcha(dynamicAction);\r\n\t\t\tsetToken(token);\r\n\t\t};\r\n\r\n\t\thandleReCaptchaVerify();\r\n\t}, [executeRecaptcha, dynamicAction]);\r\n\r\n\treturn (\r\n\t\t<Page p={1} bg=\"skyBlue.97\" center>\r\n\t\t\t<Card\r\n\t\t\t\tcolumn\r\n\t\t\t\tw={SLIDE_WIDTH}\r\n\t\t\t\toverflow=\"hidden\"\r\n\t\t\t\tborder=\"1px solid grey.40\"\r\n\t\t\t\tuserSelect=\"none\"\r\n\t\t\t>\r\n\t\t\t\t<Slides\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\tleft:\r\n\t\t\t\t\t\t\tstate.step === ForgotPasswordStep.CheckYourEmail\r\n\t\t\t\t\t\t\t\t? -SLIDE_WIDTH + \"px\"\r\n\t\t\t\t\t\t\t\t: \"0\",\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<v.div w={SLIDE_WIDTH} p=\"32px\">\r\n\t\t\t\t\t\t<H3 as=\"h1\">Forgot password</H3>\r\n\t\t\t\t\t\t<P mt={1}>Please type your email to reset password.</P>\r\n\t\t\t\t\t\t<Formik\r\n\t\t\t\t\t\t\tinitialValues={{\r\n\t\t\t\t\t\t\t\temailAddress: \"\",\r\n\t\t\t\t\t\t\t\treCaptchaToken: \"\",\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\tvalidationSchema={forgotPasswordSchema}\r\n\t\t\t\t\t\t\tonSubmit={async (values, { setFieldValue }) => {\r\n\t\t\t\t\t\t\t\tawait handleReCaptchaVerify();\r\n\r\n\t\t\t\t\t\t\t\ttry {\r\n\t\t\t\t\t\t\t\t\tawait fetchVeracityVoid(\r\n\t\t\t\t\t\t\t\t\t\t`/api/users/forgotPassword`,\r\n\t\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\t\tmethod: \"POST\",\r\n\t\t\t\t\t\t\t\t\t\t\tbody: JSON.stringify({\r\n\t\t\t\t\t\t\t\t\t\t\t\tEmail: values.emailAddress,\r\n\t\t\t\t\t\t\t\t\t\t\t\tReturnUrl:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tgetCurrentReturnUrl(),\r\n\t\t\t\t\t\t\t\t\t\t\t\tReCaptchaToken: token,\r\n\t\t\t\t\t\t\t\t\t\t\t} as ForgotPasswordDto),\r\n\t\t\t\t\t\t\t\t\t\t\theaders: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\"Content-Type\":\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"application/json\",\r\n\t\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\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} catch (e) {\r\n\t\t\t\t\t\t\t\t\tawait new Promise<void>((r) =>\r\n\t\t\t\t\t\t\t\t\t\tqueueMicrotask(r)\r\n\t\t\t\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\t\t\t\t\tshowErrorDialogAsync(\r\n\t\t\t\t\t\t\t\t\t\t\"Error when requesting password reset\",\r\n\t\t\t\t\t\t\t\t\t\te\r\n\t\t\t\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\tsetState({\r\n\t\t\t\t\t\t\t\t\tstep: ForgotPasswordStep.CheckYourEmail,\r\n\t\t\t\t\t\t\t\t\temailAddress: values.emailAddress,\r\n\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>\r\n\t\t\t\t\t\t\t{({\r\n\t\t\t\t\t\t\t\tvalues,\r\n\t\t\t\t\t\t\t\terrors,\r\n\t\t\t\t\t\t\t\ttouched,\r\n\t\t\t\t\t\t\t\tisSubmitting,\r\n\t\t\t\t\t\t\t\thandleSubmit,\r\n\t\t\t\t\t\t\t\tgetFieldProps,\r\n\t\t\t\t\t\t\t\tsetFieldValue,\r\n\t\t\t\t\t\t\t}) => {\r\n\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t<form noValidate onSubmit={handleSubmit}>\r\n\t\t\t\t\t\t\t\t\t\t<v.fieldset\r\n\t\t\t\t\t\t\t\t\t\t\tp={0}\r\n\t\t\t\t\t\t\t\t\t\t\tdisabled={\r\n\t\t\t\t\t\t\t\t\t\t\t\tisSubmitting ||\r\n\t\t\t\t\t\t\t\t\t\t\t\tstate.step ===\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tForgotPasswordStep.CheckYourEmail\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<Ids\r\n\t\t\t\t\t\t\t\t\t\t\t\tlength={2}\r\n\t\t\t\t\t\t\t\t\t\t\t\tfn={(ids) => (\r\n\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<Label\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmt={32}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thtmlFor={ids[0]}\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\tEnter your email\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Label>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Input\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"email\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmt={1}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmaxW=\"400px\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[0]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstate={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.emailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.emailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"error\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"success\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\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\tvariant={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.emailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.emailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"red\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"green\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\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\tdisabled={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisSubmitting ||\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstate.step !==\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tForgotPasswordStep.ForgotPassword\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\tinputProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tautoComplete:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"email\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"aria-invalid\":\r\n\t\t\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\t\ttouched.emailAddress &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.emailAddress\r\n\t\t\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\"aria-errormessage\":\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.emailAddress &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.emailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? ids[1]\r\n\t\t\t\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}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{...getFieldProps(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"emailAddress\"\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\t\t\t\t\t\t\t\t\t\t\t\t\t\t{touched.emailAddress &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.emailAddress && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<InputHelpText\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmt={8}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[1]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor=\"hsl(357, 83%, 54%)\"\r\n\t\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\t{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.emailAddress\r\n\t\t\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</InputHelpText>\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</>\r\n\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/>\r\n\t\t\t\t\t\t\t\t\t\t\t<P maxW={400} fontSize={11}>\r\n\t\t\t\t\t\t\t\t\t\t\t\tThis site is protected by\r\n\t\t\t\t\t\t\t\t\t\t\t\treCAPTCHA and the Google{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={11}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\thref=\"https://policies.google.com/privacy\"\r\n\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\tPrivacy Policy\r\n\t\t\t\t\t\t\t\t\t\t\t\t</Link>{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t\tand{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={11}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\thref=\"https://policies.google.com/terms\"\r\n\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\tTerms of Service\r\n\t\t\t\t\t\t\t\t\t\t\t\t</Link>{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t\tapply.\r\n\t\t\t\t\t\t\t\t\t\t\t</P>\r\n\t\t\t\t\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\t\t\t\t\tmt={3}\r\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\r\n\t\t\t\t\t\t\t\t\t\t\t\ticonRight=\"falArrowRight\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={isSubmitting}\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\tContinue\r\n\t\t\t\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t\t\t\t</v.fieldset>\r\n\t\t\t\t\t\t\t\t\t</form>\r\n\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</Formik>\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t\t<v.div\r\n\t\t\t\t\t\tw={SLIDE_WIDTH}\r\n\t\t\t\t\t\tp={4}\r\n\t\t\t\t\t\tdisplay=\"flex\"\r\n\t\t\t\t\t\tflexDirection=\"column\"\r\n\t\t\t\t\t\talignItems=\"center\"\r\n\t\t\t\t\t\tjustifyContent=\"center\"\r\n\t\t\t\t\t\ttextAlign=\"center\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<PaperAirplane width={176.34782608695653} height={78} />\r\n\t\t\t\t\t\t<H3 as=\"h1\" mt={2}>\r\n\t\t\t\t\t\t\tCheck your e-mail\r\n\t\t\t\t\t\t</H3>\r\n\t\t\t\t\t\t<P mt={1} fontWeight=\"bold\" whiteSpace=\"nowrap\">\r\n\t\t\t\t\t\t\t{state.emailAddress}\r\n\t\t\t\t\t\t</P>\r\n\t\t\t\t\t\t<P mt={2}>\r\n\t\t\t\t\t\t\tIf there's an account with that e-mail address, we\r\n\t\t\t\t\t\t\twill send you a confirmation link.\r\n\t\t\t\t\t\t</P>\r\n\t\t\t\t\t\t<LineButton mt={2} as=\"a\" href={links.home}>\r\n\t\t\t\t\t\t\tGo to Veracity\r\n\t\t\t\t\t\t</LineButton>\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t</Slides>\r\n\t\t\t\t<v.footer\r\n\t\t\t\t\tbg=\"hsl(223, 67%, 18%)\"\r\n\t\t\t\t\tp=\"24px 32px 32px\"\r\n\t\t\t\t\tcolor=\"white\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<v.div display=\"flex\" justifyContent=\"space-between\">\r\n\t\t\t\t\t\t<VeracityByDNV />\r\n\t\t\t\t\t\t<DNV />\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t\t<P mt={2} fontSize=\"12px\">\r\n\t\t\t\t\t\tVeracity is DNV's independent data platform and industry\r\n\t\t\t\t\t\teco-system.\r\n\t\t\t\t\t</P>\r\n\t\t\t\t\t<P fontSize=\"12px\">\r\n\t\t\t\t\t\tVisit{\" \"}\r\n\t\t\t\t\t\t<Link fontSize=\"12px\" href={links.home} color=\"blue.40\">\r\n\t\t\t\t\t\t\twww.dnv.com\r\n\t\t\t\t\t\t</Link>{\" \"}\r\n\t\t\t\t\t\tto discover more.\r\n\t\t\t\t\t</P>\r\n\t\t\t\t</v.footer>\r\n\t\t\t</Card>\r\n\t\t</Page>\r\n\t);\r\n}\r\n\r\nconst Slides = styled.divBox`\r\n\tdisplay: flex;\r\n\tposition: relative;\r\n\ttransition: left ${th.animation(\"standard\")} 0.5s;\r\n\twidth: ${SLIDE_WIDTH * 2}px;\r\n`;\r\n\r\nexport const forgotPasswordSchema = yup.object().shape({\r\n\temailAddress: yup.string().required(\"Please enter your e-mail address\"),\r\n});\r\n\r\nenum ForgotPasswordStep {\r\n\tForgotPassword,\r\n\tCheckYourEmail,\r\n}\r\n","import { Button, Card, H1, H2, H3, Icon, Input, LineButton, Link, P, Spinner, styled, T, th, useLinks, v, Notification, NotificationText } from '@veracity/vui';\r\nimport * as yup from \"yup\";\r\nimport { Formik } from 'formik';\r\nimport React, { useEffect, useState } from 'react'\r\n\r\nimport { Page } from '../components/Page';\r\nimport { showErrorDialogAsync } from '../showErrorDialogAsync';\r\nimport { Ids } from '../components/Ids';\r\nimport { Label } from '../components/Label';\r\nimport { InputHelpText } from '../components/InputHelpText';\r\nimport { VeracityByDNV } from '../components/VeracityByDNV';\r\nimport { DNV } from '../components/DNV';\r\nimport { PaperAirplane } from '../components/PaperAirplane';\r\nimport { fetchVeracityVoid, ServerError } from '../services/fetchVeracity';\r\nimport { getCurrentReturnUrl } from '../utils/getCurrentReturnUrl';\r\nimport { identityClient } from '..';\r\nimport { PasswordValidationResult } from '../IdentityClient';\r\nimport { CancellationToken } from '../utils/CancellationToken';\r\nimport { useSearchParams } from 'react-router-dom';\r\nimport { ForgotPasswordService } from '../services/auto-generated/ForgotPasswordService';\r\nimport { ValidatedForgotPasswordRequestDto } from '../models/auto-generated/ValidatedForgotPasswordRequestDto';\r\nimport { delayAsync } from '../utils/delayAsync';\r\nimport { PasswordInput } from '../components/PasswordInput';\r\nimport { PasswordStrengthMeter } from '../components/PasswordStrengthMeter';\r\nimport { ValidationService } from '../services/auto-generated/ValidationService';\r\nimport { getUrlWithLoggedInParameterSet } from '../utils/getUrlWithLoggedInParameterSet';\r\nimport { PasswordEntropyDto } from '../models/auto-generated/PasswordEntropyDto';\r\n\r\nconst SLIDE_WIDTH = 387;\r\n\r\nexport function ResetPasswordPage() {\r\n\r\n\tlet [state, setState] = useState<{ step: ResetPasswordStep; token?: string; validateForgotPasswordRequest?: ValidatedForgotPasswordRequestDto; returnUrl?: string; error?; }>({ step: ResetPasswordStep.FetchingValidatedForgotPasswordRequest });\r\n\r\n\tif (state.step === ResetPasswordStep.Error)\r\n\t\tthrow state.error;\r\n\r\n\tlet [searchParams] = useSearchParams();\r\n\tlet [links] = useLinks();\r\n\r\n\tuseEffect(() => {\r\n\r\n\t\tlet token = searchParams.get(\"token\");\r\n\t\tlet ct = new CancellationToken();\r\n\r\n\t\t(async () => {\r\n\r\n\t\t\ttry {\r\n\r\n\t\t\t\tvar validateForgotPasswordRequest = await ForgotPasswordService.validateRequest(token);\r\n\r\n\t\t\t\tct.throwIfCancellationRequested();\r\n\r\n\t\t\t\tif (IS_DEVELOPMENT)\r\n\t\t\t\t\tconsole.debug(\"validateForgotPasswordRequest\", validateForgotPasswordRequest);\r\n\t\t\t}\r\n\r\n\t\t\tcatch (e) {\r\n\r\n\t\t\t\tif (ct.isCancellationRequested)\r\n\t\t\t\t\treturn;\r\n\r\n\t\t\t\tif (IS_DEVELOPMENT)\r\n\t\t\t\t\tconsole.debug(e);\r\n\r\n\t\t\t\tsetState({\r\n\t\t\t\t\tstep: ResetPasswordStep.Error,\r\n\t\t\t\t\terror: e\r\n\t\t\t\t});\r\n\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tsetState({\r\n\t\t\t\tstep: ResetPasswordStep.FetchedValidatedForgotPasswordRequest,\r\n\t\t\t\ttoken,\r\n\t\t\t\tvalidateForgotPasswordRequest\r\n\t\t\t});\r\n\r\n\t\t})();\r\n\r\n\t\treturn ct.cancel.bind(ct);\r\n\r\n\t}, []);\r\n\r\n\tif (state.step === ResetPasswordStep.FetchingValidatedForgotPasswordRequest)\r\n\t\treturn <Page key=\"FETCHING_VALIDATE_FORGOT_PASSWORD_REQUEST\" center bg=\"skyBlue.97\"><Spinner text=\"Please wait...\" /></Page>;\r\n\r\n\treturn (\r\n\t\t<Page p={1} bg=\"skyBlue.97\" center>\r\n\t\t\t<Card column w={SLIDE_WIDTH} overflow=\"hidden\" border=\"1px solid grey.40\" userSelect=\"none\">\r\n\t\t\t\t<Slides style={{ left: state.step === ResetPasswordStep.YourPasswordHasBeenChanged ? -SLIDE_WIDTH + \"px\" : \"0\" }}>\r\n\t\t\t\t\t<v.div w={SLIDE_WIDTH} p=\"32px\">\r\n\t\t\t\t\t\t<H3 as=\"h1\">Reset password</H3>\r\n\t\t\t\t\t\t<Label mt={4}>Email address</Label>\r\n\t\t\t\t\t\t<T>{state.validateForgotPasswordRequest.Email}</T>\r\n\t\t\t\t\t\t<Formik\r\n\t\t\t\t\t\t\tinitialValues={{ emailAddress: state.validateForgotPasswordRequest.Email, newPassword: \"\", passwordConfirmation: \"\" }}\r\n\t\t\t\t\t\t\tvalidationSchema={resetPasswordSchema}\r\n\t\t\t\t\t\t\tonSubmit={async (values, { setFieldError }) => {\r\n\r\n\t\t\t\t\t\t\t\ttry {\r\n\r\n\t\t\t\t\t\t\t\t\tawait ForgotPasswordService.resetPassword(state.validateForgotPasswordRequest.UserId, state.token, values.newPassword);\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\tcatch (e) {\r\n\r\n\t\t\t\t\t\t\t\t\tif (e instanceof ServerError && e.errorData.subCode === 1010)\r\n\t\t\t\t\t\t\t\t\t\tsetFieldError(\"newPassword\", \"Please enter a more complex password\");\r\n\r\n\t\t\t\t\t\t\t\t\telse showErrorDialogAsync(\"Error when resetting password\", e);\r\n\r\n\t\t\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t// Determine the return url\r\n\r\n\t\t\t\t\t\t\t\tvar returnUrl = getCurrentReturnUrl();\r\n\r\n\t\t\t\t\t\t\t\tif (returnUrl) {\r\n\r\n\t\t\t\t\t\t\t\t\ttry {\r\n\r\n\t\t\t\t\t\t\t\t\t\treturnUrl = (await ValidationService.sanitize({ Url: returnUrl })).Url; // Don't trust what's in the browser url\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\tcatch (e) {\r\n\t\t\t\t\t\t\t\t\t\tconsole.error(e);\r\n\t\t\t\t\t\t\t\t\t\treturnUrl = links.services;\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\tif (!returnUrl)\r\n\t\t\t\t\t\t\t\t\treturnUrl = links.services;\r\n\r\n\t\t\t\t\t\t\t\treturnUrl = getUrlWithLoggedInParameterSet(returnUrl);\r\n\r\n\t\t\t\t\t\t\t\tif (IS_DEVELOPMENT)\r\n\t\t\t\t\t\t\t\t\tconsole.debug(\"returnUrl\", returnUrl);\r\n\r\n\t\t\t\t\t\t\t\tsetState({ step: ResetPasswordStep.YourPasswordHasBeenChanged, validateForgotPasswordRequest: state.validateForgotPasswordRequest, returnUrl });\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{({ values, errors, touched, isSubmitting, handleSubmit, getFieldProps, setFieldValue }) => {\r\n\r\n\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t<form noValidate onSubmit={handleSubmit}>\r\n\t\t\t\t\t\t\t\t\t\t<v.fieldset p={0} disabled={isSubmitting || state.step === ResetPasswordStep.YourPasswordHasBeenChanged}>\r\n\t\t\t\t\t\t\t\t\t\t\t<Ids length={2} fn={ids => (\r\n\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<Label mt={2} htmlFor={ids[0]}>New password</Label>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<PasswordInput id={ids[0]} mt={1} state={touched.newPassword ? (errors.newPassword ? \"error\" : \"success\") : null} variant={touched.newPassword ? (errors.newPassword ? \"red\" : \"green\") : null} inputProps={{ autoComplete: \"new-password\", \"aria-invalid\": !!(touched.newPassword && errors.newPassword), \"aria-errormessage\": touched.newPassword && errors.newPassword ? ids[1] : \"\" }} {...getFieldProps(\"newPassword\")} />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<PasswordStrengthMeter mt={.5} password={values.newPassword} />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{touched.newPassword && errors.newPassword && <InputHelpText id={ids[1]} color=\"red.80\">{errors.newPassword}</InputHelpText>}\r\n\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)} />\r\n\t\t\t\t\t\t\t\t\t\t\t<Ids length={2} fn={ids => (\r\n\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<Label mt={2} htmlFor={ids[0]}>Confirm new password</Label>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<PasswordInput mt={1} id={ids[0]} state={touched.passwordConfirmation ? (errors.passwordConfirmation ? \"error\" : \"success\") : null} variant={touched.passwordConfirmation ? (errors.passwordConfirmation ? \"red\" : \"green\") : null} inputProps={{ autoComplete: \"confirm-password\", \"aria-invalid\": !!(touched.passwordConfirmation && errors.passwordConfirmation), \"aria-errormessage\": touched.passwordConfirmation && errors.passwordConfirmation ? ids[1] : \"\" }} {...getFieldProps(\"passwordConfirmation\")} />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{touched.passwordConfirmation && errors.passwordConfirmation && <InputHelpText id={ids[1]} color=\"red.80\">{errors.passwordConfirmation}</InputHelpText>}\r\n\r\n\r\n\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)} />\r\n\t\t\t\t\t\t\t\t\t\t\t<Notification mt={2} variant=\"subtleBlue\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<NotificationText mx={1.5} my={1.5}>\r\n\t\t\t\t\t\t\t\t\t\t\t\tPlease allow for up to five minutes for changes to take effect\r\n\t\t\t\t\t\t\t\t\t\t\t\t</NotificationText>\r\n\t\t\t\t\t\t\t\t\t\t\t</Notification>\r\n\t\t\t\t\t\t\t\t\t\t\t<Button mt={3} type=\"submit\" iconRight=\"falArrowRight\" isLoading={isSubmitting}>Continue</Button>\r\n\t\t\t\t\t\t\t\t\t\t</v.fieldset>\r\n\t\t\t\t\t\t\t\t\t</form>\r\n\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</Formik>\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t\t<v.div w={SLIDE_WIDTH} p={4} display=\"flex\" flexDirection=\"column\" alignItems=\"center\" justifyContent=\"center\" textAlign=\"center\">\r\n\t\t\t\t\t\t<Icon name=\"falCheckCircle\" color=\"green.80\" scale={3} />\r\n\t\t\t\t\t\t<H3 as=\"h1\" mt={2}>Your password has been changed</H3>\r\n\t\t\t\t\t\t<Notification mt={2} variant=\"subtleBlue\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<NotificationText mx={1.5} my={1.5}>\r\n\t\t\t\t\t\t\t\t\t\t\t\tPlease allow for up to five minutes for changes to take effect\r\n\t\t\t\t\t\t\t\t\t\t\t\t</NotificationText>\r\n\t\t\t\t\t\t\t\t\t\t\t</Notification>\r\n\t\t\t\t\t\t<Button mt={2} as=\"a\" href={state.returnUrl} iconRight=\"falArrowRight\">Continue to sign in</Button>\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t</Slides>\r\n\t\t\t\t<v.footer bg=\"hsl(223, 67%, 18%)\" p=\"24px 32px 32px\" color=\"white\">\r\n\t\t\t\t\t<v.div display=\"flex\" justifyContent=\"space-between\">\r\n\t\t\t\t\t\t<VeracityByDNV />\r\n\t\t\t\t\t\t<DNV />\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t\t<P mt={2} fontSize=\"12px\">Veracity is DNV's independent data platform and industry eco-system.</P>\r\n\t\t\t\t\t<P fontSize=\"12px\">Visit <Link fontSize=\"12px\" href={links.home} color=\"blue.40\">www.dnv.com</Link> to discover more.</P>\r\n\t\t\t\t</v.footer>\r\n\t\t\t</Card>\r\n\t\t</Page>\r\n\t);\r\n}\r\n\r\nconst Slides = styled.divBox`\r\n\tdisplay: flex;\r\n\tposition: relative;\r\n\ttransition: left ${th.animation(\"standard\")} .5s;\r\n\twidth: ${SLIDE_WIDTH * 2}px;\r\n`;\r\n\r\nexport const resetPasswordSchema = yup.object().shape({\r\n\temailAddress: yup.string(),\r\n\tnewPassword: yup.string().test(\"password\", async (value, context) => {\r\n\r\n\t\tlet validatePassword: { result: PasswordValidationResult; entropy?: PasswordEntropyDto; } = await identityClient.validatePasswordAsync(value || \"\", null, null, context.parent.emailAddress);\r\n\r\n\t\tswitch (validatePassword.result) {\r\n\t\t\tcase PasswordValidationResult.Empty:\r\n\t\t\t\treturn context.createError({ message: \"Please enter a password\" as any });\r\n\t\t\t//case PasswordValidationResult.ContainsVeracity:\r\n\t\t\t//\treturn context.createError({ message: \"Please enter a password that does not contain 'Veracity'\" });\r\n\t\t\t//case PasswordValidationResult.ContainsName:\r\n\t\t\t//\treturn context.createError({ message: \"Please enter a password that does not contain your name\" });\r\n\t\t\t//case PasswordValidationResult.ContainsEmailAddress:\r\n\t\t\t//\treturn context.createError({ message: \"Please enter a password that does not contain your e-mail address\" });\r\n\t\t\t//case PasswordValidationResult.ContainsPartOfEmailAddress:\r\n\t\t\t//\treturn context.createError({ message: \"Please enter a password that does not contain part of your e-mail address\" });\r\n\t\t\t//case PasswordValidationResult.RegExpFailed:\r\n\t\t\t//\treturn context.createError({ message: \"Please enter a password that is at least 8 characters long, contains both small and capital letters and at least one digit\" });\r\n\t\t\t//case PasswordValidationResult.ScoreTooLow:\r\n\t\t\t//\tlet message = \"Please enter a more complex password.\";\r\n\t\t\t//\tif (validatePassword.entropy?.Feedback?.Warning)\r\n\t\t\t//\t\tmessage += \" \" + validatePassword.entropy.Feedback.Warning;\r\n\t\t\t//\tif (validatePassword.entropy?.Feedback?.Suggestions?.length)\r\n\t\t\t//\t\tmessage += \" \" + validatePassword.entropy.Feedback.Suggestions.join(\" \");\r\n\t\t\t//\treturn context.createError({ message });\r\n\t\t\tcase PasswordValidationResult.Valid:\r\n\t\t\t\treturn true;\r\n\t\t}\r\n\r\n\t\t//return context.createError({ message: \"Please enter a more complex password\" });\r\n\t\treturn context.createError({ message: <>Password complexity not met. Please see our <Link href=\"https://help-center.veracity.com/en/articles/6883976-what-is-veracity-s-password-policy\" iconRight=\"falExternalLink\" isExternal>password policy</Link> for more information.</> as any });\r\n\t}),\r\n\t// newPassword: yup.string().required(\"Please enter a password\").test(\"password\", \"Please enter a more complex password\", (value, context) => {\r\n\t// \treturn (async () => {\r\n\t// \t\treturn (await identityClient.validatePasswordAsync(value || \"\")).result === PasswordValidationResult.Valid;\r\n\t// \t})();\r\n\t// }),\r\n\tpasswordConfirmation: yup.string().required(\"Please enter a password\").oneOf([yup.ref(\"newPassword\")], \"Passwords do not match\")\r\n});\r\n\r\nenum ResetPasswordStep {\r\n\tFetchingValidatedForgotPasswordRequest,\r\n\tError,\r\n\tFetchedValidatedForgotPasswordRequest,\r\n\tYourPasswordHasBeenChanged\r\n}","import React, { useEffect, useState } from 'react';\r\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core';\r\nimport { inputColors } from '../input/consts';\r\nimport T from '../t';\r\nimport { cs, filterUndefined } from '../utils';\r\nimport { getInitialCount } from './helpers';\r\nconst TextareaTextarea = styled.textareaBox `\n  border-radius: none;\n  border-width: 1px;\n  outline: none;\n  padding: 1;\n  resize: none;\n  transition-duration: fast;\n  width: 100%;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\r\nexport const TextareaBase = styled.divBox `\n  display: flex;\n  min-height: 80px;\n  position: relative;\n  width: 100%;\n`;\r\n/**\r\n * Displays a textarea element wrapped in a div to allow extra content, like counter.\r\n * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.\r\n */\r\nexport const Textarea = vui((props, ref) => {\r\n    const { autoFocus, className, colorScheme: colorSchemeProp, cols, defaultValue, disabled, id, maxLength, name, onBlur, onChange: onChangeProp, onFocus, placeholder, readOnly, required, resize = 'none', rows, showCount, textareaProps = {}, textareaRef, value, ...rest } = omitThemingProps(props);\r\n    const [count, setCount] = useState(getInitialCount(props));\r\n    const [valueInternal, setValueInternal] = useState(defaultValue);\r\n    const styles = useStyleConfig('Textarea', props);\r\n    function onChange(e) {\r\n        setValueInternal(e.target.value);\r\n        setCount(e.target.value.length);\r\n        onChangeProp?.(e);\r\n    }\r\n    const aliasedProps = filterUndefined({\r\n        'aria-disabled': disabled\r\n    });\r\n    const textareaAliasedProps = filterUndefined({\r\n        'aria-disabled': disabled,\r\n        bg: readOnly ? inputColors.disabled : undefined,\r\n        focusWithinBorderColor: !readOnly ? 'transparent' : undefined,\r\n        focusWithinRingColor: readOnly ? 'transparent' : undefined\r\n    });\r\n    useEffect(() => {\r\n        setValueInternal(value);\r\n        setCount(`${value}`?.length ? `${value}`.length : 0);\r\n    }, [value]);\r\n    return (React.createElement(TextareaBase, { className: cs('vui-textarea', className), ref: ref, ...styles.container, ...aliasedProps, ...rest },\r\n        React.createElement(TextareaTextarea, { \"aria-label\": \"input-textarea\", className: \"vui-textareaTextarea\", ref: textareaRef, ...{\r\n                autoFocus,\r\n                cols,\r\n                defaultValue,\r\n                disabled,\r\n                id,\r\n                maxLength,\r\n                name,\r\n                onBlur,\r\n                onChange,\r\n                onFocus,\r\n                placeholder,\r\n                readOnly,\r\n                required,\r\n                resize,\r\n                rows\r\n            }, value: valueInternal, ...styles.textarea, ...textareaAliasedProps, ...textareaProps }),\r\n        showCount && (React.createElement(T, { className: \"vui-textareaCount\", color: maxLength && count > maxLength ? inputColors.error : inputColors.helpText, position: \"absolute\", right: 0, size: \"sm\", top: \"calc(100% + 1px)\" },\r\n            count,\r\n            \" \",\r\n            maxLength ? `/ ${maxLength}` : null))));\r\n});\r\nexport default Textarea;\r\n","import {\r\n\tButton,\r\n\tCard,\r\n\tH1,\r\n\tH2,\r\n\tH3,\r\n\tInput,\r\n\tLineButton,\r\n\tLink,\r\n\tP,\r\n\tstyled,\r\n\tth,\r\n\tuseLinks,\r\n\tv,\r\n} from \"@veracity/vui\";\r\nimport * as yup from \"yup\";\r\nimport { Formik } from \"formik\";\r\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { ForgotPasswordDto } from \"../models/auto-generated/ForgotPasswordDto\";\r\nimport { Page } from \"../components/Page\";\r\nimport { showErrorDialogAsync } from \"../showErrorDialogAsync\";\r\nimport { Ids } from \"../components/Ids\";\r\nimport { Label } from \"../components/Label\";\r\nimport { InputHelpText } from \"../components/InputHelpText\";\r\nimport { ReCAPTCHA } from \"../components/ReCAPTCHA\";\r\nimport { VeracityByDNV } from \"../components/VeracityByDNV\";\r\nimport { DNV } from \"../components/DNV\";\r\nimport { PaperAirplane } from \"../components/PaperAirplane\";\r\nimport { delayAsync } from \"../utils/delayAsync\";\r\nimport { fetchVeracityVoid } from \"../services/fetchVeracity\";\r\nimport { getCurrentReturnUrl } from \"../utils/getCurrentReturnUrl\";\r\nimport { useGoogleReCaptcha } from \"react-google-recaptcha-v3\";\r\n\r\nconst SLIDE_WIDTH = 387;\r\n\r\nexport function LostTotpPage() {\r\n\tlet [state, setState] = useState<{\r\n\t\tstep: ResetTotpSteps;\r\n\t\temailAddress?: string;\r\n\t}>({ step: ResetTotpSteps.ForgotPassword });\r\n\tlet [links] = useLinks();\r\n\tconst { executeRecaptcha } = useGoogleReCaptcha();\r\n\tconst [token, setToken] = useState(\"\");\r\n\tconst [dynamicAction, setDynamicAction] = useState(\"lostTotp\");\r\n\r\n\tconst handleReCaptchaVerify = useCallback(async () => {\r\n\t\tif (!executeRecaptcha) {\r\n\t\t\tconsole.log(\"Execute recaptcha not yet available\");\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst token = await executeRecaptcha(dynamicAction);\r\n\t\tsetToken(token);\r\n\t}, [executeRecaptcha]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!executeRecaptcha || !dynamicAction) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst handleReCaptchaVerify = async () => {\r\n\t\t\tconst token = await executeRecaptcha(dynamicAction);\r\n\t\t\tsetToken(token);\r\n\t\t};\r\n\r\n\t\thandleReCaptchaVerify();\r\n\t}, [executeRecaptcha, dynamicAction]);\r\n\r\n\treturn (\r\n\t\t<Page p={1} bg=\"skyBlue.97\" center>\r\n\t\t\t<Card\r\n\t\t\t\tcolumn\r\n\t\t\t\tw={SLIDE_WIDTH}\r\n\t\t\t\toverflow=\"hidden\"\r\n\t\t\t\tborder=\"1px solid grey.40\"\r\n\t\t\t\tuserSelect=\"none\"\r\n\t\t\t>\r\n\t\t\t\t<Slides\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\tleft:\r\n\t\t\t\t\t\t\tstate.step === ResetTotpSteps.CheckYourEmail\r\n\t\t\t\t\t\t\t\t? -SLIDE_WIDTH + \"px\"\r\n\t\t\t\t\t\t\t\t: \"0\",\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<v.div w={SLIDE_WIDTH} p=\"32px\">\r\n\t\t\t\t\t\t<H3 as=\"h1\">Reset TOTP</H3>\r\n\t\t\t\t\t\t<P mt={1}>Please type your email to reset TOTP.</P>\r\n\t\t\t\t\t\t<Formik\r\n\t\t\t\t\t\t\tinitialValues={{\r\n\t\t\t\t\t\t\t\temailAddress: \"\",\r\n\t\t\t\t\t\t\t\treCaptchaToken: \"\",\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\tvalidationSchema={resetTotpSchema}\r\n\t\t\t\t\t\t\tonSubmit={async (values, { setFieldValue }) => {\r\n\t\t\t\t\t\t\t\tawait handleReCaptchaVerify();\r\n\r\n\t\t\t\t\t\t\t\ttry {\r\n\t\t\t\t\t\t\t\t\tawait fetchVeracityVoid(\r\n\t\t\t\t\t\t\t\t\t\t`/api/users/lostTotp`,\r\n\t\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\t\tmethod: \"POST\",\r\n\t\t\t\t\t\t\t\t\t\t\tbody: JSON.stringify({\r\n\t\t\t\t\t\t\t\t\t\t\t\tEmail: values.emailAddress,\r\n\t\t\t\t\t\t\t\t\t\t\t\tReturnUrl:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tgetCurrentReturnUrl(),\r\n\t\t\t\t\t\t\t\t\t\t\t\tReCaptchaToken: token,\r\n\t\t\t\t\t\t\t\t\t\t\t} as ForgotPasswordDto),\r\n\t\t\t\t\t\t\t\t\t\t\theaders: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\"Content-Type\":\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"application/json\",\r\n\t\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\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} catch (e) {\r\n\t\t\t\t\t\t\t\t\tawait new Promise<void>((r) =>\r\n\t\t\t\t\t\t\t\t\t\tqueueMicrotask(r)\r\n\t\t\t\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\t\t\t\t\tshowErrorDialogAsync(\r\n\t\t\t\t\t\t\t\t\t\t\"Error when requesting TOTP reset\",\r\n\t\t\t\t\t\t\t\t\t\te\r\n\t\t\t\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\tsetState({\r\n\t\t\t\t\t\t\t\t\tstep: ResetTotpSteps.CheckYourEmail,\r\n\t\t\t\t\t\t\t\t\temailAddress: values.emailAddress,\r\n\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>\r\n\t\t\t\t\t\t\t{({\r\n\t\t\t\t\t\t\t\tvalues,\r\n\t\t\t\t\t\t\t\terrors,\r\n\t\t\t\t\t\t\t\ttouched,\r\n\t\t\t\t\t\t\t\tisSubmitting,\r\n\t\t\t\t\t\t\t\thandleSubmit,\r\n\t\t\t\t\t\t\t\tgetFieldProps,\r\n\t\t\t\t\t\t\t\tsetFieldValue,\r\n\t\t\t\t\t\t\t}) => {\r\n\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t<form noValidate onSubmit={handleSubmit}>\r\n\t\t\t\t\t\t\t\t\t\t<v.fieldset\r\n\t\t\t\t\t\t\t\t\t\t\tp={0}\r\n\t\t\t\t\t\t\t\t\t\t\tdisabled={\r\n\t\t\t\t\t\t\t\t\t\t\t\tisSubmitting ||\r\n\t\t\t\t\t\t\t\t\t\t\t\tstate.step ===\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tResetTotpSteps.CheckYourEmail\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<Ids\r\n\t\t\t\t\t\t\t\t\t\t\t\tlength={2}\r\n\t\t\t\t\t\t\t\t\t\t\t\tfn={(ids) => (\r\n\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<Label\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmt={32}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thtmlFor={ids[0]}\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\tEnter your email\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Label>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Input\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"email\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmt={1}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmaxW=\"400px\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[0]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstate={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.emailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.emailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"error\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"success\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\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\tvariant={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.emailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? errors.emailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"red\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"green\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null\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\tdisabled={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisSubmitting ||\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstate.step !==\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tResetTotpSteps.ForgotPassword\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\tinputProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tautoComplete:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"email\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"aria-invalid\":\r\n\t\t\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\t\ttouched.emailAddress &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.emailAddress\r\n\t\t\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\"aria-errormessage\":\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouched.emailAddress &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.emailAddress\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? ids[1]\r\n\t\t\t\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}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{...getFieldProps(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"emailAddress\"\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\t\t\t\t\t\t\t\t\t\t\t\t\t\t{touched.emailAddress &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.emailAddress && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<InputHelpText\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tid={ids[1]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor=\"hsl(357, 83%, 54%)\"\r\n\t\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\t{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\terrors.emailAddress\r\n\t\t\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</InputHelpText>\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</>\r\n\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/>\r\n\t\t\t\t\t\t\t\t\t\t\t<P maxW={400} fontSize={11}>\r\n\t\t\t\t\t\t\t\t\t\t\t\tThis site is protected by\r\n\t\t\t\t\t\t\t\t\t\t\t\treCAPTCHA and the Google{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={11}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\thref=\"https://policies.google.com/privacy\"\r\n\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\tPrivacy Policy\r\n\t\t\t\t\t\t\t\t\t\t\t\t</Link>{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t\tand{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t\t<Link\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={11}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\thref=\"https://policies.google.com/terms\"\r\n\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\tTerms of Service\r\n\t\t\t\t\t\t\t\t\t\t\t\t</Link>{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t\tapply.\r\n\t\t\t\t\t\t\t\t\t\t\t</P>\r\n\t\t\t\t\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\t\t\t\t\tmt={3}\r\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\r\n\t\t\t\t\t\t\t\t\t\t\t\ticonRight=\"falArrowRight\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={isSubmitting}\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\tContinue\r\n\t\t\t\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t\t\t\t</v.fieldset>\r\n\t\t\t\t\t\t\t\t\t</form>\r\n\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</Formik>\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t\t<v.div\r\n\t\t\t\t\t\tw={SLIDE_WIDTH}\r\n\t\t\t\t\t\tp={4}\r\n\t\t\t\t\t\tdisplay=\"flex\"\r\n\t\t\t\t\t\tflexDirection=\"column\"\r\n\t\t\t\t\t\talignItems=\"center\"\r\n\t\t\t\t\t\tjustifyContent=\"center\"\r\n\t\t\t\t\t\ttextAlign=\"center\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<PaperAirplane width={176.34782608695653} height={78} />\r\n\t\t\t\t\t\t<H3 as=\"h1\" mt={2}>\r\n\t\t\t\t\t\t\tCheck your e-mail\r\n\t\t\t\t\t\t</H3>\r\n\t\t\t\t\t\t<P mt={1} fontWeight=\"bold\" whiteSpace=\"nowrap\">\r\n\t\t\t\t\t\t\t{state.emailAddress}\r\n\t\t\t\t\t\t</P>\r\n\t\t\t\t\t\t<P mt={2}>\r\n\t\t\t\t\t\t\tIf there's an account with that e-mail address, we\r\n\t\t\t\t\t\t\twill send you a confirmation link.\r\n\t\t\t\t\t\t</P>\r\n\t\t\t\t\t\t<LineButton mt={2} as=\"a\" href={links.home}>\r\n\t\t\t\t\t\t\tGo to Veracity\r\n\t\t\t\t\t\t</LineButton>\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t</Slides>\r\n\t\t\t\t<v.footer\r\n\t\t\t\t\tbg=\"hsl(223, 67%, 18%)\"\r\n\t\t\t\t\tp=\"24px 32px 32px\"\r\n\t\t\t\t\tcolor=\"white\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<v.div display=\"flex\" justifyContent=\"space-between\">\r\n\t\t\t\t\t\t<VeracityByDNV />\r\n\t\t\t\t\t\t<DNV />\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t\t<P mt={2} fontSize=\"12px\">\r\n\t\t\t\t\t\tVeracity is DNV's independent data platform and industry\r\n\t\t\t\t\t\teco-system.\r\n\t\t\t\t\t</P>\r\n\t\t\t\t\t<P fontSize=\"12px\">\r\n\t\t\t\t\t\tVisit{\" \"}\r\n\t\t\t\t\t\t<Link fontSize=\"12px\" href={links.home} color=\"blue.40\">\r\n\t\t\t\t\t\t\twww.dnv.com\r\n\t\t\t\t\t\t</Link>{\" \"}\r\n\t\t\t\t\t\tto discover more.\r\n\t\t\t\t\t</P>\r\n\t\t\t\t</v.footer>\r\n\t\t\t</Card>\r\n\t\t</Page>\r\n\t);\r\n}\r\n\r\nconst Slides = styled.divBox`\r\n\tdisplay: flex;\r\n\tposition: relative;\r\n\ttransition: left ${th.animation(\"standard\")} 0.5s;\r\n\twidth: ${SLIDE_WIDTH * 2}px;\r\n`;\r\n\r\nexport const resetTotpSchema = yup.object().shape({\r\n\temailAddress: yup.string().required(\"Please enter your e-mail address\"),\r\n});\r\n\r\nenum ResetTotpSteps {\r\n\tForgotPassword,\r\n\tCheckYourEmail,\r\n}\r\n","import {\r\n\tButton,\r\n\tCard,\r\n\tH1,\r\n\tH2,\r\n\tH3,\r\n\tIcon,\r\n\tInput,\r\n\tLineButton,\r\n\tLink,\r\n\tP,\r\n\tSpinner,\r\n\tstyled,\r\n\tT,\r\n\tth,\r\n\tuseLinks,\r\n\tv,\r\n\tNotification,\r\n\tNotificationText,\r\n} from \"@veracity/vui\";\r\nimport * as yup from \"yup\";\r\nimport { Formik } from \"formik\";\r\nimport React, { useEffect, useState } from \"react\";\r\n\r\nimport { Page } from \"../components/Page\";\r\nimport { showErrorDialogAsync } from \"../showErrorDialogAsync\";\r\nimport { Ids } from \"../components/Ids\";\r\nimport { Label } from \"../components/Label\";\r\nimport { InputHelpText } from \"../components/InputHelpText\";\r\nimport { VeracityByDNV } from \"../components/VeracityByDNV\";\r\nimport { DNV } from \"../components/DNV\";\r\nimport { PaperAirplane } from \"../components/PaperAirplane\";\r\nimport { fetchVeracityVoid, ServerError } from \"../services/fetchVeracity\";\r\nimport { getCurrentReturnUrl } from \"../utils/getCurrentReturnUrl\";\r\nimport { identityClient } from \"..\";\r\nimport { PasswordValidationResult } from \"../IdentityClient\";\r\nimport { CancellationToken } from \"../utils/CancellationToken\";\r\nimport { useSearchParams } from \"react-router-dom\";\r\nimport { ForgotPasswordService } from \"../services/auto-generated/ForgotPasswordService\";\r\nimport { ValidatedForgotPasswordRequestDto } from \"../models/auto-generated/ValidatedForgotPasswordRequestDto\";\r\nimport { delayAsync } from \"../utils/delayAsync\";\r\nimport { PasswordInput } from \"../components/PasswordInput\";\r\nimport { PasswordStrengthMeter } from \"../components/PasswordStrengthMeter\";\r\nimport { ValidationService } from \"../services/auto-generated/ValidationService\";\r\nimport { getUrlWithLoggedInParameterSet } from \"../utils/getUrlWithLoggedInParameterSet\";\r\nimport { PasswordEntropyDto } from \"../models/auto-generated/PasswordEntropyDto\";\r\nimport { LostTotpService } from \"../services/auto-generated/LostTotpService\";\r\nimport { ValidatedLostTotpRequestDto } from \"../models/auto-generated/ValidatedLostTotpRequestDto\";\r\n\r\nconst SLIDE_WIDTH = 387;\r\n\r\nexport function ResetTotpPage() {\r\n\tlet [state, setState] = useState<{\r\n\t\tstep: ResetTotpStep;\r\n\t\ttoken?: string;\r\n\t\tvalidateLostTotpRequest?: ValidatedLostTotpRequestDto;\r\n\t\treturnUrl?: string;\r\n\t\terror?;\r\n\t}>({ step: ResetTotpStep.FetchingValidatedLostTotpRequest });\r\n\r\n\tif (state.step === ResetTotpStep.Error) throw state.error;\r\n\r\n\tlet [searchParams] = useSearchParams();\r\n\tlet [links] = useLinks();\r\n\r\n\tuseEffect(() => {\r\n\t\tlet token = searchParams.get(\"token\");\r\n\t\tlet ct = new CancellationToken();\r\n\r\n\t\t(async () => {\r\n\t\t\ttry {\r\n\t\t\t\tvar validateLostTotpRequest =\r\n\t\t\t\t\tawait ForgotPasswordService.validateRequest(token);\r\n\r\n\t\t\t\tct.throwIfCancellationRequested();\r\n\r\n\t\t\t\tif (IS_DEVELOPMENT)\r\n\t\t\t\t\tconsole.debug(\r\n\t\t\t\t\t\t\"validateForgotPasswordRequest\",\r\n\t\t\t\t\t\tvalidateLostTotpRequest\r\n\t\t\t\t\t);\r\n\t\t\t} catch (e) {\r\n\t\t\t\tif (ct.isCancellationRequested) return;\r\n\r\n\t\t\t\tif (IS_DEVELOPMENT) console.debug(e);\r\n\r\n\t\t\t\tsetState({\r\n\t\t\t\t\tstep: ResetTotpStep.Error,\r\n\t\t\t\t\terror: e,\r\n\t\t\t\t});\r\n\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tsetState({\r\n\t\t\t\tstep: ResetTotpStep.FetchedValidatedLostTotpRequest,\r\n\t\t\t\ttoken,\r\n\t\t\t\tvalidateLostTotpRequest,\r\n\t\t\t});\r\n\t\t})();\r\n\r\n\t\treturn ct.cancel.bind(ct);\r\n\t}, []);\r\n\r\n\tif (state.step === ResetTotpStep.FetchingValidatedLostTotpRequest)\r\n\t\treturn (\r\n\t\t\t<Page\r\n\t\t\t\tkey=\"FETCHING_VALIDATE_FORGOT_PASSWORD_REQUEST\"\r\n\t\t\t\tcenter\r\n\t\t\t\tbg=\"skyBlue.97\"\r\n\t\t\t>\r\n\t\t\t\t<Spinner text=\"Please wait...\" />\r\n\t\t\t</Page>\r\n\t\t);\r\n\r\n\treturn (\r\n\t\t<Page p={1} bg=\"skyBlue.97\" center>\r\n\t\t\t<Card\r\n\t\t\t\tcolumn\r\n\t\t\t\tw={SLIDE_WIDTH}\r\n\t\t\t\toverflow=\"hidden\"\r\n\t\t\t\tborder=\"1px solid grey.40\"\r\n\t\t\t\tuserSelect=\"none\"\r\n\t\t\t>\r\n\t\t\t\t<Slides\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\tleft:\r\n\t\t\t\t\t\t\tstate.step === ResetTotpStep.YourTotpHasBeenReset\r\n\t\t\t\t\t\t\t\t? -SLIDE_WIDTH + \"px\"\r\n\t\t\t\t\t\t\t\t: \"0\",\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<v.div w={SLIDE_WIDTH} p=\"32px\">\r\n\t\t\t\t\t\t<H3 as=\"h1\">Reset TOTP</H3>\r\n\t\t\t\t\t\t<Label mt={4}>Email address</Label>\r\n\t\t\t\t\t\t<T>{state.validateLostTotpRequest.Email}</T>\r\n\t\t\t\t\t\t<P>\r\n\t\t\t\t\t\t\tThis action will reset your current TOTP enrollment\r\n\t\t\t\t\t\t\tand set your 2FA method to SMS/Call.\r\n\t\t\t\t\t\t</P>\r\n\t\t\t\t\t\t<Formik\r\n\t\t\t\t\t\t\tinitialValues={{\r\n\t\t\t\t\t\t\t\temailAddress:\r\n\t\t\t\t\t\t\t\t\tstate.validateLostTotpRequest.Email,\r\n\t\t\t\t\t\t\t\tnewPassword: \"\",\r\n\t\t\t\t\t\t\t\tpasswordConfirmation: \"\",\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\tonSubmit={async (values, { setFieldError }) => {\r\n\t\t\t\t\t\t\t\ttry {\r\n\t\t\t\t\t\t\t\t\tawait LostTotpService.resetTotp(\r\n\t\t\t\t\t\t\t\t\t\tstate.validateLostTotpRequest.UserId,\r\n\t\t\t\t\t\t\t\t\t\tstate.token\r\n\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\t\t\t\tshowErrorDialogAsync(\r\n\t\t\t\t\t\t\t\t\t\t\"Error when resetting TOTP\",\r\n\t\t\t\t\t\t\t\t\t\te\r\n\t\t\t\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t// Determine the return url\r\n\r\n\t\t\t\t\t\t\t\tvar returnUrl = getCurrentReturnUrl();\r\n\r\n\t\t\t\t\t\t\t\tif (returnUrl) {\r\n\t\t\t\t\t\t\t\t\ttry {\r\n\t\t\t\t\t\t\t\t\t\treturnUrl = (\r\n\t\t\t\t\t\t\t\t\t\t\tawait ValidationService.sanitize({\r\n\t\t\t\t\t\t\t\t\t\t\t\tUrl: returnUrl,\r\n\t\t\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t\t\t).Url; // Don't trust what's in the browser url\r\n\t\t\t\t\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\t\t\t\t\tconsole.error(e);\r\n\t\t\t\t\t\t\t\t\t\treturnUrl = links.services;\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\tif (!returnUrl) returnUrl = links.services;\r\n\t\t\t\t\t\t\t\tconst loggedInString = \"?loggedin=1\";\r\n\t\t\t\t\t\t\t\tif (returnUrl.endsWith(loggedInString))\r\n\t\t\t\t\t\t\t\t\treturnUrl = returnUrl.slice(\r\n\t\t\t\t\t\t\t\t\t\t0,\r\n\t\t\t\t\t\t\t\t\t\treturnUrl.length - loggedInString.length\r\n\t\t\t\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\t\t\t\treturnUrl =\r\n\t\t\t\t\t\t\t\t\tgetUrlWithLoggedInParameterSet(returnUrl);\r\n\r\n\t\t\t\t\t\t\t\tif (IS_DEVELOPMENT)\r\n\t\t\t\t\t\t\t\t\tconsole.debug(\"returnUrl\", returnUrl);\r\n\r\n\t\t\t\t\t\t\t\tsetState({\r\n\t\t\t\t\t\t\t\t\tstep: ResetTotpStep.YourTotpHasBeenReset,\r\n\t\t\t\t\t\t\t\t\tvalidateLostTotpRequest:\r\n\t\t\t\t\t\t\t\t\t\tstate.validateLostTotpRequest,\r\n\t\t\t\t\t\t\t\t\treturnUrl,\r\n\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>\r\n\t\t\t\t\t\t\t{({\r\n\t\t\t\t\t\t\t\tvalues,\r\n\t\t\t\t\t\t\t\terrors,\r\n\t\t\t\t\t\t\t\ttouched,\r\n\t\t\t\t\t\t\t\tisSubmitting,\r\n\t\t\t\t\t\t\t\thandleSubmit,\r\n\t\t\t\t\t\t\t\tgetFieldProps,\r\n\t\t\t\t\t\t\t\tsetFieldValue,\r\n\t\t\t\t\t\t\t}) => {\r\n\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t<form noValidate onSubmit={handleSubmit}>\r\n\t\t\t\t\t\t\t\t\t\t<v.fieldset\r\n\t\t\t\t\t\t\t\t\t\t\tp={0}\r\n\t\t\t\t\t\t\t\t\t\t\tdisabled={\r\n\t\t\t\t\t\t\t\t\t\t\t\tisSubmitting ||\r\n\t\t\t\t\t\t\t\t\t\t\t\tstate.step ===\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tResetTotpStep.YourTotpHasBeenReset\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<Notification\r\n\t\t\t\t\t\t\t\t\t\t\t\tmt={2}\r\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"subtleBlue\"\r\n\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<NotificationText\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tmx={1.5}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tmy={1.5}\r\n\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\tPlease allow for up to five\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tminutes for changes to take\r\n\t\t\t\t\t\t\t\t\t\t\t\t\teffect\r\n\t\t\t\t\t\t\t\t\t\t\t\t</NotificationText>\r\n\t\t\t\t\t\t\t\t\t\t\t</Notification>\r\n\t\t\t\t\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\t\t\t\t\tmt={3}\r\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\r\n\t\t\t\t\t\t\t\t\t\t\t\ticonRight=\"falArrowRight\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={isSubmitting}\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\tConfirm\r\n\t\t\t\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t\t\t\t</v.fieldset>\r\n\t\t\t\t\t\t\t\t\t</form>\r\n\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</Formik>\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t\t<v.div\r\n\t\t\t\t\t\tw={SLIDE_WIDTH}\r\n\t\t\t\t\t\tp={4}\r\n\t\t\t\t\t\tdisplay=\"flex\"\r\n\t\t\t\t\t\tflexDirection=\"column\"\r\n\t\t\t\t\t\talignItems=\"center\"\r\n\t\t\t\t\t\tjustifyContent=\"center\"\r\n\t\t\t\t\t\ttextAlign=\"center\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<Icon\r\n\t\t\t\t\t\t\tname=\"falCheckCircle\"\r\n\t\t\t\t\t\t\tcolor=\"green.80\"\r\n\t\t\t\t\t\t\tscale={3}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<H3 as=\"h1\" mt={2}>\r\n\t\t\t\t\t\t\tYour TOTP authentication has been reset\r\n\t\t\t\t\t\t</H3>\r\n\t\t\t\t\t\t<Notification mt={2} variant=\"subtleBlue\">\r\n\t\t\t\t\t\t\t<NotificationText mx={1.5} my={1.5}>\r\n\t\t\t\t\t\t\t\tPlease allow for up to five minutes for changes\r\n\t\t\t\t\t\t\t\tto take effect\r\n\t\t\t\t\t\t\t</NotificationText>\r\n\t\t\t\t\t\t</Notification>\r\n\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\tmt={2}\r\n\t\t\t\t\t\t\tas=\"a\"\r\n\t\t\t\t\t\t\thref={state.returnUrl}\r\n\t\t\t\t\t\t\ticonRight=\"falArrowRight\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tContinue to sign in\r\n\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t</Slides>\r\n\t\t\t\t<v.footer bg=\"hsl(223, 67%, 18%)\" p=\"24px 32px 32px\" color=\"white\">\r\n\t\t\t\t\t<v.div display=\"flex\" justifyContent=\"space-between\">\r\n\t\t\t\t\t\t<VeracityByDNV />\r\n\t\t\t\t\t\t<DNV />\r\n\t\t\t\t\t</v.div>\r\n\t\t\t\t\t<P mt={2} fontSize=\"12px\">\r\n\t\t\t\t\t\tVeracity is DNV's independent data platform and industry\r\n\t\t\t\t\t\teco-system.\r\n\t\t\t\t\t</P>\r\n\t\t\t\t\t<P fontSize=\"12px\">\r\n\t\t\t\t\t\tVisit{\" \"}\r\n\t\t\t\t\t\t<Link fontSize=\"12px\" href={links.home} color=\"blue.40\">\r\n\t\t\t\t\t\t\twww.dnv.com\r\n\t\t\t\t\t\t</Link>{\" \"}\r\n\t\t\t\t\t\tto discover more.\r\n\t\t\t\t\t</P>\r\n\t\t\t\t</v.footer>\r\n\t\t\t</Card>\r\n\t\t</Page>\r\n\t);\r\n}\r\n\r\nconst Slides = styled.divBox`\r\n\tdisplay: flex;\r\n\tposition: relative;\r\n\ttransition: left ${th.animation(\"standard\")} 0.5s;\r\n\twidth: ${SLIDE_WIDTH * 2}px;\r\n`;\r\n\r\nenum ResetTotpStep {\r\n\tFetchingValidatedLostTotpRequest,\r\n\tError,\r\n\tFetchedValidatedLostTotpRequest,\r\n\tYourTotpHasBeenReset,\r\n}\r\n","import \"./scss/veracity.scss\";\r\n\r\nimport React, { Component, FC, useEffect, useRef, useState } from \"react\";\r\nimport {\r\n\tBrowserRouter,\r\n\tRoute,\r\n\tRoutes,\r\n\tuseLocation,\r\n\tLocation as ReactRouterDomLocation,\r\n\tNavLink,\r\n\tmatchRoutes,\r\n} from \"react-router-dom\";\r\nimport {\r\n\tcreateGlobalStyle,\r\n\textendTheme,\r\n\tLinksProvider,\r\n\tstyled,\r\n\tth,\r\n\tuseDown,\r\n\tuseLinks,\r\n\tuseLoadLinks,\r\n\tuseUp,\r\n\tv,\r\n\tvui,\r\n\tVuiProvider,\r\n\tLoggedOutHeader,\r\n\tBox,\r\n\tSpinner,\r\n\tNotification,\r\n\tP,\r\n\tFooter,\r\n\tLoggedInHeader,\r\n\tuseHeaderLinks,\r\n\tHeaderAccountData,\r\n\tuseFooterLinks,\r\n\tH1,\r\n\tList,\r\n\tListItemProps,\r\n\tIconProp,\r\n\tHeader,\r\n\tMenu,\r\n\tButtonIcon,\r\n\thexToRGBA,\r\n\tcolors,\r\n} from \"@veracity/vui\";\r\n\r\nimport overrides from \"./custom/overrides\";\r\n\r\nimport { Observer } from \"mobx-react-lite\";\r\nimport { Page } from \"./components/Page\";\r\n\r\nimport { identityClient } from \".\";\r\nimport { SignUpPage } from \"./pages/SignUpPage\";\r\nimport { ModalContainer } from \"./components/ModalContainer\";\r\nimport {\r\n\tOVERVIEW_PATH,\r\n\tCOMPLETE_ENROLLMENT_PATH,\r\n\tCOMPLETE_SIGN_UP_PATH_ALIASES,\r\n\tFORGOT_PASSWORD_PATH,\r\n\tINVITE_PATH,\r\n\tLIMITED_USERS_CHANGE_EMAIL_PATH,\r\n\tLIMITED_USERS_CHANGE_PASSWORD_PATH,\r\n\tLIMITED_USERS_VERIFY_EMAIL_PATH,\r\n\tNOTIFICATIONS_PATH,\r\n\tUSER_PROFILE_PATH,\r\n\tRESET_PASSWORD_PATH,\r\n\tSECURITY_PATH,\r\n\tSIGN_UP_PATH,\r\n\tSIGN_UP_PATH_ALIASES,\r\n\tTERMS_PATH,\r\n\tTERMS_OF_USE_PATH,\r\n\tUPDATE_PASSWORD_PATH,\r\n\tVERIFY_EMAIL_PATH,\r\n\tACTIVITY_PATH,\r\n\tSIGN_OUT_PATH,\r\n\tPREFERENCES_PATH,\r\n\tLOST_TOTP_PATH,\r\n\tRESET_TOTP_PATH,\r\n} from \"./misc/auto-generated/constants\";\r\nimport { observable, remove } from \"mobx\";\r\nimport { CompleteSignupPage } from \"./pages/CompleteSignupPage\";\r\nimport { OverviewPage } from \"./pages/OverviewPage\";\r\nimport {\r\n\tOVERVIEW_ROUTE,\r\n\tUSER_PROFILE_ROUTE,\r\n\tRoute as IdentityRoute,\r\n\tROUTES,\r\n\tSECURITY_ROUTE,\r\n\tTERMS_ROUTE,\r\n} from \"./routes\";\r\nimport { UserProfilePage } from \"./pages/UserProfilePage\";\r\nimport { PreferencesPage } from \"./pages/PreferencesPage\";\r\nimport { TermsPage } from \"./pages/TermsPage\";\r\nimport { SecurityPage } from \"./pages/SecurityPage\";\r\nimport { NotificationsPage } from \"./pages/NotificationsPage\";\r\nimport { VerifyEmailPage } from \"./pages/VerifyEmailPage\";\r\nimport { TermsOfUsePage } from \"./pages/TermsOfUsePage\";\r\nimport { ErrorInfo } from \"./components/ErrorInfo\";\r\nimport { CompleteEnrollmentPage } from \"./pages/CompleteEnrollmentPage\";\r\nimport { UpdatePasswordPage } from \"./pages/UpdatePasswordPage\";\r\nimport { ForgotPasswordPage } from \"./pages/ForgotPasswordPage\";\r\nimport { ResetPasswordPage } from \"./pages/ResetPasswordPage\";\r\nimport { LimitedUsersChangeEmailPage } from \"./pages/LimitedUsersChangeEmailPage\";\r\nimport { LimitedUsersVerifyEmailPage } from \"./pages/LimitedUsersVerifyEmailPage\";\r\nimport { LimitedUsersChangePasswordPage } from \"./pages/LimitedUsersChangePasswordPage\";\r\nimport { InvitePage } from \"./pages/InvitePage\";\r\nimport { getLocationWithLoggedInParameterSet } from \"./utils/getLocationWithLoggedInParameterSet\";\r\nimport { LostTotpPage } from \"./pages/LostTotpPage\";\r\nimport { ResetTotpPage } from \"./pages/ResetTotpPage\";\r\n//import { ActivityPage } from \"./pages/ActivityPage\";\r\n\r\nexport const theme = extendTheme(overrides);\r\n\r\nexport default function App() {\r\n\treturn (\r\n\t\t<VuiProvider theme={theme}>\r\n\t\t\t<Observer>\r\n\t\t\t\t{() => {\r\n\t\t\t\t\tif (identityClient.initializationStatus?.isInitializing)\r\n\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t<Page center>\r\n\t\t\t\t\t\t\t\t<Spinner text=\"Loading Veracity Identity...\" />\r\n\t\t\t\t\t\t\t</Page>\r\n\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\treturn <LoadedApp />;\r\n\t\t\t\t}}\r\n\t\t\t</Observer>\r\n\t\t\t<ModalContainer />\r\n\t\t</VuiProvider>\r\n\t);\r\n}\r\n\r\nfunction LoadedApp() {\r\n\tuseLoadLinks(VUI_ENVIRONMENT, !!identityClient.loggedInUserProfile);\r\n\r\n\treturn (\r\n\t\t<v.div\r\n\t\t\tanimation=\"fadeIn\"\r\n\t\t\tflex=\"1\"\r\n\t\t\tdisplay=\"flex\"\r\n\t\t\tflexDirection=\"column\"\r\n\t\t>\r\n\t\t\t<ErrorBoundary>\r\n\t\t\t\t<BrowserRouter>\r\n\t\t\t\t\t<Routes>\r\n\t\t\t\t\t\t<Route\r\n\t\t\t\t\t\t\tpath={FORGOT_PASSWORD_PATH}\r\n\t\t\t\t\t\t\telement={<ForgotPasswordPage />}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<Route\r\n\t\t\t\t\t\t\tpath={LOST_TOTP_PATH}\r\n\t\t\t\t\t\t\telement={<LostTotpPage />}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<Route\r\n\t\t\t\t\t\t\tpath={RESET_PASSWORD_PATH}\r\n\t\t\t\t\t\t\telement={<ResetPasswordPage />}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<Route\r\n\t\t\t\t\t\t\tpath={RESET_TOTP_PATH}\r\n\t\t\t\t\t\t\telement={<ResetTotpPage />}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<Route\r\n\t\t\t\t\t\t\tpath=\"/limited-users/*\"\r\n\t\t\t\t\t\t\telement={<HeaderAndLimitedUsersPages />}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<Route path=\"*\" element={<HeaderFooterPages />} />\r\n\t\t\t\t\t</Routes>\r\n\t\t\t\t</BrowserRouter>\r\n\t\t\t</ErrorBoundary>\r\n\t\t</v.div>\r\n\t);\r\n}\r\n\r\nfunction IdentityLoggedInHeader() {\r\n\tlet { mainLinks, accountSections = [] } = useHeaderLinks(VUI_ENVIRONMENT);\r\n\tlet [isAdmin, setIsAdmin] = useState(false);\r\n\tlet [withoutUsersAndPermissions, setWithoutUsersAndPermissions] = useState([{\"links\": []}]);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst fetchIsAdmin = async () => {\r\n\t\t\tconst isAdmin = await identityClient.fetchIsAdminAsync();\r\n\t\t\tsetIsAdmin(isAdmin)\r\n\t\t}\r\n\r\n\t\tfetchIsAdmin()\r\n\t}, [])\r\n\r\n\tuseEffect(() => {\r\n\t\tif (accountSections.length > 0 && withoutUsersAndPermissions[0].links.length == 0) {\r\n\t\t\tconst removeUsersAndPermissions = accountSections[0]?.links?.filter((link) => link.id != \"usersAndPermissions\")\r\n\t\t\tif (removeUsersAndPermissions != null) setWithoutUsersAndPermissions([{\"links\": removeUsersAndPermissions}])\t\r\n\t\t}\r\n\t}, [accountSections])\r\n\r\n\treturn (\r\n\t\t<Observer>\r\n\t\t\t{() => {\r\n\t\t\t\tlet accountLinks = isAdmin ? accountSections : withoutUsersAndPermissions\r\n\t\t\t\tlet account = {\r\n\t\t\t\t\tsections: [\r\n\t\t\t\t\t\t...accountLinks,\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tlinks: [\r\n\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\ticon: \"falSignOut\",\r\n\t\t\t\t\t\t\t\t\ttext: \"Sign out\",\r\n\t\t\t\t\t\t\t\t\turl: SIGN_OUT_PATH,\r\n\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},\r\n\t\t\t\t\t],\r\n\t\t\t\t\tuserInfo: {\r\n\t\t\t\t\t\tdisplayName:\r\n\t\t\t\t\t\t\tidentityClient.loggedInUserProfile?.dto.DisplayName,\r\n\t\t\t\t\t\tcompanyName: identityClient.companies?.length\r\n\t\t\t\t\t\t\t? identityClient.companies[0].Name\r\n\t\t\t\t\t\t\t: null,\r\n\t\t\t\t\t},\r\n\t\t\t\t} as HeaderAccountData;\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<LoggedInHeader\r\n\t\t\t\t\t\tmainLinks={mainLinks}\r\n\t\t\t\t\t\tnotifications={{ count: identityClient.messageCount }}\r\n\t\t\t\t\t\tservices={{\r\n\t\t\t\t\t\t\tlinks: identityClient.services\r\n\t\t\t\t\t\t\t\t? identityClient.services.map((s) => ({\r\n\t\t\t\t\t\t\t\t\t\ttext: s.Name,\r\n\t\t\t\t\t\t\t\t\t\turl: s.ServiceUrl,\r\n\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}}\r\n\t\t\t\t\t\taccount={account}\r\n\t\t\t\t\t/>\r\n\t\t\t\t);\r\n\t\t\t}}\r\n\t\t</Observer>\r\n\t);\r\n}\r\n\r\nfunction IdentityLoggedOutHeader() {\r\n\tlet { mainLinks } = useHeaderLinks(VUI_ENVIRONMENT);\r\n\tlet location = useLocation();\r\n\r\n\treturn (\r\n\t\t<LoggedOutHeader\r\n\t\t\tmainLinks={mainLinks}\r\n\t\t\tsignIn={{ url: getLocationWithLoggedInParameterSet(location) }}\r\n\t\t/>\r\n\t);\r\n}\r\n\r\nexport function IdentityFooter() {\r\n\tlet footerLinks = useFooterLinks(VUI_ENVIRONMENT);\r\n\r\n\treturn <Footer {...footerLinks} />;\r\n}\r\n\r\nfunction HeaderFooterPages() {\r\n\tlet isMobile = useDown(\"md\");\r\n\tlet location = useLocation();\r\n\tlet [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);\r\n\tlet routes = matchRoutes(\r\n\t\tROUTES.map((r) => ({ path: r.path, identityRoute: r })),\r\n\t\tlocation\r\n\t);\r\n\r\n\tfunction generateMenuButtonBasedOnMatchingRoute() {\r\n\t\tif (routes?.length) {\r\n\t\t\tlet identityRoute = (\r\n\t\t\t\troutes[0].route as any as { identityRoute: IdentityRoute }\r\n\t\t\t)?.identityRoute;\r\n\t\t\treturn (\r\n\t\t\t\t<Menu.Button\r\n\t\t\t\t\tvariant=\"secondaryDark\"\r\n\t\t\t\t\tcolorScheme=\"prussian\"\r\n\t\t\t\t\tbg=\"white\"\r\n\t\t\t\t\ticonLeft={identityRoute?.iconName}\r\n\t\t\t\t\ticonRight={\r\n\t\t\t\t\t\t<ButtonIcon\r\n\t\t\t\t\t\t\tml=\"auto\"\r\n\t\t\t\t\t\t\tname=\"falAngleDown\"\r\n\t\t\t\t\t\t\tcolor=\"blue.80\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t}\r\n\t\t\t\t\tw=\"100%\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{identityRoute?.title}\r\n\t\t\t\t</Menu.Button>\r\n\t\t\t);\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t<Menu.Button\r\n\t\t\t\tvariant=\"secondaryDark\"\r\n\t\t\t\tcolorScheme=\"prussian\"\r\n\t\t\t\tbg=\"white\"\r\n\t\t\t\ticonRight={\r\n\t\t\t\t\t<ButtonIcon ml=\"auto\" name=\"falAngleDown\" color=\"blue.80\" />\r\n\t\t\t\t}\r\n\t\t\t\tw=\"100%\"\r\n\t\t\t></Menu.Button>\r\n\t\t);\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\twindow.scrollTo(0, 0);\r\n\t}, [location]);\r\n\r\n\tlet headerElement = (\r\n\t\t<Observer>\r\n\t\t\t{() =>\r\n\t\t\t\tidentityClient.loggedInUserProfile ? (\r\n\t\t\t\t\t<IdentityLoggedInHeader />\r\n\t\t\t\t) : (\r\n\t\t\t\t\t<IdentityLoggedOutHeader />\r\n\t\t\t\t)\r\n\t\t\t}\r\n\t\t</Observer>\r\n\t);\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{isMobile ? (\r\n\t\t\t\t<v.div position=\"sticky\" top=\"0\" zIndex=\"2\">\r\n\t\t\t\t\t{headerElement}\r\n\r\n\t\t\t\t\t{/* MOBILE MENU */}\r\n\t\t\t\t\t{!!routes?.length && (\r\n\t\t\t\t\t\t<v.div\r\n\t\t\t\t\t\t\tp={1.75}\r\n\t\t\t\t\t\t\tbg=\"blue.20\"\r\n\t\t\t\t\t\t\tborderBottom=\"1px solid grey.40\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<Menu\r\n\t\t\t\t\t\t\t\tmatchWidth\r\n\t\t\t\t\t\t\t\tonOpen={() => setMobileMenuIsOpen(true)}\r\n\t\t\t\t\t\t\t\tonClose={() => setMobileMenuIsOpen(false)}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{generateMenuButtonBasedOnMatchingRoute()}\r\n\t\t\t\t\t\t\t\t<Menu.List maxH={400}>\r\n\t\t\t\t\t\t\t\t\t{ROUTES.map((r, i) => (\r\n\t\t\t\t\t\t\t\t\t\t<Menu.Item\r\n\t\t\t\t\t\t\t\t\t\t\tkey={i}\r\n\t\t\t\t\t\t\t\t\t\t\tas={NavLink}\r\n\t\t\t\t\t\t\t\t\t\t\tto={r.path}\r\n\t\t\t\t\t\t\t\t\t\t\ticonLeft={r.iconName}\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t{r.title}\r\n\t\t\t\t\t\t\t\t\t\t</Menu.Item>\r\n\t\t\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\t\t</Menu.List>\r\n\t\t\t\t\t\t\t</Menu>\r\n\t\t\t\t\t\t</v.div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</v.div>\r\n\t\t\t) : (\r\n\t\t\t\theaderElement\r\n\t\t\t)}\r\n\t\t\t<v.div\r\n\t\t\t\tflex=\"1\"\r\n\t\t\t\tdisplay=\"flex\"\r\n\t\t\t\tflexDirection=\"column\"\r\n\t\t\t\tposition=\"relative\"\r\n\t\t\t>\r\n\t\t\t\t{isMobile && !!routes?.length && mobileMenuIsOpen && (\r\n\t\t\t\t\t<v.div\r\n\t\t\t\t\t\tposition=\"absolute\"\r\n\t\t\t\t\t\ttop=\"0\"\r\n\t\t\t\t\t\tright=\"0\"\r\n\t\t\t\t\t\tbottom=\"0\"\r\n\t\t\t\t\t\tleft=\"0\"\r\n\t\t\t\t\t\tbg={hexToRGBA(colors.prussian[80], 0.6)}\r\n\t\t\t\t\t\tuserSelect=\"none\"\r\n\t\t\t\t\t\tzIndex=\"1\"\r\n\t\t\t\t\t\tanimation=\"vui-fadeIn 0.3s ease\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t)}\r\n\t\t\t\t<Routes>\r\n\t\t\t\t\t{SIGN_UP_PATH_ALIASES.map((p) => (\r\n\t\t\t\t\t\t<Route key={p} path={p} element={<SignUpPage />} />\r\n\t\t\t\t\t))}\r\n\t\t\t\t\t{COMPLETE_SIGN_UP_PATH_ALIASES.map((p) => (\r\n\t\t\t\t\t\t<Route\r\n\t\t\t\t\t\t\tkey={p}\r\n\t\t\t\t\t\t\tpath={p}\r\n\t\t\t\t\t\t\telement={<CompleteSignupPage />}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t))}\r\n\t\t\t\t\t<Route\r\n\t\t\t\t\t\tpath={COMPLETE_ENROLLMENT_PATH}\r\n\t\t\t\t\t\telement={<CompleteEnrollmentPage />}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Route\r\n\t\t\t\t\t\tpath={UPDATE_PASSWORD_PATH}\r\n\t\t\t\t\t\telement={<UpdatePasswordPage />}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Route\r\n\t\t\t\t\t\tpath={TERMS_OF_USE_PATH}\r\n\t\t\t\t\t\telement={<TermsOfUsePage />}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Route\r\n\t\t\t\t\t\tpath={VERIFY_EMAIL_PATH}\r\n\t\t\t\t\t\telement={<VerifyEmailPage />}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Route path={INVITE_PATH} element={<InvitePage />} />\r\n\t\t\t\t\t<Route\r\n\t\t\t\t\t\tpath=\"*\"\r\n\t\t\t\t\t\telement={\r\n\t\t\t\t\t\t\t<HeaderFooterLoggedInPages\r\n\t\t\t\t\t\t\t\tshowDesktopMenu={!isMobile && !!routes?.length}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</Routes>\r\n\t\t\t\t<IdentityFooter />\r\n\t\t\t</v.div>\r\n\t\t</>\r\n\t);\r\n}\r\n\r\nfunction HeaderFooterLoggedInPages(props: { showDesktopMenu: boolean }) {\r\n\treturn (\r\n\t\t<v.div flex=\"1\" display={props.showDesktopMenu ? \"flex\" : null}>\r\n\t\t\t{/* DESKTOP MENU */}\r\n\t\t\t{props.showDesktopMenu && (\r\n\t\t\t\t<List\r\n\t\t\t\t\tw=\"320px\"\r\n\t\t\t\t\tborderRight=\"1px solid grey.40\"\r\n\t\t\t\t\tsize=\"navItem\"\r\n\t\t\t\t\tisInteractive\r\n\t\t\t\t>\r\n\t\t\t\t\t{ROUTES.map((r, i) => (\r\n\t\t\t\t\t\t<NavItem\r\n\t\t\t\t\t\t\tkey={i}\r\n\t\t\t\t\t\t\tto={r.path}\r\n\t\t\t\t\t\t\ticon={r.iconName}\r\n\t\t\t\t\t\t\ttext={r.title}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</List>\r\n\t\t\t)}\r\n\r\n\t\t\t<v.div\r\n\t\t\t\tflex=\"1\"\r\n\t\t\t\tdisplay=\"flex\"\r\n\t\t\t\tbg=\"hsl(196, 74%, 97%)\"\r\n\t\t\t\tminH={\r\n\t\t\t\t\tprops.showDesktopMenu\r\n\t\t\t\t\t\t? \"calc(100vh - 72px)\"\r\n\t\t\t\t\t\t: `calc(100vh - ${72 + 69}px)`\r\n\t\t\t\t}\r\n\t\t\t>\r\n\t\t\t\t<Routes>\r\n\t\t\t\t\t<Route path={OVERVIEW_PATH} element={<OverviewPage />} />\r\n\t\t\t\t\t<Route\r\n\t\t\t\t\t\tpath={USER_PROFILE_PATH}\r\n\t\t\t\t\t\telement={<UserProfilePage />}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Route\r\n\t\t\t\t\t\tpath={PREFERENCES_PATH}\r\n\t\t\t\t\t\telement={<PreferencesPage />}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<Route path={TERMS_PATH} element={<TermsPage />} />\r\n\t\t\t\t\t<Route path={SECURITY_PATH} element={<SecurityPage />} />\r\n\t\t\t\t\t<Route\r\n\t\t\t\t\t\tpath={NOTIFICATIONS_PATH}\r\n\t\t\t\t\t\telement={<NotificationsPage />}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t{/* <Route path={ACTIVITY_PATH} element={<ActivityPage />} /> */}\r\n\t\t\t\t</Routes>\r\n\t\t\t</v.div>\r\n\t\t</v.div>\r\n\t);\r\n}\r\n\r\nconst NavItemBase = styled(List.Item)`\r\n\tposition: relative;\r\n\r\n\t&:before {\r\n\t\tbackground: ${th.color(\"grey.40\")};\r\n\t\tbottom: 0;\r\n\t\tcontent: \"\";\r\n\t\theight: 1px;\r\n\t\tleft: 0;\r\n\t\tposition: absolute;\r\n\t\tright: 0;\r\n\t}\r\n\r\n\t&:after {\r\n\t\tbackground: transparent;\r\n\t\tbottom: 0;\r\n\t\tcontent: \"\";\r\n\t\tleft: 0;\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\twidth: 6px;\r\n\t}\r\n\r\n\t&.active {\r\n\t\tbackground-color: ${th.color(\"blue.20\")};\r\n\r\n\t\t&:after {\r\n\t\t\tbackground: ${th.color(\"prussian.80\")};\r\n\t\t}\r\n\r\n\t\t&:hover {\r\n\t\t\tbackground-color: ${th.color(\"blue.30\")};\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nfunction NavItem(props: { icon: IconProp; text; to: string }) {\r\n\treturn (\r\n\t\t<NavItemBase\r\n\t\t\tforwardedAs={NavLink}\r\n\t\t\tto={props.to}\r\n\t\t\tpl={4}\r\n\t\t\ticonLeft={<List.Icon mr={2} name={props.icon} />}\r\n\t\t>\r\n\t\t\t{props.text}\r\n\t\t</NavItemBase>\r\n\t);\r\n}\r\n\r\nfunction HeaderAndLimitedUsersPages() {\r\n\tlet location = useLocation();\r\n\r\n\tuseEffect(() => {\r\n\t\twindow.scrollTo(0, 0);\r\n\t}, [location]);\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<Header variant=\"dark\">\r\n\t\t\t\t<Header.Content>\r\n\t\t\t\t\t<Header.Logo />\r\n\t\t\t\t</Header.Content>\r\n\t\t\t</Header>\r\n\t\t\t<Routes>\r\n\t\t\t\t<Route\r\n\t\t\t\t\tpath={LIMITED_USERS_CHANGE_EMAIL_PATH.substring(\r\n\t\t\t\t\t\t\"/limited-users/\".length\r\n\t\t\t\t\t)}\r\n\t\t\t\t\telement={<LimitedUsersChangeEmailPage />}\r\n\t\t\t\t/>\r\n\t\t\t\t<Route\r\n\t\t\t\t\tpath={LIMITED_USERS_VERIFY_EMAIL_PATH.substring(\r\n\t\t\t\t\t\t\"/limited-users/\".length\r\n\t\t\t\t\t)}\r\n\t\t\t\t\telement={<LimitedUsersVerifyEmailPage />}\r\n\t\t\t\t/>\r\n\t\t\t\t<Route\r\n\t\t\t\t\tpath={LIMITED_USERS_CHANGE_PASSWORD_PATH.substring(\r\n\t\t\t\t\t\t\"/limited-users/\".length\r\n\t\t\t\t\t)}\r\n\t\t\t\t\telement={<LimitedUsersChangePasswordPage />}\r\n\t\t\t\t/>\r\n\t\t\t</Routes>\r\n\t\t</>\r\n\t);\r\n}\r\n\r\nclass ErrorBoundary extends Component<{}, { threw: boolean; error? }> {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = { threw: false };\r\n\t}\r\n\r\n\tstatic getDerivedStateFromError(error) {\r\n\t\treturn { threw: true, error };\r\n\t}\r\n\r\n\tcomponentDidCatch(error, errorInfo) {\r\n\t\tif (IS_DEVELOPMENT) console.debug(error, errorInfo);\r\n\t}\r\n\r\n\trender() {\r\n\t\tif (this.state.threw)\r\n\t\t\treturn (\r\n\t\t\t\t<Page>\r\n\t\t\t\t\t<H1 mb={2}>Error</H1>\r\n\t\t\t\t\t<ErrorInfo error={this.state.error} />\r\n\t\t\t\t</Page>\r\n\t\t\t);\r\n\r\n\t\treturn this.props.children;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}