Implement Marian's feedback

svsticky · Sep 14, 2024 · d37d440 · d37d440
1 parent 2e22d9a
commit d37d440
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 47 deletions.
diff --git a/frontend/src/plugins/locales/en.ts b/frontend/src/plugins/locales/en.ts
@@ -1,12 +1,12 @@
 import {Locale} from "@/plugins/locales/locale";
 
 const EN: Locale = {
-  site_title: "Anonymous reporting point",
+  site_title: "Reporting point for intolerant behaviour",
   error: "Something went wrong, please try again later",
   home: {
     welcome: {
-      title: "Welcome to the anonymous reporting point of Sticky",
-      subtitle: "You can make fully anonymous reports here about unnapropriate behaviour or sexual misconduct. You can send this report to (one of the) confidential advisors or to the board, that is completely up to you. Furthermore, you can choose if you want us to contact you if you would like to hear back from us, of course, this is not required",
+      title: "Welcome to the reporting point for intolerant behaviour for Sticky",
+      subtitle: "You can make fully anonymous reports here about of unwanted, transgressive, threatening, humiliating or intimidating behavior. You can send this report to (one of the) confidential advisors or to the board, that is completely up to you. Furthermore, you can choose if you want us to contact you if you would like to hear back from us, of course, this is not required",
     },
     form: {
       title: "Describe your report",

diff --git a/frontend/src/plugins/locales/nl.ts b/frontend/src/plugins/locales/nl.ts
@@ -1,12 +1,12 @@
 import {Locale} from "@/plugins/locales/locale";
 
 const NL: Locale = {
-  site_title: "Anoniem meldpunt",
+  site_title: "Meldpunt voor intolerant gedrag",
   error: "Er is iets verkeerd gegaan, probeer het later opnieuw",
   home: {
     welcome: {
-      title: "Welkom bij het anonieme meldpunt van Sticky",
-      subtitle: "Je kunt hier volledig annoniem een melding maken van ongewenst gedrag en seksueel wangedrag. Je kunt deze melding versturen aan het bestuur of (een van de) vertrouwenscontactpersonen, dat is aan jou. Ook kun je er voor kiezen dat er contact met je mag worden opgenomen als je graag terugkoppeling wilt, uiteraard is dit niet verplicht."
+      title: "Welkom bij het meldpunt voor intolerant gedrag van Sticky",
+      subtitle: "Je kunt hier volledig anoniem een melding maken van ongewenst, grensoverschrijdend, bedreigend, vernederend of intimiderend gedrag. Je kunt deze melding versturen aan het bestuur of aan (een van) de vertrouwenscontactpersonen, dat is aan jou. Ook kun je er voor kiezen dat er contact met je mag worden opgenomen als je graag terugkoppeling wilt, uiteraard is dit niet verplicht."
     },
     form: {
       title: "Omschrijving van je melding",
@@ -16,7 +16,7 @@ const NL: Locale = {
       invalidEmail: "Het opgegeven email adres is ongeldig",
       required: "Vereist",
       submit: "Melding versturen",
-      toReceivers: "Aan wie wil je dat jouw bericht wordt verstuurd?",
+      toReceivers: "Aan wie wil je dat jouw melding wordt verstuurd?",
       selectReceivers: "Selecteer..",
       allowContact: "Wil je dat we contact met je opnemen naar aanleiding van je melding?",
       contactEmail: "Email adres",

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -28,7 +28,43 @@
         </h3>
         <p> {{ $t('home.form.subtitle') }} </p>
 
-        <v-form v-model="report.valid">
+        <v-form
+          ref="form"
+          v-model="report.valid"
+        >
+          <v-row align="center">
+            <v-col>
+              <p class="mb-2">
+                {{ $t('home.form.allowContact') }}
+              </p>
+            </v-col>
+            <v-col>
+              <v-checkbox
+                v-model="report.allowContact"
+                color="primary"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row
+            v-if="report.allowContact"
+            align="center"
+          >
+            <v-col>
+              <p class="mb-2">
+                {{ $t('home.form.contactEmailExplanation') }}:
+              </p>
+            </v-col>
+            <v-col>
+              <v-text-field
+                v-model="report.contactEmail"
+                :rules="rules.optionalEmail"
+                :label="$t('home.form.contactEmail')"
+                color="primary"
+              />
+            </v-col>
+          </v-row>
+
           <v-textarea
             v-model="report.message"
             style="white-space: normal;"
@@ -64,40 +100,6 @@
               />
             </v-col>
           </v-row>
-
-          <v-row align="center">
-            <v-col>
-              <p class="mb-2">
-                {{ $t('home.form.allowContact') }}
-              </p>
-            </v-col>
-            <v-col>
-              <v-checkbox
-                v-model="report.allowContact"
-                color="primary"
-              />
-            </v-col>
-          </v-row>
-
-          <v-row
-            v-if="report.allowContact"
-            align="center"
-          >
-            <v-col>
-              <p class="mb-2">
-                {{ $t('home.form.contactEmailExplanation') }}:
-              </p>
-            </v-col>
-            <v-col>
-              <v-text-field
-                v-model="report.contactEmail"
-                :rules="rules.optionalEmail"
-                :label="$t('home.form.contactEmail')"
-                validate-on="blur"
-                color="primary"
-              />
-            </v-col>
-          </v-row>
         </v-form>
       </v-card-text>
 
@@ -121,6 +123,7 @@ import {ConfidentialAdvisor} from "@/scripts/config";
 import {InputValidationRules} from "@/main";
 import {Report} from "@/scripts/report"
 import MaterialBanner from "@/views/components/MaterialBanner.vue"
+import {VForm} from "vuetify/components";
 
 interface Data {
   error: string | undefined,
@@ -180,16 +183,23 @@ export default defineComponent({
         required: [
           v => !!v || this.$t("home.form.required")
         ],
-        optionalEmail: [
-          v => v ? (/[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+/.test(v) || this.$t('home.form.invalidEmail')) : true
-        ]
+        optionalEmail: this.optionalEmailRules()
       }
     }
   },
   mounted() {
       this.loadAdvisors();
   },
   methods: {
+    optionalEmailRules(): InputValidationRules {
+      return [
+        v => this.report.allowContact ? !!v || this.$t("home.form.required") : true,
+        v => v ? (/[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+/.test(v) || this.$t('home.form.invalidEmail')) : true
+      ];
+    },
+    async validateForm(): Promise<boolean> {
+      return (await (<VForm> this.$refs.form).validate()).valid;
+    },
     async loadAdvisors() {
       const r = await ConfidentialAdvisor.list();
       if(r.isErr()) {
@@ -201,7 +211,7 @@ export default defineComponent({
       this.receivers.push(new Receiver(this.$t('home.form.board'), new BoardReceiver(), ReceiverType.BOARD));
     },
     async submitForm() {
-      if(!this.report.valid) {
+      if(!this.report.valid || !(await this.validateForm())) {
         this.error = this.$t("home.form.invalid");
         return;
       }
@@ -219,7 +229,7 @@ export default defineComponent({
         .length > 0;
 
       this.report.loading = true;
-      const r = await Report.report(this.report.message!, toBoard, toAdvisors, this.report.contactEmail);
+      const r = await Report.report(this.report.message!, toBoard, toAdvisors, this.report.allowContact ? this.report.contactEmail : null);
       this.report.loading = false;
 
       if(r.isErr()) {