MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into feat/backoffice-login

Browse Source
This commit is contained in:
Hafid Nur
2025-04-03 12:29:28 +07:00
parent a9cc728ade 2bd767d20b
commit fe1928e8ef
37 changed files with 954 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/gacha/src/app/_components/form/modal-form-forgot-password.tsx
+9 -10
View File
@@ -1,11 +1,11 @@
import { Button } from '@imphnen-frontend-service/ui/atoms';
import {
InputForm,
InputField,
Modal,
Stepper,
} from '@imphnen-frontend-service/ui/molecules';
import { useQueryState } from '../../../hooks/use-query-state';
import { useQueryState } from '@imphnen-frontend-service/utils';
import { Fragment } from 'react/jsx-runtime';
interface IModalFormForgotPasswordProps {
isOpen: boolean;
onClose: () => void;
@@ -62,7 +62,7 @@ interface IStepOneProps {
const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
<>
<InputForm
<InputField
label="Email"
placeholder="Masukkan Email yang Terdaftar"
type="email"
@@ -86,9 +86,8 @@ interface IStepTwoProps {
}
const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
<>
{/* TODO: Change component using OTP Input */}
<InputForm
<Fragment>
<InputField
label="Kode OTP"
placeholder="Masukkan Kode OTP"
type="text"
@@ -108,7 +107,7 @@ const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
Reset Password
</Button>
</div>
</>
</Fragment>
);
interface IStepThreeProps {
@@ -118,14 +117,14 @@ interface IStepThreeProps {
const StepThree = ({ onClose, resetStep }: IStepThreeProps) => (
<>
<InputForm
<InputField
label="Password Baru"
placeholder="Masukkan Password Baru"
type="password"
size="lg"
className="w-full"
/>
<InputForm
<InputField
label="Ulang Password"
placeholder="Masukkan Ulang Password"
type="password"
apps/gacha/src/app/_components/form/modal-form-login.tsx
+42 -32
View File
@@ -1,6 +1,8 @@
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
import { Modal } from '@imphnen-frontend-service/ui/molecules';
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
import { Link } from 'react-router-dom';
import { useLogin } from '../../_hooks/use-login';
interface IModalFormLogin {
isOpen: boolean;
@@ -13,6 +15,8 @@ const ModalFormLogin = ({
onClose,
onForgotPassword,
}: IModalFormLogin) => {
const { form, onSubmit } = useLogin();
return (
<Modal
className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
@@ -25,38 +29,44 @@ const ModalFormLogin = ({
Login
</h1>
</Modal.Header>
<Modal.Content className="space-y-4">
<InputForm
label="Email"
placeholder="Masukkan Email"
type="email"
size="lg"
className="w-full"
/>
<InputForm
label="Password"
placeholder="Masukkan Password"
type="password"
size="lg"
className="w-full"
/>
<h1 className="text-end text-primary-500 text-xl font-medium">
<Button variant="text" onClick={onForgotPassword}>
Lupa Password?
<Modal.Content>
<form className="space-y-4" onSubmit={onSubmit}>
<ControlledInputField
control={form.control}
label="Email"
placeholder="Masukkan Email"
type="email"
name="email"
size="lg"
className="w-full"
/>
<ControlledInputField
control={form.control}
label="Password"
placeholder="Masukkan Password"
type="password"
name="password"
size="lg"
className="w-full"
/>
<h1 className="text-end text-primary-500 text-xl font-medium">
<Button variant="text" onClick={onForgotPassword}>
Lupa Password?
</Button>
</h1>
<Button type="submit" size="md" className="w-full">
Login
</Button>
</h1>
<Button size="md" className="w-full">
Login
</Button>
<div className="flex justify-center gap-2 pt-2.5 font-medium">
<p className="text-neutral-500">Belum punya akun?</p>
<Link
className="text-primary-500 hover:text-primary-600"
to="/register"
>
Daftar
</Link>
</div>
<div className="flex justify-center gap-2 pt-2.5 font-medium">
<p className="text-neutral-500">Belum punya akun?</p>
<Link
className="text-primary-500 hover:text-primary-600"
to="/register"
>
Daftar
</Link>
</div>
</form>
</Modal.Content>
</Modal>
);
apps/gacha/src/app/_components/form/modal-form-register.tsx
+8 -8
View File
@@ -1,6 +1,6 @@
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
import { useQueryState } from '../../../hooks/use-query-state';
import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
import { useQueryState } from '@imphnen-frontend-service/utils';
interface IModalFormRegisterProps {
isOpen: boolean;
@@ -54,28 +54,28 @@ interface IStepOneProps {
const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
<>
<InputForm
<InputField
label="Nama Lengkap"
placeholder="Masukkan Nama Lengkap"
type="text"
size="lg"
className="w-full"
/>
<InputForm
<InputField
label="Email"
placeholder="Masukkan Email Anda"
type="email"
size="lg"
className="w-full"
/>
<InputForm
<InputField
label="Password"
placeholder="Masukkan Password"
type="password"
size="lg"
className="w-full"
/>
<InputForm
<InputField
label="Ulangi Password"
placeholder="Masukkan Ulang Password"
type="password"
@@ -95,14 +95,14 @@ interface IStepTwoProps {
const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
<>
<InputForm
<InputField
label="Nomor Telepon"
placeholder="Masukkan Nomor Telepon Aktif"
type="text"
size="lg"
className="w-full"
/>
<InputForm
<InputField
label="Alamat Pengiriman"
placeholder="Masukkan Alamat Pengiriman"
type="text"
apps/gacha/src/app/_components/item/gacha-item.tsx
+29
View File
@@ -0,0 +1,29 @@
import { cn } from '@imphnen-frontend-service/utils';
import { FC, ReactElement } from 'react';
type TGachaItem = {
src: string;
label: string;
className?: string;
};
export const GachaItem: FC<TGachaItem> = ({
src,
label,
className,
}): ReactElement => {
return (
<div className="snap-center flex-auto justify-center items-center flex flex-col min-w-full overflow-hidden">
<div className="max-h-[180px] md:max-h-[270px] md:max-w-[500px] mb-2 md:mb-5 flex flex-1 justify-center items-center">
<img
src={src}
alt="Banner"
width={255}
height={255}
className={cn('h-[150px] md:h-[255px] object-contain', className)}
/>
</div>
<p className="font-semibold text-center md:text-p2">{label}</p>
</div>
);
};
apps/gacha/src/app/_hooks/use-login.ts
+26
View File
@@ -0,0 +1,26 @@
import { useForm } from 'react-hook-form';
import {
authLoginSchema,
TLoginRequest,
usePostLogin,
} from '@imphnen-frontend-service/service';
import { zodResolver } from '@hookform/resolvers/zod';
export const useLogin = () => {
const postLogin = usePostLogin();
const form = useForm<TLoginRequest>({
resolver: zodResolver(authLoginSchema),
mode: 'all',
});
const onSubmit = form.handleSubmit((data) => {
postLogin.mutate(data, {
onSuccess: () => console.log('Success Login'),
});
});
return {
form,
onSubmit,
};
};
apps/gacha/src/app/page.tsx
+14 -65
View File
@@ -1,16 +1,10 @@
import { ArrowDownOutlined } from '@ant-design/icons';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { cn } from '@imphnen-frontend-service/utils';
import { FC, Fragment, ReactElement, useEffect, useState } from 'react';
import { FC, Fragment, ReactElement, useState } from 'react';
import ModalFormForgotPassword from './_components/form/modal-form-forgot-password';
import ModalFormLogin from './_components/form/modal-form-login';
import ModalFormRegister from './_components/form/modal-form-register';
interface GachaItemProps {
src: string;
label: string;
className?: string;
}
import { GachaItem } from './_components/item/gacha-item';
export const Components: FC = (): ReactElement => {
const [showModalForgotPassword, setShowModalForgotPassword] = useState(false);
@@ -24,49 +18,6 @@ export const Components: FC = (): ReactElement => {
}
};
useEffect(() => {
const gachaPlaySection = document.getElementById('gacha-play');
if (gachaPlaySection) {
let currentIndex = 0;
const items = gachaPlaySection.children;
const totalItems = items.length;
const scrollItems = () => {
if (currentIndex >= totalItems) {
currentIndex = 0;
}
items[currentIndex].scrollIntoView({
behavior: 'smooth',
inline: 'center',
});
currentIndex++;
};
const intervalId = setInterval(scrollItems, 2800);
return () => clearInterval(intervalId);
}
}, []);
const GachaItem: FC<GachaItemProps> = ({
src,
label,
className,
}): ReactElement => {
return (
<div className="snap-center flex-auto justify-center items-center flex flex-col min-w-full">
<div className="max-h-[180px] md:max-h-[270px] md:max-w-[500px] mb-2 md:mb-5 flex flex-1 justify-center items-center">
<img
src={src}
alt=""
className={cn('h-[150px] md:h-[255px] object-contain', className)}
/>
</div>
<p className="font-semibold text-center md:text-p2">{label}</p>
</div>
);
};
const handleForgotPasswordClick = () => {
setShowModalLogin(false);
setShowModalForgotPassword(true);
@@ -74,7 +25,6 @@ export const Components: FC = (): ReactElement => {
return (
<Fragment>
{/* Landing Page */}
<section
id="landing-page"
className="my-12 md:my-24 grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center max-w-[1280px] items-center justify-center mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto"
@@ -137,22 +87,28 @@ export const Components: FC = (): ReactElement => {
~ 175k ~
</div>
</div>
<div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative">
<div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative overflow-hidden">
<div className="relative h-[130px] md:h-[230px]">
<img
width={400}
height={400}
src="/merch/2.png"
alt="Merch 2"
className="relative top-[5px] md:top-[8px] left-0 md:left-[5px] z-10 w-[165px] md:w-[277px]"
/>
<img
width={400}
height={400}
className="absolute top-0 -left-[5px] md:-left-[8px] z-0 min-w-[174px] md:min-w-[302px]"
src="/merch/Vector-2.svg"
alt=""
alt="Merch 3"
/>
<img
width={400}
height={400}
className="absolute hidden lg:block -bottom-[100px] -left-[55px]"
src="/landing-arrow-2.svg"
alt=""
alt="Merch 1"
/>
</div>
<div className="px-3 py-1 text-primary-500 font-semibold text-base md:text-p2 bg-white shadow-md rounded">
@@ -163,7 +119,7 @@ export const Components: FC = (): ReactElement => {
</div>
</div>
</section>
{/* Roulette Page */}
<section
id="roulette"
className="mt-20 pb-50 lg:py-90 mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto lg:max-w-[1280px] grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center gap-y-16 md:gap-y-28"
@@ -191,10 +147,7 @@ export const Components: FC = (): ReactElement => {
</ol>
</div>
<div
id="roulette-spin"
className="col-span-4 md:col-span-8 lg:col-span-6 flex flex-col items-center gap-4 md:gap-8 overflow-x-hidden"
>
<div className="col-span-4 md:col-span-8 lg:col-span-6 flex flex-col items-center gap-4 md:gap-8 overflow-x-hidden">
<div className="bg-white text-primary-500 font-medium text-p3 md:text-h3 shadow py-2 px-4 md:py-4 md:px-8 max-w-fit rounded-md md:rounded-lg">
Here Take Your Prize
</div>
@@ -223,7 +176,7 @@ export const Components: FC = (): ReactElement => {
Spin Now
</Button>
</div>
{/* TODO: Change using real button trigger */}
<div className="flex gap-4 col-span-4 md:col-span-8 lg:col-span-6 justify-center items-center">
<Button onClick={() => setShowModalLogin(true)}>
Open Modal Login
@@ -236,10 +189,8 @@ export const Components: FC = (): ReactElement => {
</Button>
</div>
</section>
{/* Diffuser & Cloud */}
<div className="sticky bottom-0 h-[86px] md:h-[200px] bg-gradient-to-b from-primary-500/0 to-primary-500/50 to-80%"></div>
{/* Login Modal */}
<ModalFormLogin
isOpen={showModalLogin}
onClose={() => setShowModalLogin(false)}
@@ -247,7 +198,6 @@ export const Components: FC = (): ReactElement => {
key="login"
/>
{/* Register Modal */}
<ModalFormRegister
isOpen={showModalRegister}
onClose={() => {
@@ -256,7 +206,6 @@ export const Components: FC = (): ReactElement => {
key="register"
/>
{/* Forgot Password Modal */}
<ModalFormForgotPassword
isOpen={showModalForgotPassword}
onClose={() => {
apps/gacha/src/hooks/use-query-state.ts
-71
View File
@@ -1,71 +0,0 @@
import { useCallback, useEffect, useState } from 'react';
interface UseQueryStateOptions {
defaultValue: number;
maxValue?: number;
minValue?: number;
}
export const useQueryState = (key: string, options: UseQueryStateOptions) => {
const { defaultValue, maxValue = Infinity, minValue = 1 } = options;
const getQueryParam = (param: string): string | null => {
if (typeof window === 'undefined') return null;
const searchParams = new URLSearchParams(window.location.search);
return searchParams.get(param);
};
const setQueryParam = (param: string, value: string) => {
const searchParams = new URLSearchParams(window.location.search);
searchParams.set(param, value);
const newUrl = `${window.location.pathname}?${searchParams.toString()}`;
window.history.replaceState(null, '', newUrl);
};
const initialValue = () => {
const queryValue = getQueryParam(key);
const parsedValue = queryValue ? parseInt(queryValue, 10) : defaultValue;
return Math.max(minValue, Math.min(maxValue, parsedValue));
};
const [value, setValue] = useState<number>(initialValue);
useEffect(() => {
const handlePopState = () => {
const queryValue = getQueryParam(key);
const newValue = queryValue ? parseInt(queryValue, 10) : defaultValue;
setValue(Math.max(minValue, Math.min(maxValue, newValue)));
};
window.addEventListener('popstate', handlePopState);
return () => window.removeEventListener('popstate', handlePopState);
}, [key, defaultValue, minValue, maxValue]);
const updateValue = useCallback(
(newValue: number) => {
const constrainedValue = Math.max(minValue, Math.min(maxValue, newValue));
setValue(constrainedValue);
setQueryParam(key, constrainedValue.toString());
},
[key, minValue, maxValue]
);
const nextStep = useCallback(() => {
updateValue(value + 1);
}, [value, updateValue]);
const prevStep = useCallback(() => {
updateValue(value - 1);
}, [value, updateValue]);
const resetStep = useCallback(() => {
updateValue(defaultValue);
}, [defaultValue, updateValue]);
return {
step: value,
nextStep,
prevStep,
resetStep,
};
};