feat(auth): "forgot password" functionality

next-tavla/src/Admin/scenarios/Login/components/Email.tsx

@@ -1,4 +1,4 @@
-import { PrimaryButton } from '@entur/button'
+import { PrimaryButton, SecondaryButton } from '@entur/button'
 import { TextField } from '@entur/form'
 import { Heading3 } from '@entur/typography'
 import musk from 'assets/illustrations/Musk.png'
@@ -8,8 +8,9 @@ import { SyntheticEvent } from 'react'
 import { useAuth } from '../hooks/useAuth'
 import { useFirebaseAuthError } from '../hooks/useFirebaseAuthError'
 import { UserError } from './UserError'
+import { TLoginPage } from 'Admin/types/login'
 
-function Email() {
+function Email({ pushPage }: { pushPage: (page: TLoginPage) => void }) {
     const { error, setError, getTextFieldPropsForType } = useFirebaseAuthError()
     const { login } = useAuth()
 
@@ -37,7 +38,7 @@ function Email() {
         <div>
             <Image src={musk} alt="illustration" className="h-50 w-50" />
             <Heading3>Logg inn med e-post</Heading3>
-            <form className="flexColumn" onSubmit={submitEmailLogin}>
+            <form className="flexColumn pb-2" onSubmit={submitEmailLogin}>
                 <TextField
                     name="email"
                     label="E-post"
@@ -55,6 +56,12 @@ function Email() {
 
                 <PrimaryButton type="submit">Logg inn</PrimaryButton>
             </form>
+            <SecondaryButton
+                className="w-100"
+                onClick={() => pushPage('reset')}
+            >
+                Glemt passord?
+            </SecondaryButton>
         </div>
     )
 }

next-tavla/src/Admin/scenarios/Login/components/ResetPassword.tsx

@@ -0,0 +1,59 @@
+import Image from 'next/image'
+import musk from 'assets/illustrations/Musk.png'
+import { Heading3, Paragraph } from '@entur/typography'
+import { useFirebaseAuthError } from '../hooks/useFirebaseAuthError'
+import { getAuth, sendPasswordResetEmail } from 'firebase/auth'
+import { TextField } from '@entur/form'
+import { UserError } from './UserError'
+import { PrimaryButton } from '@entur/button'
+import { SyntheticEvent } from 'react'
+import { FirebaseError } from 'firebase/app'
+
+function ResetPassword({ popPage }: { popPage: () => void }) {
+    const { error, setError, getTextFieldPropsForType } = useFirebaseAuthError()
+    const auth = getAuth()
+
+    const submitResetPassword = async (event: SyntheticEvent) => {
+        event.preventDefault()
+
+        const data = event.currentTarget as unknown as {
+            email: HTMLInputElement
+        }
+
+        const email = data.email.value
+
+        try {
+            await sendPasswordResetEmail(auth, email)
+            popPage()
+        } catch (error: unknown) {
+            if (error instanceof FirebaseError) {
+                setError(error)
+            }
+        }
+    }
+
+    return (
+        <div>
+            <Image src={musk} alt="illustration" className="h-50 w-50" />
+            <Heading3>Glemt passord</Heading3>
+            <Paragraph>
+                Skriv inn e-postadressen som du registrerte profilen din på, så
+                sender vi deg en lenke der du kan lage et nytt passord.
+            </Paragraph>
+            <form className="flexColumn pb-2" onSubmit={submitResetPassword}>
+                <TextField
+                    name="email"
+                    label="E-post"
+                    type="email"
+                    {...getTextFieldPropsForType('email')}
+                />
+
+                <UserError error={error} />
+
+                <PrimaryButton type="submit">Send nytt passord</PrimaryButton>
+            </form>
+        </div>
+    )
+}
+
+export { ResetPassword }

next-tavla/src/Admin/scenarios/Login/index.tsx

@@ -6,6 +6,7 @@ import { DecodedIdToken } from 'firebase-admin/lib/auth/token-verifier'
 import { useState } from 'react'
 import { CreateUser } from './components/CreateUser'
 import { Email } from './components/Email'
+import { ResetPassword } from './components/ResetPassword'
 import { Start } from './components/Start'
 import { useAuth } from './hooks/useAuth'
 import classes from './styles.module.css'
@@ -63,7 +64,11 @@ function Login({ user }: { user: DecodedIdToken | null }) {
                         </SecondarySquareButton>
                     )}
                 </div>
-                <LoginPage pages={pages} pushPage={pushPage} />
+                <LoginPage
+                    pages={pages}
+                    pushPage={pushPage}
+                    popPage={popPage}
+                />
             </Modal>
         </>
     )
@@ -72,19 +77,23 @@ function Login({ user }: { user: DecodedIdToken | null }) {
 function LoginPage({
     pages,
     pushPage,
+    popPage,
 }: {
     pages: TLoginPage[]
     pushPage: (page: TLoginPage) => void
+    popPage: () => void
 }) {
     if (!pages) return <Start pushPage={pushPage} />
 
     const lastPage = pages.slice(-1)[0]
 
     switch (lastPage) {
         case 'email':
-            return <Email />
+            return <Email pushPage={pushPage} />
         case 'create':
             return <CreateUser />
+        case 'reset':
+            return <ResetPassword popPage={popPage} />
         default:
             return <Start pushPage={pushPage} />
     }

next-tavla/src/Admin/types/login.ts

@@ -1,4 +1,4 @@
-export type TLoginPage = 'start' | 'email' | 'create'
+export type TLoginPage = 'start' | 'email' | 'create' | 'reset'
 
 export type TErrorType = 'email' | 'password' | 'repeat_password' | 'user'