From 5fabe2037773375f50c1b630fd605cb63ca8adb2 Mon Sep 17 00:00:00 2001
From: "soujanna.dutta" <soujanna2015newera@gmail.com>
Date: Tue, 16 Jul 2024 15:51:14 +0530
Subject: [PATCH] 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.
---
 identifier/src/containers/Login/Login.jsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/identifier/src/containers/Login/Login.jsx b/identifier/src/containers/Login/Login.jsx
index abc5888..9012577 100644
--- 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,7 +140,7 @@ 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>}
@@ -142,6 +148,20 @@ function Login(props) {
           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}>