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 */