feat(login): reduce steps in login modal (#1812)

* feat(login): reduce steps in login modal * style(login): remove padding
entur · Feb 12, 2025 · 93d3cf9 · 93d3cf9
1 parent 6390755
commit 93d3cf9
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 52 deletions.
diff --git a/tavla/app/(admin)/components/Login/Create.tsx b/tavla/app/(admin)/components/Login/Create.tsx
@@ -2,7 +2,7 @@
 import { useActionState } from 'react'
 import Image from 'next/image'
 import musk from 'assets/illustrations/Musk.png'
-import { Heading3 } from '@entur/typography'
+import { Heading3, Paragraph } from '@entur/typography'
 import { create } from './actions'
 import {
     createUserWithEmailAndPassword,
@@ -89,14 +89,14 @@ function Create() {
                 </div>
                 <FormError {...getFormFeedbackForField('user', state)} />
                 <FormError {...getFormFeedbackForField('general', state)} />
-                <ButtonGroup className="flex flex-row gap-4">
+                <ButtonGroup className="flex flex-row gap-4 pb-4">
                     <div className="w-1/2">
                         <SubmitButton
                             variant="primary"
                             width="fluid"
                             aria-label="Opprett bruker"
                         >
-                            Opprett bruker
+                            Opprett
                         </SubmitButton>
                     </div>
 
@@ -113,6 +113,12 @@ function Create() {
                         </Button>
                     </div>
                 </ButtonGroup>
+                <Paragraph className="text-center" margin="none">
+                    Har du allerede en bruker?{' '}
+                    <Link className="underline" href="?login=email">
+                        Logg inn
+                    </Link>
+                </Paragraph>
             </form>
         </div>
     )

diff --git a/tavla/app/(admin)/components/Login/Email.tsx b/tavla/app/(admin)/components/Login/Email.tsx
@@ -8,7 +8,7 @@ import {
 } from 'firebase/auth'
 import { getClientApp } from 'utils/firebase'
 import { login } from './actions'
-import { Heading3, Link as EnturLink } from '@entur/typography'
+import { Heading3, Paragraph } from '@entur/typography'
 
 import { Button, ButtonGroup } from '@entur/button'
 import Image from 'next/image'
@@ -103,11 +103,14 @@ function Email() {
                 <FormError {...getFormFeedbackForField('user', state)} />
                 <FormError {...getFormFeedbackForField('general', state)} />
                 <p>
-                    <EnturLink href={getPathWithParams('reset')}>
+                    <Link
+                        className="underline"
+                        href={getPathWithParams('reset')}
+                    >
                         Glemt passord?
-                    </EnturLink>
+                    </Link>
                 </p>
-                <ButtonGroup className="flex flex-row gap-4">
+                <ButtonGroup className="flex flex-row gap-4 pb-4">
                     <div className="w-1/2">
                         <SubmitButton
                             variant="primary"
@@ -131,6 +134,15 @@ function Email() {
                         </Button>
                     </div>
                 </ButtonGroup>
+                <Paragraph className="text-center" margin="none">
+                    Har du ikke en bruker?{' '}
+                    <Link
+                        className="underline"
+                        href={getPathWithParams('create')}
+                    >
+                        Opprett bruker
+                    </Link>
+                </Paragraph>
             </form>
         </div>
     )

diff --git a/tavla/app/(admin)/components/Login/Start.tsx b/tavla/app/(admin)/components/Login/Start.tsx
diff --git a/tavla/app/(admin)/components/Login/index.tsx b/tavla/app/(admin)/components/Login/index.tsx
@@ -5,14 +5,12 @@ import { usePathname, useRouter } from 'next/navigation'
 import { IconButton, SecondarySquareButton } from '@entur/button'
 import { BackArrowIcon, LogOutIcon, UserIcon } from '@entur/icons'
 import { logout } from './actions'
-import { Email } from './Email'
-import { Start } from './Start'
 import { Create } from './Create'
 import { usePageParam } from 'app/(admin)/hooks/usePageParam'
 import { Reset } from './Reset'
 import { usePostHog } from 'posthog-js/react'
-
-type TLoginPage = 'start' | 'email' | 'create' | 'reset'
+import { TLoginPage } from './types'
+import { Email } from './Email'
 
 function Login({ loggedIn }: { loggedIn: boolean }) {
     const router = useRouter()
@@ -77,7 +75,7 @@ function Page({ page }: { page: TLoginPage }) {
         case 'reset':
             return <Reset />
         default:
-            return <Start />
+            return <Email />
     }
 }
 

diff --git a/tavla/app/(admin)/components/Login/types.ts b/tavla/app/(admin)/components/Login/types.ts
@@ -1,4 +1,4 @@
-export type TLoginPage = 'start' | 'email' | 'create' | 'reset'
+export type TLoginPage = 'email' | 'create' | 'reset'
 
 export type TErrorType = 'email' | 'password' | 'repeat_password' | 'user'
 

diff --git a/tavla/next-env.d.ts b/tavla/next-env.d.ts
@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.