From cde119592d928f5a0a7c9397ca8f42cebac649ac Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Mon, 21 Oct 2019 00:22:37 +0200
Subject: [PATCH] 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             |   1 -
 src/components/Register.vue            |  82 ++++---------
 src/components/Signin.vue              |  85 ++++---------
 src/components/ui/SeasonedMessages.vue | 159 +++++++++++++++++++++++++
 4 files changed, 205 insertions(+), 122 deletions(-)
 create mode 100644 src/components/ui/SeasonedMessages.vue

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 26c4c3c..e3ee9e9 100644
--- a/src/components/Profile.vue
+++ b/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 },
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 32bc51b..19899f6 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -1,41 +1,18 @@
 <template>
-  <section class="profile">
-    <div class="profile__content">
-      <h2 class='settings__header'>Register new user</h2>
+  <section>
+    <h1>Register new user</h1>
 
-      <form class="form">
-        <seasoned-input text="username" icon="Email"
-                        @inputValue="setValue('username', $event)"></seasoned-input>
-        <seasoned-input text="password" icon="Keyhole" type="password"
-                        @inputValue="setValue('password', $event)"></seasoned-input>
-        <seasoned-input text="repeat password" icon="Keyhole" type="password"
-                        @inputValue="setValue('passwordRepeat', $event)"></seasoned-input>
+    <seasoned-input text="username" icon="Email" type="username"
+                    @inputValue="setValue('username', $event)" />
+    <seasoned-input text="password" icon="Keyhole" type="password"
+                    @inputValue="setValue('password', $event)" @enter="requestNewUser"/>
+    <seasoned-input text="repeat password" icon="Keyhole" type="password"
+                    @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>
+    <seasoned-button @click="requestNewUser">Register</seasoned-button>
 
-        <div class="form__group">
-          <seasoned-button @click="requestNewUser">Register</seasoned-button>
-        </div>
-      </form>
-      
-      <div class="form__group">
-        <router-link class="form__group-link" :to="{name: 'signin'}" exact title="Sign in here">
-          <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>
+    <router-link class="link" to="/signin">Have a user? Sign in here</router-link>
+    <seasoned-messages :messages.sync="messages"></seasoned-messages>
   </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,
-      showMessage: false,
-      messageClass: 'message-success',
-      messageText: 'hello world'
+      passwordRepeat: undefined
     }
   },
   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){
-          this.msg(error.response.data.error, 'warning')
-        }.bind(this));
+        })
+        .catch(error => {
+          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.response.data.error })
+        });
       } 
       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
     },
diff --git a/src/components/Signin.vue b/src/components/Signin.vue
index 9bcfabb..1be4afc 100644
--- a/src/components/Signin.vue
+++ b/src/components/Signin.vue
@@ -1,50 +1,34 @@
 <template>
-  <section class="profile">
-    <div class="profile__content">
-      <h2 class='settings__header'>Sign in</h2>
+  <section>
+    <h1>Sign in</h1>
 
-      <form class="form">
-        <div class="form__buffer"></div>
+    <seasoned-input text="username" icon="Email" type="username"
+                    @inputValue="setValue('username', $event)" />
+    <seasoned-input text="password" icon="Keyhole" type="password"
+                    @inputValue="setValue('password', $event)" @enter="signin"/>
 
-          <seasoned-input text="username" icon="Email" type="username"
-                          @inputValue="setValue('username', $event)" />
-          <seasoned-input text="username" icon="Keyhole" type="password"
-                          @inputValue="setValue('password', $event)" />
+    <seasoned-button @click="signin">sign in</seasoned-button>
 
-          <seasoned-button @click="signin">sign in</seasoned-button>
-          
-          <transition name="message-fade">
-              <div class="message" :class="messageClass" v-if="showMessage">
-                <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>
+    <router-link class="link" to="/register">Don't have a user? Register here</router-link>
+    <seasoned-messages :messages.sync="messages"></seasoned-messages>
 
-    </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: '',
-      showMessage: false,
-      messageClass: 'message-success',
-      messageText: 'hello world',
+      messages: [],
       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){
-        if (error.message.endsWith('401'))
-          this.msg('Incorrect username or password ', 'warning')
-        else
-          this.msg(error.message, 'warning')
-      }.bind(this));
-    },
-    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;
-    },
+      })
+      .catch(error => {
+        if (error.message.endsWith('401')) {
+          this.messages.push({ type: 'warning', title: 'Access denied', message: 'Incorrect username or password' })
+        }
+        else {
+          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.message })
+        }
+      });
+    }
   },
   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>
diff --git a/src/components/ui/SeasonedMessages.vue b/src/components/ui/SeasonedMessages.vue
new file mode 100644
index 0000000..b68c415
--- /dev/null
+++ b/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>
\ No newline at end of file