[web] Refactor input field for URLs

web-src/src/components/ControlUrlField.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="field">
+    <p class="control has-icons-left">
+      <input
+        ref="input"
+        v-model="url"
+        class="input"
+        type="url"
+        pattern="http[s]?://.+"
+        required
+        :placeholder="placeholder"
+        :disabled="loading"
+        @input="validate"
+      />
+      <mdicon class="icon is-left" :name="icon" size="16" />
+    </p>
+    <p v-if="help" class="help" v-text="help" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ControlUrlField',
+  props: {
+    placeholder: { type: String, required: true },
+    icon: { type: String, required: true },
+    help: { type: String, default: '' },
+    loading: { type: Boolean, default: false }
+  },
+  emits: ['url-changed'],
+  data() {
+    return {
+      url: '',
+      disabled: true
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$refs.input.focus()
+    }, 10)
+  },
+  methods: {
+    validate(event) {
+      const { validity } = event.target
+      this.disabled = validity.patternMismatch || validity.valueMissing
+      this.$emit('url-changed', this.url, this.disabled)
+    }
+  }
+}
+</script>

web-src/src/components/ModalDialogAddRss.vue

@@ -6,40 +6,31 @@
     @close="$emit('close')"
   >
     <template #content>
-      <div class="field">
+      <control-url-field
-        <p class="control has-icons-left">
+        icon="rss"
-          <input
+        :help="$t('dialog.add.rss.help')"
-            ref="url_field"
+        :loading="loading"
-            v-model="url"
+        :placeholder="$t('dialog.add.rss.placeholder')"
-            class="input"
+        @url-changed="onUrlChanged"
-            type="url"
+      />
-            pattern="http[s]?://.+"
-            required
-            :placeholder="$t('dialog.add.rss.placeholder')"
-            :disabled="loading"
-            @input="check_url"
-          />
-          <mdicon class="icon is-left" name="rss" size="16" />
-        </p>
-        <p class="help" v-text="$t('dialog.add.rss.help')" />
-      </div>
     </template>
   </modal-dialog>
 </template>
 
 <script>
+import ControlUrlField from '@/components/ControlUrlField.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAddRss',
-  components: { ModalDialog },
+  components: { ControlUrlField, ModalDialog },
   props: { show: Boolean },
   emits: ['close', 'podcast-added'],
   data() {
     return {
-      disabled: true,
       loading: false,
+      disabled: true,
       url: ''
     }
   },
@@ -63,18 +54,11 @@ export default {
       ]
     }
   },
-  watch: {
-    show() {
-      if (this.show) {
-        this.loading = false
-        // Delay setting the focus on the input field until it is part of the DOM and visible
-        setTimeout(() => {
-          this.$refs.url_field.focus()
-        }, 10)
-      }
-    }
-  },
   methods: {
+    onUrlChanged(url, disabled) {
+      this.url = url
+      this.disabled = disabled
+    },
     add() {
       this.loading = true
       webapi
@@ -90,10 +74,6 @@ export default {
     },
     cancel() {
       this.$emit('close')
-    },
-    check_url(event) {
-      const { validity } = event.target
-      this.disabled = validity.patternMismatch || validity.valueMissing
     }
   }
 }

web-src/src/components/ModalDialogAddStream.vue

@@ -7,40 +7,31 @@
   >
     <template #content>
       <form @submit.prevent="play">
-        <div class="field">
+        <control-url-field
-          <p class="control has-icons-left">
+          icon="web"
-            <input
+          :loading="loading"
-              ref="url_field"
+          :placeholder="$t('dialog.add.stream.placeholder')"
-              v-model="url"
+          @url-changed="onUrlChanged"
-              class="input"
+        />
-              type="url"
-              pattern="http[s]?://.+"
-              required
-              :placeholder="$t('dialog.add.stream.placeholder')"
-              :disabled="loading"
-              @input="check_url"
-            />
-            <mdicon class="icon is-left" name="web" size="16" />
-          </p>
-        </div>
       </form>
     </template>
   </modal-dialog>
 </template>
 
 <script>
+import ControlUrlField from '@/components/ControlUrlField.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAddStream',
-  components: { ModalDialog },
+  components: { ControlUrlField, ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
   data() {
     return {
-      disabled: true,
       loading: false,
+      disabled: true,
       url: ''
     }
   },
@@ -70,18 +61,11 @@ export default {
       ]
     }
   },
-  watch: {
-    show() {
-      if (this.show) {
-        this.loading = false
-        // Delay setting the focus on the input field until it is part of the DOM and visible
-        setTimeout(() => {
-          this.$refs.url_field.focus()
-        }, 10)
-      }
-    }
-  },
   methods: {
+    onUrlChanged(url, disabled) {
+      this.url = url
+      this.disabled = disabled
+    },
     add() {
       this.loading = true
       webapi
@@ -97,11 +81,6 @@ export default {
     cancel() {
       this.$emit('close')
     },
-    check_url(event) {
-      const { validity } = event.target
-      this.disabled = validity.patternMismatch || validity.valueMissing
-    },
-
     play() {
       this.loading = true
       webapi