From 2f69b267f8d0d5d1f54598d5c3d161b9f5c583f7 Mon Sep 17 00:00:00 2001
From: Nicholas Charriere <nicholascharriere@gmail.com>
Date: Tue, 23 Jul 2024 16:44:46 -0700
Subject: [PATCH] Dont show secrets unless action is taken by user (#153)

* Dont show secrets unless action is taken by user

* Remove unused variable
---
 packages/web/src/routes/secrets.tsx | 48 +++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/packages/web/src/routes/secrets.tsx b/packages/web/src/routes/secrets.tsx
index 6415bcd8..7e55ed73 100644
--- a/packages/web/src/routes/secrets.tsx
+++ b/packages/web/src/routes/secrets.tsx
@@ -1,6 +1,8 @@
 import { useRef, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { cn } from '@/lib/utils';
 import { getSecrets } from '@/lib/server';
-import { Info, Trash2 } from 'lucide-react';
+import { Info, Trash2, Eye, EyeOff } from 'lucide-react';
 import { Form, useLoaderData, useRevalidator } from 'react-router-dom';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -148,7 +150,7 @@ function SecretRow(props: {
   const passwordRef = useRef<HTMLInputElement>(null);
 
   const [hovering, setHovering] = useState(false);
-  const [inputFocused, setInputFocused] = useState(false);
+  const [show, setShow] = useState(false);
 
   function onNameKeydown(e: React.KeyboardEvent<HTMLInputElement>) {
     if (e.key === 'Enter') {
@@ -185,7 +187,6 @@ function SecretRow(props: {
   }
 
   function onBlur() {
-    setInputFocused(false);
     if (isValidSecretName(name)) {
       props.onUpdate(props.name, name, value);
     } else {
@@ -233,24 +234,41 @@ function SecretRow(props: {
           onKeyDown={onNameKeydown}
           onChange={(e) => setName(e.currentTarget.value.toUpperCase())}
           autoComplete="off"
-          onFocus={() => setInputFocused(true)}
           onBlur={onBlur}
           className="border-transparent group-hover:border-border group-focus-within:border-border"
         />
       </td>
-      <td className="h-10 text-left align-middle">
+      <td className="h-10 text-left align-middle relative">
         <Input
           ref={passwordRef}
-          type={inputFocused || hovering ? 'text' : 'password'}
+          type={show ? 'text' : 'password'}
           autoComplete="off"
           value={value}
           onKeyDown={onPasswordKeydown}
           onChange={(e) => setValue(e.currentTarget.value)}
           required
-          onFocus={() => setInputFocused(true)}
           onBlur={onBlur}
-          className="border-transparent group-hover:border-border group-focus-within:border-border"
+          className="border-transparent group-hover:border-border group-focus-within:border-border pr-8"
         />
+        {show ? (
+          <EyeOff
+            size={14}
+            className={cn(
+              'absolute right-3 top-3 cursor-pointer opacity-80 bg-background',
+              !hovering && 'hidden',
+            )}
+            onClick={() => setShow(false)}
+          />
+        ) : (
+          <Eye
+            size={14}
+            className={cn(
+              'absolute right-3 top-3 cursor-pointer opacity-80 bg-background',
+              !hovering && 'hidden',
+            )}
+            onClick={() => setShow(true)}
+          />
+        )}
       </td>
       <td className="h-10 pl-3 text-right align-middle w-[52px]">
         <Button variant="icon" onClick={() => setOpen(true)}>
@@ -264,13 +282,23 @@ function SecretRow(props: {
 function NewSecretForm(props: {
   setError: (message: string | null, clearAfter?: number | null) => void;
 }) {
+  useHotkeys(
+    'mod+enter',
+    () => {
+      onSubmit();
+    },
+    { enableOnFormTags: ['input'] },
+  );
+
   const revalidator = useRevalidator();
 
   const [name, setName] = useState('');
   const [value, setValue] = useState('');
 
-  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
+  async function onSubmit(e?: React.FormEvent<HTMLFormElement>) {
+    if (e) {
+      e.preventDefault();
+    }
 
     if (!isValidSecretName(name)) {
       props.setError(