<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>