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

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

import WindowHandle from './partials/WindowHandle.vue';
import Spinner from '../partials/Spinner.vue';
import { DisplayToast } from '~/services/Toaster';
import Server from '~/services/Server';
import { errorMessages } from 'vue/compiler-sfc';

const handle = ref(null);

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

let id = data.id;

const username = ref("");
const password = ref("");
const passwordConfirm = ref("");
const email = ref("");
const name = ref("");

const firstTime = ref(false);
const loading = ref(false);

const images = [
    "https://cdn.aranroig.com/art/miirym/miirym.jpg",
    "https://cdn.aranroig.com/art/nozt/nozt.jpg",
    "https://cdn.aranroig.com/art/knocking/knocking.jpg",
    "https://cdn.aranroig.com/art/valentin/valentin.jpg",
]

const splashSource = ref("");

onMounted(() => {
    SetupHandle(id, handle);
    SetSize(id, {width: 500});
    ResetPosition(id, "center");

    // Pick random image
    const randomIndex = Math.floor(Math.random() * images.length);
    splashSource.value = images[randomIndex];
    firstTime.value = data.firstTime;
});

function toLogin(){
    CreateWindow('login');
    ClearWindow('register');
}

function register(){
    if(username.value.length < 3){
        DisplayToast('red', $t('register.errors.username-empty'), 3000);
        return;
    }

    if(email.value.length < 5 || !email.value.includes('@')){
        DisplayToast('red', $t('register.errors.email-empty'), 3000);
        return;
    }

    if(name.value.length == 0){
        DisplayToast('red', $t('register.errors.name-empty'), 3000);
        return;
    }

    if(password.value !== passwordConfirm.value){
        DisplayToast('red', $t('register.errors.passwords-no-match'), 3000);
        return;
    }

    loading.value = true;
    Server().post('/user/register', {
        username: username.value,
        email: email.value,
        name: name.value,
        password: password.value
    }).then((response) => {
        DisplayToast('green', $t('register.success'), 3000);
        toLogin();
    }).catch((error) => {
        if(error.response && error.response.data && error.response.data.message){
            DisplayToast('red', $t(register.error.response.data.message), 3000);
        } else {
            DisplayToast('red', $t("errors.internal"), 3000);
        }
    }).finally(() => {
        loading.value = false;
    });
}
</script>


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

        <!-- Body -->
        <div class="vert-expand">
            <div class="image-container">
                <div class="image-crop">
                    <img :src="splashSource" class="main-image">
                </div>
                <picture class="overlay-image">
                    <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" draggable="false" width="250px">
                </picture>
            </div>
            <form v-on:submit.prevent="register">
                <p class="green" v-if="firstTime">{{ $t('register.first-register-message') }}</p>
                <h2>{{ $t('register.welcome') }}</h2>
                <p>{{ $t('register.message') }}</p>
                <div class="form-field">
                    <label for="username">{{$t('register.username')}}</label>
                    <input id="username-field" type="text" :placeholder="$t('register.username-placeholder')" name="username" v-model="username" autocomplete="off" >
                </div>
                <div class="form-field">
                    <label for="email">{{$t('register.email')}}</label>
                    <input id="email-field" type="text" :placeholder="$t('register.email-placeholder')" name="email" v-model="email" autocomplete="off" >
                </div>
                <div class="form-field">
                    <label for="name">{{$t('register.name')}}</label>
                    <input id="name-field" type="text" :placeholder="$t('register.name-placeholder')" name="name" v-model="name" autocomplete="off" >
                </div>
                <div class="form-field">
                    <label for="password">{{$t('register.password')}}</label>
                    <div class="two-rows expand">
                        <input id="password-field" type="password" :placeholder="$t('register.password-placeholder')" name="password" v-model="password" autocomplete="off" >
                        <input id="password-field" type="password" :placeholder="$t('register.password-confirm-placeholder')" name="password" v-model="passwordConfirm" autocomplete="off" >
                    </div>
                </div>
                <div class="form-field">
                    <button class="btn-primary sound-click">
                        <span v-if="loading">
                            <Spinner />
                        </span>
                        <span v-else>
                            {{$t('register.register')}}
                        </span>
                    </button>
                </div>
                <div class="form-field center" v-if="!firstTime">
                    <p>{{$t('register.have-account')}} <a href="#" @click.prevent="toLogin">{{$t('register.login')}}</a></p>
                </div>
            </form>
            
        </div>

    </div>
</template>


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

.expand {
    width: 100%;
    
    display: flex;
    flex-direction: row;

    > * {
        flex-grow: 1;
    }
}

.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;
}

.image-container {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    pointer-events: none;
}

.image-crop {
    height: 200px;       /* adjust as needed */
    width: 500px;        /* adjust as needed */
    overflow: hidden;
    position: relative;
}

.main-image {
    position: absolute;
    width: 500px;        /* adjust as needed */
    top: 0px;          /* adjust as needed */
}
.overlay-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 250px; /* adjust as needed */
}

</style>