From db1b6d247a3d07f81ff1284b1fdbd3e7ffcc97aa Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Tue, 7 Jun 2022 16:50:24 +0800
Subject: [PATCH] fix(ui): fix some of the bug bash issues (#1053)

* fix(ui): clear error message when passcode resend

clear error message when passcode resend;

* fix(ui): directly throw account not exist in social bind flow

directly throw account not exsit in social bind flow

* fix(ui): fix toast and loading light border

fix toast and loading light border

* fix(ui): add auto focus to input

add auto focus to input

* style(ui): adjust font & button size

adjust font & button size

* fix(ui): cr fix

cr fix
---
 .../components/AppContent/index.module.scss   |  2 ++
 .../src/components/Button/index.module.scss   |  5 +++--
 .../ui/src/components/Input/PhoneInput.tsx    |  1 +
 .../components/LoadingLayer/index.module.scss |  2 +-
 packages/ui/src/components/Passcode/index.tsx |  2 +-
 .../ui/src/components/Toast/index.module.scss |  2 +-
 .../ui/src/containers/CreateAccount/index.tsx |  4 +---
 .../containers/PasscodeValidation/index.tsx   |  2 ++
 .../Passwordless/EmailPasswordless.tsx        | 21 +++++++++++++++----
 .../Passwordless/PhonePasswordless.tsx        | 20 ++++++++++++++----
 .../src/containers/UsernameSignin/index.tsx   |  1 +
 packages/ui/src/scss/_desktop.scss            |  1 +
 packages/ui/src/scss/_mobile.scss             |  1 +
 13 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/components/AppContent/index.module.scss b/packages/ui/src/components/AppContent/index.module.scss
index 749944aa2..1edf8eeef 100644
--- a/packages/ui/src/components/AppContent/index.module.scss
+++ b/packages/ui/src/components/AppContent/index.module.scss
@@ -19,6 +19,8 @@
 
 body {
   background-color: var(--color-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
 }
 
 .container {
diff --git a/packages/ui/src/components/Button/index.module.scss b/packages/ui/src/components/Button/index.module.scss
index e1cc5ae53..ad8e3bd06 100644
--- a/packages/ui/src/components/Button/index.module.scss
+++ b/packages/ui/src/components/Button/index.module.scss
@@ -3,7 +3,8 @@
 .button {
   @include _.flex-row;
   justify-content: center;
-  padding: _.unit(3);
+  height: 44px;
+  padding: 0 _.unit(3);
   border-radius: var(--radius);
   font: var(--font-body-bold);
   cursor: pointer;
@@ -18,7 +19,7 @@
 }
 
 .small {
-  min-width: 44px;
+  min-width: 50px;
 }
 
 .primary {
diff --git a/packages/ui/src/components/Input/PhoneInput.tsx b/packages/ui/src/components/Input/PhoneInput.tsx
index 2e21c8a93..8ca480437 100644
--- a/packages/ui/src/components/Input/PhoneInput.tsx
+++ b/packages/ui/src/components/Input/PhoneInput.tsx
@@ -74,6 +74,7 @@ const PhoneInput = ({
         {countrySelector}
         <input
           ref={inputReference}
+          autoFocus
           name={name}
           placeholder={placeholder}
           value={nationalNumber}
diff --git a/packages/ui/src/components/LoadingLayer/index.module.scss b/packages/ui/src/components/LoadingLayer/index.module.scss
index 0e72505be..fda3dcf2c 100644
--- a/packages/ui/src/components/LoadingLayer/index.module.scss
+++ b/packages/ui/src/components/LoadingLayer/index.module.scss
@@ -35,6 +35,6 @@
 
 :global(body.desktop) {
   .container {
-    border: _.border(var(--color-divider));
+    border: _.border(var(--color-toast-border));
   }
 }
diff --git a/packages/ui/src/components/Passcode/index.tsx b/packages/ui/src/components/Passcode/index.tsx
index c95b30c5f..52ec7756c 100644
--- a/packages/ui/src/components/Passcode/index.tsx
+++ b/packages/ui/src/components/Passcode/index.tsx
@@ -191,7 +191,7 @@ const Passcode = ({ name, className, value, length = defaultLength, error, onCha
             name={`${name}_${index}`}
             data-id={index}
             value={codes[index]}
-            type="text"
+            type="text" // Number type allows 'e' as input but returns empty value
             inputMode="numeric"
             maxLength={2} // Allow overwrite input
             autoComplete="off"
diff --git a/packages/ui/src/components/Toast/index.module.scss b/packages/ui/src/components/Toast/index.module.scss
index c0656d26d..4e9369423 100644
--- a/packages/ui/src/components/Toast/index.module.scss
+++ b/packages/ui/src/components/Toast/index.module.scss
@@ -32,7 +32,7 @@
 
 :global(body.desktop) {
   .toast {
-    border: _.border(var(--color-divider));
+    border: _.border(var(--color-toast-border));
     padding: _.unit(3) _.unit(4);
   }
 }
diff --git a/packages/ui/src/containers/CreateAccount/index.tsx b/packages/ui/src/containers/CreateAccount/index.tsx
index 5ba1f87fe..915cf5e94 100644
--- a/packages/ui/src/containers/CreateAccount/index.tsx
+++ b/packages/ui/src/containers/CreateAccount/index.tsx
@@ -79,9 +79,9 @@ const CreateAccount = ({ className }: Props) => {
   return (
     <form className={classNames(styles.form, className)}>
       <Input
+        autoFocus
         className={styles.inputField}
         name="username"
-        autoComplete="username"
         placeholder={t('input.username')}
         {...fieldRegister('username', usernameValidation)}
         onClear={() => {
@@ -92,7 +92,6 @@ const CreateAccount = ({ className }: Props) => {
         className={styles.inputField}
         name="password"
         type="password"
-        autoComplete="current-password"
         placeholder={t('input.password')}
         {...fieldRegister('password', passwordValidation)}
         onClear={() => {
@@ -103,7 +102,6 @@ const CreateAccount = ({ className }: Props) => {
         className={styles.inputField}
         name="confirm_password"
         type="password"
-        autoComplete="current-password"
         placeholder={t('input.confirm_password')}
         {...fieldRegister('confirmPassword', (confirmPassword) =>
           confirmPasswordValidation(fieldValue.password, confirmPassword)
diff --git a/packages/ui/src/containers/PasscodeValidation/index.tsx b/packages/ui/src/containers/PasscodeValidation/index.tsx
index 600ca933e..f8330b797 100644
--- a/packages/ui/src/containers/PasscodeValidation/index.tsx
+++ b/packages/ui/src/containers/PasscodeValidation/index.tsx
@@ -64,6 +64,8 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
   const { run: sendPassCode } = useApi(getSendPasscodeApi(type, method));
 
   const resendPasscodeHandler = useCallback(async () => {
+    setError(undefined);
+
     const result = await sendPassCode(target);
 
     if (result) {
diff --git a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
index 3a6f66f95..667906d5d 100644
--- a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
+++ b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useState, useMemo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -9,8 +9,10 @@ import Input from '@/components/Input';
 import TermsOfUse from '@/containers/TermsOfUse';
 import useApi, { ErrorHandlers } from '@/hooks/use-api';
 import useForm from '@/hooks/use-form';
+import { PageContext } from '@/hooks/use-page-context';
 import useTerms from '@/hooks/use-terms';
-import { UserFlow } from '@/types';
+import { UserFlow, SearchParameters } from '@/types';
+import { getSearchParameters } from '@/utils';
 import { emailValidation } from '@/utils/field-validations';
 
 import PasswordlessConfirmModal from './PasswordlessConfirmModal';
@@ -28,6 +30,7 @@ type FieldState = {
 const defaultState: FieldState = { email: '' };
 
 const EmailPasswordless = ({ type, className }: Props) => {
+  const { setToast } = useContext(PageContext);
   const [showPasswordlessConfirmModal, setShowPasswordlessConfirmModal] = useState(false);
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
   const navigate = useNavigate();
@@ -37,7 +40,16 @@ const EmailPasswordless = ({ type, className }: Props) => {
 
   const errorHandlers: ErrorHandlers = useMemo(
     () => ({
-      'user.email_not_exists': () => {
+      'user.email_not_exists': (error) => {
+        const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial);
+
+        // Directly display the  error if user is trying to bind with social
+        if (socialToBind) {
+          setToast(error.message);
+
+          return;
+        }
+
         setShowPasswordlessConfirmModal(true);
       },
       'user.email_exists_register': () => {
@@ -47,7 +59,7 @@ const EmailPasswordless = ({ type, className }: Props) => {
         setFieldErrors({ email: 'invalid_email' });
       },
     }),
-    [setFieldErrors]
+    [setFieldErrors, setToast]
   );
 
   const sendPasscode = getSendPasscodeApi(type, 'email');
@@ -85,6 +97,7 @@ const EmailPasswordless = ({ type, className }: Props) => {
     <>
       <form className={classNames(styles.form, className)}>
         <Input
+          autoFocus
           className={styles.inputField}
           name="email"
           autoComplete="email"
diff --git a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
index f28175049..0a2b8b4d8 100644
--- a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
+++ b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useState, useMemo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -9,9 +9,11 @@ import { PhoneInput } from '@/components/Input';
 import TermsOfUse from '@/containers/TermsOfUse';
 import useApi, { ErrorHandlers } from '@/hooks/use-api';
 import useForm from '@/hooks/use-form';
+import { PageContext } from '@/hooks/use-page-context';
 import usePhoneNumber, { countryList } from '@/hooks/use-phone-number';
 import useTerms from '@/hooks/use-terms';
-import { UserFlow } from '@/types';
+import { UserFlow, SearchParameters } from '@/types';
+import { getSearchParameters } from '@/utils';
 
 import PasswordlessConfirmModal from './PasswordlessConfirmModal';
 import * as styles from './index.module.scss';
@@ -28,6 +30,7 @@ type FieldState = {
 const defaultState: FieldState = { phone: '' };
 
 const PhonePasswordless = ({ type, className }: Props) => {
+  const { setToast } = useContext(PageContext);
   const [showPasswordlessConfirmModal, setShowPasswordlessConfirmModal] = useState(false);
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
   const { phoneNumber, setPhoneNumber, isValidPhoneNumber } = usePhoneNumber();
@@ -38,7 +41,16 @@ const PhonePasswordless = ({ type, className }: Props) => {
 
   const errorHandlers: ErrorHandlers = useMemo(
     () => ({
-      'user.phone_not_exists': () => {
+      'user.phone_not_exists': (error) => {
+        const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial);
+
+        // Directly display the  error if user is trying to bind with social
+        if (socialToBind) {
+          setToast(error.message);
+
+          return;
+        }
+
         setShowPasswordlessConfirmModal(true);
       },
       'user.phone_exists_register': () => {
@@ -48,7 +60,7 @@ const PhonePasswordless = ({ type, className }: Props) => {
         setFieldErrors({ phone: 'invalid_phone' });
       },
     }),
-    [setFieldErrors]
+    [setFieldErrors, setToast]
   );
 
   const sendPasscode = getSendPasscodeApi(type, 'sms');
diff --git a/packages/ui/src/containers/UsernameSignin/index.tsx b/packages/ui/src/containers/UsernameSignin/index.tsx
index 536e09b96..847d8bd57 100644
--- a/packages/ui/src/containers/UsernameSignin/index.tsx
+++ b/packages/ui/src/containers/UsernameSignin/index.tsx
@@ -85,6 +85,7 @@ const UsernameSignin = ({ className }: Props) => {
   return (
     <form className={classNames(styles.form, className)}>
       <Input
+        autoFocus
         className={styles.inputField}
         name="username"
         autoComplete="username"
diff --git a/packages/ui/src/scss/_desktop.scss b/packages/ui/src/scss/_desktop.scss
index b941bb4dc..eac35584c 100644
--- a/packages/ui/src/scss/_desktop.scss
+++ b/packages/ui/src/scss/_desktop.scss
@@ -72,6 +72,7 @@ $font-family: -apple-system,
 @mixin colors-universal {
   --color-primary-button-text: #fff;
   --color-toast: #34353f;
+  --color-toast-border: #444748;
   --color-overlay: rgba(0, 0, 0, 30%);
   // shadows
   --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
diff --git a/packages/ui/src/scss/_mobile.scss b/packages/ui/src/scss/_mobile.scss
index 9426902d4..9e5f110d0 100644
--- a/packages/ui/src/scss/_mobile.scss
+++ b/packages/ui/src/scss/_mobile.scss
@@ -47,6 +47,7 @@ $font-family: -apple-system,
 @mixin colors-universal {
   --color-primary-button-text: #fff;
   --color-toast: #34353f;
+  --color-toast-border: #444748;
   --color-overlay: rgba(0, 0, 0, 30%);
   // shadows
   --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);