<!--
  - Copyright (c) 2022.
  - Author Peter Placzek (tada5hi)
  - For the full copyright and license information,
  - view the LICENSE file that was distributed with this source code.
  -->

<script>
    import { mapActions, mapGetters } from "vuex";
    import userPasswordMixin from "../../../mixins/user/login/userPasswordMixin";

    export default {
        mixins: [
            userPasswordMixin
        ],
        meta: {
            requireLoggedIn: true
        },
        computed: {
            ...mapGetters('auth', [
                'loggedIn',
                'user'
            ])
        },
        created() {
            this.userData = this.user;
        },
        data () {
            return {
                temp: null
            }
        },
        methods: {
            ...mapActions('auth',[
                'triggerSetUserProperty'
            ])
        }
    }
</script>
<template>
    <div>
        <h6 class="title">
            Passwort
        </h6>

        <div v-if="userPasswordForm.message" class="alert alert-warning alert-sm">
            {{userPasswordForm.message.data}}
        </div>

        <div class="form-group" :class="{ 'form-group-error': $v.userPasswordForm.password.$error }">
            <label>Passwort</label>
            <input v-model="$v.userPasswordForm.password.$model" type="password" name="name" class="form-control" placeholder="Passwort...">

            <div v-if="!$v.userPasswordForm.password.required" class="form-group-hint group-required">
                Bitte geben Sie einen Benutzernamen an.
            </div>
            <div v-if="!$v.userPasswordForm.password.minLength" class="form-group-hint group-required">
                Der Benutzername muss mindestens <strong>{{ $v.userPasswordForm.password.$params.minLength.min }}</strong> Zeichen lang sein.
            </div>
            <div v-if="!$v.userPasswordForm.password.maxLength" class="form-group-hint group-required">
                Der Benutzername darf maximal <strong>{{ $v.userPasswordForm.password.$params.maxLength.max }}</strong> Zeichen lang sein.
            </div>
        </div>

        <div class="form-group" :class="{ 'form-group-error': $v.userPasswordForm.passwordRepeat.$error }">
            <label>Passwort wiederholen</label>
            <input v-model="$v.userPasswordForm.passwordRepeat.$model" type="password" name="name" class="form-control" placeholder="Passwort wiederholen...">

            <div v-if="!$v.userPasswordForm.passwordRepeat.required" class="form-group-hint group-required">
                Bitte geben Sie einen Benutzernamen an.
            </div>
            <div v-if="!$v.userPasswordForm.passwordRepeat.minLength" class="form-group-hint group-required">
                Der Benutzername muss mindestens <strong>{{ $v.userPasswordForm.passwordRepeat.$params.minLength.min }}</strong> Zeichen lang sein.
            </div>
            <div v-if="!$v.userPasswordForm.passwordRepeat.maxLength" class="form-group-hint group-required">
                Der Benutzername darf maximal <strong>{{ $v.userPasswordForm.passwordRepeat.$params.maxLength.max }}</strong> Zeichen lang sein.
            </div>
            <div v-if="!$v.userPasswordForm.passwordRepeat.sameAsPassword" class="form-group-hint group-required">
                Die Passwörter sind nicht identisch...
            </div>
        </div>

        <hr>

        <div class="form-group">
            <button :disabled="$v.userPasswordForm.$invalid || userPasswordForm.busy" @click="submitPasswordForm" type="submit" class="btn btn-primary btn-xs"><i class="fa fa-save"></i> Ändern</button>
        </div>
    </div>
</template>
