<template>
    <div class="login-page">
        <h1>Login</h1>
        <UiInput label="E-Mail">
            <input type="text" v-model="sessionCreation.email">
        </UiInput>
        <UiInput label="Passwort">
            <input type="password" v-model="sessionCreation.password">
        </UiInput>
        <UiButton @click="login">Login</UiButton>
    </div>
</template>

<script setup lang="ts">
import {Session, SessionCreation} from "~/auth/Session";
import {jwtDecode} from "jwt-decode";
import {Account} from "~/auth/Account";

const sessionCreation = ref(function() {
    if (StringUtils.equals("development", process.env.NODE_ENV))
    {
        return new SessionCreation("andreas.j.dinauer@gmail.com", "pw")
    }
    return new SessionCreation();
}());

function login()
{
    Session.create(sessionCreation.value, (token: string) => {
        const decode = jwtDecode(token) as any;
        Account.get(decode.upn, token, (user: Account) => {
            useCookie<Session>(Session.COOKIE).value = new Session(user, token);
            useRouter().push('/app/artifacts');
        });
    }, () => {})
}
</script>

<style scoped>
.login-page {
    max-width: 540px;
}
</style>