|
|
@@ -10,10 +10,10 @@
|
|
|
>
|
|
|
<v-container>
|
|
|
<h4>
|
|
|
- Veuillez remplir le formulaire ci-dessous
|
|
|
+ <span class="line" /> Veuillez remplir le formulaire ci-dessous
|
|
|
</h4>
|
|
|
|
|
|
- <i>Les champs dont le nom est suivi d'une astérisque (*) sont obligatoires</i>
|
|
|
+ <i>Les champs dont le nom est suivi d'un astérisque (*) sont obligatoires</i>
|
|
|
|
|
|
<h6>
|
|
|
Vos coordonnées
|
|
|
@@ -108,7 +108,7 @@
|
|
|
</v-row>
|
|
|
|
|
|
<h6>
|
|
|
- Votre demande concerne
|
|
|
+ Votre demande concerne *
|
|
|
</h6>
|
|
|
|
|
|
<!-- Request type and product concerned -->
|
|
|
@@ -119,18 +119,14 @@
|
|
|
:items="requestTypes"
|
|
|
item-value="id"
|
|
|
item-title="label"
|
|
|
- label="Votre demande concerne *"
|
|
|
- outlined
|
|
|
- dense
|
|
|
+ variant="outlined"
|
|
|
/>
|
|
|
</v-col>
|
|
|
|
|
|
<v-col cols="12" md="6">
|
|
|
<v-text-field
|
|
|
v-model="contactRequest.concernedProduct"
|
|
|
- label="Le produit concerné"
|
|
|
- outlined
|
|
|
- dense
|
|
|
+ label="Produit concerné (facultatif)"
|
|
|
/>
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
@@ -140,17 +136,16 @@
|
|
|
</h6>
|
|
|
|
|
|
<!-- Message -->
|
|
|
- <v-row>
|
|
|
+ <v-row class="mb-8">
|
|
|
<v-col cols="12">
|
|
|
<v-textarea
|
|
|
v-model="contactRequest.message"
|
|
|
:rules="[validateNonEmptyMessage, validateMessageLength]"
|
|
|
label="Votre message*"
|
|
|
required
|
|
|
- outlined
|
|
|
- dense
|
|
|
maxlength="400"
|
|
|
/>
|
|
|
+ <span class="remaining-cars-notice">{{ leftCars }} caractères restants</span>
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
|
|
|
@@ -166,18 +161,32 @@
|
|
|
label="Je souhaite recevoir des communications d'Opentalent par email (promotions, informations logiciel…). Je pourrai me désinscrire à tout moment."
|
|
|
/>
|
|
|
|
|
|
- <!-- @see https://github.com/hCaptcha/vue-hcaptcha -->
|
|
|
- <LayoutCaptcha/>
|
|
|
+ <div class="d-flex flex-row justify-center">
|
|
|
+ <!-- @see https://github.com/hCaptcha/vue-hcaptcha -->
|
|
|
+ <LayoutCaptcha/>
|
|
|
+ </div>
|
|
|
|
|
|
<!-- Submit Button -->
|
|
|
- <v-row class="mt-12">
|
|
|
- <v-col cols="12">
|
|
|
- <v-btn type="submit">
|
|
|
- Envoyer
|
|
|
- </v-btn>
|
|
|
- </v-col>
|
|
|
- </v-row>
|
|
|
+ <div class="d-flex flex-row justify-center my-10">
|
|
|
+ <v-btn
|
|
|
+ type="submit"
|
|
|
+ variant="outlined"
|
|
|
+ :height="54"
|
|
|
+ :width="180"
|
|
|
+ class="submit-btn"
|
|
|
+ >
|
|
|
+ Envoyer
|
|
|
+ </v-btn>
|
|
|
+ </div>
|
|
|
</v-container>
|
|
|
+
|
|
|
+ <div class="legal">
|
|
|
+ Les données recueillies par Opentalent sont utilisées pour le traitement de votre demande et pour vous informer sur nos offres.
|
|
|
+ Elles sont destinées aux services Opentalent et à ses sous-traitants pour l’exécution des contrats. Conformément à la loi
|
|
|
+ "Informatique et Libertés du 6 Janvier 1978", vous disposez d’un droit d’accès, de modifications, de rectification et de suppression
|
|
|
+ des données vous concernant. Pour toute demande, adressez-vous à : Opentalent, 217 rue Raoul Follereau, 74300 CLUSES,
|
|
|
+ opentalent.fr s’engage à la confidentialité et à la protection de vos données.
|
|
|
+ </div>
|
|
|
</v-form>
|
|
|
|
|
|
<div v-else class="confirmation-message d-flex flex-row justify-center">
|
|
|
@@ -213,6 +222,12 @@ const defaultRequestType = route.query.request ?? 'CONTACT_REQUEST_INFORMATION'
|
|
|
//@ts-ignore
|
|
|
const contactRequest: ContactRequest = reactive(em.newInstance(ContactRequest, { requestType: defaultRequestType }))
|
|
|
|
|
|
+const maxMessageLength = 2000
|
|
|
+
|
|
|
+const leftCars: ComputedRef<number> = computed(() =>
|
|
|
+ maxMessageLength - (contactRequest.message ? contactRequest.message.length : 0)
|
|
|
+)
|
|
|
+
|
|
|
// --- Validation ---
|
|
|
const validateName = (name: string | null) => !!name || "Le nom est obligatoire";
|
|
|
|
|
|
@@ -235,9 +250,8 @@ const validateNonEmptyMessage = (message: string | null) =>
|
|
|
"Le message ne peut pas être vide";
|
|
|
|
|
|
const validateMessageLength = (message: string | null) =>
|
|
|
- (!!message && message.length <= 400) ||
|
|
|
- "Le message ne doit pas dépasser 400 caractères";
|
|
|
-
|
|
|
+ (!!message && message.length <= maxMessageLength) ||
|
|
|
+ "Le message ne doit pas dépasser " + maxMessageLength + " caractères";
|
|
|
|
|
|
const contactRequestSent: Ref<boolean> = ref(false);
|
|
|
|
|
|
@@ -247,7 +261,6 @@ const contactRequestSent: Ref<boolean> = ref(false);
|
|
|
* This function validates the form and sets the value of a variable to indicate whether the form submission was successful.
|
|
|
*
|
|
|
* @function
|
|
|
- * @name submitForm
|
|
|
*
|
|
|
* @returns {void}
|
|
|
*/
|
|
|
@@ -273,20 +286,58 @@ const submit = async (): Promise<void> => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+
|
|
|
.v-form {
|
|
|
max-width: 1400px;
|
|
|
margin: 0 auto;
|
|
|
|
|
|
h4 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
font-size: 40px;
|
|
|
line-height: 95px;
|
|
|
margin-bottom: 1rem;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 100;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ width: 64px;
|
|
|
+ min-width: 64px;
|
|
|
+ border-top: solid 1px var(--on-neutral-color);
|
|
|
+ margin-right: 18px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
h6 {
|
|
|
margin-top: 32px;
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 16px;
|
|
|
margin-bottom: 1rem;
|
|
|
+ text-transform: uppercase;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .v-select {
|
|
|
+ .v-field {
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .remaining-cars-notice {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 550;
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit-btn {
|
|
|
+ border-radius: 0;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .legal {
|
|
|
+ opacity: 0.7;
|
|
|
}
|
|
|
}
|
|
|
|
Olivier Massot