Browse Source

extract menu from password generator

pull/342/head
Guillaume Vincent 8 years ago
parent
commit
3bb1a2667c
4 changed files with 135 additions and 126 deletions
  1. +17
    -1
      src/App.vue
  2. +3
    -3
      src/components/Menu.vue
  3. +112
    -119
      src/components/PasswordGenerator.vue
  4. +3
    -3
      src/main.js

+ 17
- 1
src/App.vue View File

@@ -89,11 +89,27 @@
.link { .link {
cursor: pointer; cursor: pointer;
} }

.card-block {
position: relative;
}
</style> </style>
<template> <template>
<div id="app"> <div id="app">
<div id="lesspass" class="card"> <div id="lesspass" class="card">
<router-view></router-view>
<lesspass-menu></lesspass-menu>
<div class="card-block">
<router-view></router-view>
</div>
</div> </div>
</div> </div>
</template> </template>
<script type="text/ecmascript-6">
import LesspassMenu from './components/Menu';

export default {
components: {
LesspassMenu
}
}
</script>

+ 3
- 3
src/components/Menu.vue View File

@@ -5,16 +5,16 @@
color: #FFF; color: #FFF;
} }


#title {
#menu-title {
cursor: pointer; cursor: pointer;
} }
</style> </style>
<template> <template>
<div>
<div id="menu">
<div class="card-header" v-show="isAuthenticated"> <div class="card-header" v-show="isAuthenticated">
<div class="row"> <div class="row">
<div class="col-xs-6"> <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>
<div class="col-xs-6 text-xs-right"> <div class="col-xs-6 text-xs-right">
<div class="btn-group"> <div class="btn-group">


+ 112
- 119
src/components/PasswordGenerator.vue View File

@@ -1,78 +1,75 @@
<template> <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> </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>
<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>
<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" <button id="copyPasswordButton" class="btn-copy btn btn-primary"
:disabled="!generatedPassword" :disabled="!generatedPassword"
v-on:click="generatePassword()" v-on:click="generatePassword()"
@@ -81,60 +78,57 @@
<i class="fa fa-clipboard white"></i> Copy <i class="fa fa-clipboard white"></i> Copy
</button> </button>
</span> </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>
<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>
</div>
</form>
</template> </template>


<script type="text/ecmascript-6"> <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 lesspass from 'lesspass';
import Clipboard from 'clipboard'; import Clipboard from 'clipboard';
import LesspassMenu from './Menu';
import debounce from 'lodash.debounce'; import debounce from 'lodash.debounce';
import {showTooltip} from '../api/tooltip'; import {showTooltip} from '../api/tooltip';


@@ -160,7 +154,6 @@
} }
}, },
components: { components: {
LesspassMenu,
RemoveAutoComplete, RemoveAutoComplete,
Fingerprint Fingerprint
}, },


+ 3
- 3
src/main.js View File

@@ -1,9 +1,9 @@
import 'babel-polyfill'; import 'babel-polyfill';
import Vue from 'vue'
import Vue from 'vue';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.css'; import 'font-awesome/css/font-awesome.css';
import 'hint.css/hint.css'; import 'hint.css/hint.css';
import LessPass from './App.vue'
import App from './App';
import 'bootstrap/dist/js/bootstrap.min'; import 'bootstrap/dist/js/bootstrap.min';
import Store from './store' import Store from './store'
import Storage from './api/storage'; import Storage from './api/storage';
@@ -16,5 +16,5 @@ new Vue({
el: '#app', el: '#app',
store, store,
router, router,
render: h => h(LessPass)
render: h => h(App)
}); });

Loading…
Cancel
Save