Feature: import key

src/api/keys/import-key.js

@@ -0,0 +1,16 @@
+import ApiClient from '/api/client.js';
+import { store } from '/state/store.js'
+
+import { 
+  postResponse,
+} from './import-key.mocks.js'
+
+const client = new ApiClient(store.networkContext.apiBaseUrl)
+
+export async function postKeyImport(phrase) {
+  const res = await client.post(`/keys/import-master`, { phrase }, { mock: postResponse });
+  if (res && res.token) {
+    store.updateState({ networkContext: { token: res.token }})
+  }
+  return res
+}

src/api/keys/import-key.mocks.js

@@ -0,0 +1,9 @@
+export const postResponse = {
+  name: "/keys/import-master",
+  group: "Keys",
+  method: "post",
+  res: {
+    success: true,
+    token: "flibble-wibble-from-import-key",
+  }
+}

src/api/mocks.js

@@ -35,6 +35,7 @@ import {
 } from "./system/keymaps.mocks.js";
 
 import { postResponse as setHostname } from "./system/hostname.mocks.js";
+import { postResponse as postImportKey } from "./keys/import-key.mocks.js";
 
 export const mocks = [
   storeListingMock,
@@ -63,4 +64,5 @@ export const mocks = [
   getKeymaps,
   setKeymap,
   setHostname,
+  postImportKey,
 ];

src/components/views/action-create-key/index.js

@@ -22,6 +22,7 @@ import { themes } from "/components/common/dynamic-form/themes.js";
 import "/components/common/text-loader/text-loader.js";
 import "/components/common/dynamic-form/dynamic-form.js";
 import { notYet } from "/components/common/not-yet-implemented.js"
+import "/components/views/action-import-key/import-key.js";
 
 // Render chunks
 import { renderBanner } from "./renders/banner.js";
@@ -43,6 +44,7 @@ class CreateKey extends LitElement {
       _revealPhrase: { type: Boolean },
       _termsChecked: { type: Boolean },
       _phrase: { type: String },
+      _show_key_import_dialog: { type: Boolean },
       onSuccess: { type: Object },
     };
   }
@@ -166,6 +168,10 @@ class CreateKey extends LitElement {
     this.handleSuccess();
   }
 
+  displayKeyImportDialog() {
+    this._show_key_import_dialog = true;
+  }
+
   render() {
     const emptyPhrase =
       "one two three four five six seven eight nine ten eleven twelve".split(" ");
@@ -283,9 +289,20 @@ class CreateKey extends LitElement {
 
     // Remove from UI for the moment.
     const importKeyHTML = html`
-      <sl-button variant="text" @click=${notYet} ?disabled=${this._keyReady}
-        >Import key</sl-button
+      <sl-button variant="text" @click=${this.displayKeyImportDialog} ?disabled=${this._keyReady}>
+        Import key
+      </sl-button>
+
+      <sl-dialog
+        label="Import an existing key"
+        ?open=${this._show_key_import_dialog}
+        @sl-request-close=${() => this._show_key_import_dialog = false }
       >
+        <x-action-import-key .onSuccess=${() => {
+          this._show_key_import_dialog = false;
+          this._fetchKeyList(getMockList.keys);
+        }}></x-action-import-key>
+      </sl-dialog>
     `
 
     const hasMasterKey = this._keyList.length > 0;
@@ -317,6 +334,7 @@ class CreateKey extends LitElement {
                       ?disabled=${this._keyReady}
                       >Generate Master Key</sl-button
                     >
+                    ${importKeyHTML}
                   `
                 : nothing}
               ${!this._keyListLoading && hasMasterKey

src/components/views/action-import-key/import-key.js

@@ -0,0 +1,82 @@
+import { LitElement, html, css, nothing } from "/vendor/@lit/[email protected]/lit-all.min.js";
+
+// Utils
+import { asyncTimeout } from "/utils/timeout.js";
+
+// APIS
+import { postKeyImport } from "/api/keys/import-key.js"
+
+// Components
+import "/components/common/dynamic-form/dynamic-form.js";
+import { createAlert } from "/components/common/alert.js";
+
+export class ImportKey extends LitElement {
+  static get properties() {
+    return {
+      onSuccess: { type: Object },
+      _show_ui_err: { type: String }
+    };
+  }
+
+  constructor() {
+    super();
+    this.onSuccess = () => console.log('onSucces not defined');
+    this._importKeyFormFields = {
+      sections: [
+        {
+          name: "Import key",
+          submitLabel: "Import",
+          fields: [
+            {
+              name: "seedphrase",
+              label: "Enter Recovery Phrase (24-words)",
+              type: "seedphrase",
+              placeholder: "hungry tavern drumkit weekend dignified turmoil cucumber ...",
+              required: true,
+            },
+          ],
+        },
+      ],
+    };
+  }
+
+  _attemptKeyImport = async (data, form, dynamicFormInstance) => {
+    this._show_ui_err = false; // reset err flag
+    let didErr;
+    try { 
+      await postKeyImport()
+      createAlert('success', 'Key imported successfully');
+    } catch (err) {
+      didErr = true;
+      this._show_ui_err = err.toString();
+      createAlert('danger', 'Key imported failed');
+    } finally {
+      dynamicFormInstance.retainChanges() // stops spinner
+    }
+
+    if (didErr) return;
+
+    if (this.onSuccess && typeof this.onSuccess === 'function') {
+      this.onSuccess()
+    }
+  }
+
+  render() {
+    return html`
+      <sl-alert variant="danger" closable ?open=${!!this._show_ui_err} style="margin: 0 8px 16px 8px">
+        ${this._show_ui_err}
+      </sl-alert>
+
+      <dynamic-form
+        .fields=${this._importKeyFormFields}
+        .values=${{}}
+        .onSubmit=${this._attemptKeyImport}
+        requireCommit
+        >
+      </dynamic-form>
+    `
+  }
+
+}
+
+customElements.define('x-action-import-key', ImportKey);