From 11616f5d32253560307c588a45a7d72818ce91f6 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Thu, 23 Nov 2023 20:36:55 +0100
Subject: [PATCH] [web] Reinforce check of URL entry

---
 web-src/src/components/ModalDialogAddRss.vue  | 36 +++++++++----------
 .../components/ModalDialogAddUrlStream.vue    | 34 +++++++++---------
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/web-src/src/components/ModalDialogAddRss.vue b/web-src/src/components/ModalDialogAddRss.vue
index 5e011c7f..a1c998a3 100644
--- a/web-src/src/components/ModalDialogAddRss.vue
+++ b/web-src/src/components/ModalDialogAddRss.vue
@@ -4,25 +4,25 @@
       <div v-if="show" class="modal is-active">
         <div class="modal-background" @click="$emit('close')" />
         <div class="modal-content fd-modal-card">
-          <div class="card">
+          <form class="card" @submit.prevent="add_stream">
             <div class="card-content">
               <p class="title is-4" v-text="$t('dialog.add.rss.title')" />
-              <form @submit.prevent="add_stream">
-                <div class="field">
-                  <p class="control is-expanded has-icons-left">
-                    <input
-                      ref="url_field"
-                      v-model="url"
-                      class="input is-shadowless"
-                      type="text"
-                      :placeholder="$t('dialog.add.rss.placeholder')"
-                      :disabled="loading"
-                    />
-                    <mdicon class="icon is-left" name="rss" size="16" />
-                  </p>
-                  <p class="help" v-text="$t('dialog.add.rss.help')" />
-                </div>
-              </form>
+              <div class="field">
+                <p class="control is-expanded has-icons-left">
+                  <input
+                    ref="url_field"
+                    v-model="url"
+                    class="input is-shadowless"
+                    type="url"
+                    pattern="http[s]?://.*"
+                    required
+                    :placeholder="$t('dialog.add.rss.placeholder')"
+                    :disabled="loading"
+                  />
+                  <mdicon class="icon is-left" name="rss" size="16" />
+                </p>
+                <p class="help" v-text="$t('dialog.add.rss.help')" />
+              </div>
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item button is-loading">
@@ -49,7 +49,7 @@
                 <span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
               </a>
             </footer>
-          </div>
+          </form>
         </div>
         <button
           class="modal-close is-large"
diff --git a/web-src/src/components/ModalDialogAddUrlStream.vue b/web-src/src/components/ModalDialogAddUrlStream.vue
index 7339c870..caee30cb 100644
--- a/web-src/src/components/ModalDialogAddUrlStream.vue
+++ b/web-src/src/components/ModalDialogAddUrlStream.vue
@@ -4,24 +4,24 @@
       <div v-if="show" class="modal is-active">
         <div class="modal-background" @click="$emit('close')" />
         <div class="modal-content fd-modal-card">
-          <div class="card">
+          <form class="card" @submit.prevent="play">
             <div class="card-content">
               <p class="title is-4" v-text="$t('dialog.add.stream.title')" />
-              <form class="mb-5" @submit.prevent="play">
-                <div class="field">
-                  <p class="control is-expanded has-icons-left">
-                    <input
-                      ref="url_field"
-                      v-model="url"
-                      class="input is-shadowless"
-                      type="text"
-                      :placeholder="$t('dialog.add.stream.placeholder')"
-                      :disabled="loading"
-                    />
-                    <mdicon class="icon is-left" name="web" size="16" />
-                  </p>
-                </div>
-              </form>
+              <div class="field">
+                <p class="control is-expanded has-icons-left">
+                  <input
+                    ref="url_field"
+                    v-model="url"
+                    class="input is-shadowless"
+                    type="url"
+                    pattern="http[s]?://.*"
+                    required
+                    :placeholder="$t('dialog.add.stream.placeholder')"
+                    :disabled="loading"
+                  />
+                  <mdicon class="icon is-left" name="web" size="16" />
+                </p>
+              </div>
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item has-text-dark">
@@ -55,7 +55,7 @@
                 <span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
               </a>
             </footer>
-          </div>
+          </form>
         </div>
         <button
           class="modal-close is-large"