From 125882df462ca9fa4cec26c7978c173012c8c444 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 3 Jun 2021 08:34:47 +0200
Subject: [PATCH] Add SplitLayout, refactor onboarding

---
 client/src/App.vue                     |   2 +
 client/src/layouts/SplitLayout.vue     | 142 +++++++++++++++++++++++++
 client/src/pages/forgot-password.vue   |  39 -------
 client/src/pages/hello.vue             |   5 +-
 client/src/pages/onboarding.vue        |  36 ++-----
 client/src/router/auth.routes.js       |   2 +-
 client/src/router/index.js             |  12 +--
 client/src/router/onboarding.routes.js |   8 +-
 8 files changed, 164 insertions(+), 82 deletions(-)
 create mode 100644 client/src/layouts/SplitLayout.vue
 delete mode 100644 client/src/pages/forgot-password.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index 0f4623c9..0a7b186a 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -20,6 +20,7 @@
   import FullScreenLayout from '@/layouts/FullScreenLayout';
   import PublicLayout from '@/layouts/PublicLayout';
   import BlankLayout from '@/layouts/BlankLayout';
+  import SplitLayout from '@/layouts/SplitLayout';
   import Modal from '@/components/Modal';
   import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard';
   import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard';
@@ -50,6 +51,7 @@
       FullScreenLayout,
       PublicLayout,
       BlankLayout,
+      SplitLayout,
       Modal,
       NewContentBlockWizard,
       EditContentBlockWizard,
