Dispatch event when the input is programmatically changed

It also calls a callback function possibly passed to the attach method.
This callback is a way to update a react JSON schema form
programmatically, the regular event is not catched by the form.

Author: brichet

package.json

@@ -58,6 +58,7 @@
     "dependencies": {
         "@jupyterlab/application": "^4.0.0",
         "@jupyterlab/statedb":"^4.0.0",
+        "@lumino/algorithm": "^2.0.0",
         "@lumino/coreutils": "^2.1.2"
     },
     "devDependencies": {

src/connectors/local-storage.ts

@@ -15,6 +15,7 @@ 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]) {

src/manager.ts

@@ -42,7 +42,8 @@ export class SecretsManager implements ISecretsManager {
   async attach(
     namespace: string,
     id: string,
-    input: HTMLInputElement
+    input: HTMLInputElement,
+    callback?: (value: string) => void
   ): Promise<void> {
     const attachedId = `${namespace}:${id}`;
     const attachedInput = this._attachedInputs.get(attachedId);
@@ -64,6 +65,10 @@ export class SecretsManager implements ISecretsManager {
       // Fill the password if the input is empty and a value is fetched by the data
       // connector.
       input.value = secret.value;
+      input.dispatchEvent(new Event('change'));
+      if (callback) {
+        callback(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 });

src/token.ts

@@ -19,7 +19,12 @@ export interface ISecretsManager {
   set(id: string, secret: ISecret): Promise<void>;
   remove(id: string): Promise<void>;
   list(namespace: string): Promise<string[]>;
-  attach(namespace: string, id: string, input: HTMLInputElement): void;
+  attach(
+    namespace: string,
+    id: string,
+    input: HTMLInputElement,
+    callback?: (value: string) => void
+  ): void;
   detach(namespace: string, id: string): void;
   detachAll(namespace: string): void;
 }