From 975c3ee22de0ab9e9b28695eefecc7ac43be5c8c Mon Sep 17 00:00:00 2001
From: Drew Skwiers-Koballa <drew.koballa@gmail.com>
Date: Fri, 16 Dec 2022 10:44:16 -0800
Subject: [PATCH 1/2] switch api key to password hidden field

---
 client/.gitignore  |  1 +
 client/src/App.tsx | 48 ++++++++++++++++++++++++++++++++++------------
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/client/.gitignore b/client/.gitignore
index 4d29575..800f3a8 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 57285da..472fdc1 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -2,6 +2,10 @@ import {
   Stack,
   FormControl,
   TextField,
+  Input,
+  InputLabel,
+  InputAdornment,
+  IconButton,
   Button,
   MenuItem,
   Typography,
@@ -10,7 +14,9 @@ import {
   debounce,
   Box,
   LinearProgress,
+  FormHelperText,
 } from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
 import React, { useEffect, useState } from "react";
 import { createDockerDesktopClient } from "@docker/extension-api-client";
 import { Header } from "./Header";
@@ -28,6 +34,12 @@ function App() {
     useApiContext();
   const [apikeyError, setApikeyError] = useState(null);
 
+  const [showPassword, setShowPassword] = React.useState(false);
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
   // sample API key: PMAK-6245dae283d9d36ec467cb18-d5a238ce70ed8161d502b30f1db056847b
 
   async function runCommand(collectionID, environmentID, apiKey) {
@@ -199,18 +211,30 @@ function App() {
           ) : null}
           {!apiKeyInContext || !postmanInfo ? (
             <>
-              <TextField
-                id="apikey-input"
-                label={["Postman API key"]}
-                placeholder="e.g. PMAK-xxx-xxxx-xxxx-xxxx"
-                error={!!apikeyError}
-                helperText={apikeyError ? apikeyError : ""}
-                onChange={(e) => {
-                  validateApikeyError(e.target.value);
-                }}
-                focused
-                fullWidth
-              />
+              <FormControl fullWidth focused sx={{ marginY: 2 }}>
+                <InputLabel htmlFor="apikey-input">Postman API key</InputLabel>
+                <Input
+                  id="apikey-input"
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="e.g. PMAK-xxx-xxxx-xxxx-xxxx"
+                  error={!!apikeyError}
+                  onChange={(e) => {
+                    validateApikeyError(e.target.value);
+                  }}
+                  endAdornment={
+                    <InputAdornment position="end">
+                      <IconButton
+                        aria-label="toggle password visibility"
+                        onClick={handleClickShowPassword}
+                        onMouseDown={handleMouseDownPassword}
+                      >
+                        {showPassword ? <VisibilityOff /> : <Visibility />}
+                      </IconButton>
+                    </InputAdornment>
+                  }
+                />
+              <FormHelperText>{apikeyError ? apikeyError : ""}</FormHelperText>
+            </FormControl>
               <Alert severity="info" sx={{ marginY: 2 }}>
                 Find your Postman API key in{" "}
                 <Link

From bcfd83c49e9f84840fd2e6b90f0a97d6d9ecb321 Mon Sep 17 00:00:00 2001
From: Drew Skwiers-Koballa <drew.koballa@gmail.com>
Date: Fri, 16 Dec 2022 10:55:32 -0800
Subject: [PATCH 2/2] correcting input styling

---
 client/src/App.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 472fdc1..c1fafd6 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -2,7 +2,7 @@ import {
   Stack,
   FormControl,
   TextField,
-  Input,
+  OutlinedInput,
   InputLabel,
   InputAdornment,
   IconButton,
@@ -213,7 +213,7 @@ function App() {
             <>
               <FormControl fullWidth focused sx={{ marginY: 2 }}>
                 <InputLabel htmlFor="apikey-input">Postman API key</InputLabel>
-                <Input
+                <OutlinedInput
                   id="apikey-input"
                   type={showPassword ? 'text' : 'password'}
                   placeholder="e.g. PMAK-xxx-xxxx-xxxx-xxxx"
@@ -221,6 +221,7 @@ function App() {
                   onChange={(e) => {
                     validateApikeyError(e.target.value);
                   }}
+                  label="Postman API key"
                   endAdornment={
                     <InputAdornment position="end">
                       <IconButton