initial commit

2026-02-26 21:29:34 +01:00
commit d9d84634e8
72 changed files with 18491 additions and 0 deletions
--- a/app/pages/signup.vue
+++ b/app/pages/signup.vue
@@ -0,0 +1,160 @@
+<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>