From 6687fbcde0e00c7f110b19138f4dd881315afdc2 Mon Sep 17 00:00:00 2001
From: YeiserGS <yeisergps@gmail.com>
Date: Mon, 12 Dec 2022 19:58:18 -0500
Subject: [PATCH 1/4] add icons and login

---
 modern/src/login/LoginPage.js | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index e35ca2324b..c4c757413c 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -9,6 +9,8 @@ import LockOpenIcon from '@mui/icons-material/LockOpen';
 import { useTheme } from '@mui/material/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
 import { sessionActions } from '../store';
 import { useLocalization, useTranslation } from '../common/components/LocalizationProvider';
 import LoginLayout from './LoginLayout';
@@ -49,6 +51,8 @@ const LoginPage = () => {
   const theme = useTheme();
   const t = useTranslation();
 
+  const [showPassword, setShowPassword] = useState(false);
+
   const { languages, language, setLanguage } = useLocalization();
   const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name }));
 
@@ -57,6 +61,10 @@ const LoginPage = () => {
   const [email, setEmail] = usePersistedState('loginEmail', '');
   const [password, setPassword] = useState('');
 
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   const registrationEnabled = useSelector((state) => state.session.server.registration);
   const languageEnabled = useSelector((state) => !state.session.server.attributes['ui.disableLoginLanguage']);
   const emailEnabled = useSelector((state) => state.session.server.emailEnabled);
@@ -153,6 +161,13 @@ const LoginPage = () => {
           onChange={(e) => setEmail(e.target.value)}
           onKeyUp={handleSpecialKey}
           helperText={failed && 'Invalid username or password'}
+          InputProps={{
+            endAdornment: (
+              <IconButton>
+                <MailOutlineIcon />
+              </IconButton>
+            ),
+          }}
         />
         <TextField
           required
@@ -160,11 +175,18 @@ const LoginPage = () => {
           label={t('userPassword')}
           name="password"
           value={password}
-          type="password"
+          type={showPassword ? 'text' : 'password'}
           autoComplete="current-password"
           autoFocus={!!email}
           onChange={(e) => setPassword(e.target.value)}
           onKeyUp={handleSpecialKey}
+          InputProps={{
+            endAdornment: (
+              <IconButton onClick={handleClickShowPassword}>
+                <VisibilityOffIcon />
+              </IconButton>
+            ),
+          }}
         />
         <Button
           onClick={handlePasswordLogin}

From 36aad002c7fd89e5f071206b09bee6ed000d56fc Mon Sep 17 00:00:00 2001
From: YeiserGS <yeisergps@gmail.com>
Date: Mon, 12 Dec 2022 21:51:11 -0500
Subject: [PATCH 2/4] add icons and register

---
 modern/src/login/RegisterPage.js | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index 08ff3e8f59..a521694819 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -4,6 +4,9 @@ import {
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { useNavigate } from 'react-router-dom';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
+import PersonIcon from '@mui/icons-material/Person';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import LoginLayout from './LoginLayout';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -38,6 +41,12 @@ const RegisterPage = () => {
   const [password, setPassword] = useState('');
   const [snackbarOpen, setSnackbarOpen] = useState(false);
 
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   const handleSubmit = useCatch(async () => {
     const response = await fetch('/api/users', {
       method: 'POST',
@@ -70,6 +79,13 @@ const RegisterPage = () => {
           autoComplete="name"
           autoFocus
           onChange={(event) => setName(event.target.value)}
+          InputProps={{
+            endAdornment: (
+              <IconButton>
+                <PersonIcon />
+              </IconButton>
+            ),
+          }}
         />
         <TextField
           required
@@ -79,15 +95,29 @@ const RegisterPage = () => {
           value={email}
           autoComplete="email"
           onChange={(event) => setEmail(event.target.value)}
+          InputProps={{
+            endAdornment: (
+              <IconButton>
+                <MailOutlineIcon />
+              </IconButton>
+            ),
+          }}
         />
         <TextField
           required
           label={t('userPassword')}
           name="password"
           value={password}
-          type="password"
+          type={showPassword ? 'text' : 'password'}
           autoComplete="current-password"
           onChange={(event) => setPassword(event.target.value)}
+          InputProps={{
+            endAdornment: (
+              <IconButton onClick={handleClickShowPassword}>
+                <VisibilityOffIcon />
+              </IconButton>
+            ),
+          }}
         />
         <Button
           variant="contained"

From 67845b030a5e5710fa89dffb51487c75567620ae Mon Sep 17 00:00:00 2001
From: YeiserGS <yeisergps@gmail.com>
Date: Wed, 14 Dec 2022 20:52:45 -0500
Subject: [PATCH 3/4] restaurar

---
 modern/src/login/LoginPage.js    | 24 +-----------------------
 modern/src/login/RegisterPage.js | 32 +-------------------------------
 2 files changed, 2 insertions(+), 54 deletions(-)

diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index c4c757413c..e35ca2324b 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -9,8 +9,6 @@ import LockOpenIcon from '@mui/icons-material/LockOpen';
 import { useTheme } from '@mui/material/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import MailOutlineIcon from '@mui/icons-material/MailOutline';
 import { sessionActions } from '../store';
 import { useLocalization, useTranslation } from '../common/components/LocalizationProvider';
 import LoginLayout from './LoginLayout';
@@ -51,8 +49,6 @@ const LoginPage = () => {
   const theme = useTheme();
   const t = useTranslation();
 
-  const [showPassword, setShowPassword] = useState(false);
-
   const { languages, language, setLanguage } = useLocalization();
   const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name }));
 
@@ -61,10 +57,6 @@ const LoginPage = () => {
   const [email, setEmail] = usePersistedState('loginEmail', '');
   const [password, setPassword] = useState('');
 
-  const handleClickShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
   const registrationEnabled = useSelector((state) => state.session.server.registration);
   const languageEnabled = useSelector((state) => !state.session.server.attributes['ui.disableLoginLanguage']);
   const emailEnabled = useSelector((state) => state.session.server.emailEnabled);
@@ -161,13 +153,6 @@ const LoginPage = () => {
           onChange={(e) => setEmail(e.target.value)}
           onKeyUp={handleSpecialKey}
           helperText={failed && 'Invalid username or password'}
-          InputProps={{
-            endAdornment: (
-              <IconButton>
-                <MailOutlineIcon />
-              </IconButton>
-            ),
-          }}
         />
         <TextField
           required
@@ -175,18 +160,11 @@ const LoginPage = () => {
           label={t('userPassword')}
           name="password"
           value={password}
-          type={showPassword ? 'text' : 'password'}
+          type="password"
           autoComplete="current-password"
           autoFocus={!!email}
           onChange={(e) => setPassword(e.target.value)}
           onKeyUp={handleSpecialKey}
-          InputProps={{
-            endAdornment: (
-              <IconButton onClick={handleClickShowPassword}>
-                <VisibilityOffIcon />
-              </IconButton>
-            ),
-          }}
         />
         <Button
           onClick={handlePasswordLogin}
diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index a521694819..08ff3e8f59 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -4,9 +4,6 @@ import {
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { useNavigate } from 'react-router-dom';
-import MailOutlineIcon from '@mui/icons-material/MailOutline';
-import PersonIcon from '@mui/icons-material/Person';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import LoginLayout from './LoginLayout';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -41,12 +38,6 @@ const RegisterPage = () => {
   const [password, setPassword] = useState('');
   const [snackbarOpen, setSnackbarOpen] = useState(false);
 
-  const [showPassword, setShowPassword] = useState(false);
-
-  const handleClickShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
   const handleSubmit = useCatch(async () => {
     const response = await fetch('/api/users', {
       method: 'POST',
@@ -79,13 +70,6 @@ const RegisterPage = () => {
           autoComplete="name"
           autoFocus
           onChange={(event) => setName(event.target.value)}
-          InputProps={{
-            endAdornment: (
-              <IconButton>
-                <PersonIcon />
-              </IconButton>
-            ),
-          }}
         />
         <TextField
           required
@@ -95,29 +79,15 @@ const RegisterPage = () => {
           value={email}
           autoComplete="email"
           onChange={(event) => setEmail(event.target.value)}
-          InputProps={{
-            endAdornment: (
-              <IconButton>
-                <MailOutlineIcon />
-              </IconButton>
-            ),
-          }}
         />
         <TextField
           required
           label={t('userPassword')}
           name="password"
           value={password}
-          type={showPassword ? 'text' : 'password'}
+          type="password"
           autoComplete="current-password"
           onChange={(event) => setPassword(event.target.value)}
-          InputProps={{
-            endAdornment: (
-              <IconButton onClick={handleClickShowPassword}>
-                <VisibilityOffIcon />
-              </IconButton>
-            ),
-          }}
         />
         <Button
           variant="contained"

From 598d18826ef0e37a1c99d4d6e28a389d71e1cf6c Mon Sep 17 00:00:00 2001
From: YeiserGS <yeisergps@gmail.com>
Date: Wed, 14 Dec 2022 21:05:32 -0500
Subject: [PATCH 4/4] add icon only to password login and registration

---
 modern/src/login/LoginPage.js    | 15 ++++++++++++++-
 modern/src/login/RegisterPage.js | 13 +++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index e35ca2324b..c3a56fd461 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -6,6 +6,7 @@ import {
 import makeStyles from '@mui/styles/makeStyles';
 import CloseIcon from '@mui/icons-material/Close';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { useTheme } from '@mui/material/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
@@ -57,6 +58,11 @@ const LoginPage = () => {
   const [email, setEmail] = usePersistedState('loginEmail', '');
   const [password, setPassword] = useState('');
 
+  const [showPassword, setShowPassword] = useState(false);
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   const registrationEnabled = useSelector((state) => state.session.server.registration);
   const languageEnabled = useSelector((state) => !state.session.server.attributes['ui.disableLoginLanguage']);
   const emailEnabled = useSelector((state) => state.session.server.emailEnabled);
@@ -160,11 +166,18 @@ const LoginPage = () => {
           label={t('userPassword')}
           name="password"
           value={password}
-          type="password"
+          type={showPassword ? 'text' : 'password'}
           autoComplete="current-password"
           autoFocus={!!email}
           onChange={(e) => setPassword(e.target.value)}
           onKeyUp={handleSpecialKey}
+          InputProps={{
+            endAdornment: (
+              <IconButton onClick={handleClickShowPassword}>
+                <VisibilityOffIcon />
+              </IconButton>
+            ),
+          }}
         />
         <Button
           onClick={handlePasswordLogin}
diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index 08ff3e8f59..0fc9b8aed1 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -5,6 +5,7 @@ import {
 import makeStyles from '@mui/styles/makeStyles';
 import { useNavigate } from 'react-router-dom';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import LoginLayout from './LoginLayout';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import { snackBarDurationShortMs } from '../common/util/duration';
@@ -38,6 +39,11 @@ const RegisterPage = () => {
   const [password, setPassword] = useState('');
   const [snackbarOpen, setSnackbarOpen] = useState(false);
 
+  const [showPassword, setShowPassword] = useState(false);
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   const handleSubmit = useCatch(async () => {
     const response = await fetch('/api/users', {
       method: 'POST',
@@ -88,6 +94,13 @@ const RegisterPage = () => {
           type="password"
           autoComplete="current-password"
           onChange={(event) => setPassword(event.target.value)}
+          InputProps={{
+            endAdornment: (
+              <IconButton onClick={handleClickShowPassword}>
+                <VisibilityOffIcon />
+              </IconButton>
+            ),
+          }}
         />
         <Button
           variant="contained"