imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert inputs on Export/Import Room Key dialogs to be real Fields (#9350)

Browse source 
* Convert inputs on Export/Import Room Key dialogs to be real Fields

Fixes https://github.com/vector-im/element-web/issues/18517

* Correctly label the second field

* Appease the linter
This commit is contained in:
Travis Ralston 2022-10-05 01:28:57 -04:00 • committed by GitHub
parent 99488b84ec
commit 1032334b20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
View file

@ -1,5 +1,6 @@
/*
Copyright 2017 Vector Creations Ltd
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -22,6 +23,7 @@ import * as MegolmExportEncryption from '../../../../utils/MegolmExportEncryptio
import { _t } from '../../../../languageHandler';
import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps";
import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
import Field from "../../../../components/views/elements/Field";
function readFileAsArrayBuffer(file: File): Promise<ArrayBuffer> {
return new Promise((resolve, reject) => {
@ -48,12 +50,12 @@ interface IState {
enableSubmit: boolean;
phase: Phase;
errStr: string;
passphrase: string;
}
export default class ImportE2eKeysDialog extends React.Component<IProps, IState> {
private unmounted = false;
private file = createRef<HTMLInputElement>();
private passphrase = createRef<HTMLInputElement>();
constructor(props: IProps) {
super(props);
@ -62,6 +64,7 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
enableSubmit: false,
phase: Phase.Edit,
errStr: null,
passphrase: "",
};
}
@ -69,16 +72,22 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
this.unmounted = true;
}
private onFormChange = (ev: React.FormEvent): void => {
private onFormChange = (): void => {
const files = this.file.current.files || [];
this.setState({
enableSubmit: (this.passphrase.current.value !== "" && files.length > 0),
enableSubmit: (this.state.passphrase !== "" && files.length > 0),
});
};
private onPassphraseChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
this.setState({ passphrase: ev.target.value });
this.onFormChange(); // update general form state too
};
private onFormSubmit = (ev: React.FormEvent): boolean => {
ev.preventDefault();
this.startImport(this.file.current.files[0], this.passphrase.current.value);
// noinspection JSIgnoredPromiseFromCall
this.startImport(this.file.current.files[0], this.state.passphrase);
return false;
};
@ -161,20 +170,14 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
</div>
</div>
<div className='mx_E2eKeysDialog_inputRow'>
<div className='mx_E2eKeysDialog_inputLabel'>
<label htmlFor='passphrase'>
{ _t("Enter passphrase") }
</label>
</div>
<div className='mx_E2eKeysDialog_inputCell'>
<input
ref={this.passphrase}
id='passphrase'
size={64}
type='password'
onChange={this.onFormChange}
disabled={disableForm} />
</div>
<Field
label={_t("Enter passphrase")}
value={this.state.passphrase}
onChange={this.onPassphraseChange}
size={64}
type="password"
disabled={disableForm}
/>
</div>
</div>
</div>