Fix conflict and add disabled button when invalid input (#30)

* feat: responsive

* fix: success register

* feat: auth login responsive && auth login implementation

* fix: login page button disabled & register page

* fix: conflict

* fix: button disabled when loading

apps/dimentorin/src/app/_hooks/use-login.ts

@@ -12,12 +12,13 @@ export const useLogin = () => {
     mode: 'all',
   });
 
-  const { signIn } = useSession();
+  const { signIn, isLoading } = useSession();
 
   const onSubmit = form.handleSubmit((data) => signIn(data));
 
   return {
     form,
     onSubmit,
+    isLoading
   };
 };

apps/dimentorin/src/app/auth/login/page.tsx

@@ -5,7 +5,7 @@ import { useLogin } from '../../_hooks/use-login';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 
 export const Components: FC = (): ReactElement => {
-  const { form, onSubmit } = useLogin();
+  const { form, onSubmit, isLoading } = useLogin();
 
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
@@ -42,7 +42,7 @@ export const Components: FC = (): ReactElement => {
                   Lupa Password ?
                 </a>
               </div>
-              <Button className="w-full" type='submit'>Enter Isekai</Button>
+              <Button className="w-full" type='submit' disabled={(!form.formState.isValid || isLoading)}>Enter Isekai</Button>
             </form>
             
             <div className="flex my-3 gap-3 justify-center">
@@ -74,6 +74,13 @@ export const Components: FC = (): ReactElement => {
               <ArrowLeftOutlined />
               Kembali Ke Homepage
             </Button>
+            <Button
+              className='xl:hidden w-full gap-3'
+              variant='secondary'
+            >
+              <ArrowLeftOutlined />
+              Kembali Ke Homepage
+            </Button>
           </div>
         </div>
       </div>

apps/dimentorin/src/app/auth/register/page.tsx

@@ -2,24 +2,33 @@ import { FC, ReactElement } from 'react';
 import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
 import { InputField } from '@imphnen-frontend-service/ui/molecules';
+import { ArrowLeftOutlined } from '@ant-design/icons';
 
 export const Components: FC = (): ReactElement => {
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
-      <div className="bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+      <div className="bg-white xl:min-w-[1130px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
         <RegisterResetBanner />
-        <div className="border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center">
+        <div className="xl:border-2 xl:border-primary-500/50 xl:w-[726px] rounded-lg py-[32px] px-[48px] flex justify-center">
-          <div className="w-[704px]">
+          <div className="xl:w-[714px]">
+            <Button
+              className='xl:hidden gap-3'
+              variant='secondary'
+            >
+              <ArrowLeftOutlined />
+              Login
+            </Button>
             <h3 className="mt-5 text-3xl font-semibold text-primary-500">
               Register
             </h3>
             <h5 className="text-primary-500 font-medium">
               Yosha~! Saatnya Bergabung dengan Dimentorin
             </h5>
-            <div className="grid grid-flow-row-dense my-7 grid-cols-2 gap-2">
+            <div className="grid grid-flow-row-dense my-7 lg:grid-cols-2 gap-2">
               <InputField
                 label="First Name"
                 size="lg"
+                className="w-full"
                 placeholder="Nama Depan"
               />
               <InputField
@@ -31,6 +40,7 @@ export const Components: FC = (): ReactElement => {
               <InputField
                 label="Email"
                 size="lg"
+                className="w-full"
                 placeholder="Contoh : yourname@mail.com"
               />
               <div className="flex gap-2">
@@ -90,7 +100,7 @@ export const Components: FC = (): ReactElement => {
               type="password"
               placeholder="Ulangi password-mu, Senpai~!"
             />
-            <Button className="w-full mt-2">Linked Start !!!</Button>
+            <Button className="xl:w-full mt-2">Linked Start !!!</Button>
           </div>
         </div>
       </div>

apps/dimentorin/src/app/auth/register/success/page.tsx

@@ -6,10 +6,10 @@ import { ArrowRightOutlined } from '@ant-design/icons';
 export const Components: FC = (): ReactElement => {
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
-      <div className="bg-white min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+      <div className="bg-white xl:min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
         <RegisterResetBanner />
-        <div className="border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
+        <div className="border-2 border-primary-500/50 xl:w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
-          <div className="w-[704px] flex flex-col justify-center items-center">
+          <div className="xl:w-[704px] flex flex-col justify-center items-center">
             <h2 className="text-4xl text-primary-500 font-semibold">
               Register Successfull
             </h2>

apps/dimentorin/src/middleware.ts

@@ -9,6 +9,7 @@ const mappingPublicRoutes = [
   '/',
   '/auth/login',
   '/auth/forgot',
+  '/auth/register',
   '/auth/new-password',
 ];
 

package-lock.json

@@ -26,7 +26,7 @@
         "next-themes": "^0.4.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
-        "react-hook-form": "^7.55.0",
+        "react-hook-form": "^7.56.4",
         "react-icons": "^5.5.0",
         "react-router-dom": "^7.3.0",
         "sharp": "^0.34.1",
@@ -28019,9 +28019,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.56.1",
+      "version": "7.56.4",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.4.tgz",
-      "integrity": "sha512-qWAVokhSpshhcEuQDSANHx3jiAEFzu2HAaaQIzi/r9FNPm1ioAvuJSD4EuZzWd7Al7nTRKcKPnBKO7sRn+zavQ==",
+      "integrity": "sha512-Rob7Ftz2vyZ/ZGsQZPaRdIefkgOSrQSPXfqBdvOPwJfoGnjwRJUs7EM7Kc1mcoDv3NOtqBzPGbcMB8CGn9CKgw==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"

package.json

@@ -41,7 +41,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.55.0",
+    "react-hook-form": "^7.56.4",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.3.0",
     "sharp": "^0.34.1",