From 6453424630c36b6ca44329b9c5bde903994fa941 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 22 Jun 2021 10:48:35 +0200
Subject: [PATCH] Add login error page

---
 client/src/pages/hello.vue        | 15 ++++++++++-
 client/src/pages/login-error.vue  | 41 +++++++++++++++++++++++++++++++
 client/src/pages/verify-email.vue | 20 ---------------
 client/src/router/index.js        |  8 ++++--
 4 files changed, 61 insertions(+), 23 deletions(-)
 create mode 100644 client/src/pages/login-error.vue
 delete mode 100644 client/src/pages/verify-email.vue

diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index 28231b64..fd6becfc 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -3,7 +3,14 @@
     class="hello"
     data-cy="hello-page">
     <div class="about">
-      <div class="about__logos" />
+      <div class="about__logos logos">
+        <a href="#">sdf</a>
+        <a
+          href="https://www.ehb.swiss/"
+          target="_blank">
+          <ehb-logo class="logos__logo" />
+        </a>
+      </div>
       <p class="about__text">mySkillbox ist ein Angebot des hep Verlags in
       Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für Berufsbildung.</p>
     </div>
@@ -129,6 +136,12 @@
     //}
   }
 
+  .logos {
+    &__logo {
+      height: 30px;
+    }
+  }
+
   .login-actions {
     @include widget-shadow;
 
diff --git a/client/src/pages/login-error.vue b/client/src/pages/login-error.vue
new file mode 100644
index 00000000..b0a90307
--- /dev/null
+++ b/client/src/pages/login-error.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="login-error">
+    <header class="info-header">
+      <h1
+        class="public-page__title"
+        data-cy="login-error-title">{{ title }}</h1>
+    </header>
+    <main
+      class="login-error__content content"
+      data-cy="login-error-text">
+      <p class="content__instructions">
+        {{ errorMessage }}
+      </p>
+      <p>
+        <router-link
+          :to="{name: 'hello'}"
+          class="hep-link">
+          Startseite anzeigen
+        </router-link>
+      </p>
+
+    </main>
+
+  </div>
+
+</template>
+
+<script>
+  export default {
+    name: 'LoginErrorPage',
+    props: ['title', 'errorMessage']
+  };
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/_variables.scss";
+
+.content__instructions {
+  margin: $medium-spacing 0;
+}
+</style>
diff --git a/client/src/pages/verify-email.vue b/client/src/pages/verify-email.vue
deleted file mode 100644
index 7d4e26b2..00000000
--- a/client/src/pages/verify-email.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div class="verify-email">
-    <main
-      class="verify-email__content content"
-      data-cy="verify-check">
-      <p class="content__instructions">Ihre Email ist noch nicht verifiziert. Bitte verifizieren Sie die Email für
-      ihr hep-Konto.</p>
-    </main>
-
-  </div>
-
-</template>
-
-<style scoped lang="scss">
-@import "@/styles/_variables.scss";
-
-.content__instructions {
-  margin-top: $medium-spacing;
-}
-</style>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index cb8a3886..aba7d06c 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -9,7 +9,7 @@ import submission from '@/pages/studentSubmission';
 import Router from 'vue-router';
 import surveyPage from '@/pages/survey';
 import styleGuidePage from '@/pages/styleguide';
-import verifyEmail from '@/pages/verify-email';
+import loginError from '@/pages/login-error';
 import licenseActivation from '@/pages/license-activation';
 import joinClass from '@/pages/joinClass';
 import news from '@/pages/news';
@@ -58,8 +58,12 @@ const routes = [
   },
   {
     path: '/verify-email',
-    component: verifyEmail,
+    component: loginError,
     name: 'verifyEmail',
+    props: {
+      title: 'Bitte schauen Sie in Ihr Postfach',
+      errorMessage: 'Ihre E-Mail Adresse ist noch nicht verifiziert. Wir haben eine E-Mail mit einem Aktivierungslink an Sie verschickt.'
+    },
     meta: {
       public: true,
       layout: 'public',