Domain Manager: Added key import/export functionality

This advanced functionality is in a specific advanced editing part of the manager, which is hidden by default.

demo/playground/domain_manager.css

@@ -37,4 +37,30 @@ ul#domain-list {
 #domain-list li .status {
     font-size: smaller;
     color: grey;
+}
+
+/* advanced options */
+#domain-advanced {
+    margin-top: 4rem;
+    padding-top: 0.7rem;
+    padding-bottom: 0.7rem;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+}
+
+#domain-advanced #domain-advanced-toggle span.fa-solid {
+    transition: .5s ease-in-out;
+}
+
+#domain-advanced.hidden #domain-advanced-toggle span.fa-solid {
+    transform: rotate(-90deg);
+}
+
+#domain-advanced.hidden #domain-advanced-container {
+    display: none;
+}
+
+#domain-advanced .import-export {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
 }

demo/playground/domain_manager.html

@@ -6,12 +6,16 @@
 		<title>sig0namectl Domain Manager</title>
 		<link rel="stylesheet" href="sig0.css"  type="text/css">
 		<link rel="stylesheet" href="domain_manager.css"  type="text/css">
+		<link href="fontawesome/css/fontawesome.min.css" rel="stylesheet" />
+		<link href="fontawesome/css/solid.min.css" rel="stylesheet" />
+		<link href="fontawesome/css/regular.min.css" rel="stylesheet" />
 		<script src="https://cdn.jsdelivr.net/npm/dohjs@latest/dist/doh.min.js"></script>
 		<script src="sig0_wasm.js"></script>
 		<script src="sig0.js"></script>
 		<script src="keys.js"></script>
 		<script src="dns.js"></script>
 		<script src="domains.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
 		<script src="domain_manager.js"></script>
 		<script>
 			var keys = null
@@ -64,9 +68,36 @@ <h2>Your Domains</h2>
 						<option value="zenr.io" selected>.zenr.io</option>
 						<option value="beta.freifunk.net">.beta.freifunk.net</option>
 					</select>
-					<input type="submit" value="request" class="submit"/>
+					<input type="submit" value="Request" class="submit"/>
 				</form>
 			</div>
+			<div id="domain-advanced" class="hidden">
+				<script>
+					function advanced_toggle() {
+						const element = document.getElementById('domain-advanced')
+						element.classList.toggle('hidden')
+						return false;
+					}
+				</script>
+				<div id="domain-advanced-toggle"><a class="interactive" onclick="advanced_toggle()"><span class="fa-solid fa-chevron-down"></span> Advanced Options</a></div>
+				<div id="domain-advanced-container">
+					<div id="domain-advanced-import" class="import-export">
+						<p>
+							Import all sig0namectl keys of a folder into this manager.
+							Select the folder containing the keys on your device.
+							The keys will be stored in the local cache of this browser.
+						</p>
+						<input type="file" id="directoryPicker" webkitdirectory multiple onchange="domain_list_manager_ui.import_keys(event)">
+					</div>
+					<div id="domain-advanced-import" class="import-export">
+						<p> 
+							Export all your keys from this manager. 
+							You can use them on other devices or backup them.
+						</p>
+						<button onClick="domain_list_manager_ui.export_keys()">Export Your Keys</button>
+					</div>
+				</div>
+			</div>
 		</section>
 		<!-- Templates -->
 		<section style="display:none;">

demo/playground/domain_manager.js

@@ -108,4 +108,75 @@ class DomainListManagerUi {
     event.preventDefault();
     form.subdomain.value = null;
   }
+
+  /// Import Keys
+  ///
+  /// Import a sig0namctl key directory into this browser.
+  async import_keys(event) {
+    const files = Array.from(event.target.files);
+    const filePairs = {};
+
+    files.forEach(file => {
+      const fileName = file.name;
+      const fileExt = fileName.split('.').pop().toLowerCase();
+      const baseName = fileName.slice(0, fileName.lastIndexOf('.'));
+
+      if (fileExt === 'key' || fileExt === 'private') {
+        if (!filePairs[baseName]) {
+          filePairs[baseName] = {};
+        }
+        if (fileExt === 'key') {
+          filePairs[baseName].keyFile = file;
+        } else if (fileExt === 'private') {
+          filePairs[baseName].privateFile = file;
+        }
+      }
+    });
+
+    for (const [baseName, pair] of Object.entries(filePairs)) {
+      if (pair.keyFile && pair.privateFile) {
+        if (localStorage.getItem(baseName)) {
+        } else {
+          const keyContent = await pair.keyFile.text();
+          const privateContent = await pair.privateFile.text();
+          const jsonString =
+              JSON.stringify({key: keyContent, private: privateContent});
+
+          localStorage.setItem(baseName, jsonString);
+        }
+      }
+    }
+
+    document.getElementById('directoryPicker').value = ''
+
+    // update interface
+    keys.update_keys()
+
+    return false
+  }
+
+  /// Export Keys
+  ///
+  /// Export all keys in a zip folder
+  export_keys() {
+    const zip = new JSZip();
+
+    const object_keys = Object.keys(localStorage);
+
+    for (const keyName of object_keys) {
+      const item = JSON.parse(localStorage.getItem(keyName));
+
+      if (item?.key && item?.private) {
+        zip.file(`${keyName}.key`, item.key);
+        zip.file(`${keyName}.private`, item.private);
+      }
+    }
+
+    zip.generateAsync({type: 'blob'}).then(content => {
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(content);
+      a.download = 'keys.zip';
+      a.click();
+    })
+  }
 }

demo/playground/keys.js

@@ -40,11 +40,8 @@ class Keys {
 
   /// update Keys
   async update_keys() {
-    const keys = await this.get_keys().catch(error => {
-      console.error(error)
-      return Promise.reject(error)
-    });
-
+    try {
+      const keys = await this.get_keys()
 
       let promises = [];
       for (const key of keys) {
@@ -66,6 +63,9 @@ class Keys {
           }
         }
       })
+    } catch (error) {
+      console.error(error)
+    }
   }
 
   /// Update a Single Key

demo/playground/sig0.css

@@ -43,7 +43,9 @@ a {
 }
 
 /* form fields & buttons */
-button {
+button,
+input[type=file],
+input[type=submit] {
     border-radius: 0.9em;
     border: solid 0.1rem #000;
     background-color: inherit;