Convert inputs on Export/Import Room Key dialogs to be real Fields (matrix-org#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

Author: turt2live

src/@types/common.ts

@@ -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];

src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx

@@ -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.
@@ -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",
@@ -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: "",
  };
  }
 
@@ -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;
  }
@@ -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);
 
@@ -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>

src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx

@@ -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,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;
  };
 
@@ -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>