refactor(ui): refactor signin method link (#669)

refactor signin method link

packages/phrases/src/locales/en.ts

@@ -21,8 +21,9 @@ const translation = {
       confirm_password: 'Confirm password',
     },
     secondary: {
-      sign_in_with: 'Sign in with {{method}}',
-      sign_in_with_2: 'Sign in with {{methods.0}} or {{methods.1}}',
+      sign_in_with: 'Sign in with {{methods, list(type: disjunction;)}}',
+      social_bind_with:
+        'Already have an account? Sign in to bind {{methods, list(type: disjunction;)}} with your social identity.',
     },
     action: {
       sign_in: 'Sign In',

packages/phrases/src/locales/zh-cn.ts

@@ -23,8 +23,9 @@ const translation = {
       confirm_password: '确认密码',
     },
     secondary: {
-      sign_in_with: '通过 {{method}} 登录',
-      sign_in_with_2: '通过 {{ methods.0 }} 或 {{ methods.1 }} 登录',
+      sign_in_with: '通过 {{methods, list(type: disjunction;)}} 登录',
+      social_bind_with:
+        'Already have an account? Sign in to bind {{methods, list(type: disjunction;)}} with your social identity.',
     },
     action: {
       sign_in: '登录',

packages/ui/src/containers/SignInMethodsLink/index.module.scss

@@ -1,6 +1,11 @@
 @use '@/scss/underscore' as _;
 
-.methodsPrimary {
+
+.textLink {
+  text-align: center;
+}
+
+.methodsLinkList {
   @include _.flex-row;
   justify-content: center;
 

packages/ui/src/containers/SignInMethodsLink/index.tsx

@@ -11,8 +11,9 @@ import * as styles from './index.module.scss';
 
 type Props = {
   signInMethods: LocalSignInMethod[];
-  type?: 'primary' | 'secondary';
+  search?: string;
   className?: string;
+  template?: TFuncKey<'translation', 'main_flow.secondary'>;
 };
 
 const SignInMethodsKeyMap: {
@@ -23,7 +24,7 @@ const SignInMethodsKeyMap: {
   sms: 'phone_number',
 };
 
-const SignInMethodsLink = ({ signInMethods, type = 'secondary', className }: Props) => {
+const SignInMethodsLink = ({ signInMethods, template, search, className }: Props) => {
   const navigate = useNavigate();
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
 
@@ -35,40 +36,35 @@ const SignInMethodsLink = ({ signInMethods, type = 'secondary', className }: Pro
           className={styles.signInMethodLink}
           text={`input.${SignInMethodsKeyMap[method]}`}
           onClick={() => {
-            navigate(`/sign-in/${method}`);
+            navigate({
+              pathname: `/sign-in/${method}`,
+              search,
+            });
           }}
         />
       )),
-    [navigate, signInMethods]
+    [navigate, search, signInMethods]
   );
 
   if (signInMethodsLink.length === 0) {
     return null;
   }
 
-  if (type === 'primary') {
-    return <div className={classNames(styles.methodsPrimary, className)}>{signInMethodsLink}</div>;
+  // Without text template
+  if (!template) {
+    return <div className={classNames(styles.methodsLinkList, className)}>{signInMethodsLink}</div>;
   }
 
-  if (signInMethods.length > 1) {
-    const rawText = t('secondary.sign_in_with_2', {
-      methods: signInMethods,
-    });
+  // With text template
+  const rawText = t(`secondary.${template}`, { methods: signInMethods });
+  const textWithLink: ReactNode = signInMethods.reduce<ReactNode>(
+    (content, method, index) =>
+      // @ts-expect-error: reactStringReplace type bug, using deprecated ReactNodeArray as its input type
+      reactStringReplace(content, method, () => signInMethodsLink[index]),
+    rawText
+  );
 
-    const textLink: ReactNode = signInMethods.reduce<ReactNode>(
-      (content, method, index) =>
-        // @ts-expect-error: reactStringReplace type bug, using deprecated ReactNodeArray as its input type
-        reactStringReplace(content, method, () => signInMethodsLink[index]),
-      rawText
-    );
-
-    return <div className={className}>{textLink}</div>;
-  }
-
-  const rawText = t('secondary.sign_in_with', { method: signInMethods[0] });
-  const textLink = reactStringReplace(rawText, signInMethods[0], () => signInMethodsLink[0]);
-
-  return <div className={className}>{textLink}</div>;
+  return <div className={classNames(styles.textLink, className)}>{textWithLink}</div>;
 };
 
 export default SignInMethodsLink;

packages/ui/src/pages/SignIn/registry.tsx

@@ -49,18 +49,14 @@ export const SecondarySection = ({
     return (
       <>
         <Divider label="description.continue_with" className={styles.divider} />
-        <SignInMethodsLink
-          signInMethods={localMethods}
-          type="primary"
-          className={styles.otherMethodsLink}
-        />
+        <SignInMethodsLink signInMethods={localMethods} className={styles.otherMethodsLink} />
       </>
     );
   }
 
   return (
     <>
-      <SignInMethodsLink signInMethods={localMethods} />
+      <SignInMethodsLink signInMethods={localMethods} template="sign_in_with" />
       {secondarySignInMethods.includes('social') && (
         <>
           <Divider label="description.continue_with" className={styles.divider} />