62 lines
2.1 KiB
Vue
62 lines
2.1 KiB
Vue
<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>
|