<script lang="ts" setup>
import { ref } from 'vue';
import { useSessionStore } from '../stores/session';

const error = ref("");
const login = ref({ email: "", password: "", name: "" });
const showPassword = ref(false);

function formSubmit(e: FormDataEvent) {
    e.preventDefault();
    useSessionStore().register(login)
        .then(() => error.value = "")
        .catch(() => error.value = "Something went wrong!");

    // TODO display invalidCredentials
    // TODO redirect to dashboard on success
}
</script>

<template>
    <v-container>
        <v-row>
            <v-col cols="12">
                <v-text-field v-model="login.email" type="text" label="E-Mail" />
            </v-col>
            <v-col cols="12">
                <v-text-field v-model="login.name" type="text" label="Name" />
            </v-col>
            <v-col cols="6">
                <v-text-field
                    v-model="login.password"
                    label="Password"
                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                    :type="showPassword ? 'text' : 'password'"
                    @click:append="showPassword = showPassword"
                    :error-message="error"
                    error-count="2"
                    error
                />
            </v-col>
            <v-col cols="6">
                <v-text-field
                    v-model="login.password"
                    label="Repeat password"
                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                    :type="showPassword ? 'text' : 'password'"
                    @click:append="showPassword = showPassword"
                    :error-message="error"
                    error-count="2"
                    error
                />
            </v-col>
        </v-row>
        <div class="form-group">{{ error }}</div>
        <v-btn type="submit" @click="formSubmit">Register</v-btn>
        <p>
            Existing user?
            <router-link to="/login">Login</router-link>instead!
        </p>
    </v-container>
</template>
