feat(condo): DOMA-9722 new auth flow (frontend) (#5860)

* fix(condo): DOMA-9722 fixed typography color

fix(condo): DOMA-9722 fixed border-radius

fix(condo): DOMA-9722 fixed styles for FormItem

chore(ui): DOMA-9722 deprecated PhoneInput

fix(ui): DOMA-9722 added CookieAgreement to /auth page

chore(ui): DOMA-9722 updated schema

fix(ui): DOMA-9722 fixed styles for Input.Phone

fix(condo): DOMA-9722 fixed error mapping

fix(condo): DOMA-9722 removed password creating when invite new organization employee

refactor(condo): DOMA-9722 refactored regex

fix(condo): DOMA-9722 fixed link in messages

feat(condo): DOMA-9722 added link to telegram bot

feat(condo): DOMA-9722 added links for resident app

fix(condo): DOMA-9722 fixed after review

fix(condo): DOMA-9722 fixed after review by sonar

fix(condo): DOMA-9722 updated condition

fix(condo): DOMA-9722 fixed styles

feat(condo): DOMA-9722 updated schema

feat(condo): DOMA-9722 removed sms after user registration

feat(condo): DOMA-9722 added redirects if no resident app. Fixed styles

feat(condo): DOMA-9722 added images and translations

feat(condo): DOMA-9722 updated layout with poster

feat(condo): DOMA-9722 added translation

feat(condo): DOMA-9722 added display of QR code. Refactored styles

fix(condo): DOMA-9722 fixed redirects to auth

feat(condo): DOMA-9722 remove credentials from messages

feat(condo): DOMA-9722 added redirects for auth pages

chore(condo): DOMA-9722 removed unused code

fix(condo): DOMA-9722 fixed imports

feat(condo): DOMA-9722 new auth pages

feat(condo): DOMA-9722 show errors in form via useMutationErrorHandler

chore(condo): DOMA-9722 removed todo

feat(condo): DOMA-9722 added errorMapping to AuthenticateOrRegisterUserWithTokenService

feat(condo): DOMA-9722 fixed error mapping for keystone errors (for backward compatibility)

feat(condo): DOMA-9722 add size for Space

refactor(condo): DOMA-9722 added types

fix(condo): DOMA-9722 fixed captcha when it disabled

* fix(condo): DOMA-9722 fixed after rebase

* refactor(condo): DOMA-9722 removed global styles

* fix(condo): DOMA-9722 fixed styles

* fix(condo): DOMA-9722 prevented infinite redirection

* feat(condo): DOMA-9722 added tab indexes

* feat(condo): DOMA-9722 updated pages

* feat(condo): DOMA-9722 added hint for password

* feat(ui): DOMA-9722 added tabIndex for checkbox

* feat(condo): DOMA-9722 fixed error messages

* fix(condo): DOMA-9722 fixed conditions

* fix(condo): DOMA-9722 fixed translations

* feat(condo): DOMA-9722 added button for back to main page from password reset page

* fix(condo): DOMA-9722 fixed gutter

* fix(condo): DOMA-9722 fixed conditions

* feat(condo): DOMA-9722 added a phone formatting

* fix(condo): DOMA-9722 fixed formatPhone

* refactor(condo): DOMA-9722 some refactoring

* feat(condo): DOMA-9722 removed unused translations

* feat(condo): DOMA-9722 updated callcenter

* feat(condo): DOMA-9722 updated UserProfileForm

* refactor(condo): DOMA-9722 refactored UserProfileForm

* fix(condo): DOMA-9722 fixed gutters

* refactor(condo): DOMA-9722 removed old component from UserProfileForm

* feat(condo): DOMA-9722 updated mailing agreement

* fix(condo): DOMA-9722 fixed layout width

* fix(condo): DOMA-9722 fixed message when invite employee to holding

* fix(condo): DOMA-9722 removed prop to show password reset button in profile page

* feat(condo): DOMA-9722 updated message for TOO_MANY_REQUESTS error

* fix(condo): DOMA-9722 fixed page reload

* fix(condo): DOMA-9722 fixed tests

* feat(condo): DOMA-9722 updated header

* feat(condo): DOMA-9722 updated layouts

* feat(condo): DOMA-9722 updated helm and callcenter to main

* feat(condo): DOMA-9722 changed order of tabs

* fix(condo): DOMA-9722 fixed tests

* fix(condo): DOMA-9722 fixed tests

Author: Alllex202

.helm

@@ -391,7 +391,7 @@ describe('ValidateQRCodeService', () => {
                         {
                             code: 'BAD_USER_INPUT',
                             type: 'TOO_MANY_REQUESTS',
-                            message: 'You have to wait {secondsRemaining} seconds to be able to send request again',
+                            message: 'You have to wait {minutesRemaining} min. to be able to send request again',
                         },
                         'result',
                     )

apps/callcenter

@@ -11,4 +11,8 @@ export const FormItem = styled(Form.Item)`
       white-space: nowrap;
     }
   }
+  
+  .ant-form-item-control {
+    gap: 4px 0;
+  }
 `

apps/condo/domains/billing/schema/ValidateQRCodeService.test.js

@@ -7,6 +7,8 @@ import React, { createContext, FC, useCallback, useContext, useMemo, useRef } fr
 import { useIntl } from '@open-condo/next/intl'
 import { Button } from '@open-condo/ui'
 
+import { makeId } from '@condo/domains/common/utils/makeid.utils'
+
 
 type IHCaptchaContext = {
     executeCaptcha: () => Promise<string>
@@ -30,7 +32,7 @@ const HCaptchaProvider: FC = ({ children }) => {
 
     const executeCaptcha: IHCaptchaContext['executeCaptcha'] = useCallback(async () => {
         // NOTE: We cannot not send anything when the captcha is turned off, since the captcha field is required
-        if (!hCaptchaConfig || !siteKey || disableCaptcha) return 'condo-captcha-disabled'
+        if (!hCaptchaConfig || !siteKey || disableCaptcha) return makeId(48)
         if (!ref.current) return
 
         ref.current.resetCaptcha()

apps/condo/domains/common/components/Form/FormItem.ts

@@ -1,42 +1,44 @@
-import { Tabs } from 'antd'
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useCallback, useMemo } from 'react'
 
 import { useIntl } from '@open-condo/next/intl'
+import { Tabs } from '@open-condo/ui'
 
 import { isSafeUrl } from '@condo/domains/common/utils/url.utils'
-import { RemoveTabsLineWrapper } from '@condo/domains/user/components/containers/styles'
 
-interface ITabsActionsProps {
+
+type TabsAuthActionsProps = {
     currentActiveKey: string
 }
 
-export const TabsAuthAction: React.FC<ITabsActionsProps> = (props) => {
+export const TabsAuthAction: React.FC<TabsAuthActionsProps> = (props) => {
     const { currentActiveKey } = props
     const intl = useIntl()
-    const registerTab = intl.formatMessage({ id: 'pages.auth.RegistrationTitle' })
-    const signInTab = intl.formatMessage({ id: 'pages.auth.SignInTitle' })
+    const registerTab = intl.formatMessage({ id: 'pages.auth.register.step.inputPhone.title' })
+    const signInTab = intl.formatMessage({ id: 'pages.auth.signin.title' })
 
     const router = useRouter()
     const { query: { next }  } = router
     const isValidNextUrl = next && !Array.isArray(next) && isSafeUrl(next)
 
+    const handleChange = useCallback((activeKey: string): void => {
+        if (activeKey === 'signin') {
+            router.push(isValidNextUrl ? `/auth/signin?next=${encodeURIComponent(next)}` : '/auth/signin')
+        } else if (activeKey === 'register') {
+            router.push(isValidNextUrl ? `/auth/register?next=${encodeURIComponent(next)}` : '/auth/register')
+        }
+    }, [isValidNextUrl, next])
+
+    const tabItems = useMemo(() => [
+        { key: 'signin', label: signInTab },
+        { key: 'register', label: registerTab },
+    ], [registerTab, signInTab])
+
     return (
-        <RemoveTabsLineWrapper>
-            <Tabs
-                defaultActiveKey={currentActiveKey}
-                onChange={(activeKey) => {
-                    if (activeKey === 'signin') {
-                        router.push(isValidNextUrl ? `/auth/signin?next=${encodeURIComponent(next)}` : '/auth/signin')
-                    } else if (activeKey === 'register') {
-                        router.push(isValidNextUrl ? `/auth/register?step=inputPhone&next=${encodeURIComponent(next)}` : '/auth/register')
-                    }}}
-                centered
-                animated={false}
-            >
-                <Tabs.TabPane key='register' tab={registerTab}/>
-                <Tabs.TabPane key='signin' tab={signInTab}/>
-            </Tabs>
-        </RemoveTabsLineWrapper>
+        <Tabs
+            items={tabItems}
+            defaultActiveKey={currentActiveKey}
+            onChange={handleChange}
+        />
     )
 }

apps/condo/domains/common/components/HCaptcha.tsx

@@ -6,13 +6,23 @@ import { useIntl } from '@open-condo/next/intl'
 import { Button } from '@open-condo/ui'
 import { colors } from '@open-condo/ui/dist/colors'
 
-import { useCheckTLSClientCert } from '../hooks/useCheckTLSClientCert'
+import { useCheckTLSClientCert } from '@condo/domains/common/hooks/useCheckTLSClientCert'
 
-export const LoginWithSBBOLButton: React.FC<{ label?: string, block?: boolean, redirect?: string, checkTlsCert: boolean }> = ({
+
+type LoginWithSBBOLButtonProps = {
+    label?: string
+    block?: boolean
+    redirect?: string
+    checkTlsCert: boolean
+    tabIndex?: number
+}
+
+export const LoginWithSBBOLButton: React.FC<LoginWithSBBOLButtonProps> = ({
     label,
     block,
     redirect,
     checkTlsCert = true,
+    tabIndex,
 }) => {
     const intl = useIntl()
     const LoginLabel = intl.formatMessage({ id: 'LoginBySBBOL' })
@@ -42,6 +52,8 @@ export const LoginWithSBBOLButton: React.FC<{ label?: string, block?: boolean, r
             onClick={() => checkTlsCert ? checkSSLClientCert() : redirectToAuth()}
             loading={loading}
             block={block}
+            id='loginWithSBBOL'
+            tabIndex={tabIndex}
         >
             {label || LoginLabel}
         </Button>

apps/condo/domains/common/components/HeaderActions.tsx

@@ -65,6 +65,9 @@ const getPhoneInputStyles = (style, size: SizeType, block?: boolean) => {
 
 const BUTTON_INPUT_PHONE_STYLE: React.CSSProperties = { margin: 5, backgroundColor: colors.backgroundWhiteSecondary, border: 0, borderRadius: 8 }
 
+/**
+ * @deprecated use Input.Phone from Condo UI Kit
+ */
 export const PhoneInput: React.FC<IPhoneInputProps> = forwardRef((props, ref) => {
     const { value, placeholder, style, disabled, block, showCountryPrefix = true, country, ...otherProps } = props
     const configSize = useContext<SizeType>(ConfigProvider.SizeContext)

apps/condo/domains/common/components/LoginWithSBBOLButton.tsx

@@ -66,7 +66,7 @@ export const Header: React.FC<IHeaderProps> = (props) => {
         if (isAuthenticated) {
             router.push('/')
         } else {
-            router.push('/auth/signin')
+            router.push('/auth')
         }
     }, [isAuthenticated, router])
 

apps/condo/domains/common/components/PhoneInput.tsx

@@ -4,52 +4,10 @@ import { Layout } from 'antd'
 
 import { colors, MAX_CONTENT_WIDTH } from '@condo/domains/common/constants/style'
 
-const { red } = require('@ant-design/colors')
 
 export const SIDE_MENU_WIDTH = 256
 export const COLLAPSED_SIDE_MENU_WIDTH = 92
 
-// Ant inputs
-export const FROM_INPUT_CSS = css`
-  body {
-    height: 100%
-  }
-
-  .ant-input-affix-wrapper:focus,
-  .ant-input-affix-wrapper-focused,
-  .ant-form-item-has-error .ant-input-affix-wrapper:focus,
-  .ant-form-item-has-error .ant-input-affix-wrapper-focused {
-    background-color: ${colors.white};
-  }
-
-  .ant-input-affix-wrapper > input.ant-input,
-  .ant-form-item-has-error .ant-input-affix-wrapper > input.ant-input {
-    -webkit-box-shadow: inset 0 0 0 50px ${colors.ultraLightGrey};
-    -webkit-text-fill-color: ${colors.black};
-  }
-
-  .ant-form-item-has-error .ant-input-affix-wrapper > input.ant-input:focus,
-  .ant-input-affix-wrapper > input.ant-input:focus {
-    -webkit-box-shadow: inset 0 0 0 50px ${colors.white};
-    -webkit-text-fill-color: ${colors.black};
-    background-color: ${colors.white};
-  }
-
-  .ant-form-item-has-error .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
-    border-color: ${red[5]};
-  }
-
-  .ant-form-item-has-error .ant-input-affix-wrapper-focused:hover,
-  .ant-form-item-has-error .ant-input-affix-wrapper:focus:hover {
-    border-color: ${red[5]};
-    background-color: ${colors.white};
-  }
-
-  .ant-input:focus:hover, .ant-input:active:hover {
-    background-color: ${colors.white};
-  }
-`
-
 export const MobileSideNavHeader = styled.div`
   display: flex;
   flex-direction: row;