Redid the template for profile, regist and siginin to better use the

components we have made and to use update function definition.
Changed the message system with SeasonedMessages. This means simpler
interaction and less duplicate code now that the messagesystem is a
separate component that both interface with.

src/components/Profile.vue

@@ -34,7 +34,6 @@ import Settings from '@/components/Settings.vue'
 import SeasonedButton from '@/components/ui/SeasonedButton.vue'
 
 import { getEmoji } from '@/api.js'
-// import CreatedLists from './CreatedLists.vue'
 
 export default {
   components: { MoviesList, Settings, SeasonedButton },

src/components/Register.vue

@@ -1,41 +1,18 @@
 <template>
-  <section class="profile">
+  <section>
-    <div class="profile__content">
+    <h1>Register new user</h1>
-      <h2 class='settings__header'>Register new user</h2>
 
-      <form class="form">
+    <seasoned-input text="username" icon="Email" type="username"
-        <seasoned-input text="username" icon="Email"
+                    @inputValue="setValue('username', $event)" />
-                        @inputValue="setValue('username', $event)"></seasoned-input>
     <seasoned-input text="password" icon="Keyhole" type="password"
-                        @inputValue="setValue('password', $event)"></seasoned-input>
+                    @inputValue="setValue('password', $event)" @enter="requestNewUser"/>
     <seasoned-input text="repeat password" icon="Keyhole" type="password"
-                        @inputValue="setValue('passwordRepeat', $event)"></seasoned-input>
+                    @inputValue="setValue('password', $event)" @enter="requestNewUser"/>
 
-        <transition name="message-fade">
-          <div class="message" :class="messageClass" v-if="showMessage">
-            <span class="message-text">{{ messageText }}</span>
-            <span class="message-dismiss" v-on:click="dismissMessage">X</span>
-          </div>
-        </transition>
-
-        <div class="form__group">
     <seasoned-button @click="requestNewUser">Register</seasoned-button>
-        </div>
-      </form>
 
-      <div class="form__group">
+    <router-link class="link" to="/signin">Have a user? Sign in here</router-link>
-        <router-link class="form__group-link" :to="{name: 'signin'}" exact title="Sign in here">
+    <seasoned-messages :messages.sync="messages"></seasoned-messages>
-          <span class="form__group-signin">Sign in here</span>
-        </router-link>
-      </div>
-
-    </div>
-    <section class="not-found" v-if="userLoggedIn === false">
-      <div class="not-found__content">
-        <h2 class="not-found__title">Authentication Request Failed</h2>
-        <button class="not-found__button button">Log In</button>
-      </div>
-    </section>
   </section>
 </template>
 
@@ -44,18 +21,16 @@ import axios from 'axios'
 import storage from '@/storage.js'
 import SeasonedButton from '@/components/ui/SeasonedButton.vue'
 import SeasonedInput from '@/components/ui/SeasonedInput.vue'
+import SeasonedMessages from '@/components/ui/SeasonedMessages.vue'
 
 export default {
-  components: { SeasonedButton, SeasonedInput },
+  components: { SeasonedButton, SeasonedInput, SeasonedMessages },
   data(){
     return{
-      userLoggedIn: '',
+      messages: [],
       username: undefined,
       password: undefined,
-      passwordRepeat: undefined,
+      passwordRepeat: undefined
-      showMessage: false,
-      messageClass: 'message-success',
-      messageText: 'hello world'
     }
   },
   methods: {
@@ -71,10 +46,9 @@ export default {
           username: username,
           password: password
         })
-        .then(function(resp) {
+        .then(resp => {
           let data = resp.data;
           if (data.success){
-            this.msg(data.message, 'success');
             localStorage.setItem('token', data.token);
             localStorage.setItem('username', username);
             localStorage.setItem('admin', data.admin)
@@ -82,13 +56,13 @@ export default {
             eventHub.$emit('setUserStatus');
             this.$router.push({ name: 'profile' })
           }
-        }.bind(this))
+        })
-        .catch(function(error){
+        .catch(error => {
-          this.msg(error.response.data.error, 'warning')
+          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.response.data.error })
-        }.bind(this));
+        });
       } 
       else {
-        this.msg(verifyCredentials.reason, 'warning');
+        this.messages.push({ type: 'warning', title: 'Parse error', message: verifyCredentials.reason })
       }
     },
     checkCredentials(username, password, password_re) {
@@ -111,20 +85,6 @@ export default {
         }
       }
     },
