feat: Forgot Password Slicing, fix: webp image

libs/ui/src/atoms/input/input.tsx

@@ -6,7 +6,7 @@ import {
 } from 'react';
 import { cn } from '@imphnen-frontend-service/utils';
 
-type TInputType = 'text' | 'email';
+type TInputType = 'text' | 'email' | 'password';
 type TInputSize = 'sm' | 'md' | 'lg';
 
 type TInputProps = Omit<

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 +1,2 @@
-export * from "./forgot-step";
+export * from "./forgot-step";
+export * from "./otp-form";

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,60 @@
+// 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]}
+            />
+          ))}
+        </div>
+    )
+}

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

@@ -6,7 +6,7 @@ import { FC, ReactElement } from "react";
 function AuthBanner({text, href}: {text: string, href: string}){
     return (
         <div className='relative rounded-md'>
-          <img src="/image/95319c4f9953dfe6180200e529dfcea5.jpeg" alt="Banner" className='w-[420px] h-[632px] object-[80%] object-cover rounded-lg' />
+          <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 />
@@ -14,7 +14,7 @@ function AuthBanner({text, href}: {text: string, href: string}){
             </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.png" alt="Logo" width={317} />
+            <img src="/image/9261045e09137f3fcb925a78c55b6ddb.webp" alt="Logo" width={317} />
           </div>
         </div>
     )