<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>