diff --git a/src/components/PasswordPrompt/PasswordPrompt.tsx b/src/components/PasswordPrompt/PasswordPrompt.tsx index 9d923fdf2..2f064b56f 100644 --- a/src/components/PasswordPrompt/PasswordPrompt.tsx +++ b/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) => { setPassword(e.target.value) } @@ -42,6 +53,8 @@ export const PasswordPrompt = ({ navigate(-1) } + const passwordToggleLabel = showPassword ? 'Hide password' : 'Show password' + return (
@@ -53,7 +66,7 @@ export const PasswordPrompt = ({ impossible to know if the password you enter will match the password entered by other peers. - + If there is a mismatch, you will be in the room but be unable to connect to others. An error will not be shown. @@ -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: ( + + + + {showPassword ? : } + + + + ), + }} />