Merge pull request #535 from logto-io/sijie--log-1728-init-exp

feat(console): init sign in exp page

packages/console/src/App.tsx

@@ -18,6 +18,7 @@ import Callback from './pages/Callback';
 import ConnectorDetails from './pages/ConnectorDetails';
 import Connectors from './pages/Connectors';
 import NotFound from './pages/NotFound';
+import SignInExperience from './pages/SignInExperience';
 import UserDetails from './pages/UserDetails';
 import Users from './pages/Users';
 
@@ -64,6 +65,10 @@ const Main = () => {
             <Route index element={<Users />} />
             <Route path=":id" element={<UserDetails />} />
           </Route>
+          <Route path="sign-in-experience">
+            <Route index element={<Navigate to="experience" />} />
+            <Route path=":tab" element={<SignInExperience />} />
+          </Route>
         </Route>
       </Routes>
     </SWRConfig>

packages/console/src/pages/SignInExperience/index.module.scss

@@ -0,0 +1,19 @@
+@use '@/scss/underscore' as _;
+
+.wrapper {
+  display: flex;
+  height: 100%;
+
+  .setup {
+    flex: 1;
+    margin-right: _.unit(3);
+
+    .tabs {
+      padding-top: _.unit(2);
+    }
+  }
+
+  .preview {
+    width: 500px;
+  }
+}

packages/console/src/pages/SignInExperience/index.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import CardTitle from '@/components/CardTitle';
+import TabNav, { TabNavLink } from '@/components/TabNav';
+import * as detailsStyles from '@/scss/details.module.scss';
+
+import * as styles from './index.module.scss';
+
+const SignInExperience = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <div className={styles.wrapper}>
+      <Card className={classNames(detailsStyles.container, styles.setup)}>
+        <CardTitle title="sign_in_exp.title" subtitle="sign_in_exp.description" />
+        <TabNav className={styles.tabs}>
+          <TabNavLink href="/sign-in-experience/experience">
+            {t('sign_in_exp.tabs.experience')}
+          </TabNavLink>
+          <TabNavLink href="/sign-in-experience/methods">
+            {t('sign_in_exp.tabs.methods')}
+          </TabNavLink>
+          <TabNavLink href="/sign-in-experience/others">{t('sign_in_exp.tabs.others')}</TabNavLink>
+        </TabNav>
+        <div>TODO</div>
+        <div className={detailsStyles.footer}>
+          <Button type="primary" title="general.save_changes" />
+        </div>
+      </Card>
+      <Card className={styles.preview}>TODO</Card>
+    </div>
+  );
+};
+
+export default SignInExperience;

packages/phrases/src/locales/en.ts

@@ -7,6 +7,7 @@ const translation = {
     retry: 'Try again',
     done: 'Done',
     search: 'Search',
+    save_changes: 'Save changes',
   },
   main_flow: {
     input: {
@@ -312,6 +313,68 @@ const translation = {
         button: 'Send',
       },
     },
+    sign_in_exp: {
+      title: 'Sign-in Experience',
+      description: 'Customize the sign in experience.',
+      tabs: {
+        experience: 'Experience',
+        methods: 'Sign in methods',
+        others: 'Others',
+      },
+      branding: {
+        title: 'BRANDING',
+        primary_color: 'Primary color',
+        dark_mode: 'Enable dark mode',
+        dark_mode_description:
+          'Enabling this setting will auto generate the dark mode color. You app won’t have dark mode if it’s turned off.',
+        ui_style: 'Define your UI style',
+        app_logo: 'App Logo',
+        text: 'Text',
+        logo_image_url: 'Logo image URL',
+        slogan: 'Slogan',
+        slogan_placeholder: 'Unleash your creativity',
+      },
+      terms_of_use: {
+        title: 'TERMS OF USE',
+        enable: 'Enable Terms of use',
+        description:
+          'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ',
+        terms_of_use: 'Terms of use',
+        terms_of_use_placeholder: 'Terms of use url',
+      },
+      sign_in_methods: {
+        title: 'SIGN IN METHODS',
+        primary: 'Primary sign in method',
+        enable_secondary: 'Enable secondary sign in',
+        enable_secondary_description:
+          "Once it's turned on, you app will support more sign in method(s) besides the primary one. ",
+        methods: {
+          sms: 'Phone number sign in',
+          email: 'Email sign in',
+          social: 'Social sign in',
+          username_password: 'Username-with-password sign in',
+        },
+      },
+      others: {
+        forgot_password: {
+          title: 'FORGOT PASSWORD',
+          enable: 'Enable forgot password',
+          enable_description:
+            'Once it’s turned on, you app will support more sign in method(s) besides the primary one. ',
+        },
+        languages: {
+          title: 'LANGUAGES',
+          mode: 'Language mode',
+          auto: 'Auto',
+          fixed: 'Fixed',
+          fallback: 'Fallback laguanges',
+          languages: {
+            english: 'English',
+            chinese: 'Chinese',
+          },
+        },
+      },
+    },
   },
 };
 

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

@@ -9,6 +9,7 @@ const translation = {
     retry: '重试',
     done: '完成',
     search: '搜索',
+    save_changes: '保存更改',
   },
   main_flow: {
     input: {
@@ -309,6 +310,68 @@ const translation = {
         button: 'Send',
       },
     },
+    sign_in_exp: {
+      title: 'Sign-in Experience',
+      description: 'Customize the sign in experience.',
+      tabs: {
+        experience: 'Experience',
+        methods: 'Sign in methods',
+        others: 'Others',
+      },
+      branding: {
+        title: 'BRANDING',
+        primary_color: 'Primary color',
+        dark_mode: 'Enable dark mode',
+        dark_mode_description:
+          'Enabling this setting will auto generate the dark mode color. You app won’t have dark mode if it’s turned off.',
+        ui_style: 'Define your UI style',
+        app_logo: 'App Logo',
+        text: 'Text',
+        logo_image_url: 'Logo image URL',
+        slogan: 'Slogan',
+        slogan_placeholder: 'Unleash your creativity',
+      },
+      terms_of_use: {
+        title: 'TERMS OF USE',
+        enable: 'Enable Terms of use',
+        description:
+          'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ',
+        terms_of_use: 'Terms of use',
+        terms_of_use_placeholder: 'Terms of use url',
+      },
+      sign_in_methods: {
+        title: 'SIGN IN METHODS',
+        primary: 'Primary sign in method',
+        enable_secondary: 'Enable secondary sign in',
+        enable_secondary_description:
+          "Once it's turned on, you app will support more sign in method(s) besides the primary one. ",
+        methods: {
+          sms: 'Phone number sign in',
+          email: 'Email sign in',
+          social: 'Social sign in',
+          username_password: 'Username-with-password sign in',
+        },
+      },
+      others: {
+        forgot_password: {
+          title: 'FORGOT PASSWORD',
+          enable: 'Enable forgot password',
+          enable_description:
+            'Once it’s turned on, you app will support more sign in method(s) besides the primary one. ',
+        },
+        languages: {
+          title: 'LANGUAGES',
+          mode: 'Language mode',
+          auto: 'Auto',
+          fixed: 'Fixed',
+          fallback: 'Fallback laguanges',
+          languages: {
+            english: 'English',
+            chinese: 'Chinese',
+          },
+        },
+      },
+    },
   },
 };