feat(closes #274): add private room password visibility toggle

src/components/PasswordPrompt/PasswordPrompt.tsx

@@ -1,12 +1,18 @@
 import { ChangeEvent, useState, SyntheticEvent, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Button from '@mui/material/Button'
+import InputAdornment from '@mui/material/InputAdornment'
+import IconButton from '@mui/material/IconButton'
 import TextField from '@mui/material/TextField'
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
 import DialogTitle from '@mui/material/DialogTitle'
+import Tooltip from '@mui/material/Tooltip'
+import Visibility from '@mui/icons-material/Visibility'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
+
 import { QueryParamKeys } from 'models/shell'
 
 interface PasswordPromptProps {
@@ -19,6 +25,7 @@ export const PasswordPrompt = ({
   onPasswordEntered,
 }: PasswordPromptProps) => {
   const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
 
   const queryParams = useMemo(
     () => new URLSearchParams(window.location.search),
@@ -34,6 +41,10 @@ export const PasswordPrompt = ({
     onPasswordEntered(password)
   }
 
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword)
+  }
+
   const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
     setPassword(e.target.value)
   }
@@ -42,6 +53,8 @@ export const PasswordPrompt = ({
     navigate(-1)
   }
 
+  const passwordToggleLabel = showPassword ? 'Hide password' : 'Show password'
+
   return (
     <Dialog open={isOpen}>
       <form onSubmit={handleFormSubmit}>
@@ -53,7 +66,7 @@ export const PasswordPrompt = ({
             impossible to know if the password you enter will match the password
             entered by other peers.
           </DialogContentText>
-          <DialogContentText>
+          <DialogContentText sx={{ mb: 2 }}>
             If there is a mismatch, you will be in the room but be unable to
             connect to others. An error will not be shown.
           </DialogContentText>
@@ -62,11 +75,25 @@ export const PasswordPrompt = ({
             margin="dense"
             id="password"
             label="Password"
-            type="password"
+            type={showPassword ? 'text' : 'password'}
             fullWidth
-            variant="standard"
+            variant="outlined"
             value={password}
             onChange={handlePasswordChange}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Tooltip title={passwordToggleLabel}>
+                    <IconButton
+                      aria-label={passwordToggleLabel}
+                      onClick={handleClickShowPassword}
+                    >
+                      {showPassword ? <Visibility /> : <VisibilityOff />}
+                    </IconButton>
+                  </Tooltip>
+                </InputAdornment>
+              ),
+            }}
           />
         </DialogContent>
         <DialogActions>