Vue.component('login-panel', {
    template: `
		  <form action="">
            <div class="modal-card" style="width: auto">
                <header class="modal-card-head">
                    <p class="modal-card-title">Login</p>
                </header>
                <section class="modal-card-body">
					<b-field>
        				<b-input
							placeholder="User (Ohmportal)"
							:value="user"
							v-model=user
							required>
						</b-input>
    				</b-field>
					<b-field>
            			<b-input
							type="password"
							placeholder="Password"
							:value="pwd"
							required>
						</b-input>
        			</b-field>
					<b-checkbox>Eingeloggt bleiben</b-checkbox>
					<div v-if="showError" style="color:red;"> Versuche es nochmal.</div>
                </section>
                <footer class="modal-card-foot">
                    <button class="button" type="button" @click="$parent.close()">Close</button>
                    <button class="button is-primary" @click="checkData()">Login</button>
                </footer>
            </div>
        </form>`,

    data: function () {
		return {
			user: "name",
			pwd:"password",
			showError:false,
		};
    },
    methods: {
		checkData(){
			if(this.user === "name" && this.pwd === "password"){
			   console.log("correct");
				this.$parent.close();
			}else{
				console.log("wrong");
				this.showError=true;
			}
		},

		logIn(){
			$parent.close();
		},
    },
});