diff --git a/apps/web/src/components/dialogs/password-dialog.js b/apps/web/src/components/dialogs/password-dialog.js index 3a94aed84..6e7af53f9 100644 --- a/apps/web/src/components/dialogs/password-dialog.js +++ b/apps/web/src/components/dialogs/password-dialog.js @@ -1,11 +1,21 @@ -import React from "react"; -import { Box } from "rebass"; +import React, { useState, useRef, useCallback } from "react"; +import { Box, Text, Flex } from "rebass"; import { Input } from "@rebass/forms"; import Dialog, { showDialog } from "./dialog"; import * as Icon from "react-feather"; function PasswordDialog(props) { let password = ""; + const [isWrong, setIsWrong] = useState(false); + const passwordRef = useRef(); + const submit = useCallback(async () => { + if (await props.validate(password)) { + props.onDone(); + } else { + setIsWrong(true); + passwordRef.current.focus(); + } + }, [setIsWrong, password, props]); return ( (password = e.target.value)} placeholder="Enter vault password" + onKeyUp={async e => { + if (e.key === "Enter") { + await submit(); + } else { + setIsWrong(false); + } + }} /> + {isWrong && ( + + + + Wrong password + + + )} } positiveButton={{ text: props.positiveButtonText, - onClick: () => props.onDone(password) + onClick: submit }} negativeButton={{ text: "Cancel", onClick: props.onCancel }} /> @@ -55,15 +82,16 @@ function getDialogData(type) { } } -export const showPasswordDialog = type => { +export const showPasswordDialog = (type, validate) => { const { title, icon, positiveButtonText } = getDialogData(type); return showDialog(perform => ( perform()} - onDone={password => perform(password)} + onCancel={() => perform(false)} + validate={validate} + onDone={() => perform(true)} /> )); };