From 36843e632ba367fd6e55154e9e9fae04917c641e Mon Sep 17 00:00:00 2001
From: George Gevoian <george@gevoian.com>
Date: Mon, 21 Feb 2022 15:44:29 -0800
Subject: [PATCH] (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 | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/client/ui/ApiKey.ts b/app/client/ui/ApiKey.ts
index 206e9c52..88f454d4 100644
--- a/app/client/ui/ApiKey.ts
+++ b/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(