surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login (1)

Browse Source
This commit is contained in:
paolo
2018-10-26 00:30:10 +02:00
parent 3d2b951d93
commit 1d42b184bb
14 changed files with 431 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.env
View File

@@ -3,12 +3,13 @@
APP_ID=1
VUE_APP_URL="prova SVILUPPO!"
PROVA_PAOLO="PROVA SVILUPPO"
#LANG_DEFAULT=enUs
LANG_DEFAULT=it
MONGODB_HOST='http://localhost:3000'
PAO_APP_ID='KKPPAA5KJK435J3KSS9F9D8S9F8SD98F9SDF'
MASTER_KEY='KKPPSS5KJK435J3KSS9F9D8S9F8SD3CR3T'
PAO_APP_ID=KKPPAA5KJK435J3KSS9F9D8S9F8SD98F9SDF
MASTER_KEY=KKPPSS5KJK435J3KSS9F9D8S9F8SD3CR3T
LOGO_REG=quasar-logo-full.svg

10
package-lock.json generated
View File

@@ -1643,6 +1643,11 @@
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
"dev": true
},
"bcryptjs": {
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
"integrity": "sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms="
},
"bfj": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.1.tgz",
@@ -5708,6 +5713,11 @@
"integrity": "sha512-PxfGzSs0ztShKrUYPIn5r0MtyAhYcCwmndozzpz8YObbPnD1jFxzlBGbRnX2mIu6Z13xN6+PTu05TQFnZFlzow==",
"dev": true
},
"js-md5": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
"integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
},
"js-tokens": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",

2
package.json
View File

