OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Convert EmailAddresses to TS 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-09-20 17:08:01 +02:00
parent 5b8279dd16
commit a2ecf18096
No known key found for this signature in database
GPG Key ID: 55C211A1226CB17D
1 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/views/settings/account/EmailAddresses.js → src/components/views/settings/account/EmailAddresses.tsx
View File

@ -16,16 +16,16 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import { _t } from "../../../../languageHandler"; import { _t } from "../../../../languageHandler";
import { MatrixClientPeg } from "../../../../MatrixClientPeg"; import { MatrixClientPeg } from "../../../../MatrixClientPeg";
import Field from "../../elements/Field"; import Field from "../../elements/Field";
import AccessibleButton from "../../elements/AccessibleButton"; import AccessibleButton from "../../elements/AccessibleButton";
import * as Email from "../../../../email"; import * as Email from "../../../../email";
import AddThreepid from "../../../../AddThreepid"; import AddThreepid from "../../../../AddThreepid";
import * as sdk from '../../../../index';
import Modal from '../../../../Modal'; import Modal from '../../../../Modal';
import { replaceableComponent } from "../../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../../utils/replaceableComponent";
import ErrorDialog from "../../dialogs/ErrorDialog";
import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
/* /*
TODO: Improve the UX for everything in here. TODO: Improve the UX for everything in here.
@ -39,42 +39,45 @@ places to communicate errors - these should be replaced with inline validation w
that is available. that is available.
*/ */
export class ExistingEmailAddress extends React.Component { interface IExistingEmailAddressProps {
static propTypes = { email: IThreepid;
email: PropTypes.object.isRequired, onRemoved: (emails: IThreepid) => void;
onRemoved: PropTypes.func.isRequired, }
};
constructor() { interface IExistingEmailAddressState {
super(); verifyRemove: boolean;
}
export class ExistingEmailAddress extends React.Component<IExistingEmailAddressProps, IExistingEmailAddressState> {
constructor(props: IExistingEmailAddressProps) {
super(props);
this.state = { this.state = {
verifyRemove: false, verifyRemove: false,
}; };
} }
_onRemove = (e) => { private onRemove = (e: React.MouseEvent): void => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.setState({ verifyRemove: true }); this.setState({ verifyRemove: true });
}; };
_onDontRemove = (e) => { private onDontRemove = (e: React.MouseEvent): void => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.setState({ verifyRemove: false }); this.setState({ verifyRemove: false });
}; };
_onActuallyRemove = (e) => { private onActuallyRemove = (e: React.MouseEvent): void => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
MatrixClientPeg.get().deleteThreePid(this.props.email.medium, this.props.email.address).then(() => { MatrixClientPeg.get().deleteThreePid(this.props.email.medium, this.props.email.address).then(() => {
return this.props.onRemoved(this.props.email); return this.props.onRemoved(this.props.email);
}).catch((err) => { }).catch((err) => {
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
console.error("Unable to remove contact information: " + err); console.error("Unable to remove contact information: " + err);
Modal.createTrackedDialog('Remove 3pid failed', '', ErrorDialog, { Modal.createTrackedDialog('Remove 3pid failed', '', ErrorDialog, {
title: _t("Unable to remove contact information"), title: _t("Unable to remove contact information"),
@ -83,7 +86,7 @@ export class ExistingEmailAddress extends React.Component {
}); });
}; };
render() { public render(): JSX.Element {
if (this.state.verifyRemove) { if (this.state.verifyRemove) {
return ( return (
<div className="mx_ExistingEmailAddress"> <div className="mx_ExistingEmailAddress">
@ -91,14 +94,14 @@ export class ExistingEmailAddress extends React.Component {
{ _t("Remove %(email)s?", { email: this.props.email.address } ) } { _t("Remove %(email)s?", { email: this.props.email.address } ) }
</span> </span>
<AccessibleButton <AccessibleButton
onClick={this._onActuallyRemove} onClick={this.onActuallyRemove}
kind="danger_sm" kind="danger_sm"
className="mx_ExistingEmailAddress_confirmBtn" className="mx_ExistingEmailAddress_confirmBtn"
> >
{ _t("Remove") } { _t("Remove") }
</AccessibleButton> </AccessibleButton>
<AccessibleButton <AccessibleButton
onClick={this._onDontRemove} onClick={this.onDontRemove}
kind="link_sm" kind="link_sm"
className="mx_ExistingEmailAddress_confirmBtn" className="mx_ExistingEmailAddress_confirmBtn"
> >
@ -111,7 +114,7 @@ export class ExistingEmailAddress extends React.Component {
return ( return (
<div className="mx_ExistingEmailAddress"> <div className="mx_ExistingEmailAddress">
<span className="mx_ExistingEmailAddress_email">{ this.props.email.address }</span> <span className="mx_ExistingEmailAddress_email">{ this.props.email.address }</span>
<AccessibleButton onClick={this._onRemove} kind="danger_sm"> <AccessibleButton onClick={this.onRemove} kind="danger_sm">
{ _t("Remove") } { _t("Remove") }
</AccessibleButton> </AccessibleButton>
</div> </div>
@ -119,14 +122,21 @@ export class ExistingEmailAddress extends React.Component {
} }
} }
@replaceableComponent("views.settings.account.EmailAddresses") interface IProps {
export default class EmailAddresses extends React.Component { emails: IThreepid[];
static propTypes = { onEmailsChange: (emails: Partial<IThreepid>[]) => void;
emails: PropTypes.array.isRequired, }
onEmailsChange: PropTypes.func.isRequired,
}
constructor(props) { interface IState {
verifying: boolean;
addTask: any; // FIXME: When AddThreepid is TSfied
continueDisabled: boolean;
newEmailAddress: string;
}
@replaceableComponent("views.settings.account.EmailAddresses")
export default class EmailAddresses extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props); super(props);
this.state = { this.state = {
@ -137,24 +147,23 @@ export default class EmailAddresses extends React.Component {
}; };
} }
_onRemoved = (address) => { private onRemoved = (address): void => {
const emails = this.props.emails.filter((e) => e !== address); const emails = this.props.emails.filter((e) => e !== address);
this.props.onEmailsChange(emails); this.props.onEmailsChange(emails);
}; };
_onChangeNewEmailAddress = (e) => { private onChangeNewEmailAddress = (e: React.ChangeEvent<HTMLInputElement>): void => {
this.setState({ this.setState({
newEmailAddress: e.target.value, newEmailAddress: e.target.value,
}); });
}; };
_onAddClick = (e) => { private onAddClick = (e: React.FormEvent): void => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (!this.state.newEmailAddress) return; if (!this.state.newEmailAddress) return;
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
const email = this.state.newEmailAddress; const email = this.state.newEmailAddress;
// TODO: Inline field validation // TODO: Inline field validation
@ -181,7 +190,7 @@ export default class EmailAddresses extends React.Component {
}); });
}; };
_onContinueClick = (e) => { private onContinueClick = (e: React.MouseEvent): void => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
@ -192,7 +201,7 @@ export default class EmailAddresses extends React.Component {
const email = this.state.newEmailAddress; const email = this.state.newEmailAddress;
const emails = [ const emails = [
...this.props.emails, ...this.props.emails,
{ address: email, medium: "email" }, { address: email, medium: ThreepidMedium.Email },
]; ];
this.props.onEmailsChange(emails); this.props.onEmailsChange(emails);
newEmailAddress = ""; newEmailAddress = "";
@ -205,7 +214,6 @@ export default class EmailAddresses extends React.Component {
}); });
}).catch((err) => { }).catch((err) => {
this.setState({ continueDisabled: false }); this.setState({ continueDisabled: false });
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
if (err.errcode === 'M_THREEPID_AUTH_FAILED') { if (err.errcode === 'M_THREEPID_AUTH_FAILED') {
Modal.createTrackedDialog("Email hasn't been verified yet", "", ErrorDialog, { Modal.createTrackedDialog("Email hasn't been verified yet", "", ErrorDialog, {
title: _t("Your email address hasn't been verified yet"), title: _t("Your email address hasn't been verified yet"),
@ -222,13 +230,13 @@ export default class EmailAddresses extends React.Component {
}); });
}; };
render() { public render(): JSX.Element {
const existingEmailElements = this.props.emails.map((e) => { const existingEmailElements = this.props.emails.map((e) => {
return <ExistingEmailAddress email={e} onRemoved={this._onRemoved} key={e.address} />; return <ExistingEmailAddress email={e} onRemoved={this.onRemoved} key={e.address} />;
}); });
let addButton = ( let addButton = (
<AccessibleButton onClick={this._onAddClick} kind="primary"> <AccessibleButton onClick={this.onAddClick} kind="primary">
{ _t("Add") } { _t("Add") }
</AccessibleButton> </AccessibleButton>
); );
@ -237,7 +245,7 @@ export default class EmailAddresses extends React.Component {
<div> <div>
<div>{ _t("We've sent you an email to verify your address. Please follow the instructions there and then click the button below.") }</div> <div>{ _t("We've sent you an email to verify your address. Please follow the instructions there and then click the button below.") }</div>
<AccessibleButton <AccessibleButton
onClick={this._onContinueClick} onClick={this.onContinueClick}
kind="primary" kind="primary"
disabled={this.state.continueDisabled} disabled={this.state.continueDisabled}
> >
@ -251,7 +259,7 @@ export default class EmailAddresses extends React.Component {
<div className="mx_EmailAddresses"> <div className="mx_EmailAddresses">
{ existingEmailElements } { existingEmailElements }
<form <form
onSubmit={this._onAddClick} onSubmit={this.onAddClick}
autoComplete="off" autoComplete="off"
noValidate={true} noValidate={true}
className="mx_EmailAddresses_new" className="mx_EmailAddresses_new"
@ -262,7 +270,7 @@ export default class EmailAddresses extends React.Component {
autoComplete="off" autoComplete="off"
disabled={this.state.verifying} disabled={this.state.verifying}
value={this.state.newEmailAddress} value={this.state.newEmailAddress}
onChange={this._onChangeNewEmailAddress} onChange={this.onChangeNewEmailAddress}
/> />
{ addButton } { addButton }
</form> </form>