From 57224d228a1b1ee2781cbf61b7bd49f429ddf244 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 2 Oct 2019 16:46:10 +0200
Subject: [PATCH] Style default layout, style login

---
 .../components/profile/PasswordChangeForm.vue | 31 ----------------
 client/src/layouts/PublicLayout.vue           |  7 +++-
 client/src/pages/login.vue                    | 35 ++-----------------
 client/src/styles/_password_forms.scss        | 30 ++++++++++++++++
 client/src/styles/main.scss                   |  1 +
 5 files changed, 40 insertions(+), 64 deletions(-)
 create mode 100644 client/src/styles/_password_forms.scss

diff --git a/client/src/components/profile/PasswordChangeForm.vue b/client/src/components/profile/PasswordChangeForm.vue
index 98749d10..f462abee 100644
--- a/client/src/components/profile/PasswordChangeForm.vue
+++ b/client/src/components/profile/PasswordChangeForm.vue
@@ -82,35 +82,4 @@
     }
   }
 
-  .sbform-input {
-
-    margin-bottom: 20px;
-    font-family: $sans-serif-font-family;
-
-    &__label {
-      margin-bottom: 10px;
-      display: inline-block;
-    }
-
-    &__input {
-      width: 100%;
-
-      &--error {
-        border-color: $color-error;
-      }
-    }
-
-    &__error {
-      margin-top: 10px;
-      color: $color-error;
-      display: inline-block;
-    }
-
-    &__hint {
-      margin-top: $small-spacing;
-      font-family: $sans-serif-font-family;
-      color: $color-silver-dark;
-    }
-  }
-
 </style>
diff --git a/client/src/layouts/PublicLayout.vue b/client/src/layouts/PublicLayout.vue
index 82ee90a3..9ce691b3 100644
--- a/client/src/layouts/PublicLayout.vue
+++ b/client/src/layouts/PublicLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container skillbox">
+  <div class="skillbox public">
     <logo></logo>
     <router-view class="skillbox__content"></router-view>
     <footer class="skillbox__footer">Footer</footer>
@@ -20,4 +20,9 @@ import Logo from '@/components/icons/Logo';
   @import "@/styles/_mixins.scss";
   @import "@/styles/_default-layout.scss";
 
+  .public {
+    max-width: 800px;
+    min-width: 320px;
+  }
+
 </style>
diff --git a/client/src/pages/login.vue b/client/src/pages/login.vue
index ec35d3ac..c2f96959 100644
--- a/client/src/pages/login.vue
+++ b/client/src/pages/login.vue
@@ -52,7 +52,7 @@
           data-cy="password-remote-errors"
         >{{ error }}</small>
       </div>
-      <div class="login-error">
+      <div class="sbform-input">
         <small class="sbform-input__error" v-if="loginError">{{loginError}}</small>
       </div>
       <button class="button button--primary change-form__submit" data-cy="change-password-button">Anmelden</button>
@@ -119,42 +119,13 @@ export default {
       password: '',
       emailErrors: [],
       passwordErrors: [],
-      loginError: ''
+      loginError: '',
+      submitted: false
     };
   }
 };
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/_variables.scss";
-@import "@/styles/_buttons.scss";
-.sbform-input {
-  margin-bottom: 20px;
-  font-family: $sans-serif-font-family;
 
-  &__label {
-    margin-bottom: 10px;
-    display: inline-block;
-  }
-
-  &__input {
-    width: 100%;
-
-    &--error {
-      border-color: $color-error;
-    }
-  }
-
-  &__error {
-    margin-top: 10px;
-    color: $color-error;
-    display: inline-block;
-  }
-
-  &__hint {
-    margin-top: $small-spacing;
-    font-family: $sans-serif-font-family;
-    color: $color-silver-dark;
-  }
-}
 </style>
diff --git a/client/src/styles/_password_forms.scss b/client/src/styles/_password_forms.scss
new file mode 100644
index 00000000..8925f9b2
--- /dev/null
+++ b/client/src/styles/_password_forms.scss
@@ -0,0 +1,30 @@
+.sbform-input {
+
+  margin-bottom: 20px;
+  font-family: $sans-serif-font-family;
+
+  &__label {
+    margin-bottom: 10px;
+    display: inline-block;
+  }
+
+  &__input {
+    width: 100%;
+
+    &--error {
+      border-color: $color-error;
+    }
+  }
+
+  &__error {
+    margin-top: 10px;
+    color: $color-error;
+    display: inline-block;
+  }
+
+  &__hint {
+    margin-top: $small-spacing;
+    font-family: $sans-serif-font-family;
+    color: $color-silver-dark;
+  }
+}
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 33a6b9a7..8720731c 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -18,3 +18,4 @@
 @import "survey";
 @import "visibility";
 @import "solutions";
+@import "password_forms";