<template>
    <div class="login-wrapper">
        <div class="tile-l content-l login-window">
            <div class="content-l">
                <h2 class="center">Kubooboo</h2>
                <div class="center">
                    <img class="logo" src="@/assets/transparent_logo.png" alt=""></img>
                </div>
                <div class="center">
                    <h1>Login</h1>
                </div>
            </div>
            <form class="login content-l" @submit.prevent="doLogin()">
                <div class="content-l">   
                    <UiError :error="error" @close="() => { error = undefined }"></UiError>
                    <UiInput label="Username" required>
                        <input type="text" v-model="loginCredentials.username">
                    </UiInput>
                    <UiInput label="Passwort" required>
                        <input type="password" v-model="loginCredentials.password">
                    </UiInput>
                </div>
                <div class="center">
                    <UiButton @onclick="() => doLogin()" :loading="loading" icon="login" reverse>Login</UiButton>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { User } from '~/classes/User';
import UiInput from '~/components/ui/UiInput.vue';
import { login } from '~/requests/login';
import { jwtDecode } from 'jwt-decode';
import { getUser } from '~/requests/user';
import { Session } from '~/classes/Session';
import UiError from '~/components/ui/UiError.vue';

const loginCredentials = ref(new User());

const error: Ref<string | undefined> = ref(undefined);
const loading = ref(false);
function doLogin()
{
    if (loginCredentials.value.username && loginCredentials.value.password)
    {
        loading.value = true;
        login(loginCredentials.value, (token: string) => {
            const decode = jwtDecode(token) as any;
            getUser(decode.upn, token, (user: User) => {
                setSessionCookie(new Session(user, token), decode.exp as number);
                useRouter().push('/account/inspect/nodes/_all');
            });
        }, (code?: string) => {
            if (code === 'user_not_found')
            {
                error.value = "User does not exist.";
            }
            if (code === 'wrong_password')
            {
                error.value = "Invalid password.";
            }
            loading.value = false;
        });
    }
    else 
    {
        throw new Error("Cannot send invalid form.");
    }
}

function setSessionCookie(session: Session, exp: number)
{
    const cookie = useCookie('session', {
        expires: new Date(exp * 1000)
    });
    cookie.value = JSON.stringify(session);
}
</script>

<style scoped>
.login-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
.login-window {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 640px;
}
.logo {
    width: 10rem;
    height: 10rem;
}
</style>