Add password visibility icon in login dialog

Add a visibilty button in the password field of login page to show/hide the password as required.
libregraph · Jul 16, 2024 · 5fabe20 · 5fabe20
1 parent 97c02fe
commit 5fabe20
Showing 1 changed file with 21 additions and 1 deletion.
diff --git a/identifier/src/containers/Login/Login.jsx b/identifier/src/containers/Login/Login.jsx
@@ -17,6 +17,10 @@ import DialogContent from '@material-ui/core/DialogContent';
 
 import { updateInput, executeLogonIfFormValid, advanceLogonFlow } from '../../actions/login';
 import { ErrorMessage } from '../../errors';
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment'
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
 
 const styles = theme => ({
   button: {
@@ -67,6 +71,8 @@ function Login(props) {
 
   const { t } = useTranslation();
 
+  const [showPassword, setShowPassword] = React.useState(false);
+
   useEffect(() => {
     if (hello && hello.state && history.action !== 'PUSH') {
       if (!query.prompt || query.prompt.indexOf('select_account') === -1) {
@@ -134,14 +140,28 @@ function Login(props) {
           className={classes.usernameInputField}
         />
         <TextField
-          type="password"
+          type={showPassword ? "text" : "password"}
           label={t("konnect.login.passwordField.label", "Password")}
           error={!!errors.password}
           helperText={<ErrorMessage error={errors.password}></ErrorMessage>}
           fullWidth
           onChange={handleChange('password')}
           autoComplete="kopano-account current-password"
           variant="outlined"
+          InputProps={{      // End-adornment icon to show/hide password on visibility button click.
+            endAdornment: <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={() => setShowPassword((show) => !show)}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                }}
+                edge="end"
+              >
+                {showPassword ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </InputAdornment>
+          }}
         />
         <DialogActions>
           <div className={classes.wrapper}>