Arnab-Afk/nextplacement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(student): added parents field in signup

Browse Source
This commit is contained in:
Unchanted
2025-09-02 16:27:21 +05:30
parent 6bcc5ee434
commit 051d68f565
6 changed files with 345 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
apps/student/app/(main)/profile/page.tsx
View File

@@ -529,6 +529,74 @@ export default function ProfilePage() {
<Input id="mothersName" value={student.mothersName || ''} readOnly />
)}
</div>
<div>
<Label htmlFor="mothersEmail">Mother's Email</Label>
{editingSection === 'personal' ? (
<Input
id="mothersEmail"
type="email"
value={editData.mothersEmail || student.mothersEmail || ''}
onChange={(e) => handleInputChange('mothersEmail', e.target.value)}
placeholder="mother@example.com"
/>
) : (
<Input id="mothersEmail" value={student.mothersEmail || ''} readOnly />
)}
</div>
<div>
<Label htmlFor="mothersPhone">Mother's Phone</Label>
{editingSection === 'personal' ? (
<Input
id="mothersPhone"
type="tel"
value={editData.mothersPhone || student.mothersPhone || ''}
onChange={(e) => handleInputChange('mothersPhone', e.target.value)}
placeholder="10-digit number"
/>
) : (
<Input id="mothersPhone" value={student.mothersPhone || ''} readOnly />
)}
</div>
<div>
<Label htmlFor="fathersName">Father's Name</Label>
{editingSection === 'personal' ? (
<Input
id="fathersName"
value={editData.fathersName || student.fathersName || ''}
onChange={(e) => handleInputChange('fathersName', e.target.value)}
/>
) : (
<Input id="fathersName" value={student.fathersName || ''} readOnly />
)}
</div>
<div>
<Label htmlFor="fathersEmail">Father's Email</Label>
{editingSection === 'personal' ? (
<Input
id="fathersEmail"
type="email"
value={editData.fathersEmail || student.fathersEmail || ''}
onChange={(e) => handleInputChange('fathersEmail', e.target.value)}
placeholder="father@example.com"
/>
) : (
<Input id="fathersEmail" value={student.fathersEmail || ''} readOnly />
)}
</div>
<div>
<Label htmlFor="fathersPhone">Father's Phone</Label>
{editingSection === 'personal' ? (
<Input
id="fathersPhone"
type="tel"
value={editData.fathersPhone || student.fathersPhone || ''}
onChange={(e) => handleInputChange('fathersPhone', e.target.value)}
placeholder="10-digit number"
/>
) : (
<Input id="fathersPhone" value={student.fathersPhone || ''} readOnly />
)}
</div>
<div>
<Label htmlFor="personalGmail">Personal Email</Label>
{editingSection === 'personal' ? (

5
apps/student/app/signup/action.ts
View File

@@ -37,6 +37,11 @@ export async function signupAction(data: StudentSignup) {
middleName: student.middleName,
lastName: student.lastName,
mothersName: student.mothersName,
mothersEmail: student.mothersEmail && student.mothersEmail.length ? student.mothersEmail : null,
mothersPhone: student.mothersPhone && student.mothersPhone.length ? student.mothersPhone : null,
fathersName: student.fathersName,
fathersEmail: student.fathersEmail && student.fathersEmail.length ? student.fathersEmail : null,
fathersPhone: student.fathersPhone && student.fathersPhone.length ? student.fathersPhone : null,
gender: student.gender,
dob: student.dob,
personalGmail: student.personalGmail,

180
apps/student/app/signup/page.tsx
View File

@@ -1,5 +1,5 @@
// 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.)
// 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';
@@ -34,6 +34,11 @@ const steps = [
'firstName',
'lastName',
'mothersName',
'mothersEmail',
'mothersPhone',
'fathersName',
'fathersEmail',
'fathersPhone',
'rollNumber',
'phoneNumber',
'address',
@@ -67,6 +72,11 @@ export default function StudentRegistrationForm() {
middleName: '',
lastName: '',
mothersName: '',
mothersEmail: '',
mothersPhone: '',
fathersName: '',
fathersEmail: '',
fathersPhone: '',
rollNumber: '',
phoneNumber: '',
address: '',
@@ -175,6 +185,11 @@ export default function StudentRegistrationForm() {
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',
@@ -219,8 +234,13 @@ export default function StudentRegistrationForm() {
{/* 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>
<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">
@@ -233,7 +253,9 @@ export default function StudentRegistrationForm() {
<span>
Step {currentStep} of {steps.length}
</span>
<span className="font-semibold text-primary/80">{steps[currentStep - 1]?.title}</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>
@@ -242,24 +264,25 @@ export default function StudentRegistrationForm() {
<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()
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) => {
@@ -284,11 +307,19 @@ export default function StudentRegistrationForm() {
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">
<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">
<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>
)}
@@ -300,46 +331,75 @@ export default function StudentRegistrationForm() {
</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;
}
/* ====== 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%; }
}
@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 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>
/* ====== 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>
);
}

99
apps/student/app/signup/schema.ts
View File

@@ -26,32 +26,79 @@ export const resumeSchema = z.object({
link: z.string().url('Must be a valid URL'),
});
export const studentSignupSchema = z.object({
rollNumber: z.string().min(1, 'Roll number is required').max(12),
firstName: z.string().min(1, 'First name is required').max(255),
middleName: z.string().max(255).optional(),
lastName: z.string().min(1, 'Last name is required').max(255),
mothersName: z.string().min(1, "Mother's name is required").max(255),
gender: z.string().min(1, 'Gender is required').max(10),
dob: z.coerce.date().refine((date) => date <= new Date(), {
message: 'Date of birth cannot be in the future',
}),
personalGmail: z.string().email('Must be a valid email'),
phoneNumber: z.string().min(10, 'Phone number must be at least 10 digits').max(10),
address: z.string().min(1, 'Address is required'),
degree: z.string().min(1, 'Degree is required'),
branch: z.string().min(1, 'Branch is required'),
year: z.string().min(1, 'Year is required'),
skills: z.array(z.string()),
linkedin: z.string(),
github: z.string(),
ssc: z.coerce.number().min(0).max(100),
hsc: z.coerce.number().min(0).max(100),
isDiploma: z.boolean(),
sgpi: z.array(sgpiSchema).length(8, 'Must provide grades for all 8 semesters'),
internships: z.array(internshipSchema),
resume: z.array(resumeSchema),
});
export const studentSignupSchema = z
.object({
rollNumber: z.string().min(1, 'Roll number is required').max(12),
firstName: z.string().min(1, 'First name is required').max(255),
middleName: z.string().max(255).optional(),
lastName: z.string().min(1, 'Last name is required').max(255),
// Parent details (all optional individually; validated via refinements below)
mothersName: z.string().max(255).optional(),
mothersEmail: z.string().email('Must be a valid email').optional().or(z.literal('')),
mothersPhone: z
.string()
.min(10, 'Phone must be 10 digits')
.max(10)
.optional()
.or(z.literal('')),
fathersName: z.string().max(255).optional(),
fathersEmail: z.string().email('Must be a valid email').optional().or(z.literal('')),
fathersPhone: z
.string()
.min(10, 'Phone must be 10 digits')
.max(10)
.optional()
.or(z.literal('')),
gender: z.string().min(1, 'Gender is required').max(10),
dob: z.coerce.date().refine((date) => date <= new Date(), {
message: 'Date of birth cannot be in the future',
}),
personalGmail: z.string().email('Must be a valid email'),
phoneNumber: z.string().min(10, 'Phone number must be at least 10 digits').max(10),
address: z.string().min(1, 'Address is required'),
degree: z.string().min(1, 'Degree is required'),
branch: z.string().min(1, 'Branch is required'),
year: z.string().min(1, 'Year is required'),
skills: z.array(z.string()),
linkedin: z.string(),
github: z.string(),
ssc: z.coerce.number().min(0).max(100),
hsc: z.coerce.number().min(0).max(100),
isDiploma: z.boolean(),
sgpi: z.array(sgpiSchema).length(8, 'Must provide grades for all 8 semesters'),
internships: z.array(internshipSchema),
resume: z.array(resumeSchema),
})
// Require at least one parent provided
.refine(
(data) => {
const motherProvided = Boolean((data.mothersName && data.mothersName.trim()) || (data.mothersEmail && data.mothersEmail.trim()) || (data.mothersPhone && data.mothersPhone.trim()));
const fatherProvided = Boolean((data.fathersName && data.fathersName.trim()) || (data.fathersEmail && data.fathersEmail.trim()) || (data.fathersPhone && data.fathersPhone.trim()));
return motherProvided || fatherProvided;
},
{
message: 'Provide details for at least one parent',
path: ['mothersName'],
},
)
// If mother's contact provided, require mother's name
.refine(
(data) => {
const motherContact = Boolean((data.mothersEmail && data.mothersEmail.trim()) || (data.mothersPhone && data.mothersPhone.trim()));
if (!motherContact) return true;
return Boolean(data.mothersName && data.mothersName.trim());
},
{ message: "Mother's name is required when mother's contact is provided", path: ['mothersName'] },
)
// If father's contact provided, require father's name
.refine(
(data) => {
const fatherContact = Boolean((data.fathersEmail && data.fathersEmail.trim()) || (data.fathersPhone && data.fathersPhone.trim()));
if (!fatherContact) return true;
return Boolean(data.fathersName && data.fathersName.trim());
},
{ message: "Father's name is required when father's contact is provided", path: ['fathersName'] },
);
export type StudentSignup = z.infer<typeof studentSignupSchema>;
export type Internship = z.infer<typeof internshipSchema>;

75
apps/student/app/signup/steps/PersonalDetailsStep.tsx
View File

@@ -79,7 +79,7 @@ export default function PersonalDetailsStep({ form }: { form: any }) {
name="mothersName"
render={({ field }) => (
<FormItem>
<FormLabel>Mother's Name *</FormLabel>
<FormLabel>Mother's Name</FormLabel>
<FormControl>
<Input placeholder="Enter your mother's name" {...field} />
</FormControl>
@@ -89,6 +89,79 @@ export default function PersonalDetailsStep({ form }: { form: any }) {
/>
</div>
{/* Parent contacts */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<FormField
control={form.control}
name="mothersEmail"
render={({ field }) => (
<FormItem>
<FormLabel>Mother's Email</FormLabel>
<FormControl>
<Input type="email" placeholder="mother@example.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="mothersPhone"
render={({ field }) => (
<FormItem>
<FormLabel>Mother's Phone</FormLabel>
<FormControl>
<Input type="tel" placeholder="10-digit number" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="hidden md:block" />
</div>
<div className="grid grid-cols-1 md:grid-cols-3 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="fathersEmail"
render={({ field }) => (
<FormItem>
<FormLabel>Father's Email</FormLabel>
<FormControl>
<Input type="email" placeholder="father@example.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="fathersPhone"
render={({ field }) => (
<FormItem>
<FormLabel>Father's Phone</FormLabel>
<FormControl>
<Input type="tel" placeholder="10-digit number" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}

6
packages/db/schema.ts
View File

@@ -24,6 +24,11 @@ export const students = pgTable('students', {
middleName: varchar({ length: 255 }),
lastName: varchar({ length: 255 }),
mothersName: varchar({ length: 255 }),
mothersEmail: text(),
mothersPhone: varchar({ length: 10 }),
fathersName: varchar({ length: 255 }),
fathersEmail: text(),
fathersPhone: varchar({ length: 10 }),
gender: varchar({ length: 10 }),
dob: timestamp(),
personalGmail: text(),
@@ -274,4 +279,3 @@ export const admins = pgTable('admins', {
.$onUpdate(() => new Date())
.notNull(),
});