Merge pull request #7 from IMPHNEN/DimentorinAuth

feat: Auth

apps/dimentorin/src/app/auth/forgot/layout.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

apps/dimentorin/src/app/auth/forgot/otp/layout.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

apps/dimentorin/src/app/auth/forgot/otp/page.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactElement } from 'react';
+import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { ForgotStep, OtpForm } from "@imphnen-frontend-service/ui/molecules";
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+
+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'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
+          <ForgotStep step={2} />
+          <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
+          <h5 className='mt-2 text-xl font-medium text-primary-500'>Yeay~! Pesan dari dunia lain (a.k.a email-mu) sudah tiba!</h5>
+          <OtpForm />
+          <Button>Summon Password Baru!</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

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

@@ -0,0 +1,24 @@
+import { FC, ReactElement } from 'react';
+import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { ForgotStep } from "@imphnen-frontend-service/ui/molecules";
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+
+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'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
+          <ForgotStep step={1} />
+          <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
+          <h5 className='mt-2 text-xl font-medium text-primary-500'>Masukkan email-mu, dan biarkan kami memanggil password-mu kembali dari dunia lain!</h5>
+          <h6 className='text-gray-600 mt-8'>Email</h6>
+          <Input type='email' size='lg' placeholder='Contoh: yourname@mail.com'></Input>
+          <Button variant='primary' className='mt-7'>Kirim Kode OTP ^^</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/auth/forgot/summon/layout.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

apps/dimentorin/src/app/auth/forgot/summon/page.tsx

@@ -0,0 +1,34 @@
+import { FC, ReactElement } from 'react';
+import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { ForgotStep } from "@imphnen-frontend-service/ui/molecules";
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+
+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'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
+          <ForgotStep step={3} />
+          <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
+          <h5 className='mt-2 text-md font-medium text-primary-500'>Sekarang, buatlah password baru yang lebih kuat, seperti jurus andalanmu!<span role="img" aria-label='emoji'>🔥⚡</span></h5>
+          <div className='my-4'>
+            <h6 className='text-gray-700'>Password Baru</h6>
+            <Input className='w-full' type="password" placeholder='Buat password sekokoh armor legendary!'/>
+            <h6 className='text-gray-700 mt-5'>Ulang Password Baru</h6>
+            <Input className='w-full' type="password" placeholder='Pastikan Cocok! Jangan sampai ada typo, Senpai~!'/>
+          </div>
+          <div className='mb-4 text-gray-700 flex flex-col gap-3 text-sm'>
+            <h6><span role='img' aria-label='emoji'>💡</span> Tips dari kami:</h6>
+            <h6><span role='img' aria-label='emoji'>✅ </span> Buat kombinasi huruf besar, kecil, angka, dan simbol untuk kekuatan maksimal!</h6>  
+            <h6><span role='img' aria-label='emoji'>✅</span> Pastikan kamu ingat password-mu atau simpan di tempat aman~</h6>  
+            <h6>Masukkan password baru dan bersiaplah untuk kembali bertualang!</h6>
+          </div>
+          <Button className='mt-5'>Summon Password Baru!</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

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

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

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

