chore(console): optimize onboarding process (#4389)

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"

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 = (

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}
                   />

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(),