Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 2x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 12x 14x 14x 14x 2x 2x 2x 14x 14x | import { useState, useEffect, useTransition } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { SigninForm } from './components/signin-form';
import { SignupForm } from './components/signup-form';
import { useSignin, useSignup } from './hooks/use-auth';
import { useAuthFormState } from './hooks/use-auth-form';
import type { SigninFormData, SignupFormData } from './schemas/auth.schema';
import { Text } from '@/components/text';
import logoImage from '@/assets/images/logo/logo.webp';
import { DASHBOARD_ROUTES } from '@/constants/route';
import { AUTH_FORM_TYPES } from '@/constants/auth';
export const AuthPage = () => {
const [currentForm, setCurrentForm] = useState<string>(
AUTH_FORM_TYPES.SIGNIN
);
const isSignin = currentForm === AUTH_FORM_TYPES.SIGNIN;
const navigate = useNavigate();
const location = useLocation();
// React 19: Use transition for smooth form switching and navigation
const [, startTransition] = useTransition();
// Use simplified auth form state hook
const {
error,
clearError,
isSigningIn,
isSigningUp,
rememberMe,
setRememberMe,
} = useAuthFormState();
const signinMutation = useSignin();
const signupMutation = useSignup();
// Get redirect path from location state
const from = location.state?.from?.pathname || DASHBOARD_ROUTES.OVERVIEW;
// Clear errors when switching between forms
useEffect(() => {
clearError();
}, [isSignin, clearError]);
const handleSignin = async (data: SigninFormData) => {
try {
await signinMutation.mutateAsync(data);
// React 19: Use transition for navigation to avoid blocking UI
startTransition(() => {
navigate(from, { replace: true });
});
} catch (error) {
// Error handling is done in the mutation hook
console.error('Signin failed:', error);
}
};
const handleSignup = async (data: SignupFormData) => {
try {
await signupMutation.mutateAsync(data);
// React 19: Use transition for navigation to avoid blocking UI
startTransition(() => {
navigate(from, { replace: true });
});
} catch (error) {
// Error handling is done in the mutation hook
console.error('Signup failed:', error);
}
};
const toggleForm = () => {
// React 19: Use transition for smooth form switching
startTransition(() => {
setCurrentForm(
isSignin ? AUTH_FORM_TYPES.SIGNUP : AUTH_FORM_TYPES.SIGNIN
);
clearError();
});
};
const handleRememberMeChange = (checked: boolean) => {
setRememberMe(checked);
};
return (
<div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-gray-50">
<div className="sm:mx-auto sm:w-full sm:max-w-md">
{/* Logo */}
<div className="flex justify-center mb-8">
<img
src={logoImage}
className="h-[42px] w-[208px]"
alt="CoinBase Logo"
/>
</div>
{/* Authentication Forms */}
{isSignin ? (
<SigninForm
onSubmit={handleSignin}
onToggleToSignup={toggleForm}
isLoading={isSigningIn}
error={error}
rememberMe={rememberMe}
onRememberMeChange={handleRememberMeChange}
/>
) : (
<SignupForm
onSubmit={handleSignup}
onToggleToSignin={toggleForm}
isLoading={isSigningUp}
error={error}
/>
)}
{/* Footer */}
<div className="mt-8 text-center">
<Text size="xs" variant="muted" className="max-w-sm mx-auto">
By continuing, you agree to Coinbase's Terms of Service and
acknowledge that you have read our Privacy Policy.
</Text>
</div>
</div>
</div>
);
};
export default AuthPage;
|