Fehler bei leeren Inputs (#856)

* Detect empty inputs in ServerCard form * Add required field to some forms
elan-ev · Dec 14, 2023 · 3dc521f · 3dc521f
1 parent 6d9c108
commit 3dc521f
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 40 deletions.
diff --git a/vueapp/components/Config/ConfigOption.vue b/vueapp/components/Config/ConfigOption.vue
@@ -15,6 +15,7 @@
                         :name="setting.name"
                         :checked="setting.value == true"
                         @change='setValue(true)'
+                        :required="setting.required"
                     >
                     <translate>
                         Ja
@@ -26,6 +27,7 @@
                         :name="setting.name"
                         :checked="setting.value != true"
                         @change='setValue(false)'
+                        :required="setting.required"
                     >
                     <translate>
                         Nein
@@ -44,7 +46,8 @@
                 :name="setting.name"
                 :placeholder="setting.placeholder"
                 v-model="setting.value"
-                @change="setValue(setting.value)">
+                @change="setValue(setting.value)"
+                :required="setting.required">
         </label>
 
         <label v-if="(setting.type == 'string' || setting.type == 'integer') && setting.options && !isI18N(setting)">
@@ -71,7 +74,8 @@
                 :name="setting.name"
                 :placeholder="setting.placeholder"
                 v-model="setting.value"
-                @change="setValue(setting.value)">
+                @change="setValue(setting.value)"
+                :required="setting.required">
         </label>
 
         <label v-if="setting.type == 'password'">
@@ -85,11 +89,12 @@
             <div class="input-group files-search oc--admin-password">
 
                 <input :type="passwordVisible ? 'text' : 'password'"
-                    @change="updateHiddenPassword"
-                    @focusin="clearTextFieldIfHidden"
-                    @focusout="fillTextFieldIfHidden"
+                    @change="setValue(password)"
+                    @focusin="passwordFocused=true"
+                    @focusout="passwordFocused=false"
                     v-model="password"
                     :placeholder="setting.placeholder"
+                    :required="setting.required"
                 >
 
                 <span class="input-group-append ">
@@ -132,16 +137,29 @@ export default {
 
     data() {
         return {
-            password: '*****',
-            passwordVisible: false
+            passwordInput: '', // Make password initially empty, so that an empty input can be detected
+            passwordVisible: false,
+            passwordFocused: false
         }
     },
 
-    mounted() {
-        if (!this.passwordVisible && this.setting.type == 'password'
-            && this.setting.value)
-        {
-            this.password = '*****';
+    computed: {
+        password: {
+            get() {
+                if (!this.passwordVisible) {
+                    if (this.passwordFocused && this.passwordInput == '*****') {
+                        this.passwordInput = '';
+                    }
+                    else if (!this.passwordFocused && this.setting.value) {
+                        this.passwordInput = '*****';
+                    }
+                }
+
+                return this.passwordInput;
+            },
+            set(newValue) {
+                this.passwordInput = newValue;
+            }
         }
     },
 
@@ -157,31 +175,10 @@ export default {
                 this.password = this.setting.value;
                 this.passwordVisible = true;
             } else {
-                if (this.setting.value) {
-                    this.password = '*****';
-                }
                 this.passwordVisible = false;
             }
         },
 
-        updateHiddenPassword() {
-            this.setValue(this.password);
-        },
-
-        clearTextFieldIfHidden()
-        {
-            if (!this.passwordVisible && this.password == '*****') {
-                this.password = '';
-            }
-        },
-
-        fillTextFieldIfHidden()
-        {
-            if (!this.passwordVisible && this.password.length == 0) {
-                this.password = '*****';
-            }
-        },
-
         isI18N(setting)
         {
             if (

diff --git a/vueapp/components/Config/EditServer.vue b/vueapp/components/Config/EditServer.vue
@@ -11,7 +11,7 @@
             @close="close"
         >
             <template v-slot:dialogContent ref="editServer-dialog">
-                <form class="default" v-if="currentConfig">
+                <form class="default" v-if="currentConfig" ref="editServer-form">
                     <fieldset>
                         <legend>
                             {{ $gettext('Grundeinstellungen') }}
@@ -175,7 +175,12 @@ export default {
         },
 
         storeConfig() {
+            if (!this.$refs['editServer-form'].reportValidity()) {
+                return false;
+            }
+
             this.disabled = true;
+
             this.$store.dispatch('clearMessages');
 
             this.currentConfig.checked = false;

diff --git a/vueapp/components/Playlists/PlaylistAddNewCard.vue b/vueapp/components/Playlists/PlaylistAddNewCard.vue
@@ -12,13 +12,14 @@
             @keyup.enter="createPlaylist"
         >
             <template v-slot:dialogContent>
-                <form class="default">
+                <form class="default" ref="playlistAddNewCard-form">
                     <label>
                         <span class="required">Titel</span>
                         <input type="text"
                                maxlength="255"
                                :placeholder="$gettext('Titel der Wiedergabeliste')"
                                v-model="playlist.title"
+                               required
                         >
                     </label>
                 </form>
@@ -50,6 +51,9 @@ export default {
 
     methods: {
         createPlaylist() {
+            if (!this.$refs['playlistAddNewCard-form'].reportValidity()) {
+                return false;
+            }
             this.$store.dispatch('addPlaylist', this.playlist);
             this.$emit('done');
         }

diff --git a/vueapp/components/Playlists/PlaylistEditCard.vue b/vueapp/components/Playlists/PlaylistEditCard.vue
@@ -11,10 +11,10 @@
             @confirm="updatePlaylist"
         >
             <template v-slot:dialogContent>
-                <form class="default">
+                <form class="default" ref="playlistEditCard-form">
                     <label v-if="!isDefaultCoursePlaylist">
-                        Name
-                        <input type="text" v-model="eplaylist.title">
+                        <span class="required">Titel</span>
+                        <input type="text" v-model="eplaylist.title" required>
                     </label>
 
                     <!--
@@ -77,6 +77,9 @@ export default {
 
     methods: {
         updatePlaylist() {
+            if (!this.$refs['playlistEditCard-form'].reportValidity()) {
+                return false;
+            }
             this.playlist.title      = this.eplaylist.title;
             this.playlist.visibility = this.eplaylist.visibility;
             this.playlist.tags       = JSON.parse(JSON.stringify((this.eplaylist.tags)));

diff --git a/vueapp/components/Videos/Actions/VideoAccess/ShareWithUsers.vue b/vueapp/components/Videos/Actions/VideoAccess/ShareWithUsers.vue
@@ -58,7 +58,7 @@
         </fieldset>
         <footer>
             <StudipButton
-                :disabled="selectedUser == null"
+                :disabled="selectedUser == null || selectedUserPerm == null"
                 icon="accept"
                 @click.prevent="addShareUser()"
             >

diff --git a/vueapp/components/Videos/Actions/VideoEdit.vue b/vueapp/components/Videos/Actions/VideoEdit.vue
@@ -12,7 +12,7 @@
             @confirm="accept"
         >
             <template v-slot:dialogContent>
-                <form class="default" style="max-width: 50em;" @submit="editVideo">
+                <form class="default" style="max-width: 50em;" @submit="editVideo" ref="videoEdit-form">
                     <fieldset>
                         <label>
                             <span class="required" v-translate>
@@ -151,6 +151,9 @@ export default {
 
     methods: {
         async accept() {
+            if (!this.$refs['videoEdit-form'].reportValidity()) {
+                return false;
+            }
             // Handle visibility
             this.event.cid = this.cid;
             this.event.playlist_token = this.playlist?.token;