@@ -13,9 +13,11 @@
},
"dependencies": {
"axios": "^0.18.0",
"bcryptjs": "^2.4.3",
"chart": "^0.1.2",
"chart.js": "^2.7.3",
"countup.js": "^1.9.3",
"js-md5": "^0.7.3",
"lodash": "^4.17.11",
"quasar-extras": "^2.0.8",
"roboto-font": "^0.1.0",

12
src/App.vue
View File

@@ -18,7 +18,9 @@
<script type="text/javascript">
import Header from './components/Header.vue';
import {mapGetters} from 'vuex'
import * as types from './store/mutation-types'
import {mapGetters, mapActions} from 'vuex'
export default {
name: 'app',
@@ -33,8 +35,14 @@
components: {
appHeader: Header,
},
created(){
methods:{
...mapActions("user", {
tryAutoLogin: types.USER_AUTOLOGIN,
}),
},
created() {
console.info(process.env);
this.tryAutoLogin();
}
}
</script>

12
src/components/Header.vue
View File

@@ -27,7 +27,7 @@
<div class="right-itens">
<!--<message-popover></message-popover>-->
<label>{{ $t('msg.hello') }}</label>
<label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
</div>
@@ -55,6 +55,10 @@
import drawer from '../components/layout/drawer/drawer.vue'
import messagePopover from '../components/layout/toolbar/messagePopover.vue'
import user from '../store/modules/user';
import {mapGetters} from 'vuex'
export default {
components: {
drawer,
@@ -66,8 +70,14 @@
methods: {
openURL,
},
computed: {
...mapGetters("user", [
'getUsername',
]),
},
data: function () {
return {
prova: 'AA',
selectOpLang: [
{label: 'Italian', icon: 'fa-facebook', value: 'it'},
{label: 'English (US)', icon: 'fa-flag-us', value: 'en-us'},

5
src/components/layout/drawer/drawer.vue
View File

@@ -4,7 +4,7 @@
<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"> {{ name }} </span>
<span class="text-white"> Username: {{ getUsername }} </span>
<hr>
<span class="text-white"> {{ email }} </span>
<hr>
@@ -89,7 +89,8 @@
}
},
computed: {
...mapGetters("glob", ['getLayoutNeeded', 'getMenuCollapse'])
...mapGetters("glob", ['getLayoutNeeded', 'getMenuCollapse']),
...mapGetters("user", ['getUsername'])
},
components: {
menuOne,

8
src/components/views/login/login.vue
View File

@@ -38,13 +38,13 @@
import { Platform } from 'quasar'
export default {
mounted () {
this.setLayoutNeeded(false)
this.setIsLoginPage(true)
this.setLayoutNeeded(false);
this.setIsLoginPage(true);
this.startAnimation()
},
beforeDestroy () {
this.setLayoutNeeded(true)
this.setIsLoginPage(false)
this.setLayoutNeeded(true);
this.setIsLoginPage(false);
},
computed: {
heightSize (){

153
src/components/views/login/signin.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<div>
<q-page padding class="">
<div class="text-center">
<p>
<!--<img src="../../../assets/quasar-logo-full.svg">-->
<img :src="`../../../assets/`+`${env('LOGO_REG')}`">
</p>
</div>
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
<q-field
:error="$v.form.username.$error"
:error-label="`${errorMsg('username', $v.form.username)}`"
>
<q-input
:value="form.username"
@change="val => { form.username = val }"
:before="[{icon: 'person', handler () {}}]"
@blur="$v.form.username.$touch"
:error="$v.form.username.$error"
:float-label="$t('reg.username')"
/>
</q-field>
<q-field
:error="$v.form.password.$error"
:error-label="`${errorMsg('password', $v.form.password)}`"
>
<q-input
v-model="form.password"
:before="[{icon: 'vpn_key', handler () {}}]"
@blur="$v.form.password.$touch"
:error="$v.form.password.$error"
:float-label="$t('reg.password')"
/>
</q-field>
<br>
<div align="center">
<q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">{{$t('login.enter')}}
</q-btn>
</div>
</q-page>
</div>
</template>
<script>
import {
required,
email,
minLength,
maxLength,
sameAs,
} from 'vuelidate/lib/validators'
import {mapGetters, mapActions} from 'vuex'
import * as types from '../../../store/mutation-types'
import {Errori_MongoDb} from '../../../store/modules/user'
import axios from 'axios';
export default {
data() {
return {
url: process.env.VUE_APP_URL,
form: {
username: process.env.TEST_USERNAME,
password: process.env.TEST_PASSWORD,
},
}
},
computed: {
...mapGetters("user", [
'getUsername',
'getPassword',
]),
...mapGetters("user", [
'getUserServer',
'getServerCode',
]),
env() {
return env
},
},
validations: {
isAsync: true,
form: {
password: {required, minLength: minLength(8), maxLength: maxLength(20)},
username: {
required, minLength: minLength(6), maxLength: maxLength(20),
},
}
},
methods: {
...mapActions("user", {
signin: types.USER_SIGNIN,
}),
errorMsg(cosa, item) {
try {
if (!item.$error) return '';
if (item.$params.email && !item.email) return this.$t('reg.err.email');
if (!item.required) return this.$t('reg.err.required');
if (!item.minLength) return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char');
if (!item.maxLength) return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char');
return '';
} catch (error) {
//console.log("ERR : " + error);
}
},
checkErrors(riscode) {
//console.log("RIS = " + riscode);
if (riscode === Errori_MongoDb.OK) {
this.$router.push('/');
}else if (riscode === Errori_MongoDb.ERR_LOGIN_ERRATO) {
this.$q.notify(this.$t('login.errato'));
this.$router.push('/signin');
} else {
this.$q.notify("Errore num " + riscode);
}
},
submit() {
this.$v.form.$touch();
if (this.$v.form.$error) {
this.$q.notify(this.$t('reg.err.errore_generico'));
return
}
console.log(this.form);
this.signin(this.form)
.then((riscode) => {
this.checkErrors(riscode);
if (riscode === Errori_MongoDb.OK){
this.$router.push('/');
}else{
this.$router.push('/signin');
}
}).catch(error => {
console.log("ERROR = " + error);
});
// ...
}
},
}
</script>

2
src/components/views/login/signup.vue
View File

@@ -125,7 +125,7 @@
}
},
computed: {
...mapGetters("glob", [
...mapGetters("user", [
'getUsername',
'getPassword',
'getEmail',

10
src/i18n.js
View File

@@ -1,7 +1,7 @@
const messages = {
it: {
msg: {
hello: 'Buongiorno!',
hello: 'Buongiorno',
myAppName: 'FreePlanet',
myDescriz: 'La prima App Libera e per Tutti'
},
@@ -27,6 +27,10 @@ const messages = {
sameaspassword: 'Le password devono essere identiche',
}
},
login:{
enter: 'Login',
errato: "Username o password errata. Riprovare",
}
},
enUs: {
msg: {
@@ -56,6 +60,10 @@ const messages = {
sameaspassword: 'Passwords must be identical',
}
},
login:{
enter: 'Login',
errato: "Username or password wrong. Please retry again",
}
},
};

2
src/router/routes.js
View File

@@ -10,7 +10,7 @@ function load (component) {
const routes = [
{ path: '/', component: () => import('pages/Index.vue') },
{ path: '/signup', component: load('views/login/signup'), meta: { name: 'Registration' } },
{ path: '/login', component: load('views/login/login'), meta: { name: 'Login' } },
{ path: '/signin', component: load('views/login/signin'), meta: { name: 'Login' } },
{ path: '/vreg', component: load('views/login/vreg'), meta: { name: 'Verify Reg' } },
];

3
src/store/modules/serv_constants.js
View File

@@ -1,4 +1,7 @@
export const serv_constants = {
RIS_CODE_EMAIL_ALREADY_VERIFIED: -20,
RIS_CODE_EMAIL_VERIFIED: 1,
RIS_CODE_LOGIN_ERR: -10,
RIS_CODE_LOGIN_OK: 1,
};

291
src/store/modules/user.js
View File

@@ -1,12 +1,18 @@
import Vue from 'vue'
import Vuex from 'vuex'
import md5 from 'js-md5';
const bcrypt = require('bcryptjs');
Vue.use(Vuex);
import * as types from '../mutation-types'
import {serv_constants} from "./serv_constants";
//import tools from '../../../tools/tools'
function getlang(){
function getlang() {
if (state.user.lang !== "")
return state.user.lang;
else
@@ -17,6 +23,7 @@ export const Errori_MongoDb = {
CALLING: 10,
OK: 20,
ERR_GENERICO: -1,
ERR_LOGIN_ERRATO: -10,
DUPLICATE_EMAIL_ID: 11000,
DUPLICATE_USERNAME_ID: 11100
};
@@ -41,6 +48,8 @@ export const state = {
},
userServer: null,
servercode: 0,
idToken: 0,
userId: 0,
};
function sendRequest(url, method, mydata) {
@@ -91,8 +100,10 @@ export const mutations = {
state.user.dateOfBirth = payload;
},
authUser(state, email, mytoken) {
authUser(state, email, userid, mytoken) {
state.user.tokens.push({access: "auth", token: mytoken});
state.idToken = mytoken;
state.userId = userid;
},
setUser(state, user) {
state.userServer = user
@@ -103,6 +114,8 @@ export const mutations = {
},
clearAuthData(state) {
state.tokens = [];
state.idToken = null;
state.userId = null;
}
};
@@ -131,18 +144,18 @@ export const actions = {
var call = process.env.MONGODB_HOST + '/vreg';
console.log("CALL " + call);
let params = {
let usertosend = {
keyappid: process.env.PAO_APP_ID,
idapp: process.env.APP_ID,
idlink: paramquery.idlink,
};
console.log(params);
console.log(usertosend);
commit('setServerCode', Errori_MongoDb.CALLING);
var myres;
return sendRequest(call, "POST", params)
return sendRequest(call, "POST", usertosend)
.then((res) => {
//console.log("RITORNO 1 ");
console.log(res);
@@ -170,85 +183,217 @@ export const actions = {
var call = process.env.MONGODB_HOST + '/users';
console.log("CALL " + call);
let params = {
keyappid: process.env.PAO_APP_ID,
lang: state.user.lang,
email: authData.email,
password: authData.password,
username: authData.username,
idapp: process.env.APP_ID,
};
console.log("MYLANG = " + getlang());
console.log(params);
bcrypt.genSalt(10, (err, salt) => {
return bcrypt
.hash(authData.password, salt)
.then(hashedPassword => {
let usertosend = {
keyappid: process.env.PAO_APP_ID,
lang: getlang(),
email: authData.email,
password: hashedPassword,
username: authData.username,
idapp: process.env.APP_ID,
};
var myres = null;
console.log(usertosend);
commit('setServerCode', Errori_MongoDb.CALLING);
var myres = null;
var x_auth_token = null;
commit('setServerCode', Errori_MongoDb.CALLING);
return sendRequest(call, "POST", params)
.then((res) => {
console.log("HEADERS:");
var x_auth_token = null;
for (let header of res.headers) {
console.log(header);
}
return sendRequest(call, "POST", usertosend)
.then((res) => {
console.log("HEADERS:");
x_auth_token = res.headers.get('x-auth');
myres = res;
return res.json();
})
.then((body) => {
if (process.env.DEV) {
console.log("RISULTATO ");
console.log("STATUS " + myres.status + " " + (myres.statusText));
console.log("BODY:");
console.log(body);
}
for (let header of res.headers) {
console.log(header);
}
commit('setServerCode', myres);
commit('setUser', body);
x_auth_token = res.headers.get('x-auth');
myres = res;
return res.json();
})
.then((body) => {
if (process.env.DEV) {
console.log("RISULTATO ");
console.log("STATUS " + myres.status + " " + (myres.statusText));
console.log("BODY:");
console.log(body);
}
if (myres.status === 200) {
var iduser = body._id;
var email = body.email;
if (process.env.DEV) {
console.log("EMAIL = " + body.email);
console.log("IDUSER= " + iduser);
commit('authUser', email, x_auth_token);
}
commit('setServerCode', myres);
commit('setUser', body);
if (myres.status === 200) {
var iduser = body._id;
var email = body.email;
if (process.env.DEV) {
console.log("EMAIL = " + body.email);
console.log("IDUSER= " + iduser);
commit('authUser', email, iduser, x_auth_token);
}
const now = new Date();
//const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
const expirationDate = new Date(now.getTime() + 1000);
localStorage.setItem('username', authData.username);
localStorage.setItem('token', x_auth_token);
localStorage.setItem('userId', iduser);
localStorage.setItem('expirationDate', expirationDate);
//dispatch('storeUser', authData);
//dispatch('setLogoutTimer', myres.data.expiresIn);
return Errori_MongoDb.OK;
} else if (myres.status === 404) {
if (process.env.DEV) {
console.log("CODE = " + body.code);
}
return body.code;
} else {
if (process.env.DEV) {
console.log("CODE = " + body.code);
}
return body.code;
}
})
.catch((error) => {
if (process.env.DEV) {
console.log("ERROREEEEEEEEE");
console.log(error);
}
commit('setServerCode', Errori_MongoDb.ERR_GENERICO);
return Errori_MongoDb.ERR_GENERICO;
});
});
});
const now = new Date();
//const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
const expirationDate = new Date(now.getTime() + 1000);
localStorage.setItem('token', x_auth_token);
localStorage.setItem('userId', iduser);
localStorage.setItem('expirationDate', expirationDate);
//dispatch('storeUser', authData);
//dispatch('setLogoutTimer', myres.data.expiresIn);
return Errori_MongoDb.OK;
} else if (myres.status === 404) {
if (process.env.DEV) {
console.log("CODE = " + body.code);
}
return body.code;
} else {
if (process.env.DEV) {
console.log("CODE = " + body.code);
}
return body.code;
}
})
.catch((error) => {
if (process.env.DEV) {
console.log("ERROREEEEEEEEE");
console.log(error);
}
commit('setServerCode', Errori_MongoDb.ERR_GENERICO);
return Errori_MongoDb.ERR_GENERICO;
});
},
[types.USER_SIGNIN]: ({commit}, authData) => {
var call = process.env.MONGODB_HOST + '/users/login';
console.log("LOGIN " + call);
console.log("MYLANG = " + getlang());
bcrypt.genSalt(10, (err, salt) => {
return bcrypt
.hash(authData.password, salt)
.then(hashedPassword => {
const usertosend = {
username: authData.username,
password: hashedPassword,
idapp: process.env.APP_ID,
keyappid: process.env.PAO_APP_ID,
lang: getlang(),
};
console.log(usertosend);
var myres = null;
commit('setServerCode', Errori_MongoDb.CALLING);
var x_auth_token = null;
return sendRequest(call, "POST", usertosend)
.then((res) => {
myres = res;
return res.json();
})
.then((body) => {
if (process.env.DEV) {
console.log("RISULTATO ");
console.log("STATUS " + myres.status + " " + (myres.statusText));
console.log("BODY:");
console.log(body);
}
if (body.code === serv_constants.RIS_CODE_LOGIN_ERR) {
commit('setServerCode', Errori_MongoDb.ERR_LOGIN_ERRATO);
return Errori_MongoDb.ERR_LOGIN_ERRATO;
}
x_auth_token = body.token;
commit('setServerCode', myres);
if (myres.status === 200) {
var iduser = body._id;
var email = body.email;
if (process.env.DEV) {
console.log("EMAIL = " + email);
console.log("IDUSER= " + iduser);
commit('authUser', '', iduser, x_auth_token);
}
const now = new Date();
//const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
const expirationDate = new Date(now.getTime() + 1000);
localStorage.setItem('username', authData.username);
localStorage.setItem('token', x_auth_token);
localStorage.setItem('userId', iduser);
localStorage.setItem('expirationDate', expirationDate);
localStorage.setItem('isLoggedin', true);
//dispatch('storeUser', authData);
//dispatch('setLogoutTimer', myres.data.expiresIn);
return Errori_MongoDb.OK;
} else if (myres.status === 404) {
if (process.env.DEV) {
console.log("CODE = " + body.code);
}
return body.code;
} else {
if (process.env.DEV) {
console.log("CODE = " + body.code);
}
return body.code;
}
})
.catch((error) => {
if (process.env.DEV) {
console.log("ERROREEEEEEEEE");
console.log(error);
}
commit('setServerCode', Errori_MongoDb.ERR_GENERICO);
return Errori_MongoDb.ERR_GENERICO;
});
});
});
},
[types.USER_AUTOLOGIN]: ({commit}) => {
const token = localStorage.getItem('token');
if (!token) {
return
}
const expirationDate = localStorage.getItem('expirationDate');
const now = new Date();
if (now >= expirationDate) {
return
}
const userId = localStorage.getItem('userId');
const username = localStorage.getItem('username');
commit('authUser', {
username: username,
token: token,
userId: userId
})
},
[types.USER_LOGOUT]: ({commit}) => {
commit('clearAuthData');
localStorage.removeItem('expirationDate');
localStorage.removeItem('token');
localStorage.removeItem('userId');
localStorage.removeItem('username');
localStorage.removeItem('isLoggedin');
router.replace('/signin');
},
};

3
src/store/mutation-types.js
View File

@@ -17,6 +17,9 @@ export const USER_PASSWORD = 'password';
export const USER_DATEOFBIRTH = 'dateofbirth';
export const USER_SIGNUP = 'signup';
export const USER_SIGNIN = 'signin';
export const USER_AUTOLOGIN = 'autologin';
export const USER_LOGOUT = 'logout';
export const USER_VREG = 'vreg';