docker-compose.yml

@@ -4,13 +4,8 @@ volumes:
     frontend_home:
 
 services:
-    # Frontend
     ui:
-        build: 
+        build: ui/docker
-            context: ui/docker
-            args: 
-                NONROOT_UID: 1000
-                NONROOT_GID: 1000
         restart: 'unless-stopped'
         volumes: 
             - "frontend_home:/home/node"
@@ -18,12 +13,10 @@ services:
         ports: 
             - 8000:8000
 
-    # Backend
     api:
         build: api
         restart: 'no'
 
-    # Common Proxy
     dev-proxy:
         build: dev-proxy
         restart: 'no'

ui/docker/Dockerfile

@@ -1,28 +1,13 @@
 FROM node:lts-alpine
 LABEL maintainer="joern-michael.miehe@lenaisten.de"
 
-# vue services directory
 WORKDIR /srv/vue
 
-# install vue cli
 RUN set -ex; \
     yarn global add @vue/cli
 
-# user setup
-ARG NONROOT_UID=1000
-ARG NONROOT_GID=1000
-
-# recycle node user
-RUN set -ex; \
-    deluser --remove-home node; \
-    addgroup -g ${NONROOT_GID} node; \
-    adduser --disabled-password --gecos '' --uid "${NONROOT_UID}" --ingroup node node
-
-# user change
 USER node
 
-# persistent home directory
 VOLUME [ "/home/node" ]
 
-# run vue ui
 CMD [ "vue", "ui", "-H", "0.0.0.0" ]

ui/src/components/Admin.vue

@@ -2,45 +2,121 @@
   <div class="admin">
     <h1>Geburtstags-Tool</h1>
 
-    <Login v-if="step === 1" @success="step=2" /> 
+    <form v-if="!authenticated" @submit="login">
-    <Input v-else-if="step === 2" @success="step=3" />
+      <h2>Admin-Login für Geburtstagstool</h2>
-    <Preview v-else @failure="step=2" />
+      <input type="text" placeholder="Benutzername" v-model="apiCreds.name" required />
+      <input type="password" placeholder="Passwort" v-model="apiCreds.pass" required />
+
+      <button>Einloggen</button>
+    </form>
+
+    <form v-else-if="!reviewed" @submit="review">
+      <h2>Dateneingabe</h2>
+
+      <h3>Empfänger</h3>
+
+      <select v-model="recipient.title" required>
+        <option value selected>Geschlecht auswählen …</option>
+        <option value="m">männlich</option>
+        <option value="f">weiblich</option>
+      </select>
+      <input type="text" placeholder="Vorname" v-model="recipient.first" required />
+      <input type="text" placeholder="Nachname" v-model="recipient.last" required />
+      <input type="text" placeholder="E-Mail Adresse" v-model="recipient.email" required />
+
+      <h3>Mail</h3>
+
+      <input type="text" placeholder="Betreff" v-model="mail.subject" required />
+      <textarea v-model="mail.body" />
+
+      <button>Vorschau</button>
+    </form>
+
+    <form v-else @submit="send" @reset="back">
+      <h2>Vorschau</h2>
+
+      <button>Sieht gesund aus. Absenden!</button>
+      <button type="reset" class="back">Da fehlt noch was. Zurück!</button>
+    </form>
   </div>
 </template>
 
 <script>
-import Login from './admin/Login.vue'
-import Input from './admin/Input.vue'
-import Preview from './admin/Preview.vue'
-
 export default {
   name: "Admin",
 
-  components: {
-    Login,
-    Input,
-    Preview,
-  },
-
   data: () => ({
-    step: 1,
+    authenticated: false,
+    reviewed: false,
+
+    apiCreds: {
+      name: "",
+      pass: "",
+    },
+
+    recipient: {
+      title: "",
+      first: "",
+      last: "",
+      email: "",
+    },
+
+    mail: {
+      subject: "Happy Birthday! Es gibt etwas zu feiern!",
+      body: `###ANREDE### ###VORNAME###,
+heute übersenden wir Dir eine Email, weil es etwas zu feiern gibt.
+Zum Geburtstag wünschen wir Dir alles Gute.
+
+Deine Überraschungskarte kannst Du hier abrufen:
+###PHOTO_LINK###
+
+Vergiss aber nicht, Deine Lautsprecher einzuschalten, sonst verpasst Du etwas ;)
+
+Lenaistische Grüße,
+Deine Lenaisten`,
+    },
   }),
+
+  methods: {
+    login(event) {
+      this.authenticated = true;
+      event.preventDefault();
+    },
+
+    review(event) {
+      this.reviewed = true;
+      event.preventDefault();
+    },
+
+    send(event) {
+      event.preventDefault();
+    },
+
+    back(event) {
+      if (this.reviewed) {
+        this.reviewed = false;
+      } else {
+        this.authenticated = false;
+      }
+      event.preventDefault();
+    },
+  },
 };
 </script>
 
