Merge branch 'main' into issue-3911issue-3911

4 files changed, 85 insertions, 13 deletions

diff --git a/resources/vue/components/form_inputs/CalendarPermissionsTable.vue b/resources/vue/components/form_inputs/CalendarPermissionsTable.vue
index a0a76a2..e507adc 100644
--- a/resources/vue/components/form_inputs/CalendarPermissionsTable.vue
+++ b/resources/vue/components/form_inputs/CalendarPermissionsTable.vue
@@ -30,14 +30,16 @@
                                v-model="user.write_permissions"
                                :aria-label="$gettextInterpolate(
                                    $gettext('Schreibzugriff für %{name}'),
-                                   {name: user.name}
+                                   {name: user.name},
+                                   true
                                )">
                     </td>
                     <td class="actions">
                         <studip-icon shape="trash" aria-role="button" @click="removeContact(user.id)"
                                      :title="$gettextInterpolate(
                                          $gettext('Kalender nicht mehr mit %{name} teilen'),
-                                         {name: user.name}
+                                         {name: user.name},
+                                         true
                                      )"></studip-icon>
                     </td>
                 </tr>
diff --git a/resources/vue/components/form_inputs/CaptchaInput.vue b/resources/vue/components/form_inputs/CaptchaInput.vue
new file mode 100644
index 0000000..1409aa8
--- /dev/null
+++ b/resources/vue/components/form_inputs/CaptchaInput.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="formpart">
+        <altcha-widget :challengeurl="challengeUrl" ref="widget"></altcha-widget>
+    </div>
+</template>
+<script>
+import 'altcha';
+import { $gettext } from '../../../assets/javascripts/lib/gettext';
+
+export default {
+    name: 'CaptchaInput',
+    props: {
+        name: {
+            type: String,
+            default: 'altcha'
+        },
+        challengeUrl: {
+            type: String,
+            requird: true,
+        },
+        auto: {
+            type: String,
+            default: null,
+            validator: (value) => ['onfocus', 'onload', 'onsubmit'].includes(value),
+        }
+    },
+    data() {
+        return {};
+    },
+    methods: {
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.$refs.widget.configure({
+                auto: this.auto,
+                name: this.name,
+                hidefooter: false,
+                hidelogo: false,
+                strings: {
+                    error: $gettext('Überprüfung fehlgeschlagen. Versuchen Sie es später erneut.'),
+                    footer: $gettext('Geschützt von <a href="https://altcha.org/" target="_blank">ALTCHA</a>'),
+                    label: $gettext('Ich bin kein Bot'),
+                    verified: $gettext('Überprüft'),
+                    verifying: $gettext('Überprüfung...'),
+                    waitAlert: $gettext('Überprüfung... Bitte warten.'),
+                },
+            });
+
+            this.$refs.widget.addEventListener('statechange', (ev) => {
+                if (ev.detail.state === 'verified') {
+                    this.$emit('input', ev.detail.payload);
+                }
+            })
+        });
+    }
+}
+</script>
+<style>
+:root {
+    --altcha-border-width: 0;
+    --altcha-border-radius: 0;
+    --altcha-color-base: transparent;
+    --altcha-color-border: #a0a0a0;
+    --altcha-color-text: currentColor;
+    --altcha-color-border-focus: currentColor;
+    --altcha-color-error-text: var(--red);
+    --altcha-color-footer-bg: none;
+    --altcha-max-width: auto;
+}
+</style>
diff --git a/resources/vue/components/form_inputs/DateListInput.vue b/resources/vue/components/form_inputs/DateListInput.vue
index 05f3c57..d77c993 100644
--- a/resources/vue/components/form_inputs/DateListInput.vue
+++ b/resources/vue/components/form_inputs/DateListInput.vue
@@ -2,11 +2,11 @@
     <div class="formpart">
         <div class="sr-only" aria-live="polite" ref="list_message_field"></div>
         <ul>
-            <li v-for="date in selected_date_list" v-bind="selected_date_list" :key="date">
+            <li v-for="date in selected_date_list" v-bind="selected_date_list" :key="getISODate(date)">
                 <input type="hidden" :name="input_name + '[]'" :value="getISODate(date)">
                 <studip-date-time :timestamp="Math.floor(date.getTime() / 1000)" :date_only="true"></studip-date-time>
-                <studip-icon shape="trash" :title="$gettext('Löschen')" @click="removeDate"
-                             class="enter-accessible" aria-role="button" tabindex="0"></studip-icon>
+                <studip-icon shape="trash" :title="$gettext('Löschen')" @click="removeDate(date)"
+                             class="icon enter-accessible button undecorated" aria-role="button" tabindex="0"></studip-icon>
             </li>
         </ul>
         <label>
@@ -82,13 +82,13 @@ export default {
             this.selected_date_list.push(new Date(reformatted_date));
             this.$refs.list_message_field.innerText = $gettextInterpolate($gettext('Datum %{date} hinzugefügt'), {date: this.selected_date_value});
         },
-        removeDate(date_key) {
-            if (date_key) {
-                let date = this.selected_date_list.at(date_key);
-                let formatted_date = STUDIP.DateTime.getStudipDate(date, false, true);
-                this.selected_date_list.splice(date_key, 1);
-                this.$refs.list_message_field.innerText = $gettextInterpolate($gettext('Datum %{date} entfernt'), {date: formatted_date});
-            }
+        removeDate(date) {
+            this.selected_date_list = this.selected_date_list.filter(d => d !== date);
+
+            this.$refs.list_message_field.innerText = $gettextInterpolate(
+                $gettext('Datum %{date} entfernt'),
+                {date: STUDIP.DateTime.getStudipDate(date, false, true)}
+            );
         },
         getISODate(date) {
             return STUDIP.DateTime.getISODate(date);
diff --git a/resources/vue/components/form_inputs/MyCoursesColouredTable.vue b/resources/vue/components/form_inputs/MyCoursesColouredTable.vue
index d2cc2f1..fe67db5 100644
--- a/resources/vue/components/form_inputs/MyCoursesColouredTable.vue
+++ b/resources/vue/components/form_inputs/MyCoursesColouredTable.vue
@@ -42,7 +42,7 @@
                         <input type="hidden" :name="`${name}_course_ids[${course.id}]`" value="0">
                         <input type="checkbox" :name="`${name}_course_ids[${course.id}]`"
                                value="1" :checked="selected_course_id_list.includes(course.id)"
-                               :title="$gettextInterpolate($gettext('%{course} auswählen'), {course: course.name})">
+                               :title="$gettextInterpolate($gettext('%{course} auswählen'), {course: course.name}, true)">
                     </td>
                 </tr>
                 <tr v-if="loadedSemesters.includes(semester_id) && courses.length === 0">