From 3bb1a2667cf2cb329a9e5ef9a0f1fba2d0083e92 Mon Sep 17 00:00:00 2001
From: Guillaume Vincent <guillaume@oslab.fr>
Date: Mon, 10 Oct 2016 09:56:09 +0200
Subject: [PATCH] extract menu from password generator

---
 src/App.vue                          |  18 ++-
 src/components/Menu.vue              |   6 +-
 src/components/PasswordGenerator.vue | 231 +++++++++++++++++------------------
 src/main.js                          |   6 +-
 4 files changed, 135 insertions(+), 126 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index aeb00fa..3010870 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -89,11 +89,27 @@
     .link {
         cursor: pointer;
     }
+
+    .card-block {
+        position: relative;
+    }
 </style>
 <template>
     <div id="app">
         <div id="lesspass" class="card">
-            <router-view></router-view>
+            <lesspass-menu></lesspass-menu>
+            <div class="card-block">
+                <router-view></router-view>
+            </div>
         </div>
     </div>
 </template>
+<script type="text/ecmascript-6">
+    import LesspassMenu from './components/Menu';
+
+    export default {
+        components: {
+            LesspassMenu
+        }
+    }
+</script>
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index a2378d7..438e69a 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -5,16 +5,16 @@
         color: #FFF;
     }
 
-    #title {
+    #menu-title {
         cursor: pointer;
     }
 </style>
 <template>
-    <div>
+    <div id="menu">
         <div class="card-header" v-show="isAuthenticated">
             <div class="row">
                 <div class="col-xs-6">
-                    <span id="title" v-on:click="go('index')">LessPass</span>
+                    <span id="menu-title" v-on:click="go('index')">LessPass</span>
                 </div>
                 <div class="col-xs-6 text-xs-right">
                     <div class="btn-group">
diff --git a/src/components/PasswordGenerator.vue b/src/components/PasswordGenerator.vue
index 51129c0..242719b 100644
--- a/src/components/PasswordGenerator.vue
+++ b/src/components/PasswordGenerator.vue
@@ -1,78 +1,75 @@
 <template>
-    <div>
-        <lesspass-menu></lesspass-menu>
-        <div class="card-block">
-            <form>
-                <div class="form-group row">
-                    <div class="col-xs-12">
-                        <div class="inner-addon left-addon">
-                            <i class="fa fa-globe"></i>
-                            <input id="site"
-                                   name="site"
-                                   type="text"
-                                   class="form-control"
-                                   placeholder="Site"
-                                   list="savedSites"
-                                   autocorrect="off"
-                                   autocapitalize="none"
-                                   v-model="password.site">
-                            <datalist id="savedSites">
-                                <option v-bind:value="pwd.id" v-for="pwd in passwords">
-                                    {{pwd.site}} ({{pwd.login}})
-                                </option>
-                            </datalist>
-                        </div>
-                    </div>
+    <form>
+        <div class="form-group row">
+            <div class="col-xs-12">
+                <div class="inner-addon left-addon">
+                    <i class="fa fa-globe"></i>
+                    <input id="site"
+                           name="site"
+                           type="text"
+                           class="form-control"
+                           placeholder="Site"
+                           list="savedSites"
+                           autocorrect="off"
+                           autocapitalize="none"
+                           v-model="password.site">
+                    <datalist id="savedSites">
+                        <option v-bind:value="pwd.id" v-for="pwd in passwords">
+                            {{pwd.site}} ({{pwd.login}})
+                        </option>
+                    </datalist>
                 </div>
-                <remove-auto-complete></remove-auto-complete>
-                <div class="form-group row">
-                    <div class="col-xs-12">
-                        <div class="inner-addon left-addon">
-                            <i class="fa fa-user"></i>
-                            <label for="login" class="sr-only">Login</label>
-                            <input id="login"
-                                   name="login"
-                                   type="text"
-                                   class="form-control"
-                                   placeholder="Login"
-                                   autocomplete="off"
-                                   autocorrect="off"
-                                   autocapitalize="none"
-                                   v-model="password.login">
-                        </div>
-                    </div>
+            </div>
+        </div>
+        <remove-auto-complete></remove-auto-complete>
+        <div class="form-group row">
+            <div class="col-xs-12">
+                <div class="inner-addon left-addon">
+                    <i class="fa fa-user"></i>
+                    <label for="login" class="sr-only">Login</label>
+                    <input id="login"
+                           name="login"
+                           type="text"
+                           class="form-control"
+                           placeholder="Login"
+                           autocomplete="off"
+                           autocorrect="off"
+                           autocapitalize="none"
+                           v-model="password.login">
                 </div>
