From bea9d6aff4e000403131f70b1c60065c339acce8 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Tue, 7 Jan 2025 14:08:57 -0600
Subject: [PATCH] Update date time input validation, add red border for invalid
 datetime

---
 .../components/modals/item/tabs/Episodes.vue  |  2 +-
 .../modals/podcast/tabs/EpisodeDetails.vue    | 13 +++----
 client/components/ui/TextInput.vue            | 35 ++++++++-----------
 client/strings/en-us.json                     |  2 +-
 4 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/client/components/modals/item/tabs/Episodes.vue b/client/components/modals/item/tabs/Episodes.vue
index 293a75c7..8195154a 100644
--- a/client/components/modals/item/tabs/Episodes.vue
+++ b/client/components/modals/item/tabs/Episodes.vue
@@ -114,7 +114,7 @@ export default {
         })
         console.log('updateResult', updateResult)
       } else if (!lastEpisodeCheck) {
-        this.$toast.error(this.$strings.ToastDateMustBeComplete)
+        this.$toast.error(this.$strings.ToastDateTimeInvalidOrIncomplete)
         this.checkingNewEpisodes = false
         return false
       }
diff --git a/client/components/modals/podcast/tabs/EpisodeDetails.vue b/client/components/modals/podcast/tabs/EpisodeDetails.vue
index ce751f70..9a2eb77d 100644
--- a/client/components/modals/podcast/tabs/EpisodeDetails.vue
+++ b/client/components/modals/podcast/tabs/EpisodeDetails.vue
@@ -11,7 +11,7 @@
         <ui-dropdown v-model="newEpisode.episodeType" :label="$strings.LabelEpisodeType" :items="episodeTypes" small />
       </div>
       <div class="w-2/5 p-1">
-        <ui-text-input-with-label v-model="pubDateInput" @input="updatePubDate" type="datetime-local" :label="$strings.LabelPubDate" />
+        <ui-text-input-with-label v-model="pubDateInput" ref="pubdate" type="datetime-local" :label="$strings.LabelPubDate" @input="updatePubDate" />
       </div>
       <div class="w-full p-1">
         <ui-text-input-with-label v-model="newEpisode.title" :label="$strings.LabelTitle" />
@@ -145,17 +145,18 @@ export default {
         return null
       }
 
+      // Check pubdate is valid if it is being updated. Cannot be set to null in the web client
+      if (this.newEpisode.pubDate === null && this.$refs.pubdate?.$refs?.input?.isInvalidDate) {
+        this.$toast.error(this.$strings.ToastDateTimeInvalidOrIncomplete)
+        return null
+      }
+
       const updatedDetails = this.getUpdatePayload()
       if (!Object.keys(updatedDetails).length) {
         this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
         return false
       }
 
-      // Check pubdate is valid if it is being updated. Cannot be set to null in the web client
-      if (updatedDetails.pubDate === null) {
-        this.$toast.error(this.$strings.ToastDateMustBeComplete)
-        return null
-      }
       return this.updateDetails(updatedDetails)
     },
     async updateDetails(updatedDetails) {
diff --git a/client/components/ui/TextInput.vue b/client/components/ui/TextInput.vue
index 6935a1dd..aaccd118 100644
--- a/client/components/ui/TextInput.vue
+++ b/client/components/ui/TextInput.vue
@@ -1,24 +1,6 @@
 <template>
   <div ref="wrapper" class="relative">
-    <input
-      :id="inputId"
-      :name="inputName"
-      ref="input"
-      v-model="inputValue"
-      :type="actualType"
-      :step="step"
-      :min="min"
-      :readonly="readonly"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      dir="auto"
-      class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full"
-      :class="classList"
-      @keyup="keyup"
-      @change="change"
-      @focus="focused"
-      @blur="blurred"
-    />
+    <input :id="inputId" :name="inputName" ref="input" v-model="inputValue" :type="actualType" :step="step" :min="min" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" dir="auto" class="rounded bg-primary text-gray-200 focus:bg-bg focus:outline-none border h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
     <div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
       <span class="material-symbols text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
     </div>
@@ -65,7 +47,8 @@ export default {
       showPassword: false,
       isHovering: false,
       isFocused: false,
-      hasCopied: false
+      hasCopied: false,
+      isInvalidDate: false
     }
   },
   computed: {
@@ -84,6 +67,10 @@ export default {
       if (this.noSpinner) _list.push('no-spinner')
       if (this.textCenter) _list.push('text-center')
       if (this.customInputClass) _list.push(this.customInputClass)
+
+      if (this.isInvalidDate) _list.push('border-error')
+      else _list.push('focus:border-gray-300 border-gray-600')
+
       return _list.join(' ')
     },
     actualType() {
@@ -118,6 +105,14 @@ export default {
     },
     keyup(e) {
       this.$emit('keyup', e)
+
+      if (this.type === 'datetime-local') {
+        if (e.target.validity?.badInput) {
+          this.isInvalidDate = true
+        } else {
+          this.isInvalidDate = false
+        }
+      }
     },
     blur() {
       if (this.$refs.input) this.$refs.input.blur()
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index cc9fd574..2106e86c 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -964,7 +964,7 @@
   "ToastCollectionRemoveSuccess": "Collection removed",
   "ToastCollectionUpdateSuccess": "Collection updated",
   "ToastCoverUpdateFailed": "Cover update failed",
-  "ToastDateMustBeComplete": "Date and time cannot be incomplete",
+  "ToastDateTimeInvalidOrIncomplete": "Date and time is invalid or incomplete",
   "ToastDeleteFileFailed": "Failed to delete file",
   "ToastDeleteFileSuccess": "File deleted",
   "ToastDeviceAddFailed": "Failed to add device",