-    msg(text, status){
-      if (status === 'warning')
-        this.messageClass = 'message-warning';
-      else if (status === 'success')
-        this.messageClass = 'message-success';
-      else
-        this.messageClass = 'message-info';
-      this.messageText = text;
-      this.showMessage = true;
-      // setTimeout(() => this.showMessage = false, 3500);
-    },
-    dismissMessage(){
-      this.showMessage = false;
-    },
     setValue(l, t) {
       this[l] = t
     },

src/components/Signin.vue

@@ -1,50 +1,34 @@
 <template>
-  <section class="profile">
+  <section>
-    <div class="profile__content">
+    <h1>Sign in</h1>
-      <h2 class='settings__header'>Sign in</h2>
-
-      <form class="form">
-        <div class="form__buffer"></div>
 
     <seasoned-input text="username" icon="Email" type="username"
                     @inputValue="setValue('username', $event)" />
-          <seasoned-input text="username" icon="Keyhole" type="password"
+    <seasoned-input text="password" icon="Keyhole" type="password"
-                          @inputValue="setValue('password', $event)" />
+                    @inputValue="setValue('password', $event)" @enter="signin"/>
 
     <seasoned-button @click="signin">sign in</seasoned-button>
 
-          <transition name="message-fade">
+    <router-link class="link" to="/register">Don't have a user? Register here</router-link>
-              <div class="message" :class="messageClass" v-if="showMessage">
+    <seasoned-messages :messages.sync="messages"></seasoned-messages>
-                <span class="message-text">{{ messageText }}</span>
-                <span class="message-dismiss" @click="showMessage=false">X</span>
-              </div>
-            </transition>
-      </form>
 
-      <div class="form__group">
-        <router-link class="form__group-link" :to="{name: 'register'}" exact title="Sign in here">
-          <span class="form__group-signin">Don't have a user? Register here</span>
-        </router-link>
-      </div>
-
-    </div>
   </section>
 </template>
 
+
+
 <script>
 import axios from 'axios'
 import storage from '../storage.js'
 import SeasonedInput from '@/components/ui/SeasonedInput.vue'
 import SeasonedButton from '@/components/ui/SeasonedButton.vue'
+import SeasonedMessages from '@/components/ui/SeasonedMessages.vue'
 
 export default {
-  components: { SeasonedInput, SeasonedButton },
+  components: { SeasonedInput, SeasonedButton, SeasonedMessages },
   data(){
     return{
-      userLoggedIn: '',
+      messages: [],
-      showMessage: false,
-      messageClass: 'message-success',
-      messageText: 'hello world',
       username: undefined,
       password: undefined
     }
@@ -61,49 +45,30 @@ export default {
         username: username,
         password: password
       })
-      .then(function (resp){
+      .then(resp => {
         let data = resp.data;
         if (data.success){
           localStorage.setItem('token', data.token);
           localStorage.setItem('username', username);
           localStorage.setItem('admin', data.admin);
-          this.userLoggedIn = true;
           
           eventHub.$emit('setUserStatus');
           this.$router.push({ name: 'profile' })
         }
-      }.bind(this))
+      })
-      .catch(function (error){
+      .catch(error => {
-        if (error.message.endsWith('401'))
+        if (error.message.endsWith('401')) {
-          this.msg('Incorrect username or password ', 'warning')
+          this.messages.push({ type: 'warning', title: 'Access denied', message: 'Incorrect username or password' })
-        else
+        }
-          this.msg(error.message, 'warning')
+        else {
-      }.bind(this));
+          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.message })
-    },
+        }
-    msg(text, status){
+      });
-      if (status === 'warning')
+    }
-        this.messageClass = 'message-warning';
-      else if (status === 'success')
-        this.messageClass = 'message-success';
-      else
-        this.messageClass = 'message-info';
-      this.messageText = text;
-      this.showMessage = true;
-      // setTimeout(() => this.showMessage = false, 3500);
-    },
-    toggleView(){
-      this.register = false;
-    },
   },
   created(){
     document.title = 'Sign in' + storage.pageTitlePostfix;
     storage.backTitle = document.title;
-    if (this.userLoggedIn == true) {
-      this.$router.push({ name: 'profile' })
-    }
-  },
-  mounted(){
-    // this.$refs.email.focus();
   }
 }
 </script>

