Login e Token OK

This commit is contained in:
paolo
2018-10-26 22:25:35 +02:00
parent 28eb3ff6a8
commit 338a8a4107
11 changed files with 196 additions and 82 deletions

View File

@@ -82,6 +82,8 @@ module.exports = function (ctx) {
'QCollapsible',
'QCheckbox',
'QAlert',
'QInnerLoading',
'QSpinnerGears',
],
directives: [
@@ -89,8 +91,14 @@ module.exports = function (ctx) {
],
// Quasar plugins
plugins: [
'Notify', 'ActionSheet'
'Notify', 'ActionSheet', 'Loading'
],
config: {
// optional (v0.17+)
loading: {
// Loading defaults
}
},
//iconSet: ctx.theme.mat ? 'material-icons' : 'ionicons',
iconSet: 'fontawesome',
//iconSet: 'roboto-font',

View File

@@ -25,10 +25,12 @@
<q-select class="sel_lang" v-model="lang" stack-label="" :options="selectOpLang"/>
<div class="right-itens">
<!--<message-popover></message-popover>-->
<!--
<div class="right-itens">
<label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
</div>
</div>-->
</q-toolbar>
@@ -57,7 +59,9 @@
import user from '../store/modules/user';
import {mapGetters} from 'vuex'
import * as types from '../store/mutation-types'
import {mapGetters, mapActions} from 'vuex'
export default {
components: {

View File

@@ -1,18 +1,19 @@
<template>
<div>
<div id="profile">
<div id="profile" v-if="getUsername">
<img :src="photo" style='height: 80px' class="inline-block">
<img src="../img/avatar-1.svg" id="avatar" class="inline-block">
<div id="user-name">
<span class="text-white"> Username: {{ getUsername }} </span>
<hr>
<span class="text-white"> {{ email }} </span>
<span class="text-white"> {{ getUsername }} </span>
<hr>
<span class="text-white" v-if="getVerificato"> {{$t('reg.verificato')}} </span>
<span class="text-white" v-else> {{$t('reg.non_verificato')}} </span>
<span class="text-white"> {{ getEmail }} </span>
</div>
<div id="user-actions">
<button class="bordered blue small"><i>person</i></button>
<button class="bordered blue small"><i>lock</i></button>
<button class="bordered blue small" @click='logOut'><i>exit_to_app</i></button>
<q-btn round color="primary" icon="person"></q-btn>
<q-btn round color="warning" icon="lock"></q-btn>
<q-btn round color="secondary" icon="exit_to_app" @click='logoutHandler'></q-btn>
</div>
</div>
@@ -20,27 +21,24 @@
<menu-two v-else :links="links"></menu-two>
<div class="fixed-bottom text-center light text-italic">
Powered by
<a href="https://vuejs.org/"><img src="../img/vue-logo.png" alt=""></a>
<a href="http://quasar-framework.org/"><img src="../img/quasar-logo.png" alt=""></a>
Powered by Perseo
</div>
</div>
</template>
<script type="text/javascript">
import {mapGetters} from 'vuex'
import menuOne from './menuOne.vue'
import menuTwo from './menuTwo.vue'
//import firebase from 'firebase'
import * as types from '../../../store/mutation-types'
import {mapGetters, mapActions} from 'vuex'
export default {
data() {
return {
photo: '',
userId: '',
name: '',
email: '',
user: {},
user: null,
links: {
Dashboard: {
routes: [
@@ -71,7 +69,6 @@
}
},
created() {
console.log("CREA DRAWER!!!!!!!!")
var vm = this
/*firebase.auth().onAuthStateChanged(function (user) {
if (user) {
@@ -84,13 +81,15 @@
})*/
},
methods:{
logOut() {
//firebase.auth().signOut()
...mapActions("user", ["logout"]),
logoutHandler() {
this.logout({router: this.$router});
this.$q.notify(this.$t('logout.uscito'));
}
},
computed: {
...mapGetters("glob", ['getLayoutNeeded', 'getMenuCollapse']),
...mapGetters("user", ['getUsername'])
...mapGetters("user", ['getUsername', 'getVerificato', 'getEmail']),
},
components: {
menuOne,

View File

@@ -27,9 +27,5 @@
created () {
},
methods: {
logOut () {
}
}
}
</script>

View File

@@ -1,6 +1,6 @@
<template>
<div>
<q-page padding class="">
<q-page padding class="signin">
<div class="text-center">
<p>
<!--<img src="../../../assets/quasar-logo-full.svg">-->
@@ -63,6 +63,8 @@
import {serv_constants} from "../../../store/modules/serv_constants";
import axios from 'axios';
import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
export default {
data() {
@@ -100,6 +102,9 @@
...mapActions("user", {
signin: types.USER_SIGNIN,
}),
showNotif (msg) {
this.$q.notify(msg)
},
errorMsg(cosa, item) {
try {
if (!item.$error) return '';
@@ -116,12 +121,13 @@
checkErrors(riscode) {
//console.log("RIS = " + riscode);
if (riscode === Errori_MongoDb.OK) {
this.showNotif({type: 'positive', message: this.$t('login.completato')});
this.$router.push('/');
} else if (riscode === serv_constants.RIS_CODE_LOGIN_ERR) {
this.$q.notify(this.$t('login.errato'));
this.showNotif(this.$t('login.errato'));
this.$router.push('/signin');
} else {
this.$q.notify("Errore num " + riscode);
this.showNotif("Errore num " + riscode);
}
},
@@ -129,21 +135,33 @@
this.$v.form.$touch();
if (this.$v.form.$error) {
this.$q.notify(this.$t('reg.err.errore_generico'));
this.showNotif(this.$t('reg.err.errore_generico'));
return
}
this.$q.loading.show({message: this.$t('login.incorso')});
console.log(this.form);
this.signin(this.form)
.then((riscode) => {
this.checkErrors(riscode);
this.$q.loading.hide();
}).catch(error => {
console.log("ERROR = " + error);
this.$q.loading.hide();
});
// ...
}
},
}
</script>
<style scoped>
.signin {
width: 100%;
margin: 0 auto;
max-width: 450px;
}
</style>

View File

@@ -1,6 +1,6 @@
<template>
<div>
<q-page padding class="">
<q-page padding class="signup">
<div class="text-center">
<p>
<!--<img src="../../../assets/quasar-logo-full.svg">-->
@@ -81,10 +81,13 @@
/>
</q-field>
<br>
<div align="center">
<q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">{{$t('reg.submit')}}
</q-btn>
</div>
</q-page>
</div>
</template>
@@ -107,6 +110,8 @@
import {Errori_MongoDb} from '../../../store/modules/user'
import axios from 'axios';
import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
export default {
data() {
@@ -178,6 +183,9 @@
...mapActions("user", {
signup: types.USER_SIGNUP,
}),
showNotif(msg) {
this.$q.notify(msg)
},
errorMsg(cosa, item) {
try {
if (!item.$error) return '';
@@ -209,13 +217,13 @@
checkErrors(riscode) {
//console.log("RIS = " + riscode);
if (riscode === Errori_MongoDb.DUPLICATE_EMAIL_ID) {
this.$q.notify(this.$t('reg.err.duplicate_email'));
this.showNotif(this.$t('reg.err.duplicate_email'));
} else if (riscode === Errori_MongoDb.DUPLICATE_USERNAME_ID) {
this.$q.notify(this.$t('reg.err.duplicate_username'));
this.showNotif(this.$t('reg.err.duplicate_username'));
} else if (riscode === Errori_MongoDb.OK) {
this.$router.push('/');
} else {
this.$q.notify("Errore num " + riscode);
this.showNotif("Errore num " + riscode);
}
},
@@ -226,25 +234,38 @@
this.duplicate_username = false;
if (!this.form.terms) {
this.$q.notify(this.$t('reg.err.terms'));
this.showNotif(this.$t('reg.err.terms'));
return
}
if (this.$v.form.$error) {
this.$q.notify(this.$t('reg.err.errore_generico'));
this.showNotif(this.$t('reg.err.errore_generico'));
return
}
this.$q.loading.show({message: this.$t('reg.incorso')});
console.log(this.form);
this.signup(this.form)
.then((riscode) => {
this.checkErrors(riscode);
this.$q.loading.hide();
}).catch(error => {
console.log("ERROR = " + error);
this.$q.loading.hide();
});
// ...
}
},
}
</script>
<style scoped>
.signup {
width: 100%;
margin: 0 auto;
max-width: 450px;
}
</style>

View File

@@ -65,6 +65,13 @@
this.risultato = ris.msg;
console.log("RIS = ");
console.log(ris);
if (this.verificatook) {
setTimeout(() => {
this.$router.replace('/');
}, 3000)
}
}).catch((err) => {
console.log("ERR = " + err);
});

View File

@@ -6,14 +6,17 @@ const messages = {
myDescriz: 'La prima App Libera e per Tutti'
},
reg: {
incorso: 'Registrazione in corso...',
richiesto: 'Campo Richiesto',
email: 'Email',
username : 'Nome Utente',
password: 'Password',
repeatPassword: 'Ripeti password',
terms: "Accetti i termini e le condizioni?",
terms: "Accetto i termini e le condizioni",
submit: "Registrati",
title_verif_reg: "Verifica Registrazione",
verificato: "Verificato",
non_verificato: "Non Verificato",
err: {
required: 'è richiesto',
email: 'dev\'essere una email valida',
@@ -28,9 +31,14 @@ const messages = {
}
},
login:{
incorso: 'Login in corso',
enter: 'Login',
errato: "Username o password errata. Riprovare",
}
completato: 'Login effettuato!',
},
logout:{
uscito: 'Sei Uscito',
},
},
enUs: {
msg: {
@@ -39,14 +47,17 @@ const messages = {
myDescriz: 'The first Free app for Everyone'
},
reg: {
incorso: 'Registration please wait...',
richiesto: 'Field Required',
email: 'Email',
username : 'Username',
password: 'Password',
repeatPassword: 'Repeat password',
terms: "Do you agree with the terms & conditions?",
terms: "I agree with the terms and conditions",
submit: "Submit",
title_verif_reg: "Verify Registration",
verificato: "Verified",
non_verificato: "Not Verified",
err: {
required: 'is required',
email: 'must be a valid email',
@@ -61,9 +72,14 @@ const messages = {
}
},
login:{
incorso: 'Login...',
enter: 'Login',
errato: "Username or password wrong. Please retry again",
}
completato: 'Login successfully!',
},
logout:{
uscito: 'Logout successfully',
},
},
};

View File

@@ -15,6 +15,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
<script defer src="js/material.min.js"></script>
<link type="text/css" rel="stylesheet" href="statics/firebaseui.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>

View File

@@ -14,11 +14,11 @@
<br>Conta = {{ getConta }}
</q-field>
<q-btn
<!--<q-btn
@click="showNotification"
color="primary"
label="Mostra notifica"
/>
/>-->
<q-card id="mycard" class="mycard" :style="mystilecard">
<q-card-title>
@@ -171,7 +171,7 @@
console.log('created...');
this.initprompt();
//this.test();
this.test_fetch();
//this.test_fetch();
}
}
</script>

View File

@@ -1,7 +1,6 @@
import Vue from 'vue'
import Vuex from 'vuex'
var bcrypt = require('bcryptjs');
Vue.use(Vuex);
@@ -18,6 +17,14 @@ function getlang() {
return process.env.LANG_DEFAULT
}
function getTok(state) {
if (typeof state.user.tokens[0] !== 'undefined')
return state.user.tokens[0].token;
else
return '';
}
export const Errori_MongoDb = {
CALLING: 10,
OK: 20,
@@ -37,6 +44,9 @@ export const state = {
ripetipassword: '',
dateofbirth: '',
idToken: 0,
userId: 0,
tokens: [{
access: '',
token: ''
@@ -46,24 +56,20 @@ export const state = {
},
userServer: null,
servercode: 0,
idToken: 0,
userId: 0,
username: '',
};
function sendRequest(url, method, mydata) {
function sendRequest(state, url, method, mydata) {
console.log("LANG " + getlang());
var mytok = getTok(state);
const options = {
method: method,
//mode: 'no-cors',
headers: new Headers({'content-type': 'application/json', 'x-auth': '', 'accept-language': getlang()}),
headers: new Headers({'content-type': 'application/json', 'x-auth': mytok, 'accept-language': getlang()}),
cache: "no-cache",
body: JSON.stringify(mydata),
};
if (true) {
return fetch(url, options);
}
};
@@ -76,7 +82,10 @@ export const getters = {
getServerCode: state => state.servercode,
getLang: state => state.user.lang,
getUsername: state => state.username,
getEmail: state => state.user.email,
getUsername: state => state.user.username,
getVerificato: state => state.user.verified_email,
getTok: state => getTok(state),
};
@@ -101,11 +110,13 @@ export const mutations = {
state.username = payload;
},
authUser(state, username, userid, mytoken) {
state.username = username;
state.userId = userid;
state.idToken = mytoken;
state.user.tokens.push({access: "auth", token: mytoken});
authUser(state, data) {
state.user.username = data.username;
state.user.userId = data.userid;
state.user.idToken = data.mytoken;
state.user.verified_email = data.verified_email;
state.user.tokens = [];
state.user.tokens.push({access: "auth", token: data.mytoken});
},
setUser(state, user) {
state.userServer = user
@@ -115,9 +126,11 @@ export const mutations = {
state.servercode = servercode;
},
clearAuthData(state) {
state.tokens = [];
state.idToken = null;
state.userId = null;
state.user.username = null;
state.user.tokens = [];
state.user.idToken = null;
state.user.userId = null;
state.user.verified_email = false;
}
};
@@ -157,7 +170,7 @@ export const actions = {
var myres;
return sendRequest(call, "POST", usertosend)
return sendRequest(state, call, "POST", usertosend)
.then((res) => {
//console.log("RITORNO 1 ");
console.log(res);
@@ -173,6 +186,8 @@ export const actions = {
.then((body) => {
//console.log("RITORNO 2 ");
//commit('setServerCode', myres);
if (body.code === serv_constants.RIS_CODE_EMAIL_VERIFIED)
localStorage.setItem('verificato', true);
return {code: body.code, msg: body.msg};
}).catch((err) => {
console.log("ERROR: " + err);
@@ -185,12 +200,10 @@ export const actions = {
var call = process.env.MONGODB_HOST + '/users';
console.log("CALL " + call);
console.log("PASSW: " + authData.password);
//console.log("PASSW: " + authData.password);
bcrypt
.hash(authData.password, bcrypt.genSaltSync(12))
return bcrypt.hash(authData.password, bcrypt.genSaltSync(12))
.then(hashedPassword => {
console.log("NEW hashedPassword = " + hashedPassword);
let usertosend = {
keyappid: process.env.PAO_APP_ID,
lang: getlang(),
@@ -206,10 +219,12 @@ export const actions = {
commit('setServerCode', Errori_MongoDb.CALLING);
return sendRequest(call, "POST", usertosend)
var x_auth_token = null;
return sendRequest(state, call, "POST", usertosend)
.then((res) => {
myres = res;
var x_auth_token = res.headers.get('x-auth');
x_auth_token = res.headers.get('x-auth');
if (x_auth_token) {
return res.json();
} else {
@@ -224,7 +239,7 @@ export const actions = {
console.log(body);
}
commit('setServerCode', myres);
commit('setServerCode', myres.status);
commit('setUser', body);
if (myres.status === 200) {
@@ -233,9 +248,10 @@ export const actions = {
if (process.env.DEV) {
console.log("USERNAME = " + username);
console.log("IDUSER= " + iduser);
commit('authUser', username, iduser, x_auth_token);
}
commit('authUser', {username: username, userid: iduser, mytoken: x_auth_token, verified_email: false});
const now = new Date();
//const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
const expirationDate = new Date(now.getTime() + 1000);
@@ -243,6 +259,7 @@ export const actions = {
localStorage.setItem('token', x_auth_token);
localStorage.setItem('userId', iduser);
localStorage.setItem('expirationDate', expirationDate);
localStorage.setItem('verificato', false);
//dispatch('storeUser', authData);
//dispatch('setLogoutTimer', myres.data.expiresIn);
@@ -268,7 +285,6 @@ export const actions = {
return Errori_MongoDb.ERR_GENERICO;
});
});
},
[types.USER_SIGNIN]: ({commit}, authData) => {
var call = process.env.MONGODB_HOST + '/users/login';
@@ -276,8 +292,6 @@ export const actions = {
console.log("MYLANG = " + getlang());
console.log("PASSW: " + authData.password);
const usertosend = {
username: authData.username,
password: authData.password,
@@ -294,7 +308,7 @@ export const actions = {
var x_auth_token = null;
return sendRequest(call, "POST", usertosend)
return sendRequest(state, call, "POST", usertosend)
.then((res) => {
myres = res;
x_auth_token = res.headers.get('x-auth');
@@ -324,10 +338,16 @@ export const actions = {
if (myres.status === 200) {
var iduser = body._id;
var username = authData.username;
var verified_email = body.verified_email === "true" || body.verified_email === true;
if (process.env.DEV) {
console.log("USERNAME = " + username);
console.log("IDUSER= " + iduser);
commit('authUser', username, iduser, x_auth_token);
commit('authUser', {
username: username,
userid: iduser,
mytoken: x_auth_token,
verified_email: verified_email
});
}
const now = new Date();
@@ -338,6 +358,7 @@ export const actions = {
localStorage.setItem('userId', iduser);
localStorage.setItem('expirationDate', expirationDate);
localStorage.setItem('isLoggedin', true);
localStorage.setItem('verificato', verified_email);
//dispatch('storeUser', authData);
//dispatch('setLogoutTimer', myres.data.expiresIn);
@@ -375,20 +396,43 @@ export const actions = {
}
const userId = localStorage.getItem('userId');
const username = localStorage.getItem('username');
const verified_email = localStorage.getItem('verificato') === "true";
commit('authUser', {
username: username,
userId: userId,
token: token,
verified_email: verified_email,
})
},
[types.USER_LOGOUT]: ({commit}) => {
[types.USER_LOGOUT]: ({commit}, {router}) => {
var call = process.env.MONGODB_HOST + '/users/me/token';
console.log("CALL " + call);
let usertosend = {
keyappid: process.env.PAO_APP_ID,
idapp: process.env.APP_ID,
};
console.log(usertosend);
sendRequest(state, call, "DELETE", usertosend)
.then((res) => {
console.log(res);
}).catch((err) => {
console.log("ERROR: " + err);
}).then(() => {
commit('clearAuthData');
});
localStorage.removeItem('expirationDate');
localStorage.removeItem('token');
localStorage.removeItem('userId');
localStorage.removeItem('username');
localStorage.removeItem('isLoggedin');
router.replace('/signin');
localStorage.removeItem('verified_email');
router.replace('/signin')
},