-                <div class="form-group row">
-                    <div class="col-xs-12">
-                        <div class="inner-addon left-addon input-group">
-                            <label for="masterPassword" class="sr-only">Password</label>
-                            <i class="fa fa-lock"></i>
-                            <input id="masterPassword"
-                                   name="masterPassword"
-                                   ref="masterPassword"
-                                   type="password"
-                                   class="form-control"
-                                   placeholder="Master password"
-                                   autocorrect="off"
-                                   autocapitalize="none"
-                                   v-model="masterPassword">
-                            <fingerprint :fingerprint="masterPassword"
-                                         v-on:click.native="showMasterPassword"></fingerprint>
-                        </div>
-                    </div>
+            </div>
+        </div>
+        <div class="form-group row">
+            <div class="col-xs-12">
+                <div class="inner-addon left-addon input-group">
+                    <label for="masterPassword" class="sr-only">Password</label>
+                    <i class="fa fa-lock"></i>
+                    <input id="masterPassword"
+                           name="masterPassword"
+                           ref="masterPassword"
+                           type="password"
+                           class="form-control"
+                           placeholder="Master password"
+                           autocorrect="off"
+                           autocapitalize="none"
+                           v-model="masterPassword">
+                    <fingerprint :fingerprint="masterPassword"
+                                 v-on:click.native="showMasterPassword"></fingerprint>
                 </div>
-                <div class="form-group row">
-                    <div class="col-xs-12">
-                        <div class="input-group">
-                            <label for="generatedPassword" class="sr-only">Password Generated</label>
-                            <input id="generatedPassword"
-                                   name="generatedPassword"
-                                   type="text"
-                                   class="form-control"
-                                   tabindex="-1"
-                                   readonly
-                                   v-model="generatedPassword">
-                            <span class="input-group-btn">
+            </div>
+        </div>
+        <div class="form-group row">
+            <div class="col-xs-12">
+                <div class="input-group">
+                    <label for="generatedPassword" class="sr-only">Password Generated</label>
+                    <input id="generatedPassword"
+                           name="generatedPassword"
+                           type="text"
+                           class="form-control"
+                           tabindex="-1"
+                           readonly
+                           v-model="generatedPassword">
+                    <span class="input-group-btn">
                           <button id="copyPasswordButton" class="btn-copy btn btn-primary"
                                   :disabled="!generatedPassword"
                                   v-on:click="generatePassword()"
@@ -81,60 +78,57 @@
                             <i class="fa fa-clipboard white"></i> Copy
                           </button>
                         </span>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <div class="col-xs-12">
-                        Password options
-                        <hr style="margin:0;">
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <div class="col-xs-12">
-                        <label class="form-check-inline">
-                            <input class="form-check-input" type="checkbox" id="lowercase"
-                                   v-model="password.options.lowercase"> abc
-                        </label>
-                        <label class="form-check-inline">
-                            <input class="form-check-input" type="checkbox" id="uppercase"
-                                   v-model="password.options.uppercase"> ABC
-                        </label>
-                        <label class="form-check-inline">
-                            <input class="form-check-input" type="checkbox" id="numbers"
-                                   v-model="password.options.numbers">
-                            123
-                        </label>
-                        <label class="form-check-inline">
-                            <input class="form-check-input" type="checkbox" id="symbols"
-                                   v-model="password.options.symbols">
-                            %!@
-                        </label>
-                    </div>
                 </div>
-                <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">
-                    </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">
-                    </div>
-                </div>
-            </form>
+            </div>
+        </div>
+        <div class="form-group row">
+            <div class="col-xs-12">
+                Password options
+                <hr style="margin:0;">
+            </div>
+        </div>
+        <div class="form-group row">
+            <div class="col-xs-12">
+                <label class="form-check-inline">
+                    <input class="form-check-input" type="checkbox" id="lowercase"
+                           v-model="password.options.lowercase"> abc
+                </label>
+                <label class="form-check-inline">
+                    <input class="form-check-input" type="checkbox" id="uppercase"
+                           v-model="password.options.uppercase"> ABC
+                </label>
+                <label class="form-check-inline">
+                    <input class="form-check-input" type="checkbox" id="numbers"
+                           v-model="password.options.numbers">
+                    123
+                </label>
+                <label class="form-check-inline">
+                    <input class="form-check-input" type="checkbox" id="symbols"
+                           v-model="password.options.symbols">
+                    %!@
+                </label>
+            </div>
+        </div>
+        <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">
+            </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">
+            </div>
         </div>
-    </div>
+    </form>
 </template>
 
 <script type="text/ecmascript-6">
-    import {mapGetters} from 'vuex'
-    import RemoveAutoComplete from './RemoveAutoComplete'
-    import Fingerprint from './Fingerprint'
+    import {mapGetters} from 'vuex';
+    import RemoveAutoComplete from './RemoveAutoComplete';
+    import Fingerprint from './Fingerprint';
     import lesspass from 'lesspass';
     import Clipboard from 'clipboard';
-    import LesspassMenu from './Menu';
     import debounce from 'lodash.debounce';
     import {showTooltip} from '../api/tooltip';
 
@@ -160,7 +154,6 @@
             }
         },
         components: {
-            LesspassMenu,
             RemoveAutoComplete,
             Fingerprint
         },
diff --git a/src/main.js b/src/main.js
index 0fed95a..b700e5a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,9 @@
 import 'babel-polyfill';
-import Vue from 'vue'
+import Vue from 'vue';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'font-awesome/css/font-awesome.css';
 import 'hint.css/hint.css';
-import LessPass from './App.vue'
+import App from './App';
 import 'bootstrap/dist/js/bootstrap.min';
 import Store from './store'
 import Storage from './api/storage';
@@ -16,5 +16,5 @@ new Vue({
     el: '#app',
     store,
     router,
-    render: h => h(LessPass)
+    render: h => h(App)
 });