feat: fixed authorizing access dialog

packages/web/src/App.tsx

@@ -1,13 +1,7 @@
 import { FC, Suspense, useEffect, useState } from "react"
 import { AppNavigator } from "./navigation/AppNavigator"
-import {
-  ThemeProvider,
-  Theme,
-  StyledEngineProvider,
-  Fade,
-  Box
-} from "@mui/material"
-import { theme } from "./theme"
+import { Theme, StyledEngineProvider, Fade, Box } from "@mui/material"
+import { theme } from "./theme/theme"
 import { BlockingBackdrop } from "./common/BlockingBackdrop"
 import { TourProvider } from "./app-tour/TourProvider"
 import { ManageBookCollectionsDialog } from "./books/ManageBookCollectionsDialog"
@@ -36,6 +30,8 @@ import {
 import localforage from "localforage"
 import { signalEntriesToPersist } from "./storage"
 import { queryClient } from "./queries/client"
+import { ThemeProvider } from "./theme/ThemeProvider"
+import { AuthorizeActionDialog } from "./auth/AuthorizeActionDialog"
 
 declare module "@mui/styles/defaultTheme" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -70,7 +66,7 @@ export function App() {
       }}
     >
       <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider>
           <QueryClientProvider client={queryClient}>
             <Suspense fallback={<SplashScreen show />}>
               {/* <SplashScreen show={!isAppReady} /> */}
@@ -93,6 +89,7 @@ export function App() {
                               <ManageBookCollectionsDialog />
                               <ManageBookTagsDialog />
                               <ManageTagBooksDialog />
+                              <AuthorizeActionDialog />
                             </TourProvider>
                             <UpdateAvailableDialog
                               serviceWorker={newServiceWorker}

packages/web/src/PreloadQueries.ts

@@ -1,11 +1,11 @@
 import { memo, useEffect, useState } from "react"
-import { useAccountSettings } from "./settings/helpers"
+import { useSettings } from "./settings/helpers"
 import { useLiveRef } from "reactjrx"
 
 const usePrefetchAccountSettings = () => {
   const [prefetched, setPrefetched] = useState(false)
 
-  const { data, status } = useAccountSettings({
+  const { data, status } = useSettings({
     enabled: !prefetched
   })
 

packages/web/src/auth/AuthorizeActionDialog.tsx

@@ -0,0 +1,113 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField
+} from "@mui/material"
+import { FC, useEffect } from "react"
+import { useValidateAppPassword } from "../settings/helpers"
+import { Controller, useForm } from "react-hook-form"
+import { errorToHelperText } from "../common/forms/errorToHelperText"
+import { signal, useSignalValue } from "reactjrx"
+
+const FORM_ID = "LockActionBehindUserPasswordDialog"
+
+type Inputs = {
+  password: string
+}
+
+const actionSignal = signal<(() => void) | undefined>({})
+
+export const authorizeAction = (action: () => void) =>
+  actionSignal.setValue(() => action)
+
+export const AuthorizeActionDialog: FC<{}> = () => {
+  const action = useSignalValue(actionSignal)
+  const open = !!action
+  const { control, handleSubmit, setFocus, setError, reset } = useForm<Inputs>({
+    defaultValues: {
+      password: ""
+    }
+  })
+  const {
+    mutate: validatePassword,
+    reset: resetValidatePasswordMutation,
+    error
+  } = useValidateAppPassword({
+    onSuccess: () => {
+      onClose()
+      action && action()
+    },
+    onError: () => {
+      setError("password", {
+        message: "Invalid"
+      })
+    }
+  })
+
+  const onClose = () => {
+    actionSignal.setValue(undefined)
+  }
+
+  useEffect(() => {
+    reset()
+    resetValidatePasswordMutation()
+
+    if (open) {
+      setTimeout(() => {
+        setFocus("password")
+      })
+    }
+  }, [open, resetValidatePasswordMutation, reset, setFocus])
+
+  return (
+    <Dialog onClose={onClose} open={open}>
+      <DialogTitle>Authorization required</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          This action requires explicit authorization. Please enter your app
+          password to continue.
+        </DialogContentText>
+        <form
+          noValidate
+          id={FORM_ID}
+          onSubmit={handleSubmit((data) => {
+            validatePassword(data.password)
+          })}
+        >
+          <Controller
+            name="password"
+            control={control}
+            rules={{ required: true }}
+            render={({ field: { ref, ...rest }, fieldState }) => {
+              return (
+                <TextField
+                  {...rest}
+                  label="Password"
+                  type="password"
+                  fullWidth
+                  margin="normal"
+                  inputRef={ref}
+                  autoComplete="current-password"
+                  error={fieldState.invalid}
+                  helperText={errorToHelperText(fieldState.error)}
+                />
+              )
+            }}
+          />
+        </form>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          Cancel
+        </Button>
+        <Button color="primary" type="submit" form={FORM_ID}>
+          Authorize
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

packages/web/src/auth/UnlockLibraryDialog.tsx

@@ -15,7 +15,7 @@ import { PreventAutocompleteFields } from "../common/forms/PreventAutocompleteFi
 import { useModalNavigationControl } from "../navigation/useModalNavigationControl"
 import { libraryStateSignal } from "../library/states"
 import { signal, useSignalValue } from "reactjrx"
-import { useAccountSettings } from "../settings/helpers"
+import { useSettings } from "../settings/helpers"
 
 export const unlockLibraryDialogSignal = signal({
   key: "unlockLibraryDialog",
@@ -34,7 +34,7 @@ export const UnlockLibraryDialog: FC<{}> = () => {
       unlockPassword: ""
     }
   })
-  const { data: accountSettings } = useAccountSettings()
+  const { data: accountSettings } = useSettings()
   const isOpened = useSignalValue(unlockLibraryDialogSignal)
   const contentPassword = accountSettings?.contentPassword
   const { closeModalWithNavigation } = useModalNavigationControl(