feat: Switch the login page to the registration component by changing the routing parameters #3221 (#3307)

### What problem does this PR solve?
feat: Switch the login page to the registration component by changing
the routing parameters #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/login-next/form.tsx

@@ -31,6 +31,7 @@ export function SignUpForm() {
     }),
     nickname: z.string({ required_error: t('nicknamePlaceholder') }),
     password: z.string({ required_error: t('passwordPlaceholder') }),
+    agree: z.boolean({ required_error: t('passwordPlaceholder') }),
   });
 
   const form = useForm<z.infer<typeof FormSchema>>({
@@ -98,6 +99,26 @@ export function SignUpForm() {
             </FormItem>
           )}
         />
+        <FormField
+          control={form.control}
+          name="agree"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md">
+              <FormControl>
+                <Checkbox
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <div className="space-y-1 leading-none">
+                <FormLabel>
+                  I understand and agree to the Terms of Service and Privacy
+                  Policy.
+                </FormLabel>
+              </div>
+            </FormItem>
+          )}
+        />
         <Button type="submit" className="w-full">
           {t('signUp')}
         </Button>

web/src/pages/login-next/hooks.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { useSearchParams } from 'umi';
+
+export enum Step {
+  SignIn,
+  SignUp,
+  ForgotPassword,
+  ResetPassword,
+  VerifyEmail,
+}
+
+export const useSwitchStep = (step: Step) => {
+  const [_, setSearchParams] = useSearchParams();
+  const switchStep = useCallback(() => {
+    setSearchParams(new URLSearchParams({ step: step.toString() }));
+  }, [setSearchParams, step]);
+
+  return { switchStep };
+};

web/src/pages/login-next/index.tsx

@@ -3,13 +3,15 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { useTranslate } from '@/hooks/common-hooks';
 import { DiscordLogoIcon, GitHubLogoIcon } from '@radix-ui/react-icons';
+import { useSearchParams } from 'umi';
 import { SignInForm, SignUpForm, VerifyEmailForm } from './form';
+import { Step, useSwitchStep } from './hooks';
 
 function LoginFooter() {
   return (
-    <section className="pt-[30px]">
+    <section className="pt-4">
       <Separator />
-      <p className="text-center pt-[20px]">or continue with</p>
+      <p className="text-center pt-4">or continue with</p>
       <div className="flex gap-4 justify-center pt-[20px]">
         <GitHubLogoIcon className="w-8 h-8"></GitHubLogoIcon>
         <DiscordLogoIcon className="w-8 h-8"></DiscordLogoIcon>
@@ -21,6 +23,8 @@ function LoginFooter() {
 export function SignUpCard() {
   const { t } = useTranslate('login');
 
+  const { switchStep } = useSwitchStep(Step.SignIn);
+
   return (
     <Card className="w-[400px]">
       <CardHeader>
@@ -28,6 +32,11 @@ export function SignUpCard() {
       </CardHeader>
       <CardContent>
         <SignUpForm></SignUpForm>
+        <div className="text-center">
+          <Button variant={'link'} className="pt-6" onClick={switchStep}>
+            Already have an account? Log In
+          </Button>
+        </div>
         <LoginFooter></LoginFooter>
       </CardContent>
     </Card>
@@ -36,6 +45,7 @@ export function SignUpCard() {
 
 export function SignInCard() {
   const { t } = useTranslate('login');
+  const { switchStep } = useSwitchStep(Step.SignUp);
 
   return (
     <Card className="w-[400px]">
@@ -44,6 +54,13 @@ export function SignInCard() {
       </CardHeader>
       <CardContent>
         <SignInForm></SignInForm>
+        <Button
+          className="w-full mt-2"
+          onClick={switchStep}
+          variant={'secondary'}
+        >
+          {t('signUp')}
+        </Button>
       </CardContent>
     </Card>
   );
@@ -76,12 +93,17 @@ export function VerifyEmailCard() {
 }
 
 const Login = () => {
+  const [searchParams] = useSearchParams();
+  const step = Number((searchParams.get('step') ?? Step.SignIn) as Step);
+
   return (
-    <>
-      <SignUpCard></SignUpCard>
-      <SignInCard></SignInCard>
-      <VerifyEmailCard></VerifyEmailCard>
-    </>
+    <div className="w-full h-full flex items-center pl-[15%]">
+      <div className="inline-block">
+        {step === Step.SignIn && <SignInCard></SignInCard>}
+        {step === Step.SignUp && <SignUpCard></SignUpCard>}
+        {step === Step.VerifyEmail && <VerifyEmailCard></VerifyEmailCard>}
+      </div>
+    </div>
   );
 };