{tStr(encrypt ? "popoverDescriptionEncrypt" : "popoverDescription")}
- >; + >, [tStr, inputRef, encrypt, form, onFinish, passwordError]); + + return { form: formEl, submit: onFinish, reset }; } diff --git a/src/components/auth/AuthorisedAction.tsx b/src/components/auth/AuthorisedAction.tsx index ac21f39..223656a 100644 --- a/src/components/auth/AuthorisedAction.tsx +++ b/src/components/auth/AuthorisedAction.tsx @@ -2,11 +2,14 @@ // This file is part of KristWeb 2 under AGPL-3.0. // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt import React, { FC, useState } from "react"; +import { Grid } from "antd"; import { TooltipPlacement } from "antd/lib/tooltip"; import { useMasterPassword } from "@wallets"; +import { useBooleanSetting } from "@utils/settings"; import { AuthMasterPasswordPopover } from "./AuthMasterPasswordPopover"; +import { AuthMasterPasswordModal } from "./AuthMasterPasswordModal"; import { SetMasterPasswordModal } from "./SetMasterPasswordModal"; import "./AuthorisedAction.less"; @@ -27,6 +30,11 @@ // Don't render the modal and popover unless we absolutely have to const [clicked, setClicked] = useState(false); const [modalVisible, setModalVisible] = useState(false); + const [authModalVisible, setAuthModalVisible] = useState(false); + + // Determine whether to use a popover or a modal for auth + const bps = Grid.useBreakpoint(); + const alwaysModal = useBooleanSetting("modalAuth"); // This is used to pass the 'onClick' prop down to the child. The child MUST // support the onClick prop. @@ -41,8 +49,7 @@ return React.cloneElement(child, { onClick: (e: MouseEvent) => { e.preventDefault(); debug("authorised action occurred: was already authed"); - - if (onAuthed) onAuthed(); + onAuthed?.(); }}); } else if (!hasMasterPassword) { // The user does not yet have a master password, prompt them to create one: @@ -51,7 +58,7 @@ e.preventDefault(); debug("authorised action postponed: no master password set"); - if (!clicked) setClicked(true); + setClicked(true); setModalVisible(true); }})} @@ -62,18 +69,40 @@ debug("authorised action occurred: master password now set, continuing with action"); setModalVisible(false); - if (onAuthed) onAuthed(); + onAuthed?.(); + }} + />} + >; + } else if (!bps.md || alwaysModal) { + // The user has a master password set but is not logged in, prompt them to + // enter it. Show a modal on mobile: + return <> + {React.cloneElement(child, { onClick: (e: MouseEvent) => { + e.preventDefault(); + debug("authorised action postponed: no master password set"); + + setClicked(true); + setAuthModalVisible(true); + }})} + + {clicked &&