From 5be76b1e5fcba4c3698a86822cac8a4e50ea8d78 Mon Sep 17 00:00:00 2001
From: Robert A Dixon <robmsc24@gmail.com>
Date: Mon, 11 Aug 2025 06:41:00 -0400
Subject: [PATCH] Fix email and password icon positioning to remain static with
 validation errors

---
 src/components/Auth/SignIn.js |  65 +++++++++---------
 src/components/Auth/SignUp.js | 120 ++++++++++++++++------------------
 src/styles/auth.css           |  68 ++++++++-----------
 3 files changed, 119 insertions(+), 134 deletions(-)

diff --git a/src/components/Auth/SignIn.js b/src/components/Auth/SignIn.js
index 3ce73b9..aa37044 100644
--- a/src/components/Auth/SignIn.js
+++ b/src/components/Auth/SignIn.js
@@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom';
 import "../../styles/auth.css";
 
 const isStrongPassword = (password) => {
-  // At least one lowercase, uppercase, digit, symbol, min 8 char
   const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s]).{8,}$/;
   return regex.test(password);
 };
@@ -35,7 +34,7 @@ const SignIn = ({ onAuthSuccess }) => {
 
     if (!formData.password) newErrors.password = 'Password is required';
     else if (!isStrongPassword(formData.password)) {
-      newErrors.password = 
+      newErrors.password =
         'Password must be at least 8 characters, include uppercase, lowercase, number, and symbol.';
     }
 
@@ -81,39 +80,39 @@ const SignIn = ({ onAuthSuccess }) => {
                 required
               />
               <Mail className="email-icon-right" />
-              {errors.email && (
-                <p className="mt-1 text-sm text-red-600">{errors.email}</p>
-              )}
+              <p className="error-message">{errors.email || ""}</p>
             </div>
 
-            {/* PASSWORD INPUT */}
+            {/* PASSWORD INPUT (wrapped to keep icon anchored) */}
             <div className="password-input-container">
-              <input
-                id="signin-password"
-                name="password"
-                type={showPassword ? "text" : "password"}
-                value={formData.password}
-                onChange={handleInputChange}
-                placeholder="Password"
-                className="login-password"
-                required
-              />
-              <span
-                className="password-icon"
-                onClick={() => setShowPassword(!showPassword)}
-                role="button"
-                aria-label="Toggle password visibility"
-                tabIndex={0}
-                onKeyDown={(e) =>
-                  e.key === 'Enter' && setShowPassword(!showPassword)
-                }
-                data-testid="password-toggle"
-              >
-                {showPassword ? <FaEyeSlash size={18} /> : <FaEye size={18} />}
-              </span>
-              {errors.password && (
-                <p className="mt-1 text-sm text-red-600">{errors.password}</p>
-              )}
+              <div className="password-field-wrapper">
+                <input
+                  id="signin-password"
+                  name="password"
+                  type={showPassword ? "text" : "password"}
+                  value={formData.password}
+                  onChange={handleInputChange}
+                  placeholder="Password"
+                  className="login-password"
+                  required
+                />
+                <span
+                  className="password-icon"
+                  onClick={() => setShowPassword(!showPassword)}
+                  role="button"
+                  aria-label="Toggle password visibility"
+                  tabIndex={0}
+                  onKeyDown={(e) =>
+                    e.key === 'Enter' && setShowPassword(!showPassword)
+                  }
+                  data-testid="password-toggle"
+                >
+                  {showPassword ? <FaEyeSlash size={18} /> : <FaEye size={18} />}
+                </span>
+              </div>
+
+              {/* Error message placed outside the inner wrapper so it won't change wrapper height */}
+              <p className="error-message">{errors.password || ""}</p>
             </div>
 
             <button
@@ -151,4 +150,4 @@ const SignIn = ({ onAuthSuccess }) => {
   );
 };
 
-export default SignIn;
\ No newline at end of file
+export default SignIn;
diff --git a/src/components/Auth/SignUp.js b/src/components/Auth/SignUp.js
index 57849e7..9107036 100644
--- a/src/components/Auth/SignUp.js
+++ b/src/components/Auth/SignUp.js
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { FaEye, FaEyeSlash } from 'react-icons/fa';
-import { Mail } from 'lucide-react'; // Retained as per your provided code
+import { Mail } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import "../../styles/auth.css";
 
 const isStrongPassword = (password) => {
-  // At least one lowercase, uppercase, digit, symbol, min 8 char
   const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s]).{8,}$/;
   return regex.test(password);
 };
