🎨 refactor: Auth Components UI Consistency (#7651)

* 🔧 refactor: Improve Error Handling and UI Consistency in Auth Components

* 🔧 refactor: Email Templates

* 🔧 refactor: Enhance LoginForm with loading state and spinner

* 🔧 refactor: Replace button elements with Button component and enhance UI consistency across Auth forms
This commit is contained in:
Marco Beretta 2025-06-02 13:49:10 +02:00 committed by GitHub
parent 80bc49db8d
commit 37c94beeac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 284 additions and 140 deletions

View file

@ -5,6 +5,7 @@ import type { TLoginUser, TStartupConfig } from 'librechat-data-provider';
import type { TAuthContext } from '~/common';
import { useResendVerificationEmail, useGetStartupConfig } from '~/data-provider';
import { ThemeContext, useLocalize } from '~/hooks';
import { Spinner, Button } from '~/components';
type TLoginFormProps = {
onSubmit: (data: TLoginUser) => void;
@ -20,7 +21,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
register,
getValues,
handleSubmit,
formState: { errors },
formState: { errors, isSubmitting },
} = useForm<TLoginUser>();
const [showResendLink, setShowResendLink] = useState<boolean>(false);
const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
@ -165,15 +166,16 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
)}
<div className="mt-6">
<button
<Button
aria-label={localize('com_auth_continue')}
data-testid="login-button"
type="submit"
disabled={requireCaptcha && !turnstileToken}
className="w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50 disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
disabled={(requireCaptcha && !turnstileToken) || isSubmitting}
variant="submit"
className="h-12 w-full rounded-2xl"
>
{localize('com_auth_continue')}
</button>
{isSubmitting ? <Spinner /> : localize('com_auth_continue')}
</Button>
</div>
</form>
</>