heuzef
/
lesspass
spegling av https://github.com/lesspass/lesspass.git
1
0
Förgrening 0
Kod Ärenden 0 Släpp 67 Wiki Aktiviteter
Bläddra i källkod

update password generator component

pull/44/head
Guillaume Vincent 8 år sedan
förälder
4074b22da7
incheckning
ccdced8789
20 ändrade filer med 352 tillägg och 385 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -3
      Dockerfile
  2. +21
    -40
      app/app.vue
  3. Binär
      app/assets/images/logo_text.png
  4. Binär
      app/assets/images/logotext.png
  5. +0
    -21
      app/components/auth/auth.vue
  6. +0
    -48
      app/components/auth/login.vue
  7. +0
    -44
      app/components/auth/register.vue
  8. +0
    -15
      app/components/bootstrap-hr.vue
  9. +3
    -1
      app/components/dashboard.vue
  10. +123
    -0
      app/components/header.vue
  11. +28
    -7
      app/components/headlines.vue
  12. +1
    -8
      app/components/index.vue
  13. +0
    -34
      app/components/jumbotron.vue
  14. +0
    -69
      app/components/login.vue
  15. +102
    -59
      app/components/password-generator.vue
  16. +20
    -4
      app/locales/locales.js
  17. +5
    -19
      app/main.js
  18. +13
    -13
      app/services/auth.js
  19. +34
    -0
      app/services/logging.js
  20. +2
    -0
      package.json

+ 0
- 3
Dockerfile Visa fil

@@ -1,3 +0,0 @@
FROM node:4-onbuild

EXPOSE 8080

+ 21
- 40
app/app.vue Visa fil

@@ -1,66 +1,47 @@
<style>
@import '../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../node_modules/toastr/build/toastr.min.css';

#toast-container > div {
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: alpha(opacity=100);
}

body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #CFD2DA;
background-color: #262B30;
overflow-y: scroll;
color: #cfd2da;
background-color: #252830;
}

.blue {
color: #0275D8;
}

#header {
padding: 0;
}

#header #logo {
width: 30px;
height: 30px;
}

</style>

<template>
<div>
<div id="header" class="container m-t-1">
<nav class="navbar navbar-dark ">
<a class="navbar-brand" href="#/">
<img id="logo" alt="lesspass" class="img-fluid" src="./assets/images/logo.png">
</a>
<a class="navbar-brand" href="#/"> LessPass
</a>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="btn btn-primary" v-link="'entries'" v-if="!user.authenticated">
{{ $t('header.login') }}
</a>
<a class="btn btn-primary-outline" v-link="'login'" v-if="user.authenticated" @click="logout()">
logout
</a>
</li>
</ul>
</nav>
</div>
<lesspass-header></lesspass-header>
<router-view></router-view>
</div>
</template>
<script>
import auth from './services/auth'
var $ = require('jquery');
window.jQuery = $;
window.Tether = require('tether');
window.$ = $;
var bootstrap = require('bootstrap/dist/js/umd/collapse.js');

import LesspassHeader from './components/header.vue';

export default {
data: function () {
return {
user: auth.user
}
return {}
},
methods: {
logout() {
auth.logout()
}
components: {
LesspassHeader
}
}
</script>

Binär
app/assets/images/logo_text.png Visa fil

Före Efter
Bredd: 160  |  Höjd: 38  |  Storlek: 4.4 KiB

Binär
app/assets/images/logotext.png Visa fil

Före Efter
Bredd: 211  |  Höjd: 50  |  Storlek: 5.8 KiB

+ 0
- 21
app/components/auth/auth.vue Visa fil

@@ -1,21 +0,0 @@
<template>
<div class="container">
<div class="row m-y-2">
<div class="col-lg-4 col-lg-offset-4">
<router-view></router-view>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<p v-if="$route.path=='/auth/login'">
{{$t('login.dont_have_an_account')}}
<a v-link="{ path: '/auth/register' }">{{$t('login.register')}}</a>
</p>
<p v-if="$route.path=='/auth/register'">
{{$t('login.already_have_an_account')}}
<a v-link="{ path: '/auth/login' }">{{$t('login.login')}}</a>
</p>
</div>
</div>
</div>
</template>

+ 0
- 48
app/components/auth/login.vue Visa fil

@@ -1,48 +0,0 @@
<!--<style>
#login .form-control {
background-color: #31353A;
color: #8F9394;
border: 1px solid #31353A;
}
</style>-->
<template>
<div id="login" class="p-y-2">
<h2>{{$t('login.login')}}</h2>
<p>{{$t('login.why')}}</p>
<div class="alert alert-danger" v-if="error">
<p>{{{$t('login.credentials_invalids')}}}</p>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="{{$t('login.enter_email')}}"
v-model="credentials.username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="{{$t('login.enter_password')}}"
v-model="credentials.password">
</div>
<button class="btn btn-primary" @click="submit()">{{$t('login.lets_go')}}</button>
</div>
</template>
<script>
import auth from '../../services/auth'
export default {
data: function () {
return {
credentials: {
username: '',
password: ''
},
error: ''
}
},
methods: {
submit() {
var credentials = {
username: this.credentials.username,
password: this.credentials.password
};
auth.login(this, credentials, '/entries')
}
}
}
</script>

