From db9a0547864c8b0e23c0e985535e7430436ef9ae Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Thu, 24 Nov 2022 13:37:18 +0800
Subject: [PATCH] refactor(console): sie details page (#2496)

---
 .../pages/SignInExperience/index.module.scss  | 53 ++++++------
 .../src/pages/SignInExperience/index.tsx      | 82 +++++++++----------
 .../tabs/Branding/BrandingForm.tsx            |  5 +-
 .../tabs/Branding/ColorForm.tsx               |  5 +-
 .../tabs/Others/AuthenticationForm.tsx        |  5 +-
 .../tabs/Others/LanguagesForm.tsx             |  5 +-
 .../tabs/Others/TermsForm.tsx                 |  5 +-
 .../tabs/SignUpAndSignIn/SignInForm.tsx       |  7 +-
 .../tabs/SignUpAndSignIn/SignUpForm.tsx       |  7 +-
 .../tabs/SignUpAndSignIn/SocialSignInForm.tsx |  7 +-
 .../tabs/SignUpAndSignIn/index.module.scss    | 28 -------
 .../SignInExperience/tabs/index.module.scss   | 18 +++-
 12 files changed, 109 insertions(+), 118 deletions(-)
 delete mode 100644 packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/index.module.scss

diff --git a/packages/console/src/pages/SignInExperience/index.module.scss b/packages/console/src/pages/SignInExperience/index.module.scss
index b688c6778..c8ded53b9 100644
--- a/packages/console/src/pages/SignInExperience/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/index.module.scss
@@ -1,38 +1,41 @@
 @use '@/scss/underscore' as _;
 
-.wrapper {
+.container {
   display: flex;
-  align-items: stretch;
-  min-width: 950px;
+  flex-direction: column;
   height: 100%;
 
-  .setup {
+  .tabs {
+    margin: _.unit(4) 0;
+  }
+
+  .content {
     flex: 1;
-    margin-right: _.unit(3);
-    height: 100%;
-    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
 
-    .tabs {
-      padding-top: _.unit(2);
-      margin-top: _.unit(4);
-    }
-
-    .card {
-      padding-bottom: 0;
-      flex: 1;
+    .contentTop {
       display: flex;
-      flex-direction: column;
-    }
-
-    .formWrapper {
       flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
 
-    .form {
-      padding-bottom: _.unit(8);
-      flex: 1;
+      .form {
+        flex: 1;
+        margin: 0 _.unit(3) _.unit(6) 0;
+
+        &.withSubmitActionBar {
+          margin-bottom: _.unit(3);
+        }
+
+        > :not(:first-child) {
+          margin-top: _.unit(3);
+        }
+      }
+
+      .preview {
+        position: sticky;
+        top: _.unit(4);
+        align-self: flex-start;
+      }
     }
   }
 }
diff --git a/packages/console/src/pages/SignInExperience/index.tsx b/packages/console/src/pages/SignInExperience/index.tsx
index ef59ebbfb..8dde66a19 100644
--- a/packages/console/src/pages/SignInExperience/index.tsx
+++ b/packages/console/src/pages/SignInExperience/index.tsx
@@ -1,23 +1,22 @@
 import type { SignInExperience as SignInExperienceType } from '@logto/schemas';
 import classNames from 'classnames';
-import { useEffect, useMemo, useState } from 'react';
+import { nanoid } from 'nanoid';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import useSWR from 'swr';
 
-import Button from '@/components/Button';
-import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
 import ConfirmModal from '@/components/ConfirmModal';
+import SubmitFormChangesActionBar from '@/components/SubmitFormChangesActionBar';
 import TabNav, { TabNavItem } from '@/components/TabNav';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
 import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
 import useSettings from '@/hooks/use-settings';
 import useUiLanguages from '@/hooks/use-ui-languages';
-import * as detailsStyles from '@/scss/details.module.scss';
 
 import Preview from './components/Preview';
 import SignUpAndSignInChangePreview from './components/SignUpAndSignInChangePreview';
@@ -39,6 +38,7 @@ const SignInExperience = () => {
   const { error: languageError, isLoading: isLoadingLanguages } = useUiLanguages();
   const [dataToCompare, setDataToCompare] = useState<SignInExperienceType>();
 
+  const { current: formId } = useRef(nanoid());
   const methods = useForm<SignInExperienceForm>();
   const {
     reset,
@@ -78,7 +78,7 @@ const SignInExperience = () => {
     toast.success(t('general.saved'));
   };
 
-  const onSubmit = handleSubmit(async (formData) => {
+  const onSubmit = handleSubmit(async (formData: SignInExperienceForm) => {
     if (!data || isSubmitting) {
       return;
     }
@@ -119,47 +119,43 @@ const SignInExperience = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
-      <div className={classNames(styles.setup, detailsStyles.container)}>
-        <Card className={styles.card}>
-          <CardTitle title="sign_in_exp.title" subtitle="sign_in_exp.description" />
-          <TabNav className={styles.tabs}>
-            <TabNavItem href="/sign-in-experience/branding">
-              {t('sign_in_exp.tabs.branding')}
-            </TabNavItem>
-            <TabNavItem href="/sign-in-experience/sign-up-and-sign-in">
-              {t('sign_in_exp.tabs.sign_up_and_sign_in')}
-            </TabNavItem>
-            <TabNavItem href="/sign-in-experience/others">
-              {t('sign_in_exp.tabs.others')}
-            </TabNavItem>
-          </TabNav>
-          {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
-          {data && defaultFormData && (
+    <div className={styles.container}>
+      <CardTitle title="sign_in_exp.title" subtitle="sign_in_exp.description" />
+      <TabNav className={styles.tabs}>
+        <TabNavItem href="/sign-in-experience/branding">
+          {t('sign_in_exp.tabs.branding')}
+        </TabNavItem>
+        <TabNavItem href="/sign-in-experience/sign-up-and-sign-in">
+          {t('sign_in_exp.tabs.sign_up_and_sign_in')}
+        </TabNavItem>
+        <TabNavItem href="/sign-in-experience/others">{t('sign_in_exp.tabs.others')}</TabNavItem>
+      </TabNav>
+      {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
+      {data && defaultFormData && (
+        <div className={styles.content}>
+          <div className={styles.contentTop}>
             <FormProvider {...methods}>
-              <form className={styles.formWrapper} onSubmit={onSubmit}>
-                <div className={classNames(detailsStyles.body, styles.form)}>
-                  {tab === 'branding' && <Branding />}
-                  {tab === 'sign-up-and-sign-in' && <SignUpAndSignIn />}
-                  {tab === 'others' && <Others />}
-                </div>
-                <div className={detailsStyles.footer}>
-                  <div className={detailsStyles.footerMain}>
-                    <Button
-                      isLoading={isSubmitting}
-                      type="primary"
-                      size="large"
-                      htmlType="submit"
-                      title="general.save_changes"
-                    />
-                  </div>
-                </div>
+              <form
+                id={formId}
+                className={classNames(styles.form, isDirty && styles.withSubmitActionBar)}
+              >
+                {tab === 'branding' && <Branding />}
+                {tab === 'sign-up-and-sign-in' && <SignUpAndSignIn />}
+                {tab === 'others' && <Others />}
               </form>
             </FormProvider>
-          )}
-        </Card>
-      </div>
-      {formData.id && <Preview signInExperience={previewConfigs} />}
+            {formData.id && (
+              <Preview signInExperience={previewConfigs} className={styles.preview} />
+            )}
+          </div>
+          <SubmitFormChangesActionBar
+            isOpen={isDirty}
+            isSubmitting={isSubmitting}
+            onDiscard={reset}
+            onSubmit={onSubmit}
+          />
+        </div>
+      )}
       {data && (
         <ConfirmModal
           isOpen={Boolean(dataToCompare)}
diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
index c1cc35d78..67bb7bbc2 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
@@ -2,6 +2,7 @@ import { BrandingStyle } from '@logto/schemas';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import Card from '@/components/Card';
 import FormField from '@/components/FormField';
 import RadioGroup, { Radio } from '@/components/RadioGroup';
 import TextInput from '@/components/TextInput';
@@ -24,7 +25,7 @@ const BrandingForm = () => {
   const isSloganRequired = style === BrandingStyle.Logo_Slogan;
 
   return (
-    <>
+    <Card>
       <div className={styles.title}>{t('sign_in_exp.branding.title')}</div>
       <FormField title="sign_in_exp.branding.ui_style">
         <Controller
@@ -74,7 +75,7 @@ const BrandingForm = () => {
           />
         </FormField>
       )}
-    </>
+    </Card>
   );
 };
 
diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/ColorForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Branding/ColorForm.tsx
index 19df17c27..846632736 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/ColorForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/ColorForm.tsx
@@ -4,6 +4,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@/components/Button';
+import Card from '@/components/Card';
 import ColorPicker from '@/components/ColorPicker';
 import FormField from '@/components/FormField';
 import Switch from '@/components/Switch';
@@ -45,7 +46,7 @@ const ColorForm = () => {
   }, [handleResetColor, isDarkModeEnabled, isDirty, primaryColor, setValue]);
 
   return (
-    <>
+    <Card>
       <div className={styles.title}>{t('sign_in_exp.color.title')}</div>
       <FormField title="sign_in_exp.color.primary_color">
         <Controller
@@ -86,7 +87,7 @@ const ColorForm = () => {
           )}
         </>
       )}
-    </>
+    </Card>
   );
 };
 
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/AuthenticationForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/AuthenticationForm.tsx
index a6b260fe2..3aee6352f 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/AuthenticationForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/AuthenticationForm.tsx
@@ -1,6 +1,7 @@
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import Card from '@/components/Card';
 import FormField from '@/components/FormField';
 import Switch from '@/components/Switch';
 
@@ -12,7 +13,7 @@ const AuthenticationForm = () => {
   const { register } = useFormContext<SignInExperienceForm>();
 
   return (
-    <>
+    <Card>
       <div className={styles.title}>{t('sign_in_exp.others.advanced_options.title')}</div>
       <FormField title="sign_in_exp.others.advanced_options.enable_user_registration">
         <Switch
@@ -20,7 +21,7 @@ const AuthenticationForm = () => {
           label={t('sign_in_exp.others.advanced_options.enable_user_registration_description')}
         />
       </FormField>
-    </>
+    </Card>
   );
 };
 
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/LanguagesForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/LanguagesForm.tsx
index 583da98f7..8835f416e 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/LanguagesForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/LanguagesForm.tsx
@@ -5,6 +5,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
+import Card from '@/components/Card';
 import FormField from '@/components/FormField';
 import Select from '@/components/Select';
 import Switch from '@/components/Switch';
@@ -44,7 +45,7 @@ const LanguagesForm = ({ isManageLanguageVisible = false }: Props) => {
   }, [languages, selectedDefaultLanguage, setValue, signInExperience]);
 
   return (
-    <>
+    <Card>
       <div className={styles.title}>{t('sign_in_exp.others.languages.title')}</div>
       <FormField title="sign_in_exp.others.languages.enable_auto_detect">
         <Switch
@@ -69,7 +70,7 @@ const LanguagesForm = ({ isManageLanguageVisible = false }: Props) => {
             : t('sign_in_exp.others.languages.default_language_description_fixed')}
         </div>
       </FormField>
-    </>
+    </Card>
   );
 };
 
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
index c06889444..96212357c 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
@@ -1,6 +1,7 @@
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import Card from '@/components/Card';
 import FormField from '@/components/FormField';
 import Switch from '@/components/Switch';
 import TextInput from '@/components/TextInput';
@@ -19,7 +20,7 @@ const TermsForm = () => {
   const enabled = watch('termsOfUse.enabled');
 
   return (
-    <>
+    <Card>
       <div className={styles.title}>{t('sign_in_exp.others.terms_of_use.title')}</div>
       <FormField title="sign_in_exp.others.terms_of_use.enable">
         <Switch
@@ -44,7 +45,7 @@ const TermsForm = () => {
           />
         </FormField>
       )}
-    </>
+    </Card>
   );
 };
 
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignInForm.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignInForm.tsx
index 3a645161e..25b5a3d6b 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignInForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignInForm.tsx
@@ -1,15 +1,16 @@
 import { useTranslation } from 'react-i18next';
 
+import Card from '@/components/Card';
 import FormField from '@/components/FormField';
 
+import * as styles from '../index.module.scss';
 import SignInMethodEditBox from './components/SignInMethodEditBox';
-import * as styles from './index.module.scss';
 
 const SignInForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
-    <>
+    <Card>
       <div className={styles.title}>{t('sign_in_exp.sign_up_and_sign_in.sign_in.title')}</div>
       <FormField title="sign_in_exp.sign_up_and_sign_in.sign_in.sign_in_identifier_and_auth">
         <div className={styles.formFieldDescription}>
@@ -17,7 +18,7 @@ const SignInForm = () => {
         </div>
         <SignInMethodEditBox />
       </FormField>
-    </>
+    </Card>
   );
 };
 
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx
index 83937f0fd..4802028a3 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx
@@ -3,12 +3,14 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { snakeCase } from 'snake-case';
 
+import Card from '@/components/Card';
 import Checkbox from '@/components/Checkbox';
 import FormField from '@/components/FormField';
 import Select from '@/components/Select';
 import useEnabledConnectorTypes from '@/hooks/use-enabled-connector-types';
 
 import type { SignInExperienceForm } from '../../types';
+import * as styles from '../index.module.scss';
 import ConnectorSetupWarning from './components/ConnectorSetupWarning';
 import {
   getSignInMethodPasswordCheckState,
@@ -20,7 +22,6 @@ import {
   signUpIdentifierToRequiredConnectorMapping,
   signUpToSignInIdentifierMapping,
 } from './constants';
-import * as styles from './index.module.scss';
 
 const SignUpForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -108,7 +109,7 @@ const SignUpForm = () => {
   };
 
   return (
-    <>
+    <Card>
       <div className={styles.title}>{t('sign_in_exp.sign_up_and_sign_in.sign_up.title')}</div>
       <FormField title="sign_in_exp.sign_up_and_sign_in.sign_up.sign_up_identifier">
         <div className={styles.formFieldDescription}>
@@ -203,7 +204,7 @@ const SignUpForm = () => {
           </div>
         </FormField>
       )}
-    </>
+    </Card>
   );
 };
 
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SocialSignInForm.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SocialSignInForm.tsx
index 015f8b347..3e0137cb6 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SocialSignInForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SocialSignInForm.tsx
@@ -1,18 +1,19 @@
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import Card from '@/components/Card';
 import FormField from '@/components/FormField';
 
 import type { SignInExperienceForm } from '../../types';
+import * as styles from '../index.module.scss';
 import SocialConnectorEditBox from './components/SocialConnectorEditBox';
-import * as styles from './index.module.scss';
 
 const SocialSignInForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { control } = useFormContext<SignInExperienceForm>();
 
   return (
-    <>
+    <Card>
       <div className={styles.title}>
         {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.title')}
       </div>
@@ -30,7 +31,7 @@ const SocialSignInForm = () => {
           }}
         />
       </FormField>
-    </>
+    </Card>
   );
 };
 
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/index.module.scss b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/index.module.scss
deleted file mode 100644
index e4c4ba76b..000000000
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/index.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.title {
-  @include _.subhead-cap;
-  color: var(--color-neutral-variant-60);
-  margin-top: _.unit(12);
-
-  &:first-child {
-    margin-top: _.unit(6);
-  }
-}
-
-.formFieldDescription {
-  font: var(--font-body-medium);
-  color: var(--color-text-secondary);
-  margin: _.unit(1) 0 _.unit(2);
-}
-
-.socialOnlyDescription {
-  margin-left: _.unit(1);
-  color: var(--color-text-secondary);
-}
-
-.selections {
-  > :not(:first-child) {
-    margin-top: _.unit(3);
-  }
-}
diff --git a/packages/console/src/pages/SignInExperience/tabs/index.module.scss b/packages/console/src/pages/SignInExperience/tabs/index.module.scss
index c12274bf0..810924c2d 100644
--- a/packages/console/src/pages/SignInExperience/tabs/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/index.module.scss
@@ -3,10 +3,22 @@
 .title {
   @include _.subhead-cap;
   color: var(--color-neutral-variant-60);
-  margin-top: _.unit(12);
+}
 
-  &:first-child {
-    margin-top: _.unit(6);
+.formFieldDescription {
+  font: var(--font-body-medium);
+  color: var(--color-text-secondary);
+  margin: _.unit(1) 0 _.unit(2);
+}
+
+.socialOnlyDescription {
+  margin-left: _.unit(1);
+  color: var(--color-text-secondary);
+}
+
+.selections {
+  > :not(:first-child) {
+    margin-top: _.unit(3);
   }
 }