From 330d04eca2e0ff6605eade374bfcfb6d63150bca Mon Sep 17 00:00:00 2001 From: Myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sun, 27 Nov 2022 17:02:39 +0100 Subject: [PATCH] adapting website to extension --- src/App.tsx | 10 ++++------ src/AuthContext/AuthContextProvider.tsx | 13 ++++++++++++- src/AuthContext/PasswordShareConfirmationDialog.tsx | 4 ++-- src/extension-types.ts | 5 +++++ .../AliasesRoute/CreateAliasButton.tsx | 3 +-- .../CompleteAccountRoute/PasswordForm.tsx | 10 ++++------ src/routes/Root.tsx | 5 +++-- 7 files changed, 31 insertions(+), 19 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 2cb9ee6..eb37cb8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,6 @@ import {getServerSettings} from "~/apis" import {lightTheme} from "~/constants/themes" import AliasDetailRoute from "~/routes/AliasDetailRoute" 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" @@ -65,7 +64,6 @@ const router = createBrowserRouter([ { path: "/", element: , - loader: getServerSettings, children: [ { path: "/", @@ -73,6 +71,7 @@ const router = createBrowserRouter([ }, { path: "/aliases", + loader: getServerSettings, element: , }, { @@ -89,6 +88,7 @@ const router = createBrowserRouter([ }, { path: "/reports/:id", + loader: getServerSettings, element: , }, { @@ -107,10 +107,8 @@ export default function App(): ReactElement { - - - - + + diff --git a/src/AuthContext/AuthContextProvider.tsx b/src/AuthContext/AuthContextProvider.tsx index a1ec285..9592a2d 100644 --- a/src/AuthContext/AuthContextProvider.tsx +++ b/src/AuthContext/AuthContextProvider.tsx @@ -1,7 +1,8 @@ -import {ReactElement, ReactNode, useCallback, useEffect, useMemo, useState} from "react" +import {ReactElement, ReactNode, useCallback, useEffect, useMemo, useRef, useState} from "react" import {useEvent, useLocalStorage} from "react-use" import {AxiosError} from "axios" import {decrypt, readMessage, readPrivateKey} from "openpgp" +import {useNavigate} from "react-router-dom" import {useMutation} from "@tanstack/react-query" @@ -19,10 +20,12 @@ export interface AuthContextProviderProps { } export default function AuthContextProvider({children}: AuthContextProviderProps): ReactElement { + const navigate = useNavigate() const {mutateAsync: refresh} = useMutation(refreshToken, { onError: () => logout(false), }) + const $enterPasswordAmount = useRef(0) const [askForPassword, setAskForPassword] = useState(false) const [doNotAskForPassword, setDoNotAskForPassword] = useState(false) @@ -238,6 +241,14 @@ export default function AuthContextProvider({children}: AuthContextProviderProps }, }), ) + break + case "enter-password": + if ($enterPasswordAmount.current < 1) { + $enterPasswordAmount.current += 1 + + navigate("/enter-password") + } + break } }, diff --git a/src/AuthContext/PasswordShareConfirmationDialog.tsx b/src/AuthContext/PasswordShareConfirmationDialog.tsx index 0f616b6..b1a92f2 100644 --- a/src/AuthContext/PasswordShareConfirmationDialog.tsx +++ b/src/AuthContext/PasswordShareConfirmationDialog.tsx @@ -1,7 +1,7 @@ import {ReactElement} from "react" import {useTranslation} from "react-i18next" import {TiCancel} from "react-icons/ti" -import {MdAccessTimeFilled, MdLock} from "react-icons/md" +import {MdAccessTimeFilled, MdShield} from "react-icons/md" import { Alert, @@ -49,7 +49,7 @@ export default function PasswordShareConfirmationDialog({ - diff --git a/src/extension-types.ts b/src/extension-types.ts index 6624b62..687e3c4 100644 --- a/src/extension-types.ts +++ b/src/extension-types.ts @@ -10,10 +10,15 @@ interface ExtensionKleckMessageUser { type: "get-user" } +interface ExtensionKleckMessageEnterPassword { + type: "enter-password" +} + export type ExtensionKleckMessage = | ExtensionKleckMessagePasswordStatus | ExtensionKleckMessageAskForPassword | ExtensionKleckMessageUser + | ExtensionKleckMessageEnterPassword export type ExtensionKleckEvent = MessageEvent & { detail: ExtensionKleckMessage diff --git a/src/route-widgets/AliasesRoute/CreateAliasButton.tsx b/src/route-widgets/AliasesRoute/CreateAliasButton.tsx index d859067..8746d4c 100644 --- a/src/route-widgets/AliasesRoute/CreateAliasButton.tsx +++ b/src/route-widgets/AliasesRoute/CreateAliasButton.tsx @@ -1,10 +1,9 @@ -import {ReactElement, useContext, useRef, useState} from "react" +import {ReactElement, useContext, useState} from "react" import {MdArrowDropDown} from "react-icons/md" import {BsArrowClockwise} from "react-icons/bs" import {FaPen} from "react-icons/fa" import {AxiosError} from "axios" import {useTranslation} from "react-i18next" -import {SnackbarKey} from "notistack" import update from "immutability-helper" import { diff --git a/src/route-widgets/CompleteAccountRoute/PasswordForm.tsx b/src/route-widgets/CompleteAccountRoute/PasswordForm.tsx index 071d87b..f2aaaed 100644 --- a/src/route-widgets/CompleteAccountRoute/PasswordForm.tsx +++ b/src/route-widgets/CompleteAccountRoute/PasswordForm.tsx @@ -1,16 +1,14 @@ import * as yup from "yup" import {useFormik} from "formik" -import {MdCheckCircle, MdChevronRight, MdLock} from "react-icons/md" +import {MdCheckCircle, MdLock} from "react-icons/md" import {generateKey, readKey} from "openpgp" import {AxiosError} from "axios" import {useTranslation} from "react-i18next" +import {Box, InputAdornment} from "@mui/material" +import {useMutation} from "@tanstack/react-query" import React, {ReactElement, useContext, useMemo} from "react" import passwordGenerator from "secure-random-password" -import {LoadingButton} from "@mui/lab" -import {Box, Grid, InputAdornment, Typography} from "@mui/material" -import {useMutation} from "@tanstack/react-query" - import {PasswordField, SimpleForm} from "~/components" import {buildEncryptionPassword, encryptString} from "~/utils" import {isDev} from "~/constants/development" @@ -117,7 +115,7 @@ export default function PasswordForm({onDone}: PasswordFormProps): ReactElement }) return ( - +
+ - + ) }