Create and update commons, components and types

hotel-management/src/commons/styles/Input.ts

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 // Styled
 import CommonInput from './CommonInput';
 
-type TInput = 'text' | 'checkbox' | 'hidden' | 'date';
+type TInput = 'text' | 'checkbox' | 'hidden' | 'date' | 'password';
 
 interface IInputTyped {
   type?: TInput;

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

@@ -7,10 +7,15 @@ import Sidebar from '@component/Sidebar';
 // Styled
 import { Main, StyledAppLayout } from './styled';
 
+// Hooks
+import { useAccount } from '@hook/authentication/useAccount';
+
 const AppLayout = () => {
+  const { account } = useAccount();
+
   return (
     <StyledAppLayout>
-      <Header accountName="Admin" />
+      <Header accountName={account?.user_metadata.fullName} />
       <Sidebar heading="Hotel Management" />
       <Main>
         <Outlet />

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

@@ -1,3 +1,5 @@
+import { useNavigate } from 'react-router-dom';
+
 // Components
 import { IoPersonCircleOutline } from 'react-icons/io5';
 import { HiOutlineLogout } from 'react-icons/hi';
@@ -11,6 +13,7 @@ import { useLogout } from '@hook/authentication/useLogout';
 
 const HeaderMenu = () => {
   const { logout, isPending } = useLogout();
+  const navigate = useNavigate();
 
   return (
     <StyledHeaderMenu>
@@ -19,6 +22,7 @@ const HeaderMenu = () => {
           aria-label="Profile"
           icon={<IoPersonCircleOutline />}
           iconStyle={{ size: '23px' }}
+          onClick={() => navigate('/account')}
         />
       </li>
       <li>

hotel-management/src/constants/commons.ts

@@ -56,6 +56,7 @@ const REGEX = {
   PHONE: /(84|0[3|5|7|8|9])+([0-9]{8})\b/g,
   NAME: /^[a-zA-Z]{2,}(?: [a-zA-Z]+){0,2}$/gm,
   NUMBER: /^[0-9]*$/,
+  PASSWORD: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{8,16}$/
 };
 
 export { USER_PAGE, ROOM_PAGE, FORM, REGEX, ORDERBY_OPTIONS };

hotel-management/src/constants/formValidateMessage.ts

@@ -2,5 +2,19 @@ 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!'
 
-export { REQUIRED_FIELD_ERROR, INVALID_DISCOUNT, INVALID_FIELD, INVALID_PHONE };
+export {
+  REQUIRED_FIELD_ERROR,
+  INVALID_DISCOUNT,
+  INVALID_FIELD,
+  INVALID_PHONE,
+  PASSWORD_CONDITION,
+  INVALID_PASSWORD,
+  PASSWORD_NOT_MATCH,
+  PASSWORD_NOT_MATCH_REQUIREMENT
+};

hotel-management/src/constants/messages.ts

@@ -27,6 +27,8 @@ const ERROR_CREATE_USER = "Can't create user!";
 const ERROR_UPDATE_USER = "Can't update user!";
 const ERROR_DELETE_USER = "Can't delete user!";
 
+const UPDATE_ACCOUNT_SUCCESSFUL = 'Update account successfully!';
+
 export {
   ADD_SUCCESS,
   UPDATE_SUCCESS,
@@ -50,4 +52,5 @@ export {
   ERROR_CREATE_USER,
   ERROR_UPDATE_USER,
   ERROR_DELETE_USER,
+  UPDATE_ACCOUNT_SUCCESSFUL,
 };

hotel-management/src/constants/path.ts

@@ -1,6 +1,7 @@
 export const BOOKING = '/booking';
 export const USER = '/user';
 export const ROOM = '/room';
+export const ACCOUNT = '/account';
 export const OTHER_PATH = '*';
 export const USER_PATH = 'users';
 export const ROOM_PATH = 'rooms';

hotel-management/src/types/account.ts

@@ -0,0 +1,6 @@
+interface IAccount {
+  fullName?: string;
+  password?: string;
+}
+
+export type { IAccount };