Skip to content

changes made #257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
BigElv wants to merge 1 commit into from
Closed

changes made #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 61 additions & 17 deletions frontend/src/app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,12 @@ import {
CardTitle,
} from "@/components/ui/Card";
import { FormError } from "@/components/ui/FormError";
import { ValidationMessage } from "@/components/ui/ValidationMessage";
import { FormValidationSummary } from "@/components/ui/FormValidationSummary";
import { useAuth } from "@/hooks/useAuth";
import { useNotifications } from "@/contexts/NotificationContext";
import { loginSchema, type LoginFormData } from "@/lib/validations/auth";
import { cn } from "@/lib/utils";
import { useFormFieldValidation } from "@/hooks/useFormFieldValidation";

export default function LoginPage() {
const router = useRouter();
Expand All @@ -27,6 +29,22 @@ export default function LoginPage() {
const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof LoginFormData, string>>>({});
const [showValidationSummary, setShowValidationSummary] = useState(false);

// Real-time field validation
const emailValidation = useFormFieldValidation<LoginFormData>({
value: email,
schema: loginSchema,
fieldName: "email",
delay: 400,
});

const passwordValidation = useFormFieldValidation<LoginFormData>({
value: password,
schema: loginSchema,
fieldName: "password",
delay: 400,
});

// Error toast when auth error is set
useEffect(() => {
Expand Down Expand Up @@ -59,6 +77,7 @@ export default function LoginPage() {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setFieldErrors({});
setShowValidationSummary(true);

const result = loginSchema.safeParse({ email, password, rememberMe });
if (!result.success) {
Expand Down Expand Up @@ -90,7 +109,14 @@ export default function LoginPage() {
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
<form onSubmit={handleSubmit} className="space-y-4" noValidate>
{/* Validation Summary */}
<FormValidationSummary
errors={fieldErrors as Record<string, string>}
isValid={Object.keys(fieldErrors).length === 0}
isVisible={showValidationSummary}
/>

<div className="space-y-2">
<label
htmlFor="email"
Expand All @@ -105,13 +131,23 @@ export default function LoginPage() {
value={email}
onChange={(e) => setEmail(e.target.value)}
disabled={loading}
error={!!fieldErrors.email}
error={emailValidation.isValid === false || !!fieldErrors.email}
success={emailValidation.isValid === true}
autoComplete="email"
aria-invalid={!!fieldErrors.email}
aria-invalid={emailValidation.isValid === false || !!fieldErrors.email}
aria-describedby={emailValidation.error ? "email-error" : emailValidation.isValid ? "email-success" : undefined}
/>
<ValidationMessage
id="email-error"
message={fieldErrors.email || emailValidation.error}
state={
fieldErrors.email || emailValidation.isValid === false
? "error"
: emailValidation.isValid === true
? "success"
: "idle"
}
/>
{fieldErrors.email && (
<p className="text-sm text-destructive">{fieldErrors.email}</p>
)}
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
Expand All @@ -134,13 +170,23 @@ export default function LoginPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
disabled={loading}
error={!!fieldErrors.password}
error={passwordValidation.isValid === false || !!fieldErrors.password}
success={passwordValidation.isValid === true}
autoComplete="current-password"
aria-invalid={!!fieldErrors.password}
aria-invalid={passwordValidation.isValid === false || !!fieldErrors.password}
aria-describedby={passwordValidation.error ? "password-error" : passwordValidation.isValid ? "password-success" : undefined}
/>
<ValidationMessage
id="password-error"
message={fieldErrors.password || passwordValidation.error}
state={
fieldErrors.password || passwordValidation.isValid === false
? "error"
: passwordValidation.isValid === true
? "success"
: "idle"
}
/>
{fieldErrors.password && (
<p className="text-sm text-destructive">{fieldErrors.password}</p>
)}
</div>
<div className="flex items-center gap-2">
<input
Expand All @@ -149,11 +195,9 @@ export default function LoginPage() {
checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}
disabled={loading}
className={cn(
"h-4 w-4 rounded border-input bg-background text-primary",
"focus:ring-2 focus:ring-ring focus:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-50"
)}
className={
"h-4 w-4 rounded border-input bg-background text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
}
aria-describedby="rememberMe-description"
/>
<label
Expand Down
128 changes: 106 additions & 22 deletions frontend/src/app/register/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,13 @@ import {
CardTitle,
} from "@/components/ui/Card";
import { FormError } from "@/components/ui/FormError";
import { ValidationMessage } from "@/components/ui/ValidationMessage";
import { FormValidationSummary } from "@/components/ui/FormValidationSummary";
import { PasswordStrengthIndicator } from "@/components/ui/PasswordStrengthIndicator";
import { useAuth } from "@/hooks/useAuth";
import { useNotifications } from "@/contexts/NotificationContext";
import { registerSchema, type RegisterFormData } from "@/lib/validations/auth";
import { useFormFieldValidation } from "@/hooks/useFormFieldValidation";

export default function RegisterPage() {
const router = useRouter();
Expand All @@ -29,6 +33,36 @@ export default function RegisterPage() {
confirmPassword: "",
});
const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof RegisterFormData, string>>>({});
const [showValidationSummary, setShowValidationSummary] = useState(false);

// Real-time field validation
const usernameValidation = useFormFieldValidation<RegisterFormData>({
value: formData.username,
schema: registerSchema,
fieldName: "username",
delay: 400,
});

const emailValidation = useFormFieldValidation<RegisterFormData>({
value: formData.email,
schema: registerSchema,
fieldName: "email",
delay: 400,
});

const passwordValidation = useFormFieldValidation<RegisterFormData>({
value: formData.password,
schema: registerSchema,
fieldName: "password",
delay: 400,
});

const confirmPasswordValidation = useFormFieldValidation<RegisterFormData>({
value: formData.confirmPassword,
schema: registerSchema,
fieldName: "confirmPassword",
delay: 400,
});

useEffect(() => {
if (error) {
Expand Down Expand Up @@ -61,6 +95,7 @@ export default function RegisterPage() {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setFieldErrors({});
setShowValidationSummary(true);

const result = registerSchema.safeParse(formData);
if (!result.success) {
Expand Down Expand Up @@ -93,7 +128,14 @@ export default function RegisterPage() {
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
<form onSubmit={handleSubmit} className="space-y-4" noValidate>
{/* Validation Summary */}
<FormValidationSummary
errors={fieldErrors as Record<string, string>}
isValid={Object.keys(fieldErrors).length === 0}
isVisible={showValidationSummary}
/>

<div className="space-y-2">
<label
htmlFor="username"
Expand All @@ -108,13 +150,23 @@ export default function RegisterPage() {
value={formData.username}
onChange={handleChange}
disabled={loading}
error={!!fieldErrors.username}
error={usernameValidation.isValid === false || !!fieldErrors.username}
success={usernameValidation.isValid === true}
autoComplete="username"
aria-invalid={!!fieldErrors.username}
aria-invalid={usernameValidation.isValid === false || !!fieldErrors.username}
aria-describedby={usernameValidation.error ? "username-error" : usernameValidation.isValid ? "username-success" : undefined}
/>
<ValidationMessage
id="username-error"
message={fieldErrors.username || usernameValidation.error}
state={
fieldErrors.username || usernameValidation.isValid === false
? "error"
: usernameValidation.isValid === true
? "success"
: "idle"
}
/>
{fieldErrors.username && (
<p className="text-sm text-destructive">{fieldErrors.username}</p>
)}
</div>
<div className="space-y-2">
<label
Expand All @@ -130,13 +182,23 @@ export default function RegisterPage() {
value={formData.email}
onChange={handleChange}
disabled={loading}
error={!!fieldErrors.email}
error={emailValidation.isValid === false || !!fieldErrors.email}
success={emailValidation.isValid === true}
autoComplete="email"
aria-invalid={!!fieldErrors.email}
aria-invalid={emailValidation.isValid === false || !!fieldErrors.email}
aria-describedby={emailValidation.error ? "email-error" : emailValidation.isValid ? "email-success" : undefined}
/>
<ValidationMessage
id="email-error"
message={fieldErrors.email || emailValidation.error}
state={
fieldErrors.email || emailValidation.isValid === false
? "error"
: emailValidation.isValid === true
? "success"
: "idle"
}
/>
{fieldErrors.email && (
<p className="text-sm text-destructive">{fieldErrors.email}</p>
)}
</div>
<div className="space-y-2">
<label
Expand All @@ -151,12 +213,26 @@ export default function RegisterPage() {
value={formData.password}
onChange={handleChange}
disabled={loading}
error={!!fieldErrors.password}
error={passwordValidation.isValid === false || !!fieldErrors.password}
success={passwordValidation.isValid === true}
autoComplete="new-password"
aria-invalid={!!fieldErrors.password}
aria-invalid={passwordValidation.isValid === false || !!fieldErrors.password}
aria-describedby={passwordValidation.error ? "password-error" : passwordValidation.isValid ? "password-success" : undefined}
/>
<ValidationMessage
id="password-error"
message={fieldErrors.password || passwordValidation.error}
state={
fieldErrors.password || passwordValidation.isValid === false
? "error"
: passwordValidation.isValid === true
? "success"
: "idle"
}
/>
{fieldErrors.password && (
<p className="text-sm text-destructive">{fieldErrors.password}</p>
{/* Password Strength Indicator */}
{formData.password && (
<PasswordStrengthIndicator password={formData.password} />
)}
</div>
<div className="space-y-2">
Expand All @@ -172,15 +248,23 @@ export default function RegisterPage() {
value={formData.confirmPassword}
onChange={handleChange}
disabled={loading}
error={!!fieldErrors.confirmPassword}
error={confirmPasswordValidation.isValid === false || !!fieldErrors.confirmPassword}
success={confirmPasswordValidation.isValid === true}
autoComplete="new-password"
aria-invalid={!!fieldErrors.confirmPassword}
aria-invalid={confirmPasswordValidation.isValid === false || !!fieldErrors.confirmPassword}
aria-describedby={confirmPasswordValidation.error ? "confirmPassword-error" : confirmPasswordValidation.isValid ? "confirmPassword-success" : undefined}
/>
<ValidationMessage
id="confirmPassword-error"
message={fieldErrors.confirmPassword || confirmPasswordValidation.error}
state={
fieldErrors.confirmPassword || confirmPasswordValidation.isValid === false
? "error"
: confirmPasswordValidation.isValid === true
? "success"
: "idle"
}
/>
{fieldErrors.confirmPassword && (
<p className="text-sm text-destructive">
{fieldErrors.confirmPassword}
</p>
)}
</div>
<FormError message={error ?? ""} />
<Button
Expand Down
58 changes: 58 additions & 0 deletions frontend/src/components/ui/FormValidationSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { AlertTriangle, CheckCircle } from "lucide-react";

interface FormValidationSummaryProps {
errors: Record<string, string>;
isValid: boolean;
isVisible: boolean;
}

export function FormValidationSummary({
errors,
isValid,
isVisible,
}: FormValidationSummaryProps) {
if (!isVisible || Object.keys(errors).length === 0) return null;

const errorList = Object.entries(errors);

return (
<div
className={`rounded-lg border p-4 transition-all duration-300 ${
isValid
? "border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20"
: "border-destructive/20 bg-destructive/5"
}`}
role="alert"
aria-live="polite"
>
<div className="flex items-start gap-3">
{isValid ? (
<CheckCircle className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
) : (
<AlertTriangle className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" aria-hidden="true" />
)}
<div className="flex-1">
<h3
className={`text-sm font-semibold ${
isValid ? "text-green-800 dark:text-green-200" : "text-destructive"
}`}
>
{isValid ? "Form Ready" : "Please fix the following errors"}
</h3>
{!isValid && errorList.length > 0 && (
<ul className="mt-2 space-y-1.5" aria-label="Form validation errors">
{errorList.map(([field, message]) => (
<li key={field} className="text-sm text-destructive flex items-start gap-2">
<span className="mt-1 h-1 w-1 rounded-full bg-destructive flex-shrink-0" />
<span>
<span className="font-medium capitalize">{field}:</span> {message}
</span>
</li>
))}
</ul>
)}
</div>
</div>
</div>
);
}
Loading
Loading