diff --git a/.gitignore b/.gitignore index 1f002f8b84..a9bd327675 100644 --- a/.gitignore +++ b/.gitignore @@ -19,4 +19,5 @@ deploy/ansible/appsmith_playbook/inventory # performance tests app/client/perf/traces/* -.history \ No newline at end of file +.history +stacks \ No newline at end of file diff --git a/app/client/src/ce/pages/UserAuth/Login.tsx b/app/client/src/ce/pages/UserAuth/Login.tsx index a302fc3378..e9f12a5bdc 100644 --- a/app/client/src/ce/pages/UserAuth/Login.tsx +++ b/app/client/src/ce/pages/UserAuth/Login.tsx @@ -1,7 +1,13 @@ import React from "react"; import { Link, Redirect, useLocation } from "react-router-dom"; import { connect, useSelector } from "react-redux"; -import { InjectedFormProps, reduxForm, formValueSelector } from "redux-form"; +import { + InjectedFormProps, + reduxForm, + formValueSelector, + isDirty, + DecoratedFormProps, +} from "redux-form"; import { LOGIN_FORM_NAME, LOGIN_FORM_EMAIL_FIELD_NAME, @@ -53,16 +59,19 @@ import { getIsSafeRedirectURL } from "utils/helpers"; import { getCurrentUser } from "selectors/usersSelectors"; const { disableLoginForm } = getAppsmithConfigs(); -const validate = (values: LoginFormValues) => { +const validate = (values: LoginFormValues, props: ValidateProps) => { const errors: LoginFormValues = {}; const email = values[LOGIN_FORM_EMAIL_FIELD_NAME] || ""; const password = values[LOGIN_FORM_PASSWORD_FIELD_NAME]; + const { isPasswordFieldDirty, touch } = props; if (!password || isEmptyString(password)) { + isPasswordFieldDirty && touch?.(LOGIN_FORM_PASSWORD_FIELD_NAME); errors[LOGIN_FORM_PASSWORD_FIELD_NAME] = createMessage( FORM_VALIDATION_EMPTY_PASSWORD, ); } if (!isEmptyString(email) && !isEmail(email)) { + touch?.(LOGIN_FORM_EMAIL_FIELD_NAME); errors[LOGIN_FORM_EMAIL_FIELD_NAME] = createMessage( FORM_VALIDATION_INVALID_EMAIL, ); @@ -71,13 +80,19 @@ const validate = (values: LoginFormValues) => { return errors; }; -type LoginFormProps = { emailValue: string } & InjectedFormProps< - LoginFormValues, - { emailValue: string } -> & { +type LoginFormProps = { + emailValue: string; +} & InjectedFormProps & { theme: Theme; }; +type ValidateProps = { + isPasswordFieldDirty?: boolean; +} & DecoratedFormProps< + LoginFormValues, + { emailValue: string; isPasswordFieldDirty?: boolean } +>; + export function Login(props: LoginFormProps) { const { emailValue: email, error, valid } = props; const isFormValid = valid && email && !isEmptyString(email); @@ -211,10 +226,14 @@ export function Login(props: LoginFormProps) { const selector = formValueSelector(LOGIN_FORM_NAME); export default connect((state) => ({ emailValue: selector(state, LOGIN_FORM_EMAIL_FIELD_NAME), + isPasswordFieldDirty: isDirty(LOGIN_FORM_NAME)( + state, + LOGIN_FORM_PASSWORD_FIELD_NAME, + ), }))( reduxForm({ validate, - touchOnBlur: true, + touchOnBlur: false, form: LOGIN_FORM_NAME, })(withTheme(Login)), );