From 67aa3d9749c7f68f37f1909ae935d744321c104e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Ple=C3=9F?= <lpless@theaterdo.de>
Date: Thu, 6 Feb 2025 14:28:39 +0100
Subject: [PATCH] =?UTF-8?q?englisch=20/=20deutsch=20und=20footer=20f=C3=BC?=
 =?UTF-8?q?r=20impressum=20und=20datenschutz?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html                 | 11 +++++++-
 frontend/src/components/Contact.vue | 42 +++++++++++++++--------------
 2 files changed, 32 insertions(+), 21 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index a8327d6..b8c4c71 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,11 +5,20 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="/favicon.ico">
-    <title>Zammad Form</title>
+    <title>Theater Dortmund Ticket Formular</title>
   </head>
   <body>
     
     <div id="app"></div>
+
+    
+    <footer class="text-center text-lg-start bg-body-tertiary text-muted">
+      <div class="text-center p-4">
+        © 2025 Theater Dortmund. 
+        <a class="text-reset" href="https://www.theaterdo.de/impressum">Impressum</a> /
+        <a class="text-reset" href="https://www.theaterdo.de/datenschutz/">Datenschutz</a>
+      </div>
+    </footer>
     
     <script type="module" src="/src/main.js"></script>
   </body>
diff --git a/frontend/src/components/Contact.vue b/frontend/src/components/Contact.vue
index a5f45bc..715721c 100644
--- a/frontend/src/components/Contact.vue
+++ b/frontend/src/components/Contact.vue
@@ -62,31 +62,33 @@ async function submit() {
 <template>
     <div class="container">
 
-        <h1>Ticket erstellen</h1>
+        <h1>Ticket erstellen  <small class="text-muted">/ Create Ticket</small></h1>
 
         <div v-if="success" class="alert alert-success" role="alert">
-            Das Formular wurde versendet. Es wurde ein neues Ticket angelegt.
+            Das Formular wurde versendet. Es wurde ein neues Ticket angelegt.<br/>
+            <small class="text-muted">The form has been sent. A new ticket has been created.</small>
         </div>
         <div v-if="error" class="alert alert-danger" role="alert">
             Das Formular konnte nicht abgeschickt werden. Bitte wenden Sie sich per E-Mail an
-            <a href="mailto:it-theater@theaterdo.de">it-theater@theaterdo.de</a>.
+            <a href="mailto:it-theater@theaterdo.de">it-theater@theaterdo.de</a>.<br/>
+            <small class="text-muted">The form could not be sent. Please send an e-mail to the IT-Department.</small>
         </div>
 
 
         <form v-if="!success" @submit.prevent="submit" class="needs-validation" novalidate>
             <div class="row mb-3">
-                <div class="col">
+                <div class="col-md">
                     <div data-mdb-input-init class="form-outline">
-                        <label class="form-label" for="firstname">Vorname *</label>
+                        <label class="form-label" for="firstname">Vorname <small class="text-muted">/ Firstname</small> *</label>
                         <input type="text" id="firstname" class="form-control"
                             :class="{ 'is-invalid': v$.firstname.$error }" v-model="formdata.firstname" required />
                         <span class="invalid-feedback" v-if="v$.firstname.$error"> {{ v$.firstname.$errors[0].$message
                             }} </span>
                     </div>
                 </div>
-                <div class="col">
+                <div class="col-md">
                     <div data-mdb-input-init class="form-outline">
-                        <label class="form-label" for="lastname">Nachname *</label>
+                        <label class="form-label" for="lastname">Nachname <small class="text-muted">/ Lastname</small> *</label>
                         <input type="text" id="lastname" class="form-control"
                             :class="{ 'is-invalid': v$.lastname.$error }" v-model="formdata.lastname" required />
                         <span class="invalid-feedback" v-if="v$.lastname.$error"> {{ v$.lastname.$errors[0].$message }}
@@ -96,14 +98,14 @@ async function submit() {
             </div>
 
             <div class="row mb-4">
-                <div class="col">
-                    <label for="emailaddress" class="form-label">Email Adresse *</label>
+                <div class="col-md">
+                    <label for="emailaddress" class="form-label">Email Adresse <small class="text-muted">/ E-Mail address</small> *</label>
                     <input type="email" class="form-control" id="emailaddress" :class="{ 'is-invalid': v$.email.$error }"
                         v-model="formdata.email" required />
                     <span class="invalid-feedback" v-if="v$.email.$error"> {{ v$.email.$errors[0].$message }} </span>
                 </div>
-                <div class="col">
-                    <label for="phone" class="form-label">Telefon:</label>
+                <div class="col-md">
+                    <label for="phone" class="form-label">Telefon <small class="text-muted">/ Phone number </small></label>
                     <input type="text" class="form-control" id="phone" v-model="formdata.phone">
                 </div>
             </div>
@@ -111,8 +113,8 @@ async function submit() {
             <hr class="mb-4" />
 
             <div class="row mb-3">
-                <div class="col">
-                    <label for="building" class="form-label">Gebäude *</label>
+                <div class="col-md">
+                    <label for="building" class="form-label">Gebäude <small class="text-muted">/ Building</small> *</label>
                     <select id="building" class="form-select" :class="{ 'is-invalid': v$.building.$error }"
                         v-model="formdata.building" required>
                         <option v-for="option in buildings" :value="option.name">{{ option.name }}</option>
@@ -120,8 +122,8 @@ async function submit() {
                     <span class="invalid-feedback" v-if="v$.building.$error"> {{ v$.building.$errors[0].$message }}
                     </span>
                 </div>
-                <div class="col">
-                    <label for="room" class="form-label">Raum *</label>
+                <div class="col-md">
+                    <label for="room" class="form-label">Raum <small class="text-muted">/ Room</small> *</label>
                     <input type="text" class="form-control" id="room" :class="{ 'is-invalid': v$.room.$error }"
                         v-model="formdata.room" required />
                     <span class="invalid-feedback" v-if="v$.room.$error"> {{ v$.room.$errors[0].$message }} </span>
@@ -129,7 +131,7 @@ async function submit() {
             </div>
 
             <div class="mb-3">
-                <label for="description" class="form-label">Was ist los? *</label>
+                <label for="description" class="form-label">Was ist los? <small class="text-muted">/ What's going on?</small> *</label>
                 <textarea class="form-control" id="description" rows="4" :class="{ 'is-invalid': v$.description.$error }"
                     v-model="formdata.description" required>
                 </textarea>
@@ -138,8 +140,8 @@ async function submit() {
             </div>
 
             <div class="mb-3">
-                <label for="group" class="form-label">An wen soll das Ticket gehen? *</label>
-                <select id="group" class="form-select" v-model="formdata.group" :class="{ 'is-invalid': v$.group.$error }"
+                <label for="group" class="form-label">An wen soll das Ticket gehen? <small class="text-muted">/ Who should receive the ticket? </small>*</label>
+                <select id="group" class="form-select mb-1" v-model="formdata.group" :class="{ 'is-invalid': v$.group.$error }"
                     required>
                     <option v-for="option in groups" :value="option">{{ option }}</option>
                 </select>
@@ -149,12 +151,12 @@ async function submit() {
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info" viewBox="0 0 16 16">
                         <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
                     </svg>
-                    Zuständigkeiten anzeigen
+                    Zuständigkeiten anzeigen <small class="text-muted">/ Show responsibilities (German only)</small>
                 </a>
                 
             </div>
 
-            <hr/>
+
             <button :disabled="sending" type="submit" class="btn btn-primary">Absenden</button>
         </form>
 
