Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Convert inputs on Export/Import Room Key dialogs to be real Fields (#…
Browse files Browse the repository at this point in the history 
…9350)

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

Fixes element-hq/element-web#18517

* Correctly label the second field

* Appease the linter
  • Loading branch information
@turt2live
turt2live authored Oct 5, 2022
1 parent 99488b8 commit 1032334
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 51 deletions.
5 changes: 5 additions & 0 deletions src/@types/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,8 @@ export type KeysWithObjectShape<Input> = {
? (Input[P] extends Array<unknown> ? never : P)
: never;
}[keyof Input];

export type KeysStartingWith<Input extends object, Str extends string> = {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
[P in keyof Input]: P extends `${Str}${infer _X}` ? P : never; // we don't use _X
}[keyof Input];
68 changes: 35 additions & 33 deletions src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -15,14 +16,16 @@ limitations under the License.
*/

import FileSaver from 'file-saver';
import React, { createRef } from 'react';
import React from 'react';
import { MatrixClient } from 'matrix-js-sdk/src/client';
import { logger } from "matrix-js-sdk/src/logger";

import { _t } from '../../../../languageHandler';
import * as MegolmExportEncryption from '../../../../utils/MegolmExportEncryption';
import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps";
import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
import Field from "../../../../components/views/elements/Field";
import { KeysStartingWith } from "../../../../@types/common";

enum Phase {
Edit = "edit",
Expand All @@ -36,19 +39,23 @@ interface IProps extends IDialogProps {
interface IState {
phase: Phase;
errStr: string;
passphrase1: string;
passphrase2: string;
}

type AnyPassphrase = KeysStartingWith<IState, "passphrase">;

export default class ExportE2eKeysDialog extends React.Component<IProps, IState> {
private unmounted = false;
private passphrase1 = createRef<HTMLInputElement>();
private passphrase2 = createRef<HTMLInputElement>();

constructor(props: IProps) {
super(props);

this.state = {
phase: Phase.Edit,
errStr: null,
passphrase1: "",
passphrase2: "",
};
}

Expand All @@ -59,8 +66,8 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
private onPassphraseFormSubmit = (ev: React.FormEvent): boolean => {
ev.preventDefault();

const passphrase = this.passphrase1.current.value;
if (passphrase !== this.passphrase2.current.value) {
const passphrase = this.state.passphrase1;
if (passphrase !== this.state.passphrase2) {
this.setState({ errStr: _t('Passphrases must match') });
return false;
}
Expand Down Expand Up @@ -112,6 +119,12 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
return false;
};

private onPassphraseChange = (ev: React.ChangeEvent<HTMLInputElement>, phrase: AnyPassphrase) => {
this.setState({
[phrase]: ev.target.value,
} as Pick<IState, AnyPassphrase>);
};

public render(): JSX.Element {
const disableForm = (this.state.phase === Phase.Exporting);

Expand Down Expand Up @@ -146,36 +159,25 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
</div>
<div className='mx_E2eKeysDialog_inputTable'>
<div className='mx_E2eKeysDialog_inputRow'>
<div className='mx_E2eKeysDialog_inputLabel'>
<label htmlFor='passphrase1'>
{ _t("Enter passphrase") }
</label>
</div>
<div className='mx_E2eKeysDialog_inputCell'>
<input
ref={this.passphrase1}
id='passphrase1'
autoFocus={true}
size={64}
type='password'
disabled={disableForm}
/>
</div>
<Field
label={_t("Enter passphrase")}
value={this.state.passphrase1}
onChange={e => this.onPassphraseChange(e, "passphrase1")}
autoFocus={true}
size={64}
type="password"
disabled={disableForm}
/>
</div>
<div className='mx_E2eKeysDialog_inputRow'>
<div className='mx_E2eKeysDialog_inputLabel'>
<label htmlFor='passphrase2'>
{ _t("Confirm passphrase") }
</label>
</div>
<div className='mx_E2eKeysDialog_inputCell'>
<input ref={this.passphrase2}
id='passphrase2'
size={64}
type='password'
disabled={disableForm}
/>
</div>
<Field
label={_t("Confirm passphrase")}
value={this.state.passphrase2}
onChange={e => this.onPassphraseChange(e, "passphrase2")}
size={64}
type="password"
disabled={disableForm}
/>
</div>
</div>
</div>
Expand Down
39 changes: 21 additions & 18 deletions src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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) => {
Expand All @@ -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);
Expand All @@ -62,23 +64,30 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
enableSubmit: false,
phase: Phase.Edit,
errStr: null,
passphrase: "",
};
}

public componentWillUnmount(): void {
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;
};

Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 1032334

Please sign in to comment.