452 lines
17 KiB
TypeScript
452 lines
17 KiB
TypeScript
/*
|
|
Copyright 2015, 2016, 2017, 2019 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
import React, { SyntheticEvent } from "react";
|
|
import classNames from "classnames";
|
|
|
|
import { _t } from "../../../languageHandler";
|
|
import SdkConfig from "../../../SdkConfig";
|
|
import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
|
|
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
|
|
import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
|
|
import Field from "../elements/Field";
|
|
import CountryDropdown from "./CountryDropdown";
|
|
import EmailField from "./EmailField";
|
|
import { PhoneNumberCountryDefinition } from "../../../phonenumber";
|
|
|
|
// For validating phone numbers without country codes
|
|
const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
|
|
|
|
interface IProps {
|
|
username: string; // also used for email address
|
|
phoneCountry: string;
|
|
phoneNumber: string;
|
|
|
|
serverConfig: ValidatedServerConfig;
|
|
loginIncorrect: boolean;
|
|
disableSubmit?: boolean;
|
|
busy?: boolean;
|
|
|
|
onSubmit(username: string, phoneCountry: void, phoneNumber: void, password: string): void;
|
|
onSubmit(username: void, phoneCountry: string, phoneNumber: string, password: string): void;
|
|
onUsernameChanged?(username: string): void;
|
|
onUsernameBlur?(username: string): void;
|
|
onPhoneCountryChanged?(phoneCountry: string): void;
|
|
onPhoneNumberChanged?(phoneNumber: string): void;
|
|
onForgotPasswordClick?(): void;
|
|
}
|
|
|
|
interface IState {
|
|
fieldValid: Partial<Record<LoginField, boolean>>;
|
|
loginType: LoginField.Email | LoginField.MatrixId | LoginField.Phone;
|
|
password: string;
|
|
}
|
|
|
|
const enum LoginField {
|
|
Email = "login_field_email",
|
|
MatrixId = "login_field_mxid",
|
|
Phone = "login_field_phone",
|
|
Password = "login_field_phone",
|
|
}
|
|
|
|
/*
|
|
* A pure UI component which displays a username/password form.
|
|
* The email/username/phone fields are fully-controlled, the password field is not.
|
|
*/
|
|
export default class PasswordLogin extends React.PureComponent<IProps, IState> {
|
|
private [LoginField.Email]: Field | null = null;
|
|
private [LoginField.Phone]: Field | null = null;
|
|
private [LoginField.MatrixId]: Field | null = null;
|
|
|
|
public static defaultProps = {
|
|
onUsernameChanged: function () {},
|
|
onUsernameBlur: function () {},
|
|
onPhoneCountryChanged: function () {},
|
|
onPhoneNumberChanged: function () {},
|
|
loginIncorrect: false,
|
|
disableSubmit: false,
|
|
};
|
|
|
|
public constructor(props: IProps) {
|
|
super(props);
|
|
this.state = {
|
|
// Field error codes by field ID
|
|
fieldValid: {},
|
|
loginType: LoginField.MatrixId,
|
|
password: "",
|
|
};
|
|
}
|
|
|
|
private onForgotPasswordClick = (ev: ButtonEvent): void => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
this.props.onForgotPasswordClick?.();
|
|
};
|
|
|
|
private onSubmitForm = async (ev: SyntheticEvent): Promise<void> => {
|
|
ev.preventDefault();
|
|
|
|
const allFieldsValid = await this.verifyFieldsBeforeSubmit();
|
|
if (!allFieldsValid) {
|
|
return;
|
|
}
|
|
|
|
switch (this.state.loginType) {
|
|
case LoginField.Email:
|
|
case LoginField.MatrixId:
|
|
this.props.onSubmit(this.props.username, undefined, undefined, this.state.password);
|
|
break;
|
|
case LoginField.Phone:
|
|
this.props.onSubmit(undefined, this.props.phoneCountry, this.props.phoneNumber, this.state.password);
|
|
break;
|
|
}
|
|
};
|
|
|
|
private onUsernameChanged = (ev: React.ChangeEvent<HTMLInputElement>): void => {
|
|
this.props.onUsernameChanged?.(ev.target.value);
|
|
};
|
|
|
|
private onUsernameBlur = (ev: React.FocusEvent<HTMLInputElement>): void => {
|
|
this.props.onUsernameBlur?.(ev.target.value);
|
|
};
|
|
|
|
private onLoginTypeChange = (ev: React.ChangeEvent<HTMLSelectElement>): void => {
|
|
const loginType = ev.target.value as IState["loginType"];
|
|
this.setState({ loginType });
|
|
this.props.onUsernameChanged?.(""); // Reset because email and username use the same state
|
|
};
|
|
|
|
private onPhoneCountryChanged = (country: PhoneNumberCountryDefinition): void => {
|
|
this.props.onPhoneCountryChanged?.(country.iso2);
|
|
};
|
|
|
|
private onPhoneNumberChanged = (ev: React.ChangeEvent<HTMLInputElement>): void => {
|
|
this.props.onPhoneNumberChanged?.(ev.target.value);
|
|
};
|
|
|
|
private onPasswordChanged = (ev: React.ChangeEvent<HTMLInputElement>): void => {
|
|
this.setState({ password: ev.target.value });
|
|
};
|
|
|
|
private async verifyFieldsBeforeSubmit(): Promise<boolean> {
|
|
// Blur the active element if any, so we first run its blur validation,
|
|
// which is less strict than the pass we're about to do below for all fields.
|
|
const activeElement = document.activeElement as HTMLElement;
|
|
if (activeElement) {
|
|
activeElement.blur();
|
|
}
|
|
|
|
const fieldIDsInDisplayOrder: LoginField[] = [this.state.loginType, LoginField.Password];
|
|
|
|
// Run all fields with stricter validation that no longer allows empty
|
|
// values for required fields.
|
|
for (const fieldID of fieldIDsInDisplayOrder) {
|
|
const field = this[fieldID];
|
|
if (!field) {
|
|
continue;
|
|
}
|
|
// We must wait for these validations to finish before queueing
|
|
// up the setState below so our setState goes in the queue after
|
|
// all the setStates from these validate calls (that's how we
|
|
// know they've finished).
|
|
await field.validate({ allowEmpty: false });
|
|
}
|
|
|
|
// Validation and state updates are async, so we need to wait for them to complete
|
|
// first. Queue a `setState` callback and wait for it to resolve.
|
|
await new Promise<void>((resolve) => this.setState({}, resolve));
|
|
|
|
if (this.allFieldsValid()) {
|
|
return true;
|
|
}
|
|
|
|
const invalidField = this.findFirstInvalidField(fieldIDsInDisplayOrder);
|
|
|
|
if (!invalidField) {
|
|
return true;
|
|
}
|
|
|
|
// Focus the first invalid field and show feedback in the stricter mode
|
|
// that no longer allows empty values for required fields.
|
|
invalidField.focus();
|
|
invalidField.validate({ allowEmpty: false, focused: true });
|
|
return false;
|
|
}
|
|
|
|
private allFieldsValid(): boolean {
|
|
return Object.values(this.state.fieldValid).every(Boolean);
|
|
}
|
|
|
|
private findFirstInvalidField(fieldIDs: LoginField[]): Field | null {
|
|
for (const fieldID of fieldIDs) {
|
|
if (!this.state.fieldValid[fieldID] && this[fieldID]) {
|
|
return this[fieldID];
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
private markFieldValid(fieldID: LoginField, valid?: boolean): void {
|
|
const { fieldValid } = this.state;
|
|
fieldValid[fieldID] = valid;
|
|
this.setState({
|
|
fieldValid,
|
|
});
|
|
}
|
|
|
|
private validateUsernameRules = withValidation({
|
|
rules: [
|
|
{
|
|
key: "required",
|
|
test({ value, allowEmpty }) {
|
|
return allowEmpty || !!value;
|
|
},
|
|
invalid: () => _t("auth|username_field_required_invalid"),
|
|
},
|
|
],
|
|
});
|
|
|
|
private onUsernameValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
|
|
const result = await this.validateUsernameRules(fieldState);
|
|
this.markFieldValid(LoginField.MatrixId, result.valid);
|
|
return result;
|
|
};
|
|
|
|
private onEmailValidate = (result: IValidationResult): void => {
|
|
this.markFieldValid(LoginField.Email, result.valid);
|
|
};
|
|
|
|
private validatePhoneNumberRules = withValidation({
|
|
rules: [
|
|
{
|
|
key: "required",
|
|
test({ value, allowEmpty }): boolean {
|
|
return allowEmpty || !!value;
|
|
},
|
|
invalid: (): string => _t("auth|msisdn_field_required_invalid"),
|
|
},
|
|
{
|
|
key: "number",
|
|
test: ({ value }): boolean => !value || PHONE_NUMBER_REGEX.test(value),
|
|
invalid: (): string => _t("auth|msisdn_field_number_invalid"),
|
|
},
|
|
],
|
|
});
|
|
|
|
private onPhoneNumberValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
|
|
const result = await this.validatePhoneNumberRules(fieldState);
|
|
this.markFieldValid(LoginField.Password, result.valid);
|
|
return result;
|
|
};
|
|
|
|
private validatePasswordRules = withValidation({
|
|
rules: [
|
|
{
|
|
key: "required",
|
|
test({ value, allowEmpty }): boolean {
|
|
return allowEmpty || !!value;
|
|
},
|
|
invalid: (): string => _t("auth|password_field_label"),
|
|
},
|
|
],
|
|
});
|
|
|
|
private onPasswordValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
|
|
const result = await this.validatePasswordRules(fieldState);
|
|
this.markFieldValid(LoginField.Password, result.valid);
|
|
return result;
|
|
};
|
|
|
|
private renderLoginField(loginType: IState["loginType"], autoFocus: boolean): JSX.Element {
|
|
const classes = {
|
|
error: false,
|
|
};
|
|
|
|
switch (loginType) {
|
|
case LoginField.Email:
|
|
classes.error = this.props.loginIncorrect && !this.props.username;
|
|
return (
|
|
<EmailField
|
|
id="mx_LoginForm_email"
|
|
className={classNames(classes)}
|
|
name="username" // make it a little easier for browser's remember-password
|
|
autoComplete="email"
|
|
type="email"
|
|
key="email_input"
|
|
placeholder="joe@example.com"
|
|
value={this.props.username}
|
|
onChange={this.onUsernameChanged}
|
|
onBlur={this.onUsernameBlur}
|
|
disabled={this.props.busy}
|
|
autoFocus={autoFocus}
|
|
onValidate={this.onEmailValidate}
|
|
fieldRef={(field): void => {
|
|
this[LoginField.Email] = field;
|
|
}}
|
|
/>
|
|
);
|
|
case LoginField.MatrixId:
|
|
classes.error = this.props.loginIncorrect && !this.props.username;
|
|
return (
|
|
<Field
|
|
id="mx_LoginForm_username"
|
|
className={classNames(classes)}
|
|
name="username" // make it a little easier for browser's remember-password
|
|
autoComplete="username"
|
|
key="username_input"
|
|
type="text"
|
|
label={_t("common|username")}
|
|
placeholder={_t("common|username").toLocaleLowerCase()}
|
|
value={this.props.username}
|
|
onChange={this.onUsernameChanged}
|
|
onBlur={this.onUsernameBlur}
|
|
disabled={this.props.busy}
|
|
autoFocus={autoFocus}
|
|
onValidate={this.onUsernameValidate}
|
|
ref={(field): void => {
|
|
this[LoginField.MatrixId] = field;
|
|
}}
|
|
/>
|
|
);
|
|
case LoginField.Phone: {
|
|
classes.error = this.props.loginIncorrect && !this.props.phoneNumber;
|
|
|
|
const phoneCountry = (
|
|
<CountryDropdown
|
|
value={this.props.phoneCountry}
|
|
isSmall={true}
|
|
showPrefix={true}
|
|
onOptionChange={this.onPhoneCountryChanged}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<Field
|
|
id="mx_LoginForm_phone"
|
|
className={classNames(classes)}
|
|
name="phoneNumber"
|
|
autoComplete="tel-national"
|
|
key="phone_input"
|
|
type="text"
|
|
label={_t("auth|msisdn_field_label")}
|
|
value={this.props.phoneNumber}
|
|
prefixComponent={phoneCountry}
|
|
onChange={this.onPhoneNumberChanged}
|
|
disabled={this.props.busy}
|
|
autoFocus={autoFocus}
|
|
onValidate={this.onPhoneNumberValidate}
|
|
ref={(field): void => {
|
|
this[LoginField.Password] = field;
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
private isLoginEmpty(): boolean {
|
|
switch (this.state.loginType) {
|
|
case LoginField.Email:
|
|
case LoginField.MatrixId:
|
|
return !this.props.username;
|
|
case LoginField.Phone:
|
|
return !this.props.phoneCountry || !this.props.phoneNumber;
|
|
}
|
|
}
|
|
|
|
public render(): React.ReactNode {
|
|
let forgotPasswordJsx: JSX.Element | undefined;
|
|
|
|
if (this.props.onForgotPasswordClick) {
|
|
forgotPasswordJsx = (
|
|
<AccessibleButton
|
|
className="mx_Login_forgot"
|
|
disabled={this.props.busy}
|
|
kind="link"
|
|
onClick={this.onForgotPasswordClick}
|
|
>
|
|
{_t("auth|reset_password_button")}
|
|
</AccessibleButton>
|
|
);
|
|
}
|
|
|
|
const pwFieldClass = classNames({
|
|
error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
|
|
});
|
|
|
|
// If login is empty, autoFocus login, otherwise autoFocus password.
|
|
// this is for when auto server discovery remounts us when the user tries to tab from username to password
|
|
const autoFocusPassword = !this.isLoginEmpty();
|
|
const loginField = this.renderLoginField(this.state.loginType, !autoFocusPassword);
|
|
|
|
let loginType;
|
|
if (!SdkConfig.get().disable_3pid_login) {
|
|
loginType = (
|
|
<div className="mx_Login_type_container">
|
|
<label className="mx_Login_type_label">{_t("auth|identifier_label")}</label>
|
|
<Field
|
|
element="select"
|
|
value={this.state.loginType}
|
|
onChange={this.onLoginTypeChange}
|
|
disabled={this.props.busy}
|
|
>
|
|
<option key={LoginField.MatrixId} value={LoginField.MatrixId}>
|
|
{_t("common|username")}
|
|
</option>
|
|
<option key={LoginField.Email} value={LoginField.Email}>
|
|
{_t("Email address")}
|
|
</option>
|
|
<option key={LoginField.Password} value={LoginField.Password}>
|
|
{_t("auth|msisdn_field_label")}
|
|
</option>
|
|
</Field>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<form onSubmit={this.onSubmitForm}>
|
|
{loginType}
|
|
{loginField}
|
|
<Field
|
|
id="mx_LoginForm_password"
|
|
className={pwFieldClass}
|
|
autoComplete="current-password"
|
|
type="password"
|
|
name="password"
|
|
label={_t("common|password")}
|
|
value={this.state.password}
|
|
onChange={this.onPasswordChanged}
|
|
disabled={this.props.busy}
|
|
autoFocus={autoFocusPassword}
|
|
onValidate={this.onPasswordValidate}
|
|
ref={(field) => (this[LoginField.Password] = field)}
|
|
/>
|
|
{forgotPasswordJsx}
|
|
{!this.props.busy && (
|
|
<input
|
|
className="mx_Login_submit"
|
|
type="submit"
|
|
value={_t("action|sign_in")}
|
|
disabled={this.props.disableSubmit}
|
|
/>
|
|
)}
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
}
|