From 294a1462194ba31091c72f93693f6a12d1ce9f04 Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Thu, 24 Aug 2023 13:57:00 +0800
Subject: [PATCH] chore(console): optimize onboarding process (#4389)

---
 .../pages/SignInExperience/index.tsx          | 13 --------
 .../SignInExperience/sie-config-templates.ts  | 32 ++++++++-----------
 .../src/onboarding/pages/Welcome/index.tsx    |  3 +-
 packages/console/src/onboarding/types.ts      |  2 +-
 4 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/packages/console/src/onboarding/pages/SignInExperience/index.tsx b/packages/console/src/onboarding/pages/SignInExperience/index.tsx
index 2672170fb..f6a65c441 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/index.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/index.tsx
@@ -4,7 +4,6 @@ import { SignInIdentifier } from '@logto/schemas';
 import type { SignInExperience as SignInExperienceType, ConnectorResponse } from '@logto/schemas';
 import { useCallback, useEffect, useMemo, useContext } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
@@ -241,18 +240,6 @@ function SignInExperience() {
       </OverlayScrollbar>
       <ActionBar step={2}>
         <div className={styles.continueActions}>
-          <Button
-            type="outline"
-            title="general.save"
-            disabled={isSubmitting}
-            onClick={async () => {
-              await handleSubmit(
-                submit(() => {
-                  toast.success(t('general.saved'));
-                })
-              )();
-            }}
-          />
           <Button
             type="primary"
             title="cloud.sie.finish_and_done"
diff --git a/packages/console/src/onboarding/pages/SignInExperience/sie-config-templates.ts b/packages/console/src/onboarding/pages/SignInExperience/sie-config-templates.ts
index cbc1d6eff..53749bcae 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/sie-config-templates.ts
+++ b/packages/console/src/onboarding/pages/SignInExperience/sie-config-templates.ts
@@ -12,39 +12,36 @@ export const defaultOnboardingSieConfig: OnboardingSieConfig = {
   authentications: [Authentication.Password],
 };
 
+// Email + password sign-up; password sign-in
 const configTemplate1: OnboardingSieConfig = {
   logo: `${assetsUrl}/tVCAHjAB/logo1.png`,
   color: '#19BEFD',
   identifier: SignInIdentifier.Email,
-  authentications: [Authentication.Password, Authentication.VerificationCode],
-};
-
-const configTemplate2: OnboardingSieConfig = {
-  logo: `${assetsUrl}/IcI0snBP/logo3.png`,
-  color: '#FF5449',
-  identifier: SignInIdentifier.Username,
   authentications: [Authentication.Password],
 };
 
+// Email + password sign-up; password + code sign-in
+const configTemplate2: OnboardingSieConfig = {
+  logo: `${assetsUrl}/IcI0snBP/logo3.png`,
+  color: '#FF5449',
+  identifier: SignInIdentifier.Email,
+  authentications: [Authentication.Password, Authentication.VerificationCode],
+};
+
+// Email + code sign-up; code sign-in
 const configTemplate3: OnboardingSieConfig = {
   logo: `${assetsUrl}/7UQyvuFc/logo4.png`,
   color: '#CA4E96',
   identifier: SignInIdentifier.Email,
-  authentications: [Authentication.Password],
-};
-
-const configTemplate4: OnboardingSieConfig = {
-  logo: `${assetsUrl}/zB2merH1/logo5.png`,
-  color: '#F07EFF',
-  identifier: SignInIdentifier.Email,
   authentications: [Authentication.VerificationCode],
 };
 
-const configTemplate5: OnboardingSieConfig = {
+// Username sign-up; password sign-in
+const configTemplate4: OnboardingSieConfig = {
   logo: `${assetsUrl}/uLoMzrlz/logo7.png`,
   color: '#FF5449',
-  identifier: SignInIdentifier.Email,
-  authentications: [Authentication.Password, Authentication.VerificationCode],
+  identifier: SignInIdentifier.Username,
+  authentications: [Authentication.Password],
 };
 
 const sieConfigTemplates: OnboardingSieConfig[] = [
@@ -52,7 +49,6 @@ const sieConfigTemplates: OnboardingSieConfig[] = [
   configTemplate2,
   configTemplate3,
   configTemplate4,
-  configTemplate5,
 ];
 
 export const randomSieConfigTemplate = (
diff --git a/packages/console/src/onboarding/pages/Welcome/index.tsx b/packages/console/src/onboarding/pages/Welcome/index.tsx
index ea8465eef..23ccc088c 100644
--- a/packages/console/src/onboarding/pages/Welcome/index.tsx
+++ b/packages/console/src/onboarding/pages/Welcome/index.tsx
@@ -68,11 +68,10 @@ function Welcome() {
               <Controller
                 control={control}
                 name="project"
-                rules={{ required: true }}
                 render={({ field: { onChange, value, name } }) => (
                   <CardSelector
                     name={name}
-                    value={value}
+                    value={value ?? ''}
                     options={projectOptions}
                     onChange={onChange}
                   />
diff --git a/packages/console/src/onboarding/types.ts b/packages/console/src/onboarding/types.ts
index 296f0198d..815ce9d2a 100644
--- a/packages/console/src/onboarding/types.ts
+++ b/packages/console/src/onboarding/types.ts
@@ -52,7 +52,7 @@ export enum Reason {
 }
 
 const questionnaireGuard = z.object({
-  project: z.nativeEnum(Project),
+  project: z.nativeEnum(Project).optional(),
   /** @deprecated Open-source options was for cloud preview use, no longer needed. Use default `Cloud` value for placeholder. */
   deploymentType: z.nativeEnum(DeploymentType).optional().default(DeploymentType.Cloud),
   titles: z.array(z.nativeEnum(Title)).optional(),