adapting website to extension

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: <AuthenticatedRoute />,
-				loader: getServerSettings,
 				children: [
 					{
 						path: "/",
@@ -73,6 +71,7 @@ const router = createBrowserRouter([
 					},
 					{
 						path: "/aliases",
+						loader: getServerSettings,
 						element: <AliasesRoute />,
 					},
 					{
@@ -89,6 +88,7 @@ const router = createBrowserRouter([
 					},
 					{
 						path: "/reports/:id",
+						loader: getServerSettings,
 						element: <ReportDetailRoute />,
 					},
 					{
@@ -107,10 +107,8 @@ export default function App(): ReactElement {
 			<QueryClientProvider client={queryClient}>
 				<ThemeProvider theme={lightTheme}>
 					<SnackbarProvider>
-						<AuthContextProvider>
+						<CssBaseline />
-							<CssBaseline />
+						<RouterProvider router={router} />
-							<RouterProvider router={router} />
-						</AuthContextProvider>
 					</SnackbarProvider>
 				</ThemeProvider>
 			</QueryClientProvider>

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<RefreshTokenResult, AxiosError, void>(refreshToken, {
 		onError: () => logout(false),
 	})
 
+	const $enterPasswordAmount = useRef<number>(0)
 	const [askForPassword, setAskForPassword] = useState<boolean>(false)
 	const [doNotAskForPassword, setDoNotAskForPassword] = useState<boolean>(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
 			}
 		},

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({
 				<Button startIcon={<TiCancel />} onClick={() => onClose(true)}>
 					{t("components.passwordShareConfirmationDialog.doNotShare")}
 				</Button>
-				<Button color="error" onClick={onShare} startIcon={<MdLock />}>
+				<Button color="error" onClick={onShare} startIcon={<MdShield />}>
 					{t("components.passwordShareConfirmationDialog.continueAction")}
 				</Button>
 			</DialogActions>

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

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 {

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 (
-		<Box width="80vw">
+		<Box maxWidth="80vw">
 			<form onSubmit={formik.handleSubmit}>
 				<SimpleForm
 					title={t("routes.CompleteAccountRoute.forms.password.title")}

src/routes/Root.tsx

@@ -3,14 +3,15 @@ import React, {ReactElement} from "react"
 
 import {ExtensionSignalHandler} from "~/components"
 import AppLoadingScreen from "~/AppLoadingScreen/AppLoadingScreen"
+import AuthContextProvider from "~/AuthContext/AuthContextProvider"
 
 export default function RootRoute(): ReactElement {
 	return (
-		<>
+		<AuthContextProvider>
 			<AppLoadingScreen>
 				<Outlet />
 			</AppLoadingScreen>
 			<ExtensionSignalHandler />
-		</>
+		</AuthContextProvider>
 	)
 }