styling finalization of job application form

components/JoinUs/Form.vue

@@ -1,89 +1,92 @@
 <template>
-  <v-card>
-    <v-card-title
-      class="text-center"
+  <div>
+    <v-card
+      v-if="!jobApplicationSent"
     >
-      Formulaire de Candidature
-    </v-card-title>
-
-    <v-card-text>
-      <v-form
-        v-if="!jobApplicationSent"
-        ref="form"
-        validate-on="submit lazy"
-        @submit.prevent="submit"
+      <v-card-title
+        class="text-center"
       >
-        <v-text-field
-          id="jobApplicationName"
-          v-model="jobApplication.name"
-          :rules="[validateName]"
-          label="Nom*"
-          required
-        />
-
-        <v-text-field
-          id="jobApplicationSurname"
-          v-model="jobApplication.surname"
-          :rules="[validateSurname]"
-          label="Prénom*"
-          required
-        />
-
-        <v-text-field
-          id="jobApplicationPhone"
-          v-model="jobApplication.phone"
-          :rules="[validatePhone]"
-          label="Téléphone*"
-          required
-        />
-
-        <v-text-field
-          id="jobApplicationEmail"
-          v-model="jobApplication.email"
-          :rules="[validateEmail]"
-          label="Email*"
-          required
-        />
-
-        <v-file-input
-          id="jobApplicationResume"
-          v-model="jobApplication.resume"
-          label="Dépôt de CV*"
-          accept=".pdf, .jpeg, .png"
-          required
-        />
-
-        <v-file-input
-          id="jobApplicationMotivationLetter"
-          v-model="jobApplication.motivationLetter"
-          label="Dépôt de lettre de motivation"
-          accept=".pdf, .jpeg, .png"
-        />
-
-        <v-textarea
-          id="jobApplicationMessage"
-          v-model="jobApplication.message"
-          :rules="[validateNonEmptyMessage, validateMessageLength]"
-          label="Message*"
-          required
-        />
-        <span class="remaining-cars-notice">{{ leftCars }} caractères restants</span>
-      </v-form>
-    </v-card-text>
-
-    <p class="text-right mr-6">
-      * Champs obligatoires
-    </p>
-
-    <v-card-actions class="justify-center">
-      <v-btn
-        class="btn-more mb-4"
-        @click="submit"
-      >
-        Envoyer
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+        Formulaire de Candidature
+      </v-card-title>
+
+      <v-card-text>
+        <v-form
+          ref="form"
+          validate-on="submit lazy"
+          @submit.prevent="submit"
+        >
+          <v-text-field
+            id="jobApplicationName"
+            v-model="jobApplication.name"
+            :rules="[validateName]"
+            label="Nom*"
+            required
+          />
+
+          <v-text-field
+            id="jobApplicationSurname"
+            v-model="jobApplication.surname"
+            :rules="[validateSurname]"
+            label="Prénom*"
+            required
+          />
+
+          <v-text-field
+            id="jobApplicationPhone"
+            v-model="jobApplication.phone"
+            :rules="[validatePhone]"
+            label="Téléphone*"
+            required
+          />
+
+          <v-text-field
+            id="jobApplicationEmail"
+            v-model="jobApplication.email"
+            :rules="[validateEmail]"
+            label="Email*"
+            required
+          />
+
+          <v-file-input
+            id="jobApplicationResume"
+            v-model="jobApplication.resume"
+            label="Dépôt de CV*"
+            accept=".pdf, .jpeg, .png"
+            required
+          />
+
+          <v-file-input
+            id="jobApplicationMotivationLetter"
+            v-model="jobApplication.motivationLetter"
+            label="Dépôt de lettre de motivation"
+            accept=".pdf, .jpeg, .png"
+          />
+
+          <v-textarea
+            id="jobApplicationMessage"
+            v-model="jobApplication.message"
+            :rules="[validateNonEmptyMessage, validateMessageLength]"
+            label="Message*"
+            required
+          />
+          <span class="remaining-cars-notice">{{ leftCars }} caractères restants</span>
+        </v-form>
+      </v-card-text>
+
+      <p class="text-right mr-6">
+        * Champs obligatoires
+      </p>
+
+      <v-card-actions class="justify-center">
+        <v-btn
+          class="btn-more mb-4"
+          @click="submit"
+        >
+          Envoyer
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
 </template>
 
 <script setup lang="ts">

components/JoinUs/Missions.vue

@@ -84,13 +84,23 @@
       no-click-animation
       :retain-focus="false"
     >
-      <JoinUsForm />
+      <div v-if="!jobApplicationSent">
+        <JoinUsForm @submit="onFormSubmit"/>
 
-      <v-btn
-        @click="dialog = false"
-      >
-        Annuler
-      </v-btn>
+        <v-btn @click="dialog = false">
+          Annuler
+        </v-btn>
+      </div>
+      <div v-else>
+        <v-card class="pa-6 text-center">
+          Votre candidature a bien été envoyée, merci de votre intérêt.<br/>
+          Nous vous recontacterons dès que possible.
+        </v-card>
+
+        <v-btn @click="dialog = false">
+          Fermer
+        </v-btn>
+      </div>
     </v-dialog>
   </LayoutContainer>
 </template>
@@ -139,6 +149,13 @@ const onPageUpdated = async (newVal: number): Promise<void> => {
  * Faut-il afficher la boite de dialogue de candidature
  */
 const dialog = ref(false);
+const jobApplicationSent: Ref<boolean> = ref(false)
+
+const onFormSubmit = () => {
+  jobApplicationSent.value = true
+}
+
+
 </script>
 
 <style scoped lang="scss">
@@ -236,8 +253,16 @@ const dialog = ref(false);
 }
 
 .v-dialog {
-  .btn-more {
-    width: 128px;
+  :deep(.v-card) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .v-btn {
+    width: 100%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
+
 }
 </style>