+ 0
- 44
app/components/auth/register.vue Visa fil

@@ -1,44 +0,0 @@
<!--<style>
#register .form-control {
background-color: #31353A;
color: #8F9394;
border: 1px solid #31353A;
}
</style>-->
<template>
<div id="register" class="p-y-2">
<h2>{{$t('login.register')}}</h2>
<div class="form-group m-t-2">
<input type="text" class="form-control" placeholder="{{$t('login.enter_email')}}"
v-model="credentials.username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="{{$t('login.enter_password')}}"
v-model="credentials.password">
</div>
<button class="btn btn-primary" @click="submit()">{{$t('login.create_account')}}</button>
</div>
</template>
<script>
import auth from '../../services/auth'
export default {
data: function () {
return {
credentials: {
username: '',
password: ''
},
error: ''
}
},
methods: {
submit() {
var credentials = {
username: this.credentials.username,
password: this.credentials.password
};

}
}
}
</script>

+ 0
- 15
app/components/bootstrap-hr.vue Visa fil

@@ -1,15 +0,0 @@
<style>
.bootstrap-hr {
margin-top: 1em;
margin-bottom: 3em;
border: 0 none -moz-use-text-color;
border-top: 1px solid #434857;
}
</style>
<template>
<div class="container">
<div class="col-xs-6 col-xs-offset-3">
<hr class="bootstrap-hr">
</div>
</div>
</template>

app/components/entries.vue → app/components/dashboard.vue Visa fil

@@ -1,5 +1,7 @@
<template>
entries
<div class="container">
entries
</div>
</template>

<script>

+ 123
- 0
app/components/header.vue Visa fil

@@ -0,0 +1,123 @@
<style>
.header {
background-color: #D8E4EA;
height: 86px;
}

.header {
color: #252830;
}

.navbar {
padding: 1.5rem 0;
}
</style>
<template>
<div class="collapse" id="SignInCollapseNavbar">
<div class="bg-inverse p-a-1">
<div class="container">
<div class="col-lg-12">
<div class="alert alert-danger" v-if="error">
<p>{{{$t('header.credentials_invalids')}}}</p>
</div>
<form class="form-inline pull-md-right">
<div class="form-group form">
<label class="sr-only" for="email">{{$t('header.Email')}}</label>
<input type="email" class="form-control form-control-sm" id="email"
placeholder="{{$t('header.Email')}}"
v-model="credentials.email">
</div>
<div class="form-group">
<label class="sr-only" for="password">{{$t('header.Password')}}</label>
<input type="password" class="form-control form-control-sm" id="password"
placeholder="{{$t('header.Password')}}"
v-model="credentials.password">
</div>
<div class="form-group row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary btn-sm btn-block" @click="signin()">
{{$t('header.Sign_in')}}
</button>
</div>
</div>
<div class="form-group row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary-outline btn-sm btn-block"
@click="register()">
{{$t('header.Register')}}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="header">
<nav class="navbar">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="" href="#">
<img src="../assets/images/logo_text.png" alt="logo">
</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item" v-if="!user.authenticated">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#SignInCollapseNavbar">
&#9776;
</button>
</li>
<li class="nav-item" v-if="user.authenticated">
<a class="btn btn-primary" @click="logout()">
logout
</a>
</li>
</ul>
</div>
</nav>
</div>
</template>
<script>
import auth from '../services/auth'
import {router} from '../main'

