147 lines
4.2 KiB
Vue
147 lines
4.2 KiB
Vue
|
<template>
|
||
|
|
<v-content>
|
||
|
|
<v-container class="fill-height" fluid>
|
||
|
|
<v-row align="center" justify="center">
|
||
|
|
<v-col cols="12" sm="8" md="4">
|
||
|
|
<v-card class="elevation-12">
|
||
|
|
<v-toolbar color="blue accent-4" dark flat dense>
|
||
|
|
<v-toolbar-title>Password vergessen</v-toolbar-title>
|
||
|
|
<v-spacer />
|
||
|
|
</v-toolbar>
|
||
|
|
<v-card-text>
|
||
|
|
<v-form lazy-validation ref="reset">
|
||
|
|
<v-text-field
|
||
|
|
label="E-Mail oder Nutzername"
|
||
|
|
v-model="input"
|
||
|
|
hint="Hier bitte deinen Nutzernamen oder deine E-Mail angeben. Sollte eins der beiden Daten gefunden werden, wird an deine hinterlegte E-Mail ein Password zum Zurücksetzen gesendet."
|
||
|
|
persistent-hint
|
||
|
|
:prepend-icon="prependIcon"
|
||
|
|
required
|
||
|
|
:rules="[notEmpty, isMail ? email : true]"
|
||
|
|
@keyup.enter="resetPassword()"
|
||
|
|
>
|
||
|
|
</v-text-field>
|
||
|
|
</v-form>
|
||
|
|
</v-card-text>
|
||
|
|
<v-card-actions>
|
||
|
|
<v-spacer />
|
||
|
|
<v-btn
|
||
|
|
color="primary"
|
||
|
|
@click="resetPassword()"
|
||
|
|
@submit.prevent="resetPassword()"
|
||
|
|
>
|
||
|
|
Zurücksetzen
|
||
|
|
</v-btn>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</v-container>
|
||
|
|
<v-snackbar bottom :timeout="0" :value="response.value" :color="response.error? 'error' : 'success'">
|
||
|
|
{{ response.message }}
|
||
|
|
<v-btn icon @click="response.value = false">
|
||
|
|
<v-icon color="white">
|
||
|
|
mdi-close
|
||
|
|
</v-icon>
|
||
|
|
</v-btn>
|
||
|
|
</v-snackbar>
|
||
|
|
</v-content>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import axios from 'axios'
|
||
|
|
import url from '@/plugins/routes'
|
||
|
|
export default {
|
||
|
|
name: 'ResetPassword',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
input: '',
|
||
|
|
response: {
|
||
|
|
error: false,
|
||
|
|
value: false,
|
||
|
|
message: null
|
||
|
|
},
|
||
|
|
defaultResponse: {
|
||
|
|
error: false,
|
||
|
|
value: false,
|
||
|
|
message: null
|
||
|
|
},
|
||
|
|
notEmpty: data => {
|
||
|
|
return data ? true : 'Darf nicht leer sein.'
|
||
|
|
},
|
||
|
|
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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
resetPassword() {
|
||
|
|
if (this.$refs.reset.validate()) {
|
||
|
|
console.log(this.input, this.isMail)
|
||
|
|
if (this.isMail) {
|
||
|
|
axios
|
||
|
|
.post(url.resetPassword, { mail: this.input })
|
||
|
|
.then(data => {
|
||
|
|
console.log(data)
|
||
|
|
this.setMessage(data.data.mail, false)
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.log(error)
|
||
|
|
this.setMessage(error, true)
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
this.$refs.reset.reset()
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
axios
|
||
|
|
.post(url.resetPassword, { username: this.input })
|
||
|
|
.then(data => {
|
||
|
|
console.log(data)
|
||
|
|
this.setMessage(data.data.mail, false)
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.log(error)
|
||
|
|
this.setMessage(error, true)
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
this.$refs.reset.reset()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setMessage(mail, error) {
|
||
|
|
if (error) {
|
||
|
|
this.response.error = true
|
||
|
|
this.response.value = true
|
||
|
|
this.response.message =
|
||
|
|
'Es ist ein Fehler aufgetreten. Wende dich an einen Administrator oder probiere es erneut.'
|
||
|
|
} else {
|
||
|
|
this.response.error = false
|
||
|
|
this.response.value = true
|
||
|
|
this.response.message = `Es wurde ein neues Password an ${mail} versendet`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
prependIcon() {
|
||
|
|
if (this.input) {
|
||
|
|
return this.input.includes('@') ? 'mdi-email' : 'mdi-account'
|
||
|
|
}
|
||
|
|
return 'mdi-account'
|
||
|
|
},
|
||
|
|
isMail() {
|
||
|
|
if (this.input) {
|
||
|
|
return this.input.includes('@')
|
||
|
|
}
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|