PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Convert AccessSecretStorageDialog to TypeScript

Browse source 
This is to make upcoming changes a bit easier to do.
This commit is contained in:
Travis Ralston 2021-03-25 23:34:45 -06:00
parent 318db15e35
commit 92ee1ad3cc
1 changed files with 66 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
src/components/views/dialogs/security/AccessSecretStorageDialog.js → src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
View file

@ -1,6 +1,5 @@
/* /*
Copyright 2018, 2019 New Vector Ltd Copyright 2018-2021 The Matrix.org Foundation C.I.C.
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -17,14 +16,16 @@ limitations under the License.
import {debounce} from "lodash"; import {debounce} from "lodash";
import classNames from 'classnames'; import classNames from 'classnames';
import React from 'react'; import React, {ChangeEvent, FormEvent} from 'react';
import PropTypes from "prop-types"; import {ISecretStorageKeyInfo} from "matrix-js-sdk/src";
import * as sdk from '../../../../index'; import * as sdk from '../../../../index';
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 {_t} from '../../../../languageHandler'; import {_t} from '../../../../languageHandler';
import {IDialogProps} from "../IDialogProps";
import BaseDialog from "../BaseDialog";
// Maximum acceptable size of a key file. It's 59 characters including the spaces we encode, // Maximum acceptable size of a key file. It's 59 characters including the spaces we encode,
// so this should be plenty and allow for people putting extra whitespace in the file because // so this should be plenty and allow for people putting extra whitespace in the file because
@ -34,22 +35,30 @@ const KEY_FILE_MAX_SIZE = 128;
// Don't shout at the user that their key is invalid every time they type a key: wait a short time // Don't shout at the user that their key is invalid every time they type a key: wait a short time
const VALIDATION_THROTTLE_MS = 200; const VALIDATION_THROTTLE_MS = 200;
interface IProps extends IDialogProps {
keyInfo: ISecretStorageKeyInfo;
checkPrivateKey: (k: {passphrase?: string, recoveryKey?: string}) => boolean;
}
interface IState {
recoveryKey: string;
recoveryKeyValid: boolean | null;
recoveryKeyCorrect: boolean | null;
recoveryKeyFileError: boolean | null;
forceRecoveryKey: boolean;
passPhrase: string;
keyMatches: boolean | null;
}
/* /*
* Access Secure Secret Storage by requesting the user's passphrase. * Access Secure Secret Storage by requesting the user's passphrase.
*/ */
export default class AccessSecretStorageDialog extends React.PureComponent { export default class AccessSecretStorageDialog extends React.PureComponent<IProps, IState> {
static propTypes = { private fileUpload = React.createRef<HTMLInputElement>();
// { passphrase, pubkey }
keyInfo: PropTypes.object.isRequired,
// Function from one of { passphrase, recoveryKey } -> boolean
checkPrivateKey: PropTypes.func.isRequired,
}
constructor(props) { constructor(props) {
super(props); super(props);
this._fileUpload = React.createRef();
this.state = { this.state = {
recoveryKey: "", recoveryKey: "",
recoveryKeyValid: null, recoveryKeyValid: null,
@ -61,21 +70,21 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
}; };
} }
_onCancel = () => { private onCancel = () => {
this.props.onFinished(false); this.props.onFinished(false);
} };
_onUseRecoveryKeyClick = () => { private onUseRecoveryKeyClick = () => {
this.setState({ this.setState({
forceRecoveryKey: true, forceRecoveryKey: true,
}); });
} };
_validateRecoveryKeyOnChange = debounce(() => { private validateRecoveryKeyOnChange = debounce(async () => {
this._validateRecoveryKey(); await this.validateRecoveryKey();
}, VALIDATION_THROTTLE_MS); }, VALIDATION_THROTTLE_MS);
async _validateRecoveryKey() { private async validateRecoveryKey() {
if (this.state.recoveryKey === '') { if (this.state.recoveryKey === '') {
this.setState({ this.setState({
recoveryKeyValid: null, recoveryKeyValid: null,
@ -102,27 +111,27 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
} }
} }
_onRecoveryKeyChange = (e) => { private onRecoveryKeyChange = (ev: ChangeEvent<HTMLInputElement>) => {
this.setState({ this.setState({
recoveryKey: e.target.value, recoveryKey: ev.target.value,
recoveryKeyFileError: null, recoveryKeyFileError: null,
}); });
// also clear the file upload control so that the user can upload the same file // also clear the file upload control so that the user can upload the same file
// the did before (otherwise the onchange wouldn't fire) // the did before (otherwise the onchange wouldn't fire)
if (this._fileUpload.current) this._fileUpload.current.value = null; if (this.fileUpload.current) this.fileUpload.current.value = null;
// We don't use Field's validation here because a) we want it in a separate place rather // We don't use Field's validation here because a) we want it in a separate place rather
// than in a tooltip and b) we want it to display feedback based on the uploaded file // than in a tooltip and b) we want it to display feedback based on the uploaded file
// as well as the text box. Ideally we would refactor Field's validation logic so we could // as well as the text box. Ideally we would refactor Field's validation logic so we could
// re-use some of it. // re-use some of it.
this._validateRecoveryKeyOnChange(); this.validateRecoveryKeyOnChange();
} };
_onRecoveryKeyFileChange = async e => { private onRecoveryKeyFileChange = async (ev: ChangeEvent<HTMLInputElement>) => {
if (e.target.files.length === 0) return; if (ev.target.files.length === 0) return;
const f = e.target.files[0]; const f = ev.target.files[0];
if (f.size > KEY_FILE_MAX_SIZE) { if (f.size > KEY_FILE_MAX_SIZE) {
this.setState({ this.setState({
@ -140,7 +149,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
recoveryKeyFileError: null, recoveryKeyFileError: null,
recoveryKey: contents.trim(), recoveryKey: contents.trim(),
}); });
this._validateRecoveryKey(); await this.validateRecoveryKey();
} else { } else {
this.setState({ this.setState({
recoveryKeyFileError: true, recoveryKeyFileError: true,
@ -150,14 +159,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
}); });
} }
} }
};
private onRecoveryKeyFileUploadClick = () => {
this.fileUpload.current.click();
} }
_onRecoveryKeyFileUploadClick = () => { private onPassPhraseNext = async (ev: FormEvent<HTMLFormElement>) => {
this._fileUpload.current.click(); ev.preventDefault();
}
_onPassPhraseNext = async (e) => {
e.preventDefault();
if (this.state.passPhrase.length <= 0) return; if (this.state.passPhrase.length <= 0) return;
@ -169,10 +178,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
} else { } else {
this.setState({ keyMatches }); this.setState({ keyMatches });
} }
} };
_onRecoveryKeyNext = async (e) => { private onRecoveryKeyNext = async (ev: FormEvent<HTMLFormElement>) => {
e.preventDefault(); ev.preventDefault();
if (!this.state.recoveryKeyValid) return; if (!this.state.recoveryKeyValid) return;
@ -184,16 +193,16 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
} else { } else {
this.setState({ keyMatches }); this.setState({ keyMatches });
} }
} };
_onPassPhraseChange = (e) => { private onPassPhraseChange = (ev: ChangeEvent<HTMLInputElement>) => {
this.setState({ this.setState({
passPhrase: e.target.value, passPhrase: ev.target.value,
keyMatches: null, keyMatches: null,
}); });
} };
getKeyValidationText() { private getKeyValidationText(): string {
if (this.state.recoveryKeyFileError) { if (this.state.recoveryKeyFileError) {
return _t("Wrong file type"); return _t("Wrong file type");
} else if (this.state.recoveryKeyCorrect) { } else if (this.state.recoveryKeyCorrect) {
@ -208,8 +217,6 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
} }
render() { render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const hasPassphrase = ( const hasPassphrase = (
this.props.keyInfo && this.props.keyInfo &&
this.props.keyInfo.passphrase && this.props.keyInfo.passphrase &&
@ -244,18 +251,18 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
{ {
button: s => <AccessibleButton className="mx_linkButton" button: s => <AccessibleButton className="mx_linkButton"
element="span" element="span"
onClick={this._onUseRecoveryKeyClick} onClick={this.onUseRecoveryKeyClick}
> >
{s} {s}
</AccessibleButton>, </AccessibleButton>,
}, },
)}</p> )}</p>
<form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}> <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this.onPassPhraseNext}>
<input <input
type="password" type="password"
className="mx_AccessSecretStorageDialog_passPhraseInput" className="mx_AccessSecretStorageDialog_passPhraseInput"
onChange={this._onPassPhraseChange} onChange={this.onPassPhraseChange}
value={this.state.passPhrase} value={this.state.passPhrase}
autoFocus={true} autoFocus={true}
autoComplete="new-password" autoComplete="new-password"
@ -264,9 +271,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
{keyStatus} {keyStatus}
<DialogButtons <DialogButtons
primaryButton={_t('Continue')} primaryButton={_t('Continue')}
onPrimaryButtonClick={this._onPassPhraseNext} onPrimaryButtonClick={this.onPassPhraseNext}
hasCancel={true} hasCancel={true}
onCancel={this._onCancel} onCancel={this.onCancel}
focus={false} focus={false}
primaryDisabled={this.state.passPhrase.length === 0} primaryDisabled={this.state.passPhrase.length === 0}
/> />
@ -291,7 +298,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
<form <form
className="mx_AccessSecretStorageDialog_primaryContainer" className="mx_AccessSecretStorageDialog_primaryContainer"
onSubmit={this._onRecoveryKeyNext} onSubmit={this.onRecoveryKeyNext}
spellCheck={false} spellCheck={false}
autoComplete="off" autoComplete="off"
> >
@ -301,7 +308,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
type="password" type="password"
label={_t('Security Key')} label={_t('Security Key')}
value={this.state.recoveryKey} value={this.state.recoveryKey}
onChange={this._onRecoveryKeyChange} onChange={this.onRecoveryKeyChange}
forceValidity={this.state.recoveryKeyCorrect} forceValidity={this.state.recoveryKeyCorrect}
autoComplete="off" autoComplete="off"
/> />
@ -312,10 +319,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
<div> <div>
<input type="file" <input type="file"
className="mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput" className="mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput"
ref={this._fileUpload} ref={this.fileUpload}
onChange={this._onRecoveryKeyFileChange} onChange={this.onRecoveryKeyFileChange}
/> />
<AccessibleButton kind="primary" onClick={this._onRecoveryKeyFileUploadClick}> <AccessibleButton kind="primary" onClick={this.onRecoveryKeyFileUploadClick}>
{_t("Upload")} {_t("Upload")}
</AccessibleButton> </AccessibleButton>
</div> </div>
@ -323,11 +330,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
{recoveryKeyFeedback} {recoveryKeyFeedback}
<DialogButtons <DialogButtons
primaryButton={_t('Continue')} primaryButton={_t('Continue')}
onPrimaryButtonClick={this._onRecoveryKeyNext} onPrimaryButtonClick={this.onRecoveryKeyNext}
hasCancel={true} hasCancel={true}
cancelButton={_t("Go Back")} cancelButton={_t("Go Back")}
cancelButtonClass='danger' cancelButtonClass='danger'
onCancel={this._onCancel} onCancel={this.onCancel}
focus={false} focus={false}
primaryDisabled={!this.state.recoveryKeyValid} primaryDisabled={!this.state.recoveryKeyValid}
/> />