@@ -0,0 +1,45 @@
+import { FC, ReactElement } from 'react';
+import { LoginBanner } from "@imphnen-frontend-service/ui/organisms"
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { useSearchParams } from 'react-router-dom';
+import { InputForm } from '@imphnen-frontend-service/ui/molecules';
+
+export const Components: FC = (): ReactElement => {
+  const [searchParams] = useSearchParams();
+  const error = searchParams.get("error"); // Ambil nilai ?error=
+
+  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'>
+        <LoginBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center'>
+          <div className='w-[404px]'>
+            <h2 className='text-4xl font-semibold text-primary-500 text-center mb-2'>Hallo Minna-san</h2>
+            <h5 className='text-xl font-medium text-primary-500 text-center'>Welcome to Dimentorin by IMPHNEN</h5>
+            <InputForm label='Email' error={error ? error : undefined} size='lg' className='w-full' placeholder='Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)' />
+            <InputForm label="password" error={error ? error : undefined} className='w-full' size='lg' type='password' placeholder='Masukkan password rahasiamu!' />
+            <div className='flex justify-end my-5'>
+              <a href="/auth/forgot" className='text-primary-500 font-medium'>Lupa Password ?</a>
+            </div>
+            <Button className='w-full'>Enter Isekai</Button>
+            <div className='flex my-3 gap-3 justify-center'>
+              <h5>Belum Punya akun ?</h5>
+              <a href="/auth/register" className='text-primary-500 font-medium'>Daftar Disini</a>
+            </div>
+            <div className="flex items-center w-full">
+              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
+              <span className="px-3 text-blue-400">Or</span>
+              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
+            </div>
+            <Button className='w-full my-3 text-gray-500 gap-2' variant='secondary'>
+              <p>Log In With Google</p>
+              <img src="/image/33978ce5bed2da9bf9d73acad802182a.webp" alt="Google Icon" width={24}/>
+            </Button>
+          </div> 
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

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

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

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

@@ -0,0 +1,19 @@
+import { FC, ReactElement } from 'react';
+import { RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+
+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'>
+        <RegisterResetBanner />
+        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center'>
+          <div className='w-[404px]'>
+          </div> 
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

libs/ui/src/molecules/forgot-step/forgot-step.tsx

@@ -0,0 +1,30 @@
+import { DetailedHTMLProps, FC, InputHTMLAttributes, ReactElement } from "react"
+
+type TForgotStepProps = Omit<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+  'size' | 'type'
+> & {
+  step: number
+};
+
+export const ForgotStep: FC<TForgotStepProps> = ({
+    step = 1,
+    ...rest
+}): ReactElement => {
+    return (
+        <div className="w-full grid grid-cols-3 gap-3">
+          <div className="flex flex-col items-center justify-center gap-2">
+            <div className={`${step === 1 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
+            <h4 className={`${step === 1 ? "text-primary-500" : "text-gray-500"} text-xs`}>Masukkan Email</h4>
+          </div>
+          <div className="flex flex-col items-center justify-center gap-2">
+            <div className={`${step === 2 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
+            <h4 className={`${step === 2 ? "text-primary-500" : "text-gray-500"} text-xs`}>Verifikasi OTP</h4>
+          </div>
+          <div className="flex flex-col items-center justify-center gap-2">
+            <div className={`${step === 3 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
+            <h4 className={`${step === 3 ? "text-primary-500" : "text-gray-500"} text-xs`}>Summon Password ^^</h4>
+          </div>
+        </div>
+    )
+}

libs/ui/src/molecules/forgot-step/index.ts

@@ -0,0 +1 @@
+export * from './forgot-step';

libs/ui/src/molecules/index.ts

@@ -1,3 +1,5 @@
+export * from "./forgot-step";
+export * from "./otp-form";
 export * from './input-form';
 export * from './pagination';
 export * from './modal/modal';

libs/ui/src/molecules/otp-form/index.ts

@@ -0,0 +1 @@
+export * from "./otp-form"

libs/ui/src/molecules/otp-form/otp-form.tsx

@@ -0,0 +1,61 @@
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { Input } from "@imphnen-frontend-service/ui/atoms";
+import { ChangeEvent, DetailedHTMLProps, FC, InputHTMLAttributes, ReactElement, useRef, useState } from "react"
+
+type TForgotStepProps = Omit<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+  'size' | 'type'
+> & {
+  
+};
+
+export const OtpForm: FC<TForgotStepProps> = ({
+    step = 1,
+    ...rest
+}): ReactElement => {
+    const [cell, setCell] = useState(new Array(6).fill(""))
+    const inputRef = useRef([])
+
+    const handleChange = (index: number, e: ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value
+      if (!(/^[0-9]?$/.test(value))) return;
+
+      const newCell = [...cell]
+      newCell[index] = value
+      setCell(newCell)
+
+      if(value && index < 6 - 1){
+        (inputRef.current[index + 1] as HTMLInputElement).focus()
+      }
+    }
+
+    const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+      if(e.key === "Backspace" && !cell[index] && index > 0){
+        const newCell = [...cell]
+        newCell[index] = ""
+        setCell(newCell)
+        
+        const ref = (inputRef.current[index - 1] as HTMLInputElement)
+        ref.focus()
+      }
+    }
+
+    return (
+        <div className="w-full grid grid-cols-6 gap-3 my-10">
+          {cell.map((v, i) => (
+            <Input 
+              placeholder="" 
+              ref={(el) => {
+                inputRef.current.push(el as never)
+                return inputRef.current[i]
+              }}
+              onChange={(e) => handleChange(i, e)}
+              onKeyDown={(e) => handleKeyDown(i, e)}
+              size="lg"
+              value={cell[i]}
+              className="sm:min-w-[10px]"
+            />
+          ))}
+        </div>
+    )
+}

libs/ui/src/organisms/auth-banner/auth-banner.tsx

@@ -0,0 +1,29 @@
+import { ArrowLeftOutlined } from "@ant-design/icons";
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { FC, ReactElement } from "react";
+
+function AuthBanner({text, href}: {text: string, href: string}){
+    return (
+        <div className='relative rounded-md'>
+          <img src="/image/95319c4f9953dfe6180200e529dfcea5.webp" alt="Banner" className='w-[420px] h-[632px] object-[80%] object-cover rounded-lg' />
+          <div className='absolute top-0 bg-gradient-to-b from-primary-500 to-transparent w-full rounded-t-lg h-[163px] py-5 px-5'>
+            <Button variant='secondary' className='gap-2' onClick={() => document.location.href = `${href}`}>
+              <ArrowLeftOutlined />
+              <p>{text}</p>
+            </Button>
+          </div>
+          <div className='absolute bottom-0 bg-gradient-to-t from-primary-500 to-transparent w-full rounded-b-lg h-[263px] flex flex-col items-center justify-center'>
+            <img src="/image/9261045e09137f3fcb925a78c55b6ddb.webp" alt="Logo" width={317} />
+          </div>
+        </div>
+    )
+}
+
+export const LoginBanner: FC = (): ReactElement => {
+    return AuthBanner({text: "Back To Homepage", href: "/"})
+}
+
+export const RegisterResetBanner: FC = (): ReactElement => {
+    return AuthBanner({text: "Back To Login", href: "/auth/login"})
+}

libs/ui/src/organisms/auth-banner/index.ts

@@ -0,0 +1 @@
+export * from './auth-banner';

libs/ui/src/organisms/index.ts

@@ -1,5 +1,6 @@
 export * from './navbar';
-export * from './modals-gacha';
+export * from "./modals-gacha";
+export * from "./auth-banner";
 export * from './backoffice-sidebar'
 export * from './datatable'
 export * from './filter'