ShanmugaKrishnanSM/RIT-nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Save local admin console and unified auth changes before pulling remote UI updates

Browse Source
This commit is contained in:
Shanmuga Krishnan S M
2026-08-19 08:34:31 +05:30
parent 1eebd10f3a
commit bba33ef05b
6 changed files with 857 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
src/components/Auth/GoogleAuthModal.tsx
View File

@@ -1,7 +1,11 @@
import { useEffect, useRef } from 'react';
import { useEffect, useRef, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, ShieldCheck, Sparkles } from 'lucide-react';
import {
X, ShieldCheck, Sparkles, User, KeyRound,
ArrowRight, AlertCircle, GraduationCap, Bus, Shield
} from 'lucide-react';
import { useAuth } from '@/context/AuthContext';
import { useNavigate } from 'react-router-dom';
interface GoogleAuthModalProps {
isOpen: boolean;
@@ -10,7 +14,14 @@ interface GoogleAuthModalProps {
export default function GoogleAuthModal({ isOpen, onClose }: GoogleAuthModalProps) {
const buttonRef = useRef<HTMLDivElement>(null);
const { isAuthenticated } = useAuth();
const navigate = useNavigate();
const { isAuthenticated, loginWithCredentials } = useAuth();
const [usernameInput, setUsernameInput] = useState('');
const [passwordInput, setPasswordInput] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [activeMode, setActiveMode] = useState<'credentials' | 'google'>('credentials');
// Close modal automatically if user gets authenticated
useEffect(() => {
@@ -21,7 +32,7 @@ export default function GoogleAuthModal({ isOpen, onClose }: GoogleAuthModalProp
// Render Google Button inside modal when open
useEffect(() => {
if (!isOpen) return;
if (!isOpen || activeMode !== 'google') return;
const renderGoogleBtn = () => {
if (window.google && buttonRef.current) {
@@ -38,10 +49,7 @@ export default function GoogleAuthModal({ isOpen, onClose }: GoogleAuthModalProp
}
};
// Render immediately if script is loaded
renderGoogleBtn();
// Or poll briefly if script is loading
const interval = setInterval(() => {
if (window.google) {
renderGoogleBtn();
@@ -50,7 +58,40 @@ export default function GoogleAuthModal({ isOpen, onClose }: GoogleAuthModalProp
}, 200);
return () => clearInterval(interval);
}, [isOpen]);
}, [isOpen, activeMode]);
const handleSubmitCredentials = async (e: React.FormEvent) => {
e.preventDefault();
if (!usernameInput.trim() || !passwordInput.trim()) {
setErrorMessage('Please enter both username/register number and password.');
return;
}
setIsLoading(true);
setErrorMessage(null);
try {
const result = await loginWithCredentials(usernameInput.trim(), passwordInput.trim());
if (result.success) {
onClose();
if (result.redirectTo) {
navigate(result.redirectTo);
}
} else {
setErrorMessage(result.message || 'Invalid credentials.');
}
} catch (err: any) {
setErrorMessage(err?.message || 'Authentication error.');
} finally {
setIsLoading(false);
}
};
const handleQuickFill = (user: string, pass: string) => {
setUsernameInput(user);
setPasswordInput(pass);
setErrorMessage(null);
};
return (
<AnimatePresence>
@@ -62,20 +103,20 @@ export default function GoogleAuthModal({ isOpen, onClose }: GoogleAuthModalProp
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
className="absolute inset-0 bg-slate-950/70 backdrop-blur-md"
className="absolute inset-0 bg-slate-950/80 backdrop-blur-md"
/>
{/* Modal Container */}
<motion.div
initial={{ opacity: 0, scale: 0.9, y: 20 }}
initial={{ opacity: 0, scale: 0.92, y: 15 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.9, y: 20 }}
transition={{ type: 'spring', bounce: 0.2, duration: 0.3 }}
className="relative w-full max-w-md bg-slate-900 border border-slate-700/80 rounded-3xl shadow-2xl p-8 z-10 text-center overflow-hidden"
exit={{ opacity: 0, scale: 0.92, y: 15 }}
transition={{ type: 'spring', bounce: 0.18, duration: 0.3 }}
className="relative w-full max-w-md bg-slate-900 border border-white/10 rounded-3xl shadow-2xl p-6 sm:p-7 z-10 text-slate-100 overflow-hidden"
>
{/* Background Orbs */}
<div className="absolute -top-20 -right-20 w-40 h-40 bg-orange-500/20 rounded-full blur-2xl pointer-events-none" />
<div className="absolute -bottom-20 -left-20 w-40 h-40 bg-blue-500/20 rounded-full blur-2xl pointer-events-none" />
{/* Background Glow */}
<div className="absolute -top-20 -right-20 w-44 h-44 bg-orange-500/15 rounded-full blur-3xl pointer-events-none" />
<div className="absolute -bottom-20 -left-20 w-44 h-44 bg-indigo-500/15 rounded-full blur-3xl pointer-events-none" />
{/* Close Button */}
<button
@@ -85,38 +126,165 @@ export default function GoogleAuthModal({ isOpen, onClose }: GoogleAuthModalProp
<X className="w-5 h-5" />
</button>
{/* Icon Header */}
<div className="w-16 h-16 rounded-2xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center mx-auto mb-5">
<Sparkles className="w-8 h-8 text-[#F97316]" />
{/* Header */}
<div className="text-center mb-5">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#FF6B00] to-[#F97316] p-0.5 shadow-lg shadow-orange-500/20 mx-auto mb-3">
<div className="w-full h-full bg-slate-950/60 rounded-[14px] flex items-center justify-center">
<Sparkles className="w-6 h-6 text-white" />
</div>
</div>
<h2 className="text-xl font-extrabold text-white tracking-tight">
Sign In to Freshers Hub
</h2>
<p className="text-xs text-slate-400 mt-1">
Enter your student register number or admin credentials.
</p>
</div>
{/* Title & Description */}
<h2
className="text-2xl font-bold text-white mb-2"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
Sign In to Freshers Hub
</h2>
<p
className="text-xs text-slate-300 mb-6 leading-relaxed"
style={{ fontFamily: 'Inter, sans-serif' }}
>
Sign in with your Google account. Use your{' '}
<strong className="text-[#F97316]">@ritchennai.edu.in</strong> college email to unlock the{' '}
<strong className="text-emerald-400">Verified Student</strong> badge and post collaboration requests!
</p>
{/* Google Sign-In Button Container */}
<div className="flex justify-center my-6 min-h-[44px]">
<div ref={buttonRef} />
{/* Tab Selector */}
<div className="flex rounded-xl bg-slate-950/80 p-1 border border-white/5 mb-5 text-xs font-semibold">
<button
type="button"
onClick={() => setActiveMode('credentials')}
className={`flex-1 py-2 rounded-lg transition-all cursor-pointer ${
activeMode === 'credentials'
? 'bg-gradient-to-r from-[#FF6B00] to-[#F97316] text-white shadow-sm'
: 'text-slate-400 hover:text-slate-200'
}`}
>
Credentials (Student / Admin)
</button>
<button
type="button"
onClick={() => setActiveMode('google')}
className={`flex-1 py-2 rounded-lg transition-all cursor-pointer ${
activeMode === 'google'
? 'bg-gradient-to-r from-[#FF6B00] to-[#F97316] text-white shadow-sm'
: 'text-slate-400 hover:text-slate-200'
}`}
>
Google Sign In
</button>
</div>
{/* Verified Student Callout */}
<div className="mt-6 pt-4 border-t border-slate-800/80 flex items-center justify-center gap-2 text-[11px] text-slate-400">
<ShieldCheck className="w-4 h-4 text-emerald-400 shrink-0" />
<span>Official RIT Student Verification via Google</span>
</div>
{/* ERROR MESSAGE */}
{errorMessage && (
<div className="mb-4 p-3 rounded-xl bg-rose-500/10 border border-rose-500/20 flex items-start gap-2 text-xs text-rose-300">
<AlertCircle className="w-4 h-4 text-rose-400 shrink-0 mt-0.5" />
<span>{errorMessage}</span>
</div>
)}
{/* 1. CREDENTIALS SIGN IN FORM */}
{activeMode === 'credentials' && (
<form onSubmit={handleSubmitCredentials} className="space-y-4">
<div>
<label className="block text-xs font-semibold text-slate-300 mb-1.5 flex items-center gap-1.5">
<User className="w-3.5 h-3.5 text-orange-400" />
Register Number / Username
</label>
<input
type="text"
value={usernameInput}
onChange={(e) => setUsernameInput(e.target.value)}
placeholder="e.g. 2114251001 or Transport or Admin"
className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 outline-none focus:border-orange-500 transition-colors font-mono"
required
/>
</div>
<div>
<label className="block text-xs font-semibold text-slate-300 mb-1.5 flex items-center gap-1.5">
<KeyRound className="w-3.5 h-3.5 text-orange-400" />
Password
</label>
<input
type="password"
value={passwordInput}
onChange={(e) => setPasswordInput(e.target.value)}
placeholder="••••••••"
className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 outline-none focus:border-orange-500 transition-colors font-mono"
required
/>
</div>
<button
type="submit"
disabled={isLoading}
className="w-full py-3 px-4 rounded-xl text-white font-bold text-xs bg-gradient-to-r from-[#FF6B00] to-[#F97316] hover:opacity-95 shadow-lg shadow-orange-500/20 transition-all flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
>
{isLoading ? (
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
) : (
<>
<span>Sign In</span>
<ArrowRight className="w-4 h-4" />
</>
)}
</button>
{/* Quick Demo Fill Buttons */}
<div className="pt-3 border-t border-white/10 space-y-1.5">
<span className="text-[10px] text-slate-400 font-semibold block text-center uppercase tracking-wider">
Quick Demo Credentials:
</span>
<div className="grid grid-cols-2 gap-1.5 text-[11px]">
<button
type="button"
onClick={() => handleQuickFill('2114251001', 'rit@2026')}
className="p-2 rounded-lg bg-slate-950/80 hover:bg-slate-950 border border-white/5 text-left flex items-center justify-between transition-colors cursor-pointer"
>
<span className="truncate">🎓 CSE Student</span>
<span className="text-[9px] text-orange-400 font-mono">Fill</span>
</button>
<button
type="button"
onClick={() => handleQuickFill('2114251002', 'rit@2026')}
className="p-2 rounded-lg bg-slate-950/80 hover:bg-slate-950 border border-white/5 text-left flex items-center justify-between transition-colors cursor-pointer"
>
<span className="truncate">🎓 AI&DS Student</span>
<span className="text-[9px] text-orange-400 font-mono">Fill</span>
</button>
<button
type="button"
onClick={() => handleQuickFill('Transport', 'RIT@2026')}
className="p-2 rounded-lg bg-slate-950/80 hover:bg-slate-950 border border-white/5 text-left flex items-center justify-between transition-colors cursor-pointer"
>
<span className="truncate">🚌 Transport Admin</span>
<span className="text-[9px] text-blue-400 font-mono">Fill</span>
</button>
<button
type="button"
onClick={() => handleQuickFill('Admin', 'RIT@2026')}
className="p-2 rounded-lg bg-slate-950/80 hover:bg-slate-950 border border-white/5 text-left flex items-center justify-between transition-colors cursor-pointer"
>
<span className="truncate">⚡ Super Admin</span>
<span className="text-[9px] text-emerald-400 font-mono">Fill</span>
</button>
</div>
</div>
</form>
)}
{/* 2. GOOGLE SIGN IN */}
{activeMode === 'google' && (
<div className="space-y-4 py-2 text-center">
<p className="text-xs text-slate-300 leading-relaxed">
Sign in with your Google account. Use your{' '}
<strong className="text-orange-400">@ritchennai.edu.in</strong> email for automatic student verification.
</p>
<div className="flex justify-center my-4 min-h-[44px]">
<div ref={buttonRef} />
</div>
<div className="pt-3 border-t border-white/10 flex items-center justify-center gap-1.5 text-[11px] text-slate-400">
<ShieldCheck className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
<span>Google OAuth 2.0 Single Sign-On</span>
</div>
</div>
)}
</motion.div>
</div>
)}

133
src/components/Navbar/Navbar.tsx
View File

@@ -22,6 +22,7 @@ import {
GraduationCap,
LayoutDashboard,
Home as HomeIcon,
ShieldAlert,
} from 'lucide-react';
import { useAuth } from '@/context/AuthContext';
@@ -57,7 +58,7 @@ export default function Navbar() {
const [isProfileOpen, setIsProfileOpen] = useState(false);
const [isMoreOpen, setIsMoreOpen] = useState(false);
const location = useLocation();
const { user, isAuthenticated, isVerifiedStudent, loginWithGoogle, logout } = useAuth();
const { user, isAuthenticated, isVerifiedStudent, isAdmin, isTransportAdmin, openAuthModal, logout } = useAuth();
const profileRef = useRef<HTMLDivElement>(null);
const moreRef = useRef<HTMLDivElement>(null);
@@ -209,7 +210,7 @@ export default function Navbar() {
</div>
</div>
{/* Right: Auth Profile / Sign In */}
{/* Right: Auth Profile / Unified Sign In */}
<div className="hidden lg:flex items-center gap-2 shrink-0">
{isAuthenticated && user ? (
<div className="relative" ref={profileRef}>
@@ -225,12 +226,14 @@ export default function Navbar() {
referrerPolicy="no-referrer"
/>
) : (
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-[#FF6B00] to-[#F97316] flex items-center justify-center text-white font-bold text-xs">
{user.name.charAt(0).toUpperCase()}
<div className={`w-6 h-6 rounded-full flex items-center justify-center text-white font-bold text-xs ${
isAdmin ? 'bg-indigo-600' : 'bg-gradient-to-br from-[#FF6B00] to-[#F97316]'
}`}>
{isAdmin ? 'A' : user.name.charAt(0).toUpperCase()}
</div>
)}
<span
className="text-white text-xs font-semibold max-w-[100px] truncate"
className="text-white text-xs font-semibold max-w-[120px] truncate"
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
>
{user.name.split(' ')[0]}
@@ -258,8 +261,10 @@ export default function Navbar() {
referrerPolicy="no-referrer"
/>
) : (
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#FF6B00] to-[#F97316] flex items-center justify-center text-white font-bold text-lg">
{user.name.charAt(0).toUpperCase()}
<div className={`w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-lg ${
isAdmin ? 'bg-indigo-600' : 'bg-gradient-to-br from-[#FF6B00] to-[#F97316]'
}`}>
{isAdmin ? 'A' : user.name.charAt(0).toUpperCase()}
</div>
)}
<div className="flex-1 min-w-0">
@@ -267,28 +272,45 @@ export default function Navbar() {
<p className="text-slate-400 text-[11px] truncate">{user.email}</p>
</div>
</div>
{isVerifiedStudent ? (
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-emerald-500/15 border border-emerald-500/25">
<ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
<span className="text-[11px] font-bold text-emerald-400">Verified RIT Student</span>
</div>
) : (
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-amber-500/15 border border-amber-500/25">
<span className="text-[11px] font-semibold text-amber-400">
Sign in with @ritchennai.edu.in
{/* Role Badges */}
{isAdmin ? (
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-indigo-500/15 border border-indigo-500/25">
<ShieldAlert className="w-3.5 h-3.5 text-indigo-400" />
<span className="text-[11px] font-bold text-indigo-400">
{isTransportAdmin ? 'Transport Fleet Manager' : 'System Super Admin'}
</span>
</div>
)}
) : isVerifiedStudent ? (
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-emerald-500/15 border border-emerald-500/25">
<ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
<span className="text-[11px] font-bold text-emerald-400">
Verified Student {user.regNumber ? `(${user.regNumber})` : ''}
</span>
</div>
) : null}
</div>
<div className="p-2 space-y-1">
<Link
to="/dashboard"
onClick={() => setIsProfileOpen(false)}
className="w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-slate-300 hover:text-white hover:bg-orange-500/15 hover:border-orange-500/20 text-xs font-semibold transition-all cursor-pointer"
>
<GraduationCap className="w-4 h-4 text-orange-400" />
My Student Dashboard
</Link>
{isAdmin ? (
<Link
to="/admin"
onClick={() => setIsProfileOpen(false)}
className="w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-slate-300 hover:text-white hover:bg-indigo-500/15 text-xs font-semibold transition-all cursor-pointer"
>
<ShieldCheck className="w-4 h-4 text-indigo-400" />
Admin Console
</Link>
) : (
<Link
to="/dashboard"
onClick={() => setIsProfileOpen(false)}
className="w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-slate-300 hover:text-white hover:bg-orange-500/15 text-xs font-semibold transition-all cursor-pointer"
>
<GraduationCap className="w-4 h-4 text-orange-400" />
My Student Dashboard
</Link>
)}
<button
onClick={() => {
logout();
@@ -308,11 +330,11 @@ export default function Navbar() {
<motion.button
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.97 }}
onClick={loginWithGoogle}
className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-white text-xs font-bold bg-white/10 hover:bg-white/15 border border-white/15 transition-all cursor-pointer"
onClick={openAuthModal}
className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-white text-xs font-bold bg-gradient-to-r from-[#FF6B00] to-[#F97316] shadow-sm hover:opacity-95 transition-all cursor-pointer"
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
>
<LogIn className="w-3.5 h-3.5 text-[#FF6B00]" />
<LogIn className="w-3.5 h-3.5 text-white" />
<span>Sign In</span>
</motion.button>
)}
@@ -369,27 +391,52 @@ export default function Navbar() {
{!isAuthenticated ? (
<button
onClick={() => {
loginWithGoogle();
openAuthModal();
setIsMobileOpen(false);
}}
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-white text-xs font-semibold border border-orange-500/40 bg-orange-500/15 hover:bg-orange-500/25 transition-all cursor-pointer"
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-white text-xs font-semibold border border-orange-500/40 bg-gradient-to-r from-[#FF6B00] to-[#F97316] transition-all cursor-pointer"
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
>
<LogIn className="w-4 h-4 text-orange-400" />
Sign In with Google
<LogIn className="w-4 h-4 text-white" />
Sign In
</button>
) : (
<button
onClick={() => {
logout();
setIsMobileOpen(false);
}}
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-red-400 text-xs font-semibold border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 transition-all cursor-pointer"
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
>
<LogOut className="w-4 h-4" />
Sign Out ({user?.name.split(' ')[0]})
</button>
<div className="space-y-2">
<div className="flex items-center justify-between p-2 rounded-xl bg-white/5 text-xs text-slate-300">
<span className="font-bold text-white">{user?.name}</span>
<span className="text-[10px] text-orange-400 font-mono">
{isAdmin ? 'Admin' : (user?.regNumber || 'Student')}
</span>
</div>
{isAdmin ? (
<Link
to="/admin"
onClick={() => setIsMobileOpen(false)}
className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-xl bg-indigo-600 text-white text-xs font-bold"
>
Go to Admin Console
</Link>
) : (
<Link
to="/dashboard"
onClick={() => setIsMobileOpen(false)}
className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-xl bg-orange-500 text-white text-xs font-bold"
>
Go to Student Dashboard
</Link>
)}
<button
onClick={() => {
logout();
setIsMobileOpen(false);
}}
className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-red-400 text-xs font-semibold border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 transition-all cursor-pointer"
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
>
<LogOut className="w-4 h-4" />
Sign Out
</button>
</div>
)}
</div>
</div>