feat(console): sign in experience welcome page (#746)

packages/console/src/pages/SignInExperience/components/Welcome.module.scss

@@ -0,0 +1,20 @@
+@use '@/scss/underscore' as _;
+
+.welcome {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: _.unit(4);
+
+    > *:not(:last-child) {
+      margin-bottom: _.unit(5);
+    }
+  }
+}

packages/console/src/pages/SignInExperience/components/Welcome.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import WelcomeImage from '@/assets/images/sign-in-experience-welcome.svg';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import CardTitle from '@/components/CardTitle';
+
+import * as styles from './Welcome.module.scss';
+
+const Welcome = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <Card className={styles.welcome}>
+      <CardTitle title="sign_in_exp.title" subtitle="sign_in_exp.description" />
+      <div className={styles.content}>
+        <img src={WelcomeImage} />
+        <div>{t('sign_in_exp.welcome.title')}</div>
+        <Button title="admin_console.sign_in_exp.welcome.get_started" type="primary" />
+      </div>
+    </Card>
+  );
+};
+
+export default Welcome;

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

@@ -1,4 +1,4 @@
-import { SignInExperience as SignInExperienceType } from '@logto/schemas';
+import { Setting, SignInExperience as SignInExperienceType } from '@logto/schemas';
 import classNames from 'classnames';
 import React, { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -18,6 +18,7 @@ import BrandingForm from './components/BrandingForm';
 import LanguagesForm from './components/LanguagesForm';
 import SignInMethodsForm from './components/SignInMethodsForm';
 import TermsForm from './components/TermsForm';
+import Welcome from './components/Welcome';
 import * as styles from './index.module.scss';
 import { SignInExperienceForm } from './types';
 import { signInExperienceParser } from './utilities';
@@ -26,6 +27,7 @@ const SignInExperience = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { tab } = useParams();
   const { data, error, mutate } = useSWR<SignInExperienceType, RequestError>('/api/sign-in-exp');
+  const { data: settings, error: settingsError } = useSWR<Setting, RequestError>('/api/settings');
   const methods = useForm<SignInExperienceForm>();
   const {
     reset,
@@ -54,6 +56,18 @@ const SignInExperience = () => {
     toast.success(t('application_details.save_success'));
   });
 
+  if (!settings && !settingsError) {
+    return <div>loading</div>;
+  }
+
+  if (settingsError) {
+    return <div>{settingsError.body.message}</div>;
+  }
+
+  if (!settings?.adminConsole.experienceGuideDone) {
+    return <Welcome />;
+  }
+
   return (
     <div className={styles.wrapper}>
       <div className={classNames(styles.setup, detailsStyles.container)}>

packages/phrases/src/locales/en.ts

@@ -353,6 +353,11 @@ const translation = {
         methods: 'Sign in methods',
         others: 'Others',
       },
+      welcome: {
+        title:
+          'This is the first time you define your sign in experience. Follow the step by step guide and go through all of settings.',
+        get_started: 'Get started',
+      },
       branding: {
         title: 'BRANDING',
         primary_color: 'Primary color',

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

@@ -349,6 +349,11 @@ const translation = {
         methods: 'Sign in methods',
         others: 'Others',
       },
+      welcome: {
+        title:
+          'This is the first time you define your sign in experience. Follow the step by step guide and go through all of settings.',
+        get_started: '开始',
+      },
       branding: {
         title: 'BRANDING',
         primary_color: 'Primary color',