replace volto style login page with plone style login (#132)

Co-authored-by: Víctor Fernández de Alba <sneridagh@gmail.com>

Author: arybakov05

packages/cmsui/components/Login/LoginHero.tsx

@@ -1,9 +1,9 @@
-import voltoHeroSvg from '../../static/volto-hero.svg';
+import ploneHeroSvg from '../../static/plone-hero.svg';
 
 const LoginHero = () => {
   return (
     <img
-      src={voltoHeroSvg}
+      src={ploneHeroSvg}
       className="h-full w-auto object-cover"
       alt=""
       aria-hidden="true"

packages/cmsui/components/Login/LoginLogo.tsx

@@ -1,13 +1,21 @@
-import ploneWhiteSVG from '../../static/plone.svg';
+import Plone from '../../static/plone.svg?react';
+import { useLoaderData } from 'react-router';
+import type { loader } from '../../routes/auth/login';
 
 const LoginLogo = () => {
+  const { siteTitle, siteLogo } = useLoaderData<typeof loader>();
+
+  if (siteLogo) {
+    return <img src={siteLogo} alt={siteTitle ?? ''} className="h-32" />;
+  }
+
   return (
     <div
       className={`
-        flex h-32 w-32 flex-col items-center justify-center rounded-full bg-quanta-lemon p-2
+        flex h-32 w-32 flex-col items-center justify-center rounded-full bg-quanta-sapphire p-2
       `}
     >
-      <img src={ploneWhiteSVG} alt="" aria-hidden="true" />
+      <Plone className="text-quanta-air" aria-hidden="true" />
     </div>
   );
 };

packages/cmsui/news/24.feature

@@ -0,0 +1,2 @@
+Switched login page from Volto style to Plone style.
+Added option to display site logo in login page. @arybakov05

packages/cmsui/routes/auth/login.tsx

@@ -15,23 +15,29 @@ import {
   ploneContentContext,
   ploneSiteContext,
 } from '@plone/aurora/app/middleware.server';
-import { getAuthFromRequest, setAuthOnResponse } from '@plone/react-router';
+import {
+  redirectIfLoggedInLoader,
+  setAuthOnResponse,
+} from '@plone/react-router';
 import { TextField, Link } from '@plone/components/quanta';
 import CloseSVG from '@plone/components/icons/close.svg?react';
 import SlotRenderer from '@plone/layout/slots/SlotRenderer';
 import { Trans, useTranslation } from 'react-i18next';
 import type { RootLoader } from '@plone/aurora/app/root';
 
-export async function loader({
-  request,
-  context,
-}: LoaderFunctionArgs<RouterContextProvider>) {
-  const token = await getAuthFromRequest(request);
-  if (token) throw redirect('/');
+export async function loader(props: LoaderFunctionArgs<RouterContextProvider>) {
+  const { context } = props;
+
+  await redirectIfLoggedInLoader(props);
 
   const content = context.get(ploneContentContext);
   const site = context.get(ploneSiteContext);
-  return { content, siteTitle: site['plone.site_title'] };
+
+  return {
+    content,
+    siteTitle: site['plone.site_title'],
+    siteLogo: site['plone.site_logo'],
+  };
 }
 
 export const meta: MetaFunction<unknown, { root: RootLoader }> = ({
@@ -127,7 +133,7 @@ export default function Login() {
               id="login-header"
               className="mt-6 text-center text-2xl leading-8 font-bold tracking-wide text-gray-900"
             >
-              {t('cmsui.auth.signInTo', { site: siteTitle || 'Volto' })}
+              {t('cmsui.auth.signInTo', { site: siteTitle || 'Aurora' })}
             </h2>
           </div>
           <div className="mx-auto mt-11 w-full max-w-[360px]">