dragonroll/frontend/app/components/windows/LoginWindow.vue

<script setup>
import { onMounted, ref } from 'vue';
import { 
    SetupHandle,
    SetSize,
    ResetPosition,
    SetResizable,
    SetMovable,
    ClearWindow,
    CreateWindow,
} from '@/services/Windows';

import WindowHandle from './partials/WindowHandle.vue';
import { DisplayToast } from '~/services/Toaster';
import Server from '~/services/Server';
import { SetUser } from '~/services/User';
import Spinner from '../partials/Spinner.vue';

const handle = ref(null);

const props = defineProps(['data']);
const data = props.data;

let id = data.type;

const username = ref("");
const password = ref("");

const loading = ref(false);

onMounted(() => {
    SetupHandle(id, handle);
    SetSize(id, {width: 450, height: 480});
    SetResizable(id, false);
    ResetPosition(id, "center");
});

function ShowMainMenu(){
    CreateWindow('main_menu');
    ClearWindow('login');
}

function login() {
    loading.value = true;
    Server().post('/user/login', { usermail: username.value, password: password.value }).then((response) => {
        loading.value = false;
        const data = response.data;

        if(data.status == "error"){
            DisplayToast('red', $t(data.msg), 3000)
        } else {
            SetUser(data.token);
            DisplayToast('green', $t('login.success'), 3000);
            ShowMainMenu();
        }
    }).catch((error) => {
        loading.value = false;
        DisplayToast('red', $t("errors.internal"), 3000);
    });
}

function toRegister(){
    CreateWindow('register');
    ClearWindow('login');
}
</script>


<template>
    <div class="window-wrapper" :id="'window-wrapper-' + id">
        <WindowHandle :window="id" ref="handle"></WindowHandle>

        <!-- Body -->
        <div class="vert-expand">
            <picture align="center">
            <source media="(prefers-color-scheme: dark)" srcset="/img/logo-splash.png">
            <source media="(prefers-color-scheme: light)" srcset="/img/logo-splash-light.png">
            <img alt="Dragonroll logo" src="/img/logo-splash.png" class="splash-image" draggable="false">
            </picture>

            <form v-on:submit.prevent="login">
                <div class="form-field">
                    <label for="username">{{$t('login.username')}}</label>
                    <input id="username-field" type="text" :placeholder="$t('login.username-placeholder')" name="username" v-model="username" autocomplete="off" >
                </div>
                <div class="form-field">
                    <label for="password">{{$t('login.password')}}</label>
                    <input id="password-field" type="password" :placeholder="$t('login.password-placeholder')" name="password" v-model="password" autocomplete="off" >
                </div>
                <div class="form-field">
                    <button class="btn-primary sound-click">
                        <span v-if="loading">
                            <Spinner />
                        </span>
                        <span v-else>
                            {{$t('login.log-in')}}
                        </span>
                    </button>
                </div>
                <div class="form-field center">
                    <p>{{$t('login.no-account')}} <a href="#" @click.prevent="toRegister">{{$t('login.register')}}</a></p>
                </div>
            </form>
            
        </div>

    </div>
</template>


<style scoped>
p {
  user-select: none;
}

.vert-expand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.window-wrapper {
    user-select: none;

    display: flex;
    align-items: center;
}

.splash-image {
    width: 450px;
}

form {
  margin-left: 30px;
  margin-right: 30px;
}

label {
    text-align: left;
}

.center {
    text-align: center;
}

</style>