From 043b78c87b9f7c9fa910ef5d62ea5cedbac00cc9 Mon Sep 17 00:00:00 2001
From: "kody.low" <kodylow7@gmail.com>
Date: Tue, 31 Oct 2023 22:21:24 -0700
Subject: [PATCH] feat: confirm password field

---
 .../src/components/SetConfiguration.tsx       | 23 +++++++++++++++++--
 apps/guardian-ui/src/languages/en.json        |  4 +++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/guardian-ui/src/components/SetConfiguration.tsx b/apps/guardian-ui/src/components/SetConfiguration.tsx
index fb5c54c3..26afb64d 100644
--- a/apps/guardian-ui/src/components/SetConfiguration.tsx
+++ b/apps/guardian-ui/src/components/SetConfiguration.tsx
@@ -51,6 +51,8 @@ export const SetConfiguration: React.FC<Props> = ({ next }: Props) => {
   const isHost = role === GuardianRole.Host;
   const [myName, setMyName] = useState(stateMyName);
   const [password, setPassword] = useState(statePassword);
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [passwordsMatch, setPasswordsMatch] = useState(false);
   const [hostServerUrl, setHostServerUrl] = useState('');
   const [defaultParams, setDefaultParams] = useState<ConfigGenParams>();
   const [numPeers, setNumPeers] = useState(
@@ -122,6 +124,10 @@ export const SetConfiguration: React.FC<Props> = ({ next }: Props) => {
       )
     : Boolean(myName && password && hostServerUrl);
 
+  useEffect(() => {
+    setPasswordsMatch(password === confirmPassword);
+  }, [password, confirmPassword]);
+
   const handleChangeFederationName = (
     ev: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -215,6 +221,19 @@ export const SetConfiguration: React.FC<Props> = ({ next }: Props) => {
           />
           <FormHelperText>{t('set-config.admin-password-help')}</FormHelperText>
         </FormControl>
+        <FormControl>
+          <FormLabel>{t('set-config.confirm-password')}</FormLabel>
+          <Input
+            type='password'
+            value={confirmPassword}
+            onChange={(ev) => setConfirmPassword(ev.currentTarget.value)}
+          />
+          <FormHelperText>
+            {passwordsMatch && password.length > 0
+              ? 'Passwords match!'
+              : 'Passwords do not match!'}
+          </FormHelperText>
+        </FormControl>
         {!isHost && (
           <FormControl>
             <FormLabel>{t('set-config.join-federation')}</FormLabel>
@@ -318,8 +337,8 @@ export const SetConfiguration: React.FC<Props> = ({ next }: Props) => {
       )}
       <div>
         <Button
-          isDisabled={!isValid}
-          onClick={isValid ? handleNext : undefined}
+          isDisabled={!isValid || !passwordsMatch}
+          onClick={isValid && passwordsMatch ? handleNext : undefined}
           leftIcon={<Icon as={ArrowRightIcon} />}
           mt={4}
         >
diff --git a/apps/guardian-ui/src/languages/en.json b/apps/guardian-ui/src/languages/en.json
index 5622d481..3e398523 100644
--- a/apps/guardian-ui/src/languages/en.json
+++ b/apps/guardian-ui/src/languages/en.json
@@ -83,6 +83,8 @@
     "guardian-name-help": "This name will be shown to other Guardians",
     "admin-password": "Admin password",
     "admin-password-help": "You'll need this every time you visit this page.",
+    "confirm-password": "Confirm password",
+    "confirm-password-help": "You'll need this every time you visit this page.",
     "join-federation": "Join Federation link",
     "join-federation-help": "Ask the person who created the Federation for a link, and paste it here.",
     "federation-settings": "Federation settings",
@@ -100,7 +102,7 @@
     "error-valid-max": "Please input a number of at most {{max}}.",
     "error-valid-min-max": "Please input a number between {{min}} and {{max}}.",
     "meta-fields": "Meta fields",
-    "meta-fields-description": "Additional configuration sent to fedimint clients. See <docs>documentation</docs> or more information.",
+    "meta-fields-description": "Additional configuration sent to fedimint clients. See <docs>documentation</docs> for more information.",
     "meta-fields-key": "Meta key",
     "meta-fields-value": "Value",
     "meta-fields-add-another": "Add another"