diff --git a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md b/.github/pull_request_template.md similarity index 100% rename from .github/PULL_REQUEST_TEMPLATE/pull_request_template.md rename to .github/pull_request_template.md diff --git a/apps/gacha/src/app/_components/form/modal-form-login.tsx b/apps/gacha/src/app/_components/form/modal-form-login.tsx index fdb4e65..3b2c6e8 100644 --- a/apps/gacha/src/app/_components/form/modal-form-login.tsx +++ b/apps/gacha/src/app/_components/form/modal-form-login.tsx @@ -1,19 +1,20 @@ import { Button } from '@imphnen-frontend-service/ui/atoms'; 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; onClose: () => void; onForgotPassword: () => void; + setIsOpenRegisterModal: (value: boolean) => void; } const ModalFormLogin = ({ isOpen, onClose, onForgotPassword, + setIsOpenRegisterModal, }: IModalFormLogin) => { const { form, onSubmit } = useLogin(); @@ -59,12 +60,13 @@ const ModalFormLogin = ({

Belum punya akun?

- setIsOpenRegisterModal(true)} > Daftar - +
diff --git a/apps/gacha/src/app/layout.tsx b/apps/gacha/src/app/layout.tsx index 7428943..2b27454 100644 --- a/apps/gacha/src/app/layout.tsx +++ b/apps/gacha/src/app/layout.tsx @@ -1,14 +1,16 @@ -import { FC, ReactElement } from 'react'; -import { Outlet } from 'react-router-dom'; import { Navbar } from '@imphnen-frontend-service/ui/organisms'; +import { Outlet } from 'react-router-dom'; +import { FC, ReactElement } from 'react'; +import { ModalLoginProvider } from '@imphnen-frontend-service/utils'; export const AppLayout: FC = (): ReactElement => { return ( -
- - -
+ +
+ + +
+ ); }; - export default AppLayout; diff --git a/apps/gacha/src/app/page.tsx b/apps/gacha/src/app/page.tsx index c693317..c9cf71d 100644 --- a/apps/gacha/src/app/page.tsx +++ b/apps/gacha/src/app/page.tsx @@ -5,10 +5,11 @@ import ModalFormForgotPassword from './_components/form/modal-form-forgot-passwo import ModalFormLogin from './_components/form/modal-form-login'; import ModalFormRegister from './_components/form/modal-form-register'; import { GachaItem } from './_components/item/gacha-item'; +import { useModalLogin } from '@imphnen-frontend-service/utils'; export const Components: FC = (): ReactElement => { + const { showModalLogin, setShowModalLogin } = useModalLogin(); const [showModalForgotPassword, setShowModalForgotPassword] = useState(false); - const [showModalLogin, setShowModalLogin] = useState(false); const [showModalRegister, setShowModalRegister] = useState(false); const scrollToRoulette = () => { @@ -176,18 +177,6 @@ export const Components: FC = (): ReactElement => { Spin Now - -
- - - -
@@ -195,6 +184,7 @@ export const Components: FC = (): ReactElement => { isOpen={showModalLogin} onClose={() => setShowModalLogin(false)} onForgotPassword={handleForgotPasswordClick} + setIsOpenRegisterModal={setShowModalRegister} key="login" /> diff --git a/libs/service/src/schemas/auth/index.ts b/libs/service/src/schemas/auth/index.ts index 4da256e..9a61758 100644 --- a/libs/service/src/schemas/auth/index.ts +++ b/libs/service/src/schemas/auth/index.ts @@ -2,8 +2,16 @@ import { z } from 'zod'; export const authLoginSchema = z.object({ email: z - .string() - .min(1, 'Email cannot be empty') - .email('Email must be valid'), - password: z.string().min(1, 'Password cannot be empty'), + .string({ + required_error: 'Email tidak boleh kosong', + invalid_type_error: 'Email harus berupa string', + }) + .min(1, 'Email tidak boleh kosong') + .email('Email harus valid'), + password: z + .string({ + required_error: 'Password tidak boleh kosong', + invalid_type_error: 'Password harus berupa string', + }) + .min(1, 'Password tidak boleh kosong'), }); diff --git a/libs/ui/src/molecules/input-field/input-field.tsx b/libs/ui/src/molecules/input-field/input-field.tsx index 0db7b16..f07eef6 100644 --- a/libs/ui/src/molecules/input-field/input-field.tsx +++ b/libs/ui/src/molecules/input-field/input-field.tsx @@ -75,7 +75,7 @@ export const InputField: FC = ({ {...rest} /> {error ? ( -

{error}

+

{error}

) : ( helperText && (

diff --git a/libs/ui/src/organisms/navbar/navbar.tsx b/libs/ui/src/organisms/navbar/navbar.tsx index e675d3c..00a0e24 100644 --- a/libs/ui/src/organisms/navbar/navbar.tsx +++ b/libs/ui/src/organisms/navbar/navbar.tsx @@ -2,11 +2,12 @@ import { MenuOutlined } from '@ant-design/icons'; import { FC, ReactElement, useState } from 'react'; import { Link } from 'react-router-dom'; import { Button } from '../../atoms/button'; -import { useSession } from '@imphnen-frontend-service/utils'; +import { useModalLogin, useSession } from '@imphnen-frontend-service/utils'; export const Navbar: FC = (): ReactElement => { const { session, signOut, isAuthenticated } = useSession(); const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const { setShowModalLogin } = useModalLogin(); return (

@@ -44,7 +45,7 @@ export const Navbar: FC = (): ReactElement => { {!isAuthenticated ? (
  • - +
    • ) : (
  • @@ -88,12 +89,12 @@ export const Navbar: FC = (): ReactElement => {
    • {!isAuthenticated ? (
  • - setShowModalLogin(true)} + className="block w-full text-gray-100 transition-colors px-4 py-2 text-center font-semibold" > Login - +
    • ) : (
  • {session.user?.fullname}
    • diff --git a/libs/utils/src/hooks/index.ts b/libs/utils/src/hooks/index.ts index 2279469..6b7067f 100644 --- a/libs/utils/src/hooks/index.ts +++ b/libs/utils/src/hooks/index.ts @@ -1,2 +1,3 @@ export * from './use-query-state'; export * from './use-session'; +export * from './use-modal-login'; diff --git a/libs/utils/src/hooks/use-modal-login.tsx b/libs/utils/src/hooks/use-modal-login.tsx new file mode 100644 index 0000000..181ed57 --- /dev/null +++ b/libs/utils/src/hooks/use-modal-login.tsx @@ -0,0 +1,28 @@ +import { createContext, ReactNode, useContext, useState } from 'react'; + +interface ModalLoginContextType { + showModalLogin: boolean; + setShowModalLogin: (value: boolean) => void; +} + +const ModalLoginContext = createContext( + undefined +); + +export const ModalLoginProvider = ({ children }: { children: ReactNode }) => { + const [showModalLogin, setShowModalLogin] = useState(false); + + return ( + + {children} + + ); +}; + +export const useModalLogin = () => { + const context = useContext(ModalLoginContext); + if (!context) { + throw new Error('useModalLogin must be used within an ModalLoginProvider'); + } + return context; +}; diff --git a/package-lock.json b/package-lock.json index 9269853..9958fd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "react-dom": "^19.0.0", "react-hook-form": "^7.55.0", "react-router-dom": "^7.3.0", + "sonner": "^2.0.3", "tailwind-merge": "^3.0.2", "zod": "^3.24.2" }, @@ -24244,6 +24245,16 @@ "atomic-sleep": "^1.0.0" } }, + "node_modules/sonner": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.3.tgz", + "integrity": "sha512-njQ4Hht92m0sMqqHVDL32V2Oun9W1+PHO9NDv9FHfJjT3JT22IG4Jpo3FPQy+mouRKCXFWO+r67v6MrHX2zeIA==", + "license": "MIT", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", + "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, "node_modules/sort-keys": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", diff --git a/package.json b/package.json index 3be05e4..a3188c4 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "react-dom": "^19.0.0", "react-hook-form": "^7.55.0", "react-router-dom": "^7.3.0", + "sonner": "^2.0.3", "tailwind-merge": "^3.0.2", "zod": "^3.24.2" },