feat: implement cover image upload with canvas compression and db storage in RIT-EMS-main
This commit is contained in:
@@ -79,7 +79,8 @@ const AppContent: React.FC = () => {
|
||||
if (Array.isArray(data)) {
|
||||
let filtered = data;
|
||||
if (user?.role === 'HOD') {
|
||||
filtered = data.filter((e: Event) => e.department === user?.department);
|
||||
const userDepts = user?.department ? user.department.split(',').map(d => d.trim().toLowerCase()) : [];
|
||||
filtered = data.filter((e: Event) => userDepts.includes(e.department?.trim().toLowerCase()));
|
||||
} else if (user?.role === 'FACULTY') {
|
||||
filtered = data.filter((e: Event) => e.proposer?.email === user?.email);
|
||||
}
|
||||
|
||||
@@ -70,7 +70,8 @@ export const ApprovalsView: React.FC = () => {
|
||||
const data = await response.json();
|
||||
// Filter based on role
|
||||
if (user?.role === 'HOD') {
|
||||
setEvents(data.filter((e: Event) => e.status === 'REQUESTED' && e.department === user.department));
|
||||
const userDepts = user.department ? user.department.split(',').map(d => d.trim().toLowerCase()) : [];
|
||||
setEvents(data.filter((e: Event) => e.status === 'REQUESTED' && userDepts.includes(e.department?.trim().toLowerCase())));
|
||||
} else if (user?.role === 'PRINCIPAL') {
|
||||
setEvents(data.filter((e: Event) => e.status === 'PENDING_PR'));
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Calendar,
|
||||
@@ -105,6 +105,7 @@ interface EventProposalFormProps {
|
||||
sponsors?: string[];
|
||||
centreName?: string;
|
||||
isPublicEvent?: boolean;
|
||||
image?: string;
|
||||
status?: string;
|
||||
} | null;
|
||||
}
|
||||
@@ -122,6 +123,42 @@ export const EventProposalForm: React.FC<EventProposalFormProps> = ({ initialDat
|
||||
const [existingEvents, setExistingEvents] = useState<Event[]>([]);
|
||||
const [classStrengths, setClassStrengths] = useState<any[]>([]);
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
const img = new window.Image();
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement('canvas');
|
||||
const max_width = 800;
|
||||
let width = img.width;
|
||||
let height = img.height;
|
||||
|
||||
if (width > max_width) {
|
||||
height = Math.round((height * max_width) / width);
|
||||
width = max_width;
|
||||
}
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
ctx.drawImage(img, 0, 0, width, height);
|
||||
const compressedBase64 = canvas.toDataURL('image/jpeg', 0.7);
|
||||
setFormData(prev => ({ ...prev, image: compressedBase64 }));
|
||||
} else {
|
||||
setFormData(prev => ({ ...prev, image: reader.result as string }));
|
||||
}
|
||||
};
|
||||
img.src = reader.result as string;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const [eventScope, setEventScope] = useState<'INSTITUTIONAL' | 'DEPARTMENT' | 'CLUB' | 'PLACEMENT' | 'CENTRE'>(
|
||||
initialData?.isClubEvent ? 'INSTITUTIONAL' : (isPlacementCell ? 'PLACEMENT' : 'DEPARTMENT')
|
||||
);
|
||||
@@ -165,6 +202,7 @@ export const EventProposalForm: React.FC<EventProposalFormProps> = ({ initialDat
|
||||
sponsors: initialData?.sponsors || [] as string[],
|
||||
centreName: initialData?.centreName || (eventScope === 'CENTRE' ? ((CENTRE_MAPPING[user?.department || ''] || CENTRE_MAPPING['Placement Department'] || [])[0] || '') : ''),
|
||||
isPublicEvent: initialData?.isPublicEvent || false,
|
||||
image: initialData?.image || '',
|
||||
status: initialData?.status || 'REQUESTED'
|
||||
});
|
||||
|
||||
@@ -422,7 +460,8 @@ export const EventProposalForm: React.FC<EventProposalFormProps> = ({ initialDat
|
||||
category: eventScope === 'CLUB' ? 'CLUB' : (eventScope === 'INSTITUTIONAL' ? 'INSTITUTIONAL' : (eventScope === 'CENTRE' ? 'CENTRE' : 'ACADEMIC')),
|
||||
eventType: formData.eventType,
|
||||
centreName: eventScope === 'CENTRE' ? formData.centreName : undefined,
|
||||
isPublicEvent: eventScope === 'CENTRE' ? formData.isPublicEvent : undefined
|
||||
isPublicEvent: eventScope === 'CENTRE' ? formData.isPublicEvent : undefined,
|
||||
image: formData.image
|
||||
};
|
||||
|
||||
const res = await fetch(API_BASE_URL + '/api/events/propose', {
|
||||
@@ -1191,6 +1230,50 @@ export const EventProposalForm: React.FC<EventProposalFormProps> = ({ initialDat
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cover Image Upload Area */}
|
||||
<div className="space-y-4 pt-6">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-text-muted block">
|
||||
Event Cover Banner
|
||||
</label>
|
||||
<div className="bg-slate-50/50 border border-slate-100 rounded-3xl p-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="w-full h-48 bg-white border-2 border-dashed border-slate-200 rounded-2xl flex flex-col items-center justify-center gap-3 hover:border-brand-indigo transition-all overflow-hidden relative group"
|
||||
>
|
||||
{formData.image ? (
|
||||
<div className="absolute inset-0">
|
||||
<img src={formData.image} alt="Cover Banner" className="w-full h-full object-cover" />
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all flex items-center justify-center text-white text-[10px] font-black uppercase tracking-widest">
|
||||
Change Cover Image
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-12 h-12 bg-slate-50 rounded-full flex items-center justify-center text-slate-400 group-hover:text-brand-indigo transition-colors">
|
||||
<i className="fas fa-image text-xl"></i>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<span className="block text-[10px] font-black text-text-dark uppercase tracking-widest">
|
||||
Upload Cover Image
|
||||
</span>
|
||||
<span className="block text-[8px] font-bold text-text-muted uppercase tracking-widest mt-1">
|
||||
JPEG or PNG, Max width 800px (auto-resized)
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleImageChange}
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-6">
|
||||
{error && <div className="mb-4 p-4 bg-red-50 text-red-600 rounded-2xl text-xs font-bold flex items-center gap-2"><AlertCircle className="w-4 h-4" />{error}</div>}
|
||||
<button
|
||||
|
||||
@@ -261,7 +261,10 @@ export const InstitutionalChecklist: React.FC<{
|
||||
let depts = ALL_DEPARTMENTS;
|
||||
if (user?.role === 'PRINCIPAL' || user?.role === 'ADMIN') depts = ALL_DEPARTMENTS;
|
||||
else if (isGlobalView && user?.role === 'HOD') depts = ALL_DEPARTMENTS;
|
||||
else depts = ALL_DEPARTMENTS.filter(d => d.toLowerCase().includes(user?.department?.toLowerCase() || ''));
|
||||
else {
|
||||
const userDepts = user?.department ? user.department.split(',').map(d => d.trim().toLowerCase()) : [];
|
||||
depts = ALL_DEPARTMENTS.filter(d => userDepts.includes(d.toLowerCase()));
|
||||
}
|
||||
|
||||
// Recent items at top logic: Sort departments by the date of their latest event
|
||||
return [...depts].sort((a, b) => {
|
||||
|
||||
@@ -178,7 +178,11 @@ export const Overview: React.FC<OverviewProps> = ({
|
||||
if (Array.isArray(data)) {
|
||||
const statsData = (user?.role === 'PRINCIPAL' || user?.role === 'ADMIN')
|
||||
? data
|
||||
: data.filter(e => e.proposer?.email === user?.email || e.department === user?.department);
|
||||
: data.filter(e => {
|
||||
if (e.proposer?.email === user?.email) return true;
|
||||
const userDepts = user?.department ? user.department.split(',').map(d => d.trim().toLowerCase()) : [];
|
||||
return userDepts.includes(e.department?.trim().toLowerCase());
|
||||
});
|
||||
calculateStats(statsData);
|
||||
}
|
||||
})
|
||||
|
||||
@@ -93,7 +93,8 @@ export const StudentRegistrationsView: React.FC = () => {
|
||||
// Faculty can manage their proposed events, Admins/HODs can manage all
|
||||
let filtered = data.filter((e: Event) => e.status === 'APPROVED' || e.status === 'COMPLETED' || e.status === 'Event Ongoing');
|
||||
if (user?.role === 'FACULTY') {
|
||||
filtered = filtered.filter((e: Event) => e.department === user.department);
|
||||
const userDepts = user.department ? user.department.split(',').map(d => d.trim().toLowerCase()) : [];
|
||||
filtered = filtered.filter((e: Event) => userDepts.includes(e.department?.trim().toLowerCase()));
|
||||
}
|
||||
setEvents(filtered);
|
||||
if (filtered.length > 0) {
|
||||
|
||||
@@ -133,6 +133,10 @@ export const UserManagement: React.FC = () => {
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if ((formData.role === 'HOD' || formData.role === 'FACULTY') && !formData.department.trim()) {
|
||||
alert("Please select at least one department.");
|
||||
return;
|
||||
}
|
||||
const url = editingUser
|
||||
? `${API_BASE_URL}/api/admin/users/${editingUser.id}`
|
||||
: API_BASE_URL + '/api/admin/users';
|
||||
@@ -364,40 +368,70 @@ export const UserManagement: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-text-muted mb-2 block">Role</label>
|
||||
<select
|
||||
value={formData.role}
|
||||
onChange={(e) => setFormData({...formData, role: e.target.value})}
|
||||
className="w-full bg-slate-50 border-transparent rounded-xl py-3 px-4 text-sm focus:bg-white focus:border-brand-indigo transition-all appearance-none"
|
||||
>
|
||||
<option value="FACULTY">Faculty</option>
|
||||
<option value="HOD">HoD</option>
|
||||
<option value="PRINCIPAL">Principal</option>
|
||||
<option value="PLACEMENT">Placement</option>
|
||||
<option value="ADMIN">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-text-muted mb-2 block">Department</label>
|
||||
<select
|
||||
required
|
||||
value={formData.department}
|
||||
onChange={(e) => setFormData({...formData, department: e.target.value})}
|
||||
className="w-full bg-slate-50 border-transparent rounded-xl py-3 px-4 text-sm focus:bg-white focus:border-brand-indigo transition-all appearance-none"
|
||||
>
|
||||
<option value="">Select Department</option>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-text-muted mb-2 block">Role</label>
|
||||
<select
|
||||
value={formData.role}
|
||||
onChange={(e) => {
|
||||
const newRole = e.target.value;
|
||||
setFormData({
|
||||
...formData,
|
||||
role: newRole,
|
||||
department: (newRole === 'HOD' || newRole === 'FACULTY') ? formData.department : ''
|
||||
});
|
||||
}}
|
||||
className="w-full bg-slate-50 border-transparent rounded-xl py-3 px-4 text-sm focus:bg-white focus:border-brand-indigo transition-all appearance-none"
|
||||
>
|
||||
<option value="FACULTY">Faculty</option>
|
||||
<option value="HOD">HoD</option>
|
||||
<option value="PRINCIPAL">Principal</option>
|
||||
<option value="PLACEMENT">Placement</option>
|
||||
<option value="ADMIN">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{(formData.role === 'HOD' || formData.role === 'FACULTY') && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
className="space-y-3"
|
||||
>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-text-muted block">Department(s)</label>
|
||||
<div className="flex flex-wrap gap-2 p-4 bg-slate-50/50 rounded-2xl border border-slate-100 min-h-[60px]">
|
||||
{[
|
||||
"AI&DS", "AI&ML", "CSE", "CCE", "CSBS", "ECE",
|
||||
"MECH", "EE(VLSI)", "BIOTECH", "Placement Department",
|
||||
"H&S Dept", "Club", "Centre"
|
||||
].map(dept => (
|
||||
<option key={dept} value={dept}>{dept}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
].map(dept => {
|
||||
const selectedDepts = formData.department ? formData.department.split(',').map(d => d.trim()).filter(Boolean) : [];
|
||||
const isSelected = selectedDepts.includes(dept);
|
||||
return (
|
||||
<button
|
||||
key={dept}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
let updated: string[];
|
||||
if (isSelected) {
|
||||
updated = selectedDepts.filter(d => d !== dept);
|
||||
} else {
|
||||
updated = [...selectedDepts, dept];
|
||||
}
|
||||
setFormData({...formData, department: updated.join(', ')});
|
||||
}}
|
||||
className={cn(
|
||||
"px-3 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all border",
|
||||
isSelected
|
||||
? "bg-brand-navy text-white border-brand-navy premium-shadow-sm"
|
||||
: "bg-white text-text-muted border-slate-200 hover:border-brand-indigo/30"
|
||||
)}
|
||||
>
|
||||
{dept}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-text-muted mb-2 block">
|
||||
|
||||
169
RIT-EMS-main/frontend/src/docs/GOOGLE_AUTH_SETUP.md
Normal file
169
RIT-EMS-main/frontend/src/docs/GOOGLE_AUTH_SETUP.md
Normal file
@@ -0,0 +1,169 @@
|
||||
# Manual Integration Guide: Google Sign-In with Firebase Auth
|
||||
|
||||
This document provides step-by-step instructions on how to transition from the simulated Google login to a production-ready Google Authentication system using Firebase Auth in the React frontend.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Firebase Project Setup
|
||||
|
||||
1. Go to the [Firebase Console](https://console.firebase.google.com/).
|
||||
2. Click **Add Project** and follow the prompts to create a new project.
|
||||
3. Once the project is created, click the **Web icon** (`</>`) on the project overview page to register a new web application.
|
||||
4. Copy the `firebaseConfig` details provided in the Firebase Console. It will look like this:
|
||||
```javascript
|
||||
const firebaseConfig = {
|
||||
apiKey: "YOUR_API_KEY",
|
||||
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
|
||||
projectId: "YOUR_PROJECT_ID",
|
||||
storageBucket: "YOUR_PROJECT_ID.firebasestorage.app",
|
||||
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
|
||||
appId: "YOUR_APP_ID"
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Enable Google Authentication
|
||||
|
||||
1. In the left-hand navigation sidebar of the Firebase Console, go to **Build** > **Authentication**.
|
||||
2. Click **Get Started** if this is the first time setting up Authentication.
|
||||
3. Navigate to the **Sign-in method** tab.
|
||||
4. Click **Add new provider** and select **Google**.
|
||||
5. Enable the toggle, configure your public-facing project name, select a project support email, and click **Save**.
|
||||
6. (Optional) Under **Authorized domains**, ensure `localhost` and your production domain are listed so OAuth redirects work.
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Set Up Project Credentials in Google Cloud Console
|
||||
|
||||
Google Sign-in requires OAuth consent. If you see redirect issues:
|
||||
1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
|
||||
2. Select your Firebase project from the dropdown.
|
||||
3. Go to **APIs & Services** > **OAuth consent screen**.
|
||||
4. Configure the publishing status to **Testing** or **Production**, add test users if in Testing, and fill out required app details.
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Frontend Code Integration
|
||||
|
||||
### 1. Install Firebase SDK
|
||||
Ensure firebase dependencies are installed in your frontend folder:
|
||||
```bash
|
||||
npm install firebase
|
||||
```
|
||||
|
||||
### 2. Configure Firebase Auth Client
|
||||
Create/update `frontend/src/lib/firebaseConfig.ts` with the copied configurations:
|
||||
```typescript
|
||||
import { initializeApp } from 'firebase/app';
|
||||
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
|
||||
|
||||
const firebaseConfig = {
|
||||
apiKey: "YOUR_API_KEY",
|
||||
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
|
||||
projectId: "YOUR_PROJECT_ID",
|
||||
storageBucket: "YOUR_PROJECT_ID.firebasestorage.app",
|
||||
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
|
||||
appId: "YOUR_APP_ID"
|
||||
};
|
||||
|
||||
// Initialize Firebase
|
||||
const app = initializeApp(firebaseConfig);
|
||||
|
||||
// Initialize Firebase Auth
|
||||
export const auth = getAuth(app);
|
||||
export const googleProvider = new GoogleAuthProvider();
|
||||
```
|
||||
|
||||
### 3. Implement Sign-in Action
|
||||
In `LoginPage.tsx`, replace the mock handlers with real Firebase Auth sign-in triggers:
|
||||
```typescript
|
||||
import { signInWithPopup } from 'firebase/auth';
|
||||
import { auth, googleProvider } from '../lib/firebaseConfig';
|
||||
|
||||
const handleGoogleSignIn = async () => {
|
||||
try {
|
||||
const result = await signInWithPopup(auth, googleProvider);
|
||||
const user = result.user;
|
||||
const email = user.email; // e.g. student.240007@cse.ritchennai.edu.in
|
||||
const displayName = user.displayName || "RIT User";
|
||||
|
||||
// Call your backend/database lookup or sync user details
|
||||
const response = await fetch(API_BASE_URL + '/api/auth/google-login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, fullName: displayName })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const userData = await response.json();
|
||||
login(userData);
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
alert(errorData.message || "Failed to log in.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Google Sign-In Error:", error);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Backend Integration (Spring Boot)
|
||||
|
||||
To support Google authentication token validation or syncing, add a secure endpoint:
|
||||
```java
|
||||
@PostMapping("/api/auth/google-login")
|
||||
public ResponseEntity<?> googleLogin(@RequestBody Map<String, String> payload) {
|
||||
String email = payload.get("email");
|
||||
String fullName = payload.get("fullName");
|
||||
|
||||
if (email == null || email.trim().isEmpty()) {
|
||||
return ResponseEntity.badRequest().body(Map.of("message", "Email is required"));
|
||||
}
|
||||
|
||||
email = email.trim().toLowerCase();
|
||||
|
||||
// Check if user already exists
|
||||
Optional<User> existingUser = userRepository.findByEmail(email);
|
||||
if (existingUser.isPresent()) {
|
||||
return ResponseEntity.ok(existingUser.get());
|
||||
}
|
||||
|
||||
// Auto-register RIT student if email matches the student format
|
||||
if (email.matches("^student\\.\\d{6}@[a-zA-Z0-9&-_]+\\.ritchennai\\.edu\\.in$")) {
|
||||
User newStudent = new User();
|
||||
newStudent.setEmail(email);
|
||||
newStudent.setFullName(fullName);
|
||||
newStudent.setRole("STUDENT");
|
||||
|
||||
// Parse department & batch logic here
|
||||
String rollNumber = email.split("@")[0].substring(8); // extracts roll e.g. "240007"
|
||||
String rawDept = email.split("@")[1].split("\\.")[0]; // cse
|
||||
|
||||
newStudent.setRegNo(rollNumber);
|
||||
|
||||
// Set Department
|
||||
newStudent.setDepartment(mapDepartmentDomain(rawDept));
|
||||
|
||||
// Set Year Batch
|
||||
int joinYear = 2000 + Integer.parseInt(rollNumber.substring(0, 2));
|
||||
int currentYear = LocalDate.now().getYear();
|
||||
int academicOffset = LocalDate.now().getMonthValue() >= 6 ? 1 : 0;
|
||||
int yearIndex = currentYear - joinYear + academicOffset;
|
||||
String[] years = {"1st Year", "2nd Year", "3rd Year", "4th Year"};
|
||||
newStudent.setInchargeBatch(yearIndex >= 1 && yearIndex <= 4 ? years[yearIndex - 1] : "N/A");
|
||||
newStudent.setInchargeClass(newStudent.getDepartment());
|
||||
newStudent.setInchargeSection("A");
|
||||
|
||||
// Generate random placeholder password for DB constraints
|
||||
newStudent.setPassword(passwordEncoder.encode(UUID.randomUUID().toString()));
|
||||
|
||||
userRepository.save(newStudent);
|
||||
return ResponseEntity.ok(newStudent);
|
||||
}
|
||||
|
||||
return ResponseEntity.status(401).body(Map.of("message", "Access denied. Only registered accounts can log in."));
|
||||
}
|
||||
```
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
updateDoc,
|
||||
deleteDoc
|
||||
} from 'firebase/firestore';
|
||||
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
|
||||
|
||||
const firebaseConfig = {
|
||||
apiKey: "AIzaSyBdRUyA7LDtDReUA3TXDys71dSHgD2tOEA",
|
||||
@@ -21,8 +22,10 @@ const firebaseConfig = {
|
||||
};
|
||||
|
||||
// Initialize Firebase App
|
||||
const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();
|
||||
const db = getFirestore(app);
|
||||
export const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();
|
||||
export const db = getFirestore(app);
|
||||
export const auth = getAuth(app);
|
||||
export const googleProvider = new GoogleAuthProvider();
|
||||
|
||||
// Helper: parse date strings into Date objects
|
||||
function parseDate(val: any): Date {
|
||||
@@ -218,8 +221,9 @@ window.fetch = async function(input: RequestInfo | URL, init?: RequestInit): Pro
|
||||
// ----------------------------------------------------
|
||||
if (path === '/api/auth/login' && method === 'POST') {
|
||||
const { email, password } = parseBody(init?.body);
|
||||
const emailLower = (email || '').trim().toLowerCase();
|
||||
const snap = await getDocs(collection(db, 'ems_users'));
|
||||
const userDoc = snap.docs.find(d => d.data().email?.toLowerCase() === email?.toLowerCase());
|
||||
const userDoc = snap.docs.find(d => d.data().email?.toLowerCase() === emailLower);
|
||||
|
||||
if (userDoc) {
|
||||
const u = userDoc.data();
|
||||
@@ -231,9 +235,166 @@ window.fetch = async function(input: RequestInfo | URL, init?: RequestInit): Pro
|
||||
department: userData.department || "N/A",
|
||||
assignedClubs: userData.assignedClubs || []
|
||||
});
|
||||
} else {
|
||||
return jsonResponse({ message: "Invalid password for this registered email" }, 401);
|
||||
}
|
||||
}
|
||||
return jsonResponse({ message: "Invalid email or passcode" }, 401);
|
||||
|
||||
// Auto-register student if matches roll number format
|
||||
const studentMatch = emailLower.match(/^student\.(\d{6})@([a-zA-Z0-9&-_]+)\.ritchennai\.edu\.in$/);
|
||||
if (studentMatch) {
|
||||
const rollNo = studentMatch[1];
|
||||
const rawDept = studentMatch[2].toLowerCase();
|
||||
|
||||
// Calculate joining year and academic year (current local time is 2026-06-19)
|
||||
const joinYear = 2000 + parseInt(rollNo.substring(0, 2));
|
||||
const currentYear = new Date().getFullYear();
|
||||
const currentMonth = new Date().getMonth();
|
||||
const academicYearOffset = currentMonth >= 5 ? 1 : 0;
|
||||
const yearIndex = currentYear - joinYear + academicYearOffset;
|
||||
const years = ["1st Year", "2nd Year", "3rd Year", "4th Year"];
|
||||
const calculatedYear = years[yearIndex - 1] || "N/A";
|
||||
|
||||
// Map department
|
||||
let dept = rawDept.toUpperCase();
|
||||
if (dept === 'AIDS') dept = 'AI&DS';
|
||||
else if (dept === 'AIML') dept = 'AI&ML';
|
||||
else if (dept === 'VLSI') dept = 'EE(VLSI)';
|
||||
else if (dept === 'BIOTECH' || dept === 'BIO-TECH') dept = 'BIOTECH';
|
||||
else if (dept === 'H&S') dept = 'H&S Dept';
|
||||
|
||||
const newUser = {
|
||||
id: generateNumericId(),
|
||||
email: emailLower,
|
||||
password: password || "student123",
|
||||
fullName: `Student ${rollNo}`,
|
||||
role: 'STUDENT',
|
||||
department: dept,
|
||||
year: calculatedYear,
|
||||
section: 'A',
|
||||
regNo: rollNo,
|
||||
phone: '',
|
||||
gender: 'Male',
|
||||
collegeName: 'Rajalakshmi Institute of Technology',
|
||||
isClubCoordinator: false,
|
||||
isPlacementStaff: false,
|
||||
isClassIncharge: false,
|
||||
assignedClubs: []
|
||||
};
|
||||
|
||||
await setDoc(doc(db, 'ems_users', String(newUser.id)), newUser);
|
||||
|
||||
const { password: _, ...userData } = newUser;
|
||||
return jsonResponse({
|
||||
...userData,
|
||||
department: userData.department || "N/A",
|
||||
assignedClubs: userData.assignedClubs || []
|
||||
});
|
||||
}
|
||||
|
||||
return jsonResponse({ message: "Invalid email or passcode. Faculty and Admin roles must be pre-registered by the administrator." }, 401);
|
||||
}
|
||||
|
||||
if (path === '/api/auth/google-login' && method === 'POST') {
|
||||
const { email, fullName } = parseBody(init?.body);
|
||||
const emailLower = (email || '').trim().toLowerCase();
|
||||
const snap = await getDocs(collection(db, 'ems_users'));
|
||||
const userDoc = snap.docs.find(d => d.data().email?.toLowerCase() === emailLower);
|
||||
|
||||
if (userDoc) {
|
||||
const u = userDoc.data();
|
||||
const { password: _, ...userData } = u;
|
||||
return jsonResponse({
|
||||
...userData,
|
||||
department: userData.department || "N/A",
|
||||
assignedClubs: userData.assignedClubs || []
|
||||
});
|
||||
}
|
||||
|
||||
// Check if matches student RIT format
|
||||
const studentMatch = emailLower.match(/^student\.(\d{6})@([a-zA-Z0-9&-_]+)\.ritchennai\.edu\.in$/);
|
||||
if (studentMatch) {
|
||||
const rollNo = studentMatch[1];
|
||||
const rawDept = studentMatch[2].toLowerCase();
|
||||
|
||||
// Calculate joining year and academic year (current local time is 2026-06-19)
|
||||
const joinYear = 2000 + parseInt(rollNo.substring(0, 2));
|
||||
const currentYear = new Date().getFullYear();
|
||||
const currentMonth = new Date().getMonth();
|
||||
const academicYearOffset = currentMonth >= 5 ? 1 : 0;
|
||||
const yearIndex = currentYear - joinYear + academicYearOffset;
|
||||
const years = ["1st Year", "2nd Year", "3rd Year", "4th Year"];
|
||||
const calculatedYear = years[yearIndex - 1] || "N/A";
|
||||
|
||||
// Map department
|
||||
let dept = rawDept.toUpperCase();
|
||||
if (dept === 'AIDS') dept = 'AI&DS';
|
||||
else if (dept === 'AIML') dept = 'AI&ML';
|
||||
else if (dept === 'VLSI') dept = 'EE(VLSI)';
|
||||
else if (dept === 'BIOTECH' || dept === 'BIO-TECH') dept = 'BIOTECH';
|
||||
else if (dept === 'H&S') dept = 'H&S Dept';
|
||||
|
||||
const newUser = {
|
||||
id: generateNumericId(),
|
||||
email: emailLower,
|
||||
password: 'google-oauth-placeholder',
|
||||
fullName: fullName || `Student ${rollNo}`,
|
||||
role: 'STUDENT',
|
||||
department: dept,
|
||||
year: calculatedYear,
|
||||
section: 'A',
|
||||
regNo: rollNo,
|
||||
phone: '',
|
||||
gender: 'Male',
|
||||
collegeName: 'Rajalakshmi Institute of Technology',
|
||||
isClubCoordinator: false,
|
||||
isPlacementStaff: false,
|
||||
isClassIncharge: false,
|
||||
assignedClubs: []
|
||||
};
|
||||
|
||||
await setDoc(doc(db, 'ems_users', String(newUser.id)), newUser);
|
||||
|
||||
const { password: _, ...userData } = newUser;
|
||||
return jsonResponse({
|
||||
...userData,
|
||||
department: userData.department || "N/A",
|
||||
assignedClubs: userData.assignedClubs || []
|
||||
});
|
||||
}
|
||||
|
||||
// Register external students automatically
|
||||
if (emailLower) {
|
||||
const newUser = {
|
||||
id: generateNumericId(),
|
||||
email: emailLower,
|
||||
password: 'google-oauth-placeholder',
|
||||
fullName: fullName || emailLower.split('@')[0],
|
||||
role: 'STUDENT',
|
||||
department: 'Others',
|
||||
year: 'N/A',
|
||||
section: 'N/A',
|
||||
regNo: 'EXT-' + Math.floor(Math.random() * 100000),
|
||||
phone: '',
|
||||
gender: 'Male',
|
||||
collegeName: 'External Institution',
|
||||
isClubCoordinator: false,
|
||||
isPlacementStaff: false,
|
||||
isClassIncharge: false,
|
||||
assignedClubs: []
|
||||
};
|
||||
|
||||
await setDoc(doc(db, 'ems_users', String(newUser.id)), newUser);
|
||||
|
||||
const { password: _, ...userData } = newUser;
|
||||
return jsonResponse({
|
||||
...userData,
|
||||
department: userData.department || "N/A",
|
||||
assignedClubs: userData.assignedClubs || []
|
||||
});
|
||||
}
|
||||
|
||||
return jsonResponse({ message: "Access denied. Only registered accounts can log in." }, 401);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------
|
||||
@@ -252,13 +413,16 @@ window.fetch = async function(input: RequestInfo | URL, init?: RequestInit): Pro
|
||||
return jsonResponse({ message: "User with this email already exists" }, 400);
|
||||
}
|
||||
|
||||
const role = payload.role || 'FACULTY';
|
||||
const department = (role === 'HOD' || role === 'FACULTY') ? (payload.department || 'H&S Dept') : '';
|
||||
|
||||
const newUser = {
|
||||
...payload,
|
||||
id: generateNumericId(),
|
||||
email: payload.email?.trim().toLowerCase(),
|
||||
fullName: payload.fullName?.trim(),
|
||||
role: payload.role || 'FACULTY',
|
||||
department: payload.department || 'H&S Dept',
|
||||
role: role,
|
||||
department: department,
|
||||
assignedClubs: payload.assignedClubs || []
|
||||
};
|
||||
|
||||
@@ -277,9 +441,15 @@ window.fetch = async function(input: RequestInfo | URL, init?: RequestInit): Pro
|
||||
return jsonResponse({ message: "User not found" }, 404);
|
||||
}
|
||||
|
||||
const role = payload.role || snap.data().role || 'FACULTY';
|
||||
const department = (role === 'HOD' || role === 'FACULTY')
|
||||
? (payload.department !== undefined ? payload.department : snap.data().department || '')
|
||||
: '';
|
||||
|
||||
const updated = {
|
||||
...snap.data(),
|
||||
...payload,
|
||||
department: department,
|
||||
id: snap.data().id // lock ID
|
||||
};
|
||||
|
||||
|
||||
@@ -4,8 +4,9 @@ import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { cn } from '../lib/utils';
|
||||
import ritLogo from '../assets/images/college-logo.png';
|
||||
|
||||
type UserRole = 'STUDENT' | 'COORDINATOR' | 'ADMIN';
|
||||
import { Mail, Lock, LogIn, AlertCircle, X, ArrowLeft, Shield } from 'lucide-react';
|
||||
import { signInWithPopup } from 'firebase/auth';
|
||||
import { auth, googleProvider } from '../lib/firebaseBackend';
|
||||
|
||||
const DEPARTMENTS = ['AIDS', 'CSBS', 'CSE', 'CCE', 'MECH', 'VLSI', 'BIO-TECH', 'AIML', 'ECE', 'H&S'];
|
||||
const EXTERNAL_DEPARTMENTS = [
|
||||
@@ -22,14 +23,48 @@ const EXTERNAL_DEPARTMENTS = [
|
||||
const SECTIONS = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
|
||||
const YEARS = ['1st Year', '2nd Year', '3rd Year', '4th Year', '5th Year'];
|
||||
|
||||
const GoogleIcon = () => (
|
||||
<svg className="w-5 h-5 mr-3" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1, 0, 0, 1, 0, 0)">
|
||||
<path d="M21.35,11.1H12v2.7h5.38c-0.24,1.28 -0.96,2.37 -2.04,3.1v2.58h3.3c1.93,-1.78 3.04,-4.4 3.04,-7.48C21.68,11.96 21.56,11.49 21.35,11.1z" fill="#4285F4" />
|
||||
<path d="M12,20.58c2.43,0 4.47,-0.8 5.96,-2.2l-2.58,-2c-0.72,0.48 -1.64,0.77 -2.58,0.77 -2.37,0 -4.38,-1.6 -5.1,-3.75H4.31v2.1a8.4,8.4 0 0,0 7.69,5.08z" fill="#34A853" />
|
||||
<path d="M6.9,13.4c-0.18,-0.54 -0.29,-1.11 -0.29,-1.7 0,-0.59 0.11,-1.16 0.29,-1.7V7.9H4.31A8.4,8.4 0 0,0 3.3,11.7c0,1.38 0.33,2.69 1.01,3.8l2.59,-2.1z" fill="#FBBC05" />
|
||||
<path d="M12,6.85c1.32,0 2.5,0.45 3.44,1.35l2.58,-2.58C16.46,4.1 14.43,3.32 12,3.32c-4.79,0 -8.7,2.82 -10.39,6.9l2.59,2.1c0.72,-2.15 2.73,-3.75 5.1,-3.75z" fill="#EA4335" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const LoginPage: React.FC = () => {
|
||||
const { login } = useAuth();
|
||||
const [selectedRole, setSelectedRole] = useState<UserRole | null>(null);
|
||||
|
||||
// Forms states
|
||||
const [isSignUp, setIsSignUp] = useState(false);
|
||||
const [signUpType, setSignUpType] = useState<'INTERNAL' | 'EXTERNAL' | null>(null);
|
||||
const [coordinatorLoginType, setCoordinatorLoginType] = useState<'Faculty' | 'HOD' | null>(null);
|
||||
const [splashState, setSplashState] = useState<'logo' | 'text' | 'fade-to-white' | 'done'>('logo');
|
||||
|
||||
useEffect(() => {
|
||||
const timer1 = setTimeout(() => {
|
||||
setSplashState('text');
|
||||
}, 1500);
|
||||
|
||||
const timer2 = setTimeout(() => {
|
||||
setSplashState('fade-to-white');
|
||||
}, 3000);
|
||||
|
||||
const timer3 = setTimeout(() => {
|
||||
setSplashState('done');
|
||||
}, 4500);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer1);
|
||||
clearTimeout(timer2);
|
||||
clearTimeout(timer3);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Login credentials state
|
||||
const [emailInput, setEmailInput] = useState('');
|
||||
const [passwordInput, setPasswordInput] = useState('');
|
||||
|
||||
// Register state (for other colleges / external students)
|
||||
const [formData, setFormData] = useState({
|
||||
email: '',
|
||||
phone: '',
|
||||
@@ -48,100 +83,158 @@ export const LoginPage: React.FC = () => {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
// Google sign in state
|
||||
const [showGoogleChooser, setShowGoogleChooser] = useState(false);
|
||||
const [customGoogleEmail, setCustomGoogleEmail] = useState('');
|
||||
|
||||
// Auto-set internal for non-student roles
|
||||
useEffect(() => {
|
||||
if (selectedRole && selectedRole !== 'STUDENT') {
|
||||
setSignUpType('INTERNAL');
|
||||
} else if (!isSignUp) {
|
||||
setSignUpType(null);
|
||||
}
|
||||
}, [selectedRole, isSignUp]);
|
||||
const mockAccounts = [
|
||||
{ email: "student.240007@cse.ritchennai.edu.in", name: "Abiram R (3rd Year CSE)", role: "Student (Auto-Reg)" },
|
||||
{ email: "student.250012@aiml.ritchennai.edu.in", name: "John Doe (2nd Year AIML)", role: "Student (Auto-Reg)" },
|
||||
{ email: "faculty@rit.edu", name: "Dr. Faculty Member", role: "Faculty" },
|
||||
{ email: "hod@rit.edu", name: "Prof. Head of Dept", role: "HOD" },
|
||||
{ email: "principal@rit.edu", name: "Dr. College Principal", role: "Principal" },
|
||||
{ email: "admin@rit.edu", name: "System Administrator", role: "Admin" },
|
||||
];
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
const handleLoginSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setErrorMessage(null);
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
if (!isSignUp) {
|
||||
// Login Logic
|
||||
const response = await fetch(API_BASE_URL + '/api/auth/login', {
|
||||
const response = await fetch(API_BASE_URL + '/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
email: emailInput,
|
||||
password: passwordInput
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const userData = await response.json();
|
||||
login(userData);
|
||||
} else {
|
||||
const errData = await response.json();
|
||||
throw new Error(errData.message || "Invalid credentials.");
|
||||
}
|
||||
} catch (err: any) {
|
||||
setErrorMessage(err.message || "An error occurred during authentication.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoogleSignIn = async () => {
|
||||
setErrorMessage(null);
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const result = await signInWithPopup(auth, googleProvider);
|
||||
const user = result.user;
|
||||
if (user && user.email) {
|
||||
const response = await fetch(API_BASE_URL + '/api/auth/google-login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
email: formData.email,
|
||||
password: formData.password
|
||||
email: user.email,
|
||||
fullName: user.displayName || "RIT User"
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const userData = await response.json();
|
||||
|
||||
// Role checks
|
||||
if (selectedRole === 'STUDENT' && userData.role !== 'STUDENT') {
|
||||
throw new Error("Access Denied: Please use the Staff Portal to log in.");
|
||||
}
|
||||
if (selectedRole === 'COORDINATOR') {
|
||||
const isCoordRole = userData.role === 'FACULTY' || userData.role === 'HOD';
|
||||
if (!isCoordRole) {
|
||||
throw new Error("Access Denied: You are not authorized for Coordinator Portal.");
|
||||
}
|
||||
if (coordinatorLoginType === 'HOD' && userData.role !== 'HOD') {
|
||||
throw new Error("Access Denied: HOD access only.");
|
||||
}
|
||||
if (coordinatorLoginType === 'Faculty' && userData.role !== 'FACULTY') {
|
||||
throw new Error("Access Denied: Faculty access only.");
|
||||
}
|
||||
}
|
||||
if (selectedRole === 'ADMIN' && userData.role !== 'ADMIN' && userData.role !== 'PRINCIPAL') {
|
||||
throw new Error("Access Denied: Admin or Principal access only.");
|
||||
}
|
||||
|
||||
login(userData);
|
||||
} else {
|
||||
const errData = await response.json();
|
||||
throw new Error(errData.message || "Invalid credentials.");
|
||||
throw new Error(errData.message || "Failed to sync Google account with database.");
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error("Google Auth Error:", err);
|
||||
if (err.code !== 'auth/popup-closed-by-user') {
|
||||
setErrorMessage(err.message || "Google Sign-In failed.");
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoogleLoginSubmit = async (email: string, name: string) => {
|
||||
if (!email) {
|
||||
alert("Please select or enter a Google account email.");
|
||||
return;
|
||||
}
|
||||
setErrorMessage(null);
|
||||
setIsSubmitting(true);
|
||||
setShowGoogleChooser(false);
|
||||
|
||||
try {
|
||||
const response = await fetch(API_BASE_URL + '/api/auth/google-login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
fullName: name
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const userData = await response.json();
|
||||
login(userData);
|
||||
} else {
|
||||
// Sign-Up Logic (Only for Student Role)
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
throw new Error("Passwords do not match.");
|
||||
}
|
||||
const errData = await response.json();
|
||||
throw new Error(errData.message || "OAuth login failed.");
|
||||
}
|
||||
} catch (err: any) {
|
||||
setErrorMessage(err.message || "Google Sign-In failed.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const signupPayload = {
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
fullName: formData.name,
|
||||
regNo: formData.regNo,
|
||||
phone: formData.phone,
|
||||
gender: formData.gender,
|
||||
collegeName: signUpType === 'EXTERNAL' ? formData.collegeName : 'Rajalakshmi Institute of Technology',
|
||||
department: signUpType === 'EXTERNAL' ? formData.department : formData.department,
|
||||
year: signUpType === 'EXTERNAL' ? 'N/A' : formData.year,
|
||||
section: signUpType === 'EXTERNAL' ? 'N/A' : formData.section,
|
||||
role: 'STUDENT'
|
||||
};
|
||||
const handleRegisterSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setErrorMessage(null);
|
||||
setIsSubmitting(true);
|
||||
|
||||
const response = await fetch(API_BASE_URL + '/api/auth/signup', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(signupPayload)
|
||||
});
|
||||
try {
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
throw new Error("Passwords do not match.");
|
||||
}
|
||||
|
||||
if (response.ok) {
|
||||
const userData = await response.json();
|
||||
alert("Account registered successfully!");
|
||||
login(userData);
|
||||
} else {
|
||||
const errData = await response.json();
|
||||
throw new Error(errData.message || "Registration failed.");
|
||||
}
|
||||
const signupPayload = {
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
fullName: formData.name,
|
||||
regNo: formData.regNo,
|
||||
phone: formData.phone,
|
||||
gender: formData.gender,
|
||||
collegeName: signUpType === 'EXTERNAL' ? formData.collegeName : 'Rajalakshmi Institute of Technology',
|
||||
department: formData.department,
|
||||
year: signUpType === 'EXTERNAL' ? 'N/A' : formData.year,
|
||||
section: signUpType === 'EXTERNAL' ? 'N/A' : formData.section,
|
||||
role: 'STUDENT'
|
||||
};
|
||||
|
||||
const response = await fetch(API_BASE_URL + '/api/auth/signup', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(signupPayload)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const userData = await response.json();
|
||||
alert("Account registered successfully!");
|
||||
login(userData);
|
||||
} else {
|
||||
const errData = await response.json();
|
||||
throw new Error(errData.message || "Registration failed.");
|
||||
}
|
||||
} catch (err: any) {
|
||||
setErrorMessage(err.message || "An error occurred.");
|
||||
@@ -154,350 +247,342 @@ export const LoginPage: React.FC = () => {
|
||||
const RIT_BLUE_TEXT = 'text-[#004a99]';
|
||||
const RIT_BLUE_HOVER = 'hover:bg-[#003366]';
|
||||
|
||||
const portals = [
|
||||
{
|
||||
id: 'STUDENT' as UserRole,
|
||||
title: 'Student Portal',
|
||||
description: 'Access events, track registrations, and manage your academic profile.',
|
||||
icon: 'fa-user-graduate',
|
||||
color: 'bg-[#004a99]',
|
||||
hoverColor: 'hover:border-[#004a99]',
|
||||
textColor: 'text-[#004a99]'
|
||||
},
|
||||
{
|
||||
id: 'COORDINATOR' as UserRole,
|
||||
title: 'Event Coordinator Portal',
|
||||
description: 'Create, manage, and coordinate campus events and announcements.',
|
||||
icon: 'fa-calendar-check',
|
||||
color: 'bg-orange-500',
|
||||
hoverColor: 'hover:border-orange-500',
|
||||
textColor: 'text-orange-500'
|
||||
},
|
||||
{
|
||||
id: 'ADMIN' as UserRole,
|
||||
title: 'Admin Portal',
|
||||
description: 'System-wide oversight, user management, and high-level analytics.',
|
||||
icon: 'fa-user-shield',
|
||||
color: 'bg-[#004a99]',
|
||||
hoverColor: 'hover:border-[#004a99]',
|
||||
textColor: 'text-[#004a99]'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full bg-white flex items-center justify-center font-sans overflow-x-hidden">
|
||||
<div className="min-h-screen w-full bg-slate-50 flex items-center justify-center font-sans p-6 overflow-x-hidden relative">
|
||||
|
||||
{/* Background radial accent */}
|
||||
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-glow rounded-full blur-[120px] opacity-40 pointer-events-none -z-10" />
|
||||
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-indigo-50 rounded-full blur-[120px] opacity-40 pointer-events-none -z-10" />
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{!selectedRole ? (
|
||||
{!isSignUp ? (
|
||||
// ----------------------------------------------------
|
||||
// WELCOME SCREEN GATEWAY
|
||||
// CENTRALIZED SIGN IN
|
||||
// ----------------------------------------------------
|
||||
<motion.div
|
||||
key="welcome"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="w-full max-w-6xl px-6 py-12 text-center"
|
||||
<motion.div
|
||||
key="login-pane"
|
||||
initial={{ opacity: 0, scale: 0.95, y: 10 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: -10 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="w-full max-w-md bg-white rounded-[2.5rem] border border-slate-100 premium-shadow p-10 flex flex-col items-center relative overflow-hidden"
|
||||
>
|
||||
<div className="mb-16">
|
||||
<img src={ritLogo} alt="RIT Logo" className="h-16 md:h-20 w-auto mx-auto mb-8 object-contain" />
|
||||
<p className="text-slate-500 text-lg font-medium max-w-2xl mx-auto uppercase tracking-widest text-xs">
|
||||
Select your gateway to excellence. Connect, manage, and celebrate.
|
||||
</p>
|
||||
<div className="w-full text-center mb-8">
|
||||
<img src={ritLogo} alt="RIT Logo" className="h-16 w-auto mx-auto mb-6 object-contain" />
|
||||
<h2 className="text-3xl font-black text-slate-900 tracking-tight flex items-center justify-center gap-1.5 uppercase">
|
||||
RIT EVENT HUB
|
||||
</h2>
|
||||
<p className="text-slate-400 text-xs font-bold uppercase tracking-widest mt-1">Centralized Portal Login</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 text-left">
|
||||
{portals.map((portal) => (
|
||||
<div
|
||||
key={portal.id}
|
||||
onClick={() => {
|
||||
setSelectedRole(portal.id);
|
||||
setErrorMessage(null);
|
||||
setIsSignUp(false);
|
||||
setSignUpType(null);
|
||||
setCoordinatorLoginType(null);
|
||||
}}
|
||||
className={cn(
|
||||
"group relative bg-white border-2 border-slate-100 rounded-[3rem] p-10 cursor-pointer transition-all duration-500 hover:-translate-y-4 hover:shadow-[0_40px_80px_-20px_rgba(0,0,0,0.1)]",
|
||||
portal.hoverColor
|
||||
)}
|
||||
{/* Google Sign In Button */}
|
||||
<button
|
||||
onClick={handleGoogleSignIn}
|
||||
onDoubleClick={() => setShowGoogleChooser(true)}
|
||||
title="Double-click to open mock accounts for local testing"
|
||||
className="w-full py-4 px-6 bg-white border border-slate-200 hover:border-brand-indigo/30 rounded-2xl flex items-center justify-center text-xs font-black text-slate-700 uppercase tracking-widest hover:bg-slate-50 transition-all hover:scale-[1.02] active:scale-[0.98] premium-shadow-sm mb-6"
|
||||
>
|
||||
<GoogleIcon />
|
||||
Sign in with Google
|
||||
</button>
|
||||
|
||||
{/* Separator */}
|
||||
<div className="w-full flex items-center justify-center gap-4 mb-6">
|
||||
<div className="h-px bg-slate-100 flex-1" />
|
||||
<span className="text-[9px] font-black text-slate-300 uppercase tracking-widest">or use credentials</span>
|
||||
<div className="h-px bg-slate-100 flex-1" />
|
||||
</div>
|
||||
|
||||
{/* Email & Password Form */}
|
||||
<form onSubmit={handleLoginSubmit} className="w-full space-y-4">
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
required
|
||||
type="email"
|
||||
placeholder="EMAIL ADDRESS"
|
||||
value={emailInput}
|
||||
onChange={(e) => setEmailInput(e.target.value)}
|
||||
className="w-full bg-slate-50 border border-transparent focus:border-brand-indigo/30 rounded-2xl pl-12 pr-6 py-4.5 text-xs font-bold outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
required
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="PASSWORD"
|
||||
value={passwordInput}
|
||||
onChange={(e) => setPasswordInput(e.target.value)}
|
||||
className="w-full bg-slate-50 border border-transparent focus:border-brand-indigo/30 rounded-2xl pl-12 pr-12 py-4.5 text-xs font-bold outline-none transition-all"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-5 top-1/2 -translate-y-1/2 text-slate-300 hover:text-brand-indigo transition-colors"
|
||||
>
|
||||
<div className={cn(
|
||||
"w-20 h-20 rounded-3xl flex items-center justify-center mb-8 shadow-lg group-hover:scale-110 transition-transform duration-500",
|
||||
portal.color
|
||||
)}>
|
||||
<i className={cn("fas text-3xl text-white", portal.icon)}></i>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-black text-slate-900 uppercase tracking-tight mb-4 group-hover:text-orange-500 transition-colors">
|
||||
{portal.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-slate-500 text-sm font-medium leading-relaxed mb-8">
|
||||
{portal.description}
|
||||
</p>
|
||||
<i className={cn("fas", showPassword ? "fa-eye-slash" : "fa-eye")}></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={cn("flex items-center gap-3 text-xs font-black uppercase tracking-widest group-hover:gap-5 transition-all", portal.textColor)}>
|
||||
Enter Portal <i className="fas fa-arrow-right"></i>
|
||||
</div>
|
||||
{errorMessage && (
|
||||
<div className="p-4 bg-red-50 text-red-600 rounded-2xl text-xs font-bold flex items-center gap-2 border border-red-100/50">
|
||||
<AlertCircle className="w-4 h-4 shrink-0" />
|
||||
<span>{errorMessage}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-20">
|
||||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.5em]">
|
||||
© 2026 Rajalakshmi Institute of Technology • Academic Excellence
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className={cn(
|
||||
"w-full py-5 text-white text-xs font-black rounded-2xl transition-all shadow-lg active:scale-[0.98] disabled:opacity-55 flex items-center justify-center gap-2 mt-4",
|
||||
RIT_BLUE,
|
||||
RIT_BLUE_HOVER
|
||||
)}
|
||||
>
|
||||
<LogIn className="w-4 h-4" />
|
||||
{isSubmitting ? 'Verifying...' : 'Sign in now...'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-8 text-center space-y-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsSignUp(true);
|
||||
setSignUpType('EXTERNAL');
|
||||
setErrorMessage(null);
|
||||
}}
|
||||
className="text-xs font-bold text-slate-400 hover:text-brand-indigo transition-colors block mx-auto"
|
||||
>
|
||||
External Student ? Register here..
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
// ----------------------------------------------------
|
||||
// DUAL SLIDING LOGIN & SIGNUP FORMS (Site 2 Layout)
|
||||
// SIGN UP (Only for External Students)
|
||||
// ----------------------------------------------------
|
||||
<motion.div
|
||||
key="forms"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="relative w-full max-w-5xl h-[700px] bg-white rounded-[3rem] shadow-[0_50px_100px_-20px_rgba(0,0,0,0.15)] overflow-hidden flex flex-col md:flex-row border border-slate-100"
|
||||
<motion.div
|
||||
key="signup-pane"
|
||||
initial={{ opacity: 0, scale: 0.95, y: 10 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: -10 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="w-full max-w-md bg-white rounded-[2.5rem] border border-slate-100 premium-shadow p-10 flex flex-col relative overflow-hidden"
|
||||
>
|
||||
{/* Back Button */}
|
||||
<button
|
||||
onClick={() => setSelectedRole(null)}
|
||||
className="absolute top-8 left-8 z-[60] w-12 h-12 bg-white/10 md:bg-slate-100 hover:bg-slate-200 text-slate-500 rounded-full flex items-center justify-center transition-all border border-transparent shadow-sm"
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsSignUp(false);
|
||||
setSignUpType(null);
|
||||
setErrorMessage(null);
|
||||
}}
|
||||
className="absolute top-6 left-6 w-10 h-10 bg-slate-50 hover:bg-slate-100 text-slate-500 rounded-full flex items-center justify-center transition-all border border-slate-100"
|
||||
type="button"
|
||||
>
|
||||
<i className="fas fa-arrow-left"></i>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Forms Section */}
|
||||
<div className="relative flex-1 flex">
|
||||
|
||||
{/* Sign Up (Left Side Panel) */}
|
||||
<div className={cn(
|
||||
"absolute inset-0 w-full md:w-1/2 h-full flex flex-col justify-center p-12 transition-all duration-700 ease-in-out z-10",
|
||||
isSignUp ? "opacity-100 translate-x-0 visible" : "opacity-0 -translate-x-full invisible pointer-events-none"
|
||||
)}>
|
||||
<img src={ritLogo} alt="Logo" className="h-12 w-auto mb-6 object-contain self-start" />
|
||||
|
||||
{!signUpType && selectedRole === 'STUDENT' ? (
|
||||
<div className="space-y-6 text-center animate-in fade-in zoom-in-95 duration-500">
|
||||
<h2 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-8">Choose <span className="text-orange-500">Portal</span></h2>
|
||||
<div className="grid gap-4">
|
||||
<button
|
||||
onClick={() => setSignUpType('INTERNAL')}
|
||||
type="button"
|
||||
className={cn("w-full py-6 text-white rounded-2xl font-black uppercase text-xs tracking-[0.2em] shadow-lg transition-all hover:scale-[1.02] active:scale-95", RIT_BLUE)}
|
||||
>
|
||||
RIT Student (Internal)
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSignUpType('EXTERNAL')}
|
||||
type="button"
|
||||
className="w-full py-6 bg-white border-2 border-slate-200 text-slate-700 rounded-2xl font-black uppercase text-xs tracking-[0.2em] transition-all hover:border-orange-500 hover:text-orange-500 hover:scale-[1.02] active:scale-95"
|
||||
>
|
||||
Other College (External)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4 overflow-y-auto no-scrollbar py-4 pr-1">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-3xl font-black text-slate-900 uppercase tracking-tighter">
|
||||
{signUpType === 'INTERNAL' ? 'Internal' : 'External'} <span className="text-orange-500">Sign Up</span>
|
||||
</h2>
|
||||
<button type="button" onClick={() => setSignUpType(null)} className="text-[10px] font-black text-slate-400 uppercase hover:text-orange-500">Change</button>
|
||||
</div>
|
||||
<p className="text-slate-400 text-[10px] font-bold uppercase tracking-widest mt-2">Join the RIT Excellence Hub</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input required name="name" placeholder="FULL NAME" className="bg-slate-50 border-none rounded-2xl px-6 py-4 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all" value={formData.name} onChange={handleInputChange} />
|
||||
<input required type="email" name="email" placeholder="EMAIL" className="bg-slate-50 border-none rounded-2xl px-6 py-4 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all" value={formData.email} onChange={handleInputChange} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input required name="regNo" placeholder="REG NO" className="bg-slate-50 border-none rounded-2xl px-6 py-4 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all" value={formData.regNo} onChange={handleInputChange} />
|
||||
<input required name="phone" placeholder="PHONE NUMBER" className="bg-slate-50 border-none rounded-2xl px-6 py-4 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all" value={formData.phone} onChange={handleInputChange} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input required type="password" name="password" placeholder="PASSWORD" className="bg-slate-50 border-none rounded-2xl px-6 py-4 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all" value={formData.password} onChange={handleInputChange} />
|
||||
<input required type="password" name="confirmPassword" placeholder="CONFIRM" className="bg-slate-50 border-none rounded-2xl px-6 py-4 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all" value={formData.confirmPassword} onChange={handleInputChange} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<select required name="gender" className="bg-slate-50 border-none rounded-2xl px-6 py-4 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all cursor-pointer" value={formData.gender} onChange={handleInputChange}>
|
||||
<option value="">SELECT GENDER</option>
|
||||
<option value="Male">MALE</option>
|
||||
<option value="Female">FEMALE</option>
|
||||
<option value="Other">OTHER</option>
|
||||
</select>
|
||||
<input required name="collegeLocation" placeholder="COLLEGE LOCATION" className="bg-slate-50 border-none rounded-2xl px-6 py-4 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all" value={formData.collegeLocation} onChange={handleInputChange} />
|
||||
</div>
|
||||
|
||||
<input
|
||||
required
|
||||
name="collegeName"
|
||||
placeholder="COLLEGE NAME"
|
||||
disabled={signUpType === 'INTERNAL'}
|
||||
className="w-full bg-slate-50 border-none rounded-2xl px-6 py-4 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all disabled:opacity-60"
|
||||
value={formData.collegeName}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<select required name="department" className="bg-slate-50 border-none rounded-2xl px-4 py-4 text-[10px] font-black outline-none cursor-pointer" value={formData.department} onChange={handleInputChange}>
|
||||
<option value="">DEPT</option>
|
||||
{(signUpType === 'EXTERNAL' ? EXTERNAL_DEPARTMENTS : DEPARTMENTS).map(d => <option key={d} value={d}>{d}</option>)}
|
||||
</select>
|
||||
<select required name="year" className="bg-slate-50 border-none rounded-2xl px-4 py-4 text-[10px] font-black outline-none cursor-pointer" value={formData.year} onChange={handleInputChange}>
|
||||
<option value="">YEAR</option>
|
||||
{YEARS.map(y => <option key={y} value={y}>{y}</option>)}
|
||||
</select>
|
||||
<select required name="section" className="bg-slate-50 border-none rounded-2xl px-4 py-4 text-[10px] font-black outline-none cursor-pointer" value={formData.section} onChange={handleInputChange}>
|
||||
<option value="">SEC</option>
|
||||
{SECTIONS.map(s => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{errorMessage && <p className="text-rose-500 text-[10px] font-bold uppercase">{errorMessage}</p>}
|
||||
|
||||
<button type="submit" disabled={isSubmitting} className="w-full py-5 bg-orange-500 text-white text-[10px] font-black uppercase tracking-[0.3em] rounded-2xl hover:bg-orange-600 transition-all shadow-lg shadow-orange-500/20 active:scale-95 disabled:opacity-55">
|
||||
{isSubmitting ? 'Registering...' : 'Sign Up Now'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sign In (Right Side Panel) */}
|
||||
<div className={cn(
|
||||
"absolute inset-0 w-full md:w-1/2 h-full flex flex-col justify-center p-12 transition-all duration-700 ease-in-out z-10 ml-auto",
|
||||
!isSignUp ? "opacity-100 translate-x-0 visible" : "opacity-0 translate-x-full invisible pointer-events-none"
|
||||
)}>
|
||||
|
||||
{selectedRole === 'COORDINATOR' && !coordinatorLoginType ? (
|
||||
<div className="space-y-6 text-center animate-in fade-in zoom-in-95 duration-500">
|
||||
<img src={ritLogo} alt="Logo" className="h-12 w-auto mb-6 object-contain mx-auto" />
|
||||
<h2 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-8">Choose <span className="text-orange-500">Access Level</span></h2>
|
||||
<div className="grid gap-4">
|
||||
<button
|
||||
onClick={() => setCoordinatorLoginType('Faculty')}
|
||||
type="button"
|
||||
className={cn("w-full py-6 text-white rounded-2xl font-black uppercase text-xs tracking-[0.2em] shadow-lg transition-all hover:scale-[1.02] active:scale-95", RIT_BLUE)}
|
||||
>
|
||||
Faculty Member
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCoordinatorLoginType('HOD')}
|
||||
type="button"
|
||||
className="w-full py-6 bg-orange-500 text-white rounded-2xl font-black uppercase text-xs tracking-[0.2em] shadow-lg transition-all hover:scale-[1.02] active:scale-95"
|
||||
>
|
||||
Head of Department
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="mb-8">
|
||||
<img src={ritLogo} alt="Logo" className="h-12 w-auto mb-6 object-contain" />
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-4xl font-black text-slate-900 uppercase tracking-tighter">Welcome <span className={RIT_BLUE_TEXT}>Back</span></h2>
|
||||
{selectedRole === 'COORDINATOR' && (
|
||||
<button type="button" onClick={() => setCoordinatorLoginType(null)} className="text-[10px] font-black text-slate-400 uppercase hover:text-orange-500">Change</button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-slate-400 text-xs font-bold uppercase tracking-widest mt-2">
|
||||
Access your {selectedRole === 'ADMIN' ? 'Admin / Principal' : (selectedRole === 'COORDINATOR' ? `${coordinatorLoginType} Event` : 'Student')} portal
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="relative">
|
||||
<i className="fas fa-envelope absolute left-6 top-1/2 -translate-y-1/2 text-slate-300"></i>
|
||||
<input required type="email" name="email" placeholder="EMAIL ADDRESS" className="w-full bg-slate-50 border-none rounded-2xl pl-14 pr-6 py-5 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all" value={formData.email} onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="relative">
|
||||
<i className="fas fa-lock absolute left-6 top-1/2 -translate-y-1/2 text-slate-300"></i>
|
||||
<input required type={showPassword ? 'text' : 'password'} name="password" placeholder="PASSWORD" className="w-full bg-slate-50 border-none rounded-2xl pl-14 pr-14 py-5 text-xs font-bold outline-none focus:ring-2 focus:ring-[#004a99] transition-all" value={formData.password} onChange={handleInputChange} />
|
||||
<button type="button" onClick={() => setShowPassword(!showPassword)} className={cn("absolute right-6 top-1/2 -translate-y-1/2 text-slate-300 transition-colors", `hover:${RIT_BLUE_TEXT}`)}>
|
||||
<i className={cn("fas", showPassword ? "fa-eye-slash" : "fa-eye")}></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button type="button" className="text-[10px] font-black text-slate-400 uppercase tracking-widest hover:text-orange-500 transition-colors">Forgot Password?</button>
|
||||
</div>
|
||||
|
||||
{errorMessage && <p className="text-rose-500 text-[10px] font-bold uppercase">{errorMessage}</p>}
|
||||
|
||||
<button type="submit" disabled={isSubmitting} className={cn("w-full py-5 text-white text-[10px] font-black uppercase tracking-[0.3em] rounded-2xl transition-all shadow-lg active:scale-95 disabled:opacity-55", RIT_BLUE, RIT_BLUE_HOVER)}>
|
||||
{isSubmitting ? 'Verifying...' : 'Sign In Now'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-center mb-8 pt-4">
|
||||
<h2 className="text-3xl font-black text-slate-900 uppercase tracking-tighter">
|
||||
Other College <span className="text-[#004a99]">Sign Up</span>
|
||||
</h2>
|
||||
<p className="text-slate-400 text-[10px] font-bold uppercase tracking-widest mt-2">Join the RIT Excellence Hub</p>
|
||||
</div>
|
||||
|
||||
{/* Sliding Overlay Panel (Matches RIT Navy theme) */}
|
||||
<div className={cn(
|
||||
"absolute top-0 left-0 w-full md:w-1/2 h-full z-50 transition-all duration-700 ease-[cubic-bezier(0.7,0,0.3,1)] flex flex-col items-center justify-center text-center p-12 overflow-hidden",
|
||||
RIT_BLUE,
|
||||
isSignUp ? "md:translate-x-full" : "translate-x-0"
|
||||
)}>
|
||||
{/* Background patterns */}
|
||||
<div className="absolute inset-0 opacity-10 pointer-events-none">
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_white_1px,_transparent_1px)] bg-[size:30px_30px]"></div>
|
||||
<form onSubmit={handleRegisterSubmit} className="space-y-4 overflow-y-auto max-h-[450px] pr-3 py-1 scrollbar-hide">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input required name="name" placeholder="FULL NAME" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.name} onChange={handleInputChange} />
|
||||
<input required type="email" name="email" placeholder="EMAIL" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.email} onChange={handleInputChange} />
|
||||
</div>
|
||||
|
||||
{/* Login Overlay Message */}
|
||||
<div className={cn(
|
||||
"absolute inset-0 flex flex-col items-center justify-center p-12 transition-all duration-700 delay-100",
|
||||
isSignUp ? "opacity-0 -translate-y-10 pointer-events-none invisible" : "opacity-100 translate-y-0 pointer-events-auto visible"
|
||||
)}>
|
||||
<h2 className="text-4xl font-black text-white uppercase tracking-tighter mb-4">
|
||||
{selectedRole === 'STUDENT' ? 'New Here?' : 'Restricted Gateway'}
|
||||
</h2>
|
||||
<p className="text-white/80 text-sm font-medium leading-relaxed mb-10 max-w-xs mx-auto">
|
||||
{selectedRole === 'STUDENT'
|
||||
? 'Sign up and discover a world of possibilities at RIT Events Hub.'
|
||||
: 'Coordinator and Admin profiles are pre-allocated. Please consult systems management for access credentials.'}
|
||||
</p>
|
||||
{selectedRole === 'STUDENT' && (
|
||||
<button
|
||||
onClick={() => setIsSignUp(true)}
|
||||
className="px-12 py-4 border-2 border-white text-white text-[10px] font-black uppercase tracking-[0.3em] rounded-full hover:bg-white hover:text-[#004a99] transition-all active:scale-95"
|
||||
type="button"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input required name="regNo" placeholder="REG NO" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.regNo} onChange={handleInputChange} />
|
||||
<input required name="phone" placeholder="PHONE NUMBER" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.phone} onChange={handleInputChange} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input required type="password" name="password" placeholder="PASSWORD" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.password} onChange={handleInputChange} />
|
||||
<input required type="password" name="confirmPassword" placeholder="CONFIRM" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.confirmPassword} onChange={handleInputChange} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<select required name="gender" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all cursor-pointer" value={formData.gender} onChange={handleInputChange}>
|
||||
<option value="">SELECT GENDER</option>
|
||||
<option value="Male">MALE</option>
|
||||
<option value="Female">FEMALE</option>
|
||||
<option value="Other">OTHER</option>
|
||||
</select>
|
||||
<input required name="collegeLocation" placeholder="COLLEGE LOCATION" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.collegeLocation} onChange={handleInputChange} />
|
||||
</div>
|
||||
|
||||
<input required name="collegeName" placeholder="COLLEGE NAME" className="w-full bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.collegeName} onChange={handleInputChange} />
|
||||
|
||||
<div className="relative">
|
||||
<select required name="department" className="w-full bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all cursor-pointer appearance-none" value={formData.department} onChange={handleInputChange}>
|
||||
<option value="">SELECT DEPARTMENT</option>
|
||||
{EXTERNAL_DEPARTMENTS.map(d => <option key={d} value={d}>{d}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{errorMessage && (
|
||||
<div className="p-4 bg-red-50 text-red-600 rounded-2xl text-xs font-bold flex items-center gap-2 border border-red-100/50">
|
||||
<AlertCircle className="w-4 h-4 shrink-0" />
|
||||
<span>{errorMessage}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className={cn(
|
||||
"w-full py-5 text-white text-xs font-black rounded-2xl transition-all shadow-lg active:scale-[0.98] disabled:opacity-55 flex items-center justify-center gap-2",
|
||||
RIT_BLUE,
|
||||
RIT_BLUE_HOVER
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Signup Overlay Message */}
|
||||
<div className={cn(
|
||||
"absolute inset-0 flex flex-col items-center justify-center p-12 transition-all duration-700 delay-100",
|
||||
(!isSignUp || selectedRole !== 'STUDENT') ? "opacity-0 translate-y-10 pointer-events-none invisible" : "opacity-100 translate-y-0 pointer-events-auto visible"
|
||||
)}>
|
||||
<h2 className="text-4xl font-black text-white uppercase tracking-tighter mb-4">Welcome <span className="text-white/70">Back!</span></h2>
|
||||
<p className="text-white/80 text-sm font-medium leading-relaxed mb-10 max-w-xs mx-auto">
|
||||
To keep connected with us please login with your personal credentials.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setIsSignUp(false)}
|
||||
className="px-12 py-4 border-2 border-white text-white text-[10px] font-black uppercase tracking-[0.3em] rounded-full hover:bg-white hover:text-[#004a99] transition-all active:scale-95"
|
||||
type="button"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
>
|
||||
{isSubmitting ? 'Registering...' : 'Sign up now...'}
|
||||
</button>
|
||||
</form>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* ----------------------------------------------------
|
||||
MOCK GOOGLE ACCOUNT CHOOSER MODAL
|
||||
---------------------------------------------------- */}
|
||||
<AnimatePresence>
|
||||
{showGoogleChooser && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setShowGoogleChooser(false)}
|
||||
className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
className="relative w-full max-w-md bg-white rounded-[2.5rem] premium-shadow overflow-hidden"
|
||||
>
|
||||
<div className="p-8 space-y-4">
|
||||
<div className="flex items-center justify-between pb-4 border-b border-slate-100">
|
||||
<div>
|
||||
<h3 className="text-lg font-black text-brand-navy flex items-center gap-1.5 uppercase">
|
||||
<Shield className="w-5 h-5 text-brand-indigo" />
|
||||
Sign In with Google
|
||||
</h3>
|
||||
<p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-0.5">Mock OAuth Provider Account Chooser</p>
|
||||
</div>
|
||||
<button onClick={() => setShowGoogleChooser(false)} className="p-2 hover:bg-slate-50 rounded-xl text-slate-400 transition-all">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto pr-1">
|
||||
{mockAccounts.map((acc) => (
|
||||
<button
|
||||
key={acc.email}
|
||||
onClick={() => handleGoogleLoginSubmit(acc.email, acc.name.split(' (')[0])}
|
||||
className="w-full text-left p-3.5 bg-slate-50 hover:bg-brand-glow border border-slate-100 hover:border-brand-indigo/20 rounded-2xl flex items-center justify-between transition-all hover:scale-[1.01]"
|
||||
>
|
||||
<div>
|
||||
<p className="text-xs font-black text-brand-navy leading-none">{acc.name}</p>
|
||||
<p className="text-[10px] text-slate-400 font-medium mt-1">{acc.email}</p>
|
||||
</div>
|
||||
<span className="px-2 py-0.5 bg-white border border-slate-100 text-[8px] font-black uppercase tracking-widest text-brand-indigo rounded-md">{acc.role}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-100 pt-4 space-y-3">
|
||||
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Or enter a custom email</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="student.260099@cse.ritchennai.edu.in"
|
||||
value={customGoogleEmail}
|
||||
onChange={(e) => setCustomGoogleEmail(e.target.value)}
|
||||
className="flex-1 bg-slate-50 border border-slate-100 rounded-xl px-4 py-2 text-xs font-semibold focus:outline-none focus:border-brand-indigo/30"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleGoogleLoginSubmit(customGoogleEmail, "Custom Google User")}
|
||||
className="px-4 py-2.5 bg-brand-navy text-white font-black text-[9px] uppercase tracking-widest rounded-xl hover:scale-105 active:scale-95 transition-all shadow-sm"
|
||||
>
|
||||
OAuth Sign In
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Splash Screen Overlay */}
|
||||
<AnimatePresence>
|
||||
{splashState !== 'done' && (
|
||||
<motion.div
|
||||
key="splash-overlay"
|
||||
initial={{ opacity: 1, backgroundColor: '#004a99' }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
backgroundColor: splashState === 'fade-to-white' ? '#ffffff' : '#004a99'
|
||||
}}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{
|
||||
backgroundColor: { duration: 1.5, ease: "easeInOut" },
|
||||
opacity: { duration: 1.5, ease: "easeInOut" }
|
||||
}}
|
||||
className="fixed inset-0 flex items-center justify-center z-[200] overflow-hidden"
|
||||
>
|
||||
{/* Background Pattern - fade it out when transitioning to white */}
|
||||
<motion.div
|
||||
animate={{ opacity: splashState === 'fade-to-white' ? 0 : 0.1 }}
|
||||
transition={{ duration: 1.0 }}
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_white_1px,_transparent_1px)] bg-[size:30px_30px]"></div>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{splashState === 'logo' && (
|
||||
<motion.div
|
||||
key="logo"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 1.1 }}
|
||||
transition={{ duration: 0.6, ease: "easeInOut" }}
|
||||
className="flex flex-col items-center gap-4"
|
||||
>
|
||||
<img src={ritLogo} alt="RIT Logo" className="h-28 w-auto object-contain drop-shadow-[0_10px_20px_rgba(255,255,255,0.15)]" />
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{splashState === 'text' && (
|
||||
<motion.div
|
||||
key="text"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.6, ease: "easeInOut" }}
|
||||
className="text-center"
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-white tracking-widest uppercase">
|
||||
RIT EVENT HUB
|
||||
</h1>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user