From 37c94beeacb8724d38c1e78413dcef28ff8179f2 Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Mon, 2 Jun 2025 13:49:10 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20refactor:=20Auth=20Components=20?= =?UTF-8?q?UI=20Consistency=20(#7651)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🔧 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 --- .../utils/emails/passwordReset.handlebars | 76 ++++++++++++++--- .../emails/requestPasswordReset.handlebars | 84 ++++++++++++++++--- .../utils/emails/verifyEmail.handlebars | 81 +++++++++++++++--- client/src/components/Auth/AuthLayout.tsx | 49 ++++++----- client/src/components/Auth/ErrorMessage.tsx | 2 +- client/src/components/Auth/Login.tsx | 4 +- client/src/components/Auth/LoginForm.tsx | 14 ++-- client/src/components/Auth/Registration.tsx | 13 +-- .../components/Auth/RequestPasswordReset.tsx | 38 +++------ client/src/components/Auth/ResetPassword.tsx | 63 +++++--------- 10 files changed, 284 insertions(+), 140 deletions(-) diff --git a/api/server/utils/emails/passwordReset.handlebars b/api/server/utils/emails/passwordReset.handlebars index 9076b92edb..6b735f53fd 100644 --- a/api/server/utils/emails/passwordReset.handlebars +++ b/api/server/utils/emails/passwordReset.handlebars @@ -22,17 +22,71 @@ diff --git a/api/server/utils/emails/requestPasswordReset.handlebars b/api/server/utils/emails/requestPasswordReset.handlebars index 2600b5a9d3..b7005254ba 100644 --- a/api/server/utils/emails/requestPasswordReset.handlebars +++ b/api/server/utils/emails/requestPasswordReset.handlebars @@ -22,18 +22,78 @@ diff --git a/api/server/utils/emails/verifyEmail.handlebars b/api/server/utils/emails/verifyEmail.handlebars index 63b52e79be..fa77575053 100644 --- a/api/server/utils/emails/verifyEmail.handlebars +++ b/api/server/utils/emails/verifyEmail.handlebars @@ -22,18 +22,75 @@ diff --git a/client/src/components/Auth/AuthLayout.tsx b/client/src/components/Auth/AuthLayout.tsx index d90f0d3dfe..02b3802917 100644 --- a/client/src/components/Auth/AuthLayout.tsx +++ b/client/src/components/Auth/AuthLayout.tsx @@ -1,23 +1,12 @@ import { TranslationKeys, useLocalize } from '~/hooks'; -import { BlinkAnimation } from './BlinkAnimation'; import { TStartupConfig } from 'librechat-data-provider'; +import { ErrorMessage } from '~/components/Auth/ErrorMessage'; import SocialLoginRender from './SocialLoginRender'; -import { ThemeSelector } from '~/components/ui'; +import { BlinkAnimation } from './BlinkAnimation'; +import { ThemeSelector } from '~/components'; import { Banner } from '../Banners'; import Footer from './Footer'; -const ErrorRender = ({ children }: { children: React.ReactNode }) => ( -
-
- {children} -
-
-); - function AuthLayout({ children, header, @@ -40,19 +29,29 @@ function AuthLayout({ const hasStartupConfigError = startupConfigError !== null && startupConfigError !== undefined; const DisplayError = () => { if (hasStartupConfigError) { - return {localize('com_auth_error_login_server')}; + return ( +
+ {localize('com_auth_error_login_server')} +
+ ); } else if (error === 'com_auth_error_invalid_reset_token') { return ( - - {localize('com_auth_error_invalid_reset_token')}{' '} - - {localize('com_auth_click_here')} - {' '} - {localize('com_auth_to_try_again')} - +
+ + {localize('com_auth_error_invalid_reset_token')}{' '} + + {localize('com_auth_click_here')} + {' '} + {localize('com_auth_to_try_again')} + +
); } else if (error != null && error) { - return {localize(error)}; + return ( +
+ {localize(error)} +
+ ); } return null; }; @@ -87,8 +86,8 @@ function AuthLayout({ {children} {!pathname.includes('2fa') && (pathname.includes('login') || pathname.includes('register')) && ( - - )} + + )}