From 187ffd8903fec014e8be2336e85d17845350eb91 Mon Sep 17 00:00:00 2001
From: shujulin <shuj_lin@yahoo.com>
Date: Mon, 24 Jun 2024 22:47:35 -0400
Subject: [PATCH] fix signup & login input width

---
 client/modules/User/components/LoginForm.jsx  | 40 +++++-----
 client/modules/User/components/SignupForm.jsx | 80 ++++++++++---------
 client/styles/components/_forms.scss          | 14 ++--
 3 files changed, 72 insertions(+), 62 deletions(-)

diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index 8efcfa22c7..ac6664cb83 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -55,25 +55,27 @@ function LoginForm() {
                   <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')}
-                    type={showPassword ? 'text' : 'password'}
-                    id="password"
-                    autoComplete="current-password"
-                    {...field.input}
-                  />
+                  <div className="form__field__password">
+                    <button
+                      className="form__eye__icon"
+                      type="button"
+                      onClick={handleVisibility}
+                    >
+                      {showPassword ? (
+                        <AiOutlineEyeInvisible />
+                      ) : (
+                        <AiOutlineEye />
+                      )}
+                    </button>
+                    <input
+                      className="form__input"
+                      aria-label={t('LoginForm.PasswordARIA')}
+                      type={showPassword ? 'text' : 'password'}
+                      id="password"
+                      autoComplete="current-password"
+                      {...field.input}
+                    />
+                  </div>
                   {field.meta.touched && field.meta.error && (
                     <span className="form-error">{field.meta.error}</span>
                   )}
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index ab780f1717..6201f66295 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -109,25 +109,27 @@ function SignupForm() {
                   <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')}
-                    type={showPassword ? 'text' : 'password'}
-                    id="password"
-                    autoComplete="new-password"
-                    {...field.input}
-                  />
+                  <div className="form__field__password">
+                    <button
+                      className="form__eye__icon"
+                      type="button"
+                      onClick={handleVisibility}
+                    >
+                      {showPassword ? (
+                        <AiOutlineEyeInvisible />
+                      ) : (
+                        <AiOutlineEye />
+                      )}
+                    </button>
+                    <input
+                      className="form__input"
+                      aria-label={t('SignupForm.PasswordARIA')}
+                      type={showPassword ? 'text' : 'password'}
+                      id="password"
+                      autoComplete="new-password"
+                      {...field.input}
+                    />
+                  </div>
                   {field.meta.touched && field.meta.error && (
                     <span className="form-error">{field.meta.error}</span>
                   )}
@@ -142,25 +144,27 @@ function SignupForm() {
                   <label htmlFor="confirmPassword" className="form__label">
                     {t('SignupForm.ConfirmPassword')}
                   </label>
-                  <button
-                    className="form__eye__icon"
-                    type="button"
-                    onClick={handleConfirmVisibility}
-                  >
-                    {showConfirmPassword ? (
-                      <AiOutlineEyeInvisible />
-                    ) : (
-                      <AiOutlineEye />
-                    )}
-                  </button>
-                  <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}
-                  />
+                  <div className="form__field__password">
+                    <button
+                      className="form__eye__icon"
+                      type="button"
+                      onClick={handleConfirmVisibility}
+                    >
+                      {showConfirmPassword ? (
+                        <AiOutlineEyeInvisible />
+                      ) : (
+                        <AiOutlineEye />
+                      )}
+                    </button>
+                    <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}
+                    />
+                  </div>
                   {field.meta.touched && field.meta.error && (
                     <span className="form-error">{field.meta.error}</span>
                   )}
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index 0d9c80955c..d1237935cc 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -58,7 +58,7 @@
 }
 
 .form__input {
-  min-width: #{math.div(355, $base-font-size)}rem;
+  min-width: #{math.div(312, $base-font-size)}rem;
   width: 100%;
   height: #{math.div(40, $base-font-size)}rem;
   font-size: #{math.div(16, $base-font-size)}rem;
@@ -73,12 +73,16 @@
   }
 }
 
+.form__field__password {
+  position: relative;
+}
+
 .form__eye__icon {
   font-size: 28px;
-  position: relative;
-  top: 7px;
-  right: -355px;
-  margin-left: -40px;
+  position: absolute;
+  right: 0px;
+  top: 4px;
+  vertical-align: middle;
 }