Style default layout, style login

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>

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>

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>

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;
+  }
+}

client/src/styles/main.scss

@@ -18,3 +18,4 @@
 @import "survey";
 @import "visibility";
 @import "solutions";
+@import "password_forms";