From ea16d1652ab5a18170ee2282ff8a3922d125b1f3 Mon Sep 17 00:00:00 2001
From: Brent Vardy <brent.vardy@challengelogic.net>
Date: Sat, 7 Sep 2019 09:51:27 +0100
Subject: [PATCH] used no header for login and password reset pages

- added locale switch back on login
- added locale switch to password reset
- increased width of login and password reset
- added logo to password reset

- co-authored-by: mattwr18 <mattwr18@gmail.com>
- co-authored-by: mikeaono <aonomike@gmail.com>
---
 webapp/components/PasswordReset/Request.vue | 113 +++++++++++++-------
 webapp/layouts/no-header.vue                |  29 +++++
 webapp/pages/login.vue                      |  11 +-
 webapp/pages/password-reset.vue             |   5 +-
 4 files changed, 113 insertions(+), 45 deletions(-)
 create mode 100644 webapp/layouts/no-header.vue

diff --git a/webapp/components/PasswordReset/Request.vue b/webapp/components/PasswordReset/Request.vue
index 8ca2da89b..ff2d0206d 100644
--- a/webapp/components/PasswordReset/Request.vue
+++ b/webapp/components/PasswordReset/Request.vue
@@ -1,58 +1,75 @@
 <template>
   <ds-card class="password-reset">
-    <ds-space margin="large">
-      <ds-form
-        v-if="!submitted"
-        @input="handleInput"
-        @input-valid="handleInputValid"
-        v-model="formData"
-        :schema="formSchema"
-        @submit="handleSubmit"
-      >
-        <ds-input
-          :placeholder="$t('login.email')"
-          type="email"
-          id="email"
-          model="email"
-          name="email"
-          icon="envelope"
-        />
-        <ds-space margin-botton="large">
-          <ds-text>
-            {{ $t('password-reset.form.description') }}
-          </ds-text>
+    <ds-flex gutter="small">
+      <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+        <client-only>
+          <locale-switch class="login-locale-switch" offset="5" />
+        </client-only>
+        <ds-space margin-top="small" margin-bottom="xxx-small" centered>
+          <img class="login-image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
         </ds-space>
-        <ds-button
-          :disabled="disabled"
-          :loading="$apollo.loading"
-          primary
-          fullwidth
-          name="submit"
-          type="submit"
-          icon="envelope"
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+        <ds-space margin="small">
+          <ds-text size="small">{{ $t('login.copy') }}</ds-text>
+        </ds-space>
+        <ds-form
+          v-if="!submitted"
+          @input="handleInput"
+          @input-valid="handleInputValid"
+          v-model="formData"
+          :schema="formSchema"
+          @submit="handleSubmit"
         >
-          {{ $t('password-reset.form.submit') }}
-        </ds-button>
-      </ds-form>
-      <div v-else>
-        <transition name="ds-transition-fade">
-          <ds-flex centered>
-            <sweetalert-icon icon="info" />
-          </ds-flex>
-        </transition>
-        <ds-text v-html="submitMessage" />
-      </div>
-    </ds-space>
+          <ds-input
+            :placeholder="$t('login.email')"
+            type="email"
+            id="email"
+            model="email"
+            name="email"
+            icon="envelope"
+          />
+          <ds-space margin-botton="large">
+            <ds-text>
+              {{ $t('password-reset.form.description') }}
+            </ds-text>
+          </ds-space>
+          <ds-button
+            :disabled="disabled"
+            :loading="$apollo.loading"
+            primary
+            fullwidth
+            name="submit"
+            type="submit"
+            icon="envelope"
+          >
+            {{ $t('password-reset.form.submit') }}
+          </ds-button>
+        </ds-form>
+        <div v-else>
+          <transition name="ds-transition-fade">
+            <ds-flex centered>
+              <sweetalert-icon icon="info" />
+            </ds-flex>
+          </transition>
+          <ds-text v-html="submitMessage" />
+        </div>
+      </ds-flex-item>
+    </ds-flex>
+
+    <ds-space margin="x-small"></ds-space>
   </ds-card>
 </template>
 
 <script>
 import gql from 'graphql-tag'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
+import LocaleSwitch from '../LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {
     SweetalertIcon,
+    LocaleSwitch,
   },
   data() {
     return {
@@ -105,3 +122,17 @@ export default {
   },
 }
 </script>
+<style>
+.login-image {
+  width: 90%;
+  max-width: 200px;
+}
+.password-reset {
+  position: relative;
+}
+.login-locale-switch {
+  position: absolute;
+  top: 1em;
+  left: 1em;
+}
+</style>
diff --git a/webapp/layouts/no-header.vue b/webapp/layouts/no-header.vue
new file mode 100644
index 000000000..96f921d36
--- /dev/null
+++ b/webapp/layouts/no-header.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="layout-blank">
+    <ds-container>
+      <div style="padding: 5rem 2rem;">
+        <nuxt />
+      </div>
+    </ds-container>
+    <page-footer />
+    <div id="overlay" />
+  </div>
+</template>
+
+<script>
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import seo from '~/mixins/seo'
+import PageFooter from '~/components/PageFooter/PageFooter'
+
+export default {
+  components: {
+    PageFooter,
+  },
+  mixins: [seo],
+  methods: {
+    redirectToRoot() {
+      this.$router.replace('/')
+    },
+  },
+}
+</script>
diff --git a/webapp/pages/login.vue b/webapp/pages/login.vue
index f8a3e4565..fe5ef983f 100644
--- a/webapp/pages/login.vue
+++ b/webapp/pages/login.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="fade" appear>
-    <ds-container v-if="ready" width="small">
+    <ds-container v-if="ready" width="medium">
       <ds-space margin="small">
         <blockquote>
           <p>{{ $t('quotes.african.quote') }}</p>
@@ -10,6 +10,9 @@
       <ds-card class="login-card">
         <ds-flex gutter="small">
           <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+            <client-only>
+              <locale-switch class="login-locale-switch" offset="5" />
+            </client-only>
             <ds-space margin-top="small" margin-bottom="xxx-small" centered>
               <img
                 class="login-image"
@@ -69,9 +72,13 @@
 <script>
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
 export default {
-  layout: 'basic',
+  layout: 'no-header',
+  components: {
+    LocaleSwitch,
+  },
   data() {
     return {
       ready: false,
diff --git a/webapp/pages/password-reset.vue b/webapp/pages/password-reset.vue
index 9b955747f..76590d62b 100644
--- a/webapp/pages/password-reset.vue
+++ b/webapp/pages/password-reset.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-container width="small">
+  <ds-container width="medium">
     <ds-flex>
       <ds-flex-item :width="{ base: '100%' }" centered>
         <ds-space style="text-align: center;" margin-top="small" margin-bottom="xxx-small" centered>
@@ -11,8 +11,9 @@
 </template>
 
 <script>
+
 export default {
-  layout: 'basic',
+  layout: 'no-header',
   asyncData({ store, redirect }) {
     if (store.getters['auth/isLoggedIn']) {
       redirect('/')