Lenaisten/bday2020
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

neater Admin component

Browse source
This commit is contained in:
Jörn-Michael Miehe 2020-09-07 17:53:06 +02:00
parent 2c90b87818
commit 31c578be30
4 changed files with 139 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
ui/src/components/Admin.vue
View file

@ -2,121 +2,45 @@
<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>
<Login v-if="step === 1" @success="step=2" />
<Input v-else-if="step === 2" @success="step=3" />
<Preview v-else @failure="step=2" />
</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: () => ({
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`,
},
step: 1,
}),
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>
<style>
div.admin {
margin: auto;
max-width: 1024px;
}
label {
div.admin label {
font-weight: bold;
}
input,
select,
textarea {
div.admin input,
div.admin select,
div.admin textarea {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
@ -124,13 +48,13 @@ textarea {
box-sizing: border-box;
}
textarea {
div.admin textarea {
height: 250px;
min-height: 250px;
resize: vertical;
}
button {
div.admin button {
background-color: #4caf50;
color: white;
padding: 14px 20px;
@ -140,11 +64,11 @@ button {
width: 100%;
}
button.back {
div.admin button.back {
background-color: #f44336;
}
button:hover {
div.admin button:hover {
opacity: 0.8;
}
</style>

60
ui/src/components/admin/Input.vue Normal file
View file

@ -0,0 +1,60 @@
<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>

30
ui/src/components/admin/Login.vue Normal file
View file

@ -0,0 +1,30 @@
<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>

25
ui/src/components/admin/Preview.vue Normal file
View file

@ -0,0 +1,25 @@
<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>