Convert access token input in GH authentication form to a password field (#154)

Author: seladb

src/components/GitHubAuth/GitHubAuthForm.test.tsx

@@ -13,7 +13,7 @@ describe(GitHubAuthForm, () => {
 
     render(<GitHubAuthForm open={true} onClose={onClose} />);
 
-    const textBox = screen.getByRole("textbox") as HTMLInputElement;
+    const textBox = screen.getByTestId("access-token-input").firstChild as HTMLInputElement;
     const loginBtn = screen.getByRole("button", { name: "Login" });
     const closeBtn = screen.getByRole("button", { name: "Close" });
     const checkBox = screen.getByRole("checkbox");
@@ -121,4 +121,19 @@ describe(GitHubAuthForm, () => {
       expect(textBox.value).toBe("");
     });
   });
+
+  it("Show or hide access token", async () => {
+    const { textBox } = setup(true);
+    const showAccessTokenButton = screen.getByLabelText(/Access token hidden/i);
+
+    expect(textBox).toHaveAttribute("type", "password");
+
+    fireEvent.click(showAccessTokenButton);
+
+    expect(textBox).toHaveAttribute("type", "text");
+
+    fireEvent.click(showAccessTokenButton);
+
+    expect(textBox).toHaveAttribute("type", "password");
+  });
 });

src/components/GitHubAuth/GitHubAuthForm.tsx

@@ -7,12 +7,19 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
-  TextField,
+  FormControl,
+  FormHelperText,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput,
+  // TextField,
 } from "@mui/material";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import React from "react";
 import { StorageType, validateAndStoreAccessToken } from "../../utils/GitHubUtils";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
 
 enum TokenValidationStatus {
   Init = "init",
@@ -31,6 +38,7 @@ export default function GitHubAuthForm({ open, onClose }: GitHubAuthFormProps) {
     TokenValidationStatus.Init,
   );
   const [storageType, setStorageType] = React.useState<StorageType>(StorageType.SessionStorage);
+  const [showAccessToken, setShowAccessToken] = React.useState(false);
 
   const handleStorageTypeCheckChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
     setStorageType(event.target.checked ? StorageType.LocalStorage : StorageType.SessionStorage);
@@ -60,6 +68,8 @@ export default function GitHubAuthForm({ open, onClose }: GitHubAuthFormProps) {
       : "These credentials aren't stored in any server.";
   };
 
+  const handleClickShowAccessToken = () => setShowAccessToken((show) => !show);
+
   React.useEffect(() => {
     if (accessTokenValid === TokenValidationStatus.Valid) {
       handleClose();
@@ -98,21 +108,34 @@ export default function GitHubAuthForm({ open, onClose }: GitHubAuthFormProps) {
           </a>
           .
         </DialogContentText>
-        <TextField
-          autoFocus
-          margin="dense"
-          id="name"
-          label="GitHub Access Token"
-          value={accessTokenValue || ""}
-          fullWidth
-          variant="standard"
-          required
-          error={accessTokenValid === TokenValidationStatus.Invalid}
-          helperText={textFieldHelperText()}
-          onChange={(e) => {
-            setAccessTokenValue(e.target.value);
-          }}
-        />
+        <FormControl sx={{ marginTop: 2 }} fullWidth required variant="outlined">
+          <InputLabel htmlFor="access-token-input">GitHub Access Token</InputLabel>
+          <OutlinedInput
+            autoFocus
+            margin="dense"
+            id="access-token-input"
+            data-testid="access-token-input"
+            label="GitHub Access Token"
+            type={showAccessToken ? "text" : "password"}
+            value={accessTokenValue || ""}
+            error={accessTokenValid === TokenValidationStatus.Invalid}
+            onChange={(e) => {
+              setAccessTokenValue(e.target.value);
+            }}
+            endAdornment={
+              <InputAdornment position="end">
+                <IconButton
+                  onClick={handleClickShowAccessToken}
+                  aria-label={showAccessToken ? "Access token shown" : "Access token hidden"}
+                  edge="end"
+                >
+                  {showAccessToken ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            }
+          />
+          <FormHelperText id="access-token-input">{textFieldHelperText()}</FormHelperText>
+        </FormControl>
         <FormControlLabel
           control={<Checkbox onChange={handleStorageTypeCheckChanged} />}
           label="Save access token in local storage"