Fixed default error state for password fields and fixed modal padding (…

…#2505) * Fixed default error state for password fields and fixed modal padding Signed-off-by: SarthakJain26 <sarthak.jain@mayadata.io> * added text to translation Signed-off-by: SarthakJain26 <sarthak.jain@mayadata.io>
litmuschaos · Mar 5, 2021 · 7cd9a5a · 7cd9a5a
1 parent 3852a59
commit 7cd9a5a
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 72 deletions.
diff --git a/litmus-portal/frontend/public/locales/en/translation.yaml b/litmus-portal/frontend/public/locales/en/translation.yaml
@@ -427,6 +427,7 @@ settings:
           fullName: Full Name
           email: Email Address
           username: Username
+        validationEmptySpace: Should not start with an empty space
       chooseAvatarModal:
         title: Change your Avatar
         info: You can now use your new password to login to your account

diff --git a/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx b/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx
@@ -153,9 +153,6 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
     }
   }
 
-  // If password is less than 6 characters and does not contain
-  // an alpha numeric character as well as a number
-  // then button would be disabled
   // If the two passwords are not same then button would be disabled
   // Back Button: [Button State: Enabled]
   // Continue Button: [Button State: Disabled]
@@ -345,7 +342,6 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
                     type="password"
                     required
                     value={values.password}
