zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

style(auth): replace inline card styles with Card component and clean up comments in ConfirmEmailPage

Browse Source
This commit is contained in:
Hyko
2026-04-22 20:39:05 -04:00
parent 3e95387879
commit 189dcfc726
6 changed files with 523 additions and 840 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/auth/pages/ConfirmEmailPage.client.js
+59 -88
View File
@@ -1,10 +1,7 @@
'use client';
/**
* Confirm Email Page Component
*/
import { useState, useEffect, useRef } from 'react';
import { Card } from '@zen/core/shared/components';
export default function ConfirmEmailPage({ onSubmit, onNavigate, email, token }) {
const [error, setError] = useState('');
@@ -15,26 +12,20 @@ export default function ConfirmEmailPage({ onSubmit, onNavigate, email, token })
useEffect(() => {
console.log('ConfirmEmailPage useEffect triggered', { email, token, hasVerified });
// Check for persisted success message on mount
const persistedSuccess = sessionStorage.getItem('emailVerificationSuccess');
console.log('Persisted success message:', persistedSuccess);
if (persistedSuccess) {
console.log('Restoring persisted success message');
setSuccess(persistedSuccess);
setIsLoading(false);
setHasVerified(true); // Mark as verified to prevent re-verification
// Clear the persisted message after showing it
setHasVerified(true);
sessionStorage.removeItem('emailVerificationSuccess');
// Redirect after showing the message
setTimeout(() => {
onNavigate('login');
}, 3000);
setTimeout(() => onNavigate('login'), 3000);
return;
}
// Auto-verify on mount, but only once
if (email && token && !hasVerified && !isVerifyingRef.current) {
console.log('Starting email verification');
verifyEmail();
@@ -46,22 +37,18 @@ export default function ConfirmEmailPage({ onSubmit, onNavigate, email, token })
}, [email, token, hasVerified, onNavigate]);
async function verifyEmail() {
// Prevent multiple calls
if (hasVerified || isVerifyingRef.current) {
console.log('Email verification already attempted or in progress');
return;
}
// Set flags IMMEDIATELY to prevent multiple calls
isVerifyingRef.current = true;
setHasVerified(true);
// Clear any existing states at the start
setError('');
setSuccess('');
console.log('Starting email verification for:', email);
const formData = new FormData();
formData.set('email', email);
formData.set('token', token);
@@ -69,20 +56,14 @@ export default function ConfirmEmailPage({ onSubmit, onNavigate, email, token })
try {
const result = await onSubmit(formData);
console.log('Verification result:', result);
if (result.success) {
console.log('Verification successful');
const successMessage = result.message || 'E-mail vérifié avec succès. Vous pouvez maintenant vous connecter.';
// Persist success message in sessionStorage
sessionStorage.setItem('emailVerificationSuccess', successMessage);
setSuccess(successMessage);
setIsLoading(false);
// Redirect to login after 3 seconds
setTimeout(() => {
onNavigate('login');
}, 3000);
setTimeout(() => onNavigate('login'), 3000);
} else {
console.log('Verification failed:', result.error);
setError(result.error || 'Échec de la vérification de l\'e-mail');
@@ -98,65 +79,55 @@ export default function ConfirmEmailPage({ onSubmit, onNavigate, email, token })
console.log('ConfirmEmailPage render', { success, error, isLoading, hasVerified });
return (
<div className="group bg-white/80 dark:bg-[#0B0B0B] backdrop-blur-sm border border-neutral-200/80 dark:border-neutral-800/50 rounded-2xl px-4 py-6 md:px-6 md:py-8 hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50 transition-all duration-300 w-full max-w-md">
{/* Header */}
<div className="text-center mb-6">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
Vérification de l'e-mail
</h1>
<p className="text-sm text-neutral-600 dark:text-neutral-400">
Nous vérifions votre adresse e-mail...
</p>
</div>
{isLoading && (
<div className="flex flex-col items-center py-10">
<div className="w-12 h-12 border-4 border-neutral-300 border-t-neutral-900 rounded-full animate-spin dark:border-neutral-700/50 dark:border-t-white"></div>
<p className="mt-5 text-neutral-600 dark:text-neutral-400 text-sm">Vérification de votre e-mail en cours...</p>
</div>
)}
{/* Success Message - Only show if success and no error */}
{success && !error && (
<div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg dark:bg-green-500/10 dark:border-green-500/20">
<div className="flex items-center space-x-2">
<div className="w-1.5 h-1.5 bg-green-500 rounded-full flex-shrink-0"></div>
<span className="text-xs text-green-700 dark:text-green-400">{success}</span>
</div>
</div>
)}
{/* Error Message - Only show if error and no success */}
{error && !success && (
<div>
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
<div className="flex items-center space-x-2">
<div className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></div>
<span className="text-xs text-red-700 dark:text-red-400">{error}</span>
</div>
</div>
<div className="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-800/50 text-center">
<a
href="#"
onClick={(e) => {
e.preventDefault();
onNavigate('login');
}}
className="text-sm text-neutral-900 hover:text-neutral-600 font-medium transition-colors duration-200 dark:text-white dark:hover:text-neutral-300"
>
← Retour à la connexion
</a>
</div>
</div>
)}
{/* Redirect message - Only show if success and no error */}
{success && !error && (
<p className="text-center text-neutral-600 dark:text-neutral-400 text-sm mt-3">Redirection vers la connexion...</p>
)}
<Card variant="default" padding="md" spacing="none" className="w-full max-w-md">
<div className="text-center mb-6">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
Vérification de l'e-mail
</h1>
<p className="text-sm text-neutral-600 dark:text-neutral-400">
Nous vérifions votre adresse e-mail...
</p>
</div>
{isLoading && (
<div className="flex flex-col items-center py-10">
<div className="w-12 h-12 border-4 border-neutral-300 border-t-neutral-900 rounded-full animate-spin dark:border-neutral-700/50 dark:border-t-white"></div>
<p className="mt-5 text-neutral-600 dark:text-neutral-400 text-sm">Vérification de votre e-mail en cours...</p>
</div>
)}
{success && !error && (
<div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg dark:bg-green-500/10 dark:border-green-500/20">
<div className="flex items-center space-x-2">
<div className="w-1.5 h-1.5 bg-green-500 rounded-full flex-shrink-0"></div>
<span className="text-xs text-green-700 dark:text-green-400">{success}</span>
</div>
</div>
)}
{error && !success && (
<div>
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
<div className="flex items-center space-x-2">
<div className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></div>
<span className="text-xs text-red-700 dark:text-red-400">{error}</span>
</div>
</div>
<div className="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-800/50 text-center">
<a
href="#"
onClick={(e) => { e.preventDefault(); onNavigate('login'); }}
className="text-sm text-neutral-900 hover:text-neutral-600 font-medium transition-colors duration-200 dark:text-white dark:hover:text-neutral-300"
>
← Retour à la connexion
</a>
</div>
</div>
)}
{success && !error && (
<p className="text-center text-neutral-600 dark:text-neutral-400 text-sm mt-3">Redirection vers la connexion...</p>
)}
</Card>
);
}