Create hooks and implement login pages

hotel-management/src/pages/Login/LoginForm.tsx

@@ -0,0 +1,69 @@
+import { useForm } from 'react-hook-form';
+
+// Components
+import Form from '@component/Form';
+
+// Styled
+import { FieldInput, StyledLoginForm } from './styled';
+import Button from '@commonStyle/Button';
+
+// Constants
+import { REQUIRED_FIELD_ERROR } from '@constant/formValidateMessage';
+
+// Types
+import { ILogin } from '@type/common';
+
+// Hooks
+import { useLogin } from '@hook/authentication/useLogin';
+
+const LoginForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ILogin>();
+  const { login, isPending } = useLogin();
+
+  const onSubmit = (data: ILogin) => {
+    login(data);
+  };
+
+  return (
+    <StyledLoginForm>
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <Form.Row
+          label="Email:"
+          direction="vertical"
+          error={errors.email?.message}
+        >
+          <FieldInput
+            type="text"
+            {...register('email', {
+              required: REQUIRED_FIELD_ERROR,
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: 'Invalid email address',
+              },
+            })}
+          />
+        </Form.Row>
+        <Form.Row
+          label="Password:"
+          direction="vertical"
+          error={errors.password?.message}
+        >
+          <FieldInput
+            type="password"
+            {...register('password', {
+              required: REQUIRED_FIELD_ERROR,
+            })}
+          />
+        </Form.Row>
+
+        <Button type="submit" disabled={isPending}>Login</Button>
+      </Form>
+    </StyledLoginForm>
+  );
+};
+
+export default LoginForm;

hotel-management/src/pages/Login/index.tsx

@@ -0,0 +1,32 @@
+import { Navigate } from 'react-router-dom';
+
+// Styled
+import { LoginLayout, StyledLogo, TitleStyled } from './styled';
+
+// Assets
+import logo from '@assets/images/logo.png';
+
+// Components
+import LoginForm from './LoginForm';
+
+// Hooks
+import { useAccount } from '@hook/authentication/useAccount';
+
+const Login = () => {
+  const { account } = useAccount();
+
+  if (account) {
+    return <Navigate to={'/booking'} />;
+  }
+
+  return (
+    <LoginLayout>
+      <StyledLogo src={logo} />
+      <TitleStyled>Log In</TitleStyled>
+
+      <LoginForm />
+    </LoginLayout>
+  );
+};
+
+export default Login;

hotel-management/src/pages/Login/styled.ts

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+// Styled
+import CommonInput from '@commonStyle/CommonInput';
+
+const LoginLayout = styled.main`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--background-login);
+`;
+
+const StyledLogo = styled.img`
+  width: 250px;
+  height: 250px;
+`;
+
+const TitleStyled = styled.h1`
+  font-size: var(--fs-md);
+`;
+
+const StyledLoginForm = styled.div`
+  background-color: var(--form-color);
+
+  border-radius: var(--radius-sm);
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  margin-top: 20px;
+  padding: 30px 50px;
+`;
+
+const FieldInput = styled.input`
+  ${CommonInput}
+
+  width: 300px;
+`
+
+export { LoginLayout, StyledLogo, TitleStyled, StyledLoginForm, FieldInput };