signup form
This commit is contained in:
Om Lanke
@@ -1,51 +1,34 @@
|
||||
// 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 } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { z } from 'zod';
|
||||
// Only import used UI components
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import { Input } from '@workspace/ui/components/input';
|
||||
import { Textarea } from '@workspace/ui/components/textarea';
|
||||
import { Progress } from '@workspace/ui/components/progress';
|
||||
import { Separator } from '@workspace/ui/components/separator';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
FormDescription,
|
||||
} from '@workspace/ui/components/form';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@workspace/ui/components/select';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
|
||||
import { Form } from '@workspace/ui/components/form';
|
||||
|
||||
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';
|
||||
|
||||
const steps = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Personal Details',
|
||||
fields: [
|
||||
'firstName',
|
||||
'lastName',
|
||||
'fathersName',
|
||||
'mothersName',
|
||||
'email',
|
||||
'rollNumber',
|
||||
'phoneNumber',
|
||||
'address',
|
||||
],
|
||||
},
|
||||
{ id: 2, title: 'Academic Details', fields: ['degree', 'year', 'branch', 'ssc', 'hsc'] },
|
||||
{ id: 3, title: 'Semester Grades', fields: ['sem1', 'sem1KT', 'sem2', 'sem2KT'] },
|
||||
{ id: 1, title: 'Personal Details', fields: ['firstName', 'lastName', 'mothersName', '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() {
|
||||
@@ -56,59 +39,59 @@ export default function StudentRegistrationForm() {
|
||||
resolver: zodResolver(studentSignupSchema),
|
||||
defaultValues: {
|
||||
firstName: '',
|
||||
middleName: '',
|
||||
lastName: '',
|
||||
fathersName: '',
|
||||
mothersName: '',
|
||||
email: '',
|
||||
rollNumber: '',
|
||||
phoneNumber: '',
|
||||
address: '',
|
||||
gender: '',
|
||||
dob: new Date(),
|
||||
personalGmail: '',
|
||||
degree: '',
|
||||
year: '',
|
||||
branch: '',
|
||||
ssc: '',
|
||||
hsc: '',
|
||||
sem1: '',
|
||||
sem1KT: '',
|
||||
sem2: '',
|
||||
sem2KT: '',
|
||||
year: '',
|
||||
skills: [],
|
||||
linkedin: '',
|
||||
github: '',
|
||||
skills: '',
|
||||
ssc: 0,
|
||||
hsc: 0,
|
||||
isDiploma: false,
|
||||
sgpi: Array.from({ length: 8 }, (_, i) => ({ sem: i + 1, sgpi: 0, kt: false, ktDead: false })),
|
||||
internships: [],
|
||||
resume: [],
|
||||
},
|
||||
});
|
||||
|
||||
const validateCurrentStep = async () => {
|
||||
const currentStepData = steps.find((step) => step.id === currentStep);
|
||||
if (!currentStepData) return false;
|
||||
// console.log(form.formState.errors)
|
||||
|
||||
const result = await form.trigger(currentStepData.fields as any);
|
||||
return result;
|
||||
const validateCurrentStep = async () => {
|
||||
const current = steps.find((s) => s.id === currentStep);
|
||||
if (!current) return false;
|
||||
// Cast fields to the correct type for react-hook-form
|
||||
return await form.trigger(current.fields as Parameters<typeof form.trigger>[0]);
|
||||
};
|
||||
|
||||
const nextStep = async () => {
|
||||
const isValid = await validateCurrentStep();
|
||||
if (isValid && currentStep < steps.length) {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}
|
||||
if (isValid && currentStep < steps.length) setCurrentStep((prev) => prev + 1);
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (currentStep > 1) {
|
||||
setCurrentStep(currentStep - 1);
|
||||
}
|
||||
if (currentStep > 1) setCurrentStep((prev) => prev - 1);
|
||||
};
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
const onSubmit = async (data: StudentSignup) => {
|
||||
// Only submit if on the last step
|
||||
if (currentStep !== steps.length) return;
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
await new Promise((res) => setTimeout(res, 2000));
|
||||
console.log('Form submitted:', data);
|
||||
alert('Form submitted successfully!');
|
||||
} catch (error) {
|
||||
console.error('Submission error:', error);
|
||||
alert('Submission failed. Please try again.');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Submission failed. Try again.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
@@ -124,6 +107,10 @@ export default function StudentRegistrationForm() {
|
||||
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;
|
||||
}
|
||||
@@ -133,7 +120,7 @@ export default function StudentRegistrationForm() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-8">
|
||||
<div className="max-w-3xl mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl font-bold text-center">
|
||||
@@ -141,9 +128,7 @@ export default function StudentRegistrationForm() {
|
||||
</CardTitle>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm text-muted-foreground">
|
||||
<span>
|
||||
Step {currentStep} of {steps.length}
|
||||
</span>
|
||||
<span>Step {currentStep} of {steps.length}</span>
|
||||
<span>{steps[currentStep - 1]?.title}</span>
|
||||
</div>
|
||||
<Progress value={progress} className="w-full" />
|
||||
@@ -151,21 +136,30 @@ export default function StudentRegistrationForm() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-6"
|
||||
onKeyDown={e => {
|
||||
if (
|
||||
e.key === 'Enter' &&
|
||||
e.target instanceof HTMLElement &&
|
||||
e.target.tagName !== 'TEXTAREA'
|
||||
) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{renderStep()}
|
||||
|
||||
<div className="flex justify-between pt-6">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={prevStep}
|
||||
disabled={currentStep === 1}
|
||||
>
|
||||
<Button type="button" variant="outline" onClick={prevStep} disabled={currentStep === 1}>
|
||||
Previous
|
||||
</Button>
|
||||
|
||||
{currentStep === steps.length ? (
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={isSubmitting}
|
||||
onClick={() => form.handleSubmit(onSubmit)()}
|
||||
>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit'}
|
||||
</Button>
|
||||
) : (
|
||||
@@ -182,415 +176,3 @@ export default function StudentRegistrationForm() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PersonalDetailsStep({ form }: { form: any }) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Personal Details</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="firstName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>First Name *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter your first name" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lastName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Last Name *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter your last name" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="fathersName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Father's Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter your father's name" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="mothersName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Mother's Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter your mother's name" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email" placeholder="Enter your email" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rollNumber"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Roll Number *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter your roll number" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phoneNumber"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Phone Number *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="tel" placeholder="Enter your phone number" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Without country code</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="address"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Address *</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea placeholder="Enter your address" className="resize-none" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AcademicDetailsStep({ form }: { form: any }) {
|
||||
const degreeOptions = [
|
||||
{ value: 'btech', label: 'B.Tech' },
|
||||
{ value: 'be', label: 'B.E.' },
|
||||
{ value: 'bsc', label: 'B.Sc' },
|
||||
{ value: 'bca', label: 'BCA' },
|
||||
];
|
||||
|
||||
const yearOptions = [
|
||||
{ value: '2024', label: '2024' },
|
||||
{ value: '2025', label: '2025' },
|
||||
{ value: '2026', label: '2026' },
|
||||
{ value: '2027', label: '2027' },
|
||||
];
|
||||
|
||||
const branchOptions = [
|
||||
{ value: 'cse', label: 'Computer Science' },
|
||||
{ value: 'it', label: 'Information Technology' },
|
||||
{ value: 'ece', label: 'Electronics & Communication' },
|
||||
{ value: 'mechanical', label: 'Mechanical' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Academic Details</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="degree"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Degree *</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select your degree" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{degreeOptions.map(({ label, value }) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="year"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Year *</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Year of graduation" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{yearOptions.map(({ label, value }) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="branch"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Branch *</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select your branch" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{branchOptions.map(({ label, value }) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ssc"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>SSC Percentage *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" placeholder="Enter your SSC percentage" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="hsc"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>HSC Percentage *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" placeholder="Enter your HSC percentage" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SemesterGradesStep({ form }: { form: any }) {
|
||||
const ktOptions = [
|
||||
{ value: '0', label: '0 KT' },
|
||||
{ value: '1', label: '1 KT' },
|
||||
{ value: '2', label: '2 KT' },
|
||||
{ value: '3+', label: '3+ KT' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Semester Grades</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="sem1"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Semester 1 Grade *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" step="0.01" placeholder="9.86" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="sem1KT"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Semester 1 KT *</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select KT status" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{ktOptions.map(({ label, value }) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="sem2"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Semester 2 Grade *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" step="0.01" placeholder="9.86" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="sem2KT"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Semester 2 KT *</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select KT status" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{ktOptions.map(({ label, value }) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AdditionalDetailsStep({ form }: { form: any }) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Additional Details</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="linkedin"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>LinkedIn Profile *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="url" placeholder="https://linkedin.com/in/yourprofile" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="github"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>GitHub Profile *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="url" placeholder="https://github.com/yourusername" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="skills"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Skills</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Enter your skills (e.g., JavaScript, React, Node.js, Python)"
|
||||
className="resize-none"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Use commas to separate skills</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user