From 143ec0def2be4f14da7cb877a589a1771a1be3c7 Mon Sep 17 00:00:00 2001
From: Berry-13 <81851188+Berry-13@users.noreply.github.com>
Date: Thu, 22 Feb 2024 17:05:39 +0100
Subject: [PATCH 01/11] Remove minLength validation and update login link style

---
 client/src/components/Auth/LoginForm.tsx    | 1 -
 client/src/components/Auth/Registration.tsx | 8 ++------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
index 92cac25bc2e..6e05dfa122b 100644
--- a/client/src/components/Auth/LoginForm.tsx
+++ b/client/src/components/Auth/LoginForm.tsx
@@ -40,7 +40,6 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
             aria-label={localize('com_auth_email')}
             {...register('email', {
               required: localize('com_auth_email_required'),
-              minLength: { value: 3, message: localize('com_auth_email_min_length') },
               maxLength: { value: 120, message: localize('com_auth_email_max_length') },
               pattern: { value: /\S+@\S+\.\S+/, message: localize('com_auth_email_pattern') },
             })}
diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
index 759b8593e0d..67a62506f34 100644
--- a/client/src/components/Auth/Registration.tsx
+++ b/client/src/components/Auth/Registration.tsx
@@ -191,7 +191,7 @@ const Registration: React.FC = () => {
           {renderInput('email', 'com_auth_email', 'email', {
             required: localize('com_auth_email_required'),
             minLength: {
-              value: 3,
+              value: 1,
               message: localize('com_auth_email_min_length'),
             },
             maxLength: {
@@ -230,11 +230,7 @@ const Registration: React.FC = () => {
         </form>
         <p className="my-4 text-center text-sm font-light text-gray-700">
           {localize('com_auth_already_have_account')}{' '}
-          <a
-            href="/login"
-            aria-label="Login"
-            className="p-1 font-medium text-green-500 hover:underline"
-          >
+          <a href="/login" aria-label="Login" className="p-1 font-medium text-green-500">
             {localize('com_auth_login')}
           </a>
         </p>

From fb224df24dcdea27244fa9cca29967c031cd3763 Mon Sep 17 00:00:00 2001
From: Berry-13 <81851188+Berry-13@users.noreply.github.com>
Date: Thu, 22 Feb 2024 18:46:43 +0100
Subject: [PATCH 02/11] Add theme selector component and update login form
 styles

---
 client/src/components/Auth/Login.tsx     | 45 ++++++++++++++++++++----
 client/src/components/Auth/LoginForm.tsx | 10 +++---
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Auth/Login.tsx b/client/src/components/Auth/Login.tsx
index d38673a6b93..37cb5ba4707 100644
--- a/client/src/components/Auth/Login.tsx
+++ b/client/src/components/Auth/Login.tsx
@@ -1,18 +1,48 @@
-import { useEffect } from 'react';
+import { useEffect, useCallback, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import { GoogleIcon, FacebookIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { getLoginError } from '~/utils';
-import { useLocalize } from '~/hooks';
+import { useLocalize, ThemeContext } from '~/hooks';
 import LoginForm from './LoginForm';
 import SocialButton from './SocialButton';
+import { Sun, Moon } from 'lucide-react';
+
+const ThemeSelector = ({
+  theme,
+  onChange,
+}: {
+  theme: string;
+  onChange: (value: string) => void;
+}) => {
+  const themeIcons = {
+    system: <Sun />,
+    dark: <Moon color="white" />,
+    light: <Sun />,
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="cursor-pointer" onClick={() => onChange(theme === 'dark' ? 'light' : 'dark')}>
+        {themeIcons[theme]}
+      </div>
+    </div>
+  );
+};
 
 function Login() {
   const { login, error, isAuthenticated } = useAuthContext();
   const { data: startupConfig } = useGetStartupConfig();
   const localize = useLocalize();
   const navigate = useNavigate();
+  const { theme, setTheme } = useContext(ThemeContext);
+  const changeTheme = useCallback(
+    (value: string) => {
+      setTheme(value);
+    },
+    [setTheme],
+  );
 
   useEffect(() => {
     if (isAuthenticated) {
@@ -91,9 +121,10 @@ function Login() {
   };
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
-      <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
-        <h1 className="mb-4 text-center text-3xl font-semibold">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+      <ThemeSelector theme={theme} onChange={changeTheme} />
+      <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
+        <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
           {localize('com_auth_welcome_back')}
         </h1>
         {error && (
@@ -106,7 +137,7 @@ function Login() {
         )}
         {startupConfig.emailLoginEnabled && <LoginForm onSubmit={login} />}
         {startupConfig.registrationEnabled && (
-          <p className="my-4 text-center text-sm font-light text-gray-700">
+          <p className="my-4 text-center text-sm font-light text-gray-700 dark:text-gray-100">
             {' '}
             {localize('com_auth_no_account')}{' '}
             <a href="/register" className="p-1 font-medium text-green-500">
@@ -119,7 +150,7 @@ function Login() {
             {startupConfig.emailLoginEnabled && (
               <>
                 <div className="relative mt-6 flex w-full items-center justify-center border border-t uppercase">
-                  <div className="absolute bg-white px-3 text-xs">Or</div>
+                  <div className="absolute bg-white px-3 text-xs dark:bg-gray-900">Or</div>
                 </div>
                 <div className="mt-8" />
               </>
diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
index 6e05dfa122b..38bf51dfb24 100644
--- a/client/src/components/Auth/LoginForm.tsx
+++ b/client/src/components/Auth/LoginForm.tsx
@@ -44,12 +44,12 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
               pattern: { value: /\S+@\S+\.\S+/, message: localize('com_auth_email_pattern') },
             })}
             aria-invalid={!!errors.email}
-            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-green-500"
             placeholder=" "
           />
           <label
             htmlFor="email"
-            className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+            className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500 dark:text-gray-200"
           >
             {localize('com_auth_email_address')}
           </label>
@@ -69,12 +69,12 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
               maxLength: { value: 128, message: localize('com_auth_password_max_length') },
             })}
             aria-invalid={!!errors.password}
-            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-green-500"
             placeholder=" "
           />
           <label
             htmlFor="password"
-            className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+            className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500 dark:text-gray-200"
           >
             {localize('com_auth_password')}
           </label>
@@ -89,7 +89,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
           aria-label="Sign in"
           data-testid="login-button"
           type="submit"
-          className="w-full transform rounded-md bg-green-500 px-4 py-3 tracking-wide text-white transition-all duration-300 hover:bg-green-550 focus:bg-green-550 focus:outline-none"
+          className="w-full transform rounded-md bg-green-500 px-4 py-3 tracking-wide text-white transition-all duration-300 hover:bg-green-550 focus:bg-green-550 focus:outline-none dark:text-gray-100"
         >
           {localize('com_auth_continue')}
         </button>

From a4f9af25c5fd64189adc0bf93d07bbd379425ac3 Mon Sep 17 00:00:00 2001
From: Berry-13 <81851188+Berry-13@users.noreply.github.com>
Date: Thu, 22 Feb 2024 20:53:00 +0100
Subject: [PATCH 03/11] Update styling in Login and LoginForm components

---
 client/src/components/Auth/Login.tsx          |  6 ++--
 client/src/components/Auth/LoginForm.tsx      |  6 ++--
 client/src/components/Auth/Registration.tsx   | 18 +++++-----
 .../components/Auth/RequestPasswordReset.tsx  | 14 ++++----
 client/src/components/Auth/SocialButton.tsx   | 34 +++++--------------
 5 files changed, 33 insertions(+), 45 deletions(-)

diff --git a/client/src/components/Auth/Login.tsx b/client/src/components/Auth/Login.tsx
index 37cb5ba4707..8c368ddc80c 100644
--- a/client/src/components/Auth/Login.tsx
+++ b/client/src/components/Auth/Login.tsx
@@ -137,7 +137,7 @@ function Login() {
         )}
         {startupConfig.emailLoginEnabled && <LoginForm onSubmit={login} />}
         {startupConfig.registrationEnabled && (
-          <p className="my-4 text-center text-sm font-light text-gray-700 dark:text-gray-100">
+          <p className="my-4 text-center text-sm font-light text-gray-700 dark:text-white">
             {' '}
             {localize('com_auth_no_account')}{' '}
             <a href="/register" className="p-1 font-medium text-green-500">
@@ -150,7 +150,9 @@ function Login() {
             {startupConfig.emailLoginEnabled && (
               <>
                 <div className="relative mt-6 flex w-full items-center justify-center border border-t uppercase">
-                  <div className="absolute bg-white px-3 text-xs dark:bg-gray-900">Or</div>
+                  <div className="absolute bg-white px-3 text-xs text-black dark:bg-gray-900 dark:text-white">
+                    Or
+                  </div>
                 </div>
                 <div className="mt-8" />
               </>
diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
index 38bf51dfb24..64e5ea54942 100644
--- a/client/src/components/Auth/LoginForm.tsx
+++ b/client/src/components/Auth/LoginForm.tsx
@@ -44,7 +44,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
               pattern: { value: /\S+@\S+\.\S+/, message: localize('com_auth_email_pattern') },
             })}
             aria-invalid={!!errors.email}
-            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-green-500"
+            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
             placeholder=" "
           />
           <label
@@ -69,7 +69,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
               maxLength: { value: 128, message: localize('com_auth_password_max_length') },
             })}
             aria-invalid={!!errors.password}
-            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-green-500"
+            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
             placeholder=" "
           />
           <label
@@ -89,7 +89,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
           aria-label="Sign in"
           data-testid="login-button"
           type="submit"
-          className="w-full transform rounded-md bg-green-500 px-4 py-3 tracking-wide text-white transition-all duration-300 hover:bg-green-550 focus:bg-green-550 focus:outline-none dark:text-gray-100"
+          className="w-full transform rounded-md bg-green-500 px-4 py-3 tracking-wide text-white transition-all duration-300 hover:bg-green-550 focus:bg-green-550 focus:outline-none dark:text-white"
         >
           {localize('com_auth_continue')}
         </button>
diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
index 67a62506f34..d47c9767475 100644
--- a/client/src/components/Auth/Registration.tsx
+++ b/client/src/components/Auth/Registration.tsx
@@ -63,19 +63,19 @@ const Registration: React.FC = () => {
             validation,
           )}
           aria-invalid={!!errors[id]}
-          className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+          className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
           placeholder=" "
           data-testid={id}
         ></input>
         <label
           htmlFor={id}
-          className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+          className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500 dark:text-gray-200"
         >
           {localize(label)}
         </label>
       </div>
       {errors[id] && (
-        <span role="alert" className="mt-1 text-sm text-black">
+        <span role="alert" className="mt-1 text-sm text-black dark:text-white">
           {String(errors[id]?.message) ?? ''}
         </span>
       )}
@@ -147,9 +147,9 @@ const Registration: React.FC = () => {
   };
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
-      <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
-        <h1 className="mb-4 text-center text-3xl font-semibold">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+      <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
+        <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
           {localize('com_auth_create_account')}
         </h1>
         {error && (
@@ -228,7 +228,7 @@ const Registration: React.FC = () => {
             </button>
           </div>
         </form>
-        <p className="my-4 text-center text-sm font-light text-gray-700">
+        <p className="my-4 text-center text-sm font-light text-gray-700 dark:text-white">
           {localize('com_auth_already_have_account')}{' '}
           <a href="/login" aria-label="Login" className="p-1 font-medium text-green-500">
             {localize('com_auth_login')}
@@ -239,7 +239,9 @@ const Registration: React.FC = () => {
             {startupConfig.emailLoginEnabled && (
               <>
                 <div className="relative mt-6 flex w-full items-center justify-center border border-t uppercase">
-                  <div className="absolute bg-white px-3 text-xs">Or</div>
+                  <div className="absolute bg-white px-3 text-xs text-black dark:bg-gray-900 dark:text-white">
+                    Or
+                  </div>
                 </div>
                 <div className="mt-8" />
               </>
diff --git a/client/src/components/Auth/RequestPasswordReset.tsx b/client/src/components/Auth/RequestPasswordReset.tsx
index f3249b70f5d..70a03a5b6ff 100644
--- a/client/src/components/Auth/RequestPasswordReset.tsx
+++ b/client/src/components/Auth/RequestPasswordReset.tsx
@@ -102,18 +102,18 @@ function RequestPasswordReset() {
                   },
                 })}
                 aria-invalid={!!errors.email}
-                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
                 placeholder=" "
               ></input>
               <label
                 htmlFor="email"
-                className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+                className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500 dark:text-gray-200"
               >
                 {localize('com_auth_email_address')}
               </label>
             </div>
             {errors.email && (
-              <span role="alert" className="mt-1 text-sm text-black">
+              <span role="alert" className="mt-1 text-sm text-black dark:text-white">
                 {/* @ts-ignore not sure why */}
                 {errors.email.message}
               </span>
@@ -139,9 +139,11 @@ function RequestPasswordReset() {
   };
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
-      <div className="mt-5 w-authPageWidth overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
-        <h1 className="mb-4 text-center text-3xl font-semibold">{headerText}</h1>
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+      <div className="mt-5 w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
+        <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
+          {headerText}
+        </h1>
         {requestError && (
           <div
             className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
diff --git a/client/src/components/Auth/SocialButton.tsx b/client/src/components/Auth/SocialButton.tsx
index 80b01cec8f8..02f647dfa44 100644
--- a/client/src/components/Auth/SocialButton.tsx
+++ b/client/src/components/Auth/SocialButton.tsx
@@ -3,8 +3,6 @@ import React, { useState } from 'react';
 const SocialButton = ({ id, enabled, serverDomain, oauthPath, Icon, label }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [isPressed, setIsPressed] = useState(false);
-
-  // New state to keep track of the currently pressed button
   const [activeButton, setActiveButton] = useState(null);
 
   if (!enabled) {
@@ -29,40 +27,24 @@ const SocialButton = ({ id, enabled, serverDomain, oauthPath, Icon, label }) =>
   };
 
   const getButtonStyles = () => {
-    const baseStyles = {
-      border: '1px solid #CCCCCC',
-      transition: 'background-color 0.3s ease, border 0.3s ease',
-    };
-
-    if (isPressed && activeButton === id) {
-      return {
-        ...baseStyles,
-        backgroundColor: '#B9DAE9',
-        border: '2px solid #B9DAE9',
-      };
-    }
+    // Define Tailwind CSS classes based on state
+    const baseStyles = 'border border-solid border-gray-300 dark:border-gray-800 transition-colors';
 
-    if (isHovered) {
-      return {
-        ...baseStyles,
-        backgroundColor: '#E5E5E5',
-      };
-    }
+    const pressedStyles = 'bg-blue-200 border-blue-200';
+    const hoverStyles = 'bg-gray-100 dark:bg-gray-700';
 
-    return {
-      ...baseStyles,
-      backgroundColor: 'transparent',
-    };
+    return `${baseStyles} ${
+      isPressed && activeButton === id ? pressedStyles : isHovered ? hoverStyles : ''
+    }`;
   };
 
   return (
     <div className="mt-2 flex gap-x-2">
       <a
         aria-label={`${label}`}
-        className="justify-left flex w-full items-center space-x-3 rounded-md border px-5 py-3 transition-colors"
+        className={`${getButtonStyles()} flex w-full items-center space-x-3 rounded-md px-5 py-3 text-black transition-colors dark:text-white`}
         href={`${serverDomain}/oauth/${oauthPath}`}
         data-testid={id}
-        style={getButtonStyles()}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         onMouseDown={handleMouseDown}

From c22bd93179e69ffebfc1aceca7c517a9d66aca17 Mon Sep 17 00:00:00 2001
From: Berry-13 <81851188+Berry-13@users.noreply.github.com>
Date: Thu, 22 Feb 2024 21:29:36 +0100
Subject: [PATCH 04/11] Update ResetPassword component styles and text color

---
 client/src/components/Auth/ResetPassword.tsx | 25 +++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Auth/ResetPassword.tsx b/client/src/components/Auth/ResetPassword.tsx
index f400cca6943..468c6ae0a96 100644
--- a/client/src/components/Auth/ResetPassword.tsx
+++ b/client/src/components/Auth/ResetPassword.tsx
@@ -29,9 +29,9 @@ function ResetPassword() {
 
   if (resetPassword.isSuccess) {
     return (
-      <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
-        <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
-          <h1 className="mb-4 text-center text-3xl font-semibold">
+      <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+        <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
+          <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
             {localize('com_auth_reset_password_success')}
           </h1>
           <div
@@ -52,14 +52,14 @@ function ResetPassword() {
     );
   } else {
     return (
-      <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
-        <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
-          <h1 className="mb-4 text-center text-3xl font-semibold">
+      <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+        <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
+          <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
             {localize('com_auth_reset_password')}
           </h1>
           {resetError && (
             <div
-              className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
+              className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700 dark:text-red-600 "
               role="alert"
             >
               {localize('com_auth_error_invalid_reset_token')}{' '}
@@ -108,12 +108,12 @@ function ResetPassword() {
                     },
                   })}
                   aria-invalid={!!errors.password}
-                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
                   placeholder=" "
                 ></input>
                 <label
                   htmlFor="password"
-                  className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+                  className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500 dark:text-gray-200"
                 >
                   {localize('com_auth_password')}
                 </label>
@@ -142,12 +142,12 @@ function ResetPassword() {
                       value === password || localize('com_auth_password_not_match'),
                   })}
                   aria-invalid={!!errors.confirm_password}
-                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
+                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
                   placeholder=" "
                 ></input>
                 <label
                   htmlFor="confirm_password"
-                  className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
+                  className="pointer-events-none absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm text-gray-500 duration-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500 dark:text-gray-200"
                 >
                   {localize('com_auth_password_confirm')}
                 </label>
@@ -180,9 +180,6 @@ function ResetPassword() {
               >
                 {localize('com_auth_continue')}
               </button>
-              <a href="/login" className="text-sm font-medium text-green-500">
-                {localize('com_auth_back_to_login')}
-              </a>
             </div>
           </form>
         </div>

From 09fe4ae67f4d9da2cf789d70508ae0e4ed35d546 Mon Sep 17 00:00:00 2001
From: Berry-13 <81851188+Berry-13@users.noreply.github.com>
Date: Thu, 22 Feb 2024 21:52:05 +0100
Subject: [PATCH 05/11] Refactor login component and add theme selector

---
 client/src/components/Auth/Login.tsx        | 44 +++++----------------
 client/src/components/Auth/SocialButton.tsx |  2 +-
 client/src/components/ui/ThemeSelector.tsx  | 39 ++++++++++++++++++
 client/src/components/ui/index.ts           |  1 +
 4 files changed, 51 insertions(+), 35 deletions(-)
 create mode 100644 client/src/components/ui/ThemeSelector.tsx

diff --git a/client/src/components/Auth/Login.tsx b/client/src/components/Auth/Login.tsx
index 8c368ddc80c..2f8c517b727 100644
--- a/client/src/components/Auth/Login.tsx
+++ b/client/src/components/Auth/Login.tsx
@@ -1,48 +1,19 @@
-import { useEffect, useCallback, useContext } from 'react';
+import { useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import { GoogleIcon, FacebookIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { getLoginError } from '~/utils';
-import { useLocalize, ThemeContext } from '~/hooks';
+import { useLocalize } from '~/hooks';
 import LoginForm from './LoginForm';
 import SocialButton from './SocialButton';
-import { Sun, Moon } from 'lucide-react';
-
-const ThemeSelector = ({
-  theme,
-  onChange,
-}: {
-  theme: string;
-  onChange: (value: string) => void;
-}) => {
-  const themeIcons = {
-    system: <Sun />,
-    dark: <Moon color="white" />,
-    light: <Sun />,
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="cursor-pointer" onClick={() => onChange(theme === 'dark' ? 'light' : 'dark')}>
-        {themeIcons[theme]}
-      </div>
-    </div>
-  );
-};
+import { ThemeSelector } from '~/components/ui';
 
 function Login() {
   const { login, error, isAuthenticated } = useAuthContext();
   const { data: startupConfig } = useGetStartupConfig();
   const localize = useLocalize();
   const navigate = useNavigate();
-  const { theme, setTheme } = useContext(ThemeContext);
-  const changeTheme = useCallback(
-    (value: string) => {
-      setTheme(value);
-    },
-    [setTheme],
-  );
 
   useEffect(() => {
     if (isAuthenticated) {
@@ -122,9 +93,14 @@ function Login() {
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
-      <ThemeSelector theme={theme} onChange={changeTheme} />
+      <div className="absolute bottom-0 left-0 m-4">
+        <ThemeSelector />
+      </div>
       <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
-        <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
+        <h1
+          className="mb-4 text-center text-3xl font-semibold text-black dark:text-white"
+          style={{ userSelect: 'none' }}
+        >
           {localize('com_auth_welcome_back')}
         </h1>
         {error && (
diff --git a/client/src/components/Auth/SocialButton.tsx b/client/src/components/Auth/SocialButton.tsx
index 02f647dfa44..7e76c6f7638 100644
--- a/client/src/components/Auth/SocialButton.tsx
+++ b/client/src/components/Auth/SocialButton.tsx
@@ -30,7 +30,7 @@ const SocialButton = ({ id, enabled, serverDomain, oauthPath, Icon, label }) =>
     // Define Tailwind CSS classes based on state
     const baseStyles = 'border border-solid border-gray-300 dark:border-gray-800 transition-colors';
 
-    const pressedStyles = 'bg-blue-200 border-blue-200';
+    const pressedStyles = 'bg-blue-200 border-blue-200 dark:bg-blue-900 dark:border-blue-600';
     const hoverStyles = 'bg-gray-100 dark:bg-gray-700';
 
     return `${baseStyles} ${
diff --git a/client/src/components/ui/ThemeSelector.tsx b/client/src/components/ui/ThemeSelector.tsx
new file mode 100644
index 00000000000..2aae7047871
--- /dev/null
+++ b/client/src/components/ui/ThemeSelector.tsx
@@ -0,0 +1,39 @@
+import React, { useContext, useCallback } from 'react';
+import { Sun, Moon } from 'lucide-react';
+import { ThemeContext } from '~/hooks';
+
+const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) => void }) => {
+  const themeIcons = {
+    system: <Sun />,
+    dark: <Moon color="white" />,
+    light: <Sun />,
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="cursor-pointer" onClick={() => onChange(theme === 'dark' ? 'light' : 'dark')}>
+        {themeIcons[theme]}
+      </div>
+    </div>
+  );
+};
+
+const ThemeSelector = () => {
+  const { theme, setTheme } = useContext(ThemeContext);
+  const changeTheme = useCallback(
+    (value: string) => {
+      setTheme(value);
+    },
+    [setTheme],
+  );
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+      <div className="absolute bottom-0 left-0 m-4">
+        <Theme theme={theme} onChange={changeTheme} />
+      </div>
+    </div>
+  );
+};
+
+export default ThemeSelector;
diff --git a/client/src/components/ui/index.ts b/client/src/components/ui/index.ts
index 3d4ce6262ec..59c07b91030 100644
--- a/client/src/components/ui/index.ts
+++ b/client/src/components/ui/index.ts
@@ -26,3 +26,4 @@ export { default as SelectDropDown } from './SelectDropDown';
 export { default as MultiSelectPop } from './MultiSelectPop';
 export { default as SelectDropDownPop } from './SelectDropDownPop';
 export { default as MultiSelectDropDown } from './MultiSelectDropDown';
+export { default as ThemeSelector } from './ThemeSelector';

From 28962f14c0c83209a1450c72050c9cf5f81de587 Mon Sep 17 00:00:00 2001
From: Berry-13 <81851188+Berry-13@users.noreply.github.com>
Date: Thu, 22 Feb 2024 22:04:05 +0100
Subject: [PATCH 06/11] Add ThemeSelector component to Registration,
 RequestPasswordReset, and ResetPassword pages

---
 client/src/components/Auth/Registration.tsx         | 9 ++++++++-
 client/src/components/Auth/RequestPasswordReset.tsx | 4 ++++
 client/src/components/Auth/ResetPassword.tsx        | 7 +++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
index d47c9767475..1ca82de3faa 100644
--- a/client/src/components/Auth/Registration.tsx
+++ b/client/src/components/Auth/Registration.tsx
@@ -6,6 +6,7 @@ import type { TRegisterUser } from 'librechat-data-provider';
 import { GoogleIcon, FacebookIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components';
 import { useLocalize } from '~/hooks';
 import SocialButton from './SocialButton';
+import { ThemeSelector } from '~/components/ui';
 
 const Registration: React.FC = () => {
   const navigate = useNavigate();
@@ -148,8 +149,14 @@ const Registration: React.FC = () => {
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+      <div className="absolute bottom-0 left-0 m-4">
+        <ThemeSelector />
+      </div>
       <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
-        <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
+        <h1
+          className="mb-4 text-center text-3xl font-semibold text-black dark:text-white"
+          style={{ userSelect: 'none' }}
+        >
           {localize('com_auth_create_account')}
         </h1>
         {error && (
diff --git a/client/src/components/Auth/RequestPasswordReset.tsx b/client/src/components/Auth/RequestPasswordReset.tsx
index 70a03a5b6ff..a0160cfa677 100644
--- a/client/src/components/Auth/RequestPasswordReset.tsx
+++ b/client/src/components/Auth/RequestPasswordReset.tsx
@@ -6,6 +6,7 @@ import {
 } from 'librechat-data-provider/react-query';
 import type { TRequestPasswordReset, TRequestPasswordResetResponse } from 'librechat-data-provider';
 import { useLocalize } from '~/hooks';
+import { ThemeSelector } from '~/components/ui';
 
 function RequestPasswordReset() {
   const localize = useLocalize();
@@ -140,6 +141,9 @@ function RequestPasswordReset() {
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+      <div className="absolute bottom-0 left-0 m-4">
+        <ThemeSelector />
+      </div>
       <div className="mt-5 w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
         <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
           {headerText}
diff --git a/client/src/components/Auth/ResetPassword.tsx b/client/src/components/Auth/ResetPassword.tsx
index 468c6ae0a96..a3abef216d4 100644
--- a/client/src/components/Auth/ResetPassword.tsx
+++ b/client/src/components/Auth/ResetPassword.tsx
@@ -4,6 +4,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useResetPasswordMutation } from 'librechat-data-provider/react-query';
 import type { TResetPassword } from 'librechat-data-provider';
 import { useLocalize } from '~/hooks';
+import { ThemeSelector } from '~/components/ui';
 
 function ResetPassword() {
   const localize = useLocalize();
@@ -30,6 +31,9 @@ function ResetPassword() {
   if (resetPassword.isSuccess) {
     return (
       <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+        <div className="absolute bottom-0 left-0 m-4">
+          <ThemeSelector />
+        </div>
         <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
           <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
             {localize('com_auth_reset_password_success')}
@@ -53,6 +57,9 @@ function ResetPassword() {
   } else {
     return (
       <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+        <div className="absolute bottom-0 left-0 m-4">
+          <ThemeSelector />
+        </div>
         <div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
           <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
             {localize('com_auth_reset_password')}

From 8df4a5d19d63866e040d9dfd1588911706e6ffcf Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Mon, 26 Feb 2024 14:08:32 -0500
Subject: [PATCH 07/11] chore(Login.tsx): remove unused `useCallback`

---
 client/src/components/Auth/Login.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Auth/Login.tsx b/client/src/components/Auth/Login.tsx
index 2f8c517b727..44c7bb92ae6 100644
--- a/client/src/components/Auth/Login.tsx
+++ b/client/src/components/Auth/Login.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from 'react';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import { GoogleIcon, FacebookIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components';

From 4f9d2f8ae1605b6b404635f648b0f6709ecc4e36 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Mon, 26 Feb 2024 14:09:29 -0500
Subject: [PATCH 08/11] chore(Login.tsx) import order

---
 client/src/components/Auth/Login.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Auth/Login.tsx b/client/src/components/Auth/Login.tsx
index 44c7bb92ae6..67aa7a5d247 100644
--- a/client/src/components/Auth/Login.tsx
+++ b/client/src/components/Auth/Login.tsx
@@ -3,11 +3,11 @@ import { useNavigate } from 'react-router-dom';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import { GoogleIcon, FacebookIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components';
 import { useAuthContext } from '~/hooks/AuthContext';
+import { ThemeSelector } from '~/components/ui';
+import SocialButton from './SocialButton';
 import { getLoginError } from '~/utils';
 import { useLocalize } from '~/hooks';
 import LoginForm from './LoginForm';
-import SocialButton from './SocialButton';
-import { ThemeSelector } from '~/components/ui';
 
 function Login() {
   const { login, error, isAuthenticated } = useAuthContext();

From f7bfee26bbb968bf1011157f1eac59f0e63580d2 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Mon, 26 Feb 2024 14:10:04 -0500
Subject: [PATCH 09/11] Update ResetPassword.tsx import order

---
 client/src/components/Auth/ResetPassword.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Auth/ResetPassword.tsx b/client/src/components/Auth/ResetPassword.tsx
index a3abef216d4..a608f458697 100644
--- a/client/src/components/Auth/ResetPassword.tsx
+++ b/client/src/components/Auth/ResetPassword.tsx
@@ -3,8 +3,8 @@ import { useForm } from 'react-hook-form';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useResetPasswordMutation } from 'librechat-data-provider/react-query';
 import type { TResetPassword } from 'librechat-data-provider';
-import { useLocalize } from '~/hooks';
 import { ThemeSelector } from '~/components/ui';
+import { useLocalize } from '~/hooks';
 
 function ResetPassword() {
   const localize = useLocalize();

From a8b7a0cf0c5f2237e0ddd4422b94483959b91c29 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Mon, 26 Feb 2024 14:10:23 -0500
Subject: [PATCH 10/11] Update RequestPasswordReset.tsx import order

---
 client/src/components/Auth/RequestPasswordReset.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Auth/RequestPasswordReset.tsx b/client/src/components/Auth/RequestPasswordReset.tsx
index a0160cfa677..fad1fce0dcc 100644
--- a/client/src/components/Auth/RequestPasswordReset.tsx
+++ b/client/src/components/Auth/RequestPasswordReset.tsx
@@ -5,8 +5,8 @@ import {
   useRequestPasswordResetMutation,
 } from 'librechat-data-provider/react-query';
 import type { TRequestPasswordReset, TRequestPasswordResetResponse } from 'librechat-data-provider';
-import { useLocalize } from '~/hooks';
 import { ThemeSelector } from '~/components/ui';
+import { useLocalize } from '~/hooks';
 
 function RequestPasswordReset() {
   const localize = useLocalize();

From 8feb1b56553a965debd9c208d16a382ad2311abf Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Mon, 26 Feb 2024 14:10:57 -0500
Subject: [PATCH 11/11] Update Registration.tsx import order

---
 client/src/components/Auth/Registration.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
index 1ca82de3faa..3f3a51f842f 100644
--- a/client/src/components/Auth/Registration.tsx
+++ b/client/src/components/Auth/Registration.tsx
@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
 import { useRegisterUserMutation, useGetStartupConfig } from 'librechat-data-provider/react-query';
 import type { TRegisterUser } from 'librechat-data-provider';
 import { GoogleIcon, FacebookIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components';
-import { useLocalize } from '~/hooks';
-import SocialButton from './SocialButton';
 import { ThemeSelector } from '~/components/ui';
+import SocialButton from './SocialButton';
+import { useLocalize } from '~/hooks';
 
 const Registration: React.FC = () => {
   const navigate = useNavigate();