export default {
data: function () {
return {
user: auth.user,
credentials: {
email: '',
password: ''
},
error: ''
}
},
methods: {
signin() {
var credentials = {
email: this.credentials.email,
password: this.credentials.password
};
auth.login(this, credentials, function(){
$('#SignInCollapseNavbar').collapse('hide');
router.go('/');
});
},
register() {
var credentials = {
email: this.credentials.email,
password: this.credentials.password
};
auth.register(this, credentials)
},
logout() {
auth.logout(function(){
router.go('/presentation/');
})
}
}
}
</script>

+ 28
- 7
app/components/headlines.vue Visa fil

@@ -1,12 +1,33 @@
<style>
#headlines {
padding-top: 2em;
padding-bottom: 1em;
.headlines {
color: #252830;
background-color: #D8E4EA;
padding: 5em 0 7em;
}

.headlines .title {
font-size: 1.5rem;
}

.headlines .subtitle {
font-size: 1.3rem;
}

@media (min-width: 550px) {
.headlines .title {
font-size: 2.5rem;
}
}
</style>
<template>
<div id="headlines" class="container text-xs-center">
<h1 class="blue">{{ $t('headlines.title') }}</h1>
<h2 class="hidden-xs-down">{{ $t('headlines.subtitle') }}</h2>
</div>
<section class="headlines text-xs-center">
<div class="container">
<div class="col-lg-10 col-lg-offset-1">
<h2 class="title text-primary">{{{ $t('header.title') }}}</h2>
<h4 class="subtitle hidden-xs-down">
<span class="text-primary"> LessPass</span> {{ $t('header.subtitle') }}
</h4>
</div>
</div>
</section>
</template>

+ 1
- 8
app/components/index.vue Visa fil

@@ -1,8 +1,5 @@
<template>
<lesspass-headlines></lesspass-headlines>
<bootstrap-hr class="hidden-xs-down"></bootstrap-hr>
<lesspass-jumbotron></lesspass-jumbotron>
<bootstrap-hr id="passwordGeneratorHr"></bootstrap-hr>
<password-generator></password-generator>
<lesspass-features></lesspass-features>
<lesspass-faq></lesspass-faq>
@@ -12,11 +9,9 @@

<script>
import LesspassHeadlines from './headlines.vue';
import LesspassJumbotron from './jumbotron.vue';
import PasswordGenerator from './password-generator.vue';
import LesspassFeatures from './features.vue';
import LesspassFaq from './faq.vue';
import BootstrapHr from './bootstrap-hr.vue';
import LesspassFooter from './footer.vue';

export default {
@@ -25,12 +20,10 @@
},
components: {
LesspassHeadlines,
LesspassJumbotron,
PasswordGenerator,
LesspassFeatures,
LesspassFaq,
LesspassFooter,
BootstrapHr
LesspassFooter
}
}
</script>

+ 0
- 34
app/components/jumbotron.vue Visa fil

@@ -1,34 +0,0 @@
<style>
.jumbotron {
color: black;
}
</style>
<template>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-lg-8">
<div v-if="$t('lang') == 'en'">
<img src="../assets/images/story-en.png" class="img-fluid" alt="what is lesspass"/>
</div>
<div v-if="$t('lang') == 'fr'">
<img src="../assets/images/story-fr.png" class="img-fluid" alt="qu'est ce que lesspass"/>
</div>
<small>&copy; Nanou</small>
</div>
<div class="col-lg-4 m-t-1">
<p class="lead">
<a href='https://lesspass.com/'>LessPass</a> {{ $t('jumbotron.what_is_lesspass') }}
</p>
<p class="lead">
<a href='https://lesspass.com/'>LessPass</a> {{ $t('jumbotron.what_is_lesspass2') }}
</p>

<p class="text-xs-center">
<a href="#passwordGeneratorHr" class="hidden-xs-down btn btn-primary">{{ $t('jumbotron.use_btn') }}</a>
</p>
</div>
</div>
</div>
</div>
</template>

+ 0
- 69
app/components/login.vue Visa fil

@@ -1,69 +0,0 @@
<style>

.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}

.form-signin .checkbox {
font-weight: normal;
}

.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}

.form-signin .form-control:focus {
z-index: 2;
}

.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>

<template>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-1 m-t-3">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus=""
type="email">
<label for="inputPassword" class="sr-only">Password</label>
<input id="inputPassword" class="form-control" placeholder="Password" required="" type="password">

