From 99e77503245f2f76cb33aafbd1aa6ff7f5446567 Mon Sep 17 00:00:00 2001
From: "kody.low" <kodylow7@gmail.com>
Date: Tue, 13 Aug 2024 14:19:56 -0700
Subject: [PATCH] feat: hide password by default

---
 .../setConfiguration/BasicSettingsForm.tsx    | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/apps/guardian-ui/src/components/setup/screens/setConfiguration/BasicSettingsForm.tsx b/apps/guardian-ui/src/components/setup/screens/setConfiguration/BasicSettingsForm.tsx
index 671da1ef..84847609 100644
--- a/apps/guardian-ui/src/components/setup/screens/setConfiguration/BasicSettingsForm.tsx
+++ b/apps/guardian-ui/src/components/setup/screens/setConfiguration/BasicSettingsForm.tsx
@@ -1,18 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormControl,
   FormLabel,
   FormHelperText,
   Input,
-  Flex,
   Button,
   Text,
   useTheme,
+  InputGroup,
+  IconButton,
+  InputRightAddon,
 } from '@chakra-ui/react';
 import { useTranslation } from '@fedimint/utils';
 import { FormGroup } from '@fedimint/ui';
 import { ReactComponent as LightbulbLogo } from '../../../../assets/svgs/lightbulb.svg';
 import { generatePassword } from '../../../../utils';
+import { FiEye, FiEyeOff } from 'react-icons/fi';
 
 interface BasicSettingsFormProps {
   myName: string;
@@ -29,6 +32,7 @@ export const BasicSettingsForm: React.FC<BasicSettingsFormProps> = ({
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
+  const [showPassword, setShowPassword] = useState(false);
 
   return (
     <FormGroup
@@ -51,14 +55,23 @@ export const BasicSettingsForm: React.FC<BasicSettingsFormProps> = ({
             {t('set-config.admin-password-generate')}
           </Button>
         ) : (
-          <Flex gap={2}>
+          <InputGroup>
             <Input
-              type='text'
+              type={showPassword ? 'text' : 'password'}
               value={password}
               placeholder='Password'
               onChange={(ev) => setPassword(ev.currentTarget.value)}
             />
-          </Flex>
+            <InputRightAddon>
+              <IconButton
+                aria-label={showPassword ? 'Hide password' : 'Show password'}
+                icon={showPassword ? <FiEyeOff /> : <FiEye />}
+                onClick={() => setShowPassword(!showPassword)}
+                variant='ghost'
+                m={-4}
+              />
+            </InputRightAddon>
+          </InputGroup>
         )}
         <FormHelperText style={{ marginTop: '16px', marginBottom: '16px' }}>
           <Text color={theme.colors.yellow[500]}>