overall user experience

ui/src/components/Admin.vue

@@ -2,16 +2,16 @@
   <div class="admin">
     <h1>Geburtstags-Tool</h1>
 
-    <Login v-if="step === 1" @success="step=2" /> 
+    <Login v-if="step === 1" @next="login_next" :default="{apiCreds: apiCreds}" />
-    <Input v-else-if="step === 2" @success="step=3" />
+    <Input v-else-if="step === 2" @next="input_next" :default="{recipient: recipient, mail: mail}" />
-    <Preview v-else @failure="step=2" />
+    <Preview v-else-if="step === 3" @back="step=2" />
   </div>
 </template>
 
 <script>
-import Login from './admin/Login.vue'
+import Login from "./admin/Login.vue";
-import Input from './admin/Input.vue'
+import Input from "./admin/Input.vue";
-import Preview from './admin/Preview.vue'
+import Preview from "./admin/Preview.vue";
 
 export default {
   name: "Admin",
@@ -24,7 +24,23 @@ export default {
 
   data: () => ({
     step: 1,
+    apiCreds: null,
+    recipient: null,
+    mail: null,
   }),
+
+  methods: {
+    login_next(apiCreds) {
+      this.apiCreds = apiCreds;
+      this.step++;
+    },
+
+    input_next(recipient, mail) {
+      this.recipient = recipient;
+      this.mail = mail;
+      this.step++;
+    },
+  },
 };
 </script>
 
@@ -71,4 +87,8 @@ div.admin button.back {
 div.admin button:hover {
   opacity: 0.8;
 }
+
+div.admin button:disabled {
+  background-color: #888;
+}
 </style>

ui/src/components/admin/Input.vue

@@ -4,7 +4,7 @@
 
     <h3>Empfänger</h3>
 
-    <select v-model="recipient.title" required>
+    <select ref="first" v-model="recipient.title" required>
       <option value selected>Geschlecht auswählen …</option>
       <option value="m">männlich</option>
       <option value="f">weiblich</option>
@@ -50,11 +50,25 @@ Deine Lenaisten`,
     },
   }),
 
+  props: {
+    default: Object,
+  },
+
+  mounted() {
+    this.$refs.first.focus();
+
+    if (!!this.default.recipient && !!this.default.mail) {
+      this.recipient = this.default.recipient;
+      this.mail = this.default.mail;
+    }
+  },
+
   methods: {
     check(event) {
-      this.$emit('success', this.recipient, this.mail);
       event.preventDefault();
-    }
+      event.submitter.disabled = true;
-  }
+      this.$emit("next", this.recipient, this.mail);
-}
+    },
+  },
+};
 </script>

ui/src/components/admin/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <form @submit="check">
     <h2>Admin-Login für Geburtstagstool</h2>
-    <input type="text" placeholder="Benutzername" v-model="apiCreds.name" required />
+    <input ref="first" type="text" placeholder="Benutzername" v-model="apiCreds.name" required />
     <input type="password" placeholder="Passwort" v-model="apiCreds.pass" required />
 
     <button>Einloggen</button>
@@ -19,12 +19,24 @@ export default {
     },
   }),
 
+  props: {
+    default: Object,
+  },
+
+  mounted() {
+    this.$refs.first.focus();
+
+    if (this.default.apiCreds) {
+      this.apiCreds = this.default.apiCreds;
+    }
+  },
+
   methods: {
     check(event) {
-      this.$emit('success', this.apiCreds)
-      // this.$emit('failure')
       event.preventDefault();
-    }
+      event.submitter.disabled = true;
-  }
+      this.$emit("next", this.apiCreds);
-}
+    },
+  },
+};
 </script>

ui/src/components/admin/Preview.vue

@@ -2,8 +2,8 @@
   <form @submit="check">
     <h2>Vorschau</h2>
 
-    <button value="good">Sieht gesund aus. Absenden!</button>
+    <button value="next">Sieht gesund aus. Absenden!</button>
-    <button value="bad" class="back">Da fehlt noch was. Zurück!</button>
+    <button value="back" class="back">Da fehlt noch was. Zurück!</button>
   </form>
 </template>
 
@@ -13,12 +13,14 @@ export default {
 
   methods: {
     check(event) {
-      if (event.submitter.value === "good") {
-        this.$emit("success");
-      } else {
-        this.$emit("failure");
-      }
       event.preventDefault();
+      event.submitter.disabled = true;
+
+      if (event.submitter.value === "next") {
+        // success
+      } else {
+        this.$emit("back");
+      }
     },
   },
 };