First version of the extension options page (#479)

* WIP adding a preference page

* Add the login field

* First working version

* Propagate the default login to the popup

* Update build scripts

* Remove the option page entry point

* Remove unecessary storage permission

* Code cleanup

* Remove dependency to defaultPassword.js

* Reset dist folder

* Move the page to lesspass-pure

* Add translations

packages/lesspass-pure/src/components/Menu.vue

@@ -32,6 +32,9 @@
           <router-link class="white-link pl-3" :to="{ name: 'passwords'}" v-if="isAuthenticated">
             <i class="fa  fa-lg fa-key"></i>
           </router-link>
+          <router-link class="white-link pl-3" :to="{ name: 'options'}" v-if="false">
+            <i class="fa fa-lg fa-cog"></i>
+          </router-link>
           <button class="white-link btn btn-link p-0 m-0 pl-3" type="button" v-if="isAuthenticated"
                   v-on:click="logout">
             <i class="fa fa-lg fa-sign-out"></i>

packages/lesspass-pure/src/router.js

@@ -6,12 +6,14 @@ import PasswordGenerator from "./views/PasswordGenerator.vue";
 import PasswordReset from "./views/PasswordReset.vue";
 import PasswordResetConfirm from "./views/PasswordResetConfirm.vue";
 import Passwords from "./views/Passwords.vue";
+import OptionsPage from "./views/OptionsPage.vue";
 
 Vue.use(VueRouter);
 
 const routes = [
   { path: "/", name: "home", component: PasswordGenerator },
   { path: "/login", name: "login", component: Login },
+  { path: "/options", name: "options", component: OptionsPage },
   { path: "/passwords/", name: "passwords", component: Passwords },
   { path: "/password/reset", name: "passwordReset", component: PasswordReset },
   {

packages/lesspass-pure/src/views/OptionsPage.vue

@@ -0,0 +1,39 @@
+<template>
+  <form id="lesspass-options-form" novalidate v-on:submit.prevent="saveOptions">
+        <div class="form-group row full-width">
+          <label for="login" class="col-sm-2 col-form-label">{{$t('Default login')}}</label>
+          <div class="col-sm-10">
+            <input
+              id="login"
+              type="text"
+              name="login"
+              ref="login"
+              class="form-control"
+              autocomplete="off"
+              autocorrect="off"
+              autocapitalize="none"
+              v-model="defaultPassword.login"
+            />
+          </div>
+        </div>
+        <div class="form-group row">
+          <div class="col-sm-10">
+            <button type="submit" class="btn btn-primary">{{$t('Save')}}</button>
+          </div>
+        </div>
+      </form>
+</template>
+
+<script>
+  import { mapState } from "vuex";
+  import { SET_DEFAULT_OPTIONS } from "../store/mutation-types";
+
+  export default {
+    computed: mapState(["defaultPassword"]),
+    methods: {
+      saveOptions() {
+        this.$store.commit(SET_DEFAULT_OPTIONS, this.defaultPassword);
+      }
+    }
+  }
+</script>

packages/lesspass-pure/src/views/PasswordGenerator.vue

@@ -126,7 +126,13 @@ export default {
     Options
   },
   computed: {
-    ...mapState(["passwords", "password"]),
+    ...mapState({
+      password: state => ({
+        ...state.password,
+        login: state.password.login || state.defaultPassword.login
+      }),
+      passwords: state => state.passwords
+    }),
     ...mapGetters(["passwordURL", "isDefaultProfile"])
   },
   beforeMount() {