From 9b5eb302463b837c30b8d12b63aff48c90b664e6 Mon Sep 17 00:00:00 2001 From: Natasha Tikhonova Date: Wed, 23 Aug 2023 15:37:18 +0200 Subject: [PATCH 1/3] feat(auth): add reset password button --- .../src/Admin/scenarios/Login/components/Email.tsx | 13 ++++++++++--- next-tavla/src/Admin/types/login.ts | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/next-tavla/src/Admin/scenarios/Login/components/Email.tsx b/next-tavla/src/Admin/scenarios/Login/components/Email.tsx index 4bd476129..9886b35fd 100644 --- a/next-tavla/src/Admin/scenarios/Login/components/Email.tsx +++ b/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() {
illustration Logg inn med e-post -
+ Logg inn + pushPage('reset')} + > + Glemt passord? +
) } diff --git a/next-tavla/src/Admin/types/login.ts b/next-tavla/src/Admin/types/login.ts index 34c3ff122..26c78e561 100644 --- a/next-tavla/src/Admin/types/login.ts +++ b/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' From 0d2baf75b131a0ca0a45e131d9544fa517b9c46c Mon Sep 17 00:00:00 2001 From: Natasha Tikhonova Date: Wed, 23 Aug 2023 15:38:59 +0200 Subject: [PATCH 2/3] feat(auth): create reset password form/component --- .../Login/components/ResetPassword.tsx | 37 +++++++++++++++++++ .../src/Admin/scenarios/Login/index.tsx | 13 ++++++- 2 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 next-tavla/src/Admin/scenarios/Login/components/ResetPassword.tsx diff --git a/next-tavla/src/Admin/scenarios/Login/components/ResetPassword.tsx b/next-tavla/src/Admin/scenarios/Login/components/ResetPassword.tsx new file mode 100644 index 000000000..f6828439b --- /dev/null +++ b/next-tavla/src/Admin/scenarios/Login/components/ResetPassword.tsx @@ -0,0 +1,37 @@ +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 }) { + return ( +
+ illustration + Glemt passord + + Skriv inn e-postadressen som du registrerte profilen din på, så + sender vi deg en lenke der du kan lage et nytt passord. + +
+ + + + + Send nytt passord + +
+ ) +} + +export { ResetPassword } diff --git a/next-tavla/src/Admin/scenarios/Login/index.tsx b/next-tavla/src/Admin/scenarios/Login/index.tsx index 39582c3c8..f8e29034d 100644 --- a/next-tavla/src/Admin/scenarios/Login/index.tsx +++ b/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 }) { )} - + ) @@ -72,9 +77,11 @@ function Login({ user }: { user: DecodedIdToken | null }) { function LoginPage({ pages, pushPage, + popPage, }: { pages: TLoginPage[] pushPage: (page: TLoginPage) => void + popPage: () => void }) { if (!pages) return @@ -82,9 +89,11 @@ function LoginPage({ switch (lastPage) { case 'email': - return + return case 'create': return + case 'reset': + return default: return } From 8bd4b2c15d89dee584dbe83c3a863a4a6b1f3ab3 Mon Sep 17 00:00:00 2001 From: Natasha Tikhonova Date: Wed, 23 Aug 2023 15:39:41 +0200 Subject: [PATCH 3/3] feat(auth): send password reset email on submit --- .../Login/components/ResetPassword.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/next-tavla/src/Admin/scenarios/Login/components/ResetPassword.tsx b/next-tavla/src/Admin/scenarios/Login/components/ResetPassword.tsx index f6828439b..9aa578e21 100644 --- a/next-tavla/src/Admin/scenarios/Login/components/ResetPassword.tsx +++ b/next-tavla/src/Admin/scenarios/Login/components/ResetPassword.tsx @@ -10,6 +10,28 @@ 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 (
illustration