From 55b4b566a755ff85dc1950b33a3da629d5c2a1b9 Mon Sep 17 00:00:00 2001
From: maui <hello@mauriciabad.com>
Date: Tue, 23 Jan 2024 21:59:36 +0100
Subject: [PATCH] Update admin-login UI

---
 .../login/_components/profile-login.tsx       | 20 +++++++----
 src/app/[locale]/admin-login/page.tsx         | 34 ++++++++++++-------
 .../admin/_components/more-options.tsx        |  2 +-
 src/messages/ca.json                          |  5 +--
 src/messages/en.json                          |  5 +--
 5 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/src/app/[locale]/(app)/profile/login/_components/profile-login.tsx b/src/app/[locale]/(app)/profile/login/_components/profile-login.tsx
index 05a2da5d..59785353 100644
--- a/src/app/[locale]/(app)/profile/login/_components/profile-login.tsx
+++ b/src/app/[locale]/(app)/profile/login/_components/profile-login.tsx
@@ -1,3 +1,4 @@
+import { Icon } from '@tabler/icons-react'
 import { useTranslations } from 'next-intl'
 import { FC } from 'react'
 import { LinkButton } from '~/components/links/link-button'
@@ -5,21 +6,27 @@ import { ContinueWithEmail } from './continue-with-email'
 import { ContinueWithProvider } from './continue-with-provider'
 import { RegisterBanner } from './register-banner'
 
-export const ProfileLogin: FC<{ registerDisabled?: boolean }> = ({
-  registerDisabled,
-}) => {
+export const ProfileLogin: FC<{
+  registerDisabled?: boolean
+  title?: string
+  icon?: Icon
+}> = ({ registerDisabled, title, icon }) => {
   const t = useTranslations('auth')
 
+  const Icon = icon
+
   return (
     <>
       {!registerDisabled && <RegisterBanner />}
 
-      <div className="mx-auto mt-10  max-w-sm">
+      <div className="mx-auto mt-10 max-w-sm">
+        {Icon && (
+          <Icon className="mx-auto mb-4 text-brand-600" stroke={1} size={72} />
+        )}
         <h2 className="mb-2 text-center font-title text-2xl font-semibold uppercase text-stone-800">
-          {t('login')}
+          {title ? title : t('login')}
         </h2>
         <ContinueWithEmail />
-
         <div className="mb-2 mt-4 flex items-center gap-2">
           <div className="flex-1 border-t border-stone-300" aria-hidden />
           <h3 className=" inline-block font-title text-sm font-medium uppercase text-stone-600">
@@ -28,7 +35,6 @@ export const ProfileLogin: FC<{ registerDisabled?: boolean }> = ({
           <div className="flex-1 border-t border-stone-300" aria-hidden />
         </div>
         <ContinueWithProvider />
-
         {!registerDisabled && (
           <>
             <h2 className="mb-2 mt-10 text-center font-title text-2xl font-semibold uppercase text-stone-800">
diff --git a/src/app/[locale]/admin-login/page.tsx b/src/app/[locale]/admin-login/page.tsx
index d0b5bc83..c5685b81 100644
--- a/src/app/[locale]/admin-login/page.tsx
+++ b/src/app/[locale]/admin-login/page.tsx
@@ -1,4 +1,4 @@
-import { IconBarrierBlockOff } from '@tabler/icons-react'
+import { IconBarrierBlock, IconBolt } from '@tabler/icons-react'
 import type { Metadata } from 'next'
 import { useTranslations } from 'next-intl'
 import { getTranslator, redirect } from 'next-intl/server'
@@ -39,21 +39,29 @@ const NestedAdminLoginPage: FC<{ isLoggedInAsNotAdmin: boolean }> = ({
   return (
     <>
       <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center p-4 text-center text-stone-800">
-        <IconBarrierBlockOff
-          className="mx-auto mb-4 text-brand-600"
-          stroke={1.25}
-          size={96}
-        />
+        {isLoggedInAsNotAdmin ? (
+          <>
+            <IconBarrierBlock
+              className="mx-auto mb-4 text-brand-600"
+              stroke={1.25}
+              size={96}
+            />
 
-        <h1 className="font-title text-4xl font-bold uppercase text-stone-800">
-          {t('heading')}
-        </h1>
+            <h1 className="font-title text-4xl font-bold uppercase text-stone-800">
+              {t('heading')}
+            </h1>
 
-        <p className="mt-4 text-xl">{t('subtitle')}</p>
-        {isLoggedInAsNotAdmin ? (
-          <LogoutButton />
+            <p className="mt-4 text-xl">{t('subtitle')}</p>
+            <LogoutButton />
+          </>
         ) : (
-          <ProfileLogin registerDisabled={true} />
+          <div className="mb-24">
+            <ProfileLogin
+              registerDisabled={true}
+              title={t('login-title')}
+              icon={IconBolt}
+            />
+          </div>
         )}
       </main>
     </>
diff --git a/src/app/[locale]/admin/_components/more-options.tsx b/src/app/[locale]/admin/_components/more-options.tsx
index 198d3239..ddb372c5 100644
--- a/src/app/[locale]/admin/_components/more-options.tsx
+++ b/src/app/[locale]/admin/_components/more-options.tsx
@@ -17,7 +17,7 @@ export const MoreOptions: FC = () => {
   return (
     <MoreOptionsModal title={t('title')}>
       <MoreOptionsModalButton
-        onClick={() => signOut({ callbackUrl: '/' })}
+        onClick={() => signOut({ callbackUrl: '/admin-login' })}
         text={t('logout')}
         icon={<IconLogout />}
       />
diff --git a/src/messages/ca.json b/src/messages/ca.json
index 30bb4929..8dc27836 100644
--- a/src/messages/ca.json
+++ b/src/messages/ca.json
@@ -23,8 +23,9 @@
     }
   },
   "admin-login": {
-    "heading": "Admin",
-    "subtitle": "Has d'iniciar sessió, i tenir permisos d'administrador, per accedir a aquesta pàgina."
+    "heading": "Accés denegat",
+    "subtitle": "No tens permisos per continuar",
+    "login-title": "Iniciar sessió com administrador"
   },
   "signIn": {
     "meta": {
diff --git a/src/messages/en.json b/src/messages/en.json
index facc36f7..f992eb44 100644
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -23,8 +23,9 @@
     }
   },
   "admin-login": {
-    "heading": "Admin",
-    "subtitle": "You need to be logged in, and have admin permissions, to access this page."
+    "heading": "Access denied",
+    "subtitle": "You don't have permission to continue",
+    "login-title": "Admin login"
   },
   "signIn": {
     "meta": {