crbtc.org/pages/register.vue

67 lines
1.7 KiB
Vue

<script setup>
useHead({
title: 'Create account | crbtc.org',
meta: [
{
name: 'description',
content: ``
},
],
})
import { Form, Field, ErrorMessage } from 'vee-validate';
function required(value) {
return value ? true : 'This field is required'
}
const { createUser } = useDirectusAuth();
const onSubmit = async (values) => {
let slug = values.username.toLowerCase().replace(/\s/g, '')
try {
const newUser = await createUser({
first_name: values.username,
email: values.email,
password: values.password,
external_identifier: slug,
role: process.env.DIRECTUS_ROLE,
})
} catch (e) {}
}
</script>
<template>
<div class="register">
<h3>Create your account</h3>
<h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of
use</NuxtLink> and <NuxtLink href="privacy">Privacy policy</NuxtLink>.</h4>
<Form v-slot="{ errors }" @submit="onSubmit" >
<div class="input">
<label>Username</label>
<Field name="username" placeholder="Choose a username" />
<ErrorMessage name="username" />
</div>
<div class="input">
<label>Email</label>
<Field name="email" placeholder="Enter your email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
<ErrorMessage name="email" />
</div>
<div class="input">
<label>Password</label>
<Field name="password" placeholder="********" type="password" />
<ErrorMessage name="password" />
</div>
<button>Create account</button>
</form>
<p class="newbie">Already have an account? <NuxtLink href="/login">Sign in</NuxtLink></p>
</div>
</template>