var auth = {};

function clearAuthState() {
    auth.user = '';        // Login name
    auth.name = '';        // Full name
    auth.type = '';        // type of login (domain specific)
    auth.mail = '';        // Full mail address
    auth.roles = {};       // Role authorizations e.g. {user: true}
    auth.gender = '';      // Gender (e.g. Frau)
}
clearAuthState();

function fillAuthState(state) {
    // Shallow copy
    if (auth === undefined) {
        auth = state;
    }
    for (e in auth) {
        auth[e] = state[e];
    }
}

// Login component: Login panel (if not logged in) or Logout element (if logged in)
Vue.component('login-panel', {
    template: `
        <div class="modal-card" style="width: auto">
            <header class="modal-card-head">
                <p class="modal-card-title">Login (Ohmportal)</p>
            </header>
            <section class="modal-card-body">
                <b-field>
                    <b-input
                        v-model=user
                        placeholder="User"
                        :value="user"
                        required>
                    </b-input>
                </b-field>
                <b-field>
                    <b-input
                        v-model=pwd
                        type="password"
                        placeholder="Password"
                        :value="pwd"
                        @change="pwd_changed"
                        @keyup.enter.native="login"
                        required>
                    </b-input>
                </b-field>
                <b-checkbox>Eingeloggt bleiben</b-checkbox>
                <div v-if="error" style="color:red;"> Versuche es nochmal.</div>
            </section>
            <footer class="modal-card-foot">
                <button class="button" type="button" @click.prevent="$parent.close()">Close</button>
                <button class="button is-primary" @click.prevent="login">Login</button>
            </footer>
        </div>`,
    data: function () {
		return {
            auth:    auth,
            user:    '',
			pwd:     '',
			error:   false,
		};
    },
// TODO: Check if enough for session cookie re-login; checkbox
//    mounted: function() {
//        this.checkData();
//    },
    methods: {
        closeLoginPanel: function() {
            this.$emit('close-login-panel');
        },
        showLoginPanel: function() {
            this.$emit('show-login-panel');
        },
        pwd_changed: function(evt) {
            // Only required for PasswordInsert Apps etc. who send only(!) change events
            this.pwd = e.target.value;
            // Alternative call the input event
            //e.target.dispatchEvent(new Event('input'));
        },
        login: function() {
            clearAuthState();

            $.ajax({
				url: "api/login",
				data: {
					user: this.user,
					pwd: this.pwd
				},
				method: "POST"
			}).done(successful_login).fail(failed_login);

            function successful_login(resData) {
                fillAuthState(resData);
				console.info("Correct credentials");
                this.closeLoginPanel;

				//console.log(resData);
                router.push('/home');
			}

			function failed_login(err) {
				console.info("Wrong credentials");
				this.showError=true;
                this.showLoginPanel;

				console.log("error: " + err.responseText);
				console.log(err);
			}
        },
		checkData: function() {
            clearAuthState();

            $.ajax({
                url: "api/login",
                data: undefined,
                method: "POST"
            }).done(successful_login).fail(failed_login);

            function successful_login(res) {
				console.info("Re-Auth: Correct credentials");
                this.closeLoginPanel;

				//console.log(res);
                router.push('/home')
			}

			function failed_login(err) {
				console.info("Re-Auth: Wrong credentials");
				this.showError=true;
                this.showLoginPanel;

				console.log("error: " + err.responseText);
				console.log(err);
			}
		},
        logout: function() {
            clearAuthState();
            $.ajax({ url: "api/logout", method: "POST" });
            this.closeLoginPanel;
        }
    },
});