459 lines
13 KiB
Vue
459 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<v-card v-if="user" :loading="loading" style="margin-top: 3px">
|
|
<v-card-title>{{ user.firstname }} {{ user.lastname }}</v-card-title>
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="12" sm="6">
|
|
<v-text-field
|
|
outlined
|
|
label="Vornamen"
|
|
:placeholder="user.firstname"
|
|
v-model="firstname"
|
|
readonly
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" sm="6">
|
|
<v-text-field
|
|
outlined
|
|
label="Nachname"
|
|
:placeholder="user.lastname"
|
|
v-model="lastname"
|
|
readonly
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" sm="6">
|
|
<v-text-field
|
|
outlined
|
|
label="Benutzername"
|
|
:placeholder="user.username"
|
|
v-model="username"
|
|
readonly
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" sm="6">
|
|
<v-text-field
|
|
ref="mail"
|
|
outlined
|
|
label="E-Mail"
|
|
:placeholder="user.mail"
|
|
v-model="mail"
|
|
readonly
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" sm="6">
|
|
<v-text-field
|
|
outlined
|
|
label="neues Password"
|
|
type="password"
|
|
v-model="password"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" sm="6">
|
|
<v-form ref="newPassword">
|
|
<v-text-field
|
|
ref="password"
|
|
v-model="controlPassword"
|
|
outlined
|
|
label="neues Password bestätigen"
|
|
type="password"
|
|
:disabled="!password"
|
|
:rules="[equal_password]"
|
|
/>
|
|
</v-form>
|
|
</v-col>
|
|
</v-row>
|
|
<v-divider />
|
|
<v-row>
|
|
<v-col cols="12" sm="4">
|
|
<v-text-field
|
|
outlined
|
|
label="Sperrlimit"
|
|
readonly
|
|
:value="(user.limit / 100).toFixed(2).toString() + '€'"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" sm="4">
|
|
<v-combobox
|
|
outlined
|
|
label="Sperrstatus"
|
|
v-model="lock"
|
|
append-icon
|
|
readonly
|
|
>
|
|
<template v-slot:selection="data">
|
|
<v-chip :color="lockColor">
|
|
{{ data.item }}
|
|
</v-chip>
|
|
</template>
|
|
</v-combobox>
|
|
</v-col>
|
|
<v-col cols="12" sm="4">
|
|
<v-combobox
|
|
outlined
|
|
label="Autosperre"
|
|
v-model="autoLock"
|
|
readonly
|
|
append-icon
|
|
>
|
|
<template v-slot:selection="data">
|
|
<v-chip :color="autoLockColor">
|
|
{{ data.item }}
|
|
</v-chip>
|
|
</template>
|
|
</v-combobox>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col v-bind:class="{ fulllineText: isFulllineText }">
|
|
<v-combobox
|
|
outlined
|
|
multiple
|
|
label="Gruppen"
|
|
readonly
|
|
v-model="user.group"
|
|
append-icon
|
|
>
|
|
<template v-slot:selection="data">
|
|
<v-icon class="ma-2">{{
|
|
data.item === 'user'
|
|
? person
|
|
: data.item === 'bar'
|
|
? bar
|
|
: data.item === 'moneymaster'
|
|
? finanzer
|
|
: data.item === 'gastro'
|
|
? gastro
|
|
: ''
|
|
}}</v-icon>
|
|
</template>
|
|
</v-combobox>
|
|
</v-col>
|
|
<v-col v-bind:class="{ fulllineText: isFulllineText }">
|
|
<v-text-field
|
|
outlined
|
|
:value="computeStatus"
|
|
readonly
|
|
label="Mitgliedsstatus"
|
|
/>
|
|
</v-col>
|
|
<v-col v-bind:class="{ fulllineText: isFulllineText }">
|
|
<v-text-field
|
|
outlined
|
|
:value="user.voting ? 'ja' : 'nein'"
|
|
readonly
|
|
label="Stimmrecht"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col v-bind:class="{ fulllineText: isFulllineText }">
|
|
<v-combobox
|
|
chips
|
|
outlined
|
|
multiple
|
|
label="Arbeitsgruppen"
|
|
readonly
|
|
v-model="user.workgroups"
|
|
item-value="id"
|
|
item-text="name"
|
|
append-icon
|
|
>
|
|
<template v-slot:selection="data">
|
|
<v-chip>{{ data.item.name }}</v-chip>
|
|
</template>
|
|
</v-combobox>
|
|
</v-col>
|
|
</v-row>
|
|
<div class="subtitle-1">
|
|
Gespeicherte Sessions
|
|
</div>
|
|
<v-card v-for="token in tokens" :key="token.id" outlined>
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col>
|
|
<v-col>
|
|
Betriebssystem
|
|
</v-col>
|
|
<v-col>
|
|
<v-icon>
|
|
{{
|
|
token.platform === 'macos' || token.platform === 'iphone'
|
|
? apple
|
|
: token.platform === 'windows'
|
|
? windows
|
|
: token.platform === 'android'
|
|
? android
|
|
: token.platform === 'linux'
|
|
? linux
|
|
: token.platfrom
|
|
}}
|
|
</v-icon>
|
|
<v-icon
|
|
v-if="
|
|
token.platform === 'macos' || token.platform === 'iphone'
|
|
"
|
|
>
|
|
{{ token.platform === 'macos' ? mac : iphone }}
|
|
</v-icon>
|
|
</v-col>
|
|
</v-col>
|
|
<v-col>
|
|
<v-col>
|
|
Browser
|
|
</v-col>
|
|
<v-col>
|
|
<v-icon>
|
|
{{
|
|
token.browser === 'chrome'
|
|
? chrome
|
|
: token.browser === 'firefox'
|
|
? firefox
|
|
: token.browser === 'opera'
|
|
? opera
|
|
: token.browser === 'safari'
|
|
? safari
|
|
: token.browser === 'msie'
|
|
? msie
|
|
: token.browser
|
|
}}
|
|
</v-icon>
|
|
</v-col>
|
|
</v-col>
|
|
<v-col>
|
|
<v-col>
|
|
Letzte Aktualisierung
|
|
</v-col>
|
|
<v-col>
|
|
{{ token.timestamp.day }}.{{ token.timestamp.month }}.{{
|
|
token.timestamp.year
|
|
}}
|
|
um
|
|
{{
|
|
10 > token.timestamp.hour
|
|
? '0' + String(token.timestamp.hour)
|
|
: token.timestamp.hour
|
|
}}:{{
|
|
10 > token.timestamp.minute
|
|
? '0' + String(token.timestamp.minute)
|
|
: token.timestamp.minute
|
|
}}:{{
|
|
10 > token.timestamp.second
|
|
? '0' + String(token.timestamp.second)
|
|
: token.timestamp.second
|
|
}}</v-col
|
|
>
|
|
</v-col>
|
|
<v-col>
|
|
<v-col>
|
|
Lebenszeit
|
|
</v-col>
|
|
<v-col>
|
|
{{ calcLifefime(token.lifetime) }}
|
|
</v-col>
|
|
</v-col>
|
|
<v-col class="text-right">
|
|
<v-btn icon @click="deleteToken(token)">
|
|
<v-icon>
|
|
{{ trashCan }}
|
|
</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-form ref="acceptedPasswordTest">
|
|
<v-text-field
|
|
outlined
|
|
label="Passwort"
|
|
v-model="acceptedPassword"
|
|
type="password"
|
|
ref="acceptedPassword"
|
|
:rules="[empty_password]"
|
|
></v-text-field>
|
|
</v-form>
|
|
<v-btn text color="primary" @click="save">Speichern</v-btn>
|
|
</v-card-actions>
|
|
<v-snackbar
|
|
v-if="error ? error.value : false"
|
|
:color="error ? (error.error ? 'error' : 'success') : ''"
|
|
:value="error"
|
|
v-model="error"
|
|
:timeout="0"
|
|
>
|
|
{{ error ? error.value : null }}
|
|
</v-snackbar>
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mdiAccount,
|
|
mdiGlassCocktail,
|
|
mdiCurrencyEur,
|
|
mdiFoodForkDrink,
|
|
mdiApple,
|
|
mdiGoogleChrome,
|
|
mdiFirefox,
|
|
mdiOpera,
|
|
mdiInternetExplorer,
|
|
mdiAppleSafari,
|
|
mdiLaptopMac,
|
|
mdiCellphoneIphone,
|
|
mdiTrashCan,
|
|
mdiAndroid,
|
|
mdiWindows,
|
|
mdiLinux
|
|
} from '@mdi/js'
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
export default {
|
|
name: 'Config',
|
|
data() {
|
|
return {
|
|
apple: mdiApple,
|
|
mac: mdiLaptopMac,
|
|
iphone: mdiCellphoneIphone,
|
|
android: mdiAndroid,
|
|
windows: mdiWindows,
|
|
linux: mdiLinux,
|
|
chrome: mdiGoogleChrome,
|
|
firefox: mdiFirefox,
|
|
opera: mdiOpera,
|
|
msie: mdiInternetExplorer,
|
|
safari: mdiAppleSafari,
|
|
person: mdiAccount,
|
|
bar: mdiGlassCocktail,
|
|
finanzer: mdiCurrencyEur,
|
|
gastro: mdiFoodForkDrink,
|
|
username: null,
|
|
mail: null,
|
|
firstname: null,
|
|
lastname: null,
|
|
password: null,
|
|
controlPassword: null,
|
|
trashCan: mdiTrashCan,
|
|
isFulllineText: false,
|
|
acceptedPassword: null,
|
|
passError: null,
|
|
equal_password: value =>
|
|
this.password === value || 'Passwörter sind nicht identisch.',
|
|
email: value => {
|
|
if (value.length > 0) {
|
|
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
|
return pattern.test(value) || 'keine gültige E-Mail'
|
|
}
|
|
return true
|
|
},
|
|
empty_password: data => {
|
|
return !!data || 'Password wird bentögigt'
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(function() {
|
|
window.addEventListener('resize', this.getWindowWidth)
|
|
this.getWindowWidth()
|
|
})
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
saveConfig: 'user/saveConfig',
|
|
getStatus: 'user/getStatus',
|
|
getTokens: 'user/getTokens',
|
|
deleteToken: 'user/deleteToken'
|
|
}),
|
|
getWindowWidth() {
|
|
this.isFulllineText = document.documentElement.clientWidth <= 600
|
|
},
|
|
save() {
|
|
let user = {}
|
|
if (this.firstname) user.firstname = this.firstname
|
|
if (this.lastname) user.lastname = this.lastname
|
|
if (this.username) user.username = this.username
|
|
if (this.$refs.mail.validate()) {
|
|
if (this.mail) user.mail = this.mail
|
|
}
|
|
if (this.$refs.newPassword.validate()) {
|
|
if (this.password) user.password = this.password
|
|
} else {
|
|
return
|
|
}
|
|
console.log(this.$refs.acceptedPasswordTest.validate())
|
|
if (this.$refs.acceptedPasswordTest.validate()) {
|
|
this.saveConfig({
|
|
oldUsername: user.username,
|
|
...user,
|
|
acceptedPassword: this.acceptedPassword
|
|
})
|
|
this.$refs.acceptedPassword.reset()
|
|
} else {
|
|
this.passError = 'Du musst dein Password eingeben'
|
|
}
|
|
this.password = null
|
|
this.controlPassword = null
|
|
},
|
|
calcLifefime(time) {
|
|
if (time < 60) return String(time) + 'Sekunden'
|
|
time = Math.round(time / 60)
|
|
if (time < 60) return String(time) + 'Minuten'
|
|
time = Math.round(time / 60)
|
|
if (time < 24) return String(time) + 'Stunden'
|
|
time = Math.round(time / 24)
|
|
if (time < 7) return String(time) + 'Tage'
|
|
time = Math.round(time / 7)
|
|
if (time < 30) return String(time) + 'Wochen'
|
|
time = Math.round(time / 30)
|
|
if (time < 12) return String(time) + 'Monate'
|
|
time = Math.round(time / 12)
|
|
return String(time) + 'Jahre'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: 'user/user',
|
|
error: 'user/error',
|
|
loading: 'user/loading',
|
|
status: 'user/status',
|
|
tokens: 'user/tokens'
|
|
}),
|
|
lock() {
|
|
return this.user.locked ? 'gesperrt' : 'nicht gesperrt'
|
|
},
|
|
lockColor() {
|
|
return this.user.locked ? 'red' : 'green'
|
|
},
|
|
autoLock() {
|
|
return this.user.autoLock ? 'aktiviert' : 'deaktiviert'
|
|
},
|
|
autoLockColor() {
|
|
return this.user.autoLock ? 'green' : 'red'
|
|
},
|
|
computeStatus() {
|
|
try {
|
|
return this.status.find(a => a.id == this.user.statusgroup).name
|
|
} catch (e) {
|
|
return null
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getStatus()
|
|
this.getTokens()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fulllineText {
|
|
flex-basis: unset;
|
|
}
|
|
</style>
|