implement message system

src/LessPass.vue

@@ -2,6 +2,7 @@
     <div id="lesspass" class="card" style="max-width: 420px;"
          v-bind:class="{ 'v1': version===1, 'v2': version===2 }">
         <lesspass-menu></lesspass-menu>
+        <lesspass-message></lesspass-message>
         <div class="card-block">
             <router-view></router-view>
         </div>
@@ -10,15 +11,18 @@
 <script type="text/ecmascript-6">
     import './LessPass.scss';
     import Menu from './components/Menu.vue';
+    import Message from './components/Message.vue';
     import {mapGetters} from 'vuex';
 
     export default {
         name: 'LessPass',
         components: {
-            'lesspass-menu': Menu
+            'lesspass-menu': Menu,
+            'lesspass-message': Message
         },
         computed: mapGetters(['version']),
         created(){
+            this.$store.dispatch('cleanMessage');
             this.$store.dispatch('loadPasswordFirstTime');
             this.$store.dispatch('refreshToken');
         }

src/components/Message.vue

@@ -0,0 +1,42 @@
+<style>
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .5s
+    }
+
+    .fade-enter, .fade-leave-to {
+        opacity: 0
+    }
+
+    #message {
+        position: absolute;
+        top: 49px;
+        left: 0;
+        right: 0;
+        z-index: 20;
+    }
+</style>
+<template>
+    <div id="message">
+        <transition name="fade">
+            <div v-if="message.text">
+                <div class="card-header text-white"
+                     v-bind:class="{ 'card-warning': message.status==='warning', 'card-danger': message.status==='error', 'card-success': message.status==='success' }">
+                    <div class="row">
+                        <div class="col-12">
+                            <small>message</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+<script type="text/ecmascript-6">
+    import {mapGetters} from 'vuex';
+
+    export default {
+        computed: mapGetters([
+            'message'
+        ])
+    }
+</script>

src/store/actions.js

@@ -82,4 +82,16 @@ export const deletePassword = ({commit, state}, payload) => {
         .then(() => {
             commit(types.DELETE_PASSWORD, payload);
         });
-};
+};
+
+export const displayMessage = ({commit}, payload) => {
+    commit(types.SET_MESSAGE, {message: payload});
+    setTimeout(() => {
+        commit(types.CLEAN_MESSAGE);
+    }, 3000);
+};
+
+
+export const cleanMessage = ({commit}, payload) => {
+    commit(types.CLEAN_MESSAGE);
+};

src/store/getters.js

@@ -10,7 +10,7 @@ export const isGuest = state => !state.authenticated;
 
 export const baseURL = state => state.baseURL;
 
-export const passwordStatus = state => state.passwordStatus;
+export const message = state => state.message;
 
 export const version = state => {
     if (state.password === null || state.route.path === '/options/default') {

src/store/mutation-types.js

@@ -10,3 +10,5 @@ export const SET_BASE_URL = 'SET_BASE_URL';
 export const SET_VERSION = 'SET_VERSION';
 export const LOAD_PASSWORD_FIRST_TIME = 'LOAD_PASSWORD_FIRST_TIME';
 export const LOAD_PASSWORD_FOR_SITE = 'LOAD_PASSWORD_FOR_SITE';
+export const SET_MESSAGE = 'SET_MESSAGE';
+export const CLEAN_MESSAGE = 'CLEAN_MESSAGE';

src/store/mutations.js

@@ -60,5 +60,11 @@ export default {
                 break;
             }
         }
-    }
+    },
+    [types.SET_MESSAGE](state, {message}){
+        state.message = message;
+    },
+    [types.CLEAN_MESSAGE](state){
+        state.message = {text: '', status: 'success'};
+    },
 };

test/store.getters.js

@@ -48,4 +48,13 @@ test('passwordURL', t => {
     };
 
     t.is(getters.passwordURL(state), 'https://lesspass.com/#/?login=test@example.org&site=example.org&uppercase=true&lowercase=true&numbers=true&symbols=false&length=16&counter=1&version=2')
+});
+
+test('message', t => {
+    const state = {
+        message: {text: 'error message', status:'error'}
+    };
+    const message = getters.message(state);
+    t.is(message.text, state.message.text);
+    t.is(message.status, state.message.status);
 });

test/store.mutations.js

@@ -278,4 +278,20 @@ test('LOAD_PASSWORD_FOR_SITE multiple accounts matching criteria', t => {
     LOAD_PASSWORD_FOR_SITE(state, {site: 'www.google.com', url: 'https://www.google.com'});
     t.is(state.password.id, '2');
     t.is(state.password.site, 'www.google.com');
+});
+
+test('SET_MESSAGE', t => {
+    const SET_MESSAGE = mutations[types.SET_MESSAGE];
+    const state = {};
+    SET_MESSAGE(state, {message: {text: 'success message', status: 'success'}});
+    t.is(state.message.text, 'success message');
+    t.is(state.message.status, 'success');
+});
+
+test('CLEAN_MESSAGE', t => {
+    const CLEAN_MESSAGE = mutations[types.CLEAN_MESSAGE];
+    const state = {message: {text: 'error message', status: 'error'}};
+    CLEAN_MESSAGE(state);
+    t.is(state.message.text, '');
+    t.is(state.message.status, 'success');
 });