fix(register): replace check-your-email success state with inline message #2

Merged
cartsnitch-engineer[bot] merged 2 commits from fix/register-account-created-message into dev 2026-05-04 19:07:57 +00:00
2 changed files with 13 additions and 50 deletions
+12 -3
View File
@@ -4,7 +4,7 @@ import { mockAuthRoutes } from '../fixtures';
const uniqueEmail = () => `betty+e2e-${Date.now()}@cartsnitch.test`;
test.describe('J1: Registration and Login', () => {
test('can register a new account and see check your email screen', async ({ page }) => {
test('shows success message after registration', async ({ page }) => {
await mockAuthRoutes(page, false);
await page.goto('/register');
await page.fill('[placeholder="Full Name"]', 'Betty Tester');
@@ -12,7 +12,7 @@ test.describe('J1: Registration and Login', () => {
await page.fill('[placeholder="Password (min. 8 characters)"]', 'TestPass123!');
await page.click('button[type="submit"]');
await expect(page.getByRole('heading', { name: /check your email/i })).toBeVisible();
await expect(page.locator('.bg-red-50')).toContainText('Account created! Please sign in.');
});
test('shows validation error when registration fields are empty', async ({ page }) => {
@@ -31,9 +31,18 @@ test.describe('J1: Registration and Login', () => {
});
test('can sign in with credentials and land on dashboard', async ({ page }) => {
await mockAuthRoutes(page, false);
const email = uniqueEmail();
await page.goto('/register');
await page.fill('[placeholder="Full Name"]', 'Betty Tester');
await page.fill('[placeholder="Email"]', email);
await page.fill('[placeholder="Password (min. 8 characters)"]', 'TestPass123!');
await page.click('button[type="submit"]');
await expect(page.locator('.bg-red-50')).toContainText('Account created! Please sign in.');
await mockAuthRoutes(page, true);
await page.goto('/login');
await page.fill('[placeholder="Email"]', 'test@cartsnitch.test');
await page.fill('[placeholder="Email"]', email);
await page.fill('[placeholder="Password"]', 'TestPass123!');
await page.click('button[type="submit"]');
+1 -47
View File
@@ -8,9 +8,6 @@ export function Register() {
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const [registrationComplete, setRegistrationComplete] = useState(false)
const [resendLoading, setResendLoading] = useState(false)
const [resendMessage, setResendMessage] = useState('')
async function handleSubmit(e: React.FormEvent) {
e.preventDefault()
@@ -38,7 +35,7 @@ export function Register() {
throw new Error(authError.message ?? 'Registration failed')
}
setRegistrationComplete(true)
setError('Account created! Please sign in.')
} catch {
setError('Registration failed. Please try again.')
} finally {
@@ -46,49 +43,6 @@ export function Register() {
}
}
async function handleResendVerification() {
setResendLoading(true)
setResendMessage('')
try {
const { error } = await authClient.sendVerificationEmail({ email })
if (error) {
setResendMessage('Failed to resend. Please try again.')
} else {
setResendMessage('Verification email sent!')
}
} finally {
setResendLoading(false)
}
}
if (registrationComplete) {
return (
<div className="flex min-h-screen flex-col items-center justify-center px-4">
<h1 className="mb-2 text-3xl font-bold text-gray-900">Check your email</h1>
<p className="mb-8 text-sm text-gray-500">
We sent a verification link to {email}. Click it to activate your account.
</p>
<button
type="button"
onClick={handleResendVerification}
disabled={resendLoading}
className="min-h-12 rounded-xl bg-brand-blue px-6 py-3 text-base font-medium text-white active:bg-brand-blue/90 disabled:opacity-60"
>
{resendLoading ? 'Sending...' : 'Resend email'}
</button>
{resendMessage && (
<p className="mt-4 text-sm text-gray-500">{resendMessage}</p>
)}
<p className="mt-6 text-sm text-gray-500">
Already have an account?{' '}
<Link to="/login" className="text-brand-blue">
Sign in
</Link>
</p>
</div>
)
}
return (
<div className="flex min-h-screen flex-col items-center justify-center px-4">
<h1 className="mb-2 text-3xl font-bold text-gray-900">Create Account</h1>