From 455ecf2a372bd264c165280d5cc3e006ac5d8a71 Mon Sep 17 00:00:00 2001 From: Myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sun, 16 Oct 2022 16:50:49 +0200 Subject: [PATCH] adding password form --- package.json | 2 ++ src/App.tsx | 5 ++++ src/AuthContext/AuthContext.ts | 2 +- src/AuthContext/AuthContextProvider.tsx | 4 ++- src/apis/create-alias.ts | 6 ++--- src/apis/update-account.ts | 4 +++ src/components/MultiStepFormElement.tsx | 2 +- .../AliasRoute/CreateRandomAliasButton.tsx | 4 +-- .../AuthenticateRoute/NavigationButton.tsx | 5 ++-- .../GenerateEmailReportsForm.tsx | 17 +++++++++--- .../PasswordForm.tsx | 12 ++++----- .../SignupRoute/EmailForm/EmailForm.tsx | 16 +++++++---- .../SignupRoute/YouGotMail/YouGotMail.tsx | 2 +- src/routes/AuthenticateRoute.tsx | 4 +-- src/routes/AuthenticatedRoute.tsx | 2 +- src/routes/CompleteAccountRoute.tsx | 27 +++++++++++++++++++ src/routes/VerifyEmailRoute.tsx | 3 +-- src/{server-types.d.ts => server-types.ts} | 4 +-- 18 files changed, 89 insertions(+), 32 deletions(-) create mode 100644 src/apis/update-account.ts rename src/route-widgets/{root => CompleteAccountRoute}/GenerateEmailReportsForm.tsx (80%) rename src/route-widgets/{root => CompleteAccountRoute}/PasswordForm.tsx (94%) create mode 100644 src/routes/CompleteAccountRoute.tsx rename src/{server-types.d.ts => server-types.ts} (97%) diff --git a/package.json b/package.json index 68fba8d..a56c005 100755 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ "dependencies": { "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", + "@mdi/js": "^7.0.96", + "@mdi/react": "^1.6.1", "@mui/lab": "^5.0.0-alpha.103", "@mui/material": "^5.10.9", "@tanstack/react-query": "^4.12.0", diff --git a/src/App.tsx b/src/App.tsx index a9c8b98..baecd98 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,6 +11,7 @@ import AliasesRoute from "~/routes/AliasesRoute" import AuthContextProvider from "~/AuthContext/AuthContextProvider" import AuthenticateRoute from "~/routes/AuthenticateRoute" import AuthenticatedRoute from "~/routes/AuthenticatedRoute" +import CompleteAccountRoute from "~/routes/CompleteAccountRoute" import RootRoute from "~/routes/Root" import SignupRoute from "~/routes/SignupRoute" import VerifyEmailRoute from "~/routes/VerifyEmailRoute" @@ -35,6 +36,10 @@ const router = createBrowserRouter([ path: "/auth/signup", element: , }, + { + path: "/auth/complete-account", + element: , + }, ], }, { diff --git a/src/AuthContext/AuthContext.ts b/src/AuthContext/AuthContext.ts index a2fa2a2..6a12cec 100644 --- a/src/AuthContext/AuthContext.ts +++ b/src/AuthContext/AuthContext.ts @@ -5,7 +5,7 @@ import {User} from "~/server-types" interface AuthContextTypeBase { user: User | null isAuthenticated: boolean - login: (user: User) => Promise + login: (user: User, callback: () => void) => Promise logout: () => void } diff --git a/src/AuthContext/AuthContextProvider.tsx b/src/AuthContext/AuthContextProvider.tsx index d3b1c10..eecdf68 100644 --- a/src/AuthContext/AuthContextProvider.tsx +++ b/src/AuthContext/AuthContextProvider.tsx @@ -34,8 +34,10 @@ export default function AuthContextProvider({ } }, []) - const login = useCallback(async (user: User) => { + const login = useCallback(async (user: User, callback?: () => void) => { setUser(user) + + callback?.() }, []) const {mutateAsync: refresh} = useMutation< diff --git a/src/apis/create-alias.ts b/src/apis/create-alias.ts index ce18e57..6170947 100644 --- a/src/apis/create-alias.ts +++ b/src/apis/create-alias.ts @@ -24,12 +24,12 @@ interface CreateAliasDataBase extends CreateAliasDataOther { } interface CreateAliasDataRandomType extends CreateAliasDataBase { - type: AliasType.Random + type: AliasType.RANDOM local?: undefined } interface CreateAliasDataCustomType extends CreateAliasDataBase { - type: AliasType.Custom + type: AliasType.CUSTOM local: string } @@ -42,7 +42,7 @@ export default async function createAlias( ): Promise { const {data} = await axios.post( `${import.meta.env.VITE_SERVER_BASE_URL}/alias`, - aliasData, + {}, ) return parseAlias(data) diff --git a/src/apis/update-account.ts b/src/apis/update-account.ts new file mode 100644 index 0000000..5da0cb5 --- /dev/null +++ b/src/apis/update-account.ts @@ -0,0 +1,4 @@ +export interface UpdateAccountData { + password: string + publicKey: string +} diff --git a/src/components/MultiStepFormElement.tsx b/src/components/MultiStepFormElement.tsx index 3609722..59f0852 100644 --- a/src/components/MultiStepFormElement.tsx +++ b/src/components/MultiStepFormElement.tsx @@ -10,7 +10,7 @@ export default function MultiStepFormElement({ children, }: MultiStepFormElementProps): ReactElement { return ( - + {children} ) diff --git a/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx b/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx index 6f515ff..d5a05b8 100644 --- a/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx +++ b/src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx @@ -5,7 +5,7 @@ import {AxiosError} from "axios" import {Button} from "@mui/material" import {useMutation} from "@tanstack/react-query" -import {createAlias, CreateAliasData} from "~/apis" +import {CreateAliasData, createAlias} from "~/apis" import {Alias, AliasType} from "~/server-types" export interface CreateRandomAliasButtonProps { @@ -27,7 +27,7 @@ export default function CreateRandomAliasButton({ startIcon={} onClick={() => mutate({ - type: AliasType.Random, + type: AliasType.RANDOM, }) } > diff --git a/src/route-widgets/AuthenticateRoute/NavigationButton.tsx b/src/route-widgets/AuthenticateRoute/NavigationButton.tsx index 8dae933..e85af43 100644 --- a/src/route-widgets/AuthenticateRoute/NavigationButton.tsx +++ b/src/route-widgets/AuthenticateRoute/NavigationButton.tsx @@ -1,10 +1,11 @@ import {ReactElement} from "react" import {BiStats} from "react-icons/bi" import {MdMail, MdSettings} from "react-icons/md" -import {IoMdDocument} from "react-icons/io" import {Link as RouterLink, useLocation} from "react-router-dom" import {Button} from "@mui/material" +import {mdiTextBoxMultiple} from "@mdi/js/commonjs/mdi" +import Icon from "@mdi/react" export enum NavigationSection { Overview, @@ -20,7 +21,7 @@ export interface NavigationButtonProps { const SECTION_ICON_MAP: Record = { [NavigationSection.Overview]: , [NavigationSection.Aliases]: , - [NavigationSection.Reports]: , + [NavigationSection.Reports]: , [NavigationSection.Settings]: , } diff --git a/src/route-widgets/root/GenerateEmailReportsForm.tsx b/src/route-widgets/CompleteAccountRoute/GenerateEmailReportsForm.tsx similarity index 80% rename from src/route-widgets/root/GenerateEmailReportsForm.tsx rename to src/route-widgets/CompleteAccountRoute/GenerateEmailReportsForm.tsx index c1bb1db..9c25b24 100644 --- a/src/route-widgets/root/GenerateEmailReportsForm.tsx +++ b/src/route-widgets/CompleteAccountRoute/GenerateEmailReportsForm.tsx @@ -3,6 +3,9 @@ import {TiCancel} from "react-icons/ti" import React, {ReactElement} from "react" import {Box, Button, Grid, Typography} from "@mui/material" +import {MultiStepFormElement} from "~/components" +import {mdiTextBoxMultiple} from "@mdi/js/commonjs/mdi" +import Icon from "@mdi/react" export interface GenerateEmailReportsFormProps { onYes: () => void @@ -14,7 +17,7 @@ export default function GenerateEmailReportsForm({ onYes, }: GenerateEmailReportsFormProps): ReactElement { return ( - + - + + + + + + - + ) } diff --git a/src/route-widgets/root/PasswordForm.tsx b/src/route-widgets/CompleteAccountRoute/PasswordForm.tsx similarity index 94% rename from src/route-widgets/root/PasswordForm.tsx rename to src/route-widgets/CompleteAccountRoute/PasswordForm.tsx index d1dccae..cc42d9f 100644 --- a/src/route-widgets/root/PasswordForm.tsx +++ b/src/route-widgets/CompleteAccountRoute/PasswordForm.tsx @@ -10,10 +10,8 @@ import {Box, Grid, InputAdornment, Typography} from "@mui/material" import {PasswordField} from "~/components" import {encryptString} from "~/utils" import {isDev} from "~/constants/development" - -export interface PasswordFormProps { - email: string -} +import {useUser} from "~/hooks" +import {useMutation} from "@tanstack/react-query" interface Form { password: string @@ -29,7 +27,9 @@ const schema = yup.object().shape({ .oneOf([yup.ref("password"), null], "Passwords must match"), }) -export default function PasswordForm({email}: PasswordFormProps): ReactElement { +export default function PasswordForm(): ReactElement { + const user = useUser() + const {} = useMutation() const awaitGenerateKey = useMemo( () => generateKey({ @@ -54,7 +54,7 @@ export default function PasswordForm({email}: PasswordFormProps): ReactElement { const encryptedPrivateKey = encryptString( keyPair.privateKey, - `${values.password}-${email}`, + `${values.password}-${user.email.address}`, ) console.log(encryptedPrivateKey) diff --git a/src/route-widgets/SignupRoute/EmailForm/EmailForm.tsx b/src/route-widgets/SignupRoute/EmailForm/EmailForm.tsx index f89fbf9..c2f39c8 100644 --- a/src/route-widgets/SignupRoute/EmailForm/EmailForm.tsx +++ b/src/route-widgets/SignupRoute/EmailForm/EmailForm.tsx @@ -6,13 +6,14 @@ import React, {ReactElement} from "react" import {InputAdornment, TextField} from "@mui/material" +import {useMutation} from "@tanstack/react-query" +import DetectEmailAutofillService from "./DetectEmailAutofillService" + import {MultiStepFormElement, SimpleForm} from "~/components" -import {checkIsDomainDisposable, signup} from "~/apis" +import {SignupResult, checkIsDomainDisposable, signup} from "~/apis" import {parseFastapiError} from "~/utils" import {ServerSettings} from "~/server-types" -import DetectEmailAutofillService from "./DetectEmailAutofillService" - export interface EmailFormProps { serverSettings: ServerSettings onSignUp: (email: string) => void @@ -31,6 +32,12 @@ export default function EmailForm({ onSignUp, serverSettings, }: EmailFormProps): ReactElement { + const {mutateAsync} = useMutation( + signup, + { + onSuccess: ({normalized_email}) => onSignUp(normalized_email), + }, + ) const formik = useFormik
({ validationSchema: SCHEMA, initialValues: { @@ -57,8 +64,7 @@ export default function EmailForm({ } try { - await signup(values.email) - onSignUp(values.email) + await mutateAsync(values.email) } catch (error) { setErrors(parseFastapiError(error as AxiosError)) } diff --git a/src/route-widgets/SignupRoute/YouGotMail/YouGotMail.tsx b/src/route-widgets/SignupRoute/YouGotMail/YouGotMail.tsx index 2308b45..e683a7e 100644 --- a/src/route-widgets/SignupRoute/YouGotMail/YouGotMail.tsx +++ b/src/route-widgets/SignupRoute/YouGotMail/YouGotMail.tsx @@ -14,7 +14,7 @@ import { } from "@mui/material" import {MultiStepFormElement, OpenMailButton} from "~/components" -import ResendMailButton from "~/route-widgets/root/YouGotMail/ResendMailButton" +import ResendMailButton from "~/route-widgets/SignupRoute/YouGotMail/ResendMailButton" export interface YouGotMailProps { email: string diff --git a/src/routes/AuthenticateRoute.tsx b/src/routes/AuthenticateRoute.tsx index 0570e76..c52b6e2 100644 --- a/src/routes/AuthenticateRoute.tsx +++ b/src/routes/AuthenticateRoute.tsx @@ -24,7 +24,7 @@ export default function AuthenticateRoute(): ReactElement {