ResetPasswordForm.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 SectionTitle from '@/components/SectionTitle.vue'
import { MESSAGES } from '@/data/messages'
import { ResponseStatus } from '@/helpers'
import { auth as api } from '@/services/api'

const found = ref(false)
const message = ref(null)
const messageType = ref(null)

// Initial values
const state = reactive({
  email: null,
})

const rules = computed(() => {
  return {
    email: { 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']
      messageType.value = 'warning'

      return
    }

    const response = await api.resetPassword(state)

    if (response.status === ResponseStatus.Success) {
      found.value = true
    } else {
      message.value = MESSAGES['NOT_FOUND']
      messageType.value = 'danger'
    }
  } catch (error) {
    console.error('ERROR:', error.name)
  }
}
</script>

<template>
  <div class="form form-bg shadow">
    <form v-if="!found" @submit.prevent="onSubmit">
      <div class="form-content">
        <SectionTitle value="Passwort vergessen?" />
        <MessageBox
          msg="Bitte geben Sie Ihre E-Mail-Adresse ein mit der Sie Ihr Konto erstellt haben. Sie erhalten eine Bestätigungsmail und werden aufgefordert ein neues Passwort einzugeben."
          type="basic" />
        <InputGroup>
          <label for="reset-email">E-Mail</label>
          <input id="reset-email" type="email" v-model="state.email" />
        </InputGroup>
      </div>
      <div class="form-section">
        <MessageBox v-if="message" :msg="message" :type="messageType" />
        <button class="button primary" type="submit">Abschicken</button>
        <a class="button primary" href="/" alt="login">Zum Login</a>
      </div>
    </form>
    <div v-else class="reset-form__confirmation">
      <SectionTitle value="Bestätigungsmail verschickt" />
      <MessageBox
        msg="Bitte überprüfen Sie Ihr E-Mail-Postfach. Sie erhalten eine Bestätigungsmail und werden aufgefordert ein neues Passwort einzugeben."
        type="success" />
      <a class="button primary" href="/" alt="login">Zum Login</a>
    </div>
  </div>
</template>

<style scoped>
.reset-form__confirmation {
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}
</style>