{#if globalvars.server.caps.register }
    <form name="login-server" class="flex flex-col">
        <label class="label my-3">
            <span>Username:</span>
            <input bind:value="{name}" on:input="{checkName}" type="text" name="email" id="register-name" class="input">
        </label>
        <label class="label my-3">
            <span>E-mail:</span>
            <input bind:value="{email}" on:input="{checkEmail}" type="email" name="email" id="register-email" class="input">
        </label>
        <label class="label my-3">
            <span>Password:</span>
            <input type="password" name="password" id="register-password" class="input">
        </label>
        <label class="label my-3">
            <span>Repeat password:</span>
            <input type="password" name="password2" id="register-password-repeat" class="input">
        </label>
        <button type="button" id="register-server-submit" class="btn variant-filled-primary my-3">Register</button>
    </form>
{:else }
    <h3>There is no hope</h3>
{/if}


<style lang="scss">

</style>

<script lang="js">
    import {alerts, globals, urls} from "$lib/stores.js";
    import { requestor, setBaseUrl } from "../../../serverrequest.js";

    let globalvars;
    let email = '';
    let name = '';

    globals.subscribe(value => {
        globalvars = value;
    });

    setBaseUrl(globalvars.server.url);

    async function checkEmail(e) {
        if(document.querySelector('#register-email').checkValidity() === false) {
            alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
            return;
        }
        try {
            let response = await requestor.post(urls.checkusertaken, JSON.stringify({ email: email }));
            let data = JSON.parse(response.data);
            if(typeof data.email == 'undefined') {
                alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
            }
            if(data.email == 'taken') {
                alerts.update(data => data.filter(alert => alert.type !== 'emailtaken'));
                alerts.update(data => [...data, {text: 'Email is already taken', type: 'emailtaken'}]);
            }
        } catch (error) {
            alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable'}]);
        }
    }

    async function checkName(e) {
        if(document.querySelector('#register-name').checkValidity() === false) {
            alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
            return;
        }
        try {
            let response = await requestor.post(urls.checkusertaken, JSON.stringify({ name: name }));
            let data = JSON.parse(response.data);
            if(typeof data.name == 'undefined') {
                alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
            }
            if(data.name == 'taken') {
                alerts.update(data => data.filter(alert => alert.type !== 'usernametaken'));
                alerts.update(data => [...data,{text: 'Username is already taken', type: 'usernametaken'}]);
            }
        } catch (error) {
            alerts.update(data => [...data, {text: 'Server unavailable', type: 'noserveravailable'}]);
        }
    }
</script>