Implement create account function

hotel-management/src/App.tsx

@@ -19,6 +19,7 @@ import Account from '@src/pages/Account';
 
 // Constants
 import * as PATH from './constants/path';
+import SignUpAccount from "@src/pages/SignUpAccount";
 
 const queryClient = new QueryClient();
 
@@ -41,6 +42,7 @@ function App() {
                 <Route path={PATH.USER} element={<User />} />
                 <Route path={PATH.ROOM} element={<Room />} />
                 <Route path={PATH.ACCOUNT} element={<Account />} />
+                <Route path={PATH.SIGN_UP_ACCOUNT} element={<SignUpAccount />} />
               </Route>
               <Route path={PATH.LOGIN} element={<Login />} />
               <Route path={PATH.OTHER_PATH} element={<NotFound />} />

hotel-management/src/components/Header/index.tsx

@@ -2,17 +2,21 @@
 import HeaderMenu from '../HeaderMenu';
 
 // Styled
-import { StyledHeader } from './styled';
+import {StyledHeader} from './styled';
 
 interface IHeader {
   accountName: string;
 }
 
-const Header = ({ accountName }: IHeader) => {
+const Header = ({accountName}: IHeader) => {
   return (
     <StyledHeader>
-      <p>Hi, {accountName}!</p>
-      <HeaderMenu />
+      <p>Hi, {
+        accountName
+          ? accountName
+          : 'Admin'
+      }!</p>
+      <HeaderMenu/>
     </StyledHeader>
   );
 };

hotel-management/src/components/Nav/index.tsx

@@ -7,7 +7,8 @@ import { BsHouseDoorFill } from 'react-icons/bs';
 import { StyledNav, StyledNavLink } from './styled';
 
 // Constants
-import { BOOKING, ROOM, USER } from '@src/constants/path';
+import {BOOKING, ROOM, SIGN_UP_ACCOUNT, USER} from '@src/constants/path';
+import {FaUserPlus} from "react-icons/fa6";
 
 const Nav = () => {
   return (
@@ -24,6 +25,10 @@ const Nav = () => {
         <BsHouseDoorFill />
         <span>Room</span>
       </StyledNavLink>
+      <StyledNavLink to={SIGN_UP_ACCOUNT}>
+        <FaUserPlus />
+        <span>Create Account</span>
+      </StyledNavLink>
     </StyledNav>
   );
 };

hotel-management/src/constants/formValidateMessage.ts

@@ -1,17 +1,16 @@
 const INVALID_FIELD = 'This field is invalid format!';
 const INVALID_PHONE = 'Phone number is invalid!';
 const REQUIRED_FIELD_ERROR = 'This field is required!';
-const INVALID_DISCOUNT = 'Discount should be greater than 0 and less than 100!';
 const PASSWORD_CONDITION =
   'Your password must have 1 uppercase, 1 lowercase, 1 special character, min 1 number and the length between from 8 to 16!';
 const INVALID_PASSWORD = 'Invalid password';
 const PASSWORD_NOT_MATCH = 'Password not match!';
 const PASSWORD_NOT_MATCH_REQUIREMENT = 'Password not match the requirement!';
 const INVALID_EMAIL = 'Invalid email address';
+const INVALID_STRING = 'This field need more than 5 characters!';
 
 export {
   REQUIRED_FIELD_ERROR,
-  INVALID_DISCOUNT,
   INVALID_FIELD,
   INVALID_PHONE,
   PASSWORD_CONDITION,
@@ -19,4 +18,5 @@ export {
   PASSWORD_NOT_MATCH,
   PASSWORD_NOT_MATCH_REQUIREMENT,
   INVALID_EMAIL,
+  INVALID_STRING
 };

hotel-management/src/constants/path.ts

@@ -2,6 +2,7 @@ const BOOKING = '/booking';
 const USER = '/user';
 const ROOM = '/room';
 const ACCOUNT = '/account';
+const SIGN_UP_ACCOUNT = '/createAccount'
 const OTHER_PATH = '*';
 const LOGIN = 'login';
 
@@ -12,4 +13,5 @@ export {
   ACCOUNT,
   OTHER_PATH,
   LOGIN,
+  SIGN_UP_ACCOUNT,
 }

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

@@ -35,7 +35,7 @@ const StyledLoginForm = styled.div`
 `;
 
 const FieldInput = styled.input`
-  ${CommonInput}
+  ${CommonInput};
 
   width: 300px;
 `

hotel-management/src/services/authenticationService.ts

@@ -6,6 +6,7 @@ import supabase from './supabaseService';
 
 // Types
 import { IAccount } from '@src/types/account';
+import toast from 'react-hot-toast';
 
 /**
  * Login services
@@ -82,4 +83,30 @@ const updateAccount = async ({ fullName, password }: IAccount) => {
   return data;
 };
 
-export { login, logout, getCurrentAccount, updateAccount };
+const createAccount = async ({ email, password }: IAccount) => {
+  if (!email || !password) {
+    toast.error('Email and password is not valid!');
+
+    return;
+  }
+
+  const { data, error } = await supabase.auth.signUp({
+    email,
+    password,
+  });
+
+  if (error) {
+    console.error(error.message);
+    throw new Error(error.message);
+  }
+
+  return data;
+};
+
+export {
+  login,
+  logout,
+  getCurrentAccount,
+  updateAccount,
+  createAccount
+};

hotel-management/src/types/account.ts

@@ -1,4 +1,5 @@
 interface IAccount {
+  email?: string;
   fullName?: string;
   password?: string;
 }