= ({
if (!isAuthenticated) {
- return (
- = ({
children
}) => {
- const location = useLocation();
const { isAuthenticated, userInfo, isLoading } = useAuthStore();
+ const { openModal } = useAuthModal();
+ useEffect(() => {
+ if (!isLoading && !isAuthenticated) {
+ openModal('login');
+ }
+ }, [isLoading, isAuthenticated, openModal]);
+
if (isLoading) {
return (
= ({
if (!isAuthenticated) {
- return (
- = ({
children
}) => {
- const location = useLocation();
const { isAuthenticated, isLoading } = useAuthStore();
+ const { openModal } = useAuthModal();
+
+
+ useEffect(() => {
+ if (!isLoading && !isAuthenticated) {
+ openModal('login');
+ }
+ }, [isLoading, isAuthenticated, openModal]);
if (isLoading) {
@@ -34,13 +41,7 @@ const ProtectedRoute: React.FC = ({
if (!isAuthenticated) {
- return (
- = ({
children
}) => {
- const location = useLocation();
const { isAuthenticated, userInfo, isLoading } = useAuthStore();
+ const { openModal } = useAuthModal();
+ useEffect(() => {
+ if (!isLoading && !isAuthenticated) {
+ openModal('login');
+ }
+ }, [isLoading, isAuthenticated, openModal]);
+
if (isLoading) {
return (
= ({
if (!isAuthenticated) {
- return (
- = ({
onLogout
}) => {
const { settings } = useCompanySettings();
+ const { openModal } = useAuthModal();
const displayPhone = settings.company_phone || '+1 (234) 567-890';
@@ -174,8 +176,8 @@ const Header: React.FC = ({
>
{!isAuthenticated ? (
<>
- openModal('login')}
className="flex items-center space-x-2
px-5 py-2 text-white/90
hover:text-[#d4af37] transition-all duration-300
@@ -184,9 +186,9 @@ const Header: React.FC = ({
@@ -402,37 +404,37 @@ const Header: React.FC = ({
>
{!isAuthenticated ? (
<>
-
- setIsMobileMenuOpen(false)
- }
+
+
) : (
<>
diff --git a/Frontend/src/components/layout/SidebarAdmin.tsx b/Frontend/src/components/layout/SidebarAdmin.tsx
index d4b2a42c..7f6d5219 100644
--- a/Frontend/src/components/layout/SidebarAdmin.tsx
+++ b/Frontend/src/components/layout/SidebarAdmin.tsx
@@ -35,7 +35,7 @@ const SidebarAdmin: React.FC = ({
const handleLogout = async () => {
try {
await logout();
- navigate('/login');
+ navigate('/');
if (isMobile) {
setIsMobileOpen(false);
}
diff --git a/Frontend/src/components/layout/SidebarStaff.tsx b/Frontend/src/components/layout/SidebarStaff.tsx
index 373c6f7d..b20caca2 100644
--- a/Frontend/src/components/layout/SidebarStaff.tsx
+++ b/Frontend/src/components/layout/SidebarStaff.tsx
@@ -36,7 +36,7 @@ const SidebarStaff: React.FC = ({
const handleLogout = async () => {
try {
await logout();
- navigate('/login');
+ navigate('/');
if (isMobile) {
setIsMobileOpen(false);
}
diff --git a/Frontend/src/components/modals/AuthModalManager.tsx b/Frontend/src/components/modals/AuthModalManager.tsx
new file mode 100644
index 00000000..3d79942b
--- /dev/null
+++ b/Frontend/src/components/modals/AuthModalManager.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useAuthModal } from '../../contexts/AuthModalContext';
+import LoginModal from './LoginModal';
+import RegisterModal from './RegisterModal';
+import ForgotPasswordModal from './ForgotPasswordModal';
+import ResetPasswordModal from './ResetPasswordModal';
+
+const AuthModalManager: React.FC = () => {
+ const { isOpen, modalType, resetPasswordParams } = useAuthModal();
+
+ if (!isOpen) {
+ return null;
+ }
+
+ switch (modalType) {
+ case 'login':
+ return ({
+ resolver: yupResolver(forgotPasswordSchema),
+ defaultValues: {
+ email: '',
+ },
+ });
+
+ const onSubmit = async (data: ForgotPasswordFormData) => {
+ try {
+ clearError();
+ setSubmittedEmail(data.email);
+ await forgotPassword({ email: data.email });
+ setIsSuccess(true);
+ } catch (error) {
+ console.error('Forgot password error:', error);
+ }
+ };
+
+ // Handle escape key
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ closeModal();
+ }
+ };
+ document.addEventListener('keydown', handleEscape);
+ return () => document.removeEventListener('keydown', handleEscape);
+ }, [closeModal]);
+
+ return (
+ ;
+
+const LoginModal: React.FC = () => {
+ const { closeModal, openModal } = useAuthModal();
+ const { login, verifyMFA, isLoading, error, clearError, requiresMFA, clearMFA, isAuthenticated } = useAuthStore();
+ const { settings } = useCompanySettings();
+
+ const [showPassword, setShowPassword] = useState(false);
+ const [recaptchaToken, setRecaptchaToken] = useState(null);
+
+ const {
+ register: registerMFA,
+ handleSubmit: handleSubmitMFA,
+ formState: { errors: mfaErrors },
+ } = useForm({
+ resolver: yupResolver(mfaTokenSchema),
+ defaultValues: {
+ mfaToken: '',
+ },
+ });
+
+ // Close modal on successful authentication
+ useEffect(() => {
+ if (!isLoading && isAuthenticated && !requiresMFA) {
+ closeModal();
+ }
+ }, [isLoading, isAuthenticated, requiresMFA, closeModal]);
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm({
+ resolver: yupResolver(loginSchema),
+ defaultValues: {
+ email: '',
+ password: '',
+ rememberMe: false,
+ },
+ });
+
+ const onSubmit = async (data: LoginFormData) => {
+ try {
+ clearError();
+
+ if (recaptchaToken) {
+ try {
+ const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
+ if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
+ toast.error('reCAPTCHA verification failed. Please try again.');
+ setRecaptchaToken(null);
+ return;
+ }
+ } catch (error) {
+ toast.error('reCAPTCHA verification failed. Please try again.');
+ setRecaptchaToken(null);
+ return;
+ }
+ }
+
+ await login({
+ email: data.email,
+ password: data.password,
+ rememberMe: data.rememberMe,
+ });
+
+ setRecaptchaToken(null);
+ } catch (error) {
+ console.error('Login error:', error);
+ setRecaptchaToken(null);
+ }
+ };
+
+ const onSubmitMFA = async (data: MFATokenFormData) => {
+ try {
+ clearError();
+ await verifyMFA(data.mfaToken);
+ } catch (error) {
+ console.error('MFA verification error:', error);
+ }
+ };
+
+ const handleBackToLogin = () => {
+ clearMFA();
+ clearError();
+ };
+
+ // Handle escape key
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ closeModal();
+ }
+ };
+ document.addEventListener('keydown', handleEscape);
+ return () => document.removeEventListener('keydown', handleEscape);
+ }, [closeModal]);
+
+ return (
+ (null);
+
+ useEffect(() => {
+ if (!isLoading && isAuthenticated) {
+ closeModal();
+ }
+ }, [isLoading, isAuthenticated, closeModal]);
+
+ const {
+ register,
+ handleSubmit,
+ watch,
+ formState: { errors },
+ } = useForm({
+ resolver: yupResolver(registerSchema),
+ defaultValues: {
+ name: '',
+ email: '',
+ password: '',
+ confirmPassword: '',
+ phone: '',
+ },
+ });
+
+ const password = watch('password');
+
+ const getPasswordStrength = (pwd: string) => {
+ if (!pwd) return { strength: 0, label: '', color: '' };
+
+ let strength = 0;
+ if (pwd.length >= 8) strength++;
+ if (/[a-z]/.test(pwd)) strength++;
+ if (/[A-Z]/.test(pwd)) strength++;
+ if (/\d/.test(pwd)) strength++;
+ if (/[@$!%*?&]/.test(pwd)) strength++;
+
+ const labels = [
+ { label: 'Very Weak', color: 'bg-red-500' },
+ { label: 'Weak', color: 'bg-orange-500' },
+ { label: 'Medium', color: 'bg-yellow-500' },
+ { label: 'Strong', color: 'bg-blue-500' },
+ { label: 'Very Strong', color: 'bg-green-500' },
+ ];
+
+ return { strength, ...labels[strength] };
+ };
+
+ const passwordStrength = getPasswordStrength(password || '');
+
+ const onSubmit = async (data: RegisterFormData) => {
+ try {
+ clearError();
+
+ if (recaptchaToken) {
+ try {
+ const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
+ if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
+ toast.error('reCAPTCHA verification failed. Please try again.');
+ setRecaptchaToken(null);
+ return;
+ }
+ } catch (error) {
+ toast.error('reCAPTCHA verification failed. Please try again.');
+ setRecaptchaToken(null);
+ return;
+ }
+ }
+
+ await registerUser({
+ name: data.name,
+ email: data.email,
+ password: data.password,
+ phone: data.phone,
+ });
+
+ setRecaptchaToken(null);
+ } catch (error) {
+ console.error('Register error:', error);
+ setRecaptchaToken(null);
+ }
+ };
+
+ // Handle escape key
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ closeModal();
+ }
+ };
+ document.addEventListener('keydown', handleEscape);
+ return () => document.removeEventListener('keydown', handleEscape);
+ }, [closeModal]);
+
+ return (
+
{
+ if (e.target === e.currentTarget) {
+ closeModal();
+ }
+ }}
+ >
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ );
+};
+
+export default ForgotPasswordModal;
+
diff --git a/Frontend/src/components/modals/LoginModal.tsx b/Frontend/src/components/modals/LoginModal.tsx
new file mode 100644
index 00000000..e550ea53
--- /dev/null
+++ b/Frontend/src/components/modals/LoginModal.tsx
@@ -0,0 +1,390 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { X, Eye, EyeOff, LogIn, Loader2, Mail, Lock, Shield, ArrowLeft } from 'lucide-react';
+import useAuthStore from '../../store/useAuthStore';
+import { loginSchema, LoginFormData } from '../../utils/validationSchemas';
+import { useCompanySettings } from '../../contexts/CompanySettingsContext';
+import { useAuthModal } from '../../contexts/AuthModalContext';
+import * as yup from 'yup';
+import { toast } from 'react-toastify';
+import Recaptcha from '../common/Recaptcha';
+import { recaptchaService } from '../../services/api/systemSettingsService';
+
+const mfaTokenSchema = yup.object().shape({
+ mfaToken: yup
+ .string()
+ .required('MFA token is required')
+ .min(6, 'MFA token must be 6 digits')
+ .max(8, 'MFA token must be 6-8 characters')
+ .matches(/^\d+$|^[A-Z0-9]{8}$/, 'Invalid token format'),
+});
+
+type MFATokenFormData = yup.InferType
+ {/* Close button */}
+
+
+
+
+ {/* Header */}
+
+
+
+
+ {isSuccess ? (
+
+ {settings.company_logo_url ? (
+ )
+ ) : (
+
+ {settings.company_tagline && (
+
+
+ )}
+ + {settings.company_tagline} +
+ )} ++ Forgot Password? +
++ Enter your email to receive a password reset link for {settings.company_name || 'Luxury Hotel'} +
+
+
+ ) : (
+
+ )}
+
+ {!isSuccess && (
+
+
+
+
+
+
+
+
+ + Email Sent! +
++ We have sent a password reset link to +
++ {submittedEmail} +
+
+
+
+ + Note: +
+-
+
- Link is valid for 1 hour +
- Check your Spam/Junk folder +
- If you don't receive the email, please try again +
+
+
+
+
+
+
+ )}
+
+ {!isSuccess && (
+ + Don't have an account?{' '} + +
+
+
+ )}
+ + Need Help? +
++ If you're having trouble resetting your password, please contact our support team via email{' '} + + {supportEmail} + + {supportPhone && ( + <> + {' '}or hotline{' '} + + {supportPhone} + + + )} +
+ {
+ if (e.target === e.currentTarget) {
+ closeModal();
+ }
+ }}
+ >
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ );
+};
+
+export default LoginModal;
+
diff --git a/Frontend/src/components/modals/RegisterModal.tsx b/Frontend/src/components/modals/RegisterModal.tsx
new file mode 100644
index 00000000..90307865
--- /dev/null
+++ b/Frontend/src/components/modals/RegisterModal.tsx
@@ -0,0 +1,419 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { X, Eye, EyeOff, UserPlus, Loader2, Mail, Lock, User, Phone, CheckCircle2, XCircle } from 'lucide-react';
+import useAuthStore from '../../store/useAuthStore';
+import { registerSchema, RegisterFormData } from '../../utils/validationSchemas';
+import { useCompanySettings } from '../../contexts/CompanySettingsContext';
+import { useAuthModal } from '../../contexts/AuthModalContext';
+import { toast } from 'react-toastify';
+import Recaptcha from '../common/Recaptcha';
+import { recaptchaService } from '../../services/api/systemSettingsService';
+
+const PasswordRequirement: React.FC<{ met: boolean; text: string }> = ({ met, text }) => (
+
+ {/* Close button */}
+
+
+
+
+ {/* Header */}
+
+
+
+
+ {requiresMFA ? (
+
+ ) : (
+
+ )}
+
+ {!requiresMFA && (
+
+ {settings.company_logo_url ? (
+
+ ) : (
+
+ {settings.company_tagline && (
+
+
+ )}
+ + {settings.company_tagline} +
+ )} ++ {requiresMFA ? 'Verify Your Identity' : 'Welcome Back'} +
++ {requiresMFA + ? 'Enter the 6-digit code from your authenticator app' + : `Sign in to ${settings.company_name || 'Luxury Hotel'}`} +
+
+
+ )}
+ + Don't have an account?{' '} + +
+
+ {met ? (
+
+);
+
+const RegisterModal: React.FC = () => {
+ const { closeModal, openModal } = useAuthModal();
+ const { register: registerUser, isLoading, error, clearError, isAuthenticated } = useAuthStore();
+ const { settings } = useCompanySettings();
+
+ const [showPassword, setShowPassword] = useState(false);
+ const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+ const [recaptchaToken, setRecaptchaToken] = useState {
+ if (e.target === e.currentTarget) {
+ closeModal();
+ }
+ }}
+ >
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+ = ({ token }) => {
+ const { closeModal, openModal } = useAuthModal();
+ const { resetPassword, isLoading, error, clearError, isAuthenticated } = useAuthStore();
+ const { settings } = useCompanySettings();
+
+ const [showPassword, setShowPassword] = useState(false);
+ const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+ const [isSuccess, setIsSuccess] = useState(false);
+
+ // Close modal on successful reset
+ useEffect(() => {
+ if (!isLoading && isAuthenticated) {
+ setTimeout(() => {
+ closeModal();
+ openModal('login');
+ }, 2000);
+ }
+ }, [isLoading, isAuthenticated, closeModal, openModal]);
+
+ const {
+ register,
+ handleSubmit,
+ watch,
+ formState: { errors },
+ } = useForm({
+ resolver: yupResolver(resetPasswordSchema),
+ defaultValues: {
+ password: '',
+ confirmPassword: '',
+ },
+ });
+
+ const password = watch('password');
+
+ const getPasswordStrength = (pwd: string) => {
+ if (!pwd) return { strength: 0, label: '', color: '' };
+
+ let strength = 0;
+ if (pwd.length >= 8) strength++;
+ if (/[a-z]/.test(pwd)) strength++;
+ if (/[A-Z]/.test(pwd)) strength++;
+ if (/\d/.test(pwd)) strength++;
+ if (/[@$!%*?&]/.test(pwd)) strength++;
+
+ const labels = [
+ { label: 'Very Weak', color: 'bg-red-500' },
+ { label: 'Weak', color: 'bg-orange-500' },
+ { label: 'Medium', color: 'bg-yellow-500' },
+ { label: 'Strong', color: 'bg-blue-500' },
+ { label: 'Very Strong', color: 'bg-green-500' },
+ ];
+
+ return { strength, ...labels[strength] };
+ };
+
+ const passwordStrength = getPasswordStrength(password || '');
+
+ const onSubmit = async (data: ResetPasswordFormData) => {
+ if (!token) {
+ return;
+ }
+
+ try {
+ clearError();
+ await resetPassword({
+ token,
+ password: data.password,
+ confirmPassword: data.confirmPassword,
+ });
+ setIsSuccess(true);
+ } catch (error) {
+ console.error('Reset password error:', error);
+ }
+ };
+
+ const isTokenError = error?.includes('token') || error?.includes('expired');
+ const isReuseError = error?.toLowerCase().includes('must be different') || error?.toLowerCase().includes('different from old');
+
+ // Handle escape key
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape' && !isSuccess) {
+ closeModal();
+ }
+ };
+ document.addEventListener('keydown', handleEscape);
+ return () => document.removeEventListener('keydown', handleEscape);
+ }, [closeModal, isSuccess]);
+
+ if (!token) {
+ return null;
+ }
+
+ return (
+ (undefined);
+
+export const AuthModalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [modalType, setModalType] = useState(null);
+ const [resetPasswordParams, setResetPasswordParams] = useState(null);
+
+ const openModal = useCallback((type: AuthModalType, params?: ResetPasswordParams) => {
+ setModalType(type);
+ setResetPasswordParams(params || null);
+ setIsOpen(true);
+ document.body.style.overflow = 'hidden';
+ }, []);
+
+ const closeModal = useCallback(() => {
+ setIsOpen(false);
+ setModalType(null);
+ setResetPasswordParams(null);
+ document.body.style.overflow = 'unset';
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useAuthModal = () => {
+ const context = useContext(AuthModalContext);
+ if (context === undefined) {
+ throw new Error('useAuthModal must be used within an AuthModalProvider');
+ }
+ return context;
+};
+
diff --git a/Frontend/src/pages/NotFoundPage.tsx b/Frontend/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..1726a5c3
--- /dev/null
+++ b/Frontend/src/pages/NotFoundPage.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Home, Hotel, AlertCircle } from 'lucide-react';
+import { useCompanySettings } from '../contexts/CompanySettingsContext';
+
+const NotFoundPage: React.FC = () => {
+ const { settings } = useCompanySettings();
+
+ return (
+ ({
- resolver: yupResolver(forgotPasswordSchema),
- defaultValues: {
- email: '',
- },
- });
-
-
- const onSubmit = async (data: ForgotPasswordFormData) => {
- try {
- clearError();
- setSubmittedEmail(data.email);
- await forgotPassword({ email: data.email });
-
-
- setIsSuccess(true);
- } catch (error) {
-
- console.error('Forgot password error:', error);
- }
- };
-
- return (
- ;
-
-const LoginPage: React.FC = () => {
- const navigate = useNavigate();
- const location = useLocation();
- const { login, verifyMFA, isLoading, error, clearError, requiresMFA, clearMFA, userInfo, isAuthenticated } =
- useAuthStore();
- const { settings } = useCompanySettings();
-
- const [showPassword, setShowPassword] = useState(false);
- const [recaptchaToken, setRecaptchaToken] = useState(null);
-
-
- const {
- register: registerMFA,
- handleSubmit: handleSubmitMFA,
- formState: { errors: mfaErrors },
- } = useForm({
- resolver: yupResolver(mfaTokenSchema),
- defaultValues: {
- mfaToken: '',
- },
- });
-
-
- useEffect(() => {
- if (!isLoading && isAuthenticated && !requiresMFA && userInfo) {
- if (userInfo.role === 'admin') {
- navigate('/admin/dashboard', { replace: true });
- } else if (userInfo.role === 'staff') {
- navigate('/staff/dashboard', { replace: true });
- } else {
- navigate('/', { replace: true });
- }
- }
- }, [isLoading, isAuthenticated, requiresMFA, userInfo, navigate]);
-
-
- useEffect(() => {
- const companyName = settings.company_name || 'Luxury Hotel';
- document.title = requiresMFA ? `Verify Identity - ${companyName}` : `Login - ${companyName}`;
- }, [settings.company_name, requiresMFA]);
-
-
- const {
- register,
- handleSubmit,
- formState: { errors },
- } = useForm({
- resolver: yupResolver(loginSchema),
- defaultValues: {
- email: '',
- password: '',
- rememberMe: false,
- },
- });
-
-
- const onSubmit = async (data: LoginFormData) => {
- try {
- clearError();
-
-
- if (recaptchaToken) {
- try {
- const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
- if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
- toast.error('reCAPTCHA verification failed. Please try again.');
- setRecaptchaToken(null);
- return;
- }
- } catch (error) {
- toast.error('reCAPTCHA verification failed. Please try again.');
- setRecaptchaToken(null);
- return;
- }
- }
-
- await login({
- email: data.email,
- password: data.password,
- rememberMe: data.rememberMe,
- });
-
-
- if (!requiresMFA) {
-
- const getRedirectPath = () => {
- const from = location.state?.from?.pathname;
- if (from) return from;
-
- const currentUserInfo = useAuthStore.getState().userInfo;
- if (currentUserInfo?.role === 'admin') {
- return '/admin/dashboard';
- } else if (currentUserInfo?.role === 'staff') {
- return '/staff/dashboard';
- }
- return '/dashboard';
- };
-
- navigate(getRedirectPath(), { replace: true });
- }
- setRecaptchaToken(null);
- } catch (error) {
-
- console.error('Login error:', error);
- setRecaptchaToken(null);
- }
- };
-
-
- const onSubmitMFA = async (data: MFATokenFormData) => {
- try {
- clearError();
- await verifyMFA(data.mfaToken);
-
-
- const getRedirectPath = () => {
- const from = location.state?.from?.pathname;
- if (from) return from;
-
- const currentUserInfo = useAuthStore.getState().userInfo;
- if (currentUserInfo?.role === 'admin') {
- return '/admin/dashboard';
- } else if (currentUserInfo?.role === 'staff') {
- return '/staff/dashboard';
- }
- return '/dashboard';
- };
-
- navigate(getRedirectPath(), { replace: true });
- } catch (error) {
-
- console.error('MFA verification error:', error);
- }
- };
-
-
- const handleBackToLogin = () => {
- clearMFA();
- clearError();
- };
-
- return (
- (null);
-
-
- useEffect(() => {
- const companyName = settings.company_name || 'Luxury Hotel';
- document.title = `Register - ${companyName}`;
- }, [settings.company_name]);
-
-
- const {
- register,
- handleSubmit,
- watch,
- formState: { errors },
- } = useForm({
- resolver: yupResolver(registerSchema),
- defaultValues: {
- name: '',
- email: '',
- password: '',
- confirmPassword: '',
- phone: '',
- },
- });
-
-
- const password = watch('password');
-
-
- const getPasswordStrength = (pwd: string) => {
- if (!pwd) return { strength: 0, label: '', color: '' };
-
- let strength = 0;
- if (pwd.length >= 8) strength++;
- if (/[a-z]/.test(pwd)) strength++;
- if (/[A-Z]/.test(pwd)) strength++;
- if (/\d/.test(pwd)) strength++;
- if (/[@$!%*?&]/.test(pwd)) strength++;
-
- const labels = [
- { label: 'Very Weak', color: 'bg-red-500' },
- { label: 'Weak', color: 'bg-orange-500' },
- { label: 'Medium', color: 'bg-yellow-500' },
- { label: 'Strong', color: 'bg-blue-500' },
- { label: 'Very Strong', color: 'bg-green-500' },
- ];
-
- return { strength, ...labels[strength] };
- };
-
- const passwordStrength = getPasswordStrength(password || '');
-
-
- const onSubmit = async (data: RegisterFormData) => {
- try {
- clearError();
-
-
- if (recaptchaToken) {
- try {
- const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
- if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
- toast.error('reCAPTCHA verification failed. Please try again.');
- setRecaptchaToken(null);
- return;
- }
- } catch (error) {
- toast.error('reCAPTCHA verification failed. Please try again.');
- setRecaptchaToken(null);
- return;
- }
- }
-
- await registerUser({
- name: data.name,
- email: data.email,
- password: data.password,
- phone: data.phone,
- });
-
-
- navigate('/login', { replace: true });
- setRecaptchaToken(null);
- } catch (error) {
-
- console.error('Register error:', error);
- setRecaptchaToken(null);
- }
- };
-
- return (
-
+ {/* Close button */}
+
+
+
+ );
+};
+
+export default RegisterModal;
+
diff --git a/Frontend/src/components/modals/ResetPasswordModal.tsx b/Frontend/src/components/modals/ResetPasswordModal.tsx
new file mode 100644
index 00000000..7ab24a7c
--- /dev/null
+++ b/Frontend/src/components/modals/ResetPasswordModal.tsx
@@ -0,0 +1,390 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { X, Eye, EyeOff, Lock, Loader2, CheckCircle2, XCircle, AlertCircle, KeyRound } from 'lucide-react';
+import useAuthStore from '../../store/useAuthStore';
+import { resetPasswordSchema, ResetPasswordFormData } from '../../utils/validationSchemas';
+import { useCompanySettings } from '../../contexts/CompanySettingsContext';
+import { useAuthModal } from '../../contexts/AuthModalContext';
+
+const PasswordRequirement: React.FC<{ met: boolean; text: string }> = ({ met, text }) => (
+
+ {/* Header */}
+
+
+
+
+
+ {settings.company_logo_url ? (
+
+ ) : (
+
+ {settings.company_tagline && (
+
+
+ )}
+ + {settings.company_tagline} +
+ )} ++ Create Account +
++ Join {settings.company_name || 'Luxury Hotel'} for exclusive benefits +
+
+ {met ? (
+
+);
+
+interface ResetPasswordModalProps {
+ token: string;
+}
+
+const ResetPasswordModal: React.FC {
+ if (e.target === e.currentTarget && !isSuccess) {
+ closeModal();
+ }
+ }}
+ >
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ );
+};
+
+export default ResetPasswordModal;
+
diff --git a/Frontend/src/contexts/AuthModalContext.tsx b/Frontend/src/contexts/AuthModalContext.tsx
new file mode 100644
index 00000000..0aa2cc4e
--- /dev/null
+++ b/Frontend/src/contexts/AuthModalContext.tsx
@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+
+type AuthModalType = 'login' | 'register' | 'forgot-password' | 'reset-password' | null;
+type ResetPasswordParams = { token: string } | null;
+
+interface AuthModalContextType {
+ isOpen: boolean;
+ modalType: AuthModalType;
+ resetPasswordParams: ResetPasswordParams;
+ openModal: (type: AuthModalType, params?: ResetPasswordParams) => void;
+ closeModal: () => void;
+}
+
+const AuthModalContext = createContext
+ {/* Close button */}
+ {!isSuccess && (
+
+ )}
+
+
+
+ {/* Header */}
+
+
+
+
+ {isSuccess ? (
+
+ {settings.company_logo_url ? (
+
+ ) : (
+
+ {settings.company_tagline && (
+
+
+ )}
+ + {settings.company_tagline} +
+ )} ++ {isSuccess ? 'Complete!' : 'Reset Password'} +
++ {isSuccess + ? 'Password has been reset successfully' + : `Enter a new password for your ${settings.company_name || 'Luxury Hotel'} account`} +
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+ + Password reset successful! +
++ Your password has been updated. +
++ You can now login with your new password. +
+
+
+
+
+ + Redirecting to login... +
+
+
+
+ {/* Background Pattern */}
+
+
+
+ );
+};
+
+export default NotFoundPage;
+
diff --git a/Frontend/src/pages/admin/DashboardPage.tsx b/Frontend/src/pages/admin/DashboardPage.tsx
index 6d19c8e5..c9cab694 100644
--- a/Frontend/src/pages/admin/DashboardPage.tsx
+++ b/Frontend/src/pages/admin/DashboardPage.tsx
@@ -34,7 +34,7 @@ const DashboardPage: React.FC = () => {
const handleLogout = async () => {
try {
await logout();
- navigate('/login');
+ navigate('/');
} catch (error) {
console.error('Logout error:', error);
}
diff --git a/Frontend/src/pages/auth/ForgotPasswordPage.tsx b/Frontend/src/pages/auth/ForgotPasswordPage.tsx
deleted file mode 100644
index 62a75f51..00000000
--- a/Frontend/src/pages/auth/ForgotPasswordPage.tsx
+++ /dev/null
@@ -1,385 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { Link } from 'react-router-dom';
-import {
- Mail,
- ArrowLeft,
- Send,
- Loader2,
- CheckCircle,
- Hotel,
- Home,
-} from 'lucide-react';
-import useAuthStore from '../../store/useAuthStore';
-import {
- forgotPasswordSchema,
- ForgotPasswordFormData,
-} from '../../utils/validationSchemas';
-import { useCompanySettings } from '../../contexts/CompanySettingsContext';
-
-const ForgotPasswordPage: React.FC = () => {
- const { forgotPassword, isLoading, error, clearError } =
- useAuthStore();
- const { settings } = useCompanySettings();
-
- const [isSuccess, setIsSuccess] = useState(false);
- const [submittedEmail, setSubmittedEmail] = useState('');
-
-
- const supportEmail = settings.company_email || 'support@hotel.com';
- const supportPhone = settings.company_phone || '1900-xxxx';
-
-
- useEffect(() => {
- const companyName = settings.company_name || 'Luxury Hotel';
- document.title = `Forgot Password - ${companyName}`;
- }, [settings.company_name]);
-
-
- const {
- register,
- handleSubmit,
- formState: { errors },
- } = useForm
+ {/* Logo */}
+
+
+ {settings.company_logo_url ? (
+
+ ) : (
+
+
+ {/* Tagline */}
+ {settings.company_tagline && (
+
+
+ )}
+ + {settings.company_tagline} +
+ )} + + {/* 404 Number */} +
+
+
+ {/* Error Icon */}
+ + 404 +
+
+
+
+ {/* Main Message */}
+
+
+
+
+
+ {/* Additional Info */}
+ + Page Not Found +
++ We're sorry, but the page you're looking for doesn't exist or has been moved. +
+
+
+
+ {/* Home Button */}
+ + The page you requested could not be found on our server. +
+
+
+
+
+
+ {/* Decorative Elements */}
+
+
+
+
+
+
-
- );
-};
-
-export default ForgotPasswordPage;
diff --git a/Frontend/src/pages/auth/LoginPage.tsx b/Frontend/src/pages/auth/LoginPage.tsx
deleted file mode 100644
index 2a7f44f2..00000000
--- a/Frontend/src/pages/auth/LoginPage.tsx
+++ /dev/null
@@ -1,540 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { Link, useNavigate, useLocation } from 'react-router-dom';
-import {
- Eye,
- EyeOff,
- LogIn,
- Loader2,
- Mail,
- Lock,
- Hotel,
- Home,
- Shield,
- ArrowLeft
-} from 'lucide-react';
-import useAuthStore from '../../store/useAuthStore';
-import {
- loginSchema,
- LoginFormData
-} from '../../utils/validationSchemas';
-import { useCompanySettings } from '../../contexts/CompanySettingsContext';
-import * as yup from 'yup';
-import { toast } from 'react-toastify';
-import Recaptcha from '../../components/common/Recaptcha';
-import { recaptchaService } from '../../services/api/systemSettingsService';
-
-const mfaTokenSchema = yup.object().shape({
- mfaToken: yup
- .string()
- .required('MFA token is required')
- .min(6, 'MFA token must be 6 digits')
- .max(8, 'MFA token must be 6-8 characters')
- .matches(/^\d+$|^[A-Z0-9]{8}$/, 'Invalid token format'),
-});
-
-type MFATokenFormData = yup.InferType
- {}
-
-
-
-
- {}
-
- {settings.company_logo_url ? (
-
- ) : (
-
- {settings.company_tagline && (
-
-
- )}
- - {settings.company_tagline} -
- )} -- Forgot Password? -
-- Enter your email to receive a password reset link for {settings.company_name || 'Luxury Hotel'} -
-
- {isSuccess ? (
-
-
-
- {}
- {!isSuccess && (
-
-
- ) : (
-
-
- )}
-
-
-
-
-
-
-
-
- - Email Sent! -
-- We have sent a password reset link to -
-- {submittedEmail} -
-
-
-
- - Note: -
--
-
- Link is valid for 1 hour -
- Check your Spam/Junk folder -
- - If you don't receive the email, please try again - -
-
-
-
-
-
- {}
-
-
-
-
-
-
- )}
-
- {}
- - Don't have an account?{' '} - - Register now - -
-
-
- - Need Help? -
-- If you're having trouble resetting your password, - please contact our support team via email{' '} - - {supportEmail} - - {supportPhone && ( - <> - {' '}or hotline{' '} - - {supportPhone} - - - )} -
-
- {}
-
-
-
- );
-};
-
-export default LoginPage;
diff --git a/Frontend/src/pages/auth/RegisterPage.tsx b/Frontend/src/pages/auth/RegisterPage.tsx
deleted file mode 100644
index 67727382..00000000
--- a/Frontend/src/pages/auth/RegisterPage.tsx
+++ /dev/null
@@ -1,571 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { Link, useNavigate } from 'react-router-dom';
-import {
- Eye,
- EyeOff,
- UserPlus,
- Loader2,
- Mail,
- Lock,
- User,
- Phone,
- Hotel,
- CheckCircle2,
- XCircle,
- Home,
-} from 'lucide-react';
-import useAuthStore from '../../store/useAuthStore';
-import {
- registerSchema,
- RegisterFormData,
-} from '../../utils/validationSchemas';
-import { useCompanySettings } from '../../contexts/CompanySettingsContext';
-import { toast } from 'react-toastify';
-import Recaptcha from '../../components/common/Recaptcha';
-import { recaptchaService } from '../../services/api/systemSettingsService';
-
-const RegisterPage: React.FC = () => {
- const navigate = useNavigate();
- const { register: registerUser, isLoading, error, clearError } =
- useAuthStore();
- const { settings } = useCompanySettings();
-
- const [showPassword, setShowPassword] = useState(false);
- const [showConfirmPassword, setShowConfirmPassword] =
- useState(false);
- const [recaptchaToken, setRecaptchaToken] = useState
- {}
-
-
-
-
- {requiresMFA ? (
-
-
- {settings.company_logo_url ? (
-
- ) : (
-
- {settings.company_tagline && (
-
-
- )}
- - {settings.company_tagline} -
- )} -- {requiresMFA ? 'Verify Your Identity' : 'Welcome Back'} -
-- {requiresMFA - ? 'Enter the 6-digit code from your authenticator app' - : `Sign in to ${settings.company_name || 'Luxury Hotel'}`} -
-
-
-
- ) : (
-
- <>
-
-
-
- {}
-
-
- {}
-
-
- - Don't have an account?{' '} - - Register now - -
-
-
-
- )}
- - By logging in, you agree to our{' '} - - Terms of Service - {' '} - and{' '} - - Privacy Policy - -
-
- {}
-
-
- ({
- resolver: yupResolver(resetPasswordSchema),
- defaultValues: {
- password: '',
- confirmPassword: '',
- },
- });
-
-
- const password = watch('password');
-
-
- useEffect(() => {
- if (!token) {
- navigate('/forgot-password', { replace: true });
- }
- }, [token, navigate]);
-
-
- const getPasswordStrength = (pwd: string) => {
- if (!pwd) return { strength: 0, label: '', color: '' };
-
- let strength = 0;
- if (pwd.length >= 8) strength++;
- if (/[a-z]/.test(pwd)) strength++;
- if (/[A-Z]/.test(pwd)) strength++;
- if (/\d/.test(pwd)) strength++;
- if (/[@$!%*?&]/.test(pwd)) strength++;
-
- const labels = [
- { label: 'Very Weak', color: 'bg-red-500' },
- { label: 'Weak', color: 'bg-orange-500' },
- { label: 'Medium', color: 'bg-yellow-500' },
- { label: 'Strong', color: 'bg-blue-500' },
- { label: 'Very Strong', color: 'bg-green-500' },
- ];
-
- return { strength, ...labels[strength] };
- };
-
- const passwordStrength = getPasswordStrength(password || '');
-
-
- const onSubmit = async (data: ResetPasswordFormData) => {
- if (!token) {
- return;
- }
-
- try {
- clearError();
- await resetPassword({
- token,
- password: data.password,
- confirmPassword: data.confirmPassword,
- });
-
-
- setIsSuccess(true);
-
-
- setTimeout(() => {
- navigate('/login', { replace: true });
- }, 3000);
- } catch (error) {
-
- console.error('Reset password error:', error);
- }
- };
-
-
- const isTokenError =
- error?.includes('token') || error?.includes('expired');
-
-
- const isReuseError =
- error?.toLowerCase().includes('must be different') ||
- error?.toLowerCase().includes('different from old');
-
- return (
-
- {}
-
- );
-};
-
-const PasswordRequirement: React.FC<{
- met: boolean;
- text: string;
-}> = ({ met, text }) => (
-
-
-
- {}
-
- {settings.company_logo_url ? (
-
- ) : (
-
- {settings.company_tagline && (
-
-
- )}
- - {settings.company_tagline} -
- )} -- Create Account -
-- Join {settings.company_name || 'Luxury Hotel'} for exclusive benefits -
-
-
-
- {met ? (
-
-);
-
-export default RegisterPage;
diff --git a/Frontend/src/pages/auth/ResetPasswordPage.tsx b/Frontend/src/pages/auth/ResetPasswordPage.tsx
deleted file mode 100644
index c7936803..00000000
--- a/Frontend/src/pages/auth/ResetPasswordPage.tsx
+++ /dev/null
@@ -1,579 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { useNavigate, useParams, Link } from 'react-router-dom';
-import {
- Eye,
- EyeOff,
- Lock,
- Loader2,
- CheckCircle2,
- XCircle,
- AlertCircle,
- KeyRound,
- Hotel,
- Home,
-} from 'lucide-react';
-import useAuthStore from '../../store/useAuthStore';
-import {
- resetPasswordSchema,
- ResetPasswordFormData,
-} from '../../utils/validationSchemas';
-import { useCompanySettings } from '../../contexts/CompanySettingsContext';
-
-const ResetPasswordPage: React.FC = () => {
- const navigate = useNavigate();
- const { token } = useParams<{ token: string }>();
- const { resetPassword, isLoading, error, clearError } =
- useAuthStore();
- const { settings } = useCompanySettings();
-
- const [showPassword, setShowPassword] = useState(false);
- const [showConfirmPassword, setShowConfirmPassword] =
- useState(false);
- const [isSuccess, setIsSuccess] = useState(false);
-
-
- useEffect(() => {
- const companyName = settings.company_name || 'Luxury Hotel';
- document.title = `Reset Password - ${companyName}`;
- }, [settings.company_name]);
-
-
- const {
- register,
- handleSubmit,
- watch,
- formState: { errors },
- } = useForm
-
- );
-};
-
-const PasswordRequirement: React.FC<{
- met: boolean;
- text: string;
-}> = ({ met, text }) => (
-
- {}
-
-
-
-
- {}
-
- {settings.company_logo_url ? (
-
- ) : (
-
- {settings.company_tagline && (
-
-
- )}
- - {settings.company_tagline} -
- )} -- {isSuccess ? 'Complete!' : 'Reset Password'} -
-- {isSuccess - ? 'Password has been reset successfully' - : `Enter a new password for your ${settings.company_name || 'Luxury Hotel'} account`} -
-
- {isSuccess ? (
-
-
-
- {}
- {!isSuccess && (
-
-
- ) : (
-
-
- )}
-
-
-
-
-
-
-
-
- - Password reset successful! -
-- Your password has been updated. -
-- You can now login with your new password. -
-
-
-
-
- - Redirecting to login page... -
-
-
-
-
-
-
-
-
-
-
- )}
-
-
- -
-
- Reset link is valid for 1 hour only -
- Password is securely encrypted -
- - If the link expires, please request a new link - -
- {met ? (
-
-);
-
-export default ResetPasswordPage;
diff --git a/Frontend/src/pages/customer/FavoritesPage.tsx b/Frontend/src/pages/customer/FavoritesPage.tsx
index 771e7a73..8b314be2 100644
--- a/Frontend/src/pages/customer/FavoritesPage.tsx
+++ b/Frontend/src/pages/customer/FavoritesPage.tsx
@@ -6,9 +6,11 @@ import { RoomCard, RoomCardSkeleton } from
import useFavoritesStore from
'../../store/useFavoritesStore';
import useAuthStore from '../../store/useAuthStore';
+import { useAuthModal } from '../../contexts/AuthModalContext';
const FavoritesPage: React.FC = () => {
const { isAuthenticated } = useAuthStore();
+ const { openModal } = useAuthModal();
const {
favorites,
isLoading,
@@ -44,15 +46,15 @@ const FavoritesPage: React.FC = () => {
You need to login to view your favorites list
- openModal('login')} className="inline-block px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold" > Login - +