diff --git a/docs/source/developer/ui_helpers.rst b/docs/source/developer/ui_helpers.rst index 19f299d3d131..ec8a1e2b559f 100644 --- a/docs/source/developer/ui_helpers.rst +++ b/docs/source/developer/ui_helpers.rst @@ -28,6 +28,7 @@ package within the ``InputDialog`` namespace. There are four helpers: * ``getItem`` : request a item from a list; the list may be editable. * ``getNumber`` : request a number; if the user input is not a valid number, NaN is returned. * ``getText`` : request a short text. +* ``getPassword`` : request a short password. All dialogs are built on the standard ``Dialog``. Therefore the helper functions each return a ``Promise`` resolving in a ``Dialog.IResult`` object. @@ -66,6 +67,12 @@ a ``Promise`` resolving in a ``Dialog.IResult`` object. console.log('text ' + value.value); }); + // Request a text + InputDialog.getPassword({ title: 'Input password' }).then(value => { + console.log('A password was input'); + }); + + File Dialogs '''''''''''' diff --git a/packages/apputils/src/inputdialog.ts b/packages/apputils/src/inputdialog.ts index 0ac05315eb0c..2fbd757ca9ef 100644 --- a/packages/apputils/src/inputdialog.ts +++ b/packages/apputils/src/inputdialog.ts @@ -190,6 +190,27 @@ export namespace InputDialog { focusNodeSelector: 'input' }); } + + /** + * Create and show a input dialog for a password. + * + * @param options - The dialog setup options. + * + * @returns A promise that resolves with whether the dialog was accepted + */ + export function getPassword( + options: ITextOptions + ): Promise> { + return showDialog({ + ...options, + body: new InputPasswordDialog(options), + buttons: [ + Dialog.cancelButton({ label: options.cancelLabel }), + Dialog.okButton({ label: options.okLabel }) + ], + focusNodeSelector: 'input' + }); + } } /** @@ -312,6 +333,38 @@ class InputTextDialog extends InputDialogBase { } } +/** + * Widget body for input password dialog + */ +class InputPasswordDialog extends InputDialogBase { + /** + * InputPasswordDialog constructor + * + * @param options Constructor options + */ + constructor(options: InputDialog.ITextOptions) { + super(options.label); + + this._input = document.createElement('input', {}); + this._input.classList.add('jp-mod-styled'); + this._input.type = 'password'; + this._input.value = options.text ? options.text : ''; + if (options.placeholder) { + this._input.placeholder = options.placeholder; + } + + // Initialize the node + this.node.appendChild(this._input); + } + + /** + * Get the text specified by the user + */ + getValue(): string { + return this._input.value; + } +} + /** * Widget body for input list dialog */