remove current password in store

src/components/Login.vue

@@ -106,7 +106,6 @@
                         .then(()=> {
                             this.storage.save({baseURL: baseURL, email: email});
                             this.$store.dispatch('userAuthenticated', {email: email});
-                            this.$store.dispatch('loadPasswords');
                             this.$router.push({name: 'home'});
                         })
                         .catch(err => {

src/components/Menu.vue

@@ -12,6 +12,7 @@
 
     .menu-link:hover, .menu-link:focus, .menu-link:active {
         color: #373a3c;
+        text-decoration: none;
     }
 
     .menu-link-white {
@@ -63,12 +64,15 @@
     </div>
 </template>
 <script type="text/ecmascript-6">
-    import {mapGetters, mapActions} from 'vuex';
+    import {mapGetters} from 'vuex';
 
     export default {
-        methods: mapActions([
-            'logout'
-        ]),
+        methods: {
+            logout(){
+                this.$store.dispatch('logout');
+                this.$router.push({name: 'home'});
+            }
+        },
         computed: mapGetters([
             'isAuthenticated',
             'isGuest',

src/components/PasswordGenerator.vue

@@ -131,23 +131,30 @@
     import Clipboard from 'clipboard';
     import debounce from 'lodash.debounce';
     import {showTooltip} from '../api/tooltip';
+    import Storage from '../api/storage';
+    import HTTP from '../api/http';
+
+    const storage = new Storage();
+    const Passwords = new HTTP('passwords', storage);
+
+    const defaultPassword = {
+        site: '',
+        login: '',
+        options: {
+            uppercase: true,
+            lowercase: true,
+            numbers: true,
+            symbols: true,
+            length: 12,
+            counter: 1,
+        }
+    };
 
     export default {
         data(){
             return {
                 passwords: [],
-                password: {
-                    site: '',
-                    login: '',
-                    options: {
-                        uppercase: true,
-                        lowercase: true,
-                        numbers: true,
-                        symbols: true,
-                        length: 12,
-                        counter: 1
-                    }
-                },
+                password: defaultPassword,
                 masterPassword: '',
                 encryptedLogin: '',
                 generatedPassword: ''
@@ -176,16 +183,9 @@
             'masterPassword': function () {
                 this.encryptedLogin = '';
                 this.encryptLogin();
-            },
-            'currentPassword': function (newPassword) {
-                this.password = Object.assign({}, newPassword);
-                this.masterPassword = '';
-            },
-            'passwords': function (newPasswords) {
-                this.passwords = newPasswords;
             }
         },
-        computed: Object.assign(mapGetters(['passwords', 'isAuthenticated', 'currentPassword']), {
+        computed: Object.assign(mapGetters(['isAuthenticated']), {
             generatedPassword(){
                 return this.generatePassword();
             }
@@ -211,10 +211,34 @@
                 } else {
                     this.$refs.masterPassword.type = 'password';
                 }
+            },
+            fetchPasswords(){
+                Passwords.all().then(response => {
+                    this.passwords = response.data.results;
+                    this.$store.dispatch('setPasswords', response.data.results);
+                });
+            },
+            fetchPassword(id){
+                Passwords.get({id}).then(response => {
+                    this.password = response.data;
+                });
+            },
+            clean(mutation, state){
+                if (mutation.type == 'logout') {
+                    this.password = Object.assign({}, defaultPassword);
+                }
             }
         },
         created: function () {
-            this.$store.dispatch('loadPasswords');
+            if (this.isAuthenticated) {
+                const passwordId = this.$route.params.passwordId;
+                if (passwordId) {
+                    this.fetchPassword(passwordId);
+                }
+                this.fetchPasswords();
+            }
+
+            this.$store.subscribe(this.clean);
 
             var clipboard = new Clipboard('#copyPasswordButton');
             clipboard.on('success', function (e) {

src/components/Passwords.vue

@@ -24,11 +24,12 @@
             </div>
         </form>
         <div id="passwords">
-            <a href="#" class="list-group-item list-group-item-action" v-for="password in filteredPasswords"
-               v-on:click="setCurrentPasswordAndGoIndex(password)">
+            <router-link class="list-group-item list-group-item-action"
+                         :to="{ name: 'password', params: { passwordId: password.id }}"
+                         v-for="password in filteredPasswords">
                 <h5 class="list-group-item-heading">{{password.site}}</h5>
                 <p class="list-group-item-text">{{password.login}}</p>
-            </a>
+            </router-link>
         </div>
     </div>
 </template>
@@ -47,12 +48,6 @@
                     return password.site.indexOf(this.searchQuery) > -1 || password.login.indexOf(this.searchQuery) > -1
                 })
             }
-        }),
-        methods: {
-            setCurrentPasswordAndGoIndex(password){
-                this.$store.dispatch('setCurrentPassword', password);
-                this.$router.push({name: 'home'});
-            }
-        }
+        })
     }
 </script>

src/routes.js

@@ -14,7 +14,8 @@ const routes = [
     {path: '/', name: 'home', component: PasswordGenerator},
     {path: '/login', name: 'login', component: Login},
     {path: '/register', name: 'register', component: Register},
-    {path: '/passwords', name: 'passwords', component: Passwords},
+    {path: '/passwords/', name: 'passwords', component: Passwords},
+    {path: '/passwords/:passwordId', name: 'password', component: PasswordGenerator},
     {path: '/password/reset', name: 'passwordReset', component: PasswordReset},
     {path: '/password/reset/confirm/:uid/:token', name: 'passwordResetConfirm', component: PasswordResetConfirm},
 ];

src/store.js

@@ -1,48 +1,30 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import Auth from './api/auth';
-import HTTP from './api/http';
 import Storage from './api/storage';
 
 Vue.use(Vuex);
 
 const storage = new Storage();
 const auth = new Auth(storage);
-const passwords = new HTTP('passwords', storage);
 
 const state = {
     authenticated: auth.isAuthenticated(),
     email: '',
-    passwords: [],
-    currentPassword: {}
+    passwords: []
 };
 
 const mutations = {
-    setCurrentPassword(state, password){
-        state.currentPassword = password
+    setPasswords(state, passwords){
+        state.passwords = passwords
     },
     logout(state){
         state.authenticated = false;
-        state.currentPassword = {
-            site: '',
-            login: '',
-            options: {
-                uppercase: true,
-                lowercase: true,
-                numbers: true,
-                symbols: true,
-                length: 12,
-                counter: 1,
-            }
-        };
         state.passwords = [];
     },
     userAuthenticated(state, user){
         state.authenticated = true;
         state.email = user.email;
-    },
-    loadPasswords(state, passwords){
-        state.passwords = passwords
     }
 };
 
@@ -52,21 +34,13 @@ const actions = {
         auth.logout();
         commit('logout');
     },
-    loadPasswords: ({commit}) => {
-        if (auth.isAuthenticated()) {
-            passwords.all().then(response => {
-                commit('loadPasswords', response.data.results);
-            });
-        }
-    },
-    setCurrentPassword: ({commit}, password) => commit('setCurrentPassword', password),
+    setPasswords: ({commit}, password) => commit('setPasswords', password),
 };
 
 const getters = {
     isAuthenticated: state => state.authenticated,
     isGuest: state => !state.authenticated,
     passwords: state => state.passwords,
-    currentPassword: state => state.currentPassword,
     email: state => state.email,
     baseURL: state => state.baseURL
 };