RegistrationForm.vue

<script setup>
import { computed, reactive, ref } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

import InputGroup from '@/components/InputGroup.vue'
import MessageBox from '@/components/MessageBox.vue'
import { MESSAGES } from '@/data/messages'
import { ResponseStatus } from '@/helpers'
import { auth as api } from '@/services/api'

const emit = defineEmits(['onSuccess'])
const props = defineProps(['gmlId'])

const message = ref(null)
const tosAccepted = ref(false)

// Initial values
const state = reactive({
  email: null,
  gmlId: props.gmlId || null,
  password: null
})

const rules = computed(() => {
  return {
    email: { required },
    gmlId: {},
    password: { required }
  }
})

const v$ = useVuelidate(rules, state)

async function onSubmit() {
  try {
    message.value = null

    const isValid = await v$.value.$validate()

    if (!isValid) {
      message.value = MESSAGES['INVALID_INPUT']

      return
    }

    const response = await api.register(state)

    if (response.status === ResponseStatus.Success) {
      emit('onSuccess', response.data?.confirmRequired)
    } else {
      message.value = MESSAGES[response.code]
    }
  } catch (error) {
    console.error('ERROR:', error.name)
  }
}
</script>

<template>
  <div class="form form-bg shadow">
    <form @submit.prevent="onSubmit">
      <div class="form-content">
        <InputGroup>
          <label for="register-user">E-Mail</label>
          <input id="register-user" type="email" v-model="state.email" />
        </InputGroup>
        <InputGroup>
          <label for="register-password">Passwort</label>
          <MessageBox msg="Wählen Sie min. 8 Zeichen." type="basic" autocomplete="email" />
          <input id="register-password" type="password" v-model="state.password" autocomplete="new-password" />
        </InputGroup>
        <InputGroup>
          <label for="register-gmlid">GML Id (optional)</label>
          <MessageBox msg="Wenn Sie die GML Id nicht zur Verfügung haben, können Sie diese auch später eintragen."
            type="basic" />
          <input id="register-gmlid" type="text" v-model="state.gmlId" autocomplete="off" />
        </InputGroup>
      </div>
      <div class="form-section">
        <div class="registration-form__terms">
          <input type="checkbox" v-model="tosAccepted" />
          <span>
            Wenn Sie ein Konto erstellen, stimmen Sie den <router-link class="link" to="/terms">Nutzungsbedingungen
            </router-link> zu. Weitere Informationen über die Datenschutzpraktiken finden Sie in der <router-link
              class="link" to="/privacy">Datenschutzerklärung</router-link>.
          </span>
        </div>
        <MessageBox v-if="message" :msg="message" type="danger" />
        <button class="button primary" type="submit" :disabled="!tosAccepted">Konto erstellen</button>
      </div>
    </form>
  </div>
</template>

<style scoped>
.registration-form {
  background-color: hsl(var(--clr-content));
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  border-radius: var(--radius);
}

.registration-form__terms {
  background-color: hsl(var(--clr-background));
  padding: var(--spacing-s);
  display: flex;
  gap: var(--spacing-s);
  align-items: center;
  border-radius: var(--radius);
}

.registration-form__terms>span {
  font-size: var(--text-s);
}
</style>