Apply prettier formatting
This commit is contained in:
Michael Weimann
parent
1cac306093
commit
526645c791
1576 changed files with 65385 additions and 62478 deletions
|
|
@ -15,26 +15,26 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { MatrixClient } from 'matrix-js-sdk/src/client';
|
||||
import React from "react";
|
||||
import { MatrixClient } from "matrix-js-sdk/src/client";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { MatrixError } from 'matrix-js-sdk/src/matrix';
|
||||
import { MatrixError } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import * as Email from '../../../email';
|
||||
import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
|
||||
import Modal from '../../../Modal';
|
||||
import { _t, _td } from '../../../languageHandler';
|
||||
import SdkConfig from '../../../SdkConfig';
|
||||
import { SAFE_LOCALPART_REGEX } from '../../../Registration';
|
||||
import withValidation, { IValidationResult } from '../elements/Validation';
|
||||
import { ValidatedServerConfig } from '../../../utils/ValidatedServerConfig';
|
||||
import * as Email from "../../../email";
|
||||
import { looksValid as phoneNumberLooksValid } from "../../../phonenumber";
|
||||
import Modal from "../../../Modal";
|
||||
import { _t, _td } from "../../../languageHandler";
|
||||
import SdkConfig from "../../../SdkConfig";
|
||||
import { SAFE_LOCALPART_REGEX } from "../../../Registration";
|
||||
import withValidation, { IValidationResult } from "../elements/Validation";
|
||||
import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
|
||||
import EmailField from "./EmailField";
|
||||
import PassphraseField from "./PassphraseField";
|
||||
import Field from '../elements/Field';
|
||||
import RegistrationEmailPromptDialog from '../dialogs/RegistrationEmailPromptDialog';
|
||||
import Field from "../elements/Field";
|
||||
import RegistrationEmailPromptDialog from "../dialogs/RegistrationEmailPromptDialog";
|
||||
import CountryDropdown from "./CountryDropdown";
|
||||
import PassphraseConfirmField from "./PassphraseConfirmField";
|
||||
import { PosthogAnalytics } from '../../../PosthogAnalytics';
|
||||
import { PosthogAnalytics } from "../../../PosthogAnalytics";
|
||||
|
||||
enum RegistrationField {
|
||||
Email = "field_email",
|
||||
|
|
@ -115,7 +115,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
};
|
||||
}
|
||||
|
||||
private onSubmit = async ev => {
|
||||
private onSubmit = async (ev) => {
|
||||
ev.preventDefault();
|
||||
ev.persist();
|
||||
|
||||
|
|
@ -126,16 +126,19 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
return;
|
||||
}
|
||||
|
||||
if (this.state.email === '') {
|
||||
if (this.state.email === "") {
|
||||
if (this.showEmail()) {
|
||||
Modal.createDialog(RegistrationEmailPromptDialog, {
|
||||
onFinished: async (confirmed: boolean, email?: string) => {
|
||||
if (confirmed) {
|
||||
this.setState({
|
||||
email,
|
||||
}, () => {
|
||||
this.doSubmit(ev);
|
||||
});
|
||||
this.setState(
|
||||
{
|
||||
email,
|
||||
},
|
||||
() => {
|
||||
this.doSubmit(ev);
|
||||
},
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
@ -164,7 +167,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
|
||||
if (promise) {
|
||||
ev.target.disabled = true;
|
||||
promise.finally(function() {
|
||||
promise.finally(function () {
|
||||
ev.target.disabled = false;
|
||||
});
|
||||
}
|
||||
|
|
@ -202,7 +205,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
|
||||
// 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));
|
||||
await new Promise<void>((resolve) => this.setState({}, resolve));
|
||||
|
||||
if (this.allFieldsValid()) {
|
||||
return true;
|
||||
|
|
@ -245,7 +248,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
});
|
||||
}
|
||||
|
||||
private onEmailChange = ev => {
|
||||
private onEmailChange = (ev) => {
|
||||
this.setState({
|
||||
email: ev.target.value.trim(),
|
||||
});
|
||||
|
|
@ -262,7 +265,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
{
|
||||
key: "required",
|
||||
test(this: RegistrationForm, { value, allowEmpty }) {
|
||||
return allowEmpty || !this.authStepIsRequired('m.login.email.identity') || !!value;
|
||||
return allowEmpty || !this.authStepIsRequired("m.login.email.identity") || !!value;
|
||||
},
|
||||
invalid: () => _t("Enter email address (required on this homeserver)"),
|
||||
},
|
||||
|
|
@ -274,17 +277,17 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
],
|
||||
});
|
||||
|
||||
private onPasswordChange = ev => {
|
||||
private onPasswordChange = (ev) => {
|
||||
this.setState({
|
||||
password: ev.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
private onPasswordValidate = result => {
|
||||
private onPasswordValidate = (result) => {
|
||||
this.markFieldValid(RegistrationField.Password, result.valid);
|
||||
};
|
||||
|
||||
private onPasswordConfirmChange = ev => {
|
||||
private onPasswordConfirmChange = (ev) => {
|
||||
this.setState({
|
||||
passwordConfirm: ev.target.value,
|
||||
});
|
||||
|
|
@ -294,19 +297,19 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
this.markFieldValid(RegistrationField.PasswordConfirm, result.valid);
|
||||
};
|
||||
|
||||
private onPhoneCountryChange = newVal => {
|
||||
private onPhoneCountryChange = (newVal) => {
|
||||
this.setState({
|
||||
phoneCountry: newVal.iso2,
|
||||
});
|
||||
};
|
||||
|
||||
private onPhoneNumberChange = ev => {
|
||||
private onPhoneNumberChange = (ev) => {
|
||||
this.setState({
|
||||
phoneNumber: ev.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
private onPhoneNumberValidate = async fieldState => {
|
||||
private onPhoneNumberValidate = async (fieldState) => {
|
||||
const result = await this.validatePhoneNumberRules(fieldState);
|
||||
this.markFieldValid(RegistrationField.PhoneNumber, result.valid);
|
||||
return result;
|
||||
|
|
@ -319,7 +322,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
{
|
||||
key: "required",
|
||||
test(this: RegistrationForm, { value, allowEmpty }) {
|
||||
return allowEmpty || !this.authStepIsRequired('m.login.msisdn') || !!value;
|
||||
return allowEmpty || !this.authStepIsRequired("m.login.msisdn") || !!value;
|
||||
},
|
||||
invalid: () => _t("Enter phone number (required on this homeserver)"),
|
||||
},
|
||||
|
|
@ -331,13 +334,13 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
],
|
||||
});
|
||||
|
||||
private onUsernameChange = ev => {
|
||||
private onUsernameChange = (ev) => {
|
||||
this.setState({
|
||||
username: ev.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
private onUsernameValidate = async fieldState => {
|
||||
private onUsernameValidate = async (fieldState) => {
|
||||
const result = await this.validateUsernameRules(fieldState);
|
||||
this.markFieldValid(RegistrationField.Username, result.valid);
|
||||
return result;
|
||||
|
|
@ -373,8 +376,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
},
|
||||
{
|
||||
key: "safeLocalpart",
|
||||
test: ({ value }, usernameAvailable) => (!value || SAFE_LOCALPART_REGEX.test(value))
|
||||
&& usernameAvailable !== UsernameAvailableStatus.Invalid,
|
||||
test: ({ value }, usernameAvailable) =>
|
||||
(!value || SAFE_LOCALPART_REGEX.test(value)) &&
|
||||
usernameAvailable !== UsernameAvailableStatus.Invalid,
|
||||
invalid: () => _t("Some characters not allowed"),
|
||||
},
|
||||
{
|
||||
|
|
@ -387,9 +391,10 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
|
||||
return usernameAvailable === UsernameAvailableStatus.Available;
|
||||
},
|
||||
invalid: (usernameAvailable) => usernameAvailable === UsernameAvailableStatus.Error
|
||||
? _t("Unable to check if username has been taken. Try again later.")
|
||||
: _t("Someone already has that username. Try another or if it is you, sign in below."),
|
||||
invalid: (usernameAvailable) =>
|
||||
usernameAvailable === UsernameAvailableStatus.Error
|
||||
? _t("Unable to check if username has been taken. Try again later.")
|
||||
: _t("Someone already has that username. Try another or if it is you, sign in below."),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
@ -419,7 +424,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
}
|
||||
|
||||
private showEmail() {
|
||||
if (!this.authStepIsUsed('m.login.email.identity')) {
|
||||
if (!this.authStepIsUsed("m.login.email.identity")) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
|
|
@ -427,7 +432,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
|
||||
private showPhoneNumber() {
|
||||
const threePidLogin = !SdkConfig.get().disable_3pid_login;
|
||||
if (!threePidLogin || !this.authStepIsUsed('m.login.msisdn')) {
|
||||
if (!threePidLogin || !this.authStepIsUsed("m.login.msisdn")) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
|
|
@ -437,78 +442,86 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
if (!this.showEmail()) {
|
||||
return null;
|
||||
}
|
||||
const emailLabel = this.authStepIsRequired('m.login.email.identity') ?
|
||||
_td("Email") :
|
||||
_td("Email (optional)");
|
||||
return <EmailField
|
||||
fieldRef={field => this[RegistrationField.Email] = field}
|
||||
label={emailLabel}
|
||||
value={this.state.email}
|
||||
validationRules={this.validateEmailRules.bind(this)}
|
||||
onChange={this.onEmailChange}
|
||||
onValidate={this.onEmailValidate}
|
||||
/>;
|
||||
const emailLabel = this.authStepIsRequired("m.login.email.identity") ? _td("Email") : _td("Email (optional)");
|
||||
return (
|
||||
<EmailField
|
||||
fieldRef={(field) => (this[RegistrationField.Email] = field)}
|
||||
label={emailLabel}
|
||||
value={this.state.email}
|
||||
validationRules={this.validateEmailRules.bind(this)}
|
||||
onChange={this.onEmailChange}
|
||||
onValidate={this.onEmailValidate}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private renderPassword() {
|
||||
return <PassphraseField
|
||||
id="mx_RegistrationForm_password"
|
||||
fieldRef={field => this[RegistrationField.Password] = field}
|
||||
minScore={PASSWORD_MIN_SCORE}
|
||||
value={this.state.password}
|
||||
onChange={this.onPasswordChange}
|
||||
onValidate={this.onPasswordValidate}
|
||||
/>;
|
||||
return (
|
||||
<PassphraseField
|
||||
id="mx_RegistrationForm_password"
|
||||
fieldRef={(field) => (this[RegistrationField.Password] = field)}
|
||||
minScore={PASSWORD_MIN_SCORE}
|
||||
value={this.state.password}
|
||||
onChange={this.onPasswordChange}
|
||||
onValidate={this.onPasswordValidate}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderPasswordConfirm() {
|
||||
return <PassphraseConfirmField
|
||||
id="mx_RegistrationForm_passwordConfirm"
|
||||
fieldRef={field => this[RegistrationField.PasswordConfirm] = field}
|
||||
autoComplete="new-password"
|
||||
value={this.state.passwordConfirm}
|
||||
password={this.state.password}
|
||||
onChange={this.onPasswordConfirmChange}
|
||||
onValidate={this.onPasswordConfirmValidate}
|
||||
/>;
|
||||
return (
|
||||
<PassphraseConfirmField
|
||||
id="mx_RegistrationForm_passwordConfirm"
|
||||
fieldRef={(field) => (this[RegistrationField.PasswordConfirm] = field)}
|
||||
autoComplete="new-password"
|
||||
value={this.state.passwordConfirm}
|
||||
password={this.state.password}
|
||||
onChange={this.onPasswordConfirmChange}
|
||||
onValidate={this.onPasswordConfirmValidate}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderPhoneNumber() {
|
||||
if (!this.showPhoneNumber()) {
|
||||
return null;
|
||||
}
|
||||
const phoneLabel = this.authStepIsRequired('m.login.msisdn') ?
|
||||
_t("Phone") :
|
||||
_t("Phone (optional)");
|
||||
const phoneCountry = <CountryDropdown
|
||||
value={this.state.phoneCountry}
|
||||
isSmall={true}
|
||||
showPrefix={true}
|
||||
onOptionChange={this.onPhoneCountryChange}
|
||||
/>;
|
||||
return <Field
|
||||
ref={field => this[RegistrationField.PhoneNumber] = field}
|
||||
type="text"
|
||||
label={phoneLabel}
|
||||
value={this.state.phoneNumber}
|
||||
prefixComponent={phoneCountry}
|
||||
onChange={this.onPhoneNumberChange}
|
||||
onValidate={this.onPhoneNumberValidate}
|
||||
/>;
|
||||
const phoneLabel = this.authStepIsRequired("m.login.msisdn") ? _t("Phone") : _t("Phone (optional)");
|
||||
const phoneCountry = (
|
||||
<CountryDropdown
|
||||
value={this.state.phoneCountry}
|
||||
isSmall={true}
|
||||
showPrefix={true}
|
||||
onOptionChange={this.onPhoneCountryChange}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<Field
|
||||
ref={(field) => (this[RegistrationField.PhoneNumber] = field)}
|
||||
type="text"
|
||||
label={phoneLabel}
|
||||
value={this.state.phoneNumber}
|
||||
prefixComponent={phoneCountry}
|
||||
onChange={this.onPhoneNumberChange}
|
||||
onValidate={this.onPhoneNumberValidate}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderUsername() {
|
||||
return <Field
|
||||
id="mx_RegistrationForm_username"
|
||||
ref={field => this[RegistrationField.Username] = field}
|
||||
type="text"
|
||||
autoFocus={true}
|
||||
label={_t("Username")}
|
||||
placeholder={_t("Username").toLocaleLowerCase()}
|
||||
value={this.state.username}
|
||||
onChange={this.onUsernameChange}
|
||||
onValidate={this.onUsernameValidate}
|
||||
/>;
|
||||
return (
|
||||
<Field
|
||||
id="mx_RegistrationForm_username"
|
||||
ref={(field) => (this[RegistrationField.Username] = field)}
|
||||
type="text"
|
||||
autoFocus={true}
|
||||
label={_t("Username")}
|
||||
placeholder={_t("Username").toLocaleLowerCase()}
|
||||
value={this.state.username}
|
||||
onChange={this.onUsernameChange}
|
||||
onValidate={this.onUsernameValidate}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -519,40 +532,36 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
|
|||
let emailHelperText = null;
|
||||
if (this.showEmail()) {
|
||||
if (this.showPhoneNumber()) {
|
||||
emailHelperText = <div>
|
||||
{
|
||||
_t("Add an email to be able to reset your password.")
|
||||
} {
|
||||
_t("Use email or phone to optionally be discoverable by existing contacts.")
|
||||
}
|
||||
</div>;
|
||||
emailHelperText = (
|
||||
<div>
|
||||
{_t("Add an email to be able to reset your password.")}{" "}
|
||||
{_t("Use email or phone to optionally be discoverable by existing contacts.")}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
emailHelperText = <div>
|
||||
{
|
||||
_t("Add an email to be able to reset your password.")
|
||||
} {
|
||||
_t("Use email to optionally be discoverable by existing contacts.")
|
||||
}
|
||||
</div>;
|
||||
emailHelperText = (
|
||||
<div>
|
||||
{_t("Add an email to be able to reset your password.")}{" "}
|
||||
{_t("Use email to optionally be discoverable by existing contacts.")}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<div className="mx_AuthBody_fieldRow">{this.renderUsername()}</div>
|
||||
<div className="mx_AuthBody_fieldRow">
|
||||
{ this.renderUsername() }
|
||||
{this.renderPassword()}
|
||||
{this.renderPasswordConfirm()}
|
||||
</div>
|
||||
<div className="mx_AuthBody_fieldRow">
|
||||
{ this.renderPassword() }
|
||||
{ this.renderPasswordConfirm() }
|
||||
{this.renderEmail()}
|
||||
{this.renderPhoneNumber()}
|
||||
</div>
|
||||
<div className="mx_AuthBody_fieldRow">
|
||||
{ this.renderEmail() }
|
||||
{ this.renderPhoneNumber() }
|
||||
</div>
|
||||
{ emailHelperText }
|
||||
{ registerButton }
|
||||
{emailHelperText}
|
||||
{registerButton}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue