(core) Hide API key when it's not selected

Summary:
The API key is now hidden by default. Clicking the input
will select and reveal the key. As soon as the key loses
selection, it is hidden again.

Test Plan: Project test.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D3270

app/client/ui/ApiKey.ts

@@ -30,6 +30,7 @@ export class ApiKey extends Disposable {
   private _anonymous: boolean;
   private _inputArgs: IDomArgs<HTMLInputElement>;
   private _loading = observable(false);
+  private _isHidden: Observable<boolean> = Observable.create(this, true);
 
   constructor(options: IWidgetOptions) {
     super();
@@ -49,8 +50,17 @@ export class ApiKey extends Disposable {
               readonly: true,
               value: this._apiKey.get(),
             },
+            dom.attr('type', (use) => use(this._isHidden) ? 'password' : 'text'),
             testId('key'),
-            dom.on('click', (ev, el) => el.select()),
+            {title: 'Click to show'},
+            dom.on('click', (_ev, el) => {
+              this._isHidden.set(false);
+              setTimeout(() => el.select(), 0);
+            }),
+            dom.on('blur', (ev) => {
+              // Hide the key when it is no longer selected.
+              if (ev.target !== document.activeElement) { this._isHidden.set(true); }
+            }),
             this._inputArgs
           ),
           cssTextBtn(