init

server/application/backend/static/android.js

@@ -0,0 +1,9 @@
+const deviceNameInput = document.getElementById("add_device_name");
+const deviceTokenInput = document.getElementById("add_device_token");
+const encryptionKeyInput = document.getElementById("add_encryption_key");
+
+if (typeof Android !== 'undefined') {
+  encryptionKeyInput.value = Android.publicKey()
+  deviceTokenInput.value = Android.messagingToken()
+  deviceNameInput.value = Android.deviceName()
+}

server/application/backend/static/index.js

@@ -0,0 +1,16 @@
+const addDeviceDialog = document.getElementById("add_device_dialog");
+const openAddDeviceCTA = document.getElementById("add_device");
+
+// close dialog on backdrop click
+addDeviceDialog.addEventListener('click', function(event) {
+  var rect = addDeviceDialog.getBoundingClientRect();
+  var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height &&
+    rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
+  if (!isInDialog) {
+    addDeviceDialog.close();
+  }
+});
+
+openAddDeviceCTA.addEventListener("click", () => {
+  addDeviceDialog.showModal();
+});

server/application/backend/static/style.css

@@ -0,0 +1,94 @@
+body {
+    background-color: #111;
+    color: #ddd;
+    align-items: center;
+}
+dialog {
+    background-color: #111;
+    border-color: #222;
+    color: #ddd;
+    align-items: center;
+}
+
+dialog {
+    padding: 16px 24px;
+}
+
+#container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+span {
+    cursor: pointer;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+#devices {
+    font-family: Arial, Helvetica, sans-serif;
+    border-collapse: collapse;
+}
+#devices td, #devices th {
+    border: 1px solid #222;
+    padding: 8px;
+}
+#devices tr {
+    color: #ddd;
+}
+td.delete {
+   text-align: center;
+   cursor: pointer;
+}
+#devices tr:nth-child(even){background-color: #121212;}
+#devices tr:nth-child(odd){background-color: #060606;}
+#devices tr:hover {background-color: #202020;}
+
+#devices th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #310D78;
+  color: white;
+}
+
+::backdrop {
+  background-color: #000000;
+  opacity: 0.9;
+}
+
+.icon_button {
+  background-color: #00000000;
+  border: none;
+  color: white;
+  padding: 12px 12px;
+  cursor: pointer;
+}
+
+label {
+    font-size: 0.8rem;
+    padding: 0px 0px 4px 2px;
+}
+
+input[type=text], input[type=password] {
+  background-color: #101010;
+  color: #DDD;
+  border: 2px solid #222;
+  outline: none;
+}
+
+input[type=text]:focus, input[type=password]:focus {
+  background-color: #060606;
+}
+
+input[type=submit].primary {
+  background-color: #310D78;
+  color: #FFF;
+  padding: 4px 8px;
+  outline: none;
+  border: 0;
+  box-shadow: none;
+  border-radius: 0px;
+}