chore(ui): move name field to step 2 #30

web/src/features/accounts/components/action-dialog.tsx

@@ -139,7 +139,7 @@ export type Steps = [
 
 const getSteps = (t: (key: string) => string): Steps => [
   { id: "step-1", name: t('accounts.steps.emailAddress'), fields: ["email"] },
-  { id: "step-2", name: t('accounts.steps.imap'), fields: ["imap", "use_dangerous"] },
+  { id: "step-2", name: t('accounts.steps.imap'), fields: ["imap", "use_dangerous", "name"] },
   { id: "step-3", name: t('accounts.steps.syncPreferences'), fields: ["enabled", "date_since", "folder_limit", "sync_interval_min"] },
   { id: "step-4", name: t('accounts.steps.summary'), fields: [] },
 ];

web/src/features/accounts/components/step1.tsx

@@ -66,22 +66,6 @@ export default function Step1({ isEdit }: StepProps) {
                         </FormItem>
                     )}
                 />
-                <FormField
-                    control={control}
-                    name="name"
-                    render={({ field }) => (
-                        <FormItem>
-                            <FormLabel className="flex items-center justify-between">
-                                {t('accounts.name')}:
-                            </FormLabel>
-                            <FormControl>
-                                <Input placeholder={t('accounts.namePlaceholder')} {...field} />
-                            </FormControl>
-                            <FormDescription>{t('accounts.nameDescription')}</FormDescription>
-                            <FormMessage />
-                        </FormItem>
-                    )}
-                />
             </div>
         </>
     );

web/src/features/accounts/components/step2.tsx

@@ -128,6 +128,22 @@ export default function Step2({ isEdit }: StepProps) {
                         </FormItem>
                     )}
                 />
+                <FormField
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel className="flex items-center justify-between">
+                                {t('accounts.name')}:
+                            </FormLabel>
+                            <FormControl>
+                                <Input placeholder={t('accounts.namePlaceholder')} {...field} />
+                            </FormControl>
+                            <FormDescription>{t('accounts.nameDescription')}</FormDescription>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
                 <FormField
                     control={control}
                     name="imap.auth.auth_type"