-                    variant={isSuccess.current ? 'primary' : 'error'}
                     onChange={(event) =>
                       setValues({
                         password: event.target.value,

diff --git a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx
@@ -1,5 +1,5 @@
 import { Divider, Typography } from '@material-ui/core';
-import { InputField, Modal } from 'litmus-ui';
+import { ButtonOutlined, InputField, Modal } from 'litmus-ui';
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ButtonFilled from '../../../../components/Button/ButtonFilled';
@@ -188,7 +188,7 @@ const AccountSettings: React.FC = () => {
                       ? 'error'
                       : isSuccess.current
                       ? 'success'
-                      : 'error'
+                      : 'primary'
                   }
                   value={password.confNewPassword}
                 />
@@ -199,7 +199,8 @@ const AccountSettings: React.FC = () => {
                   isPrimary
                   isDisabled={
                     !(
-                      isSuccess.current &&
+                      password.newPassword.length > 0 &&
+                      password.newPassword === password.confNewPassword &&
                       password.currPassword.length > 0 &&
                       !loading
                     )
@@ -219,7 +220,15 @@ const AccountSettings: React.FC = () => {
                   )}
                 </ButtonFilled>
               </div>
-              <Modal open={open} onClose={handleClose}>
+              <Modal
+                open={open}
+                onClose={handleClose}
+                modalActions={
+                  <ButtonOutlined onClick={handleClose}>
+                    &#x2715;
+                  </ButtonOutlined>
+                }
+              >
                 {error.length ? (
                   <div className={classes.errDiv}>
                     <div className={classes.textError}>

diff --git a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
@@ -87,15 +87,14 @@ const useStyles = makeStyles((theme: Theme) => ({
   text1: {
     width: '27.5rem',
     height: '1.6875rem',
-    marginBottom: theme.spacing(3.75),
+    marginTop: theme.spacing(14),
   },
   typo1: {
     fontSize: '1rem',
   },
 
   buttonModal: {
     marginTop: theme.spacing(3.75),
-    width: '55%',
   },
   textSecondError: {
     width: '27.5rem',
@@ -108,6 +107,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     textAlign: 'center',
+    padding: theme.spacing(7, 0),
   },
   typoSub: {
     fontSize: '1rem',

diff --git a/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx b/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx
@@ -124,8 +124,6 @@ const PersonalDetails: React.FC = () => {
     <div>
       <form>
         <UserDetails
-          emailIsDisabled={false}
-          nameIsDisabled={false}
           nameValue={personaData.fullName}
           usernameIsDisabled
           handleNameChange={handleNameChange}

diff --git a/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/styles.ts b/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/styles.ts
@@ -72,6 +72,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     textAlign: 'center',
+    padding: theme.spacing(7, 0),
   },
   textError: {
     width: '20.5rem',

diff --git a/litmus-portal/frontend/src/views/Settings/TeamingTab/InviteNew/Invite/styles.ts b/litmus-portal/frontend/src/views/Settings/TeamingTab/InviteNew/Invite/styles.ts
@@ -35,6 +35,10 @@ const useStyles = makeStyles((theme) => ({
   },
   firstCol: {
     display: 'flex',
+    alignItems: 'center',
+    '& span:first-child': {
+      color: theme.palette.common.black,
+    },
   },
   detail: {
     display: 'flex',

diff --git a/...us-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/styles.ts b/...us-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/styles.ts
@@ -6,6 +6,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
+    padding: theme.spacing(7),
   },
   // styles for text
   text: {
@@ -38,6 +39,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     textAlign: 'center',
+    padding: theme.spacing(7, 0),
   },
   typoSub: {
     fontSize: '1rem',

diff --git a/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
@@ -1,5 +1,5 @@
 import { Avatar, Button, Typography } from '@material-ui/core';
-import { InputField, Modal, ButtonOutlined } from 'litmus-ui';
+import { ButtonOutlined, InputField, Modal } from 'litmus-ui';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -17,21 +17,17 @@ interface PersonalDetailsProps {
   handleEmailChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   emailValue: string;
   usernameIsDisabled: boolean;
-  nameIsDisabled: boolean;
-  emailIsDisabled: boolean;
 }
 
 // Displays the personals details on the "accounts" tab
 const UserDetails: React.FC<PersonalDetailsProps> = ({
   handleNameChange,
   nameValue,
-  handleUserChange,
   userValue,
   handleEmailChange,
   emailValue,
+  handleUserChange,
   usernameIsDisabled,
-  nameIsDisabled,
-  emailIsDisabled,
 }) => {
   const classes = useStyles();
   const { t } = useTranslation();
@@ -85,14 +81,12 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
           <div className={classes.details1}>
             <div data-cy="InputName">
               <InputField
-                required
                 helperText={
                   validateStartEmptySpacing(nameValue)
                     ? 'Should not start with an empty space'
                     : ''
                 }
                 value={nameValue}
-                disabled={nameIsDisabled}
                 onChange={handleNameChange}
                 variant={
                   validateStartEmptySpacing(nameValue) ? 'error' : 'primary'
@@ -105,13 +99,11 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
             <div style={{ width: '2rem' }} />
             <div data-cy="InputEmail">
               <InputField
-                required
                 helperText={
                   validateEmail(emailValue) ? 'Should be a valid email' : ''
                 }
                 type="email"
                 value={emailValue}
-                disabled={emailIsDisabled}
                 onChange={handleEmailChange}
                 variant={validateEmail(emailValue) ? 'error' : 'primary'}
                 label={t(
@@ -123,13 +115,23 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
             <div style={{ marginTop: '5rem' }} />
             <div data-cy="username">
               <InputField
-                value={userValue}
-                onChange={handleUserChange}
-                disabled={usernameIsDisabled}
-                variant="primary"
+                helperText={
+                  validateStartEmptySpacing(userValue)
+                    ? t(
+                        'settings.userManagementTab.createUser.userDetails.validationEmptySpace'
+                      )
+                    : ''
+                }
                 label={t(
-                  'settings.userManagementTab.createUser.userDetails.label.username'
+                  'settings.userManagementTab.createUser.label.username'
                 )}
+                required
+                value={userValue}
+                disabled={usernameIsDisabled}
+                onChange={handleUserChange}
+                variant={
+                  validateStartEmptySpacing(userValue) ? 'error' : 'primary'
+                }
               />
             </div>
           </div>

diff --git a/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/index.tsx
@@ -2,10 +2,6 @@ import { Divider, IconButton, Typography } from '@material-ui/core';
 import { InputField } from 'litmus-ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  validateLength,
-  validateStartEmptySpacing,
-} from '../../../../utils/validate';
 import NewUserModal from './NewUserModal';
 import useStyles from './styles';
 import UserDetails from './UserDetails';
@@ -32,7 +28,7 @@ const CreateUser: React.FC<CreateUserProps> = ({ handleDiv }) => {
   const { t } = useTranslation();
 
   // for conditional rendering of reset password div
-  const [createPAssword, setCreatePassword] = React.useState<Password>({
+  const [createPassword, setCreatePassword] = React.useState<Password>({
     password: '',
     showPassword: false,
   });
@@ -42,7 +38,7 @@ const CreateUser: React.FC<CreateUserProps> = ({ handleDiv }) => {
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
     setCreatePassword({
-      ...createPAssword,
+      ...createPassword,
       [prop]: event.target.value,
     });
   };
@@ -88,8 +84,6 @@ const CreateUser: React.FC<CreateUserProps> = ({ handleDiv }) => {
               <UserDetails
                 nameValue={personalData.fullName}
                 usernameIsDisabled={false}
-                emailIsDisabled={false}
-                nameIsDisabled={false}
                 handleNameChange={(e) => {
                   setPersonalData({
                     fullName: e.target.value,
@@ -130,21 +124,11 @@ const CreateUser: React.FC<CreateUserProps> = ({ handleDiv }) => {
                     <div className={classes.details1}>
                       <div data-cy="userName">
                         <InputField
-                          helperText={
-                            validateStartEmptySpacing(personalData.userName)
-                              ? 'Should not start with an empty space'
-                              : ''
-                          }
                           label={t(
                             'settings.userManagementTab.createUser.label.username'
                           )}
                           value={personalData.userName}
                           onChange={handleUsername}
-                          variant={
-                            validateStartEmptySpacing(personalData.userName)
-                              ? 'error'
-                              : 'primary'
-                          }
                           disabled
                         />
                       </div>
@@ -154,18 +138,8 @@ const CreateUser: React.FC<CreateUserProps> = ({ handleDiv }) => {
                         <InputField
                           required
                           type="password"
-                          helperText={
-                            validateLength(createPAssword.password)
-                              ? 'Password is too short'
-                              : ''
-                          }
                           onChange={handleCreatePassword('password')}
-                          value={createPAssword.password}
-                          variant={
-                            validateLength(createPAssword.password)
-                              ? 'error'
-                              : 'primary'
-                          }
+                          value={createPassword.password}
                           label={t(
                             'settings.userManagementTab.createUser.label.newPassword'
                           )}
@@ -183,12 +157,12 @@ const CreateUser: React.FC<CreateUserProps> = ({ handleDiv }) => {
             handleDiv={handleDiv}
             showModal={
               personalData.userName.length > 0 &&
-              createPAssword.password.length > 0
+              createPassword.password.length > 0
             }
             name={personalData.fullName}
             email={personalData.email}
             username={personalData.userName}
-            password={createPAssword.password}
+            password={createPassword.password}
           />
         </div>
       </div>

diff --git a/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/ResetModal/styles.ts b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/ResetModal/styles.ts
@@ -7,6 +7,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     justifyContent: 'center',
     alignItems: 'center',
     marginTop: theme.spacing(7.5),
+    padding: theme.spacing(7),
   },
   typo: {
     fontSize: '2rem',
@@ -39,6 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     textAlign: 'center',
+    padding: theme.spacing(7, 0),
   },
   buttonModal: {
     marginTop: theme.spacing(3.75),

diff --git a/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/index.tsx
@@ -1,8 +1,7 @@
 import { Divider, IconButton, Typography } from '@material-ui/core';
+import { InputField } from 'litmus-ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import InputField from '../../../../components/InputField';
-import { validateLength } from '../../../../utils/validate';
 import UserDetails from '../CreateUser/UserDetails';
 import DelUser from './DelUser';
 import ResetModal from './ResetModal';
@@ -72,10 +71,8 @@ const EditUser: React.FC<EditUserProps> = ({
             <div className={classes.suSegments}>
               {/* Personal Details */}
               <UserDetails
-                nameIsDisabled
-                emailIsDisabled
-                nameValue={fullName}
                 usernameIsDisabled
+                nameValue={fullName}
                 emailValue={email}
                 userValue={userName}
               />
@@ -95,16 +92,8 @@ const EditUser: React.FC<EditUserProps> = ({
                     <div data-cy="editPassword" className={classes.details1}>
                       <InputField
                         required
-                        helperText={
-                          validateLength(createPAssword.password)
-                            ? 'Password is too short'
-                            : ''
-                        }
-                        handleChange={handleCreatePassword('password')}
+                        onChange={handleCreatePassword('password')}
                         type="password"
-                        validationError={validateLength(
-                          createPAssword.password
-                        )}
                         label={t(
                           'settings.userManagementTab.editUser.label.newPassword'
                         )}