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

minor updates for auth pages: polish UI, hide empty email error message (#2743)

Browse Source
This commit is contained in:
Rishabh Saxena 2021-01-28 12:50:09 +05:30 committed by GitHub
parent c17a2ea536
commit ca052e7515
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 46 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/client/src/constants/DefaultTheme.tsx
View File

@ -749,11 +749,12 @@ const auth: any = {
btnPrimary: "#F86A2B",
inputBackground: darkShades[1],
headingText: "#FFF",
link: "#457AE6",
link: "#106ba3",
text: darkShades[7],
placeholder: darkShades[5],
socialBtnText: darkShades[8],
socialBtnBorder: darkShades[8],
socialBtnHighlight: darkShades[1],
};
const formMessage = {
@ -1434,13 +1435,13 @@ export const theme: Theme = {
authCardHeader: {
fontStyle: "normal",
fontWeight: 600,
fontSize: 24,
fontSize: 25,
lineHeight: 20,
},
authCardSubheader: {
fontStyle: "normal",
fontWeight: "normal",
fontSize: 14,
fontSize: 15,
lineHeight: 20,
},
},
@ -1593,9 +1594,9 @@ export const theme: Theme = {
},
},
authCard: {
width: 400,
width: 440,
dividerSpacing: 32,
formMessageWidth: 352,
formMessageWidth: 370,
},
shadows: [
/* 0. tab */

1
app/client/src/constants/forms.ts
View File

@ -7,6 +7,7 @@ export const LOGIN_FORM_EMAIL_FIELD_NAME = "username";
export const LOGIN_FORM_PASSWORD_FIELD_NAME = "password";
export const SIGNUP_FORM_NAME = "SignupForm";
export const SIGNUP_FORM_EMAIL_FIELD_NAME = "email";
export const FORGOT_PASSWORD_FORM_NAME = "ForgotPasswordForm";
export const RESET_PASSWORD_FORM_NAME = "ResetPasswordForm";
export const CREATE_PASSWORD_FORM_NAME = "CreatePasswordForm";

12
app/client/src/pages/UserAuth/Login.tsx
View File

@ -14,7 +14,6 @@ import {
LOGIN_PAGE_PASSWORD_INPUT_LABEL,
LOGIN_PAGE_PASSWORD_INPUT_PLACEHOLDER,
LOGIN_PAGE_EMAIL_INPUT_PLACEHOLDER,
FORM_VALIDATION_EMPTY_EMAIL,
FORM_VALIDATION_EMPTY_PASSWORD,
FORM_VALIDATION_INVALID_EMAIL,
FORM_VALIDATION_INVALID_PASSWORD,
@ -53,16 +52,14 @@ const { enableGithubOAuth, enableGoogleOAuth } = getAppsmithConfigs();
const validate = (values: LoginFormValues) => {
const errors: LoginFormValues = {};
const email = values[LOGIN_FORM_EMAIL_FIELD_NAME];
const email = values[LOGIN_FORM_EMAIL_FIELD_NAME] || "";
const password = values[LOGIN_FORM_PASSWORD_FIELD_NAME];
if (!password || isEmptyString(password)) {
errors[LOGIN_FORM_PASSWORD_FIELD_NAME] = FORM_VALIDATION_EMPTY_PASSWORD;
} else if (!isStrongPassword(password)) {
errors[LOGIN_FORM_PASSWORD_FIELD_NAME] = FORM_VALIDATION_INVALID_PASSWORD;
}
if (!email || isEmptyString(email)) {
errors[LOGIN_FORM_EMAIL_FIELD_NAME] = FORM_VALIDATION_EMPTY_EMAIL;
} else if (!isEmail(email)) {
if (!isEmptyString(email) && !isEmail(email)) {
errors[LOGIN_FORM_EMAIL_FIELD_NAME] = FORM_VALIDATION_INVALID_EMAIL;
}
@ -81,7 +78,8 @@ if (enableGoogleOAuth) SocialLoginList.push(SocialLoginTypes.GOOGLE);
if (enableGithubOAuth) SocialLoginList.push(SocialLoginTypes.GITHUB);
export const Login = (props: LoginFormProps) => {
const { error, valid } = props;
const { error, valid, emailValue: email } = props;
const isFormValid = valid && email && !isEmptyString(email);
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
@ -160,7 +158,7 @@ export const Login = (props: LoginFormProps) => {
<Button
tag="button"
type="submit"
disabled={!valid}
disabled={!isFormValid}
text={LOGIN_PAGE_LOGIN_BUTTON_TEXT}
fill
size={Size.large}

29
app/client/src/pages/UserAuth/SignUp.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { reduxForm, InjectedFormProps } from "redux-form";
import { reduxForm, InjectedFormProps, formValueSelector } from "redux-form";
import { AUTH_LOGIN_URL } from "constants/routes";
import { SIGNUP_FORM_NAME } from "constants/forms";
import { RouteComponentProps, useLocation, withRouter } from "react-router-dom";
@ -17,7 +17,6 @@ import {
SIGNUP_PAGE_PASSWORD_INPUT_LABEL,
SIGNUP_PAGE_PASSWORD_INPUT_PLACEHOLDER,
SIGNUP_PAGE_LOGIN_LINK_TEXT,
FORM_VALIDATION_EMPTY_EMAIL,
FORM_VALIDATION_EMPTY_PASSWORD,
FORM_VALIDATION_INVALID_EMAIL,
FORM_VALIDATION_INVALID_PASSWORD,
@ -43,6 +42,9 @@ import PerformanceTracker, {
PerformanceTransactionName,
} from "utils/PerformanceTracker";
import { setOnboardingState } from "utils/storage";
import { SIGNUP_FORM_EMAIL_FIELD_NAME } from "constants/forms";
const { enableGithubOAuth, enableGoogleOAuth } = getAppsmithConfigs();
const SocialLoginList: string[] = [];
if (enableGithubOAuth) SocialLoginList.push(SocialLoginTypes.GITHUB);
@ -58,19 +60,24 @@ const validate = (values: SignupFormValues) => {
} else if (!isStrongPassword(values.password)) {
errors.password = FORM_VALIDATION_INVALID_PASSWORD;
}
if (!values.email || isEmptyString(values.email)) {
errors.email = FORM_VALIDATION_EMPTY_EMAIL;
} else if (!isEmail(values.email)) {
const email = values.email || "";
if (!isEmptyString(email) && !isEmail(email)) {
errors.email = FORM_VALIDATION_INVALID_EMAIL;
}
return errors;
};
type SignUpFormProps = InjectedFormProps<SignupFormValues> &
RouteComponentProps<{ email: string }> & { theme: Theme };
type SignUpFormProps = InjectedFormProps<
SignupFormValues,
{ emailValue: string }
> &
RouteComponentProps<{ email: string }> & { theme: Theme; emailValue: string };
export const SignUp = (props: SignUpFormProps) => {
const { error, submitting, pristine, valid } = props;
const { error, submitting, pristine, valid, emailValue: email } = props;
const isFormValid = valid && email && !isEmptyString(email);
const location = useLocation();
let showError = false;
@ -133,7 +140,7 @@ export const SignUp = (props: SignUpFormProps) => {
<Button
tag="button"
type="submit"
disabled={pristine || !valid}
disabled={pristine || !isFormValid}
isLoading={submitting}
text={SIGNUP_PAGE_SUBMIT_BUTTON_TEXT}
fill
@ -154,15 +161,17 @@ export const SignUp = (props: SignUpFormProps) => {
);
};
const selector = formValueSelector(SIGNUP_FORM_NAME);
export default connect((state: AppState, props: SignUpFormProps) => {
const queryParams = new URLSearchParams(props.location.search);
return {
initialValues: {
email: queryParams.get("email"),
},
emailValue: selector(state, SIGNUP_FORM_EMAIL_FIELD_NAME),
};
}, null)(
reduxForm<SignupFormValues>({
reduxForm<SignupFormValues, { emailValue: string }>({
validate,
form: SIGNUP_FORM_NAME,
touchOnBlur: true,

15
app/client/src/pages/UserAuth/StyledComponents.tsx
View File

@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
import Form from "components/editorComponents/Form";
import { Card } from "@blueprintjs/core";
import { getTypographyByKey } from "constants/DefaultTheme";
import { Classes } from "@blueprintjs/core";
export const AuthContainer = styled.section`
position: absolute;
@ -13,6 +14,10 @@ export const AuthContainer = styled.section`
flex-direction: column;
align-items: center;
overflow: auto;
& .${Classes.FORM_GROUP} {
margin: 0 0 ${(props) => props.theme.spaces[2]}px;
}
`;
export const AuthCardContainer = styled.div`
@ -67,7 +72,13 @@ export const AuthCardHeader = styled.header`
}
`;
export const AuthCardNavLink = styled(Link)``;
export const AuthCardNavLink = styled(Link)`
border-bottom: 1px solid transparent;
&:hover {
border-bottom: 1px solid ${(props) => props.theme.colors.auth.link};
text-decoration: none;
}
`;
export const AuthCardFooter = styled.footer`
display: flex;
@ -102,7 +113,7 @@ export const FormActions = styled.div`
}
justify-content: space-between;
align-items: baseline;
margin-top: ${(props) => props.theme.spaces[2]}px;
margin-top: ${(props) => props.theme.spaces[5]}px;
& > label {
margin-right: ${(props) => props.theme.spaces[11]}px;
}

1
app/client/src/pages/UserAuth/ThirdPartyAuth.tsx
View File

@ -35,6 +35,7 @@ const StyledSocialLoginButton = styled.a`
&:hover {
text-decoration: none;
background-color: ${(props) => props.theme.colors.auth.socialBtnHighlight};
}
& .login-method {

2
app/client/src/pages/common/LoginHeader.tsx
View File

@ -14,7 +14,7 @@ const StyledPageHeader = styled(StyledHeader)`
height: 48px;
background: ${Colors.BALTIC_SEA};
display: flex;
justify-content: space-between;
justify-content: center;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
padding: 0px ${(props) => props.theme.spaces[12]};
`;