Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
* gitignore

* don't show password field errorMessage onBlur

* remove unused import of usestore
This commit is contained in:
Sangeeth Sivan 2022-05-09 15:53:41 +05:30 committed by GitHub
parent d5845e972a
commit 897d3818b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

33
app/client/src/ce/pages/UserAuth/Login.tsx
View File

@ -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)),
);