diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..49d9f6e --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +VITE_API_URL=https://api.example.com diff --git a/apps/backoffice/index.html b/apps/backoffice/index.html index 3905403..52a9604 100644 --- a/apps/backoffice/index.html +++ b/apps/backoffice/index.html @@ -6,7 +6,7 @@ - + diff --git a/apps/backoffice/src/app/_hooks/use-login.ts b/apps/backoffice/src/app/_hooks/use-login.ts new file mode 100644 index 0000000..e23709a --- /dev/null +++ b/apps/backoffice/src/app/_hooks/use-login.ts @@ -0,0 +1,31 @@ +import { useForm } from 'react-hook-form'; +import { + authLoginSchema, + TLoginRequest, + usePostLogin, +} from '@imphnen-frontend-service/service'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { useNavigate } from 'react-router-dom'; + +export const useLogin = () => { + const postLogin = usePostLogin(); + const form = useForm({ + resolver: zodResolver(authLoginSchema), + mode: 'all', + }); + const navigate = useNavigate(); + + const onSubmit = form.handleSubmit((data) => { + postLogin.mutate(data, { + onSuccess: () => { + console.log('Success Login'); + navigate('/dashboard'); + }, + }); + }); + + return { + form, + onSubmit, + }; +}; diff --git a/apps/backoffice/src/app/page.tsx b/apps/backoffice/src/app/page.tsx index 919b18c..99b0c4e 100644 --- a/apps/backoffice/src/app/page.tsx +++ b/apps/backoffice/src/app/page.tsx @@ -1,10 +1,10 @@ import { FC, ReactElement } from 'react'; -import { useNavigate } from 'react-router'; import { Button } from '@imphnen-frontend-service/ui/atoms'; -import { InputField } from '@imphnen-frontend-service/ui/molecules'; +import { useLogin } from './_hooks/use-login'; +import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms'; export const Components: FC = (): ReactElement => { - const navigate = useNavigate(); + const { form, onSubmit } = useLogin(); return (
@@ -13,21 +13,29 @@ export const Components: FC = (): ReactElement => {

Welcome to IMPHNEN Backoffice

- - - +
+ + + +
); diff --git a/apps/backoffice/vite.config.ts b/apps/backoffice/vite.config.ts index 936ed86..260280d 100644 --- a/apps/backoffice/vite.config.ts +++ b/apps/backoffice/vite.config.ts @@ -8,11 +8,11 @@ export default defineConfig(() => ({ root: __dirname, cacheDir: '../../node_modules/.vite/apps/backoffice', server: { - port: 4200, + port: 3000, host: 'localhost', }, preview: { - port: 4300, + port: 3001, host: 'localhost', }, plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])], diff --git a/libs/ui/src/atoms/input/input.tsx b/libs/ui/src/atoms/input/input.tsx index ae0e849..e780059 100644 --- a/libs/ui/src/atoms/input/input.tsx +++ b/libs/ui/src/atoms/input/input.tsx @@ -40,7 +40,8 @@ export const Input: FC = ({ }): ReactElement => { const [showPassword, setShowPassword] = useState(false); // State for password visibility - const togglePasswordVisibility = () => { + const togglePasswordVisibility = (e: React.FormEvent) => { + e.preventDefault(); if (!disabled) setShowPassword((prev) => !prev); }; @@ -63,6 +64,7 @@ export const Input: FC = ({ {type === 'password' && (