src/components/ui/SeasonedMessages.vue

@@ -0,0 +1,159 @@
+<template>
+  <transition-group name="fade">
+    <div class="message" v-for="message in messages" :class="message.type || 'warning'" :key="message">
+      <span class="pinstripe"></span>
+      <div>
+        <h2>{{ message.title || defaultTitles[message.type] }}</h2>
+        <span>{{ message.message }}</span>
+      </div>
+
+      <button class="dismiss" @click="clicked(message)">X</button>
+    </div>
+  </transition-group>
+</template>
+
+<script>
+
+export default {
+  props: {
+    messages: {
+      required: true,
+      type: Array
+    }
+  },
+  data() {
+    return {
+      defaultTitles: {
+        error: 'Unexpected error',
+        warning: 'Something went wrong',
+        undefined: 'Something went wrong'
+      },
+      localMessages: [...this.messages]
+    }
+  },
+  methods: {
+    clicked(e) {
+      const removedMessage = [...this.messages].filter(mes => mes !== e)
+      this.$emit('update:messages', removedMessage)
+    }
+  },
+  // watch: {
+  //   messages(propState, oldState) {
+  //     const newMessage = propState.filter(msg => !this.localMessages.includes(msg))
+  //     console.log('newMessage', newMessage)
+  //     this.localMessages = this.localMessages.concat(newMessage)
+  //   }
+  // }
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+.fade-enter-active {
+  transition: opacity .4s;
+}
+.fade-leave-active {
+  transition: opacitiy .1s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.message {
+  width: 100%;
+  max-width: 35rem;
+  height: 80px;
+
+  display: flex;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  // padding-bottom: 1rem;
+  // background-color: red;
+
+  &:first-of-type {
+    background-color: navajowhite;
+  }
+  
+
+  > div {
+    margin: 8px 24px;
+    width: 100%;
+
+  }
+
+  h2 {
+    font-weight: 300;
+    margin: 0;
+  }
+  span {
+    font-weight: 300;
+  }
+
+  .pinstripe {
+    height: 100%;
+    width: 0.5rem;
+    // background-color: $color-error-highlight;
+  }
+
+  .dismiss {
+    position: relative;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-color: transparent;
+    border: unset;
+    font-size: 18px;
+    cursor: pointer;
+
+    top: 0;
+    float: right;
+    height: 1.5rem;
+    width: 1.5rem;
+    padding: 0;
+    margin-top: 0.5rem;
+    margin-right: 0.5rem;
+    transition: color .5s ease;
+    color: $white-80;
+
+    &:hover {
+      color: $white;
+    }
+  }
+
+  &.success {
+    color: $color-error-text;
+    background-color: $color-success;
+
+    .pinstripe {
+      background-color: $color-success-highlight;
+    }
+  }
+  
+  &.error {
+    color: $color-error-text;
+    background-color: $color-error;
+
+    .pinstripe {
+      background-color: $color-error-highlight;
+    }
+  }
+
+  &.warning {
+    color: $black;
+    background-color: $color-warning;
+
+    .dismiss {
+      color: $black-80;
+
+      &:hover {
+        color: $black;
+      }
+    }
+    
+    .pinstripe {
+      background-color: $color-warning-light;
+    }
+  }
+}
+
+</style>