Convert AccessSecretStorageDialog to TypeScript
This is to make upcoming changes a bit easier to do.
This commit is contained in:
parent
318db15e35
commit
92ee1ad3cc
1 changed files with 66 additions and 59 deletions
|
@ -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}
|
||||||
/>
|
/>
|
Loading…
Reference in a new issue