406 lines
14 KiB
TypeScript
406 lines
14 KiB
TypeScript
// Due to the length and complexity of the complete updated form, the full implementation is provided modularly.
|
|
// This file only includes the top-level form layout and updated schema logic. Other components (InternshipModal, ResumeModal, etc.)
|
|
// should be created as separate files or extracted for cleanliness.
|
|
|
|
'use client';
|
|
|
|
import { useState, useTransition } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
// Only import used UI components
|
|
import { Button } from '@workspace/ui/components/button';
|
|
import { Progress } from '@workspace/ui/components/progress';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
|
|
import { Form } from '@workspace/ui/components/form';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useRef } from 'react';
|
|
|
|
import { studentSignupSchema, StudentSignup } from './schema';
|
|
import PersonalDetailsStep from './steps/PersonalDetailsStep';
|
|
import AcademicDetailsStep from './steps/AcademicDetailsStep';
|
|
import SemesterGradesStep from './steps/SemesterGradesStep';
|
|
import AdditionalDetailsStep from './steps/AdditionalDetailsStep';
|
|
import InternshipStep from './steps/InternshipStep';
|
|
import ResumeStep from './steps/ResumeStep';
|
|
|
|
import { signupAction } from './action';
|
|
|
|
const steps = [
|
|
{
|
|
id: 1,
|
|
title: 'Personal Details',
|
|
fields: [
|
|
'firstName',
|
|
'lastName',
|
|
'mothersName',
|
|
'mothersEmail',
|
|
'mothersPhone',
|
|
'fathersName',
|
|
'fathersEmail',
|
|
'fathersPhone',
|
|
'rollNumber',
|
|
'phoneNumber',
|
|
'address',
|
|
'gender',
|
|
'dob',
|
|
'personalGmail',
|
|
],
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Academic Details',
|
|
fields: ['degree', 'year', 'branch', 'ssc', 'hsc', 'isDiploma'],
|
|
},
|
|
{ id: 3, title: 'Semester Grades', fields: ['sgpi'] },
|
|
{ id: 4, title: 'Additional Details', fields: ['linkedin', 'github', 'skills'] },
|
|
{ id: 5, title: 'Internships', fields: ['internships'] },
|
|
{ id: 6, title: 'Resumes', fields: ['resume'] },
|
|
];
|
|
|
|
export default function StudentRegistrationForm() {
|
|
const [currentStep, setCurrentStep] = useState(1);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isPending, startTransition] = useTransition();
|
|
const router = useRouter();
|
|
const formRef = useRef<any>(null);
|
|
|
|
const form = useForm<StudentSignup>({
|
|
resolver: zodResolver(studentSignupSchema),
|
|
defaultValues: {
|
|
firstName: '',
|
|
middleName: '',
|
|
lastName: '',
|
|
mothersName: '',
|
|
mothersEmail: '',
|
|
mothersPhone: '',
|
|
fathersName: '',
|
|
fathersEmail: '',
|
|
fathersPhone: '',
|
|
rollNumber: '',
|
|
phoneNumber: '',
|
|
address: '',
|
|
gender: '',
|
|
dob: new Date(),
|
|
personalGmail: '',
|
|
degree: '',
|
|
branch: '',
|
|
year: '',
|
|
skills: [],
|
|
linkedin: '',
|
|
github: '',
|
|
ssc: 0,
|
|
hsc: 0,
|
|
isDiploma: false,
|
|
sgpi: Array.from({ length: 8 }, (_, i) => ({
|
|
sem: i + 1,
|
|
sgpi: 0,
|
|
kt: false,
|
|
ktDead: false,
|
|
})),
|
|
internships: [],
|
|
resume: [],
|
|
},
|
|
});
|
|
|
|
// console.log(form.formState.errors)
|
|
|
|
const validateCurrentStep = async () => {
|
|
const current = steps.find((s) => s.id === currentStep);
|
|
if (!current) return false;
|
|
|
|
try {
|
|
const result = await form.trigger(current.fields as (keyof StudentSignup)[]);
|
|
return result;
|
|
} catch (error) {
|
|
console.error('Validation error:', error);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const nextStep = async () => {
|
|
const isValid = await validateCurrentStep();
|
|
if (isValid && currentStep < steps.length) {
|
|
setCurrentStep((prev) => prev + 1);
|
|
} else if (!isValid) {
|
|
alert('Please fill all required fields before proceeding.');
|
|
}
|
|
};
|
|
|
|
const prevStep = () => {
|
|
if (currentStep > 1) setCurrentStep((prev) => prev - 1);
|
|
};
|
|
|
|
const onSubmit = async (data: StudentSignup) => {
|
|
// Only submit if on the last step
|
|
if (currentStep !== steps.length) return;
|
|
|
|
setIsSubmitting(true);
|
|
try {
|
|
const result = await signupAction(data);
|
|
if (result && result.success) {
|
|
router.push('/');
|
|
return;
|
|
}
|
|
if (result && result.error) {
|
|
const errorMessage = Array.isArray(result.error)
|
|
? result.error.map((e) => e.message || e).join(', ')
|
|
: result.error;
|
|
alert('Submission failed: ' + errorMessage);
|
|
} else {
|
|
alert('Submission failed. Try again.');
|
|
}
|
|
} catch (err) {
|
|
console.error('Submission error:', err);
|
|
alert('Submission failed. Try again.');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const renderStep = () => {
|
|
switch (currentStep) {
|
|
case 1:
|
|
return <PersonalDetailsStep form={form} />;
|
|
case 2:
|
|
return <AcademicDetailsStep form={form} />;
|
|
case 3:
|
|
return <SemesterGradesStep form={form} />;
|
|
case 4:
|
|
return <AdditionalDetailsStep form={form} />;
|
|
case 5:
|
|
return <InternshipStep form={form} />;
|
|
case 6:
|
|
return <ResumeStep form={form} />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const progress = (currentStep / steps.length) * 100;
|
|
|
|
// Map field keys to user-friendly names
|
|
const fieldLabels: Record<string, string> = {
|
|
firstName: 'First Name',
|
|
middleName: 'Middle Name',
|
|
lastName: 'Last Name',
|
|
mothersName: "Mother's Name",
|
|
mothersEmail: "Mother's Email",
|
|
mothersPhone: "Mother's Phone Number",
|
|
fathersName: "Father's Name",
|
|
fathersEmail: "Father's Email",
|
|
fathersPhone: "Father's Phone Number",
|
|
rollNumber: 'Roll Number',
|
|
phoneNumber: 'Phone Number',
|
|
address: 'Address',
|
|
gender: 'Gender',
|
|
dob: 'Date of Birth',
|
|
personalGmail: 'Personal Email',
|
|
degree: 'Degree',
|
|
branch: 'Branch',
|
|
year: 'Year',
|
|
skills: 'Skills',
|
|
linkedin: 'LinkedIn',
|
|
github: 'GitHub',
|
|
ssc: 'SSC %',
|
|
hsc: 'HSC %',
|
|
isDiploma: 'Diploma Holder',
|
|
sgpi: 'Semester Grades',
|
|
internships: 'Internships',
|
|
resume: 'Resumes',
|
|
};
|
|
|
|
// Helper to recursively extract error fields
|
|
function extractErrorFields(errors: any, prefix = ''): string[] {
|
|
let fields: string[] = [];
|
|
for (const key in errors) {
|
|
if (typeof errors[key] === 'object' && errors[key] !== null && 'message' in errors[key]) {
|
|
fields.push(prefix + key);
|
|
} else if (typeof errors[key] === 'object' && errors[key] !== null) {
|
|
fields = fields.concat(extractErrorFields(errors[key], prefix + key + '.'));
|
|
}
|
|
}
|
|
return fields;
|
|
}
|
|
|
|
return (
|
|
<div className="relative min-h-screen py-8 flex flex-col items-center justify-start overflow-hidden animate-fade-in live-bg-gradient">
|
|
{/* Animated floating blobs with more vibrant colors */}
|
|
<div className="absolute top-[-100px] left-[-100px] w-96 h-96 bg-[#f8f8f8] rounded-full blur-3xl opacity-60 z-0 animate-blob1" />
|
|
<div className="absolute bottom-[-120px] right-[-120px] w-[32rem] h-[32rem] bg-[#d9d9d9] rounded-full blur-3xl opacity-60 z-0 animate-blob2" />
|
|
<div className="absolute top-1/2 left-1/2 w-80 h-80 bg-[#b3b3b3] rounded-full blur-2xl opacity-40 z-0 -translate-x-1/2 -translate-y-1/2 animate-blob3" />
|
|
<div className="absolute top-[20%] right-[10%] w-72 h-72 bg-[#7a7a7a] rounded-full blur-2xl opacity-50 z-0 animate-blob4" />
|
|
<div className="absolute bottom-[15%] left-[15%] w-64 h-64 bg-[#262626] rounded-full blur-2xl opacity-40 z-0 animate-blob5" />
|
|
|
|
{/* Welcoming heading - now always at the top */}
|
|
<div className="w-full text-center mb-8 z-10">
|
|
<h1 className="text-4xl font-extrabold text-primary drop-shadow-sm tracking-tight mb-2">
|
|
Welcome to Placement Portal
|
|
</h1>
|
|
<p className="text-lg text-gray-500 max-w-xl mx-auto">
|
|
Register below to get started with your placement journey. Fill in your details step by
|
|
step and let your career take off!
|
|
</p>
|
|
</div>
|
|
<div className="max-w-4xl w-full mx-auto px-4 z-10">
|
|
<Card className="shadow-2xl rounded-3xl border border-gray-200 bg-white/90 backdrop-blur-md">
|
|
<CardHeader>
|
|
<CardTitle className="text-3xl font-extrabold text-center text-primary drop-shadow-sm tracking-tight">
|
|
Student Registration Form
|
|
</CardTitle>
|
|
<div className="space-y-2 mt-2">
|
|
<div className="flex justify-between text-sm text-muted-foreground">
|
|
<span>
|
|
Step {currentStep} of {steps.length}
|
|
</span>
|
|
<span className="font-semibold text-primary/80">
|
|
{steps[currentStep - 1]?.title}
|
|
</span>
|
|
</div>
|
|
<Progress value={progress} className="w-full h-2 rounded-full bg-muted" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Form {...form}>
|
|
<form
|
|
ref={formRef}
|
|
onSubmit={
|
|
currentStep === steps.length
|
|
? form.handleSubmit(onSubmit, () => {
|
|
// Get all error fields
|
|
const errorFields = extractErrorFields(form.formState.errors);
|
|
// Map to user-friendly names
|
|
const prettyFields = errorFields.map((key) => {
|
|
// Try to map top-level, or fallback to key
|
|
const topKey = String(key.split('.')[0]);
|
|
return fieldLabels[topKey] || key;
|
|
});
|
|
alert(
|
|
'Please fill all required fields before submitting.\n' +
|
|
(prettyFields.length > 0
|
|
? 'Missing/invalid: ' + prettyFields.join(', ')
|
|
: ''),
|
|
);
|
|
})
|
|
: (e) => e.preventDefault()
|
|
}
|
|
className="space-y-8"
|
|
onKeyDown={(e) => {
|
|
if (
|
|
e.key === 'Enter' &&
|
|
e.target instanceof HTMLElement &&
|
|
e.target.tagName !== 'TEXTAREA'
|
|
) {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
>
|
|
{renderStep()}
|
|
<div className="flex justify-between pt-8">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={prevStep}
|
|
disabled={currentStep === 1}
|
|
className="rounded-full px-8 py-2 shadow-sm"
|
|
>
|
|
Previous
|
|
</Button>
|
|
{currentStep === steps.length ? (
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting || isPending}
|
|
className="rounded-full px-8 py-2 shadow-md bg-gradient-to-r from-primary to-accent text-white"
|
|
>
|
|
{isSubmitting || isPending ? 'Submitting...' : 'Submit'}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="button"
|
|
onClick={nextStep}
|
|
className="rounded-full px-8 py-2 shadow-md bg-gradient-to-r from-primary to-accent text-white"
|
|
>
|
|
Next
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
{/* Animated gradient and blob styles */}
|
|
<style jsx global>{`
|
|
/* ====== BACKGROUND GRADIENT ==================================== */
|
|
.live-bg-gradient {
|
|
/* lightest → darkest slate-blue progression */
|
|
background: linear-gradient(
|
|
120deg,
|
|
#f1f5f9,
|
|
/* slate-50 */ #cbd5e1 30%,
|
|
/* slate-200 */ #94a3b8 60%,
|
|
/* slate-400 */ #64748b 80%,
|
|
/* slate-500 */ #334155 /* slate-700 */
|
|
);
|
|
background-size: 300% 300%;
|
|
animation: gradientMove 16s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes gradientMove {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
25% {
|
|
background-position: 100% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 100%;
|
|
}
|
|
75% {
|
|
background-position: 0% 100%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
/* ====== BLOB COLORS ============================================ */
|
|
.animate-blob1 {
|
|
background: #e2e8f0;
|
|
} /* slate-100 */
|
|
.animate-blob2 {
|
|
background: #cbd5e1;
|
|
} /* slate-200 */
|
|
.animate-blob3 {
|
|
background: #94a3b8;
|
|
} /* slate-400 */
|
|
.animate-blob4 {
|
|
background: #64748b;
|
|
} /* slate-500 */
|
|
.animate-blob5 {
|
|
background: #475569;
|
|
} /* slate-600 */
|
|
|
|
/* ====== BLOB MOTION (unchanged) ================================ */
|
|
.animate-blob1 {
|
|
animation: blobMove1 18s ease-in-out infinite;
|
|
}
|
|
.animate-blob2 {
|
|
animation: blobMove2 22s ease-in-out infinite;
|
|
}
|
|
.animate-blob3 {
|
|
animation: blobMove3 20s ease-in-out infinite;
|
|
}
|
|
.animate-blob4 {
|
|
animation: blobMove4 26s ease-in-out infinite;
|
|
}
|
|
.animate-blob5 {
|
|
animation: blobMove5 24s ease-in-out infinite;
|
|
}
|
|
|
|
/* existing keyframes … */
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|