Jimmy Pellier
5 years ago
parent
2397bf550a
commit
1a8b9302d9
@ -0,0 +1,3 @@ |
||||
VUE_APP_BACK_URL=http://localhost:5001 |
||||
VUE_APP_BACK_USER=http://localhost/user |
||||
VUE_APP_IMAGE_STORE= |
||||
@ -0,0 +1 @@ |
||||
VUE_APP_BACK_URL=http://localhost:5000 |
||||
@ -0,0 +1,21 @@ |
||||
.DS_Store |
||||
node_modules |
||||
/dist |
||||
|
||||
# local env files |
||||
.env.local |
||||
.env.*.local |
||||
|
||||
# Log files |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
|
||||
# Editor directories and files |
||||
.idea |
||||
.vscode |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -1,2 +1,29 @@ |
||||
# TemperatureCheckerFront |
||||
# clientapp |
||||
|
||||
## Project setup |
||||
``` |
||||
npm install |
||||
``` |
||||
|
||||
### Compiles and hot-reloads for development |
||||
``` |
||||
npm run serve |
||||
``` |
||||
|
||||
### Compiles and minifies for production |
||||
``` |
||||
npm run build |
||||
``` |
||||
|
||||
### Run your tests |
||||
``` |
||||
npm run test |
||||
``` |
||||
|
||||
### Lints and fixes files |
||||
``` |
||||
npm run lint |
||||
``` |
||||
|
||||
### Customize configuration |
||||
See [Configuration Reference](https://cli.vuejs.org/config/). |
||||
|
||||
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
presets: [ |
||||
'@vue/cli-plugin-babel/preset' |
||||
] |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,62 @@ |
||||
{ |
||||
"name": "coviiiiid", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"serve": "node_modules/.bin/vue-cli-service serve", |
||||
"build": "node_modules/.bin/vue-cli-service build", |
||||
"lint": "node_modules/.bin/vue-cli-service lint" |
||||
}, |
||||
"dependencies": { |
||||
"@aspnet/signalr": "^1.1.4", |
||||
"@fortawesome/fontawesome-svg-core": "^1.2.28", |
||||
"@fortawesome/free-solid-svg-icons": "^5.13.0", |
||||
"@fortawesome/vue-fontawesome": "^0.1.9", |
||||
"axios": "^0.19.2", |
||||
"bootstrap-vue": "^2.15.0", |
||||
"chart.js": "^2.9.3", |
||||
"core-js": "^3.4.3", |
||||
"es6-promise": "^4.2.8", |
||||
"keycloak-js": "^10.0.2", |
||||
"socket.io": "^2.3.0", |
||||
"vue": "^2.6.10", |
||||
"vue-chartjs": "^3.5.0", |
||||
"vue-i18n": "^8.18.1", |
||||
"vue-infinite-loading": "^2.4.5", |
||||
"vue-js-toggle-button": "^1.3.3", |
||||
"vue-router": "^3.3.2", |
||||
"vuex": "^3.4.0", |
||||
"commander": "^4.0.1", |
||||
"nimble": "0.0.2", |
||||
"node-datetime": "^2.1.2", |
||||
"request-digest": "^1.0.13", |
||||
"xml2js": "^0.4.22" |
||||
}, |
||||
"devDependencies": { |
||||
"@vue/cli-plugin-babel": "^4.1.0", |
||||
"@vue/cli-plugin-eslint": "^4.1.0", |
||||
"@vue/cli-service": "^4.1.0", |
||||
"babel-eslint": "^10.0.3", |
||||
"eslint": "^5.16.0", |
||||
"eslint-plugin-vue": "^5.0.0", |
||||
"vue-template-compiler": "^2.6.10" |
||||
}, |
||||
"eslintConfig": { |
||||
"root": true, |
||||
"env": { |
||||
"node": true |
||||
}, |
||||
"extends": [ |
||||
"plugin:vue/essential", |
||||
"eslint:recommended" |
||||
], |
||||
"rules": {}, |
||||
"parserOptions": { |
||||
"parser": "babel-eslint" |
||||
} |
||||
}, |
||||
"browserslist": [ |
||||
"> 1%", |
||||
"last 2 versions" |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
<title>covid finder</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but clientapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,10 @@ |
||||
{ |
||||
"realm": "Test", |
||||
"auth-server-url": "https://oauth.apsidetop-devel.net/auth", |
||||
"ssl-required": "external", |
||||
"resource": "test", |
||||
"credentials": { |
||||
"secret": "5cf010f0-b4a9-4db9-a9f2-102bc703c448" |
||||
}, |
||||
"confidential-port": 0 |
||||
} |
||||
@ -0,0 +1,59 @@ |
||||
<template> |
||||
<b-container fluid id="app"> |
||||
<Menu class="header" /> |
||||
<div style="margin-top:60px"> |
||||
<router-view > </router-view> |
||||
</div> |
||||
</b-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import Menu from './components/Menu.vue' |
||||
import Vue from 'vue' |
||||
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' |
||||
import 'bootstrap/dist/css/bootstrap.css' |
||||
import 'bootstrap-vue/dist/bootstrap-vue.css' |
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core' |
||||
import { faUserSecret } from '@fortawesome/free-solid-svg-icons' |
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' |
||||
|
||||
library.add(faUserSecret) |
||||
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon) |
||||
|
||||
// Install BootstrapVue |
||||
Vue.use(BootstrapVue) |
||||
// Optionally install the BootstrapVue icon components plugin |
||||
Vue.use(IconsPlugin) |
||||
|
||||
export default { |
||||
name: 'app', |
||||
components: { |
||||
Menu |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
#app { |
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
text-align: center; |
||||
color: #2c3e50; |
||||
margin-top: 0px; |
||||
padding-left: 0; |
||||
padding-right: 0 |
||||
} |
||||
.header { |
||||
position:fixed; /* fixing the position takes it out of html flow - knows |
||||
nothing about where to locate itself except by browser |
||||
coordinates */ |
||||
left:0; /* top left corner should start at leftmost spot */ |
||||
top:0; /* top left corner should start at topmost spot */ |
||||
width:100vw; /* take up the full browser width */ |
||||
z-index:100; /* high z index so other content scrolls underneath */ |
||||
height:50px; /* define height for content */ |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,91 @@ |
||||
<template> |
||||
<div id="videoapp"> |
||||
<b-button v-b-modal.modal-2 > |
||||
<font-awesome-icon icon="camera" /> |
||||
{{$t('user_detail_photo')}} |
||||
</b-button> |
||||
<b-modal static size="xl" id="modal-2" :hide-footer="true" > |
||||
<template v-slot:modal-header> |
||||
Title |
||||
<b-button size="sm" variant="danger" @click="close()"> |
||||
Cancel |
||||
</b-button> |
||||
|
||||
</template> |
||||
<template v-slot:default> |
||||
<div> |
||||
<div><video ref="video" id="video" width="640" height="480" autoplay ></video></div> |
||||
<div><button id="snap" v-on:click="capture()">Snap Photo</button></div> |
||||
<canvas ref="canvas" id="canvas" width="640" height="480"></canvas> |
||||
<ul> |
||||
<li v-for="c in captures" v-bind:key="c.id"> |
||||
<img v-bind:src="c.photo" height="50" /> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</template> |
||||
</b-modal> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "CapturePhoto", |
||||
mounted() { |
||||
this.video = this.$refs.video; |
||||
let video = document.querySelector('video'); |
||||
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { |
||||
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => { |
||||
video.srcObject = stream |
||||
}); |
||||
} |
||||
}, |
||||
data () { |
||||
return { |
||||
video: {}, |
||||
canvas: {}, |
||||
compteur:0, |
||||
captures: [], |
||||
snapshot:{} |
||||
} |
||||
}, |
||||
methods: { |
||||
close() |
||||
{ |
||||
this.snapshot= null; |
||||
this.$bvModal.hide("modal-2"); |
||||
}, |
||||
capture() { |
||||
this.canvas = this.$refs.canvas; |
||||
this.canvas.getContext("2d").drawImage(this.video, 0, 0, 640, 480); |
||||
|
||||
this.compteur++; |
||||
this.snapshot = {photo:this.canvas.toDataURL("image/png"), id:this.compteur++} |
||||
// this.captures.push(this.snapshot); |
||||
this.$emit('update:snapshot', this.snapshot); |
||||
this.$bvModal.hide("modal-2"); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
body: { |
||||
background-color: #F0F0F0; |
||||
} |
||||
/* #app { |
||||
text-align: center; |
||||
color: #2c3e50; |
||||
margin-top: 60px; |
||||
}*/ |
||||
#video { |
||||
background-color: #000000; |
||||
} |
||||
#canvas { |
||||
display: none; |
||||
} |
||||
li { |
||||
display: inline; |
||||
padding: 5px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,154 @@ |
||||
<template> |
||||
<div class="MenuNavBar"> |
||||
<b-navbar toggleable="lg" type="dark" variant="info" style="min-height:60px; padding: 0px 0px 0px 0px"> |
||||
|
||||
<b-navbar-brand class="nav-link d-flex align-items-center justify-content-center" @click="doLogin"> |
||||
<b-avatar variant="info" v-bind:src="img" size="3rem" > |
||||
</b-avatar> |
||||
</b-navbar-brand> |
||||
|
||||
<b-navbar-brand class="nav-link d-flex align-items-center justify-content-center" to="/temperature" > |
||||
{{$t('title')}} |
||||
</b-navbar-brand> |
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle> |
||||
<b-collapse id="nav-collapse" is-nav> |
||||
<b-navbar-nav> |
||||
<b-nav-item v-if="isAdmin" active-class="active" class="nav-link d-flex align-items-center justify-content-center" to="/users" >{{$t('user_title')}}</b-nav-item> |
||||
<b-nav-item active-class="active" class="nav-link d-flex align-items-center justify-content-center" @click="logout" >{{$t('logout')}}</b-nav-item> |
||||
</b-navbar-nav> |
||||
|
||||
</b-collapse> |
||||
|
||||
</b-navbar> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import { BNavbar, BNavbarBrand, BNavbarToggle } from 'bootstrap-vue' |
||||
import { BAvatar } from 'bootstrap-vue' |
||||
import UserService from "../services/UserService"; |
||||
import Vue from "vue"; |
||||
import axios from "axios"; |
||||
|
||||
Vue.component('b-avatar', BAvatar) |
||||
|
||||
export default { |
||||
name: "Menu", |
||||
components : |
||||
{ |
||||
BNavbar,BNavbarBrand, BNavbarToggle, BAvatar |
||||
}, |
||||
data:function(){ |
||||
return { |
||||
} |
||||
}, |
||||
computed : |
||||
{ |
||||
user(){ |
||||
return this.$store.state.user; |
||||
}, |
||||
img() |
||||
{ |
||||
return this.$store.state.user != null && this.$store.state.user.image != null ? |
||||
'http://localhost/image/' + this.$store.state.user.image : |
||||
''; |
||||
}, |
||||
isAdmin() { |
||||
return this.$store.state.roles.find(l => l.name == 'Administrators' && l.isActived) != null; |
||||
}, |
||||
isClient() { |
||||
return this.$store.state.roles.find(l => l.name == 'customer' && l.isActived) != null; |
||||
}, |
||||
isLivreur() { |
||||
return this.$store.state.roles.find(l => l.name == 'delivery' && l.isActived) != null; |
||||
}, |
||||
isManager() { |
||||
return this.$store.state.roles.find(l => l.name == 'manager' && l.isActived) != null; |
||||
}, |
||||
}, |
||||
mounted() { |
||||
let that = this; |
||||
UserService.initKeycloak( function () { |
||||
window.console.log("dologin"); |
||||
sessionStorage.setItem("react-token", UserService.getToken()); |
||||
sessionStorage.setItem("react-refresh-token", UserService.getRefreshToken()); |
||||
|
||||
let axiosConfig = { |
||||
withCredentials: true, |
||||
headers: { |
||||
'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"), |
||||
} |
||||
}; |
||||
window.console.log(process.env.VUE_APP_BACK_USER); |
||||
axios.get(process.env.VUE_APP_BACK_USER + "/api/users/bykeycloakid?guid=" + UserService.getUsername().sub, |
||||
axiosConfig |
||||
).then(result => { |
||||
that.$store.commit("updateUser", result.data); |
||||
}); |
||||
|
||||
axios.get(process.env.VUE_APP_BACK_USER + "/api/roles/bykeycloakid?keycloakid=" + UserService.getUsername().sub, |
||||
axiosConfig |
||||
).then(result => { |
||||
that.$store.commit("updateRole", result.data); |
||||
}); |
||||
|
||||
}, |
||||
function(){ |
||||
that.$store.commit("updateUser", null); |
||||
that.$store.commit("updateRole", []); |
||||
that.$router.push({path:"/"}); |
||||
}); |
||||
|
||||
}, |
||||
methods : { |
||||
logout: function () |
||||
{ |
||||
UserService.doLogout(); |
||||
sessionStorage.setItem("react-token", ""); |
||||
sessionStorage.setItem("react-refresh-token", ""); |
||||
|
||||
|
||||
}, |
||||
doLogin : function() |
||||
{ |
||||
|
||||
let that = this; |
||||
UserService.initKeycloak( function () { |
||||
window.console.log("dologin"); |
||||
sessionStorage.setItem("react-token", UserService.getToken()); |
||||
sessionStorage.setItem("react-refresh-token", UserService.getRefreshToken()); |
||||
|
||||
let axiosConfig = { |
||||
withCredentials: true, |
||||
headers: { |
||||
'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"), |
||||
|
||||
} |
||||
}; |
||||
|
||||
axios.get(process.env.VUE_APP_BACK_USER + "/api/users/bykeycloakid?guid=" + UserService.getUsername().sub, |
||||
axiosConfig |
||||
).then(result => { |
||||
that.$store.commit("updateUser", result.data); |
||||
}); |
||||
|
||||
axios.get(process.env.VUE_APP_BACK_USER + "/api/roles/bykeycloakid?keycloakid=" + UserService.getUsername().sub, |
||||
axiosConfig |
||||
).then(result => { |
||||
that.$store.commit("updateRole", result.data); |
||||
}); |
||||
|
||||
}, |
||||
UserService.doLogin()) |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,220 @@ |
||||
<template> |
||||
<b-container fluid id="temperature"> |
||||
<b-row style="padding-top: 10px"> |
||||
<b-col> |
||||
<b-avatar |
||||
v-b-tooltip.hover :title="$t('sub_title')" |
||||
variant="info" :src="image_avatar" |
||||
size="10rem" style="margin-right: 5px" |
||||
> |
||||
</b-avatar> |
||||
</b-col> |
||||
</b-row> |
||||
<b-row> |
||||
<b-col> |
||||
<label style="font-size: 10px;font-style: italic">{{message}}</label> |
||||
</b-col> |
||||
</b-row> |
||||
<b-row v-if="result != null"> |
||||
<b-col> |
||||
{{result.temperature | formatFloat}} {{$t('temperature_unit')}} |
||||
</b-col> |
||||
</b-row> |
||||
<b-row style="padding-top: 10px"> |
||||
<b-col cols="6" class="d-flex justify-content-start"> |
||||
{{$t('object_temperature')}} : {{received.Element | formatFloat}} {{$t('temperature_unit')}} |
||||
</b-col> |
||||
<b-col cols="6" class="d-flex justify-content-start"> |
||||
{{$t('ambient_temperature')}} : {{received.Ambient | formatFloat}} {{$t('temperature_unit')}} |
||||
</b-col> |
||||
<!-- <b-col cols="12" class="d-flex justify-content-start"> |
||||
Emissivité : {{received.Emissivity | formatFloat}} |
||||
</b-col> --> |
||||
</b-row> |
||||
<b-row v-if="isAuth"> |
||||
<test-chart |
||||
:options="options" |
||||
:styles="myStyles" |
||||
:chart-data="datacollection"></test-chart> |
||||
</b-row> |
||||
<b-row> |
||||
<b-col> |
||||
<b-button @click="acquireTemp" variant="danger" :disabled="acquirementInprogress" v-if="isAuth"> |
||||
Coviiiiid |
||||
<font-awesome-icon icon="question" /> |
||||
|
||||
<b-spinner v-if="acquirementInprogress" type="border" label="chargement en cours..."/> |
||||
</b-button> |
||||
</b-col> |
||||
</b-row> |
||||
|
||||
</b-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import axios from "axios"; |
||||
import TestChart from "./TestChart"; |
||||
import Vue from "vue"; |
||||
|
||||
Vue.use(TestChart); |
||||
|
||||
export default { |
||||
name: 'Temperature', |
||||
components: { |
||||
TestChart |
||||
}, |
||||
|
||||
props: { |
||||
msg: String |
||||
}, |
||||
data:function(){ |
||||
return { |
||||
datacollection: {}, |
||||
received : {}, |
||||
image: require('@/assets/coviiiiiid.jpg'), |
||||
acquirementInprogress:false, |
||||
result: null, |
||||
x:'', |
||||
options: { |
||||
responsive: true, |
||||
maintainAspectRatio: false, |
||||
}, |
||||
roles:[], |
||||
} |
||||
}, |
||||
computed: { |
||||
myStyles() { |
||||
return { |
||||
height: `300px`, |
||||
width:'100%', |
||||
position: 'relative' |
||||
} |
||||
}, |
||||
message() |
||||
{ |
||||
if(this.result == null) |
||||
return ""; |
||||
else |
||||
return this.result.message; |
||||
}, |
||||
image_avatar() |
||||
{ |
||||
if(this.result == null) |
||||
{ |
||||
if(this.acquirementInprogress) |
||||
return require('@/assets/waiting.jpg'); |
||||
else |
||||
return require('@/assets/coviiiiiid.jpg'); |
||||
} |
||||
else |
||||
{ |
||||
|
||||
if(this.result.fever === null) |
||||
return require('@/assets/out_of_range.jpg'); |
||||
else if(this.result.fever) |
||||
return require('@/assets/fever_ok.jpg'); |
||||
else |
||||
return require('@/assets/coviiiiiid.jpg'); |
||||
|
||||
|
||||
} |
||||
}, |
||||
isAuth() { |
||||
|
||||
return this.$store.state.roles !== undefined && this.$store.state.roles.find(l => l.isActived) != null; |
||||
}, |
||||
}, |
||||
filters: { |
||||
formatFloat : function(value) { |
||||
if (value) { |
||||
return parseFloat(value).toFixed(2); |
||||
} |
||||
} |
||||
}, |
||||
created () { |
||||
// Listen to score changes coming from SignalR events |
||||
this.$questionHub.$on('received-temperature', this.onChanged) |
||||
}, |
||||
mounted() { |
||||
this.fillData (); |
||||
|
||||
|
||||
}, |
||||
methods : { |
||||
fillData () { |
||||
this.datacollection = { |
||||
labels: [], |
||||
datasets: [ |
||||
{ |
||||
label: 'Température objet', |
||||
backgroundColor: '#f87979', |
||||
data: [] |
||||
}] |
||||
} |
||||
}, |
||||
|
||||
onChanged: function(msg) { |
||||
this.received = msg; |
||||
|
||||
let datacollection = { |
||||
labels: [], |
||||
datasets: [ |
||||
{ |
||||
label: 'Température objet', |
||||
backgroundColor: '#f87979', |
||||
data: [] |
||||
}] |
||||
} |
||||
|
||||
if(this.datacollection.labels.length > 30) |
||||
{ |
||||
this.datacollection.labels.shift(); |
||||
this.datacollection.datasets[0].data.shift(); |
||||
} |
||||
|
||||
|
||||
datacollection.labels.push(...this.datacollection.labels); |
||||
datacollection.datasets[0].data.push(...this.datacollection.datasets[0].data); |
||||
|
||||
datacollection.labels.push(this.x); |
||||
datacollection.datasets[0].data.push(this.received.Element); |
||||
this.datacollection = datacollection; |
||||
|
||||
}, |
||||
acquireTemp : async function() |
||||
{ |
||||
try { |
||||
this.acquirementInprogress = true; |
||||
this.result = null; |
||||
let result = await axios.get(process.env.VUE_APP_BACK_URL + "/api/temperature"); |
||||
this.result = result.data; |
||||
} |
||||
finally { |
||||
this.acquirementInprogress = false; |
||||
} |
||||
} |
||||
}, |
||||
beforeDestroy () { |
||||
// Make sure to cleanup SignalR event handlers when removing the component |
||||
this.$questionHub.$off('received-temperature', this.onChanged) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||
<style scoped> |
||||
h3 { |
||||
margin: 40px 0 0; |
||||
} |
||||
ul { |
||||
list-style-type: none; |
||||
padding: 0; |
||||
} |
||||
li { |
||||
display: inline-block; |
||||
margin: 0 10px; |
||||
} |
||||
a { |
||||
color: #42b983; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,17 @@ |
||||
import { Line, mixins } from 'vue-chartjs' |
||||
const { reactiveProp } = mixins |
||||
|
||||
export default { |
||||
extends: Line, |
||||
mixins: [reactiveProp], |
||||
props: ['options'], |
||||
options: { |
||||
responsive: true, |
||||
maintainAspectRatio: false, |
||||
}, |
||||
mounted () { |
||||
// this.chartData is created in the mixin.
|
||||
// If you want to pass options please create a local options object
|
||||
this.renderChart(this.chartData, this.options) |
||||
} |
||||
} |
||||
@ -0,0 +1,284 @@ |
||||
<template> |
||||
<b-container fluid id="ListeUser" > |
||||
<div class="headerUser" variant="dark"> |
||||
<b-row align-h="center" |
||||
style="padding-top: 15px;" |
||||
> |
||||
<h2>{{$t('user_title')}} </h2> |
||||
</b-row> |
||||
|
||||
<b-row align-v="center"> |
||||
<b-col cols="8" lg="3" > |
||||
<b-form-input v-model="search" v-bind:placeholder="$t('search')" style="max-width: 400px"></b-form-input> |
||||
</b-col> |
||||
<b-col cols="1" lg="1"> |
||||
<b-button @click="display"> |
||||
<font-awesome-icon icon="search" /> |
||||
</b-button> |
||||
</b-col> |
||||
</b-row> |
||||
|
||||
<b-row> |
||||
<router-link |
||||
:to="{name: 'User', params: {id: 0 } }" |
||||
v-slot="{ href, route, navigate}"> |
||||
<b-button :href="href" @click="navigate" class="Mobilebutton" |
||||
style="width:100%"> |
||||
<font-awesome-icon icon="plus-circle" /> |
||||
</b-button> |
||||
</router-link> |
||||
</b-row> |
||||
|
||||
</div> |
||||
<div style="padding-top: 135px" class="MobileEntete"> |
||||
|
||||
<b-row v-if="!isLoaded" class="text-center d-flex justify-content-center"> |
||||
<b-spinner type="border" label="chargement en cours..."></b-spinner> |
||||
</b-row> |
||||
|
||||
<b-row v-if="isLoaded && users.length > 0" > |
||||
<b-col cols="12" md="4" lg="3" v-for="user in users" v-bind:key="user.id" |
||||
style="padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px"> |
||||
<div> |
||||
<b-card v-if="user.isNew == undefined" no-body class="overflow-hidden cardUser" |
||||
> |
||||
<b-row no-gutters style="height: 200px" > |
||||
<b-col md="8" cols="7" class="border-right" style=";background-color: #EEEEEE"> |
||||
<b-row align-h="center" v-if="user.image !== null"> |
||||
<router-link |
||||
:to="{name: 'User', params: {id: user.id } }" |
||||
v-slot="{ href, route, navigate}" |
||||
v-if="user.image !== '' && user.image !== null" |
||||
> |
||||
<div class="mb-2 imageUser"> |
||||
<b-avatar :href="href" @click="navigate" |
||||
:title="user.nom + user.prenom" |
||||
variant="light" |
||||
v-bind:src=" 'http://localhost/image/' + user.image" size="6rem" |
||||
> |
||||
</b-avatar> |
||||
</div> |
||||
</router-link> |
||||
</b-row> |
||||
<b-row align-h="center"> |
||||
<b-col> |
||||
<h4> {{user.prenom}} {{user.nom}}</h4> |
||||
</b-col> |
||||
</b-row> |
||||
<b-row v-for="role in user.roles" v-bind:key="role.id"> |
||||
<b-col class="d-flex justify-content-center align-items-center"> |
||||
<h5> {{role.libelle}}</h5> |
||||
</b-col> |
||||
</b-row> |
||||
</b-col> |
||||
<b-col md="4" cols="5" class="d-flex flex-column justify-content-between"> |
||||
|
||||
<b-row > |
||||
<b-col style="padding-bottom: 15px; padding-top: 15px"> |
||||
<router-link |
||||
:to="{name: 'User', params: {id: user.id } }" |
||||
v-slot="{ href, route, navigate}" |
||||
> |
||||
|
||||
<b-button :href="href" @click="navigate" class="actionButton" > |
||||
<font-awesome-icon icon="edit" /> |
||||
{{$t('edit')}}</b-button> |
||||
</router-link> |
||||
</b-col> |
||||
</b-row> |
||||
<b-row> |
||||
<b-col style="padding-bottom: 15px; padding-top: 15px"> |
||||
<b-button @click="deleteUser(user)" class="actionButton" > |
||||
<font-awesome-icon icon="trash" /> |
||||
{{$t('delete')}} |
||||
</b-button> |
||||
</b-col> |
||||
</b-row> |
||||
</b-col> |
||||
</b-row> |
||||
</b-card> |
||||
<b-card v-if="user.isNew" no-body |
||||
class="overflow-hidden rounded Desktopbutton cardUser"> |
||||
<router-link |
||||
:to="{name: 'User', params: {id: 0 } }" |
||||
v-slot="{ href, route, navigate}"> |
||||
<b-button :href="href" @click="navigate" |
||||
style="width:100%; height: 100%" |
||||
class="d-flex justify-content-center align-items-center"> |
||||
<font-awesome-icon icon="plus-circle" style="width: 64px; height:64px" /> |
||||
</b-button> |
||||
</router-link> |
||||
</b-card> |
||||
</div> |
||||
</b-col> |
||||
|
||||
<infinite-loading @infinite="infiniteHandler" :identifier="infiniteId"> |
||||
<div slot="no-more"></div> |
||||
<div slot="no-results"></div> |
||||
</infinite-loading> |
||||
</b-row> |
||||
<b-row class="mb-4" v-else> |
||||
<p v-if="isLoaded">{{$t('user_list_empty')}} </p> |
||||
</b-row> |
||||
</div> |
||||
</b-container> |
||||
|
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import axios from 'axios'; |
||||
import InfiniteLoading from 'vue-infinite-loading'; |
||||
|
||||
export default { |
||||
name: "ListeUser", |
||||
props:['value'], |
||||
components: { |
||||
InfiniteLoading, |
||||
}, |
||||
data:function(){ |
||||
return { |
||||
page: 1, |
||||
pageSize:4, |
||||
search:'', |
||||
infiniteId: + new Date(), |
||||
users: [ |
||||
], |
||||
isLoaded: false |
||||
} |
||||
}, |
||||
methods : |
||||
{ |
||||
infiniteHandler : function($state) |
||||
{ |
||||
let that = this; |
||||
let axiosConfig = { |
||||
withCredentials: true, |
||||
headers:{'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"), |
||||
} |
||||
}; |
||||
|
||||
axios.get(process.env.VUE_APP_BACK_USER + "/api/users?page=" + that.page |
||||
+ "&pageSize=" + that.pageSize |
||||
+ "&search=" + that.search, |
||||
axiosConfig |
||||
).then(result => { |
||||
if (result.data.length) { |
||||
this.page += 1; |
||||
this.users.push(...result.data); |
||||
$state.loaded(); |
||||
} else { |
||||
$state.complete(); |
||||
} |
||||
}); |
||||
}, |
||||
display : async function() |
||||
{ |
||||
this.isLoaded = false; |
||||
|
||||
let axiosConfig = { |
||||
withCredentials: true, |
||||
headers:{'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"), |
||||
} |
||||
}; |
||||
|
||||
this.page = 1; |
||||
|
||||
let result = await axios.get(process.env.VUE_APP_BACK_USER + "/api/users?page=" + this.page |
||||
+ "&pageSize=" + this.pageSize |
||||
+ "&search=" + this.search, |
||||
axiosConfig |
||||
); |
||||
|
||||
this.isLoaded = true; |
||||
this.page += 1; |
||||
this.users = [ {isNew:true}]; |
||||
this.users.push(...result.data); |
||||
this.infiniteId += 1; |
||||
}, |
||||
|
||||
deleteUser : function(user) |
||||
{ |
||||
let that = this; |
||||
|
||||
let axiosConfig = { |
||||
withCredentials: true, |
||||
headers:{'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"), |
||||
} |
||||
}; |
||||
this.$bvModal.msgBoxConfirm('Vous allez supprimer l\'utilisateur \'' + user.nom + '\'. Voulez-vous continuer ?', |
||||
{ |
||||
title: 'Suppression Utilisateur', |
||||
size: 'sm', |
||||
buttonSize: 'sm', |
||||
okVariant: 'success', |
||||
okTitle: 'Oui', |
||||
cancelVariant: 'danger', |
||||
cancelTitle: 'Non', |
||||
footerClass: 'p-2', |
||||
hideHeaderClose: false, |
||||
centered: true |
||||
}) |
||||
.then(value => { |
||||
if(value) { |
||||
axios.delete(process.env.VUE_APP_BACK_USER+ "/api/users/" + user.id, |
||||
axiosConfig |
||||
).then(() => { |
||||
that.display(); |
||||
}); |
||||
} |
||||
}) |
||||
.catch(err => { |
||||
window.console.error(err.messages); |
||||
}) |
||||
|
||||
} |
||||
}, |
||||
mounted() { |
||||
this.display(); |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.card-body |
||||
{ |
||||
padding-right: 0px; |
||||
padding-left: 0px; |
||||
padding-top: 0px; |
||||
} |
||||
.cardUser { |
||||
max-width: 540px; |
||||
height: 175px |
||||
} |
||||
.actionButton{ |
||||
width:125px |
||||
} |
||||
|
||||
.imageUser { |
||||
width:96px; |
||||
height:96px |
||||
} |
||||
|
||||
.headerUser { |
||||
position:fixed; /* fixing the position takes it out of html flow - knows |
||||
nothing about where to locate itself except by browser |
||||
coordinates */ |
||||
left:0; /* top left corner should start at leftmost spot */ |
||||
/*top:0; /* top left corner should start at topmost spot */ |
||||
width:100vw; /* take up the full browser width */ |
||||
z-index:50; /* high z index so other content scrolls underneath */ |
||||
height: 100px; |
||||
background-color: white; |
||||
} |
||||
@media (min-width: 50em) { |
||||
.Desktopbutton { display: block; } |
||||
.Mobilebutton { display: none; } |
||||
} |
||||
|
||||
@media (max-width: 50em) { |
||||
.Desktopbutton { display: none; } |
||||
.Mobilebutton { display: block; } |
||||
.MobileEntete {margin-top: 35px;} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,325 @@ |
||||
<template> |
||||
|
||||
<b-container fluid id="User" > |
||||
<b-row class="d-flex justify-content-center" style="padding-top: 15px;"> |
||||
<h2>{{titre}} </h2> |
||||
</b-row> |
||||
|
||||
<b-row v-if="!isLoaded" class="text-center d-flex justify-content-center"> |
||||
<b-spinner type="border" label="chargement en cours..."></b-spinner> |
||||
</b-row> |
||||
|
||||
<b-row v-if="isLoaded && user !== null"> |
||||
<b-col cols="3" md="2"> |
||||
<b-row align-v="center"> |
||||
<b-col > |
||||
<img v-if="hasImage" loading="lazy" v-bind:src="img" style="width:128px;height:128px"/> |
||||
</b-col> |
||||
</b-row> |
||||
<b-row align-v="center"> |
||||
<b-col class="d-flex justify-content-center align-items-center"> |
||||
<b-button v-if="hasImage" variant="danger" class="Desktop" @click="clearImage">{{$t('clear')}}</b-button> |
||||
</b-col> |
||||
</b-row> |
||||
</b-col> |
||||
<b-col cols="9"> |
||||
<b-row align-v="center" style="padding-top: 5px"> |
||||
<b-col md="1" cols="4"> |
||||
<label>{{$t('user_detail_prenom')}}</label> |
||||
</b-col> |
||||
<b-col md="5" cols="8"> |
||||
<b-form-input v-model="user.prenom" |
||||
:state="validFirstName" |
||||
v-bind:placeholder="$t('user_detail_prenom')"></b-form-input> |
||||
</b-col> |
||||
<b-col md="1" cols="4"> |
||||
<label>{{$t('user_detail_nom')}}</label> |
||||
</b-col> |
||||
<b-col md="5" cols="8"> |
||||
<b-form-input number v-model="user.nom" |
||||
:state="validName" |
||||
v-bind:placeholder="$t('user_detail_nom')"></b-form-input> |
||||
</b-col> |
||||
</b-row> |
||||
<b-row> |
||||
<b-col md="1" cols="4"> |
||||
<label>{{$t('user_detail_username')}}</label> |
||||
</b-col> |
||||
<b-col md="5" cols="8"> |
||||
<b-form-input v-model="user.userName" |
||||
:state="validUserName" |
||||
v-bind:placeholder="$t('user_detail_username')"></b-form-input> |
||||
</b-col> |
||||
<b-col md="1" cols="4"> |
||||
<label>{{$t('user_detail_mail')}}</label> |
||||
</b-col> |
||||
<b-col md="5" cols="8"> |
||||
<b-form-input mail v-model="user.email" v-bind:placeholder="$t('user_detail_mail')"></b-form-input> |
||||
</b-col> |
||||
</b-row> |
||||
<b-row align-v="center" style="padding-top: 5px"> |
||||
<b-col md="1" cols="4"> |
||||
<label> {{$t('user_detail_id_keycloak')}}</label> |
||||
</b-col> |
||||
<b-col md="5" cols="8"> |
||||
<b-form-input v-model="user.keycloakId" v-bind:placeholder="$t('user_detail_id_keycloak')"></b-form-input> |
||||
</b-col> |
||||
<b-col md="1" class="Desktop"> |
||||
<label>{{$t('user_detail_image')}}</label> |
||||
</b-col> |
||||
<b-col md="5" class="Desktop"> |
||||
<b-form-file |
||||
v-model="file" |
||||
plain |
||||
></b-form-file> |
||||
</b-col> |
||||
</b-row> |
||||
<b-row class="d-flex justify-content-center align-items-center" style="padding-top: 10px"> |
||||
<h5>{{$t('user_detail_roles')}}</h5> |
||||
</b-row> |
||||
<b-row> |
||||
<b-col> |
||||
<b-row v-for="role in roles" v-bind:key="role.id"> |
||||
<b-col> |
||||
{{role.name}} |
||||
</b-col> |
||||
<b-col> |
||||
<toggle-button |
||||
v-model="role.isActived" |
||||
:value="false" |
||||
:font-size="16" |
||||
:sync="true" |
||||
/> |
||||
</b-col> |
||||
</b-row> |
||||
|
||||
</b-col> |
||||
</b-row> |
||||
|
||||
</b-col> |
||||
</b-row> |
||||
<b-row v-if="isLoaded" > |
||||
<b-col> |
||||
<router-link |
||||
:to="{name: 'ListeUser' }" |
||||
v-slot="{ href, route, navigate}" |
||||
> |
||||
<b-button :href="href" @click="navigate" variant="danger"><font-awesome-icon icon="arrow-alt-circle-left" /> {{$t('back')}}</b-button> |
||||
</router-link> |
||||
</b-col> |
||||
<b-col> |
||||
<photo v-bind:snapshot.sync="photo"></photo> |
||||
</b-col> |
||||
<b-col> |
||||
<b-button @click="save" v-bind:disabled="!isValid"><font-awesome-icon icon="save" /> {{$t('save')}}</b-button> |
||||
</b-col> |
||||
<b-col> |
||||
<b-button @click="saveAndQuit" variant="success" v-bind:disabled="!isValid"><font-awesome-icon icon="check" /> {{$t('valid')}}</b-button> |
||||
</b-col> |
||||
</b-row> |
||||
</b-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import axios from 'axios'; |
||||
import photo from '../Capture/CapturePhoto'; |
||||
import Vue from "vue"; |
||||
|
||||
Vue.use(photo); |
||||
|
||||
const base64Encode = data => |
||||
new Promise((resolve, reject) => { |
||||
const reader = new FileReader(); |
||||
reader.readAsDataURL(data); |
||||
reader.onload = () => resolve(reader.result); |
||||
reader.onerror = error => reject(error); |
||||
}); |
||||
|
||||
export default { |
||||
name: "User", |
||||
components: { photo}, |
||||
data:function(){ |
||||
return { |
||||
user: null, |
||||
id: null, |
||||
componentKey:0, |
||||
file : null, |
||||
photo: null, |
||||
img:null, |
||||
roles: null, |
||||
isLoaded : false |
||||
} |
||||
}, |
||||
computed: { |
||||
|
||||
isValid() |
||||
{ |
||||
return this.validFirstName && this.validName && this.validUserName; |
||||
}, |
||||
validFirstName(){ |
||||
return this.user != null && this.user.prenom !== '' && this.user.prenom !== null; |
||||
}, |
||||
validName(){ |
||||
|
||||
return this.user != null && this.user.nom !== '' && this.user.nom !== null; |
||||
}, |
||||
validUserName(){ |
||||
|
||||
return this.user != null && this.user.userName !== '' && this.user.userName !== null && this.user.userName !== undefined; |
||||
}, |
||||
hasImage() { |
||||
return !!this.img; |
||||
}, |
||||
titre(){ |
||||
return (this.user != null) ? this.user.prenom + ' ' + this.user.nom : this.$i18n.t('user_detail_title'); |
||||
} |
||||
}, |
||||
watch : |
||||
{ |
||||
file : function (newValue, oldValue) { |
||||
if (newValue !== oldValue) { |
||||
if (newValue) { |
||||
base64Encode(newValue) |
||||
.then(value => { |
||||
this.user.image= newValue.name; |
||||
this.img = value; |
||||
}) |
||||
.catch(() => { |
||||
this.img = null; |
||||
}); |
||||
} else { |
||||
this.img = null; |
||||
} |
||||
} |
||||
}, |
||||
photo: function(val) |
||||
{ |
||||
this.img =val.photo; |
||||
}, |
||||
|
||||
}, |
||||
methods : |
||||
{ |
||||
clearImage() { |
||||
this.img = null; |
||||
this.file = null; |
||||
this.photo = null; |
||||
|
||||
this.user.image="user_unknown.png"; |
||||
}, |
||||
saveAndQuit : async function() |
||||
{ |
||||
await this.save(); |
||||
await this.$router.push({name: 'ListeUser'}); |
||||
}, |
||||
save : async function() |
||||
{ |
||||
let that = this; |
||||
|
||||
let axiosConfig = { |
||||
withCredentials: true, |
||||
headers:{'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"), |
||||
} |
||||
}; |
||||
let result = await axios.put(process.env.VUE_APP_BACK_USER + "/api/users/" + this.id, this.user, axiosConfig); |
||||
that.user = result.data; |
||||
let data = new FormData(); |
||||
|
||||
if(that.file !== null) { |
||||
data.set('file', that.file) |
||||
await axios.post(process.env.VUE_APP_BACK_USER + '/api/users/' + that.id + '/loadimage', data, { |
||||
headers: { |
||||
'Content-Type': 'multipart/form-data', |
||||
'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"), |
||||
} |
||||
}); |
||||
} |
||||
else if(that.photo != null) |
||||
{ |
||||
data.set('base64', that.img.split(",")[1]); |
||||
await axios.post(process.env.VUE_APP_BACK_USER + "/api/users/" + that.id + '/loadimage64',data, |
||||
{ |
||||
headers: { |
||||
'Content-Type': 'multipart/form-data', |
||||
'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"), |
||||
} |
||||
} |
||||
); |
||||
that.componentKey += 1; |
||||
} |
||||
|
||||
await axios.put(process.env.VUE_APP_BACK_USER + "/api/roles/" + this.user.keycloakId, this.roles, axiosConfig); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.id = this.$route.params.id; |
||||
|
||||
let axiosConfig = { |
||||
withCredentials: true, |
||||
headers: { |
||||
'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"), |
||||
} |
||||
}; |
||||
this.isLoaded = false; |
||||
if(this.id !== 0) { |
||||
axios.get(process.env.VUE_APP_BACK_USER + "/api/users/" + this.id, |
||||
axiosConfig |
||||
).then(result => { |
||||
this.user = result.data; |
||||
this.img = 'http://localhost/image/' + this.user.image; |
||||
|
||||
axios.get(process.env.VUE_APP_BACK_USER + "/api/roles/bykeycloakid?keycloakid=" + this.user.keycloakId, |
||||
axiosConfig |
||||
).then(result => { |
||||
this.isLoaded = true; |
||||
this.roles = result.data; |
||||
}); |
||||
|
||||
}); |
||||
} |
||||
else |
||||
{ |
||||
this.user = {id:0, nom:'', prenom:'', keycloakId:''} |
||||
|
||||
axios.get(process.env.VUE_APP_BACK_USER + "/api/roles", |
||||
axiosConfig |
||||
).then(result => { |
||||
this.isLoaded = true; |
||||
this.roles = result.data; |
||||
}); |
||||
} |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.row |
||||
{ |
||||
padding-top: 5px |
||||
} |
||||
.card-body |
||||
{ |
||||
padding-right: 0px; |
||||
padding-left: 0px; |
||||
padding-top: 0px; |
||||
padding-bottom: 0px; |
||||
} |
||||
|
||||
.collapsed > .when-opened, |
||||
:not(.collapsed) > .when-closed { |
||||
display: none; |
||||
} |
||||
|
||||
@media (min-width: 50em) { |
||||
.Desktop { display: block; } |
||||
.Mobile { display: none; } |
||||
} |
||||
|
||||
@media (max-width: 50em) { |
||||
.Desktop { display: none; } |
||||
.Mobile { display: block; } |
||||
} |
||||
|
||||
|
||||
</style> |
||||
@ -0,0 +1,38 @@ |
||||
export default { |
||||
en: { |
||||
}, |
||||
'fr-FR': { |
||||
edit:"Editer", |
||||
delete:"Supprimer", |
||||
add:"ajouter", |
||||
logout:"Logout", |
||||
login:"Login", |
||||
save:"Sauvegarder", |
||||
back:"Retour", |
||||
valid:"Valider", |
||||
unload:"Décharge", |
||||
search:"Recherche", |
||||
clear:"Effacer", |
||||
|
||||
title:"Coviiiid", |
||||
sub_title:"Coviiiid !!!!! Je sais où tu t'caches ! Viens là que j'te bute !", |
||||
object_temperature : "T° objet", |
||||
ambient_temperature : "T° ambiante", |
||||
emissivity:"Emissivité", |
||||
temperature_unit : "°C", |
||||
|
||||
user_title : "Utilisateurs", |
||||
user_list_empty: "Aucun utilisateur", |
||||
|
||||
user_detail_title: "Utilisateur", |
||||
user_detail_nom: "Nom", |
||||
user_detail_prenom: "Prénom", |
||||
user_detail_image:"Image", |
||||
user_detail_id_keycloak:'idKeycloak', |
||||
user_detail_username : 'login', |
||||
user_detail_mail : 'Email', |
||||
user_detail_roles : 'Rôles', |
||||
user_detail_photo:"photo", |
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1,79 @@ |
||||
import Vue from 'vue' |
||||
import App from './App.vue' |
||||
import router from './router/index' |
||||
import VueI18n from 'vue-i18n' |
||||
import messages from './lang/messages' |
||||
import { library } from '@fortawesome/fontawesome-svg-core' |
||||
import { fas } from '@fortawesome/free-solid-svg-icons' |
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' |
||||
import axios from "axios"; |
||||
import UserService from "./services/UserService"; |
||||
|
||||
import QuestionHub from './services/temperature-hub' |
||||
import ToggleButton from 'vue-js-toggle-button' |
||||
import Vuex from 'vuex' |
||||
|
||||
|
||||
library.add(fas) |
||||
Vue.component('font-awesome-icon', FontAwesomeIcon) |
||||
Vue.config.productionTip = false; |
||||
Vue.use(VueI18n) |
||||
Vue.use(QuestionHub); |
||||
Vue.use(ToggleButton); |
||||
|
||||
let locale = navigator.language; |
||||
const i18n = new VueI18n({ |
||||
fallbackLocale: 'fr', |
||||
locale: locale, |
||||
messages |
||||
}) |
||||
|
||||
Vue.use(Vuex) |
||||
const store = new Vuex.Store({ |
||||
state : { |
||||
roles: [], |
||||
user:null, |
||||
}, |
||||
mutations: { |
||||
updateRole (state, roles) { |
||||
this.state.roles = roles; |
||||
}, |
||||
updateUser (state, user) { |
||||
this.state.user = user; |
||||
} |
||||
|
||||
} |
||||
}) |
||||
|
||||
new Vue({ |
||||
router, |
||||
i18n, |
||||
store, |
||||
mounted(){ |
||||
axios.interceptors.response.use( (response) => { |
||||
// Return a successful response back to the calling service
|
||||
return response; |
||||
}, (error) => { |
||||
// Return any error which is not due to authentication back to the calling service
|
||||
if (error.response.status !== 401) { |
||||
return new Promise((resolve, reject) => { |
||||
reject(error); |
||||
}); |
||||
} |
||||
else if (error.response.status === 401) { |
||||
return new Promise((resolve, reject) => { |
||||
UserService.doLogout(); |
||||
UserService.initKeycloak( function () { |
||||
window.console.log("main"); |
||||
sessionStorage.setItem("react-token", UserService.getToken()); |
||||
sessionStorage.setItem("react-refresh-token", UserService.getRefreshToken()); |
||||
}, UserService.doLogin); |
||||
reject(error); |
||||
}); |
||||
} |
||||
|
||||
|
||||
}) |
||||
}, |
||||
render: h => h(App), |
||||
}).$mount('#app') |
||||
@ -0,0 +1,37 @@ |
||||
import Vue from 'vue' |
||||
import Router from 'vue-router' |
||||
import Temperature from "../components/Temperature"; |
||||
import User from "../components/User/User"; |
||||
import ListeUser from "../components/User/ListeUser"; |
||||
|
||||
Vue.use(Router) |
||||
|
||||
export default new Router({ |
||||
routes: [ |
||||
{ |
||||
path: '*', |
||||
name: 'Temperature', |
||||
component: Temperature |
||||
}, |
||||
{ |
||||
path: '/', |
||||
name: 'Temperature', |
||||
component: Temperature |
||||
}, |
||||
{ |
||||
path: '/temperature', |
||||
name: 'Temperature', |
||||
component: Temperature |
||||
}, |
||||
{ |
||||
path: '/user/:id', |
||||
name: 'User', |
||||
component: User |
||||
}, |
||||
{ |
||||
path: '/users', |
||||
name: 'ListeUser', |
||||
component: ListeUser |
||||
}, |
||||
] |
||||
}) |
||||
@ -0,0 +1,51 @@ |
||||
import Keycloak from "keycloak-js"; |
||||
|
||||
const _kc = new Keycloak('/keycloak.json'); |
||||
|
||||
/** |
||||
* Initializes Keycloak instance and calls the provided callback function if successfully authenticated. |
||||
* |
||||
* @param onAuthenticatedCallback |
||||
*/ |
||||
const initKeycloak = (onAuthenticatedCallback, onUnAuthentificatedCallback) => { |
||||
_kc.init({ |
||||
onLoad: 'check-sso', |
||||
flow: 'implicit', |
||||
promiseType: 'native', |
||||
}) |
||||
.then((authenticated) => { |
||||
if (authenticated) { |
||||
window.console.info("Philiiiippe!"); |
||||
onAuthenticatedCallback(); |
||||
} else { |
||||
window.console.warn("not authenticated!"); |
||||
onUnAuthentificatedCallback(); |
||||
} |
||||
}) |
||||
}; |
||||
|
||||
const doLogin = _kc.login; |
||||
|
||||
const doLogout = _kc.logout; |
||||
|
||||
const getToken = () => _kc.token; |
||||
|
||||
const getRefreshToken = () => _kc.refreshToken; |
||||
|
||||
const updateToken = (successCallback) => { |
||||
return _kc.updateToken(5) |
||||
.then(successCallback) |
||||
.catch(doLogin) |
||||
}; |
||||
|
||||
const getUsername = () => _kc.tokenParsed; |
||||
|
||||
export default { |
||||
initKeycloak, |
||||
doLogin, |
||||
doLogout, |
||||
getToken, |
||||
getRefreshToken, |
||||
updateToken, |
||||
getUsername, |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
import axios from 'axios'; |
||||
import { Promise } from "es6-promise"; |
||||
|
||||
|
||||
export default () => { |
||||
|
||||
axios.interceptors.response.use( (response) => { |
||||
// Return a successful response back to the calling service
|
||||
console.log(response); |
||||
return response; |
||||
}, (error) => { |
||||
console.log(error); |
||||
// Return any error which is not due to authentication back to the calling service
|
||||
if (error.response.status !== 401) { |
||||
return new Promise((resolve, reject) => { |
||||
reject(error); |
||||
}); |
||||
} |
||||
}) |
||||
} |
||||
Loading…
Reference in new issue