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