Added: Domain Manager

UI to request and list domains
NetworkCommons · Aug 28, 2024 · 1e397da · 1e397da
1 parent 5560118
commit 1e397da
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 0 deletions.
diff --git a/demo/playground/domain_manager.css b/demo/playground/domain_manager.css
@@ -0,0 +1,40 @@
+/* sig0namectl Domain Manager UI CSS */
+
+h1 {
+    margin-left: 3rem
+}
+
+#domain-list-section {
+    max-width: 27rem;
+    margin: 0 auto;
+    padding: 3rem;
+}
+
+/* domain list */
+ul#domain-list {
+    list-style-type: none;
+    margin: 0;
+    margin-bottom: 2.5rem;
+    padding: 0;
+    width: 100%;
+
+}
+
+#domain-list li {
+    display: flex;
+    padding: 0;
+    border-bottom: 1px solid #ddd;
+}
+
+#domain-list li div {
+    padding: 0.2rem;
+}
+
+#domain-list li .domain {
+    min-width: 15rem;
+}
+
+#domain-list li .status {
+    font-size: smaller;
+    color: grey;
+}
diff --git a/demo/playground/domain_manager.html b/demo/playground/domain_manager.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>sig0namectl Domain Manager</title>
+		<link rel="stylesheet" href="sig0.css"  type="text/css">
+		<link rel="stylesheet" href="domain_manager.css"  type="text/css">
+		<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="domain_manager.js"></script>
+		<script>
+			var keys = null
+			var domains = new Domains()
+
+			// start initialization when WASM is ready
+			window.addEventListener('wasm_ready', function(){
+				console.log('WASM is ready')
+
+				keys = new Keys()
+			});
+
+			// update domains on key change
+			window.addEventListener('keys_ready', function(){
+				domains.keys_updated(keys.keys)
+			})
+			window.addEventListener('keys_updated', function(){
+				domains.keys_updated(keys.keys)
+			})
+
+			var domain_list_manager_ui = new DomainListManagerUi()
+			var check_domain_status = function() {
+				if (domains.recheck_status === true) {
+					domains.recheck_status = false;
+					domain_list_manager_ui.update_domains()
+				}
+			}
+			setInterval(check_domain_status, 1000)
+		</script>
+	</head>
+	<body>
+		<section id="domain-list-section">
+			<div id="domain-list-container">
+				<h2>Your Domains</h2>
+				<ul id="domain-list"></ul>
+			</div>
+			<div id="domain-request">
+				<p>Request a new domain:</p>
+				<form onsubmit="domain_list_manager_ui.request_domain(event, this);">
+					<input type="text" 
+						class="key_subdomain"
+						placeholder="your-domain-name"
+						name="subdomain"
+						required
+						minlength="4"
+						maxlength="64"
+						pattern="[a-z0-9\._\-]{4,64}"
+						/>
+					<select name="domain" class="key_domain">
+						<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"/>
+				</form>
+			</div>
+		</section>
+		<!-- Templates -->
+		<section style="display:none;">
+			<ul id="domain-template">
+				<li class="entry">
+					<div class="domain"></div>
+					<div class="status"></div>
+				</li>
+			</ul>
+		</section>
+	</body>
+</html>
diff --git a/demo/playground/domain_manager.js b/demo/playground/domain_manager.js
@@ -0,0 +1,111 @@
+/// Sig0namectl Domain Manager
+///
+/// With this you UI you can request new domains
+/// under a sig0namectl enabled domain.
+/// It will create a key for, request the domain and check the registration
+/// status.
+
+/// sig0namectl Domain Management UI
+class DomainListManagerUi {
+  constructor() {
+    // indicate update request
+    this.update_scheduled = false;
+
+    // register listening on events
+    window.addEventListener('domains_ready', function() {
+      console.log('domains_ready')
+      domain_list_manager_ui.update_domains()
+    })
+    window.addEventListener('domains_updated', function() {
+      console.log('domains_updated')
+      domain_list_manager_ui.update_domains()
+    })
+  }
+
+  /// update Domain Listing
+  update_domains() {
+    // get domain list
+    const domain_list = document.getElementById('domain-list')
+
+    // copy keys into our array
+    for (const domain of domains.domains) {
+      const domain_item = this.domain_exists(domain.domain)
+      if (domain_item) {
+        // update entry if it exists
+        this.update_domain_entry(domain, domain_item)
+      }
+      else {
+        // create a new one if it does not exist
+        this.create_domain_entry(domain)
+      }
+    }
+  }
+
+  /// check if domain exists
+  domain_exists(domain_name) {
+    const domain_list = document.getElementById('domain-list')
+    for (let i = 0; i < domain_list.children.length; i++) {
+      const item = domain_list.children[i];
+      const item_name_element = item.getElementsByClassName('domain')[0];
+      const item_name = item_name_element.innerHTML
+      if (item_name === domain_name) {
+        return item
+      }
+    }
+    return null
+  }
+
+  /// create a new domain entry
+  create_domain_entry(dns_item) {
+    const domain_list = document.getElementById('domain-list')
+    // get entry template
+    const element = document.getElementById('domain-template')
+                        .getElementsByClassName('entry')[0]
+                        .cloneNode(true);
+    // fill values
+    const element_domain = element.getElementsByClassName('domain')[0];
+    element_domain.appendChild(document.createTextNode(dns_item.domain));
+    element.getElementsByClassName('status')[0].appendChild(
+        document.createTextNode(dns_item.status));
+
+    // add element to list
+    domain_list.appendChild(element)
+
+    // reschedule update
+    if (dns_item.status === 'undefined' || dns_item.status === 'inactive' ||
+        dns_item.status === 'registering') {
+      dns_item.check_key_status();
+      domains.recheck_status = true;
+    }
+  }
+
+  /// update entry
+  update_domain_entry(dns_item, domain_entry) {
+    const element_domain = domain_entry.getElementsByClassName('domain')[0]
+    element_domain.replaceChildren()
+    element_domain.appendChild(document.createTextNode(dns_item.domain));
+
+    const element_status = domain_entry.getElementsByClassName('status')[0]
+    element_status.replaceChildren()
+    element_status.appendChild(document.createTextNode(dns_item.status));
+
+    // reschedule update
+    if (dns_item.status === 'undefined' || dns_item.status === 'inactive' ||
+        dns_item.status === 'registering') {
+      dns_item.check_key_status();
+      domains.recheck_status = true;
+    }
+  }
+
+  /// request a domain with a newly created key
+  request_domain(event, form) {
+    const domain = form.domain.value;
+    console.log('domain: ' + domain)
+    const subdomain = form.subdomain.value + '.' + domain;
+    console.log('claim domain: ' + subdomain + ' doh_server: doh.zenr.io')
+    // request DoH server for domain
+    keys.request_key(subdomain, 'doh.zenr.io');
+    event.preventDefault();
+    form.subdomain.value = null;
+  }
+}