From 7cd9a5ad0cc871a007365863beb9e120dae9f0b6 Mon Sep 17 00:00:00 2001 From: Sarthak Jain Date: Fri, 5 Mar 2021 19:42:03 +0530 Subject: [PATCH] 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 * added text to translation Signed-off-by: SarthakJain26 --- .../public/locales/en/translation.yaml | 1 + .../src/components/WelcomeModal/Stepper.tsx | 4 --- .../AccountsTab/AccountSettings/index.tsx | 17 ++++++--- .../AccountsTab/AccountSettings/styles.ts | 4 +-- .../AccountsTab/PersonalDetails/index.tsx | 2 -- .../AccountsTab/PersonalDetails/styles.ts | 1 + .../TeamingTab/InviteNew/Invite/styles.ts | 4 +++ .../CreateUser/NewUserModal/styles.ts | 2 ++ .../CreateUser/UserDetails/index.tsx | 32 +++++++++-------- .../UserManagementTab/CreateUser/index.tsx | 36 +++---------------- .../EditUser/ResetModal/styles.ts | 2 ++ .../UserManagementTab/EditUser/index.tsx | 17 ++------- 12 files changed, 50 insertions(+), 72 deletions(-) diff --git a/litmus-portal/frontend/public/locales/en/translation.yaml b/litmus-portal/frontend/public/locales/en/translation.yaml index 766e1805b0f..cd143008295 100644 --- 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 index 1302886d280..0955b908b54 100644 --- 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 = ({ 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 = ({ 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 index d02e6b2e06e..78bfee78e40 100644 --- 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 = () => { )} - + + ✕ + + } + > {error.length ? (
diff --git a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts index f0b6dd5b236..c2a9bb2923c 100644 --- a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts +++ b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts @@ -87,7 +87,7 @@ const useStyles = makeStyles((theme: Theme) => ({ text1: { width: '27.5rem', height: '1.6875rem', - marginBottom: theme.spacing(3.75), + marginTop: theme.spacing(14), }, typo1: { fontSize: '1rem', @@ -95,7 +95,6 @@ const useStyles = makeStyles((theme: Theme) => ({ 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 index 6e3b0c96c94..8c530214fc1 100644 --- 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 = () => {
({ 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 index 53b0d782a47..24d84cc3be4 100644 --- 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/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/styles.ts b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/styles.ts index fcbe203a5c0..08580fca5a1 100644 --- a/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/styles.ts +++ b/litmus-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 index f90946d6766..ac75456f9a7 100644 --- 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) => void; emailValue: string; usernameIsDisabled: boolean; - nameIsDisabled: boolean; - emailIsDisabled: boolean; } // Displays the personals details on the "accounts" tab const UserDetails: React.FC = ({ handleNameChange, nameValue, - handleUserChange, userValue, handleEmailChange, emailValue, + handleUserChange, usernameIsDisabled, - nameIsDisabled, - emailIsDisabled, }) => { const classes = useStyles(); const { t } = useTranslation(); @@ -85,14 +81,12 @@ const UserDetails: React.FC = ({
= ({
= ({
diff --git a/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/index.tsx index a4bb367b6d9..bcd59309a45 100644 --- 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 = ({ handleDiv }) => { const { t } = useTranslation(); // for conditional rendering of reset password div - const [createPAssword, setCreatePassword] = React.useState({ + const [createPassword, setCreatePassword] = React.useState({ password: '', showPassword: false, }); @@ -42,7 +38,7 @@ const CreateUser: React.FC = ({ handleDiv }) => { event: React.ChangeEvent ) => { setCreatePassword({ - ...createPAssword, + ...createPassword, [prop]: event.target.value, }); }; @@ -88,8 +84,6 @@ const CreateUser: React.FC = ({ handleDiv }) => { { setPersonalData({ fullName: e.target.value, @@ -130,21 +124,11 @@ const CreateUser: React.FC = ({ handleDiv }) => {
@@ -154,18 +138,8 @@ const CreateUser: React.FC = ({ handleDiv }) => { = ({ 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} />
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 index b86a3b3434c..800ca2d44a3 100644 --- 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 index ab92ed9ae13..6603a0a8a3e 100644 --- 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 = ({
{/* Personal Details */} @@ -95,16 +92,8 @@ const EditUser: React.FC = ({