Refactor: Modularize login and register page

src/app/(auth)/register/page.tsx

@@ -1,60 +1,5 @@
-'use client';
+import RegisterForm from '../../../module/auth/register-form/register-form.component';
 
-import { useState } from 'react';
-import {
-  AccountCard,
-  AccountContent,
-  AccountWrap,
-} from '@/shared/components/account/AccountElements';
-import { useMutation } from '@apollo/client';
-import { USER_REGISTER } from '@/graphql/auth';
-import { useTitle } from '@/hooks/useTitle';
-import RegisterForm from './_components/RegisterForm';
-import RegisterSuccess from './_components/RegisterSuccess';
-import AccountHeader from '../_components/AccountHeader';
-import AccountFooter from '../_components/AccountFooter';
-
-const Register = () => {
-  const [register] = useMutation(USER_REGISTER);
-  const [error, setError] = useState('');
-  const [isRegistered, setIsRegistered] = useState(false);
-
-  useTitle('Register - BeeQuant');
-
-  const onSubmit = async (data: {
-    email: string;
-    password: string;
-    displayName: string;
-    ref: string;
-  }) => {
-    const result = await register({
-      variables: {
-        input: data,
-      },
-    });
-
-    if (result.data?.register.code === 200) {
-      setIsRegistered(true);
-    }
-    // for register failed
-    setError(`Register failed: ${result.data?.register.message}`);
-  };
-
-  if (isRegistered) {
-    return <RegisterSuccess />;
-  }
-
-  return (
-    <AccountWrap>
-      <AccountContent>
-        <AccountCard>
-          <AccountHeader />
-          <RegisterForm onSubmit={onSubmit} error={error} />
-          <AccountFooter isLogin={false} />
-        </AccountCard>
-      </AccountContent>
-    </AccountWrap>
-  );
-};
-
-export default Register;
+export default function Register() {
+  return <RegisterForm />;
+}

src/module/auth/login-form/login-form.component.tsx

@@ -2,51 +2,19 @@
 import {
   AccountCard,
   AccountContent,
-  AccountHead,
-  AccountLogo,
-  AccountLogoAccent,
-  AccountOr,
-  AccountSocial,
-  AccountSocialButtonFacebook,
-  AccountSocialButtonGoogle,
-  AccountTitle,
   AccountWrap,
 } from '@/shared/components/account/AccountElements';
-import FacebookIcon from 'mdi-react/FacebookIcon';
-import GooglePlusIcon from 'mdi-react/GooglePlusIcon';
+import AccountHeader from '../components/AccountHeader';
+import AccountFooter from '../components/AccountFooter';
 import FormLayout from './FormLayout';
 export default function LoginForm() {
   return (
     <AccountWrap>
       <AccountContent>
         <AccountCard>
-          <AccountHead>
-            <AccountTitle>
-              Welcome to
-              <br />
-              <AccountLogo>
-                BeeQuant
-                <AccountLogoAccent> AI</AccountLogoAccent>
-              </AccountLogo>
-            </AccountTitle>
-            <h4 className="subhead">Trading smart, trading with BeeQuant AI</h4>
-          </AccountHead>
+          <AccountHeader />
           <FormLayout />
-          <AccountOr>
-            <p>Or Easily Using</p>
-          </AccountOr>
-          <AccountSocial>
-            {/* @ts-ignore - Ignoring because of complex union types incorrectly inferred */}
-            <AccountSocialButtonFacebook
-              className="account__social-btn account__social-btn--facebook"
-              to="/login"
-            >
-              <FacebookIcon />
-            </AccountSocialButtonFacebook>
-            <AccountSocialButtonGoogle to="/login">
-              <GooglePlusIcon />
-            </AccountSocialButtonGoogle>
-          </AccountSocial>
+          <AccountFooter isLogin={true} />
         </AccountCard>
       </AccountContent>
     </AccountWrap>

src/module/auth/register-form/FormLayout.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation } from '@apollo/client';
+import { USER_REGISTER } from '@/graphql/auth';
+import { useTitle } from '@/hooks/useTitle';
+import RegisterSuccess from 'module/auth/register-form/RegisterSuccess';
+import RegisterForm from './RegisterFormGroup';
+
+export default function FormLayout() {
+  const [register] = useMutation(USER_REGISTER);
+  const [error, setError] = useState('');
+  const [isRegistered, setIsRegistered] = useState(false);
+
+  useTitle('Register - BeeQuant');
+
+  const onSubmit = async (data: {
+    email: string;
+    password: string;
+    displayName: string;
+    ref: string;
+  }) => {
+    const result = await register({
+      variables: {
+        input: data,
+      },
+    });
+
+    if (result.data?.register.code === 200) {
+      setIsRegistered(true);
+    }
+    // for register failed
+    setError(`Register failed: ${result.data?.register.message}`);
+  };
+
+  if (isRegistered) {
+    return <RegisterSuccess />;
+  }
+
+  return <RegisterForm onSubmit={onSubmit} error={error} />;
+}

src/app/(auth)/register/_components/RegisterForm.test.tsx → src/module/auth/register-form/RegisterFormGroup.test.tsx

@@ -1,6 +1,6 @@
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import { useUserContext } from '@/hooks/userHooks';
-import RegisterForm from './RegisterForm';
+import RegisterForm from './RegisterFormGroup';
 
 const mockLocalStorage = (() => {
   let store: Record<string, string> = {};

src/app/(auth)/register/_components/RegisterForm.tsx → src/module/auth/register-form/RegisterFormGroup.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 import AccountOutlineIcon from 'mdi-react/AccountOutlineIcon';
 import { Alert } from 'react-bootstrap';

src/module/auth/register-form/register-form.component.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import {
+  AccountCard,
+  AccountContent,
+  AccountWrap,
+} from '@/shared/components/account/AccountElements';
+import AccountHeader from '../components/AccountHeader';
+import AccountFooter from '../components/AccountFooter';
+import FormLayout from './FormLayout';
+
+export default function RegisterForm() {
+  return (
+    <AccountWrap>
+      <AccountContent>
+        <AccountCard>
+          <AccountHeader />
+          <FormLayout />
+          <AccountFooter isLogin={false} />
+        </AccountCard>
+      </AccountContent>
+    </AccountWrap>
+  );
+}