feat: impl wrong password prompt

apps/web/src/components/dialogs/password-dialog.js

@@ -1,11 +1,21 @@
-import React from "react";
+import React, { useState, useRef, useCallback } from "react";
-import { Box } from "rebass";
+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 (
     <Dialog
       isOpen={true}
@@ -14,16 +24,33 @@ function PasswordDialog(props) {
       content={
         <Box my={1}>
           <Input
-            variant="default"
+            ref={passwordRef}
+            autoFocus
+            variant={isWrong ? "error" : "default"}
             type="password"
             onChange={e => (password = e.target.value)}
             placeholder="Enter vault password"
+            onKeyUp={async e => {
+              if (e.key === "Enter") {
+                await submit();
+              } else {
+                setIsWrong(false);
+              }
+            }}
           />
+          {isWrong && (
+            <Flex alignItems="center" color="red" mt={2}>
+              <Icon.AlertTriangle size={16} />
+              <Text ml={1} fontSize={"subBody"}>
+                Wrong password
+              </Text>
+            </Flex>
+          )}
         </Box>
       }
       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 => (
     <PasswordDialog
       title={title}
       icon={icon}
       positiveButtonText={positiveButtonText}
-      onCancel={() => perform()}
+      onCancel={() => perform(false)}
-      onDone={password => perform(password)}
+      validate={validate}
+      onDone={() => perform(true)}
     />
   ));
 };