List_ultimate/app/pages/signup.vue

<template>
  <section>
    <UiModale @close="closeModal" :modalActive="modalActive">
			<div class="modal-content">
				<h1 class="modal-title">{{ $t('modalTitle') }}</h1>
				<p>{{ $t('modalText') }}</p>
      </div>
		</UiModale>
    <h1>{{ $t('signupTitle') }}</h1>
    
    <form @submit.prevent="handleSubmit">
      <InputEmail
        v-model="email"
        name="email"
        :label="$t('signupLabelEmail')"
        placeholder=""
        :class="emailStatus"
        @blur="touched = true"
      >
        <template #message>
          <p v-if="emailErrors.isEmpty" class="error">{{ $t('signupErrorEmailEmpty') }}</p>
          <p v-else-if="emailErrors.isntValid" class="error">{{ $t('signupErrorEmailIsntValid') }}</p>
          <p v-else-if="emailValid" class="success">{{ $t('signupEmailIsValid') }}</p>
        </template>
      </InputEmail>

      <InputPassword
        name="password"
        placeholder=""
        :label="$t('signupLabelPwd')"
        v-model="password"
        @input="check()"
      >
        <template #message>
          <p v-if="pwErrors.isEmpty" class="error">{{ $t('signupErrorPwdEmpty') }}</p>
          <p v-if="pwErrors.isntValid" class="error">{{ $t('signupErrorPwsIsntValid') }}</p>
        </template>
      </InputPassword>
      <PasswordChecker/>
      <InputPassword
        name="passwordVerif"
        placeholder=""
        :label="$t('signupLabelConfirmPwd')"
        v-model="passwordVerif"
        >
        <template #message>
          <p v-if="pwErrors.doesNotMatch" class="error">{{ $t('signupErrorPwdsDoesNotMatch') }}</p>
          <p v-if="pwErrors.verifyEmpty" class="error">{{ $t('signupErrorPwdConfirmEmpty') }}</p>
        </template>
      </InputPassword>
    
      <ButtonBase>
        {{ $t('signupFormBtn') }}
      </ButtonBase>
    </form>
  </section>
</template>

<script setup lang="ts">
definePageMeta({
  public: true
})
const { locale } = useI18n()
//** Modale management **//
const localePath=useLocalePath()
  const modalActive = ref(false)
  
  const closeModal = () => {
    modalActive.value = false
    navigateTo(localePath('lists'))
  }

//** Sign up management **/
const authStore = useAuthStore()
const passwordToolBox = usePasswordToolBoxStore()
// email relative functions
const email = ref("")
const touched = ref(false)

function isValidEmail(value: string) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
}

const emailValid = computed(() => touched.value && isValidEmail(email.value))
const emailErrors = ref({
  isEmpty: false as boolean,
  isntValid: false as boolean
})
//const emailInvalid = computed(() => touched.value && !isValidEmail(email.value))

const emailStatus = computed(() => {
  if (!touched.value) return ""
  return emailValid.value ? "mail-is-valid" : "mail-is-invalid"
})

// password relative functions
const check = () => {
  passwordToolBox.updatePassword(password.value)
}

const password=ref('')
const passwordVerif=ref('')

const pwErrors = ref({
    isEmpty: false as boolean,
    verifyEmpty: false as boolean,
    isntValid: false as boolean,
    doesNotMatch:false as boolean,
})

// form relative functions
const handleSubmit = async() => {
  //réinitialisation des erreurs 
  emailErrors.value.isEmpty = false
  emailErrors.value.isntValid = false
  pwErrors.value.isEmpty = false;
  pwErrors.value.verifyEmpty = false;
  pwErrors.value.isntValid = false;
  pwErrors.value.doesNotMatch = false;
  // Check errors
  emailErrors.value.isEmpty = ( email.value == "" );
  emailErrors.value.isntValid = !isValidEmail(email.value)
  pwErrors.value.isEmpty = ( password.value == "" );
  pwErrors.value.verifyEmpty = ( passwordVerif.value == "" );
  pwErrors.value.isntValid = !passwordToolBox.isPasswordValid();
  pwErrors.value.doesNotMatch = ( password.value != passwordVerif.value );

  if ( !emailErrors.value.isEmpty &&
    !emailErrors.value.isntValid &&
    !pwErrors.value.isEmpty &&
    !pwErrors.value.verifyEmpty &&
    !pwErrors.value.isntValid &&
    !pwErrors.value.doesNotMatch) {
      const success = await authStore.register(email.value, password.value, locale.value)
      if (success) {
        modalActive.value=true;
      }
}

}
</script>

<style scoped lang="scss">

form {
  display: flex;
  flex-direction: column;
  padding: 1em;
  margin: 0;
}

.connection-error{
  height:1.2em;
  & > p{
    font-weight: bold;
    text-align: center;
    color: rgb(185, 0, 0);
  }
}
</style>