From 3eb7c2ee9e8e34c7928f57fb4208a05b02f2ac1a Mon Sep 17 00:00:00 2001
From: Perminder Singh <permindersingh506@yahoo.com>
Date: Fri, 22 Sep 2023 05:23:20 +0530
Subject: [PATCH 1/6] Added eye icon

---
 client/modules/User/components/LoginForm.jsx  |  54 ++++++---
 client/modules/User/components/SignupForm.jsx | 109 ++++++++++++------
 package-lock.json                             |  15 +++
 package.json                                  |   1 +
 4 files changed, 129 insertions(+), 50 deletions(-)

diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index d990299322..2d8e756db9 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
+import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
 import Button from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
@@ -13,6 +14,10 @@ function LoginForm() {
   function onSubmit(formProps) {
     return dispatch(validateAndLoginUser(formProps));
   }
+  const [showPassword, setShowPassword] = useState(false);
+  const handleVisibility = () => {
+    setShowPassword(!showPassword);
+  };
 
   return (
     <Form
@@ -44,22 +49,37 @@ function LoginForm() {
           </Field>
           <Field name="password">
             {(field) => (
-              <p className="form__field">
-                <label htmlFor="password" className="form__label">
-                  {t('LoginForm.Password')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('LoginForm.PasswordARIA')}
-                  type="password"
-                  id="password"
-                  autoComplete="current-password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
+              <div style={{ position: 'relative' }}>
+                <p className="form__field">
+                  <label htmlFor="password" className="form__label">
+                    {t('LoginForm.Password')}
+                  </label>
+                  <input
+                    className="form__input"
+                    aria-label={t('LoginForm.PasswordARIA')}
+                    type={showPassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="current-password"
+                    {...field.input}
+                  />
+                  {field.meta.touched && field.meta.error && (
+                    <span className="form-error">{field.meta.error}</span>
+                  )}
+                </p>
+                <button
+                  type="button"
+                  onClick={handleVisibility}
+                  style={{
+                    fontSize: '25px',
+                    position: 'absolute',
+                    top: '38%',
+                    right: '2px',
+                    paddingTop: '4.5px'
+                  }}
+                >
+                  {showPassword ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}
+                </button>
+              </div>
             )}
           </Field>
           {submitError && !modifiedSinceLastSubmit && (
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index b80f53f107..8d7a398a5d 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import { React, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
+import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
 import { validateSignup } from '../../../utils/reduxFormUtils';
 import { validateAndSignUpUser } from '../actions';
 import Button from '../../../common/Button';
@@ -38,6 +39,14 @@ function SignupForm() {
   function onSubmit(formProps) {
     return dispatch(validateAndSignUpUser(formProps));
   }
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const handleVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+  const handleConfirmVisibility = () => {
+    setShowConfirmPassword(!showConfirmPassword);
+  };
 
   return (
     <Form
@@ -93,42 +102,76 @@ function SignupForm() {
           </Field>
           <Field name="password">
             {(field) => (
-              <p className="form__field">
-                <label htmlFor="password" className="form__label">
-                  {t('SignupForm.Password')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('SignupForm.PasswordARIA')}
-                  type="password"
-                  id="password"
-                  autoComplete="new-password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
+              <div style={{ position: 'relative' }}>
+                <p className="form__field">
+                  <label htmlFor="password" className="form__label">
+                    {t('SignupForm.Password')}
+                  </label>
+                  <input
+                    className="form__input"
+                    aria-label={t('SignupForm.PasswordARIA')}
+                    type={showPassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="new-password"
+                    {...field.input}
+                  />
+                  {field.meta.touched && field.meta.error && (
+                    <span className="form-error">{field.meta.error}</span>
+                  )}
+                </p>
+                <button
+                  type="button"
+                  onClick={handleVisibility}
+                  style={{
+                    fontSize: '25px',
+                    position: 'absolute',
+                    top: '38%',
+                    right: '1.5px',
+                    paddingTop: '4.5px'
+                  }}
+                >
+                  {showPassword ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}
+                </button>
+              </div>
             )}
           </Field>
           <Field name="confirmPassword">
             {(field) => (
-              <p className="form__field">
-                <label htmlFor="confirm password" className="form__label">
-                  {t('SignupForm.ConfirmPassword')}
-                </label>
-                <input
-                  className="form__input"
-                  type="password"
-                  aria-label={t('SignupForm.ConfirmPasswordARIA')}
-                  id="confirm password"
-                  autoComplete="new-password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
+              <div style={{ position: 'relative' }}>
+                <p className="form__field">
+                  <label htmlFor="confirmPassword" className="form__label">
+                    {t('SignupForm.ConfirmPassword')}
+                  </label>
+                  <input
+                    className="form__input"
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    aria-label={t('SignupForm.ConfirmPasswordARIA')}
+                    id="confirmPassword" // Match the id with htmlFor
+                    autoComplete="new-password"
+                    {...field.input}
+                  />
+                  {field.meta.touched && field.meta.error && (
+                    <span className="form-error">{field.meta.error}</span>
+                  )}
+                </p>
+                <button
+                  type="button"
+                  onClick={handleConfirmVisibility}
+                  style={{
+                    fontSize: '25px',
+                    position: 'absolute',
+                    top: '38%',
+                    right: '1.5px',
+                    paddingTop: '4px'
+                  }}
+                >
+                  {showConfirmPassword ? (
+                    <AiOutlineEyeInvisible />
+                  ) : (
+                    <AiOutlineEye />
+                  )}
+                </button>
+              </div>
             )}
           </Field>
           <Button type="submit" disabled={submitting || invalid || pristine}>
diff --git a/package-lock.json b/package-lock.json
index 7d314d654b..5e66905f43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,6 +83,7 @@
         "react-ga": "^3.3.0",
         "react-helmet": "^5.1.3",
         "react-i18next": "^11.11.3",
+        "react-icons": "^4.11.0",
         "react-markdown": "^6.0.3",
         "react-redux": "^7.2.4",
         "react-refresh": "^0.14.0",
@@ -38219,6 +38220,14 @@
         "react": ">= 16.8.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-inspector": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
@@ -71288,6 +71297,12 @@
         "html-parse-stringify": "^3.0.1"
       }
     },
+    "react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "requires": {}
+    },
     "react-inspector": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
diff --git a/package.json b/package.json
index 569631aef2..dfc41a4f50 100644
--- a/package.json
+++ b/package.json
@@ -228,6 +228,7 @@
     "react-ga": "^3.3.0",
     "react-helmet": "^5.1.3",
     "react-i18next": "^11.11.3",
+    "react-icons": "^4.11.0",
     "react-markdown": "^6.0.3",
     "react-redux": "^7.2.4",
     "react-refresh": "^0.14.0",

From 774c6c13dff5a510011f317f999b4fbdea9d4b68 Mon Sep 17 00:00:00 2001
From: perminder-17 <127239756+perminder-17@users.noreply.github.com>
Date: Fri, 27 Oct 2023 21:44:16 +0530
Subject: [PATCH 2/6] Update _forms.scss

---
 client/styles/components/_forms.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index d5eca026d8..2fcc83fc5b 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -66,6 +66,10 @@
   }
 }
 
+.form__input[type='password']::-ms-reveal {
+  display: none;
+}
+
 .form__input-flexible-height {
   height: auto;
 }

From 4392718fe00781ae105949109df6464ec17935d2 Mon Sep 17 00:00:00 2001
From: Perminder Singh <permindersingh506@yahoo.com>
Date: Thu, 6 Jun 2024 21:00:25 +0530
Subject: [PATCH 3/6] fixes

---
 client/modules/User/components/LoginForm.jsx  | 26 +++++----
 client/modules/User/components/SignupForm.jsx | 54 ++++++++-----------
 client/styles/components/_forms.scss          | 13 ++++-
 3 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index 2dc52ebefb..8efcfa22c7 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -50,11 +50,22 @@ function LoginForm() {
           </Field>
           <Field name="password">
             {(field) => (
-              <div style={{ position: 'relative' }}>
+              <div>
                 <p className="form__field">
                   <label htmlFor="password" className="form__label">
                     {t('LoginForm.Password')}
                   </label>
+                  <button
+                    className="form__eye__icon"
+                    type="button"
+                    onClick={handleVisibility}
+                  >
+                    {showPassword ? (
+                      <AiOutlineEyeInvisible />
+                    ) : (
+                      <AiOutlineEye />
+                    )}
+                  </button>
                   <input
                     className="form__input"
                     aria-label={t('LoginForm.PasswordARIA')}
@@ -67,19 +78,6 @@ function LoginForm() {
                     <span className="form-error">{field.meta.error}</span>
                   )}
                 </p>
-                <button
-                  type="button"
-                  onClick={handleVisibility}
-                  style={{
-                    fontSize: '25px',
-                    position: 'absolute',
-                    top: '38%',
-                    right: '2px',
-                    paddingTop: '4.5px'
-                  }}
-                >
-                  {showPassword ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}
-                </button>
               </div>
             )}
           </Field>
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index f915b21be1..cfe4ea40da 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -104,11 +104,22 @@ function SignupForm() {
           </Field>
           <Field name="password">
             {(field) => (
-              <div style={{ position: 'relative' }}>
+              <div>
                 <p className="form__field">
                   <label htmlFor="password" className="form__label">
                     {t('SignupForm.Password')}
                   </label>
+                  <button
+                    className="form__eye__icon"
+                    type="button"
+                    onClick={handleVisibility}
+                  >
+                    {showPassword ? (
+                      <AiOutlineEyeInvisible />
+                    ) : (
+                      <AiOutlineEye />
+                    )}
+                  </button>
                   <input
                     className="form__input"
                     aria-label={t('SignupForm.PasswordARIA')}
@@ -121,19 +132,6 @@ function SignupForm() {
                     <span className="form-error">{field.meta.error}</span>
                   )}
                 </p>
-                <button
-                  type="button"
-                  onClick={handleVisibility}
-                  style={{
-                    fontSize: '25px',
-                    position: 'absolute',
-                    top: '38%',
-                    right: '1.5px',
-                    paddingTop: '4.5px'
-                  }}
-                >
-                  {showPassword ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}
-                </button>
               </div>
             )}
           </Field>
@@ -144,6 +142,17 @@ function SignupForm() {
                   <label htmlFor="confirmPassword" className="form__label">
                     {t('SignupForm.ConfirmPassword')}
                   </label>
+                  <button
+                    className="form__eye__icon"
+                    type="button"
+                    onClick={handleVisibility}
+                  >
+                    {showPassword ? (
+                      <AiOutlineEyeInvisible />
+                    ) : (
+                      <AiOutlineEye />
+                    )}
+                  </button>
                   <input
                     className="form__input"
                     type={showConfirmPassword ? 'text' : 'password'}
@@ -156,23 +165,6 @@ function SignupForm() {
                     <span className="form-error">{field.meta.error}</span>
                   )}
                 </p>
-                <button
-                  type="button"
-                  onClick={handleConfirmVisibility}
-                  style={{
-                    fontSize: '25px',
-                    position: 'absolute',
-                    top: '38%',
-                    right: '1.5px',
-                    paddingTop: '4px'
-                  }}
-                >
-                  {showConfirmPassword ? (
-                    <AiOutlineEyeInvisible />
-                  ) : (
-                    <AiOutlineEye />
-                  )}
-                </button>
               </div>
             )}
           </Field>
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index 4e92e8fb34..ab0466e6a7 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -66,13 +66,22 @@
     color: getThemifyVariable("form-input-text-color");
     background-color: getThemifyVariable("input-background-color");
   }
-
+  
   @media (max-width: 770px) {
     max-width: 100%;
-    width:100%;
+    width: 100%;
   }
 }
 
+.form__eye__icon {
+  font-size: 28px;
+  position: relative;
+  top: 5px;
+  right: -355px;
+  margin-left: -40px;
+}
+
+
 .form__input[type='password']::-ms-reveal {
   display: none;
 }

From aa979aae889c6e4f38e9cd6b25746148c5059492 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Fri, 7 Jun 2024 03:09:09 +0530
Subject: [PATCH 4/6] fixes

---
 client/modules/User/components/SignupForm.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index cfe4ea40da..61ce2e22f5 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -145,9 +145,9 @@ function SignupForm() {
                   <button
                     className="form__eye__icon"
                     type="button"
-                    onClick={handleVisibility}
+                    onClick={handleConfirmVisibility}
                   >
-                    {showPassword ? (
+                    {showConfirmPassword ? (
                       <AiOutlineEyeInvisible />
                     ) : (
                       <AiOutlineEye />

From a8bcedcd972ab09fc97b9b1b21f09dd7bde19278 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Fri, 7 Jun 2024 05:21:13 +0530
Subject: [PATCH 5/6] fixes

---
 client/modules/User/components/SignupForm.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index 61ce2e22f5..6e967c5c4a 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -137,7 +137,7 @@ function SignupForm() {
           </Field>
           <Field name="confirmPassword">
             {(field) => (
-              <div style={{ position: 'relative' }}>
+              <div>
                 <p className="form__field">
                   <label htmlFor="confirmPassword" className="form__label">
                     {t('SignupForm.ConfirmPassword')}

From 64f30449d07f66820c4a3a5c497b03b1eeee57b6 Mon Sep 17 00:00:00 2001
From: raclim <raclim@nyu.edu>
Date: Tue, 11 Jun 2024 16:28:24 -0400
Subject: [PATCH 6/6] adjust top for form icon scss

---
 client/styles/components/_forms.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index 83c91f17a0..0d9c80955c 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -76,7 +76,7 @@
 .form__eye__icon {
   font-size: 28px;
   position: relative;
-  top: 5px;
+  top: 7px;
   right: -355px;
   margin-left: -40px;
 }