fix(login): improve sign-in UI

src/components/Login/LocalLogin.tsx

@@ -2,7 +2,7 @@ import Button from '@app/components/Common/Button';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
 import useSettings from '@app/hooks/useSettings';
 import {
-  ArrowLeftOnRectangleIcon,
+  ArrowRightOnRectangleIcon,
   LifebuoyIcon,
 } from '@heroicons/react/24/outline';
 import axios from 'axios';
@@ -19,7 +19,7 @@ const messages = defineMessages({
   validationpasswordrequired: 'You must provide a password',
   loginerror: 'Something went wrong while trying to sign in.',
   signingin: 'Signing In…',
-  signin: 'Sign In',
+  signin: 'Sign in',
   forgotpassword: 'Forgot Password?',
 });
 
@@ -70,7 +70,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
           <>
             <Form>
               <div>
-                <label htmlFor="email" className="text-label">
+                <label htmlFor="email" className="text-label text-left">
                   {intl.formatMessage(messages.email)}
                 </label>
                 <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
@@ -89,7 +89,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                       <div className="error">{errors.email}</div>
                     )}
                 </div>
-                <label htmlFor="password" className="text-label">
+                <label htmlFor="password" className="text-label text-left">
                   {intl.formatMessage(messages.password)}
                 </label>
                 <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
@@ -118,23 +118,22 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                   </div>
                 )}
               </div>
-              <div className="mt-8 border-t border-gray-700 pt-5">
+              <div className="mt-8">
                 <div className="flex flex-row-reverse justify-between">
