Hotel-Booking/docs/tasks_1_Authentication.md

Authentication

Function 1: Basic Layout (Header, Footer, Navbar, SidebarAdmin)

Objective

Create a foundational layout for the entire system and structure content rendering by route.

Detailed Tasks

• Create directory:

  src/components/layouts/
  

• Include:
  • Header.jsx
  • Footer.jsx
  • Navbar.jsx
  • SidebarAdmin.jsx
  • LayoutMain.jsx
• Use in LayoutMain to render dynamic content.
• Navbar changes based on login status:
  • If not logged in → display "Login / Register" button.
  • If logged in → display avatar, user name and "Logout" button.
• SidebarAdmin only displays with role = admin.

Expected Results

1. Overall layout displays stably.
2. Navbar displays dynamic content based on user status.
3. Responsive interface, compatible with desktop/mobile.

---

Function 2: Routing Configuration (react-router-dom)

Objective

Set up a standard routing system with role-based route protection.

Detailed Tasks

• Main route structure:

  <Route path="/" element={<LayoutMain />}>
      <Route index element={<HomePage />} />
      <Route path="rooms" element={<RoomListPage />} />
      <Route path="bookings" element={<BookingListPage />} />
  </Route>
  
  <Route path="/login" element={<LoginPage />} />
  <Route path="/register" element={<RegisterPage />} />
  <Route path="/forgot-password" element={<ForgotPasswordPage />} />
  <Route path="/reset-password/:token" element={<ResetPasswordPage />} />
  
  <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
  <Route path="/admin/*" element={<AdminRoute><AdminModule /></AdminRoute>} />
  

• Use ProtectedRoute and AdminRoute to check:
  • isAuthenticated
  • role === "admin"

Expected Results

1. Unauthenticated users are redirected to /login.
2. AdminRoute only allows admin access.
3. All routes work smoothly, no redirect loop errors.

---

Function 3: useAuthStore (Zustand Store)

Objective

Manage global authentication state (token, userInfo, role).

Detailed Tasks

• Create src/stores/useAuthStore.js
• Structure:

  const useAuthStore = create((set) => ({
      token: localStorage.getItem("token") || null,
      userInfo: JSON.parse(localStorage.getItem("userInfo")) || null,
      isAuthenticated: !!localStorage.getItem("token"),
  
      login: async (credentials) => { ... },
      logout: () => { ... },
      setUser: (user) => { ... },
      resetPassword: async (payload) => { ... },
  }));
  

• When login succeeds:
  • Save token + userInfo to localStorage.
• When logout:
  • Clear localStorage and reset state.

Expected Results

1. All user information is managed centrally.
2. Maintain login after page reload.
3. Easy access to userInfo in any component.

---

Function 4: Login Form

Objective

Allow users to log into the system.

Detailed Tasks

• Create LoginPage.jsx
• Use React Hook Form + Yup validation:
  • Valid email
  • Password ≥ 8 characters
• API:

  POST /api/auth/login
  

• After successful login:
  • Save token to localStorage.
  • Call setUser() to update Zustand.
  • Redirect to /dashboard.
  • Send email POST /api/notify/login-success.
• Enhanced UX:
  • Loading button when submitting form.
  • "Show/Hide password".
  • "Remember me" → save for 7 days.

Expected Results

1. Login works smoothly, displays clear error messages.
2. Email is sent when login succeeds.
3. Redirect correctly based on user role.

---

Function 5: Register Form

Objective

Allow users to register a new account.

Detailed Tasks

• Create RegisterPage.jsx
• Use React Hook Form + Yup validation:
  • Full name not empty
  • Valid email
  • Password ≥ 8 characters, contains special characters
• API:

  POST /api/auth/register
  

• After successful registration:
  • Display toast "Registration successful, please login".
  • Redirect to /login.

Expected Results

1. Users can create new accounts successfully.
2. Strict validation, smooth UX.
3. Interface consistent with login form.

---

Function 6: Forgot Password

Objective

Provide functionality to send password reset email.

Detailed Tasks

• Create ForgotPasswordPage.jsx
• API:

  POST /api/auth/forgot-password
  

• After successful send:
  • Display message "Please check your email to reset password."
  • Backend sends reset link with token:

    https://domain.com/reset-password/:token
    

Expected Results

1. Email sent successfully.
2. Clear UX, with loading and error messages.
3. User-friendly interface.

---

Function 7: Reset Password

Objective

Allow users to change password through email link.

Detailed Tasks

• Create ResetPasswordPage.jsx
• Validation:
  • New password ≥ 8 characters, contains special characters
  • Confirm password matches
• API:

  POST /api/auth/reset-password
  

• After successful password change:
  • Send confirmation email POST /api/notify/reset-success.
  • Redirect to /login.

Expected Results

1. Password updated successfully.
2. Success notification email sent.
3. Protect expired token (invalid token → redirect to forgot-password).

---

Function 8: Permissions & Route Protection (ProtectedRoute / AdminRoute)

Objective

Block unauthorized access and protect important routes.

Detailed Tasks

• Create ProtectedRoute.jsx component:

  const ProtectedRoute = ({ children }) => {
  const { isAuthenticated } = useAuthStore();
  const location = useLocation();
  return isAuthenticated ? children : <Navigate to="/login" state={{ from: location }} replace />;
  };
  

• Create AdminRoute.jsx:

  const AdminRoute = ({ children }) => {
  const { userInfo } = useAuthStore();
  return userInfo?.role === "admin" ? children : <Navigate to="/" replace />;
  };
  

Expected Results

1. Only valid users can access important routes.
2. AdminRoute ensures security for admin module.