@@ -96,9 +95,7 @@ const SignUp = ({ onAuthSuccess }) => {
                 className="login-email"
                 required
               />
-              {errors.name && (
-                <p className="mt-1 text-sm text-red-600">{errors.name}</p>
-              )}
+              <p className="error-message">{errors.name || ""}</p>
             </div>
 
             {/* EMAIL INPUT */}
@@ -114,71 +111,69 @@ const SignUp = ({ onAuthSuccess }) => {
                 required
               />
               <Mail className="email-icon-right" />
-              {errors.email && (
-                <p className="mt-1 text-sm text-red-600">{errors.email}</p>
-              )}
+              <p className="error-message">{errors.email || ""}</p>
             </div>
 
             {/* PASSWORD INPUT */}
             <div className="password-input-container">
-              <input
-                id="signup-password"
-                name="password"
-                type={showPassword ? "text" : "password"}
-                value={formData.password}
-                onChange={handleInputChange}
-                placeholder="Password"
-                className="login-password"
-                required
-              />
-              <span
-                className="password-icon"
-                onClick={() => setShowPassword(!showPassword)}
-                role="button"
-                aria-label="Toggle password visibility"
-                tabIndex={0}
-                onKeyDown={(e) => { // Changed to explicit if statement
-                  if (e.key === 'Enter') {
-                    setShowPassword(!showPassword);
-                  }
-                }}
-              >
-                {showPassword ? <FaEyeSlash size={18} /> : <FaEye size={18} />}
-              </span>
-              {errors.password && (
-                <p className="mt-1 text-sm text-red-600">{errors.password}</p>
-              )}
+              <div className="password-field-wrapper">
+                <input
+                  id="signup-password"
+                  name="password"
+                  type={showPassword ? "text" : "password"}
+                  value={formData.password}
+                  onChange={handleInputChange}
+                  placeholder="Password"
+                  className="login-password"
+                  required
+                />
+                <span
+                  className="password-icon"
+                  onClick={() => setShowPassword(!showPassword)}
+                  role="button"
+                  aria-label="Toggle password visibility"
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      setShowPassword(!showPassword);
+                    }
+                  }}
+                >
+                  {showPassword ? <FaEyeSlash size={18} /> : <FaEye size={18} />}
+                </span>
+              </div>
+              <p className="error-message">{errors.password || ""}</p>
             </div>
 
             {/* CONFIRM PASSWORD INPUT */}
             <div className="password-input-container">
