feat: hide password by default

Kodylow · Aug 13, 2024 · 99e7750 · 99e7750
1 parent 715af94
commit 99e7750
Showing 1 changed file with 18 additions and 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
@@ -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]}>