diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 9ab018761..2ffa9a6a8 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -44,6 +44,9 @@ const translation = { nav_back: 'Back', }, description: { + email: 'email', + phone: 'phone', + phone_number: 'phone number', reminder: 'Reminder', not_found: '404 Not Found', loading: 'Loading...', @@ -54,7 +57,7 @@ const translation = { create_account: 'Create Account', forgot_password: 'Forgot Password?', or: 'or', - enter_passcode: 'The passcode has been sent to {{address}}', + enter_passcode: 'The passcode has been sent to your {{address}}', passcode_sent: 'The passcode has been sent', resend_after_seconds: 'Resend after {{seconds}} seconds', resend_passcode: 'Resend Passcode', diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index 1d45bb3ab..ad7f906a3 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -46,6 +46,9 @@ const translation = { nav_back: '返回', }, description: { + email: '邮箱', + phone: '手机', + phone_number: '手机', reminder: '提示', not_found: '404 页面不存在', loading: '读取中...', @@ -56,7 +59,7 @@ const translation = { create_account: '创建账号', forgot_password: '忘记密码?', or: '或', - enter_passcode: '验证码已经发送至 {{ address }}', + enter_passcode: '验证码已经发送至您的{{ address }}', passcode_sent: '验证码已经发送', resend_after_seconds: '在 {{ seconds }} 秒后重发', resend_passcode: '重发验证码', diff --git a/packages/ui/src/components/AppContent/index.module.scss b/packages/ui/src/components/AppContent/index.module.scss index 859e5e7c3..4dce6b3f1 100644 --- a/packages/ui/src/components/AppContent/index.module.scss +++ b/packages/ui/src/components/AppContent/index.module.scss @@ -33,6 +33,10 @@ main { @include mobile.fonts; @include mobile.layout; + main { + justify-content: normal; + } + .content { flex: 1; align-self: stretch; diff --git a/packages/ui/src/components/ConfirmModal/AcModal.tsx b/packages/ui/src/components/ConfirmModal/AcModal.tsx index 998536fac..2e9e028d3 100644 --- a/packages/ui/src/components/ConfirmModal/AcModal.tsx +++ b/packages/ui/src/components/ConfirmModal/AcModal.tsx @@ -28,12 +28,6 @@ const AcModal = ({ className={classNames(styles.modal, className)} overlayClassName={classNames(modalStyles.overlay, styles.overlay)} appElement={document.querySelector('main') ?? undefined} - onAfterOpen={() => { - document.body.classList.add('static'); - }} - onAfterClose={() => { - document.body.classList.remove('static'); - }} >
diff --git a/packages/ui/src/components/ConfirmModal/MobileModal.tsx b/packages/ui/src/components/ConfirmModal/MobileModal.tsx index 81686d480..5cd5fc5d9 100644 --- a/packages/ui/src/components/ConfirmModal/MobileModal.tsx +++ b/packages/ui/src/components/ConfirmModal/MobileModal.tsx @@ -27,12 +27,6 @@ const MobileModal = ({ className={classNames(styles.modal, className)} overlayClassName={classNames(modalStyles.overlay, styles.overlay)} appElement={document.querySelector('main') ?? undefined} - onAfterOpen={() => { - document.body.classList.add('static'); - }} - onAfterClose={() => { - document.body.classList.remove('static'); - }} >
{children}
diff --git a/packages/ui/src/components/Drawer/index.tsx b/packages/ui/src/components/Drawer/index.tsx index 8df873558..61cf1077a 100644 --- a/packages/ui/src/components/Drawer/index.tsx +++ b/packages/ui/src/components/Drawer/index.tsx @@ -25,12 +25,6 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => { appElement={document.querySelector('main') ?? undefined} closeTimeoutMS={300} onRequestClose={onClose} - onAfterOpen={() => { - document.body.classList.add('static'); - }} - onAfterClose={() => { - document.body.classList.remove('static'); - }} >
diff --git a/packages/ui/src/components/Input/index.module.scss b/packages/ui/src/components/Input/index.module.scss index 631113e63..9f9d8d442 100644 --- a/packages/ui/src/components/Input/index.module.scss +++ b/packages/ui/src/components/Input/index.module.scss @@ -85,6 +85,10 @@ height: 22px; } + &.error { + border: _.border(var(--color-error)); + } + &:focus-within { border-color: var(--color-primary); outline-color: var(--color-focused-variant); diff --git a/packages/ui/src/components/Passcode/index.module.scss b/packages/ui/src/components/Passcode/index.module.scss index 5ef084e30..e48343992 100644 --- a/packages/ui/src/components/Passcode/index.module.scss +++ b/packages/ui/src/components/Passcode/index.module.scss @@ -7,6 +7,8 @@ input { width: 44px; height: 44px; + border-radius: _.unit(2); + border: _.border(); text-align: center; font: var(--font-body); color: var(--color-text); @@ -35,10 +37,6 @@ :global(body.mobile) { .passcode { input { - width: 44px; - height: 44px; - border-radius: _.unit(2); - border: _.border(); background: var(--color-layer); } } @@ -47,9 +45,6 @@ :global(body.desktop) { .passcode { input { - width: 44px; - height: 46px; - border-radius: _.unit(2); border: _.border(var(--color-border)); outline: 3px solid transparent; background: transparent; diff --git a/packages/ui/src/containers/PasswordlessConfirmModal/index.tsx b/packages/ui/src/containers/PasswordlessConfirmModal/index.tsx index 854f57fa0..4701c0e4c 100644 --- a/packages/ui/src/containers/PasswordlessConfirmModal/index.tsx +++ b/packages/ui/src/containers/PasswordlessConfirmModal/index.tsx @@ -20,7 +20,6 @@ const PasswordlessConfirmModal = ({ className, isOpen, type, method, value, onCl const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' }); const sendPasscode = getSendPasscodeApi(type, method); const navigate = useNavigate(); - const methodLocalName = t(`input.${method === 'email' ? 'email' : 'phone_number'}`); const { result, run: asyncSendPasscode } = useApi(sendPasscode); @@ -44,7 +43,7 @@ const PasswordlessConfirmModal = ({ className, isOpen, type, method, value, onCl @@ -52,7 +51,10 @@ const PasswordlessConfirmModal = ({ className, isOpen, type, method, value, onCl type === 'sign-in' ? 'description.create_account_id_exists' : 'description.sign_in_id_does_not_exists', - { type: methodLocalName, value } + { + type: t(`description.${method === 'email' ? 'email' : 'phone_number'}`), + value: `${method === 'sms' ? '+' : ''}${value}`, + } )} ); diff --git a/packages/ui/src/containers/UsernameSignin/index.module.scss b/packages/ui/src/containers/UsernameSignin/index.module.scss index 1092832e6..4c5f6430a 100644 --- a/packages/ui/src/containers/UsernameSignin/index.module.scss +++ b/packages/ui/src/containers/UsernameSignin/index.module.scss @@ -14,4 +14,8 @@ .terms { margin: _.unit(8) 0 _.unit(4); } + + .formErrors { + margin-top: _.unit(-2); + } } diff --git a/packages/ui/src/containers/UsernameSignin/index.tsx b/packages/ui/src/containers/UsernameSignin/index.tsx index 9021809ca..cd98c8bd8 100644 --- a/packages/ui/src/containers/UsernameSignin/index.tsx +++ b/packages/ui/src/containers/UsernameSignin/index.tsx @@ -36,25 +36,27 @@ const UsernameSignin = ({ className }: Props) => { const { termsValidation } = useTerms(); const { fieldValue, - responseErrorMessage, + formErrorMessage, setFieldValue, register, validateForm, - setResponseErrorMessage, + setFormErrorMessage, } = useForm(defaultState); const errorHandlers: ErrorHandlers = useMemo( () => ({ 'session.invalid_credentials': (error) => { - setResponseErrorMessage(error.message); + setFormErrorMessage(error.message); }, }), - [setResponseErrorMessage] + [setFormErrorMessage] ); const { result, run: asyncSignInBasic } = useApi(signInBasic, errorHandlers); const onSubmitHandler = useCallback(async () => { + setFormErrorMessage(undefined); + if (!validateForm()) { return; } @@ -66,7 +68,14 @@ const UsernameSignin = ({ className }: Props) => { const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial); void asyncSignInBasic(fieldValue.username, fieldValue.password, socialToBind); - }, [validateForm, termsValidation, asyncSignInBasic, fieldValue]); + }, [ + setFormErrorMessage, + validateForm, + termsValidation, + asyncSignInBasic, + fieldValue.username, + fieldValue.password, + ]); useEffect(() => { if (result?.redirectTo) { @@ -93,7 +102,9 @@ const UsernameSignin = ({ className }: Props) => { placeholder={t('input.password')} {...register('password', (value) => requiredValidation('password', value))} /> - {responseErrorMessage && {responseErrorMessage}} + {formErrorMessage && ( + {formErrorMessage} + )} diff --git a/packages/ui/src/hooks/use-form.ts b/packages/ui/src/hooks/use-form.ts index fe74bd5b0..941680588 100644 --- a/packages/ui/src/hooks/use-form.ts +++ b/packages/ui/src/hooks/use-form.ts @@ -14,7 +14,7 @@ const useForm = (initialState: T) => { const [fieldValue, setFieldValue] = useState(initialState); const [fieldErrors, setFieldErrors] = useState({}); - const [responseErrorMessage, setResponseErrorMessage] = useState(); + const [formErrorMessage, setFormErrorMessage] = useState(); const fieldValidationsRef = useRef({}); @@ -62,11 +62,11 @@ const useForm = (initialState: T) => { return { fieldValue, fieldErrors, - responseErrorMessage, + formErrorMessage, validateForm, setFieldValue, setFieldErrors, - setResponseErrorMessage, + setFormErrorMessage, register, }; }; diff --git a/packages/ui/src/pages/Passcode/index.tsx b/packages/ui/src/pages/Passcode/index.tsx index 3f75e52d6..83726ff3b 100644 --- a/packages/ui/src/pages/Passcode/index.tsx +++ b/packages/ui/src/pages/Passcode/index.tsx @@ -47,7 +47,11 @@ const Passcode = () => {
{t('action.enter_passcode')}
-
{t('description.enter_passcode', { address: target })}
+
+ {t('description.enter_passcode', { + address: t(`description.${method === 'email' ? 'email' : 'phone'}`), + })} +
diff --git a/packages/ui/src/scss/modal.module.scss b/packages/ui/src/scss/modal.module.scss index 77bef0ae7..8401783ff 100644 --- a/packages/ui/src/scss/modal.module.scss +++ b/packages/ui/src/scss/modal.module.scss @@ -3,3 +3,8 @@ background: var(--color-overlay); inset: 0; } + +/* stylelint-disable-next-line selector-class-pattern */ +:global(.ReactModal__Body--open) { + overflow: hidden; +}