Admin component

ui/src/App.vue

@@ -1,18 +1,21 @@
 <template>
   <div id="app">
     <img class="logo" alt="Lenaistenlogo" src="./assets/logo.png" />
-    <BDay />
+    <Admin v-if="get_id === 'admin'" />
+    <Gratulation v-else />
   </div>
 </template>
 
 <script>
-import BDay from "./components/BDay.vue";
+import Admin from "./components/Admin.vue";
+import Gratulation from "./components/Gratulation.vue";
 
 export default {
   name: "App",
 
   components: {
-    BDay,
+    Admin,
+    Gratulation,
   },
 
   computed: {
@@ -37,6 +40,7 @@ html {
   text-align: center;
   color: #34214f;
   margin-top: 60px;
+  margin-bottom: 60px;
 }
 </style>
 

ui/src/components/Admin.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="admin">
+    <h1>Geburtstags-Tool</h1>
+
+    <form v-if="!authenticated" @submit="login">
+      <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>
+
+    <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>
+export default {
+  name: "Admin",
+
+  data: () => ({
+    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 scoped>
+div.admin {
+  margin: auto;
+  max-width: 1024px;
+}
+
+label {
+  font-weight: bold;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+textarea {
+  height: 250px;
+  min-height: 250px;
+  resize: vertical;
+}
+
+button {
+  background-color: #4caf50;
+  color: white;
+  padding: 14px 20px;
+  margin: 8px 0;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+}
+
+button.back {
+  background-color: #f44336;
+}
+
+button:hover {
+  opacity: 0.8;
+}
+</style>

ui/src/components/Gratulation.vue

@@ -29,7 +29,7 @@
 
 <script>
 export default {
-  name: "BDay",
+  name: "Gratulation",
 
   data: () => ({
     videoQueue: ["part1", "part2"],
@@ -69,7 +69,7 @@ export default {
       return source;
     },
 
-    videoTimeUpdated: function () {
+    videoTimeUpdated() {
       // show play button after 3 seconds, then disable this event
       if (this.player.currentTime > 3) {
         this.playVisible = true;
@@ -77,21 +77,21 @@ export default {
       }
     },
 
-    videoLoaded: function () {
+    videoLoaded() {
       this.placePlay();
       if (this.currentVideo >= 0) {
         this.player.play();
       }
     },
 
-    playClicked: function () {
+    playClicked() {
       this.playVisible = false;
 
       this.currentVideo += 1;
       this.player.source = this.getVideoSource(this.currentVideo);
     },
 
-    placePlay: function () {
+    placePlay() {
       let top = (this.$refs.plyrContainer.offsetHeight - 100) / 2;
       let left = (this.$refs.plyrContainer.offsetWidth - 100) / 2;