<button class="btn btn-primary btn-block" type="submit">Log in</button>
</form>
</div>

<div class="col-md-4 col-md-offset-2 m-t-3">
<form class="form-signin">
<h2 class="form-signin-heading">Sign up for free</h2>
<label for="signUpEmail" class="sr-only">Email address</label>
<input id="signUpEmail" class="form-control" placeholder="Email address" required="" autofocus=""
type="email">
<label for="signUpPassword" class="sr-only">Password</label>
<input id="signUpPassword" class="form-control" placeholder="Password" required="" type="password">

<button class="btn btn-primary btn-block" type="submit">Get started</button>
</form>
</div>
</div>
</div>
</template>

+ 102
- 59
app/components/password-generator.vue Visa fil

@@ -1,34 +1,44 @@
<!--<style>
#passwordGenerator .form-control {
background-color: #31353A;
color: #8F9394;
border: 1px solid #31353A;
}
</style>-->
<template>
<div class="container m-y-3">
<form id="passwordGenerator">
<div class="container m-t-3">
<form>
<div class="form-group row">
<label for="email" class="sr-only form-control-label">{{ $t('passwordgenerator.email') }}</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="email"
placeholder="{{ $t('passwordgenerator.email') }}" v-model="email"
<div class="col-lg-3 m-b-1">
<label for="pg-email" class="sr-only">
{{ $t('passwordgenerator.email') }}
</label>
<input id="pg-email"
class="form-control"
type="text"
placeholder="{{ $t('passwordgenerator.email') }}"
value="{{email}}"
v-model="email"
v-on:blur="updateMasterPassword">
</div>
<label for="password" class="sr-only form-control-label">{{ $t('passwordgenerator.password') }}</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="password"
<div class="col-lg-3 m-b-1">
<label for="pg-masterpassword" class="sr-only">
{{ $t('passwordgenerator.password') }}
</label>
<input id="pg-masterpassword"
class="form-control"
type="password"
placeholder="{{ $t('passwordgenerator.password') }}"
v-model="password" v-on:blur="updateMasterPassword">
v-model="password"
v-on:blur="updateMasterPassword">
</div>
<label for="site" class="sr-only form-control-label">{{ $t('passwordgenerator.site') }}</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="site"
<div class="col-lg-3 m-b-1">
<label for="pg-site" class="sr-only">
{{ $t('passwordgenerator.site') }}
</label>
<input id="pg-site"
class="form-control"
type="text"
placeholder="{{ $t('passwordgenerator.site_placeholder') }}"
v-model="site">
</div>
<label for="generatedPassword" class="sr-only form-control-label">Generated Password</label>
<div class="col-sm-3">
<div class="col-lg-3 m-b-1">
<label for="generatedPassword" class="sr-only">
{{ $t('passwordgenerator.generated_password') }}
</label>
<div class="input-group">
<input type="text" id="generatedPassword" class="form-control" v-model="generatedPassword">
<span class="input-group-btn">
@@ -42,45 +52,78 @@
</div>
<div class="form-group row">
<div class="col-lg-12">
<div class="checkbox">
<label>
<input type="checkbox" v-model="showAdvancedOptions"> {{
$t('passwordgenerator.advanced_options') }}
</label>
<a data-toggle="collapse" data-parent="#accordion" href="#advancedOptions"
aria-expanded="true" aria-controls="advancedOptions">
{{ $t('passwordgenerator.advanced_options') }}
</a>