-              <input
-                id="signup-confirm-password"
-                name="confirmPassword"
-                type={showConfirmPassword ? "text" : "password"}
-                value={formData.confirmPassword}
-                onChange={handleInputChange}
-                placeholder="Confirm Password"
-                className="login-password"
-                required
-              />
-              <span
-                className="password-icon"
-                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                role="button"
-                aria-label="Toggle confirm password visibility"
-                tabIndex={0}
-                onKeyDown={(e) => { // Changed to explicit if statement (Line 190 in original)
-                  if (e.key === 'Enter') {
-                    setShowConfirmPassword(!showConfirmPassword);
-                  }
-                }}
-              >
-                {showConfirmPassword ? <FaEyeSlash size={18} /> : <FaEye size={18} />}
-              </span>
-              {errors.confirmPassword && (
-                <p className="mt-1 text-sm text-red-600">{errors.confirmPassword}</p>
-              )}
+              <div className="password-field-wrapper">
+                <input
+                  id="signup-confirm-password"
+                  name="confirmPassword"
+                  type={showConfirmPassword ? "text" : "password"}
+                  value={formData.confirmPassword}
+                  onChange={handleInputChange}
+                  placeholder="Confirm Password"
+                  className="login-password"
+                  required
+                />
+                <span
+                  className="password-icon"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  role="button"
+                  aria-label="Toggle confirm password visibility"
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      setShowConfirmPassword(!showConfirmPassword);
+                    }
+                  }}
+                >
+                  {showConfirmPassword ? <FaEyeSlash size={18} /> : <FaEye size={18} />}
+                </span>
+              </div>
+              <p className="error-message">{errors.confirmPassword || ""}</p>
             </div>
 
             <button
@@ -210,3 +205,4 @@ const SignUp = ({ onAuthSuccess }) => {
 
 export default SignUp;
 
+
diff --git a/src/styles/auth.css b/src/styles/auth.css
index 1b3bb07..bbfb648 100644
--- a/src/styles/auth.css
+++ b/src/styles/auth.css
@@ -65,41 +65,53 @@
   width: 100%;
 }
 
-/* Right-aligned mail icon inside email input */
+/* Inner wrapper for email input + icon */
+.email-field-wrapper {
+  position: relative;
+  width: 100%;
+}
+
 .email-icon-right {
   position: absolute;
   top: 50%;
   right: 0.75rem;
-  transform: translateY(-90%);
+  transform: translateY(-155%);
   height: 18px;
   width: 18px;
   color: #888;
   pointer-events: none;
 }
 
-/* Input adjusted to leave space for right-side icon */
 .login-email {
   padding-right: 2.5rem;
 }
 
-/* Container for password input and icon */
+/* Password input container — stays aligned even with error messages */
 .password-input-container {
   position: relative;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-/* Password input with right padding */
+/* Password input with space for icon */
 .login-password {
   padding-right: 3rem;
 }
 
-/* --- Inserted snippet here --- */
-/* Small icon inside password input (like email icon) */
+.password-field-wrapper {
+  position: relative;
+  width: 100%;
+  /* ensure height equals the input's height so top:50% is stable */
+  display: block;
+}
+
+/* Visibility toggle icon — always vertically centered */
 .password-icon {
   position: absolute;
   top: 50%;
   right: 0.75rem;
-  transform: translateY(-90%);
+  transform: translateY(-85%);
   color: #888;
   cursor: pointer;
   height: 18px;
@@ -107,37 +119,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 2;
 }
 
 .password-icon:hover {
   color: #1e293b;
 }
-/* --- end snippet --- */
 
-/* Password toggle icon button (if used anywhere) */
-.password-toggle-icon-button {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-70%);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: #64748b;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.125rem;
-}
-
-.password-toggle-icon-button:hover {
-  color: #1e293b;
-}
-
-.password-toggle-icon-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
+/* Error message with fixed height so it doesn't push the icon */
+.error-message {
+  min-height: 20px;
+  margin-top: 6px;
+  font-size: 0.85rem;
+  color: red;
 }
 
 /* Submit button */
@@ -196,8 +190,6 @@
   text-decoration: underline;
 }
 
-/* Responsive Design */
-
 /* Mobile (≤480px) */
 @media (max-width: 480px) {
   .auth-card {
@@ -216,12 +208,9 @@
     padding: 0.6rem 0.8rem;
     font-size: 0.9rem;
   }
-  .password-input-container .login-password {
+  .login-password {
     padding-right: 2.25rem;
   }
-  .password-toggle-icon-button {
-    right: 0.6rem;
-  }
   .auth-submit-button {
     font-size: 1rem;
     padding: 0.6rem 1rem;
@@ -247,3 +236,4 @@
 
 
 
+