Add forgot password page, add cancel button to login

client/src/pages/forgot-password.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="forgot-password public-page">
+    <header class="info-header">
+      <h1 class="forgot-password__title public-page__title" data-cy="forgot-password">Passwort vergessen?</h1>
+    </header>
+    <section class="forgot-password__section forgot-password__text">
+      <p class="forgot-info">Ihr Benutzerkonto wird durch den Hep Verlag verwaltet und deshalb können Sie das Passwort ausschliesslicht auf
+        <a class="noserif-link" href="https://www.hep-verlag.ch">www.hep-verlag.ch</a> verwaltet werden.</p>
+      <p class="forgot-info">Melden Sie sich mit der gleichen E-Mail-Adresse und dem gleichen </p>
+    </section>
+    <section class="forgot-password__section forgot-password__link">
+      <a class="button button--primary button--big actions__submit" href="https://www.hep-verlag.ch">Hep Verlag Webseite besuchen</a>
+    </section>
+  </div>
+</template>
+
+<script>
+
+import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
+import LOGIN_MUTATION from '@/graphql/gql/mutations/login.gql';
+import {login} from '../hep-client/index';
+
+export default {
+  components: {},
+
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/_variables.scss";
+@import "@/styles/_mixins.scss";
+
+.forgot-info {
+  font-family: $sans-serif-font-family;
+
+  &:last-child {
+    margin-top: $large-spacing;
+  }
+}
+
+.forgot-password__link {
+    margin-top: $large-spacing;
+}
+
+</style>

client/src/pages/login.vue

@@ -29,7 +29,8 @@
       </div>
       <div class="actions">
         <button class="button button--primary button--big actions__submit" data-cy="login-button">Anmelden</button>
-        <a class="actions__reset text-link" href="/accounts/password_reset/">Passwort vergessen?</a>
+        <router-link class="button button--big actions__submit back-button" :to="{name: 'hello'}">Abbrechen</router-link>
+        <router-link class="actions__reset text-link" :to="{name: 'forgotPassword'}">Passwort vergessen?</router-link>
       </div>
     </form>
   </div>
@@ -129,7 +130,12 @@ export default {
 
   apollo: {
     helloEmail: {
-      query: HELLO_EMAIL
+      query: HELLO_EMAIL,
+      result({data: {helloEmail}}) {
+        if (helloEmail.email === '') {
+          this.$router.push({name: 'hello'});
+        }
+      }
     },
   },
 };
@@ -145,10 +151,20 @@ export default {
 }
 
 .actions {
+  display: flex;
   &__reset {
     display: inline-block;
-    margin-left: $large-spacing;
+    margin-left: auto;
+    line-height: 19px;;
+    display: inline-block;
+    padding: 15px;
   }
 }
 
+.back-button {
+  font-size: 1rem;
+  line-height: normal;
+  margin-left: $medium-spacing;
+}
+
 </style>

client/src/router/index.js

@@ -35,6 +35,7 @@ import waitForClass from '@/pages/waitForClass'
 import checkEmail from '@/pages/check-email'
 import emailVerification from '@/pages/email-verification'
 import licenseActivation from '@/pages/license-activation'
+import forgotPassword from '@/pages/forgot-password'
 
 import store from '@/store/index';
 
@@ -183,6 +184,15 @@ const routes = [
       layout: 'public'
     }
   },
+  {
+    path: '/forgot-password',
+    component: forgotPassword,
+    name: 'forgotPassword',
+    meta: {
+      layout: 'public',
+      public: true
+    }
+  },
   {path: '/styleguide', component: styleGuidePage},
   {path: '*', component: p404}
 ];

client/src/styles/_typography.scss

@@ -75,3 +75,8 @@ input, textarea, select, button {
 .inline-title {
   @include inline-title;
 }
+
+.noserif-link {
+  font-family: $sans-serif-font-family;
+  color: $color-brand-dark;
+}