2 files changed, 55 insertions, 0 deletions
diff --git a/app/src/components/Folders.vue b/app/src/components/Folders.vue
new file mode 100644
index 0000000..b801c1a
--- /dev/null
+++ b/app/src/components/Folders.vue
@@ -0,0 +1,21 @@
+<template>
+  <li>
+    <div>
+      {{ folder.root ? '' : folder.name }}
+    </div>
+    <ul v-if="folder.folders">
+      <Folders v-for="(child, idx) in folder.folders" :key="idx" :folder="child" />
+    </ul>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    folder: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/app/src/components/Panel.vue b/app/src/components/Panel.vue
new file mode 100644
index 0000000..3ae4000
--- /dev/null
+++ b/app/src/components/Panel.vue
@@ -0,0 +1,34 @@
+<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>
+    <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)">
+    </label>
+    <button @click="$emit('connect')">
+      Connect
+    </button>
+  </div>
+</template>
+
+<script>
+import dynamicModelObjectEmit from '../mixins/dynamicModelObjectEmit';
+
+export default {
+  mixins: [
+    dynamicModelObjectEmit,
+  ],
+
+  emits: ['connect'],
+};
+</script>
+
+<style lang="scss">
+</style>