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;
+}