From 622ec4493b6609bb4fc22aec6878c4a15031fd65 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Wed, 22 Nov 2023 10:40:36 +0800
Subject: [PATCH] feat(experience): add lock icon to the single sign-on button
 (#4928)

add lock icon to the single sign-on button
---
 packages/experience/src/assets/icons/lock.svg              | 4 ++++
 .../experience/src/components/Button/index.module.scss     | 7 +++++++
 packages/experience/src/components/Button/index.tsx        | 3 +++
 .../src/pages/SignIn/PasswordSignInForm/index.tsx          | 2 ++
 packages/experience/src/pages/SingleSignOnEmail/index.tsx  | 3 ++-
 5 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 packages/experience/src/assets/icons/lock.svg

diff --git a/packages/experience/src/assets/icons/lock.svg b/packages/experience/src/assets/icons/lock.svg
new file mode 100644
index 000000000..48e6b8a3a
--- /dev/null
+++ b/packages/experience/src/assets/icons/lock.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.5007 10.8332C10.2469 10.8302 9.99841 10.905 9.78852 11.0476C9.57863 11.1901 9.41744 11.3936 9.32666 11.6305C9.23588 11.8674 9.21987 12.1265 9.28077 12.3728C9.34168 12.6191 9.47658 12.8408 9.66732 13.0082V14.1665C9.66732 14.3875 9.75512 14.5995 9.9114 14.7558C10.0677 14.912 10.2796 14.9998 10.5007 14.9998C10.7217 14.9998 10.9336 14.912 11.0899 14.7558C11.2462 14.5995 11.334 14.3875 11.334 14.1665V13.0082C11.5247 12.8408 11.6596 12.6191 11.7205 12.3728C11.7814 12.1265 11.7654 11.8674 11.6746 11.6305C11.5839 11.3936 11.4227 11.1901 11.2128 11.0476C11.0029 10.905 10.7544 10.8302 10.5007 10.8332ZM14.6673 7.49984V5.83317C14.6673 4.7281 14.2283 3.66829 13.4469 2.88689C12.6655 2.10549 11.6057 1.6665 10.5007 1.6665C9.39558 1.6665 8.33577 2.10549 7.55437 2.88689C6.77297 3.66829 6.33398 4.7281 6.33398 5.83317V7.49984C5.67094 7.49984 5.03506 7.76323 4.56622 8.23207C4.09738 8.70091 3.83398 9.3368 3.83398 9.99984V15.8332C3.83398 16.4962 4.09738 17.1321 4.56622 17.6009C5.03506 18.0698 5.67094 18.3332 6.33398 18.3332H14.6673C15.3304 18.3332 15.9662 18.0698 16.4351 17.6009C16.9039 17.1321 17.1673 16.4962 17.1673 15.8332V9.99984C17.1673 9.3368 16.9039 8.70091 16.4351 8.23207C15.9662 7.76323 15.3304 7.49984 14.6673 7.49984ZM8.00065 5.83317C8.00065 5.17013 8.26404 4.53424 8.73288 4.0654C9.20172 3.59656 9.83761 3.33317 10.5007 3.33317C11.1637 3.33317 11.7996 3.59656 12.2684 4.0654C12.7373 4.53424 13.0007 5.17013 13.0007 5.83317V7.49984H8.00065V5.83317ZM15.5007 15.8332C15.5007 16.0542 15.4129 16.2661 15.2566 16.4224C15.1003 16.5787 14.8883 16.6665 14.6673 16.6665H6.33398C6.11297 16.6665 5.90101 16.5787 5.74473 16.4224C5.58845 16.2661 5.50065 16.0542 5.50065 15.8332V9.99984C5.50065 9.77882 5.58845 9.56686 5.74473 9.41058C5.90101 9.2543 6.11297 9.1665 6.33398 9.1665H14.6673C14.8883 9.1665 15.1003 9.2543 15.2566 9.41058C15.4129 9.56686 15.5007 9.77882 15.5007 9.99984V15.8332Z" fill="white" fill-opacity="0.7"/>
+</svg>
diff --git a/packages/experience/src/components/Button/index.module.scss b/packages/experience/src/components/Button/index.module.scss
index 19af7fdac..67993f96c 100644
--- a/packages/experience/src/components/Button/index.module.scss
+++ b/packages/experience/src/components/Button/index.module.scss
@@ -3,6 +3,7 @@
 .button {
   @include _.flex-row;
   justify-content: center;
+  align-items: center;
   height: 44px;
   padding: 0 _.unit(4);
   border-radius: var(--radius);
@@ -14,6 +15,12 @@
   transition: background 0.2s ease-in-out;
   user-select: none;
   overflow: hidden;
+
+  .icon {
+    font-size: 0;
+    line-height: normal;
+    margin-right: _.unit(2);
+  }
 }
 
 .large {
diff --git a/packages/experience/src/components/Button/index.tsx b/packages/experience/src/components/Button/index.tsx
index 927a092ee..d8ff926a3 100644
--- a/packages/experience/src/components/Button/index.tsx
+++ b/packages/experience/src/components/Button/index.tsx
@@ -19,6 +19,7 @@ type BaseProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> &
 
 type Props = BaseProps & {
   title: TFuncKey;
+  icon?: React.ReactNode;
   i18nProps?: Record<string, string>;
 };
 
@@ -30,6 +31,7 @@ const Button = ({
   i18nProps,
   className,
   isDisabled = false,
+  icon,
   onClick,
   ...rest
 }: Props) => {
@@ -47,6 +49,7 @@ const Button = ({
       onClick={onClick}
       {...rest}
     >
+      {icon && <span className={styles.icon}>{icon}</span>}
       <DynamicT forKey={title} interpolation={i18nProps} />
     </button>
   );
diff --git a/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx b/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx
index b09639de7..c1a794121 100644
--- a/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx
+++ b/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import LockIcon from '@/assets/icons/lock.svg';
 import Button from '@/components/Button';
 import ErrorMessage from '@/components/ErrorMessage';
 import { SmartInputField, PasswordInputField } from '@/components/InputFields';
@@ -134,6 +135,7 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
       <Button
         name="submit"
         title={showSingleSignOn ? 'action.single_sign_on' : 'action.sign_in'}
+        icon={showSingleSignOn ? <LockIcon /> : undefined}
         htmlType="submit"
       />
 
diff --git a/packages/experience/src/pages/SingleSignOnEmail/index.tsx b/packages/experience/src/pages/SingleSignOnEmail/index.tsx
index fe354bdd9..5b53f14f3 100644
--- a/packages/experience/src/pages/SingleSignOnEmail/index.tsx
+++ b/packages/experience/src/pages/SingleSignOnEmail/index.tsx
@@ -4,6 +4,7 @@ import { Controller, useForm } from 'react-hook-form';
 
 import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import SingleSignOnContext from '@/Providers/SingleSignOnContextProvider/SingleSignOnContext';
+import LockIcon from '@/assets/icons/lock.svg';
 import Button from '@/components/Button';
 import ErrorMessage from '@/components/ErrorMessage';
 import SmartInputField, {
@@ -81,7 +82,7 @@ const SingleSignOnEmail = () => {
 
         {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
 
-        <Button title="action.single_sign_on" htmlType="submit" />
+        <Button title="action.single_sign_on" htmlType="submit" icon={<LockIcon />} />
 
         <input hidden type="submit" />
       </form>