Signup page Bugs (#3324)

* PBENCH-1096 Sign-up page Bugs on Signup page
distributed-system-analysis · Mar 13, 2023 · 87d739a · 87d739a
1 parent 8287b2c
commit 87d739a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git a/dashboard/src/modules/components/AuthComponent/LoginForm.jsx b/dashboard/src/modules/components/AuthComponent/LoginForm.jsx
@@ -153,6 +153,15 @@ const LoginForm = () => {
           </Button>
         </div>
         <NoLoginComponent />
+        <div className="orText text-center">-or-</div>
+        <div className="text-center">
+          <Button
+            variant="link"
+            onClick={() => navigate(APP_ROUTES.AUTH_SIGNUP)}
+          >
+            Sign up
+          </Button>
+        </div>
       </CardFooter>
     </Card>
   );

diff --git 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
@@ -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;
@@ -50,11 +48,15 @@
             .error {
                 color: red;
                 font-size: var(--pf-global--FontSize--sm);
-            } 
-            ::-webkit-scrollbar {
-                display: none;
-            }             
+            }            
         }
+        .orText {
+            padding: 1vh;
+        }
+       .text-center {
+            text-align: center;
+        }
+
     }
     .auth-card {
         .pf-c-card__body {
@@ -91,9 +93,5 @@
             }
         }
     }
-    ::-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
@@ -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",
-  }
-] 
+  },
+];