-<style>
+<style scoped>
 div.admin {
   margin: auto;
   max-width: 1024px;
 }
 
-div.admin label {
+label {
   font-weight: bold;
 }
 
-div.admin input,
+input,
-div.admin select,
+select,
-div.admin textarea {
+textarea {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
@@ -48,13 +124,13 @@ div.admin textarea {
   box-sizing: border-box;
 }
 
-div.admin textarea {
+textarea {
   height: 250px;
   min-height: 250px;
   resize: vertical;
 }
 
-div.admin button {
+button {
   background-color: #4caf50;
   color: white;
   padding: 14px 20px;
@@ -64,11 +140,11 @@ div.admin button {
   width: 100%;
 }
 
-div.admin button.back {
+button.back {
   background-color: #f44336;
 }
 
-div.admin button:hover {
+button:hover {
   opacity: 0.8;
 }
 </style>

ui/src/components/admin/Input.vue

@@ -1,60 +0,0 @@
-<template>
-  <form @submit="check">
-    <h2>Dateneingabe</h2>
-
-    <h3>Empfänger</h3>
-
-    <select v-model="recipient.title" required>
-      <option value selected>Geschlecht auswählen …</option>
-      <option value="m">männlich</option>
-      <option value="f">weiblich</option>
-    </select>
-    <input type="text" placeholder="Vorname" v-model="recipient.first" required />
-    <input type="text" placeholder="Nachname" v-model="recipient.last" required />
-    <input type="text" placeholder="E-Mail Adresse" v-model="recipient.email" required />
-
-    <h3>Mail</h3>
-
-    <input type="text" placeholder="Betreff" v-model="mail.subject" required />
-    <textarea v-model="mail.body" />
-
-    <button>Vorschau</button>
-  </form>
-</template>
-
-<script>
-export default {
-  name: "Input",
-
-  data: () => ({
-    recipient: {
-      title: "",
-      first: "",
-      last: "",
-      email: "",
-    },
-
-    mail: {
-      subject: "Happy Birthday! Es gibt etwas zu feiern!",
-      body: `###ANREDE### ###VORNAME###,
-heute übersenden wir Dir eine Email, weil es etwas zu feiern gibt.
-Zum Geburtstag wünschen wir Dir alles Gute.
-
-Deine Überraschungskarte kannst Du hier abrufen:
-###PHOTO_LINK###
-
-Vergiss aber nicht, Deine Lautsprecher einzuschalten, sonst verpasst Du etwas ;)
-
-Lenaistische Grüße,
-Deine Lenaisten`,
-    },
-  }),
-
-  methods: {
-    check(event) {
-      this.$emit('success', this.recipient, this.mail);
-      event.preventDefault();
-    }
-  }
-}
-</script>

ui/src/components/admin/Login.vue

@@ -1,30 +0,0 @@
-<template>
-  <form @submit="check">
-    <h2>Admin-Login für Geburtstagstool</h2>
-    <input type="text" placeholder="Benutzername" v-model="apiCreds.name" required />
-    <input type="password" placeholder="Passwort" v-model="apiCreds.pass" required />
-
-    <button>Einloggen</button>
-  </form>
-</template>
-
-<script>
-export default {
-  name: "Login",
-
-  data: () => ({
-    apiCreds: {
-      name: "",
-      pass: "",
-    },
-  }),
-
-  methods: {
-    check(event) {
-      this.$emit('success', this.apiCreds)
-      // this.$emit('failure')
-      event.preventDefault();
-    }
-  }
-}
-</script>

ui/src/components/admin/Preview.vue

@@ -1,25 +0,0 @@
-<template>
-  <form @submit="check">
-    <h2>Vorschau</h2>
-
-    <button value="good">Sieht gesund aus. Absenden!</button>
-    <button value="bad" class="back">Da fehlt noch was. Zurück!</button>
-  </form>
-</template>
-
-<script>
-export default {
-  name: "Preview",
-
-  methods: {
-    check(event) {
-      if (event.submitter.value === "good") {
-        this.$emit("success");
-      } else {
-        this.$emit("failure");
-      }
-      event.preventDefault();
-    },
-  },
-};
-</script>