Merge branch 'modallogin' into dev

This commit is contained in:
vincent 2019-05-11 16:16:01 +02:00
commit 815cb2513d
5 changed files with 128 additions and 91 deletions

View File

@ -73,23 +73,39 @@
</div> </div>
</div> </div>
</div> </div>
<modalLogin v-show="showModalLogin" @close="showModalLogin = false" />
<modal v-show="showModal" @close="showModal = false">
<p>{{modalmessage}}</p>
<button class="button is-success" @click="showModal = false">close</button>
</modal>
</div> </div>
</template> </template>
<script> <script>
import { putparsechaine } from '../api'; import { putparsechaine } from '../api';
import modalLogin from './modalLogin'
import modal from './modal'
import { EventBus } from '../utils';
export default { export default {
name: 'chainetv', name: 'chainetv',
components: {
modalLogin,
modal,
},
data() { data() {
return { return {
chaine: '', chaine: '',
showModalLogin: false,
showModal: false,
modalmessage:''
}; };
}, },
methods: { methods: {
checkchaine() { checkchaine() {
if (this.chaine === '') { if (this.chaine === '') {
alert('rentrer un numéro'); this.modalmessage='rentrer un numéro de chaine';
this.showModal=true;
return; return;
} }
this.$store.state.arrayresultchaines = []; this.$store.state.arrayresultchaines = [];
@ -110,18 +126,20 @@ export default {
}, },
parsechaine() { parsechaine() {
if (!this.$store.getters.isAuthenticated) { if (!this.$store.getters.isAuthenticated) {
this.$router.push('/login'); this.showModalLogin=true;
} else { } else {
return putparsechaine(this.$store.state.jwt.token) return putparsechaine(this.$store.state.jwt.token)
.then((res) => { .then((res) => {
if (res.data === 'OK') { if (res.data === 'OK') {
alert('update database OK'); this.modalmessage='update database OK';
this.showModal=true;
} }
}) })
.catch((error) => { .catch((error) => {
// eslint-disable-next-line // eslint-disable-next-line
if (error.response) { if (error.response) {
alert(error.response.data.message); this.modalmessage=error.response.data.message;
this.showModal=true;
} else { } else {
console.error(error); console.error(error);
} }
@ -131,6 +149,11 @@ export default {
return true; return true;
}, },
}, },
mounted() {
EventBus.$on('showmodallogin',()=>{
this.showModalLogin=true;
})
},
}; };
</script> </script>
<style > <style >

View File

@ -1,76 +0,0 @@
<!-- components/Login.vue -->
<template>
<div>
<section class="hero is-success">
<div class="hero-body">
<div class="container has-text-centered">
<h2 class="title">Login </h2>
<p class="subtitle error-msg">{{ errorMsg }}</p>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="field">
<label class="label is-large" for="name">Name:</label>
<div class="control">
<input type="name" class="input is-large" id="email" v-model="name">
</div>
</div>
<div class="field">
<label class="label is-large" for="password">Password:</label>
<div class="control">
<input type="password" class="input is-large" id="password" v-model="password">
</div>
</div>
<div class="control">
<a class="button is-large is-success" @click="authenticate">Login</a>
</div>
</div>
</section>
</div>
</template>
<script>
import { EventBus } from '../utils';
export default {
data() {
return {
name: '',
password: '',
errorMsg: '',
};
},
methods: {
authenticate() {
this.$store.dispatch('login', { name: this.name, password: this.password })
.then(() => {
if (this.$store.getters.isAuthenticated) {
this.$router.push('/');
}
},
);
},
register() {
this.$store.dispatch('register', { name: this.name, password: this.password })
.then(() => this.$router.push('/'));
},
},
mounted() {
EventBus.$on('failedRegistering', (msg) => {
this.errorMsg = msg;
});
EventBus.$on('failedAuthentication', (msg) => {
this.errorMsg = msg;
});
},
beforeDestroy() {
EventBus.$off('failedRegistering');
EventBus.$off('failedAuthentication');
},
};
</script>

View File

@ -0,0 +1,16 @@
<template>
<div>
<div class="modal is-active">
<div class="modal-background"></div>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
<div class="modal-content box">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
};
</script>

View File

@ -0,0 +1,74 @@
<!-- components/Login.vue -->
<template>
<modal @close="$emit('close')">
<div class="hero is-success">
<div class="hero-body has-text-centered">
<h2 class="title">Login</h2>
<p class="subtitle error-msg">{{ errorMsg }}</p>
</div>
</div>
<section v-on:keyup.enter="authenticate" class="section">
<div class="field">
<label class="label" for="name">Name:</label>
<div class="control">
<input type="name" class="input" id="email" v-model="name">
</div>
</div>
<div class="field">
<label class="label" for="password">Password:</label>
<div class="control">
<input type="password" class="input" id="password" v-model="password">
</div>
</div>
<div class="control">
<a class="button is-success is-large" @click="authenticate">Login</a>
</div>
</section>
</modal>
</template>
<script>
import { EventBus } from '../utils';
import modal from './modal'
export default {
data() {
return {
name: "",
password: "",
errorMsg: ""
};
},
components: {
modal
},
methods: {
authenticate() {
this.$store
.dispatch("login", { name: this.name, password: this.password })
.then(() => {
if (this.$store.getters.isAuthenticated) {
this.$emit("close");
}
});
},
register() {
this.$store
.dispatch("register", { name: this.name, password: this.password })
.then(() => this.$router.push("/"));
}
},
mounted() {
EventBus.$on("failedRegistering", msg => {
this.errorMsg = msg;
});
EventBus.$on("failedAuthentication", msg => {
this.errorMsg = msg;
});
},
beforeDestroy() {
EventBus.$off("failedRegistering");
EventBus.$off("failedAuthentication");
}
};
</script>

View File

@ -2,8 +2,8 @@ import Vue from 'vue';
import Router from 'vue-router'; import Router from 'vue-router';
import ping from '@/components/ping'; import ping from '@/components/ping';
import chainetv from '@/components/chainetv'; import chainetv from '@/components/chainetv';
import login from '@/components/login';
import store from '@/store'; import store from '@/store';
import { EventBus } from '../utils';
Vue.use(Router); Vue.use(Router);
export default new Router({ export default new Router({
@ -13,22 +13,22 @@ export default new Router({
name: 'chaineTV', name: 'chaineTV',
component: chainetv, component: chainetv,
}, },
{
path: '/login',
name: 'Login',
component: login,
},
{ {
path: '/ping', path: '/ping',
name: 'ping', name: 'ping',
component: ping, component: ping,
beforeEnter(to, from, next) { beforeEnter(to, from, next) {
if (!store.getters.isAuthenticated) { autent(to,from,next)
next('/login');
} else {
next();
}
}, },
}, },
], ],
}); });
function autent(to,from,next) {
if (!store.getters.isAuthenticated) {
next('/')
EventBus.$emit("showmodallogin")
} else {
next();
}
}