Add show/hide secret value toggle button in new secret form

pages/projects/[projectId]/_secrets.tsx

@@ -1,9 +1,21 @@
 import type { Project } from '@prisma/client';
-import { Box, Flex, Text, Button, IconButton, Tooltip, Input, useToast } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Text,
+  Button,
+  IconButton,
+  Tooltip,
+  Input,
+  InputGroup,
+  InputRightElement,
+  useToast,
+} from '@chakra-ui/react';
 import { PlusIcon, TrashIcon } from '@heroicons/react/outline';
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 import axios from 'axios';
+import { useForm } from 'react-hook-form';
 
 import { SectionHeading, confirmDialog } from '@/components';
 
@@ -18,36 +30,42 @@ type Props = {
   [key: string]: any;
 };
 
+type NewSecretFormData = {
+  name: string;
+  value: string;
+};
+
 export default function Secrets({ project, ...props }: Props) {
   const [showNewForm, setShowNewForm] = useState(false);
-  const [newSecretName, setNewSecretName] = useState('');
-  const [newSecretValue, setNewSecretValue] = useState('');
-  const [creatingSecret, setCreatingSecret] = useState(false);
   const [deletingSecret, setDeletingSecret] = useState('');
+  const [showValue, setShowValue] = useState(false);
+  const {
+    register,
+    getValues,
+    handleSubmit,
+    setValue,
+    formState: { isSubmitting: creatingSecret },
+  } = useForm<NewSecretFormData>();
   const toast = useToast();
   const router = useRouter();
 
   const closeCreation = () => {
     setShowNewForm(false);
-    setNewSecretName('');
-    setNewSecretValue('');
+    setValue('name', '');
+    setValue('value', '');
   };
 
-  const createSecret = async (e) => {
-    e.preventDefault();
+  const createSecret = async () => {
     if (creatingSecret) return;
 
-    if (project.Secret.some(({ name }) => name === newSecretName)) {
+    const newSecret = getValues();
+
+    if (project.Secret.some(({ name }) => name === newSecret.name)) {
       toast({ status: "error", title: "Secret with this name already exists" });
       return;
     }
 
-    setCreatingSecret(true);
-    await axios.post(`/api/projects/${project.id}/secrets/create`, {
-      name: newSecretName,
-      value: newSecretValue,
-    });
-    setCreatingSecret(false);
+    await axios.post(`/api/projects/${project.id}/secrets/create`, newSecret);
     closeCreation();
     router.replace(router.asPath, undefined, { scroll: false });
   };
@@ -115,13 +133,33 @@ export default function Secrets({ project, ...props }: Props) {
           </Flex>
         ))}
         {showNewForm && (
-          <Flex border="1px" borderColor="gray.200" py="3" px="6" bg="white" _first={{ roundedTop: "md" }} _notFirst={{ mt: -1 }} _last={{ roundedBottom: "md" }}>
-            <form onSubmit={createSecret} style={{ width: '100%' }}>
+          <Flex border="1px" borderColor="gray.200" p="3" bg="white" _first={{ roundedTop: "md" }} _notFirst={{ mt: -1 }} _last={{ roundedBottom: "md" }}>
+            <form onSubmit={handleSubmit(createSecret)} style={{ width: '100%' }}>
               <Flex justifyContent="space-between" alignItems="center">
-                <Input placeholder="Secret name" required value={newSecretName} onChange={(e) => setNewSecretName(e.target.value)} />
-                <Input placeholder="Secret value" required value={newSecretValue} onChange={(e) => setNewSecretValue(e.target.value)} mx={8} />
+                <Input
+                  placeholder="Secret name"
+                  required
+                  borderRightRadius="none"
+                  borderRightWidth="0"
+                  {...register('name')}
+                />
+                <InputGroup>
+                  <Input
+                    type={showValue ? 'text' : 'password'}
+                    placeholder="Secret value"
+                    required
+                    pr="4rem"
+                    borderLeftRadius="none"
+                    {...register('value')}
+                  />
+                  <InputRightElement w="4rem">
+                    <Button size="xs" h="1.75rem" onClick={() => setShowValue(!showValue)}>
+                      {showValue ? 'Hide' : 'Show'}
+                    </Button>
+                  </InputRightElement>
+                </InputGroup>
 
-                <Button type="submit" size="sm" mr="2" px="6" colorScheme="green" bg="green.400" isLoading={creatingSecret}>
+                <Button type="submit" size="sm" ml="8" mr="2" px="6" colorScheme="green" bg="green.400" isLoading={creatingSecret}>
                   Save
                 </Button>
                 <Button type="button" size="sm" colorScheme="gray" px="6" onClick={closeCreation}>