<div id="advancedOptions" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="advancedOptions">
<div class="row">
<div class="col-lg-3">
<label class="c-input c-checkbox">
<input type="checkbox" id="lowercase" value="lowercase"
v-model="passwordInfo.settings" checked>
<span class="c-indicator"></span>
{{ $t('passwordgenerator.lowercase_options') }}
</label>
</div>
<div class="col-lg-3">
<label class="c-input c-checkbox">
<input type="checkbox" id="uppercase" value="uppercase"
v-model="passwordInfo.settings" checked>
<span class="c-indicator"></span>
{{ $t('passwordgenerator.uppercase_options') }}
</label>
</div>
<div class="col-lg-3">
<label class="c-input c-checkbox">
<input type="checkbox" id="numbers" value="numbers" v-model="passwordInfo.settings"
checked>
<span class="c-indicator"></span>
{{ $t('passwordgenerator.numbers_options') }}
</label>
</div>
<div class="col-lg-3">
<label class="c-input c-checkbox">
<input type="checkbox" id="symbols" value="symbols" v-model="passwordInfo.settings"
checked>
<span class="c-indicator"></span>
{{ $t('passwordgenerator.symbols_options') }}
</label>
</div>
</div>
<div class="row m-t-1">
<div class="col-lg-2 col-md-3 m-b-1">
<label for="passwordLength" class="sr-only">
{{ $t('passwordgenerator.length') }}
</label>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="passwordLengthAddon">
{{ $t('passwordgenerator.length') }}
</span>
<input type="number" class="form-control" id="passwordLength"
aria-describedby="passwordLengthAddon" v-model="passwordInfo.length"
value="12" min="6" max="64">
</div>
</div>
<div class="col-lg-2 col-md-3 m-b-1">
<label for="passwordCounter" class="sr-only">
{{ $t('passwordgenerator.counter') }}
</label>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="passwordCounterAddon">
{{ $t('passwordgenerator.counter') }}
</span>
<input type="number" class="form-control" id="passwordCounter"
aria-describedby="passwordCounterAddon" v-model="passwordInfo.counter"
value="1" min="1" max="100">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row" v-if="showAdvancedOptions">
<div class="col-lg-12">
<label class="checkbox-inline">
<input type="checkbox" id="lowercase" value="lowercase" v-model="passwordInfo.settings" checked>
{{ $t('passwordgenerator.lowercase_options') }}
</label>
<label class="checkbox-inline">
<input type="checkbox" id="uppercase" value="uppercase" v-model="passwordInfo.settings" checked>
{{ $t('passwordgenerator.uppercase_options') }}
</label>
<label class="checkbox-inline">
<input type="checkbox" id="numbers" value="numbers" v-model="passwordInfo.settings" checked>
{{ $t('passwordgenerator.numbers_options') }}
</label>
<label class="checkbox-inline">
<input type="checkbox" id="symbols" value="symbols" v-model="passwordInfo.settings" checked>
{{ $t('passwordgenerator.symbols_options') }}
</label>
</div>
</div>
<div class="form-group row" v-if="showAdvancedOptions">
<label for="passwordLength" class="col-xs-2 col-sm-1 form-control-label">{{
$t('passwordgenerator.length') }}</label>
<div class="col-xs-8 col-sm-4">
<input id="passwordLength" type="range" value="12" min="6" max="64" v-model="passwordInfo.length"
class="form-control">
</div>
<div class="col-xs-2 col-sm-1">
{{ passwordInfo.length }}
</div>
</div>
</form>
</div>
</template>
@@ -101,7 +144,7 @@
length: 12,
settings: ["lowercase", "uppercase", "numbers", "symbols"]
},
showAdvancedOptions: false
masterPassword: ''
}
},
methods: {


+ 20
- 4
app/locales/locales.js Visa fil

@@ -2,7 +2,12 @@ const locales = {
"en": {
"lang": "en",
"header": {
"login": "login"
"Email":"Email",
"Password":"Password",
"Sign_in": "Sign_in",
"Register": "Register",
"title": "Next generation<br>password manager",
"subtitle": "replaces all your tools that record your passwords as LastPass, 1Password, Keepass, Excel spreadsheet, post it, etc ..."
},
"headlines": {
"title": "Next generation password manager",
@@ -37,6 +42,8 @@ const locales = {
"uppercase_options": "UPPERCASE (A-Z)",
"numbers_options": "numbers (0-9)",
"symbols_options": "symbols (@&%?)",
"counter": "Counter",
"generated_password": "Generated password",
"length": "Length"
},
"faq": {
@@ -75,13 +82,19 @@ const locales = {
"dont_have_an_account": "Don't have an account ?",
"already_have_an_account": "Already have an account ?",
"create_account": "Create an account",
"credentials_invalids": "The email address or password you entered is not valid. If you don't have an account yet, you can <a href='#/auth/register'>register</a>."
"welcome": "Login successful, welcome on LessPass",
"credentials_invalids": "The email address or password you entered is not valid."
}
},
"fr": {
"lang": "fr",
"header": {
"login": "connexion"
"Email":"Email",
"Password":"Mot de passe",
"Sign_in": "Connexion",
"Register": "S'enregistrer",
"title": "Gestionnaire de mot de passe nouvelle génération",
"subtitle": "remplace tous vos outils qui sauvegardent vos mots de passe comme Lastpass, 1password, Keepass, tableur Excel, post it, etc..."
},
"headlines": {
"title": "Gestionnaire de mot de passe nouvelle génération",
@@ -116,6 +129,8 @@ const locales = {
"uppercase_options": "MAJUSCULES (A-Z)",
"numbers_options": "nombres (0-9)",
"symbols_options": "caractères spéciaux (@&%?)",
"counter": "Compteur",
"generated_password": "Mot de passe généré",
"length": "Longueur"
},
"faq": {
@@ -153,7 +168,8 @@ const locales = {
"dont_have_an_account": "Vous n'avez pas encore de compte ?",
"already_have_an_account": "Vous avez déjà un compte ?",
"create_account": "Créez un compte",
"credentials_invalids": "L' adresse e-mail et mot de passe ne sont pas valides. Si vous ne possédez pas encore de compte, vous pouvez vous <a href='#/auth/register'>inscrire</a>."
"welcome": "Connexion réussie, bienvenue sur LessPass",
"credentials_invalids": "L' adresse e-mail et/ou mot de passe sont invalides"
}
}
};


+ 5
- 19
app/main.js Visa fil

@@ -6,10 +6,7 @@ import i18n from 'vue-i18n';
import locales from './locales/locales';
import App from './app.vue';
import IndexView from './components/index.vue';
import AuthView from './components/auth/auth.vue';
import LoginView from './components/auth/login.vue';
import RegisterView from './components/auth/register.vue';
import EntriesView from './components/entries.vue';
import Dashboard from './components/dashboard.vue';
import auth from './services/auth';
Vue.use(Resource);
Vue.use(Router);
@@ -31,22 +28,11 @@ export var router = new Router();

router.map({
'/': {
component: IndexView
},
'/entries': {
auth: true,
component: EntriesView
component: Dashboard
},
'/auth': {
component: AuthView,
subRoutes: {
'/login': {
component: LoginView
},
'/register': {
component: RegisterView
}
}
'/presentation/': {
component: IndexView
}
});

@@ -62,7 +48,7 @@ router.start(App, '#app');

router.beforeEach(function (transition) {
if (transition.to.auth && !auth.user.authenticated) {
transition.redirect('/auth/login')
transition.redirect('/presentation/')
} else {
transition.next()
}

+ 13
- 13
app/services/auth.js Visa fil

@@ -1,36 +1,34 @@
import {router} from '../main'
import logging from './logging'

export default {
user: {
authenticated: false
},

login(context, credentials, redirect) {
login(context, credentials, callback) {
var self = this;
context.$http.post('/api/sessions/', credentials).then(
function (response) {
localStorage.setItem('token', response.data.token);
self.user.authenticated = true;
if (redirect) {
router.go(redirect)
if (callback) {
logging.success(this.$t('login.welcome'));
callback();
}
},
function (error) {
context.error = true;
function () {
logging.error(this.$t('login.credentials_invalids'));
}
);
},

register(context, user, redirect) {
register(context, user) {
var self = this;
context.$http.post('/api/users/', user).then(
function (response) {
localStorage.setItem('token', response.data.token);

self.user.authenticated = true;
if (redirect) {
router.go(redirect)
}
router.go('/');
},
function (error) {
context.error = true;
@@ -38,10 +36,12 @@ export default {
);
},

logout() {
logout(callback) {
localStorage.removeItem('token');
this.user.authenticated = false;
router.go('/')
if (callback) {
callback();
}
},

checkAuth() {


+ 34
- 0
app/services/logging.js Visa fil

@@ -0,0 +1,34 @@
import toastr from 'toastr'

toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": true,
"progressBar": false,
"positionClass": "toast-top-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};

export default {
error(message){
toastr.error(message);
},
success(message){
toastr.success(message);
},
warning(message){
toastr.warning(message);
},
clear(){
toastr.clear();
}
}

+ 2
- 0
package.json Visa fil

@@ -30,6 +30,8 @@
"clipboard": "^1.5.5",
"font-awesome": "^4.5.0",
"jquery": "^2.2.0",
"tether": "^1.1.1",
"toastr": "^2.1.2",
"vue": "^1.0.15",
"vue-i18n": "^2.3.3",
"vue-resource": "^0.7.0",


Skriv Förhandsgranska
Laddar…
Avbryt
Spara