fix: fixed invalid authorization popup

packages/web/src/auth/AuthorizeActionDialog.tsx

@@ -12,8 +12,10 @@ import { useValidateAppPassword } from "../settings/helpers"
 import { Controller, useForm } from "react-hook-form"
 import { errorToHelperText } from "../common/forms/errorToHelperText"
 import { signal, useSignalValue } from "reactjrx"
-import { Observable, from, mergeMap } from "rxjs"
+import { Observable, from, map, mergeMap, of } from "rxjs"
 import { CancelError } from "../common/errors/errors"
+import { getLatestDatabase } from "../rxdb/useCreateDatabase"
+import { getSettings } from "../settings/dbHelpers"
 
 const FORM_ID = "LockActionBehindUserPasswordDialog"
 
@@ -31,19 +33,25 @@ export const authorizeAction = (action: () => void, onCancel?: () => void) =>
     onCancel
   })
 
-/**
- * add check if user has pass code or not and if not just ignore
- */
-export function withAuthorization<T>(stream: Observable<T>) {
-  return stream.pipe(
-    mergeMap(() =>
-      from(
-        new Promise<void>((resolve, reject) =>
-          authorizeAction(resolve, () => reject(new CancelError()))
+export function useWithAuthorization() {
+  return function withAuthorization<T>(stream: Observable<T>) {
+    return stream.pipe(
+      mergeMap((data) =>
+        getLatestDatabase().pipe(
+          mergeMap((db) => getSettings(db)),
+          mergeMap((settings) =>
+            settings?.contentPassword
+              ? from(
+                  new Promise<void>((resolve, reject) =>
+                    authorizeAction(resolve, () => reject(new CancelError()))
+                  )
+                ).pipe(map(() => data))
+              : of(data)
+          )
         )
       )
     )
-  )
+  }
 }
 
 export const AuthorizeActionDialog: FC<{}> = () => {

packages/web/src/settings/ProfileScreen.tsx

@@ -85,8 +85,14 @@ export const ProfileScreen = () => {
         <ListItem button onClick={(_) => signOut()}>
           <ListItemText primary="Sign out" secondary={auth?.email} />
         </ListItem>
-        <ListItem
-          button
+        <ListItemButton
+          sx={
+            accountSettings?.contentPassword
+              ? {}
+              : {
+                  bgcolor: alpha(theme.palette.error.light, 0.2)
+                }
+          }
           onClick={() => {
             if (accountSettings?.contentPassword) {
               authorizeAction(() => setIsEditContentPasswordDialogOpened(true))
@@ -99,15 +105,15 @@ export const ProfileScreen = () => {
             primary={
               accountSettings?.contentPassword
                 ? "Change app password"
-                : "Initialize app password"
+                : "Initialize app password (Recommended)"
             }
             secondary={
               accountSettings?.contentPassword
                 ? "Used to authorize sensitive actions"
                 : "When set, it will be used to authorize sensitive actions"
             }
           />
-        </ListItem>
+        </ListItemButton>
 
         <ListItem
           button
@@ -224,7 +230,10 @@ export const ProfileScreen = () => {
         </ListItem>
       </List>
       <List subheader={<ListSubheader disableSticky>About</ListSubheader>}>
-        <ListItem button onClick={() => createDialog({ preset: "NOT_IMPLEMENTED" })}>
+        <ListItem
+          button
+          onClick={() => createDialog({ preset: "NOT_IMPLEMENTED" })}
+        >
           <ListItemIcon>
             <GavelRounded />
           </ListItemIcon>
@@ -295,7 +304,10 @@ export const ProfileScreen = () => {
             secondary="Remove all contents from your account"
           />
         </ListItemButton>
-        <ListItem button onClick={() => createDialog({ preset: "NOT_IMPLEMENTED" })}>
+        <ListItem
+          button
+          onClick={() => createDialog({ preset: "NOT_IMPLEMENTED" })}
+        >
           <ListItemText primary="Delete my account" />
         </ListItem>
       </List>

packages/web/src/settings/dbHelpers.ts

@@ -0,0 +1,8 @@
+import { from, map } from "rxjs"
+import { Database } from "../rxdb"
+
+export const getSettings = (db: Database) =>
+  getSettingsDocument(db).pipe(map((entry) => entry?.toJSON()))
+
+export const getSettingsDocument = (db: Database) =>
+  from(db.settings.findOne().exec())

packages/web/src/settings/helpers.ts

@@ -4,23 +4,18 @@ import { useForeverQuery, useMutation } from "reactjrx"
 import { getLatestDatabase, latestDatabase$ } from "../rxdb/useCreateDatabase"
 import { from, map, mergeMap, of, switchMap } from "rxjs"
 import { SettingsDocType } from "../rxdb/collections/settings"
+import { getSettingsDocument } from "./dbHelpers"
 
-export const getSettings = (database: Database) => {
-  return database.settings
-    .findOne({
-      selector: {
-        _id: "settings"
+export const getSettingsOrThrow = (database: Database) => {
+  return getSettingsDocument(database).pipe(
+    map((settings) => {
+      if (!settings) {
+        throw new Error("Settings not found")
       }
-    })
-    .exec()
-}
-
-export const getSettingsOrThrow = async (database: Database) => {
-  const settings = await getSettings(database)
 
-  if (!settings) throw new Error("Settings not found")
-
-  return settings
+      return settings
+    })
+  )
 }
 
 export const useUpdateContentPassword = () => {
@@ -46,7 +41,7 @@ export const useValidateAppPassword = (options: {
       if (!input) throw new Error("Invalid password")
 
       return getLatestDatabase().pipe(
-        mergeMap((database) => from(getSettingsOrThrow(database))),
+        mergeMap((database) => getSettingsOrThrow(database)),
         mergeMap((settings) => {
           const hashedInput = crypto.hashContentPassword(input)
 

packages/web/src/settings/useRemoveAllContents.ts

@@ -3,14 +3,15 @@ import { getLatestDatabase } from "../rxdb/useCreateDatabase"
 import { catchError, combineLatest, from, map, mergeMap, of, tap } from "rxjs"
 import { useSyncReplicate } from "../rxdb/replication/useSyncReplicate"
 import { useLock } from "../common/BlockingBackdrop"
-import { withAuthorization } from "../auth/AuthorizeActionDialog"
+import { useWithAuthorization } from "../auth/AuthorizeActionDialog"
 import { Report } from "../debug/report.shared"
 import { CancelError } from "../common/errors/errors"
 import { createDialog } from "../common/dialogs/createDialog"
 
 export const useRemoveAllContents = () => {
   const { mutateAsync: sync } = useSyncReplicate()
   const [lock] = useLock()
+  const withAuthorization = useWithAuthorization()
 
   return useMutation({
     mutationFn: () =>