WIP
This commit is contained in:
@@ -1,673 +0,0 @@
|
||||
<template>
|
||||
<!--PC -->
|
||||
<div class="hutopy-backgroud-color">
|
||||
|
||||
<div class="flex hidden-xs flex-col items-center page-margin">
|
||||
|
||||
<img class="h-20"
|
||||
src="/images/hutopymedia/banners/hutopy.png" />
|
||||
|
||||
<v-container class="row-between-logo-text">
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col xl="8" lg="11" md="12" sm="12" xs="12">
|
||||
<v-row>
|
||||
<!-- Contact image -->
|
||||
<v-col>
|
||||
<img class="contact-image" src="/images/hutopymedia/contactpage/contactpicture.png">
|
||||
</v-col>
|
||||
<!-- Form Information -->
|
||||
<v-col class="row-joinus">
|
||||
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
|
||||
<v-text-field v-model="name" label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-text-field v-model="emailAddress" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)"
|
||||
label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici"
|
||||
rows="3" auto-grow></v-textarea>
|
||||
<v-textarea v-model="socialNetworkAccount" style="color: rgb(107, 0, 101)"
|
||||
label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici"
|
||||
rows="3" auto-grow></v-textarea>
|
||||
<v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||
class="mt-4 send-btn" block>Envoyez
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Text about joining us -->
|
||||
<v-row>
|
||||
<v-container>
|
||||
<p class="h3-text paragraph">Rejoignez l'aventure
|
||||
Hutopy : une
|
||||
invitation à façonner l'avenir de la création.
|
||||
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
|
||||
plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
|
||||
collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
|
||||
inspirer.
|
||||
|
||||
</p>
|
||||
<p class="h3-text paragraph {">
|
||||
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
|
||||
d'élargir
|
||||
votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
|
||||
profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
|
||||
et
|
||||
l'innovation.
|
||||
</p>
|
||||
<p class="h3-text h3-last-text paragraph {">
|
||||
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de
|
||||
créateurs
|
||||
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et
|
||||
votre
|
||||
numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur
|
||||
Hutopy.
|
||||
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
|
||||
Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
|
||||
dans le ciel de notre utopie partagée.
|
||||
</p>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<!-- Offset -->
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mobile low dimensions -->
|
||||
<div class="hidden-sm-and-up flex-col items-center justify-center">
|
||||
|
||||
<!-- Offset -->
|
||||
<v-spacer style="margin-bottom: 25px;"></v-spacer>
|
||||
|
||||
<!-- Contact image -->
|
||||
<v-img src="/images/hutopymedia/contactpage/contactpicture.png" contain aspect-ratio="16/9"
|
||||
style="clip-path: polygon(0 50%, 100% 0, 100% 80%, 0 100%);" class="Scale-80"></v-img>
|
||||
|
||||
<!-- Title -->
|
||||
<v-row class="labelgroup">
|
||||
<v-col cols="12">
|
||||
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Form Information -->
|
||||
<v-text-field v-model="name" class="labelsize" label="Nom"
|
||||
style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-text-field v-model="emailAddress" class="labelsize" label="Courriel"
|
||||
style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<v-textarea v-model="reasonToJoin" class="labelsize" style="color: rgb(107, 0, 101)"
|
||||
label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici" rows="3"
|
||||
auto-grow></v-textarea>
|
||||
<v-textarea v-model="socialNetworkAccount" class="labelsize" style="color: rgb(107, 0, 101)"
|
||||
label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici" rows="3"
|
||||
auto-grow></v-textarea>
|
||||
<v-btn @click="sendForm()"
|
||||
style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
|
||||
class="mt-4 send-btn" block>
|
||||
Envoyez
|
||||
</v-btn>
|
||||
|
||||
|
||||
<!-- Text about joining us -->
|
||||
<p class="h3-text paragraph">Rejoignez l'aventure
|
||||
Hutopy : une
|
||||
invitation à façonner l'avenir de la création.
|
||||
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
|
||||
plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
|
||||
collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
|
||||
inspirer.
|
||||
</p>
|
||||
|
||||
<p class="h3-text paragraph">
|
||||
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
|
||||
d'élargir
|
||||
votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
|
||||
profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
|
||||
et
|
||||
l'innovation.
|
||||
</p>
|
||||
|
||||
<p class="h3-text h3-last-text paragraph">
|
||||
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de
|
||||
créateurs
|
||||
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et
|
||||
votre
|
||||
numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur
|
||||
Hutopy.
|
||||
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
|
||||
Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
|
||||
dans le ciel de notre utopie partagée.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-dialog v-model="showModal" max-width="600">
|
||||
<v-card>
|
||||
<v-card-title class="text-center" style="margin-top: 30px; margin-bottom: 40px;">
|
||||
<p style="font-size: 2rem; font-weight: 600">INFORMATIONS REÇU</p>
|
||||
</v-card-title>
|
||||
<v-icon class="mx-auto" style="font-size: 10em; color: #a30e79;">mdi-emoticon-happy</v-icon>
|
||||
<v-card-text style="margin-top: 40px; font-size: 1.3rem; margin-bottom: 50px;" class="text-justify">
|
||||
Merci de vous intéresser à notre projet. Lorsque nous serons prêts, nous vous contacterons afin que vous
|
||||
puissiez vous inscrire en primeur sur la plateforme pour nous aider à la développer. Chaque étape du
|
||||
développement est importante, et nous voulons construire cette plateforme avec vous, pour vous.
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-end" style="margin-right: 20px;">
|
||||
<v-btn to="/" size="large" class="text-center" color="primary" text @click="showModal = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useClient } from "@/plugins/api.js";
|
||||
import { ref } from 'vue';
|
||||
|
||||
const client = useClient();
|
||||
const showModal = ref(false);
|
||||
const name = ref("");
|
||||
const emailAddress = ref("");
|
||||
const reasonToJoin = ref("");
|
||||
const socialNetworkAccount = ref("");
|
||||
|
||||
//const firstName = name.value.split(" ")[0];
|
||||
//const lastName = name.value.split(" ")[1];
|
||||
|
||||
async function sendForm() {
|
||||
try {
|
||||
const requestBody = {
|
||||
FirstName: name.value,
|
||||
LastName: name.value,
|
||||
EmailAddress: emailAddress.value,
|
||||
PhoneNumber: "",
|
||||
SocialNetworkAccount: socialNetworkAccount.value,
|
||||
ReasonToJoin: reasonToJoin.value
|
||||
};
|
||||
|
||||
await client.post('/api/JoinUs', requestBody);
|
||||
showModal.value = true;
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.hutopy-backgroud-color {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.Scale-80 {
|
||||
transform: translateY(-30%);
|
||||
}
|
||||
|
||||
@media (min-width: 150px) and (max-width: 598px) {
|
||||
|
||||
.labelgroup {
|
||||
margin-top: -50%;
|
||||
}
|
||||
|
||||
.contact-image {
|
||||
|
||||
width: auto;
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
clip-path: polygon(0 30%, 100% 30%, 100% 80%, 0 80%);
|
||||
margin-top: -40%;
|
||||
margin-bottom: -30%;
|
||||
}
|
||||
|
||||
.hutopy-header-image {
|
||||
|
||||
height: 70px;
|
||||
margin-left: 5%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 5%;
|
||||
margin-bottom: 6%;
|
||||
margin-left: 5%;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
margin-left: 20%;
|
||||
margin-top: 16%;
|
||||
border-radius: 150px;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: 1.2rem;
|
||||
text-align: justify;
|
||||
|
||||
margin-bottom: 10%;
|
||||
margin-top: 3%;
|
||||
margin-left: 3%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.labelsize {
|
||||
max-width: 95%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 599px) and (max-width: 749px) {
|
||||
|
||||
.contact-image {
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
max-width: 100%;
|
||||
margin-top: 4%;
|
||||
height: 103%;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
margin-top: 20%;
|
||||
|
||||
border-radius: 30px;
|
||||
width: 140px;
|
||||
|
||||
min-width: 140px;
|
||||
margin-left: 55%;
|
||||
}
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 1.6rem;
|
||||
margin-top: 10%;
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
|
||||
|
||||
.paragraph {
|
||||
font-size: 1.3rem;
|
||||
text-align: justify;
|
||||
|
||||
margin-bottom: 4%;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
|
||||
.hutopy-header-image {
|
||||
margin-top: 6%;
|
||||
width: 400px;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 750px) and (max-width: 999px) {
|
||||
|
||||
.contact-image {
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
max-width: 100%;
|
||||
margin-top: 4%;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
margin-top: 35%;
|
||||
|
||||
border-radius: 30px;
|
||||
width: auto;
|
||||
min-width: 160px;
|
||||
max-width: 180px;
|
||||
margin-left: 40%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 2rem;
|
||||
margin-top: 10%;
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
|
||||
|
||||
.paragraph {
|
||||
font-size: 1.3rem;
|
||||
text-align: justify;
|
||||
|
||||
margin-bottom: 4%;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
.hutopy-header-image {
|
||||
margin-top: 6%;
|
||||
width: 500px;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) and (max-width: 1279px) {
|
||||
|
||||
.hutopy-header-image {
|
||||
margin: 0 auto;
|
||||
height: 120px;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
|
||||
.home-btn {
|
||||
margin-top: 5%;
|
||||
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
margin-left: 30%;
|
||||
margin-top: 37%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 3rem;
|
||||
margin-top: 3%;
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact-image {
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.row-joinus {
|
||||
margin-right: -4%;
|
||||
margin-left: -1%;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: 1.5rem;
|
||||
text-align: justify;
|
||||
margin-right: -4%;
|
||||
margin-bottom: 4%;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1280px) and (max-width: 1600px) {
|
||||
|
||||
.hutopy-header-image {
|
||||
margin: 0 auto;
|
||||
height: 165px;
|
||||
margin-left: -2.8%;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
margin-top: 5%;
|
||||
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
margin-left: 53%;
|
||||
margin-top: 45%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.row-between-logo-text {
|
||||
margin-top: 2%;
|
||||
|
||||
}
|
||||
|
||||
.contact-image {
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
margin-top: 0%;
|
||||
margin-left: -13%
|
||||
}
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 3rem;
|
||||
margin-top: 15%;
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
|
||||
.h3-text {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 2%;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.h3-last-text {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.row-joinus {
|
||||
margin-right: -8%;
|
||||
margin-left: -10%;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin-right: -6%;
|
||||
margin-left: -7%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1600px) and (max-width: 1919px) {
|
||||
|
||||
.hutopy-header-image {
|
||||
margin: 0 auto;
|
||||
height: 165px;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
margin-top: 5%;
|
||||
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
margin-left: 82%;
|
||||
margin-top: 40%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.row-between-logo-text {
|
||||
margin-top: 2%;
|
||||
|
||||
}
|
||||
|
||||
.contact-image {
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
margin-top: 0%;
|
||||
margin-left: -13%
|
||||
}
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 3rem;
|
||||
margin-top: 15%;
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
|
||||
.h3-text {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 2%;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.h3-last-text {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.row-joinus {
|
||||
margin-right: -15%;
|
||||
margin-left: -13%;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin-right: -16%;
|
||||
margin-left: -9%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
|
||||
.hutopy-header-image {
|
||||
margin: 0 auto;
|
||||
height: 160px;
|
||||
margin-left: -4.6%;
|
||||
}
|
||||
|
||||
.contact-image {
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.home-btn {
|
||||
margin-top: 5%;
|
||||
margin-left: 53%;
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
margin-bottom: -15%;
|
||||
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
margin-bottom: 4%;
|
||||
margin-top: -1%;
|
||||
}
|
||||
|
||||
.row-between-logo-text {
|
||||
margin-top: 3%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.home-row {
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 3rem;
|
||||
margin-top: 15%;
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
|
||||
.h3-text {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 2%;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.h3-last-text {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.row-joinus {
|
||||
margin-right: -18%;
|
||||
margin-left: -10%;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin-right: -20%;
|
||||
}
|
||||
|
||||
.page-margin {
|
||||
margin-left: -9%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 2559px) {
|
||||
|
||||
.hutopy-header-image {
|
||||
margin: 0 auto;
|
||||
height: 180px;
|
||||
margin-left: 3.5%;
|
||||
}
|
||||
|
||||
.contact-image {
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
|
||||
.home-btn {
|
||||
margin-top: 5%;
|
||||
margin-left: 30%;
|
||||
border-radius: 30px;
|
||||
width: 180px;
|
||||
min-width: 175px;
|
||||
margin-bottom: -15%;
|
||||
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
margin-bottom: 4%;
|
||||
margin-top: -1%;
|
||||
}
|
||||
|
||||
.row-between-logo-text {
|
||||
margin-top: 3%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.home-row {
|
||||
margin-left: 20%;
|
||||
|
||||
}
|
||||
|
||||
.h2-Participez-au-développement {
|
||||
font-size: 3rem;
|
||||
margin-top: 15%;
|
||||
margin-bottom: 6%;
|
||||
}
|
||||
|
||||
.h3-text {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 2%;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.h3-last-text {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.page-margin {
|
||||
margin-left: -5.5%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<div class="hidden sm:block" style="height: 40px"></div>
|
||||
<div>
|
||||
<div class="flex flex-col lg:flex-row items-center justify-center">
|
||||
<div class="max-w-[700px] min-w-[300px] mt-14">
|
||||
<img class="rounded-none sm:rounded-2xl sm:w-full mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
|
||||
</div>
|
||||
<div class="flex flex-col items-center min-w-[300px] sm:min-w-[400px] md:min-w-[500px] lg:min-w-[700px] m-12">
|
||||
<register-form></register-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import RegisterForm from "@/views/main/RegisterForm.vue";
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
</script>
|
||||
@@ -1,219 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-col items-center min-w-[300px] sm:min-w-[400px] md:min-w-[500px] lg:min-w-[700px] m-4">
|
||||
<h1 class="text-center text-2xl font-bold mb-5">Inscription</h1>
|
||||
<div class="w-full h-0.5 mt-4 mb-4" :style="{ backgroundColor: '#A30E79' }"></div>
|
||||
<div class="w-full">
|
||||
<v-text-field
|
||||
v-model="userName"
|
||||
label="Username"
|
||||
variant="outlined"
|
||||
dense
|
||||
prepend-inner-icon="mdi-account"
|
||||
color="transparent"
|
||||
class="text-black mb-4"
|
||||
:rules="[userNameRule]"
|
||||
></v-text-field>
|
||||
<div class="flex flex-wrap justify-between gap-4 mb-4">
|
||||
<v-text-field
|
||||
v-model="firstName"
|
||||
label="Prénom"
|
||||
variant="outlined"
|
||||
dense
|
||||
prepend-inner-icon="mdi-account"
|
||||
color="transparent"
|
||||
class="text-black flex-grow min-w-[250px]"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="lastName"
|
||||
label="Nom"
|
||||
variant="outlined"
|
||||
dense
|
||||
prepend-inner-icon="mdi-account"
|
||||
color="transparent"
|
||||
class="text-black flex-grow min-w-[250px]"
|
||||
></v-text-field>
|
||||
</div>
|
||||
<v-text-field
|
||||
v-model="emailAddress"
|
||||
label="Courriel"
|
||||
variant="outlined"
|
||||
dense
|
||||
prepend-inner-icon="mdi-email"
|
||||
color="transparent"
|
||||
class="text-black mb-4"
|
||||
:error="emailError"
|
||||
:error-messages="emailErrorMessage"
|
||||
:rules="[emailRule]"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
label="Mot de passe"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
variant="outlined"
|
||||
dense
|
||||
prepend-inner-icon="mdi-lock"
|
||||
append-inner-icon="mdi-eye"
|
||||
@click:append-inner="togglePasswordVisibility"
|
||||
color="transparent"
|
||||
class="text-black mb-4"
|
||||
:rules="[passwordRule]"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="confirmPassword"
|
||||
label="Confirmer mot de passe"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
variant="outlined"
|
||||
dense
|
||||
prepend-inner-icon="mdi-lock"
|
||||
append-inner-icon="mdi-eye"
|
||||
@click:append-inner="togglePasswordVisibility"
|
||||
color="transparent"
|
||||
class="text-black mb-4"
|
||||
:rules="[validatePasswordRule]"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
class="w-full text-center text-white"
|
||||
:style="{ backgroundColor: '#A30E79' }"
|
||||
@click="validateForm"
|
||||
>
|
||||
Créer
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal for errors -->
|
||||
<v-dialog v-model="errorDialog" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="headline">Erreur</v-card-title>
|
||||
<v-card-text>{{ errorMessage }}</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" text @click="closeErrorDialog">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useClient } from "@/plugins/api.js";
|
||||
|
||||
const router = useRouter();
|
||||
const client = useClient();
|
||||
|
||||
const firstName = ref('');
|
||||
const lastName = ref('');
|
||||
const emailAddress = ref('');
|
||||
const password = ref('');
|
||||
const confirmPassword = ref('');
|
||||
const userName = ref('');
|
||||
const showPassword = ref(false);
|
||||
const errorDialog = ref(false);
|
||||
const errorMessage = ref('');
|
||||
const emailError = ref(false);
|
||||
const emailErrorMessage = ref('');
|
||||
|
||||
// Validation regex
|
||||
const userNameRegex = /^[a-zA-Z0-9]+$/;
|
||||
const emailRegex = /.+@.+\..+/;
|
||||
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{6,}$/;
|
||||
|
||||
// Messages d'erreur
|
||||
const ERROR_MESSAGES = {
|
||||
INVALID_EMAIL: 'E-mail doit être valide',
|
||||
PASSWORD_MISMATCH: 'Les mots de passe ne correspondent pas.',
|
||||
WEAK_PASSWORD: 'Doit contenir 6 caractères, un chiffre, une lettre minuscule, majuscule et un caractère non-alphanumérique.',
|
||||
GENERIC_ERROR: 'Une erreur est survenue. Veuillez réessayer.',
|
||||
INVALID_USERNAME: "Le nom d'utilisateur ne doit contenir que des lettres sans accent et/ou des chiffres.",
|
||||
};
|
||||
|
||||
function togglePasswordVisibility() {
|
||||
showPassword.value = !showPassword.value;
|
||||
}
|
||||
|
||||
function passwordRule(password) {
|
||||
if (passwordRegex.test(password)) {
|
||||
return true;
|
||||
}
|
||||
return ERROR_MESSAGES.WEAK_PASSWORD;
|
||||
}
|
||||
|
||||
function validatePasswordRule(validatePassword) {
|
||||
if (password.value === validatePassword) {
|
||||
return true;
|
||||
}
|
||||
return ERROR_MESSAGES.PASSWORD_MISMATCH;
|
||||
}
|
||||
|
||||
function emailRule(email) {
|
||||
if (emailRegex.test(email)) {
|
||||
return true;
|
||||
}
|
||||
return ERROR_MESSAGES.INVALID_EMAIL
|
||||
}
|
||||
|
||||
function userNameRule(userName) {
|
||||
if (userNameRegex.test(userName)){
|
||||
return true
|
||||
}
|
||||
return ERROR_MESSAGES.INVALID_USERNAME;
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
emailError.value = false;
|
||||
emailErrorMessage.value = '';
|
||||
|
||||
if (!emailRegex.test(emailAddress.value)) {
|
||||
emailError.value = true;
|
||||
emailErrorMessage.value = ERROR_MESSAGES.INVALID_EMAIL;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!userNameRegex.test(userName.value)){
|
||||
showErrorDialog(ERROR_MESSAGES.INVALID_EMAIL);
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.value !== confirmPassword.value) {
|
||||
showErrorDialog(ERROR_MESSAGES.PASSWORD_MISMATCH);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!passwordRegex.test(password.value)) {
|
||||
showErrorDialog(ERROR_MESSAGES.WEAK_PASSWORD);
|
||||
return;
|
||||
}
|
||||
|
||||
createUser();
|
||||
}
|
||||
|
||||
function showErrorDialog(message) {
|
||||
errorMessage.value = message;
|
||||
errorDialog.value = true;
|
||||
}
|
||||
|
||||
function closeErrorDialog() {
|
||||
errorDialog.value = false;
|
||||
}
|
||||
|
||||
async function createUser() {
|
||||
try {
|
||||
const userInformation = {
|
||||
FirstName: firstName.value,
|
||||
LastName: lastName.value,
|
||||
EmailAddress: emailAddress.value,
|
||||
UserName: userName.value,
|
||||
Password: password.value,
|
||||
};
|
||||
|
||||
await client.post('/api/Users', userInformation);
|
||||
router.push('/login');
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
showErrorDialog(ERROR_MESSAGES.GENERIC_ERROR);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user