102 lines
3.0 KiB
Vue
102 lines
3.0 KiB
Vue
<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> |