Merge pull request #7855 from SylvainCorlay/PasswordDialog

Add password dialog to apputils
jupyterlab · Feb 24, 2020 · 3ba2e65 · 3ba2e65
2 parents 869c2bc + 28a4139
commit 3ba2e65
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git 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
@@ -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<Dialog.IResult<string>> {
+    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<string> {
   }
 }
 
+/**
+ * Widget body for input password dialog
+ */
+class InputPasswordDialog extends InputDialogBase<string> {
+  /**
+   * 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
  */