diff --git a/client/src/layouts/SplitLayout.vue b/client/src/layouts/SplitLayout.vue
new file mode 100644
index 00000000..89531649
--- /dev/null
+++ b/client/src/layouts/SplitLayout.vue
@@ -0,0 +1,142 @@
+<template>
+  <div :class="['split-view', {'split-view--illustration': illustration}]">
+    <div class="split-view__illustration">
+      <component :is="illustration"/>
+    </div>
+    <div class="split-view__content">
+      <router-view/>
+    </div>
+  </div>
+</template>
+
+<script>
+  import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
+  import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
+  import RoomsIllustration from '@/components/illustrations/RoomsIllustration';
+
+  export default {
+    components: {
+      contents: ContentsIllustration,
+      portfolio: PortfolioIllustration,
+      rooms: RoomsIllustration
+    },
+
+    computed: {
+      illustration() {
+        return this.$route.meta.illustration;
+      }
+    },
+  };
+</script>
+
+<style lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .split-view {
+    background-color: $color-brand;
+
+    display: flex;
+    position: relative;
+
+    &--illustration {
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 50%;
+        background: $color-brand-dark;
+      }
+    }
+
+    &__illustration {
+      width: 30vw;
+      min-width: 400px;
+      align-self: center;
+      background-color: $color-brand;
+      z-index: 1;
+      display: none;
+
+      @include desktop {
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    &__content {
+      background-color: $color-white;
+      padding: $medium-spacing;
+      display: flex;
+      flex-direction: column;
+      z-index: 1;
+
+      @include desktop {
+        padding: 2*$large-spacing;
+      }
+    }
+
+    &__logo {
+      width: 300px;
+      height: 50px;
+      margin-bottom: $large-spacing;
+
+      @include desktop {
+        margin-bottom: 70px;
+      }
+    }
+
+    &__page-subheading {
+      @include regular-text;
+      color: $color-brand;
+      margin-bottom: $small-spacing;
+    }
+
+    &__page-heading {
+      @include heading-2;
+      color: $color-brand;
+      margin-bottom: 2*$large-spacing;
+    }
+
+    &__heading {
+      @include heading-2;
+      margin-bottom: $small-spacing;
+    }
+
+    &__claim {
+      @include heading-2;
+      margin-bottom: 70px;
+    }
+
+    &__paragraph {
+      @include regular-text;
+      margin-bottom: $medium-spacing;
+
+      &:last-of-type {
+        margin-bottom: 2*$large-spacing;
+      }
+    }
+
+    &__button {
+      @include regular-text;
+      flex-grow: 0;
+      align-self: flex-start;
+      min-width: 150px;
+      display: inline-flex;
+      box-sizing: border-box;
+      justify-content: center;
+      margin-bottom: $large-spacing;
+      cursor: pointer;
+    }
+
+    &__secondary-link {
+      @include inline-title;
+      cursor: pointer;
+
+      @include desktop {
+        margin-top: auto;
+      }
+    }
+  }
+</style>
diff --git a/client/src/pages/forgot-password.vue b/client/src/pages/forgot-password.vue
deleted file mode 100644
index 84b3eb03..00000000
--- a/client/src/pages/forgot-password.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<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. Um Ihr Passwort zurückzusetzen,
-        gehen Sie
-        auf die Verlagsseite.</p>
-    </section>
-    <section class="forgot-password__section forgot-password__text">
-      <p class="forgot-info">
-        Passwort unter
-        <a
-          class="hep-link"
-          href="https://www.hep-verlag.ch/customer/account/forgotpassword/"
-          target="_blank">www.hep-verlag.ch</a> zurücksetzen</p>
-    </section>
-  </div>
-</template>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-
-  .forgot-info {
-    font-family: $sans-serif-font-family;
-    margin-bottom: $medium-spacing;
-
-  }
-
-  .forgot-password__link {
-    margin-top: $large-spacing;
-  }
-
-</style>
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index 8cc653e9..e89e7573 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="hello public-page">
+  <div
+    class="hello"
+    data-cy="hello-page">
     <h1
       class="hello__title public-page__title"
       data-cy="hello-title">Wollen Sie {{ pageTitle }} jetzt im Unterricht verwenden?</h1>
@@ -11,7 +13,6 @@
 
 <script>
 
-  // import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
   import LoadingButton from '@/components/LoadingButton';
   import pageTitleMixin from '@/mixins/page-title';
 
diff --git a/client/src/pages/onboarding.vue b/client/src/pages/onboarding.vue
index e4e41e3d..02224369 100644
--- a/client/src/pages/onboarding.vue
+++ b/client/src/pages/onboarding.vue
@@ -1,40 +1,26 @@
 <template>
   <div
-    :class="['onboarding', {'onboarding--illustration': illustration}]"
+    class="onboarding__content"
     data-cy="onboarding-page">
-    <div class="onboarding__illustration">
-      <component :is="illustration"/>
-    </div>
-    <div class="onboarding__content">
-      <router-view/>
-      <a
-        class="onboarding__button button button--primary button--big"
-        data-cy="onboarding-next-link"
-        @click="next">{{ nextLabel }}
-      </a>
-      <a
-        class="onboarding__secondary-link"
-        data-cy="onboarding-skip-link"
-        @click.prevent="completeOnboarding">Einführung überspringen</a>
-    </div>
+    <router-view/>
+    <a
+      class="onboarding__button button button--primary button--big"
+      data-cy="onboarding-next-link"
+      @click="next">{{ nextLabel }}
+    </a>
+    <a
+      class="onboarding__secondary-link"
+      data-cy="onboarding-skip-link"
+      @click.prevent="completeOnboarding">Einführung überspringen</a>
   </div>
 </template>
 
 <script>
-  import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
-  import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
-  import RoomsIllustration from '@/components/illustrations/RoomsIllustration';
 
   import UPDATE_ONBOARDING_PROGRESS from '@/graphql/gql/mutations/updateOnboardingProgress.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery';
 
   export default {
-    components: {
-      contents: ContentsIllustration,
-      portfolio: PortfolioIllustration,
-      rooms: RoomsIllustration
-    },
-
     computed: {
       nextLabel() {
         return this.$route.name === 'onboarding-start' ? 'Einführung starten' : 'Weiter';
diff --git a/client/src/router/auth.routes.js b/client/src/router/auth.routes.js
index 89988829..43cc946c 100644
--- a/client/src/router/auth.routes.js
+++ b/client/src/router/auth.routes.js
@@ -7,7 +7,7 @@ export default [
     name: 'hello',
     component: hello,
     meta: {
-      layout: 'public',
+      layout: 'split',
       public: true,
     },
   },
diff --git a/client/src/router/index.js b/client/src/router/index.js
index b05f4c03..406b3079 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -11,7 +11,6 @@ import surveyPage from '@/pages/survey';
 import styleGuidePage from '@/pages/styleguide';
 import checkEmail from '@/pages/check-email';
 import licenseActivation from '@/pages/license-activation';
-import forgotPassword from '@/pages/forgot-password';
 import joinClass from '@/pages/joinClass';
 import news from '@/pages/news';
 
@@ -31,7 +30,7 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: start,
+    component: start
   },
   ...moduleRoutes,
   ...authRoutes,
@@ -73,15 +72,6 @@ const routes = [
       layout: 'public',
     },
   },
-  {
-    path: '/forgot-password',
-    component: forgotPassword,
-    name: 'forgotPassword',
-    meta: {
-      layout: 'public',
-      public: true,
-    },
-  },
   {
     path: '/news',
     component: news,
diff --git a/client/src/router/onboarding.routes.js b/client/src/router/onboarding.routes.js
index 00fd4c04..e5d8e4ea 100644
--- a/client/src/router/onboarding.routes.js
+++ b/client/src/router/onboarding.routes.js
@@ -16,7 +16,7 @@ export default [
         component: onboardingStart,
         name: 'onboarding-start',
         meta: {
-          layout: 'blank',
+          layout: 'split',
           next: ONBOARDING_STEP_1,
         },
       },
@@ -25,7 +25,7 @@ export default [
         component: onboardingStep1,
         name: ONBOARDING_STEP_1,
         meta: {
-          layout: 'blank',
+          layout: 'split',
           next: ONBOARDING_STEP_2,
           illustration: 'contents',
         },
@@ -35,7 +35,7 @@ export default [
         component: onboardingStep2,
         name: ONBOARDING_STEP_2,
         meta: {
-          layout: 'blank',
+          layout: 'split',
           next: ONBOARDING_STEP_3,
           illustration: 'rooms',
         },
@@ -45,7 +45,7 @@ export default [
         component: onboardingStep3,
         name: ONBOARDING_STEP_3,
         meta: {
-          layout: 'blank',
+          layout: 'split',
           next: 'home',
           illustration: 'portfolio',
         },