- Welcome Back 1
+ Welcome Back
Sign in to your account to continue
diff --git a/src/pages/ProtectedRoute.tsx b/src/pages/ProtectedRoute.tsx
index 3a2f009..d19c6c5 100644
--- a/src/pages/ProtectedRoute.tsx
+++ b/src/pages/ProtectedRoute.tsx
@@ -7,9 +7,32 @@ interface ProtectedRouteProps {
}
const ProtectedRoute = ({ children }: ProtectedRouteProps): ReactElement => {
- const { isAuthenticated } = useAppSelector((state) => state.auth);
+ const { isAuthenticated, roles } = useAppSelector((state) => state.auth);
- return isAuthenticated ? <>{children} : ;
+ if (!isAuthenticated) {
+ return ;
+ }
+
+ // Check if user has super_admin role
+ // Handle both array and JSON string formats
+ let rolesArray: string[] = [];
+ if (Array.isArray(roles)) {
+ rolesArray = roles;
+ } else if (typeof roles === 'string') {
+ try {
+ rolesArray = JSON.parse(roles);
+ } catch {
+ rolesArray = [];
+ }
+ }
+ const hasSuperAdminRole = rolesArray && rolesArray.length > 0 && rolesArray.includes('super_admin');
+
+ if (!hasSuperAdminRole) {
+ // If not super_admin, redirect to tenant login
+ return ;
+ }
+
+ return <>{children};
};
export default ProtectedRoute;
diff --git a/src/pages/TenantLogin.tsx b/src/pages/TenantLogin.tsx
new file mode 100644
index 0000000..e4d67b8
--- /dev/null
+++ b/src/pages/TenantLogin.tsx
@@ -0,0 +1,361 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import type { ReactElement } from 'react';
+import { Shield } from 'lucide-react';
+import { useAppDispatch, useAppSelector } from '@/hooks/redux-hooks';
+import { loginAsync, clearError } from '@/store/authSlice';
+import { FormField } from '@/components/shared';
+import { PrimaryButton } from '@/components/shared';
+import type { LoginError } from '@/services/auth-service';
+import { showToast } from '@/utils/toast';
+
+// Zod validation schema
+const loginSchema = z.object({
+ email: z
+ .string()
+ .min(1, 'Email is required')
+ .email('Please enter a valid email address'),
+ password: z
+ .string()
+ .min(1, 'Password is required')
+ .min(6, 'Password must be at least 6 characters'),
+});
+
+type LoginFormData = z.infer;
+
+const TenantLogin = (): ReactElement => {
+ const navigate = useNavigate();
+ const dispatch = useAppDispatch();
+ const { isLoading, error, isAuthenticated, roles } = useAppSelector((state) => state.auth);
+
+ const {
+ register,
+ handleSubmit,
+ setError,
+ formState: { errors },
+ clearErrors,
+ } = useForm({
+ resolver: zodResolver(loginSchema),
+ mode: 'onBlur',
+ });
+
+ const [generalError, setGeneralError] = useState('');
+ const [rememberMe, setRememberMe] = useState(false);
+
+ // Redirect if already authenticated
+ useEffect(() => {
+ if (isAuthenticated) {
+ // Check if user is super_admin, redirect to super admin dashboard
+ // Handle both array and JSON string formats
+ let rolesArray: string[] = [];
+ if (Array.isArray(roles)) {
+ rolesArray = roles;
+ } else if (typeof roles === 'string') {
+ try {
+ rolesArray = JSON.parse(roles);
+ } catch {
+ rolesArray = [];
+ }
+ }
+ if (rolesArray.includes('super_admin')) {
+ navigate('/dashboard');
+ } else {
+ // Tenant admin - redirect to tenant dashboard
+ navigate('/tenant/dashboard');
+ }
+ }
+ }, [isAuthenticated, roles, navigate]);
+
+ // Clear errors on component mount
+ useEffect(() => {
+ dispatch(clearError());
+ setGeneralError('');
+ clearErrors();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const onSubmit = async (data: LoginFormData): Promise => {
+ setGeneralError('');
+ clearErrors();
+ dispatch(clearError());
+
+ try {
+ const result = await dispatch(loginAsync(data)).unwrap();
+ if (result) {
+ const message = result.message || 'Login successful';
+ showToast.success(message);
+
+ // Check roles after login to redirect appropriately
+ // Handle both array and JSON string formats
+ const userRoles = result.data.roles || [];
+ let rolesArray: string[] = [];
+ if (Array.isArray(userRoles)) {
+ rolesArray = userRoles;
+ } else if (typeof userRoles === 'string') {
+ try {
+ rolesArray = JSON.parse(userRoles);
+ } catch {
+ rolesArray = [];
+ }
+ }
+ if (rolesArray.includes('super_admin')) {
+ navigate('/dashboard');
+ } else {
+ navigate('/tenant/dashboard');
+ }
+ }
+ } catch (error: any) {
+ dispatch(clearError());
+ const loginError = error as LoginError;
+
+ if (loginError && typeof loginError === 'object') {
+ if ('details' in loginError && Array.isArray(loginError.details)) {
+ loginError.details.forEach((detail) => {
+ if (detail.path === 'email' || detail.path === 'password') {
+ setError(detail.path as keyof LoginFormData, {
+ type: 'server',
+ message: detail.message,
+ });
+ } else {
+ setGeneralError(detail.message);
+ }
+ });
+ } else if ('error' in loginError) {
+ if (typeof loginError.error === 'object' && loginError.error !== null && 'message' in loginError.error) {
+ setGeneralError(loginError.error.message || 'Login failed');
+ } else if (typeof loginError.error === 'string') {
+ setGeneralError(loginError.error);
+ } else {
+ setGeneralError('Login failed. Please check your credentials.');
+ }
+ } else {
+ setGeneralError('An unexpected error occurred. Please try again.');
+ }
+ } else if (error?.message) {
+ setGeneralError(error.message);
+ } else {
+ setGeneralError('Login failed. Please check your credentials and try again.');
+ }
+ }
+ };
+
+ return (
+
+ {/* Left Side - Blue Background */}
+
+
+ {/* Logo Section */}
+
+
+
+
+
+
+ QAssure
+
+
-
+
Tenant
+
+
+ {/* Heading */}
+
+
+ Secure access for
every tenant.
+
+
+
+ {/* Description */}
+
+
+ Log in to manage projects, approvals, documents, and more from a single, compliant control center.
+
+
+
+
+ {/* Stats Grid */}
+
+ {[
+ { label: 'Avg. tenant uptime', value: '99.98%' },
+ { label: 'Regions supported', value: '12+' },
+ { label: 'Active tenants', value: '480+' },
+ { label: 'Compliance checks', value: '24/7' },
+ ].map((stat, index) => (
+
+ ))}
+
+
+
+ {/* Footer Text */}
+
+
SSO, MFA, and audit-ready access for every tenant.
+
Need help? Contact your workspace administrator.
+
+
+
+ {/* Right Side - Login Form */}
+
+
+ {/* Header */}
+
+
+
+ Tenant Admin Portal
+
+
+
Sign in to your tenant
+
+ Use your work email or configured SSO provider to access the admin portal.
+
+
+
+ {/* Login Card */}
+
+ {/* General Error Message */}
+ {generalError && (
+
+ )}
+ {!generalError && error && !errors.email && !errors.password && (
+
+ )}
+
+
+
+
+ {/* Footer Links */}
+
+
+
+