<script lang="ts">
import CryptoJS from 'crypto-js';

    export default {
        data() {
            return {
                kuerzel: "",
                password: ""
            }
            
        },
        methods: {
            login(){
                this.$emit("login", this.kuerzel, CryptoJS.SHA256(this.password).toString(CryptoJS.enc.Hex));
                this.kuerzel="";
                this.password="";
            }
        },
        props: {
            wrongpassword: {
                type: Boolean,
                default: false
            }
        },
        emits: ["login"]
    }
</script>
<template>
    <div>
<h1>Einloggen</h1>
    <form @submit.prevent="login">
        <input type="text" placeholder="Kürzel" v-model="kuerzel" required />
        <input type="password" placeholder="Passwort" v-model="password" required />
        <input type="submit" value="Einloggen">
        <div v-if="wrongpassword">
            Falsches Passwort oder Kürzel! Bitte versuche es erneut.
        </div>
    </form>
    </div>
</template>