From 2bdfd34c02b91bfb7bbf8d47df03a449b272f052 Mon Sep 17 00:00:00 2001 From: Jaimin Date: Fri, 16 Jan 2026 10:30:44 +0530 Subject: [PATCH 1/2] fix(ui): add missing autocomplete attributes to input fields --- Frontend/src/pages/BasicDetails.tsx | 12 ++++++++++-- Frontend/src/pages/ForgotPassword.tsx | 2 ++ Frontend/src/pages/Login.tsx | 4 ++++ Frontend/src/pages/ResetPassword.tsx | 4 ++++ Frontend/src/pages/Signup.tsx | 6 +++--- 5 files changed, 23 insertions(+), 5 deletions(-) diff --git a/Frontend/src/pages/BasicDetails.tsx b/Frontend/src/pages/BasicDetails.tsx index d72e0ef..63e5b55 100644 --- a/Frontend/src/pages/BasicDetails.tsx +++ b/Frontend/src/pages/BasicDetails.tsx @@ -72,6 +72,8 @@ export default function BasicDetails() { @@ -80,6 +82,8 @@ export default function BasicDetails() { @@ -89,7 +93,9 @@ export default function BasicDetails() { @@ -98,7 +104,9 @@ export default function BasicDetails() { @@ -224,11 +232,11 @@ export default function BasicDetails() { Brand Information - +
- +
diff --git a/Frontend/src/pages/ForgotPassword.tsx b/Frontend/src/pages/ForgotPassword.tsx index f2d1a03..c6aa9cb 100644 --- a/Frontend/src/pages/ForgotPassword.tsx +++ b/Frontend/src/pages/ForgotPassword.tsx @@ -124,7 +124,9 @@ export default function ForgotPasswordPage() { setEmail(e.target.value)} required diff --git a/Frontend/src/pages/Login.tsx b/Frontend/src/pages/Login.tsx index 875567a..4d55938 100644 --- a/Frontend/src/pages/Login.tsx +++ b/Frontend/src/pages/Login.tsx @@ -104,7 +104,9 @@ export default function LoginPage() { setEmail(e.target.value)} required @@ -131,7 +133,9 @@ export default function LoginPage() {
setPassword(e.target.value)} required diff --git a/Frontend/src/pages/ResetPassword.tsx b/Frontend/src/pages/ResetPassword.tsx index 2beff71..10b5276 100644 --- a/Frontend/src/pages/ResetPassword.tsx +++ b/Frontend/src/pages/ResetPassword.tsx @@ -167,7 +167,9 @@ export default function ResetPasswordPage() {
setPassword(e.target.value)} required @@ -283,7 +285,9 @@ export default function ResetPasswordPage() {
setConfirmPassword(e.target.value)} required diff --git a/Frontend/src/pages/Signup.tsx b/Frontend/src/pages/Signup.tsx index 0055239..6831d4f 100644 --- a/Frontend/src/pages/Signup.tsx +++ b/Frontend/src/pages/Signup.tsx @@ -164,15 +164,15 @@ export default function SignupPage() {
- +
- +
- +
From 0af1672c96b59817e1af7a647c0367b2b4a80f18 Mon Sep 17 00:00:00 2001 From: Jaimin Date: Fri, 16 Jan 2026 11:00:24 +0530 Subject: [PATCH 2/2] docs: add comprehensive JSDoc comments to form components - Add component-level documentation explaining features and purpose - Document all form submission handlers with parameter and return types - Include accessibility notes about autocomplete attributes - Reference WCAG 2.1 compliance in component descriptions - Add inline comments for key functionality This addresses the docstring coverage requirement and improves code maintainability for future contributors. --- Frontend/src/pages/BasicDetails.tsx | 33 +++++++++++++++++++++++ Frontend/src/pages/ForgotPassword.tsx | 27 +++++++++++++++++++ Frontend/src/pages/Login.tsx | 35 ++++++++++++++++++++++++ Frontend/src/pages/ResetPassword.tsx | 27 +++++++++++++++++++ Frontend/src/pages/Signup.tsx | 39 +++++++++++++++++++++++++++ 5 files changed, 161 insertions(+) diff --git a/Frontend/src/pages/BasicDetails.tsx b/Frontend/src/pages/BasicDetails.tsx index 63e5b55..ee9f720 100644 --- a/Frontend/src/pages/BasicDetails.tsx +++ b/Frontend/src/pages/BasicDetails.tsx @@ -33,12 +33,40 @@ import { UserNav } from "../components/user-nav"; import { Link } from "react-router-dom"; import { ModeToggle } from "../components/mode-toggle"; +/** + * BasicDetails Component + * + * Multi-step onboarding form for collecting user profile information. + * Supports both influencer and brand account types with different workflows. + * + * Features: + * - Multi-step form with animated transitions + * - Role-specific fields (influencer vs brand) + * - Social media profile collection + * - Contact information capture + * - Autocomplete attributes for all input fields: + * - given-name/family-name for names + * - email for email addresses + * - tel for phone numbers + * - organization for company names + * - url for website fields + * - WCAG 2.1 compliant form inputs for accessibility + * + * @component + * @returns {JSX.Element} The onboarding details form + */ export default function BasicDetails() { const { user } = useParams(); const [step, setStep] = useState(0); const [animationDirection, setAnimationDirection] = useState(0); const totalSteps = user === "influencer" ? 3 : 2; + + /** + * Advances to the next step in the onboarding flow + * + * @returns {void} + */ const nextStep = () => { if ((user === "influencer" && step < 2) || (user === "brand" && step < 1)) { setAnimationDirection(1); @@ -48,6 +76,11 @@ export default function BasicDetails() { } }; + /** + * Returns to the previous step in the onboarding flow + * + * @returns {void} + */ const prevStep = () => { if (step > 0) { setAnimationDirection(-1); diff --git a/Frontend/src/pages/ForgotPassword.tsx b/Frontend/src/pages/ForgotPassword.tsx index c6aa9cb..37d297e 100644 --- a/Frontend/src/pages/ForgotPassword.tsx +++ b/Frontend/src/pages/ForgotPassword.tsx @@ -3,6 +3,23 @@ import { Link } from "react-router-dom"; import { ArrowLeft, Check, Rocket } from "lucide-react"; import { supabase } from "../utils/supabase"; +/** + * ForgotPasswordPage Component + * + * Handles password reset request initiation by sending reset links + * to registered user emails. Includes validation and user feedback. + * + * Features: + * - Email validation against user database + * - Secure password reset link generation via Supabase + * - Case-sensitive email handling + * - New user detection with signup prompt + * - Autocomplete attribute (autoComplete="email") for browser autofill + * - WCAG 2.1 accessible form inputs + * + * @component + * @returns {JSX.Element} The forgot password page with email form + */ export default function ForgotPasswordPage() { const [email, setEmail] = useState(""); const [isLoading, setIsLoading] = useState(false); @@ -10,6 +27,16 @@ export default function ForgotPasswordPage() { const [error, setError] = useState(""); const [showSignupPrompt, setShowSignupPrompt] = useState(false); + /** + * Handles forgot password form submission + * + * Validates that the email exists in the database, then sends a + * password reset link via Supabase Auth. Provides appropriate + * feedback for both existing and non-existing emails. + * + * @param {React.FormEvent} e - Form submission event + * @returns {Promise} + */ const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); diff --git a/Frontend/src/pages/Login.tsx b/Frontend/src/pages/Login.tsx index 4d55938..22541da 100644 --- a/Frontend/src/pages/Login.tsx +++ b/Frontend/src/pages/Login.tsx @@ -4,6 +4,23 @@ import { Eye, EyeOff, Rocket } from "lucide-react"; import { supabase } from "../utils/supabase"; import { useAuth } from "../context/AuthContext"; +/** + * LoginPage Component + * + * Provides user authentication functionality with email and password. + * Includes accessibility features such as autocomplete attributes for + * enhanced user experience and WCAG 2.1 compliance. + * + * Features: + * - Email/password authentication via Supabase + * - Google OAuth integration + * - Password visibility toggle + * - Form validation and error handling + * - Autocomplete attributes for browser autofill and password managers + * + * @component + * @returns {JSX.Element} The login page with authentication form + */ export default function LoginPage() { const Navigate = useNavigate(); const { login } = useAuth(); @@ -13,6 +30,16 @@ export default function LoginPage() { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(""); + /** + * Handles form submission for user login + * + * Authenticates user credentials via Supabase and manages navigation + * based on user onboarding status and role. Includes comprehensive + * error handling and loading state management. + * + * @param {React.FormEvent} e - Form submission event + * @returns {Promise} + */ const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); @@ -39,6 +66,14 @@ export default function LoginPage() { } }; + /** + * Initiates Google OAuth authentication flow + * + * Redirects user to Google sign-in page and handles the OAuth + * authentication process via Supabase. + * + * @returns {Promise} + */ const handleGoogleLogin = async () => { const { data, error } = await supabase.auth.signInWithOAuth({ provider: "google", diff --git a/Frontend/src/pages/ResetPassword.tsx b/Frontend/src/pages/ResetPassword.tsx index 10b5276..16a93e4 100644 --- a/Frontend/src/pages/ResetPassword.tsx +++ b/Frontend/src/pages/ResetPassword.tsx @@ -4,6 +4,23 @@ import { useNavigate, useParams } from "react-router-dom"; import { Check, Eye, EyeOff, Rocket } from "lucide-react"; import { supabase } from "../utils/supabase"; +/** + * ResetPasswordPage Component + * + * Allows users to reset their password after receiving a reset link. + * Implements security best practices and accessibility features. + * + * Features: + * - Password strength validation + * - Password confirmation matching + * - Visual password strength indicator + * - Auto-redirect after successful reset + * - Autocomplete attributes (autoComplete="new-password") for password managers + * - WCAG 2.1 compliant form inputs + * + * @component + * @returns {JSX.Element} The password reset page with validation + */ export default function ResetPasswordPage() { const router = useNavigate(); const searchParams = useParams(); @@ -41,6 +58,16 @@ export default function ResetPasswordPage() { }; }, [isSuccess, router]); + /** + * Handles password reset form submission + * + * Validates password match and strength, then updates user password + * via Supabase authentication. Shows success message and redirects + * to dashboard on successful reset. + * + * @param {React.FormEvent} e - Form submission event + * @returns {Promise} + */ const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); diff --git a/Frontend/src/pages/Signup.tsx b/Frontend/src/pages/Signup.tsx index 6831d4f..74b99ac 100644 --- a/Frontend/src/pages/Signup.tsx +++ b/Frontend/src/pages/Signup.tsx @@ -6,6 +6,24 @@ import { supabase } from "../utils/supabase"; import { useAuth } from "@/context/AuthContext"; import { demoInsert } from '../utils/demoInsert'; +/** + * SignupPage Component + * + * Handles new user registration with comprehensive form validation. + * Implements accessibility features including autocomplete attributes + * for improved UX and WCAG 2.1 compliance. + * + * Features: + * - Multi-step registration process + * - Account type selection (influencer/brand) + * - Email/password validation + * - Password confirmation matching + * - Demo data insertion for new users + * - Autocomplete attributes for browser autofill (autoComplete="new-password") + * + * @component + * @returns {JSX.Element} The signup page with registration form + */ export default function SignupPage() { const navigate = useNavigate(); const [formData, setFormData] = useState({ @@ -21,16 +39,37 @@ export default function SignupPage() { const [user, setuser] = useState("influencer"); const { login } = useAuth(); + /** + * Handles input field changes and updates form state + * + * @param {React.ChangeEvent} e - Input change event + * @returns {void} + */ const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value })); }; + /** + * Updates the selected account type (influencer or brand) + * + * @param {string} type - Account type to set + * @returns {void} + */ const handleAccountTypeChange = (type: string) => { setuser(type); setFormData((prev) => ({ ...prev, accountType: type })); }; + /** + * Handles form submission for user registration + * + * Validates password confirmation, creates new user account via Supabase, + * inserts demo data, and navigates to appropriate onboarding flow. + * + * @param {React.FormEvent} e - Form submission event + * @returns {Promise} + */ const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (formData.password !== formData.confirmPassword) {