Convert SetEmailDialog to TS
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
parent
02f672570a
commit
5bf64c2075
1 changed files with 34 additions and 28 deletions
|
@ -16,13 +16,26 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import * as sdk from '../../../index';
|
|
||||||
import * as Email from '../../../email';
|
import * as Email from '../../../email';
|
||||||
import AddThreepid from '../../../AddThreepid';
|
import AddThreepid from '../../../AddThreepid';
|
||||||
import { _t } from '../../../languageHandler';
|
import { _t } from '../../../languageHandler';
|
||||||
import Modal from '../../../Modal';
|
import Modal from '../../../Modal';
|
||||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||||
|
import Spinner from "../elements/Spinner";
|
||||||
|
import ErrorDialog from "./ErrorDialog";
|
||||||
|
import QuestionDialog from "./QuestionDialog";
|
||||||
|
import BaseDialog from "./BaseDialog";
|
||||||
|
import EditableText from "../elements/EditableText";
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
title: string;
|
||||||
|
onFinished: (confirmed: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IState {
|
||||||
|
emailAddress: string;
|
||||||
|
emailBusy: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Prompt the user to set an email address.
|
* Prompt the user to set an email address.
|
||||||
|
@ -30,26 +43,25 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||||
* On success, `onFinished(true)` is called.
|
* On success, `onFinished(true)` is called.
|
||||||
*/
|
*/
|
||||||
@replaceableComponent("views.dialogs.SetEmailDialog")
|
@replaceableComponent("views.dialogs.SetEmailDialog")
|
||||||
export default class SetEmailDialog extends React.Component {
|
export default class SetEmailDialog extends React.Component<IProps, IState> {
|
||||||
static propTypes = {
|
private addThreepid: AddThreepid;
|
||||||
onFinished: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
state = {
|
constructor(props: IProps) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
emailAddress: '',
|
emailAddress: '',
|
||||||
emailBusy: false,
|
emailBusy: false,
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
onEmailAddressChanged = value => {
|
private onEmailAddressChanged = (value: string): void => {
|
||||||
this.setState({
|
this.setState({
|
||||||
emailAddress: value,
|
emailAddress: value,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
onSubmit = () => {
|
private onSubmit = (): void => {
|
||||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
||||||
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
|
||||||
|
|
||||||
const emailAddress = this.state.emailAddress;
|
const emailAddress = this.state.emailAddress;
|
||||||
if (!Email.looksValid(emailAddress)) {
|
if (!Email.looksValid(emailAddress)) {
|
||||||
Modal.createTrackedDialog('Invalid Email Address', '', ErrorDialog, {
|
Modal.createTrackedDialog('Invalid Email Address', '', ErrorDialog, {
|
||||||
|
@ -58,8 +70,8 @@ export default class SetEmailDialog extends React.Component {
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this._addThreepid = new AddThreepid();
|
this.addThreepid = new AddThreepid();
|
||||||
this._addThreepid.addEmailAddress(emailAddress).then(() => {
|
this.addThreepid.addEmailAddress(emailAddress).then(() => {
|
||||||
Modal.createTrackedDialog('Verification Pending', '', QuestionDialog, {
|
Modal.createTrackedDialog('Verification Pending', '', QuestionDialog, {
|
||||||
title: _t("Verification Pending"),
|
title: _t("Verification Pending"),
|
||||||
description: _t(
|
description: _t(
|
||||||
|
@ -80,11 +92,11 @@ export default class SetEmailDialog extends React.Component {
|
||||||
this.setState({ emailBusy: true });
|
this.setState({ emailBusy: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
onCancelled = () => {
|
private onCancelled = (): void => {
|
||||||
this.props.onFinished(false);
|
this.props.onFinished(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
onEmailDialogFinished = ok => {
|
private onEmailDialogFinished = (ok: boolean): void => {
|
||||||
if (ok) {
|
if (ok) {
|
||||||
this.verifyEmailAddress();
|
this.verifyEmailAddress();
|
||||||
} else {
|
} else {
|
||||||
|
@ -92,13 +104,12 @@ export default class SetEmailDialog extends React.Component {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
verifyEmailAddress() {
|
private verifyEmailAddress(): void {
|
||||||
this._addThreepid.checkEmailLinkClicked().then(() => {
|
this.addThreepid.checkEmailLinkClicked().then(() => {
|
||||||
this.props.onFinished(true);
|
this.props.onFinished(true);
|
||||||
}, (err) => {
|
}, (err) => {
|
||||||
this.setState({ emailBusy: false });
|
this.setState({ emailBusy: false });
|
||||||
if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
|
if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
|
||||||
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
|
||||||
const message = _t("Unable to verify email address.") + " " +
|
const message = _t("Unable to verify email address.") + " " +
|
||||||
_t("Please check your email and click on the link it contains. Once this is done, click continue.");
|
_t("Please check your email and click on the link it contains. Once this is done, click continue.");
|
||||||
Modal.createTrackedDialog('Verification Pending', '3pid Auth Failed', QuestionDialog, {
|
Modal.createTrackedDialog('Verification Pending', '3pid Auth Failed', QuestionDialog, {
|
||||||
|
@ -108,7 +119,6 @@ export default class SetEmailDialog extends React.Component {
|
||||||
onFinished: this.onEmailDialogFinished,
|
onFinished: this.onEmailDialogFinished,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
||||||
console.error("Unable to verify email address: " + err);
|
console.error("Unable to verify email address: " + err);
|
||||||
Modal.createTrackedDialog('Unable to verify email address', '', ErrorDialog, {
|
Modal.createTrackedDialog('Unable to verify email address', '', ErrorDialog, {
|
||||||
title: _t("Unable to verify email address."),
|
title: _t("Unable to verify email address."),
|
||||||
|
@ -118,11 +128,7 @@ export default class SetEmailDialog extends React.Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
public render(): JSX.Element {
|
||||||
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
|
||||||
const Spinner = sdk.getComponent('elements.Spinner');
|
|
||||||
const EditableText = sdk.getComponent('elements.EditableText');
|
|
||||||
|
|
||||||
const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
|
const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
|
||||||
initialValue={this.state.emailAddress}
|
initialValue={this.state.emailAddress}
|
||||||
className="mx_SetEmailDialog_email_input"
|
className="mx_SetEmailDialog_email_input"
|
Loading…
Reference in a new issue