Add a connector as example, that saves passwords in local storage

Author: brichet

src/connectors/local-storage.ts

@@ -0,0 +1,47 @@
+import { ISecret, ISecretsConnector } from '../token';
+
+/**
+ * Example connector that save the secrets to the local storage.
+ *
+ * WARNING: It should not be used in production, since the passwords are stored as plain
+ * text in the local storage of the browser.
+ */
+export class LocalStorageConnector implements ISecretsConnector {
+  storage = 'jupyter-secrets:secrets';
+
+  constructor() {
+    console.warn(`
+The secret connector used currently should not be used in production, since the
+passwords are stored as plain text in the local storage of the browser'
+    `);
+  }
+  async fetch(id: string): Promise<ISecret | undefined> {
+    const secrets = JSON.parse(localStorage.getItem(this.storage) ?? '{}');
+    if (!secrets || !secrets[id]) {
+      return;
+    }
+    return secrets[id];
+  }
+
+  async save(id: string, value: ISecret): Promise<any> {
+    const secrets = JSON.parse(localStorage.getItem(this.storage) ?? '{}');
+    secrets[id] = value;
+    localStorage.setItem(this.storage, JSON.stringify(secrets));
+  }
+
+  async remove(id: string): Promise<any> {
+    const secrets = JSON.parse(localStorage.getItem(this.storage) ?? '{}');
+    delete secrets[id];
+    localStorage.setItem(this.storage, JSON.stringify(secrets));
+  }
+
+  async list(
+    query?: string | undefined
+  ): Promise<{ ids: string[]; values: ISecret[] }> {
+    const secrets = JSON.parse(localStorage.getItem(this.storage) ?? '{}');
+    return {
+      ids: Object.keys(secrets).filter(key => secrets[key].namespace === query),
+      values: []
+    };
+  }
+}

src/index.ts

@@ -23,5 +23,6 @@ const plugin: JupyterFrontEndPlugin<ISecretsManager> = {
   }
 };
 
+export * from './connectors/local-storage';
 export * from './token';
 export default plugin;

src/manager.ts

@@ -58,12 +58,15 @@ export class SecretsManager implements ISecretsManager {
     }
     this._attachedInputs.set(attachedId, input);
 
-    // Fill the password if the input is empty and a value is fetched by the data
-    // connector.
     input.dataset.secretsId = attachedId;
-    const value = await this.get(attachedId);
-    if (!input.value && value) {
-      input.value = value.value;
+    const secret = await this.get(attachedId);
+    if (!input.value && secret) {
+      // Fill the password if the input is empty and a value is fetched by the data
+      // connector.
+      input.value = secret.value;
+    } else if (input.value && input.value !== secret?.value) {
+      // Otherwise save the current input value using the data connector.
+      this.set(attachedId, { namespace, id, value: input.value });
     }
     input.addEventListener('change', this._onchange);
   }

tsconfig.json

@@ -21,5 +21,5 @@
     "target": "ES2018",
     "types": ["jest"]
   },
-  "include": ["src/*"]
+  "include": ["src/**/*"]
 }