Adds progress log and ui enhancements

1 files changed, 30 insertions, 10 deletions

diff --git a/app/src/components/Panel.vue b/app/src/components/Panel.vue
index 3ae4000..527a8a9 100644
--- a/app/src/components/Panel.vue
+++ b/app/src/components/Panel.vue
@@ -1,21 +1,35 @@
 <template>
-  <div class="panel">
-    <label>
-      Server <input type="text" :value="modelValue.server" @input="emit('server', $event.target.value)">
-    </label>
-    <label>
-      Port <input type="text" :value="modelValue.port" @input="emit('port', $event.target.value)">
-    </label>
+  <form data-abide @submit.prevent="$emit('connect')">
+    <div class="grid-x">
+      <div class="cell">
+        <label>
+          Server <input type="text" :value="modelValue.server" required @input="emit('server', $event.target.value)">
+        </label>
+      </div>
+    </div>
+    <div class="grid-x">
+      <div class="cell">
+        <label>
+          Port <input type="text" :value="modelValue.port" required @input="emit('port', $event.target.value)">
+        </label>
+      </div>
+    </div>
     <label>
       Username <input type="text" :value="modelValue.username" @input="emit('username', $event.target.value)">
     </label>
     <label>
-      Passwort <input type="text" :value="modelValue.password" @input="emit('password', $event.target.value)">
+      Passwort <input type="password" :value="modelValue.password" @input="emit('password', $event.target.value)">
     </label>
-    <button @click="$emit('connect')">
+    <div class="grid-x">
+      <div class="cell">
+        <input :id="`tls-${uid}`" type="checkbox" :checked="modelValue.tls" @input="emit('tls', $event.target.checked)">
+        <label :for="`tls-${uid}`">TLS enabled</label>
+      </div>
+    </div>
+    <button class="button" type="submit">
       Connect
     </button>
-  </div>
+  </form>
 </template>
 
 <script>
@@ -27,6 +41,12 @@ export default {
   ],
 
   emits: ['connect'],
+
+  data () {
+    return {
+      uid: crypto.getRandomValues(new Uint8Array(1)),
+    };
+  },
 };
 </script>