implement save password

src/App.vue

@@ -31,7 +31,7 @@
     }
 
     i {
-        color: #555
+        color: #555;
     }
 
     .white {

src/components/Menu.vue

@@ -23,6 +23,10 @@
         text-decoration: none;
         color: white;
     }
+
+    .fa-clickable {
+        cursor: pointer;
+    }
 </style>
 <template>
     <div id="menu">
@@ -30,6 +34,8 @@
             <div class="row">
                 <div class="col-xs-6">
                     <router-link class="menu-link" :to="{ name: 'home'}">LessPass</router-link>
+                    <i class="fa fa-save m-l-1 fa-clickable" v-if="isPasswordNew" v-on:click="savePassword"></i>
+                    <i class="fa fa-check m-l-1 text-success" v-if="passwordCreated"></i>
                 </div>
                 <div class="col-xs-6 text-xs-right">
                     <div class="btn-group">
@@ -71,12 +77,17 @@
             logout(){
                 this.$store.dispatch('logout');
                 this.$router.push({name: 'home'});
+            },
+            savePassword(){
+                this.$store.dispatch('savePassword');
             }
         },
         computed: mapGetters([
             'isAuthenticated',
             'isGuest',
-            'email'
+            'email',
+            'isPasswordNew',
+            'passwordCreated'
         ])
     }
 </script>

src/components/PasswordGenerator.vue

@@ -53,8 +53,7 @@
                            autocorrect="off"
                            autocapitalize="none"
                            v-model="masterPassword">
-                    <fingerprint :fingerprint="masterPassword"
-                                 v-on:click.native="showMasterPassword"></fingerprint>
+                    <fingerprint :fingerprint="masterPassword" v-on:click.native="showMasterPassword"></fingerprint>
                 </div>
             </div>
         </div>
@@ -70,14 +69,14 @@
                            readonly
                            v-model="generatedPassword">
                     <span class="input-group-btn">
-                          <button id="copyPasswordButton" class="btn-copy btn btn-primary"
-                                  :disabled="!generatedPassword"
-                                  v-on:click="generatePassword()"
-                                  type="button"
-                                  data-clipboard-target="#generatedPassword">
-                            <i class="fa fa-clipboard white"></i> Copy
-                          </button>
-                        </span>
+                        <button id="copyPasswordButton" class="btn-copy btn btn-primary"
+                                :disabled="!generatedPassword"
+                                v-on:click="generatePassword()"
+                                type="button"
+                                data-clipboard-target="#generatedPassword">
+                        <i class="fa fa-clipboard white"></i> Copy
+                        </button>
+                    </span>
                 </div>
             </div>
         </div>
@@ -112,12 +111,13 @@
         <div class="form-group row">
             <label for="passwordLength" class="col-xs-3 col-form-label">Length</label>
             <div class="col-xs-3 p-l-0">
-                <input class="form-control" type="number" id="passwordLength" v-model="password.options.length">
+                <input class="form-control" type="number" id="passwordLength" v-model="password.options.length"
+                       min="6">
             </div>
             <label for="passwordCounter" class="col-xs-3 col-form-label">Counter</label>
             <div class="col-xs-3 p-l-0">
                 <input class="form-control" type="number" id="passwordCounter"
-                       v-model="password.options.counter">
+                       v-model="password.options.counter" min="1">
             </div>
         </div>
     </form>
@@ -133,6 +133,7 @@
     import {showTooltip} from '../api/tooltip';
     import Storage from '../api/storage';
     import HTTP from '../api/http';
+    import Password from '../domain/password';
 
     const storage = new Storage();
     const Passwords = new HTTP('passwords', storage);
@@ -183,6 +184,16 @@
             'masterPassword': function () {
                 this.encryptedLogin = '';
                 this.encryptLogin();
+            },
+            'generatedPassword': function (newPassword) {
+                const password = new Password(this.password);
+
+                if (password.isNewPassword(this.passwords)) {
+                    this.$store.dispatch('newPassword', password.json());
+                }
+                else {
+                    this.$store.dispatch('existingPassword');
+                }
             }
         },
         computed: Object.assign(mapGetters(['isAuthenticated']), {

src/store.js

@@ -1,16 +1,21 @@
 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: ''
+    email: '',
+    isPasswordNew: false,
+    passwordCreated: false,
+    newPassword: {}
 };
 
 const mutations = {
@@ -20,20 +25,44 @@ const mutations = {
     userAuthenticated(state, user){
         state.authenticated = true;
         state.email = user.email;
+    },
+    newPassword(state, newPassword){
+        state.isPasswordNew = true;
+        state.newPassword = newPassword;
+    },
+    existingPassword(state){
+        state.isPasswordNew = false;
+        state.newPassword = {};
+    },
+    passwordCreated(state){
+        state.passwordCreated = true;
+        setTimeout(()=> {
+            state.passwordCreated = false;
+        }, 5000);
     }
 };
 
 const actions = {
     userAuthenticated: ({commit}, user) => commit('userAuthenticated', user),
+    newPassword: ({commit}, newPassword) => commit('newPassword', newPassword),
+    existingPassword: ({commit}) => commit('existingPassword'),
     logout: ({commit}) => {
         auth.logout();
         commit('logout');
+    },
+    savePassword: ({commit, state}) => {
+        Passwords.create(state.newPassword).then(() => {
+            commit('existingPassword');
+            commit('passwordCreated');
+        })
     }
 };
 
 const getters = {
     isAuthenticated: state => state.authenticated,
     isGuest: state => !state.authenticated,
+    isPasswordNew: state => state.isPasswordNew,
+    passwordCreated: state => state.passwordCreated,
     email: state => state.email,
     baseURL: state => state.baseURL
 };