fix: Handle login form password error message on blur (appsmithorg#13568

)

* gitignore

* don't show password field errorMessage onBlur

* remove unused import of usestore

.gitignore

@@ -19,4 +19,5 @@ deploy/ansible/appsmith_playbook/inventory
 
 # performance tests
 app/client/perf/traces/*
-.history
+.history
+stacks

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<LoginFormValues, { emailValue: string }> & {
  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<LoginFormValues, { emailValue: string }>({
  validate,
- touchOnBlur: true,
+ touchOnBlur: false,
  form: LOGIN_FORM_NAME,
  })(withTheme(Login)),
 );