Alternative Login Picker

frontend/src/Pages/LoginPage/LoginPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router';
-import { Page } from '~/Components';
+import { Breadcrumb, Page } from '~/Components';
 import { SamfForm } from '~/Forms/SamfForm';
 import { SamfFormField } from '~/Forms/SamfFormField';
 import { getUser, login } from '~/api';
@@ -57,6 +57,9 @@ export function LoginPage() {
     <Page>
       <div className={styles.login_container}>
         <div className={styles.content_container}>
+          <div style={{ paddingBottom: '1rem' }}>
+            <Breadcrumb />
+          </div>
           <SamfForm onSubmit={handleLogin} isDisabled={submitting} submitText={t(KEY.common_login) ?? ''}>
             <h1 className={styles.header_text}>{t(KEY.loginpage_internal_login)}</h1>
             <SamfFormField<string, FormProps>

frontend/src/Pages/LoginPickerPage/LoginPickerPage.module.scss

@@ -1,81 +1,158 @@
+@use 'sass:color';
+
 @use 'src/constants' as *;
 
 @use 'src/mixins' as *;
 
 .container {
-  min-height: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+.formWrapper {
+  max-width: 640px;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  padding: 2rem 1rem;
 }
 
-.header {
-  text-align: center;
-  margin-bottom: 2rem;
+.caption {
+  display: block;
+  font-size: 1.25rem;
+  color: $grey-1;
+  margin-bottom: 5px;
+  font-weight: 400;
+
+  @include theme-dark {
+    color: $grey-3;
+  }
 }
 
 .headerTitle {
-  font-size: 2rem;
-  margin: 0 0 .25rem 0;
-}
+  color: $black-1;
+  font-size: 3rem;
+  font-weight: 700;
+  margin-top: 0;
+  margin-bottom: 30px;
+  line-height: 1.1;
 
-.headerSubtitle {
-  font-size: 1.25rem;
-  opacity: 0.9;
-  margin: 0;
+  @include theme-dark {
+    color: $white;
+  }
 }
 
 .picker {
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 3rem;
-  flex-wrap: wrap;
+  flex-direction: column;
+  margin-bottom: 30px;
 }
 
 .choiceWrapper {
+  position: relative;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  width: 280px;
-  text-align: center;
-  min-height: 200px;
   justify-content: space-between;
+  width: 100%;
+  padding: 22px 30px;
+  border: 2px solid $grey-35;
+  background-color: $white;
+  cursor: pointer;
+  margin-bottom: 15px;
+  text-align: left;
+  font-family: inherit;
+
+  @include theme-dark {
+    background-color: $theme_dark_input_bg;
+    border-color: $grey-1;
+  }
+
+  &:hover {
+    border-color: $red_samf_hover;
+    background-color: $grey-5;
+
+    @include theme-dark {
+      background-color: $black-2;
+      border-color: $red_samf_faded;
+    }
+  }
 }
 
-.description {
-  margin-bottom: 1rem;
-  line-height: 1.4;
-  min-height: 3.5rem;
+.textWrapper {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
 }
 
-.choice {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  font-weight: 700;
+.radioLabel {
+  display: block;
+  color: $black-1;
   font-size: 1.5rem;
-  padding: 1rem;
-  border-radius: 6px;
-  background: $red-samf;
-  color: $white;
-  box-shadow: 0 1px 2px rgba(0,0,0,.08);
-  min-height: 100px;
-  transition: transform .05s ease, filter .15s ease, box-shadow .15s ease;
-
-  &:hover { filter: brightness(0.96); }
-  &:active { transform: translateY(1px); }
-  &:focus-visible {
-    outline: 3px solid rgba(0,0,0,.4);
-    outline-offset: 3px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-bottom: 4px;
+
+  @include theme-dark {
+    color: $white;
   }
 }
 
-.choiceTitle {
+.description {
+  color: $grey-1;
+  font-size: 1.1rem;
+  font-weight: 300;
   margin: 0;
+  line-height: 1.5;
+
+  @include theme-dark {
+    color: $grey-3;
+  }
+}
+
+.arrowIcon {
+  font-size: 2.5rem;
+  color: $black-1;
+  margin-left: 20px;
+  flex-shrink: 0;
+
+  @include theme-dark {
+    color: $white;
+  }
+}
+
+.backLink {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  margin-top: 15px;
+  margin-bottom: 25px;
+  color: $black-1;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+
+  @include theme-dark {
+    color: $theme_dark_color;
+  }
+
+  &:hover {
+    color: $grey-1;
+    text-decoration-thickness: 2px;
+
+    @include theme-dark {
+      color: $white;
+    }
+  }
+
+  &:focus-visible {
+    outline: 3px solid $orange-light;
+    outline-offset: 2px;
+  }
+}
+
+.backIcon {
+  margin-right: 4px;
+  font-size: 1.2rem;
+  text-decoration: none;
 }

frontend/src/Pages/LoginPickerPage/LoginPickerPage.tsx

@@ -1,12 +1,11 @@
+import { Icon } from '@iconify/react';
 import type { FC } from 'react';
-import { Link } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { Page } from '~/Components';
 import { SAMF3_LOGIN_URL } from '~/routes/samf-three';
 import styles from './LoginPickerPage.module.scss';
 
-type Props = {
-  newRoute: string;
-};
+type Props = { newRoute: string };
 
 /**
  * A page that allows users to choose between the old and new samf login.
@@ -15,29 +14,43 @@ type Props = {
  * @constructor
  */
 export const LoginPickerPage: FC<Props> = ({ newRoute }) => {
+  const navigate = useNavigate();
+
+  const handleChoice = (choice: 'new' | 'old') => {
+    if (choice === 'new') navigate(newRoute);
+    else if (choice === 'old') window.location.href = SAMF3_LOGIN_URL.login;
+  };
+
   return (
     <Page>
       <div className={styles.container}>
-        <div className={styles.header}>
-          <h1 className={styles.headerTitle}>Logg inn som intern</h1>
-          <p className={styles.headerSubtitle}>Velg hvilket system du vil logge inn på</p>
-        </div>
+        <button type="button" className={styles.backLink} onClick={() => navigate(-1)}>
+          <Icon icon="mdi:chevron-left" className={styles.backIcon} />
+          Tilbake
+        </button>
 
-        <nav aria-label="Velg innlogging" className={styles.picker}>
-          <div className={styles.choiceWrapper}>
-            <p className={styles.description}>For å administrere grupper, og andre administrative oppgaver</p>
-            <a href={SAMF3_LOGIN_URL.login} className={styles.choice} role="button" aria-label="Gamle samf (samf3)">
-              <h3 className={styles.choiceTitle}>Gamle samf (samf3)</h3>
-            </a>
-          </div>
+        <div className={styles.formWrapper}>
+          <span className={styles.caption}>Innlogging for interne</span>
+          <h1 className={styles.headerTitle}>Hvordan vil du logge inn?</h1>
+
+          <div className={styles.picker}>
+            <button type="button" className={styles.choiceWrapper} onClick={() => handleChoice('new')}>
+              <div className={styles.textWrapper}>
+                <span className={styles.radioLabel}>Logg inn på ny plattform (samf4)</span>
+                <p className={styles.description}>Den nye plattformen for arrangementer og generell bruk</p>
+              </div>
+              <Icon icon="mdi:arrow-right" className={styles.arrowIcon} />
+            </button>
 
-          <div className={styles.choiceWrapper}>
-            <p className={styles.description}>Den nye plattformen for arrangementer og generell bruk</p>
-            <Link to={newRoute} className={styles.choice} role="button" aria-label="Ny samf (samf4)">
-              <h3 className={styles.choiceTitle}>Ny samf (samf4)</h3>
-            </Link>
+            <button type="button" className={styles.choiceWrapper} onClick={() => handleChoice('old')}>
+              <div className={styles.textWrapper}>
+                <span className={styles.radioLabel}>Logg inn på eldre plattform (samf3)</span>
+                <p className={styles.description}>Gruppeadministrasjon og andre administrative oppgaver</p>
+              </div>
+              <Icon icon="mdi:arrow-right" className={styles.arrowIcon} />
+            </button>
           </div>
-        </nav>
+        </div>
       </div>
     </Page>
   );

frontend/src/router/router.tsx

@@ -123,7 +123,15 @@ export const router = createBrowserRouter(
           <Route element={<ProtectedRoute authState={false} element={<Outlet />} />}>
             <Route path={ROUTES.frontend.login} element={<LoginPickerPage newRoute="/new-login" />} />
             <Route path={SAMF3_LOGIN_URL.login} element={<LoginPage />} />
-            <Route path={ROUTES.frontend.new_login} element={<LoginPage />} />
+            <Route handle={{ crumb: () => <Link url={ROUTES.frontend.login}>{t(KEY.common_login)}</Link> }}>
+              <Route
+                path={ROUTES.frontend.new_login}
+                element={<LoginPage />}
+                handle={{
+                  crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.loginpage_internal_login)}</Link>,
+                }}
+              />
+            </Route>
             <Route path={ROUTES.frontend.signup} element={<SignUpPage />} />
           </Route>
           <Route path={ROUTES.frontend.api_testing} element={<ApiTestingPage />} />