From 1ab4eb47501f1583a50508c1b986a5cd701d1495 Mon Sep 17 00:00:00 2001 From: Anushlinux Date: Tue, 8 Jul 2025 16:08:09 +0530 Subject: [PATCH] Sign up changes ui --- apps/student/app/(main)/profile/page.tsx | 2 +- apps/student/app/signup/page.tsx | 141 ++++++++++++++++-- .../signup/steps/AdditionalDetailsStep.tsx | 52 ++++--- .../app/signup/steps/InternshipStep.tsx | 85 ++++++----- .../app/signup/steps/SemesterGradesStep.tsx | 124 ++++++++------- 5 files changed, 279 insertions(+), 125 deletions(-) diff --git a/apps/student/app/(main)/profile/page.tsx b/apps/student/app/(main)/profile/page.tsx index 3a6a51a..7e00fb8 100644 --- a/apps/student/app/(main)/profile/page.tsx +++ b/apps/student/app/(main)/profile/page.tsx @@ -257,7 +257,7 @@ export default function ProfilePage() { if (result.success) { setStudent((prev: Record | null) => ({ ...(prev || {}), resumes: editingResumes })); setEditingSection(null); - } else { + } else if ('error' in result) { setError(result.error || 'Failed to update resumes'); } } catch (err) { diff --git a/apps/student/app/signup/page.tsx b/apps/student/app/signup/page.tsx index 7751d66..5c12cb2 100644 --- a/apps/student/app/signup/page.tsx +++ b/apps/student/app/signup/page.tsx @@ -14,6 +14,7 @@ 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'; @@ -57,6 +58,7 @@ export default function StudentRegistrationForm() { const [isSubmitting, setIsSubmitting] = useState(false); const [isPending, startTransition] = useTransition(); const router = useRouter(); + const formRef = useRef(null); const form = useForm({ resolver: zodResolver(studentSignupSchema), @@ -110,6 +112,8 @@ export default function StudentRegistrationForm() { const isValid = await validateCurrentStep(); if (isValid && currentStep < steps.length) { setCurrentStep((prev) => prev + 1); + } else if (!isValid) { + alert('Please fill all required fields before proceeding.'); } }; @@ -165,29 +169,99 @@ export default function StudentRegistrationForm() { const progress = (currentStep / steps.length) * 100; + // Map field keys to user-friendly names + const fieldLabels: Record = { + firstName: 'First Name', + middleName: 'Middle Name', + lastName: 'Last Name', + mothersName: "Mother's Name", + 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 ( -
-
- +
+ {/* Animated floating blobs with more vibrant colors */} +
+
+
+
+
+ + {/* Welcoming heading - now always at the top */} +
+

Welcome to NextPlacement

+

Register below to get started with your placement journey. Fill in your details step by step and let your career take off!

+
+
+ - + Student Registration Form -
+
Step {currentStep} of {steps.length} - {steps[currentStep - 1]?.title} + {steps[currentStep - 1]?.title}
- +
{ + // 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' && @@ -199,21 +273,22 @@ export default function StudentRegistrationForm() { }} > {renderStep()} -
+
{currentStep === steps.length ? ( - ) : ( - )} @@ -223,6 +298,48 @@ export default function StudentRegistrationForm() {
+ {/* Animated gradient and blob styles */} + +
); } diff --git a/apps/student/app/signup/steps/AdditionalDetailsStep.tsx b/apps/student/app/signup/steps/AdditionalDetailsStep.tsx index f0031e2..75afb84 100644 --- a/apps/student/app/signup/steps/AdditionalDetailsStep.tsx +++ b/apps/student/app/signup/steps/AdditionalDetailsStep.tsx @@ -11,21 +11,34 @@ import { } from '@workspace/ui/components/form'; import { Input } from '@workspace/ui/components/input'; import { Textarea } from '@workspace/ui/components/textarea'; +import { useState, useEffect } from 'react'; export default function AdditionalDetailsStep({ form }: { form: any }) { - return ( -
-

Additional Details

+ // For skills field bug fix: keep a local string state + const [skillsInput, setSkillsInput] = useState( + Array.isArray(form.getValues('skills')) ? form.getValues('skills').join(', ') : form.getValues('skills') || '' + ); -
+ // Keep local state in sync if form value changes externally + useEffect(() => { + const formSkills = form.getValues('skills'); + const asString = Array.isArray(formSkills) ? formSkills.join(', ') : formSkills || ''; + setSkillsInput(asString); + }, [form.watch('skills')]); + + return ( +
+

Additional Details

+ +
( - - LinkedIn Profile + + LinkedIn Profile - + Optional @@ -37,10 +50,10 @@ export default function AdditionalDetailsStep({ form }: { form: any }) { control={form.control} name="github" render={({ field }) => ( - - GitHub Profile + + GitHub Profile - + Optional @@ -53,21 +66,18 @@ export default function AdditionalDetailsStep({ form }: { form: any }) { control={form.control} name="skills" render={({ field }) => ( - - Skills + + Skills