From 4ccf8409b4d9206d2a1575d56e629fc237412f49 Mon Sep 17 00:00:00 2001
From: MVarshini <varm@redhat.com>
Date: Wed, 8 Mar 2023 18:52:51 +0530
Subject: [PATCH] PBENCH-1096 Sign-up page Bugs on Signup page

---
 .../components/AuthComponent/LoginForm.jsx    |  4 +++
 .../components/AuthComponent/SignupForm.jsx   | 10 ++++----
 .../components/AuthComponent/index.less       | 25 +++++++++++--------
 .../AuthComponent/signupFormData.js           |  5 ++--
 4 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/dashboard/src/modules/components/AuthComponent/LoginForm.jsx b/dashboard/src/modules/components/AuthComponent/LoginForm.jsx
index 177600a7a0..932ffccc97 100644
--- a/dashboard/src/modules/components/AuthComponent/LoginForm.jsx
+++ b/dashboard/src/modules/components/AuthComponent/LoginForm.jsx
@@ -153,6 +153,10 @@ const LoginForm = () => {
           </Button>
         </div>
         <NoLoginComponent />
+        <div className="orText text-center">-or-</div>
+        <div className="text-center">
+          <Button variant="link">Sign up</Button>
+        </div>
       </CardFooter>
     </Card>
   );
diff --git a/dashboard/src/modules/components/AuthComponent/SignupForm.jsx b/dashboard/src/modules/components/AuthComponent/SignupForm.jsx
index 8ce71859e5..4cbf0333d1 100644
--- a/dashboard/src/modules/components/AuthComponent/SignupForm.jsx
+++ b/dashboard/src/modules/components/AuthComponent/SignupForm.jsx
@@ -100,7 +100,7 @@ const SignupForm = () => {
   }, [validateForm, userDetails, dispatch, endpoints]);
 
   const checkPasswordError = (password, cnfPassword) => {
-    if (password !== cnfPassword) {
+    if (cnfPassword.length > 1 && password !== cnfPassword) {
       setErrors({
         ...errors,
         passwordConfirm: "The above passwords do not match!",
@@ -157,16 +157,16 @@ const SignupForm = () => {
       </CardTitle>
       <CardBody>
         <Form>
-          {signupFormData.map((formItem, index) => {
+          {signupFormData.map((formItem) => {
             return (
               <FormGroup
-                key={index}
+                key={formItem.id}
                 label={formItem.label}
                 isRequired={formItem.isRequired}
                 fieldId={formItem.id}
               >
                 <div className="password-holder">
-                  {formItem.name === "password" ? (
+                  {["password", "passwordConfirm"].includes(formItem.name) ? (
                     <PasswordTextInput
                       isRequired={formItem.isRequired}
                       isShowPassword={showPassword}
@@ -188,7 +188,7 @@ const SignupForm = () => {
                       onChange={(val) => changeHandler(val, formItem.name)}
                     />
                   )}
-                  {formItem.name === "password" && (
+                  {["password", "passwordConfirm"].includes(formItem.name) && (
                     <Button
                       variant="control"
                       onClick={onShowPassword}
diff --git a/dashboard/src/modules/components/AuthComponent/index.less b/dashboard/src/modules/components/AuthComponent/index.less
index 8f89bb30cf..9cc29d05d3 100644
--- a/dashboard/src/modules/components/AuthComponent/index.less
+++ b/dashboard/src/modules/components/AuthComponent/index.less
@@ -31,9 +31,7 @@
         .signup-card {
             height: 80%;
             overflow-y: scroll;
-            padding: 0 2vh;
-            -ms-overflow-style: none;  
-            scrollbar-width: none;  
+            padding: 0 2vh; 
 
             .contraints-container {
                 padding: 1vh;
@@ -51,10 +49,17 @@
                 color: red;
                 font-size: var(--pf-global--FontSize--sm);
             } 
-            ::-webkit-scrollbar {
-                display: none;
-            }             
+            // ::-webkit-scrollbar {
+            //     display: none;
+            // }             
         }
+        .orText {
+            padding: 1vh;
+        }
+       .text-center {
+            text-align: center;
+        }
+
     }
     .auth-card {
         .pf-c-card__body {
@@ -91,9 +96,9 @@
             }
         }
     }
-    ::-webkit-scrollbar {
-        width: 0px;
-        background: transparent; /* make scrollbar transparent */
-    }
+    // ::-webkit-scrollbar {
+    //     width: 0px;
+    //     background: transparent; /* make scrollbar transparent */
+    // }
 }
 
diff --git a/dashboard/src/modules/components/AuthComponent/signupFormData.js b/dashboard/src/modules/components/AuthComponent/signupFormData.js
index a98eee4cc2..665dc701f7 100644
--- a/dashboard/src/modules/components/AuthComponent/signupFormData.js
+++ b/dashboard/src/modules/components/AuthComponent/signupFormData.js
@@ -49,7 +49,6 @@ export const signupFormData = [
   },
 ];
 
-
 export const passwordConstraintsText = [
   {
     label: "characters",
@@ -66,5 +65,5 @@ export const passwordConstraintsText = [
   {
     label: "1 uppercase letter",
     name: "passwordBlockLetter",
-  }
-] 
+  },
+];