Improve admin login UX

Author: mauriciabad

src/app/[locale]/(app)/profile/login/_components/profile-login.tsx

@@ -5,12 +5,14 @@ import { ContinueWithEmail } from './continue-with-email'
 import { ContinueWithProvider } from './continue-with-provider'
 import { RegisterBanner } from './register-banner'
 
-export const ProfileLogin: FC = () => {
+export const ProfileLogin: FC<{ registerDisabled?: boolean }> = ({
+  registerDisabled,
+}) => {
   const t = useTranslations('auth')
 
   return (
     <>
-      <RegisterBanner />
+      {!registerDisabled && <RegisterBanner />}
 
       <div className="mx-auto mt-10  max-w-sm">
         <h2 className="mb-2 text-center font-title text-2xl font-semibold uppercase text-stone-800">
@@ -27,12 +29,21 @@ export const ProfileLogin: FC = () => {
         </div>
         <ContinueWithProvider />
 
-        <h2 className="mb-2 mt-10 text-center font-title text-2xl font-semibold uppercase text-stone-800">
-          {t('register')}
-        </h2>
-        <LinkButton href="/register" variant="solid" color="primary" fullWidth>
-          {t('register')}
-        </LinkButton>
+        {!registerDisabled && (
+          <>
+            <h2 className="mb-2 mt-10 text-center font-title text-2xl font-semibold uppercase text-stone-800">
+              {t('register')}
+            </h2>
+            <LinkButton
+              href="/register"
+              variant="solid"
+              color="primary"
+              fullWidth
+            >
+              {t('register')}
+            </LinkButton>
+          </>
+        )}
       </div>
     </>
   )

src/app/[locale]/admin-login/__components/logout-button.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { Button } from '@nextui-org/button'
+import { signOut } from 'next-auth/react'
+import { useTranslations } from 'next-intl'
+import { FC } from 'react'
+
+export const LogoutButton: FC = () => {
+  const t = useTranslations('admin.more-options')
+
+  return (
+    <Button
+      onClick={() => signOut({ callbackUrl: '/admin-login' })}
+      className="mt-6 bg-brand-600 px-8 py-3 uppercase text-white"
+    >
+      {t('logout')}
+    </Button>
+  )
+}

src/app/[locale]/admin-login/page.tsx

@@ -1,10 +1,12 @@
 import { IconBarrierBlockOff } from '@tabler/icons-react'
 import type { Metadata } from 'next'
 import { useTranslations } from 'next-intl'
-import { getTranslator } from 'next-intl/server'
+import { getTranslator, redirect } from 'next-intl/server'
 import type { FC } from 'react'
 import type { LocaleRouteParams } from '~/i18n'
+import { getSession } from '~/server/get-server-thing'
 import { ProfileLogin } from '../(app)/profile/login/_components/profile-login'
+import { LogoutButton } from './__components/logout-button'
 
 export async function generateMetadata({
   params,
@@ -19,7 +21,19 @@ export async function generateMetadata({
   }
 }
 
-const AdminLoginPage: FC<LocaleRouteParams> = () => {
+const AdminLoginPage: FC<LocaleRouteParams> = async () => {
+  const session = await getSession()
+
+  if (session?.user.role === 'admin') {
+    redirect('/admin')
+  }
+
+  return <NestedAdminLoginPage isLoggedInAsNotAdmin={!!session} />
+}
+
+const NestedAdminLoginPage: FC<{ isLoggedInAsNotAdmin: boolean }> = ({
+  isLoggedInAsNotAdmin,
+}) => {
   const t = useTranslations('admin-login')
 
   return (
@@ -36,8 +50,11 @@ const AdminLoginPage: FC<LocaleRouteParams> = () => {
         </h1>
 
         <p className="mt-4 text-xl">{t('subtitle')}</p>
-
-        <ProfileLogin />
+        {isLoggedInAsNotAdmin ? (
+          <LogoutButton />
+        ) : (
+          <ProfileLogin registerDisabled={true} />
+        )}
       </main>
     </>
   )

src/components/links/link-button-custom.tsx

@@ -13,7 +13,7 @@ export const LinkButtonCustom: FC<{
       radius="full"
       variant="solid"
       color="primary"
-      className=" mt-6 bg-brand-600 px-8 py-3 uppercase text-white"
+      className="mt-6 bg-brand-600 px-8 py-3 uppercase text-white"
     >
       {children}
     </LinkButton>

src/middleware.ts

@@ -1,5 +1,3 @@
-import 'server-only'
-
 import { NextRequestWithAuth } from 'next-auth/middleware'
 import { NextFetchEvent } from 'next/server'
 import { authI18nMiddleware } from './server/helpers/auth/auth-i18n-middleware'

src/server/helpers/auth/auth-i18n-middleware.ts

@@ -1,5 +1,3 @@
-import 'server-only'
-
 import { NextResponse, type NextRequest } from 'next/server'
 import { defaultLocale, getLocale } from '~/i18n'
 

src/server/helpers/auth/auth-middleware.ts

@@ -1,5 +1,3 @@
-import 'server-only'
-
 import {
   NextMiddlewareWithAuth,
   NextRequestWithAuth,

src/server/helpers/auth/initialize-user.ts

@@ -1,3 +1,5 @@
+import 'server-only'
+
 import bcrypt from 'bcryptjs'
 import { eq } from 'drizzle-orm'
 import { v4 as uuidv4 } from 'uuid'