Add demo accounts for testing

components/DemoInfoDialog.vue

@@ -0,0 +1,92 @@
+<!-- TODO: This component is for demo purposes only. Delete in production. -->
+
+<template>
+  <v-dialog v-model="show" width="500">
+    <template #activator="{ on, attrs }">
+      <v-btn fixed top left dark color="red lighten-2" v-bind="attrs" v-on="on">
+        <v-icon left>mdi-alert-circle-outline</v-icon>
+        Demo-Account Info
+      </v-btn>
+    </template>
+    <v-card elevation="12" class="mx-auto">
+      <v-card-title>Information zu Demo-Accounts</v-card-title>
+      <v-card-text>
+        <p>
+          Folgende Features funktionieren:
+          <ul>
+            <li>Registrierung</li>
+            <li>Anmeldung</li>
+            <li>Verifizierung per E-Mail</li>
+            <li>Passwortrücksetzung per E-Mail</li>
+          </ul>
+        </p>
+        <p>Alternativ zur Registrierung kann mit einem Demo-Account angemeldet werden:</p>
+        <v-row dense>
+          <v-col cols="4">
+            <v-btn depressed block color="primary" @click="signIn('student')">Student</v-btn>
+          </v-col>
+          <v-col cols="4">
+            <v-btn depressed block color="primary" @click="signIn('tutor')">Tutor</v-btn>
+          </v-col>
+          <v-col cols="4">
+            <v-btn depressed block color="primary" @click="signIn('admin')">Admin</v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text color="primary" @click="show = false">Schließen</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { signInWithEmailAndPassword } from 'firebase/auth'
+export const demoAccounts = ['max.muster.test@iubh-fernstudium.de', 'tutor.test@iu.org', 'admin.test@iu.org']
+
+export default {
+  data () {
+    return {
+      show: false,
+      accounts: {
+        student: {
+          email: 'max.muster.test@iubh-fernstudium.de',
+          password: '295B&&r374T!^973'
+        },
+        tutor: {
+          email: 'tutor.test@iu.org',
+          password: '3#2&%648n5@E3y83'
+        },
+        admin: {
+          email: 'admin.test@iu.org',
+          password: 'x7^@72U9y224#7%5'
+        }
+      },
+      loading: false
+    }
+  },
+  methods: {
+    signIn (type) {
+      this.loading = true
+
+      signInWithEmailAndPassword(this.$auth, this.accounts[type].email, this.accounts[type].password)
+      .then((userCredential) => {
+        // User signed in successfully.
+        // The authentication state observer will redirect the user to the main page (dashboard),
+        // see pages/index.vue
+      })
+      .catch((error) => {
+        // Sign in failed; display error message
+        const errorCode = error.code
+        const errorMessage = error.message
+        this.$toast({content: `${errorCode}: ${errorMessage}`, color: 'error'})
+      })
+      .then(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>

pages/help.vue

@@ -16,11 +16,16 @@
 </template>
 
 <script>
+import { demoAccounts } from '~/components/DemoInfoDialog.vue'
+
 export default {
   name: 'HelpPage',
   layout ({ $auth }) {
     // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#currentuser
-    return $auth.currentUser.emailVerified ? 'default' : 'unverified'
+    // return $auth.currentUser.emailVerified ? 'default' : 'unverified'
+
+    // TODO: For demo purposes only. Delete in production.
+    return $auth.currentUser.emailVerified || demoAccounts.includes($auth.currentUser.email) ? 'default' : 'unverified'
   },
 }
 </script>

pages/login.vue

@@ -1,5 +1,8 @@
 <template>
   <v-container fill-height>
+    <!-- TODO: For demo purposes only. Delete in production. -->
+    <DemoInfoDialog />
+    <!-- -->
     <v-card v-if="existingUser" width="500px" elevation="12" class="mx-auto">
       <v-card-text>
         <v-form ref="loginForm" v-model="valid">