feat: hide secrets by default (NangoHQ#553)

KShivendu · Apr 20, 2023 · 8d55bf8 · 8d55bf8
1 parent 45bee9a
commit 8d55bf8
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/packages/webapp/package-lock.json b/packages/webapp/package-lock.json
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -17,6 +17,7 @@
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
         "buffer": "^6.0.3",
+        "classnames": "^2.3.2",
         "env-cmd": "^10.1.0",
         "posthog-js": "^1.51.4",
         "react": "^18.2.0",

diff --git a/packages/webapp/src/components/ui/SecretInput.tsx b/packages/webapp/src/components/ui/SecretInput.tsx
@@ -0,0 +1,30 @@
+import { forwardRef, useCallback, useState } from 'react';
+import classNames from 'classnames';
+
+const SecretInput = forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(function PasswordField({ className, ...props }, ref) {
+    const [isSecretVisible, setIsSecretVisible] = useState(false);
+
+    const toggleSecretVisibility = useCallback(() => setIsSecretVisible(!isSecretVisible), [isSecretVisible, setIsSecretVisible]);
+
+    return (
+        <div className="relative">
+            <input
+                type={isSecretVisible ? 'text' : 'password'}
+                ref={ref}
+                className={classNames(
+                    'border-border-gray bg-bg-black text-text-light-gray focus:border-white focus:ring-white block h-11 w-full appearance-none rounded-md border px-3 py-2 text-base placeholder-gray-400 shadow-sm focus:outline-none',
+                    className
+                )}
+                {...props}
+            />
+            <label
+                className="absolute right-4 top-2 bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-gray-600 cursor-pointer"
+                onClick={toggleSecretVisibility}
+            >
+                {isSecretVisible ? 'hide' : 'show'}
+            </label>
+        </div>
+    );
+});
+
+export default SecretInput;
diff --git a/packages/webapp/src/pages/IntegrationCreate.tsx b/packages/webapp/src/pages/IntegrationCreate.tsx
@@ -16,6 +16,7 @@ import { HelpCircle } from '@geist-ui/icons';
 import { Tooltip } from '@geist-ui/core';
 import { defaultCallback } from '../utils/utils';
 import { Prism } from '@mantine/prism';
+import SecretInput from '../components/ui/SecretInput';
 
 interface Integration {
     uniqueKey: string;
@@ -304,13 +305,11 @@ export default function IntegrationCreate() {
                                             </Tooltip>
                                         </div>
                                         <div className="mt-1">
-                                            <input
+                                            <SecretInput
                                                 id="client_secret"
                                                 name="client_secret"
-                                                type="text"
                                                 defaultValue={integration ? integration.clientSecret : ''}
                                                 required
-                                                className="border-border-gray bg-bg-black text-text-light-gray focus:ring-white block h-11 w-full appearance-none rounded-md border px-3 py-2 text-base placeholder-gray-400 shadow-sm focus:border-white focus:outline-none"
                                             />
                                         </div>
                                     </div>