-                  <span className="inline-flex rounded-md shadow-sm">
-                    <Button
-                      buttonType="primary"
-                      type="submit"
-                      disabled={isSubmitting || !isValid}
-                      data-testid="local-signin-button"
-                    >
-                      <ArrowLeftOnRectangleIcon />
-                      <span>
-                        {isSubmitting
-                          ? intl.formatMessage(messages.signingin)
-                          : intl.formatMessage(messages.signin)}
-                      </span>
-                    </Button>
-                  </span>
+                  <Button
+                    className="w-full"
+                    buttonType="primary"
+                    type="submit"
+                    disabled={isSubmitting || !isValid}
+                    data-testid="local-signin-button"
+                  >
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(messages.signingin)
+                        : intl.formatMessage(messages.signin)}
+                    </span>
+                    <ArrowRightOnRectangleIcon />
+                  </Button>
                   {passwordResetEnabled && (
                     <span className="inline-flex rounded-md shadow-sm">
                       <Link href="/resetpassword" passHref>

src/components/Login/index.tsx

@@ -1,4 +1,3 @@
-import Accordion from '@app/components/Common/Accordion';
 import ImageFader from '@app/components/Common/ImageFader';
 import PageTitle from '@app/components/Common/PageTitle';
 import LanguagePicker from '@app/components/Layout/LanguagePicker';
@@ -17,8 +16,7 @@ import useSWR from 'swr';
 const messages = defineMessages({
   signin: 'Sign In',
   signinheader: 'Sign in to continue',
-  signinwithplex: 'Use your Plex account',
-  signinwithoverseerr: 'Use your {applicationTitle} account',
+  or: 'or',
 });
 
 const Login = () => {
@@ -115,54 +113,28 @@ const Login = () => {
                 </div>
               </div>
             </Transition>
-            <Accordion single atLeastOne>
-              {({ openIndexes, handleClick, AccordionContent }) => (
+            <div className="w-full bg-gray-800 bg-opacity-70 py-2 text-center text-sm font-bold text-gray-400 transition-colors duration-200 focus:outline-none sm:rounded-t-lg">
+              {settings.currentSettings?.localLogin && (
                 <>
-                  <button
-                    className={`w-full cursor-default bg-gray-800 bg-opacity-70 py-2 text-center text-sm font-bold text-gray-400 transition-colors duration-200 focus:outline-none sm:rounded-t-lg ${
-                      openIndexes.includes(0) && 'text-indigo-500'
-                    } ${
-                      settings.currentSettings.localLogin &&
-                      'hover:cursor-pointer hover:bg-gray-700'
-                    }`}
-                    onClick={() => handleClick(0)}
-                    disabled={!settings.currentSettings.localLogin}
-                  >
-                    {intl.formatMessage(messages.signinwithplex)}
-                  </button>
-                  <AccordionContent isOpen={openIndexes.includes(0)}>
-                    <div className="px-10 py-8">
-                      <PlexLoginButton
-                        isProcessing={isProcessing}
-                        onAuthToken={(authToken) => setAuthToken(authToken)}
-                      />
-                    </div>
-                  </AccordionContent>
-                  {settings.currentSettings.localLogin && (
-                    <div>
-                      <button
-                        className={`w-full cursor-default bg-gray-800 bg-opacity-70 py-2 text-center text-sm font-bold text-gray-400 transition-colors duration-200 hover:cursor-pointer hover:bg-gray-700 focus:outline-none ${
-                          openIndexes.includes(1)
-                            ? 'text-indigo-500'
-                            : 'sm:rounded-b-lg'
-                        }`}
-                        onClick={() => handleClick(1)}
-                      >
-                        {intl.formatMessage(messages.signinwithoverseerr, {
-                          applicationTitle:
-                            settings.currentSettings.applicationTitle,
-                        })}
-                      </button>
-                      <AccordionContent isOpen={openIndexes.includes(1)}>
-                        <div className="px-10 py-8">
-                          <LocalLogin revalidate={revalidate} />
-                        </div>
-                      </AccordionContent>
-                    </div>
-                  )}
+                  <div className="px-10 py-8">
+                    <LocalLogin revalidate={revalidate} />
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="h-px flex-1 bg-gray-700/50" />
+                    <span className="text-xs uppercase text-gray-500">
+                      {intl.formatMessage(messages.or)}
+                    </span>
+                    <span className="h-px flex-1 bg-gray-700/50" />
+                  </div>
                 </>
               )}
-            </Accordion>
+              <div className="px-10 py-8">
+                <PlexLoginButton
+                  isProcessing={isProcessing}
+                  onAuthToken={(authToken) => setAuthToken(authToken)}
+                />
+              </div>
+            </div>
           </>
         </div>
       </div>

src/components/PlexLoginButton/index.tsx

@@ -1,11 +1,11 @@
 import globalMessages from '@app/i18n/globalMessages';
 import PlexOAuth from '@app/utils/plex';
-import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
+import { ArrowRightOnRectangleIcon } from '@heroicons/react/24/outline';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
-  signinwithplex: 'Sign In',
+  signinwithplex: 'Sign in with Plex',
   signingin: 'Signing In…',
 });
 
@@ -49,14 +49,14 @@ const PlexLoginButton = ({
         disabled={loading || isProcessing}
         className="plex-button"
       >
-        <ArrowLeftOnRectangleIcon />
         <span>
           {loading
             ? intl.formatMessage(globalMessages.loading)
             : isProcessing
             ? intl.formatMessage(messages.signingin)
             : intl.formatMessage(messages.signinwithplex)}
         </span>
+        <ArrowRightOnRectangleIcon />
       </button>
     </span>
   );

src/i18n/locale/de.json

@@ -327,7 +327,7 @@
   "components.Login.signingin": "Anmelden …",
   "components.Login.signin": "Anmelden",
   "components.Settings.notificationAgentSettingsDescription": "Konfiguriere und aktiviere Benachrichtigungsagenten.",
-  "components.PlexLoginButton.signinwithplex": "Anmelden",
+  "components.PlexLoginButton.signinwithplex": "Mit Plex anmelden",
   "components.PlexLoginButton.signingin": "Anmeldung läuft …",
   "components.PermissionEdit.autoapproveSeries": "Automatische Genehmigung von Serien",
   "components.PermissionEdit.autoapprove": "Automatische Genehmigung",

src/i18n/locale/en.json

@@ -219,12 +219,11 @@
   "components.Login.email": "Email Address",
   "components.Login.forgotpassword": "Forgot Password?",
   "components.Login.loginerror": "Something went wrong while trying to sign in.",
+  "components.Login.or": "or",
   "components.Login.password": "Password",
-  "components.Login.signin": "Sign In",
+  "components.Login.signin": "Sign in",
   "components.Login.signingin": "Signing In…",
   "components.Login.signinheader": "Sign in to continue",
-  "components.Login.signinwithoverseerr": "Use your {applicationTitle} account",
-  "components.Login.signinwithplex": "Use your Plex account",
   "components.Login.validationemailrequired": "You must provide a valid email address",
   "components.Login.validationpasswordrequired": "You must provide a password",
   "components.ManageSlideOver.alltime": "All Time",
@@ -377,7 +376,7 @@
   "components.PersonDetails.crewmember": "Crew",
   "components.PersonDetails.lifespan": "{birthdate} – {deathdate}",
   "components.PlexLoginButton.signingin": "Signing In…",
-  "components.PlexLoginButton.signinwithplex": "Sign In",
+  "components.PlexLoginButton.signinwithplex": "Sign in with Plex",
   "components.QuotaSelector.days": "{count, plural, one {day} other {days}}",
   "components.QuotaSelector.movieRequests": "{quotaLimit} <quotaUnits>{movies} per {quotaDays} {days}</quotaUnits>",
   "components.QuotaSelector.movies": "{count, plural, one {movie} other {movies}}",

src/i18n/locale/fr.json

@@ -327,7 +327,7 @@
   "components.Login.signinheader": "Connectez-vous pour continuer",
   "components.Login.signingin": "Connexion en cours…",
   "components.Settings.notificationAgentSettingsDescription": "Configurer et activer les agents de notification.",
-  "components.PlexLoginButton.signinwithplex": "Se connecter",
+  "components.PlexLoginButton.signinwithplex": "Se connecter avec Plex",
   "components.PlexLoginButton.signingin": "Connexion en cours…",
   "components.UserList.userssaved": "Les permissions d'utilisateur ont été enregistrées avec succès !",
   "components.UserList.bulkedit": "Modification en masse",

src/i18n/locale/it.json

@@ -410,7 +410,7 @@
   "components.RequestModal.SearchByNameModal.notvdbiddescription": "Non siamo riusciti a trovare una corrispondenza per questa serie. Seleziona la corrispondenza corretta dall'elenco seguente.",
   "components.RequestModal.AdvancedRequester.requestas": "Richiedi come",
   "components.RequestModal.AdvancedRequester.languageprofile": "Profilo lingua",
-  "components.PlexLoginButton.signinwithplex": "Accedi",
+  "components.PlexLoginButton.signinwithplex": "Accedi con Plex",
   "components.PlexLoginButton.signingin": "Accesso in corso…",
   "components.PermissionEdit.viewrequestsDescription": "Concede il permesso di visualizzare le richieste di altri utenti.",
   "components.PermissionEdit.viewrequests": "Visualizza le richieste",

src/i18n/locale/pt_PT.json

@@ -327,7 +327,7 @@
   "components.Login.signingin": "A Iniciar Sessão…",
   "components.Login.signin": "Iniciar Sessão",
   "components.Settings.notificationAgentSettingsDescription": "Configurar e ativar agentes de notificação.",
-  "components.PlexLoginButton.signinwithplex": "Iniciar Sessão",
+  "components.PlexLoginButton.signinwithplex": "Iniciar sessão com Plex",
   "components.PlexLoginButton.signingin": "A Iniciar Sessão…",
   "components.UserList.userssaved": "Permissões de utilizador gravadas com sucesso!",
   "components.UserList.bulkedit": "Edição em Massa",