From 4655632027c7fb46eb10cb9e15126481c531bf3c Mon Sep 17 00:00:00 2001
From: Barry Brands <barrybrands02@hotmail.com>
Date: Fri, 2 Aug 2024 15:10:43 +0200
Subject: [PATCH 1/2] Validate url

---
 src/modals/directory/AddListingModal.vue | 242 +++++++++++++----------
 1 file changed, 139 insertions(+), 103 deletions(-)

diff --git a/src/modals/directory/AddListingModal.vue b/src/modals/directory/AddListingModal.vue
index 88259d7e..59feeb97 100644
--- a/src/modals/directory/AddListingModal.vue
+++ b/src/modals/directory/AddListingModal.vue
@@ -3,113 +3,150 @@ import { navigationStore, directoryStore } from '../../store/store.js'
 </script>
 
 <template>
-	<NcModal v-if="navigationStore.modal === 'addListing'"
-		ref="modalRef"
-		label-id="addListingModal"
-		@close="navigationStore.setModal(false)">
-		<div class="modal__content">
-			<h2>Directory toevoegen</h2>
-			<div v-if="success !== null || error">
-				<NcNoteCard v-if="success" type="success">
-					<p>Listing succesvol toegevoegd</p>
-				</NcNoteCard>
-				<NcNoteCard v-if="!success" type="error">
-					<p>Er is iets fout gegaan bij het toevoegen van Listing</p>
-				</NcNoteCard>
-				<NcNoteCard v-if="error" type="error">
-					<p>{{ error }}</p>
-				</NcNoteCard>
-			</div>
-			<div v-if="success === null" class="form-group">
-				<NcTextField label="Url" :value.sync="directory.url" />
-			</div>
-			<NcButton v-if="success === null"
-				:disabled="!directory.url"
-				type="primary"
-				@click="addDirectory">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSaveOutline v-if="!loading" :size="20" />
-				</template>
-				Submit
-			</NcButton>
-		</div>
-	</NcModal>
+    <NcModal
+        v-if="navigationStore.modal === 'addListing'"
+        ref="modalRef"
+        label-id="addListingModal"
+        @close="navigationStore.setModal(false)"
+    >
+        <div class="modal__content">
+            <h2>Directory toevoegen</h2>
+            <div v-if="success !== null || error">
+                <NcNoteCard v-if="success" type="success">
+                    <p>Listing succesvol toegevoegd</p>
+                </NcNoteCard>
+                <NcNoteCard v-if="!success" type="error">
+                    <p>Er is iets fout gegaan bij het toevoegen van Listing</p>
+                </NcNoteCard>
+                <NcNoteCard v-if="error && !success" type="error">
+                    <p>{{ error }}</p>
+                </NcNoteCard>
+            </div>
+            <div v-if="success === null" class="form-group">
+                <NcNoteCard v-if="validateUrlError" type="error">
+                    <p>Er is geen valide URL ingevoerd.</p>
+                </NcNoteCard>
+                <NcTextField label="Url" v-model="directory.url" @input="validateUrl" />
+            </div>
+            <NcButton
+                v-if="success === null"
+                :disabled="!isUrlValid || loading || !directory.url"
+                type="primary"
+                @click="addDirectory"
+            >
+                <template #icon>
+                    <NcLoadingIcon v-if="loading" :size="20" />
+                    <ContentSaveOutline v-if="!loading" :size="20" />
+                </template>
+                Submit
+            </NcButton>
+        </div>
+    </NcModal>
 </template>
 
 <script>
-import { NcButton, NcModal, NcTextField, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
-import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import { NcButton, NcModal, NcTextField, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue';
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue';
 
 export default {
-	name: 'AddListingModal',
-	components: {
-		NcModal,
-		NcTextField,
-		NcButton,
-		NcLoadingIcon,
-		NcNoteCard,
-		// Icons
-		ContentSaveOutline,
-	},
-	data() {
-		return {
-
-			directory: {
-				url: '',
-			},
-			loading: false,
-			success: null,
-			error: false,
-		}
-	},
-	methods: {
-		addDirectory() {
-			this.loading = true
-			this.$emit('metadata', this.title)
-			fetch(
-				'/index.php/apps/opencatalogi/api/directory',
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify({
-						title: this.title,
-						summary: this.summary,
-						description: this.description,
-						search: this.search,
-						metadata: this.metadata,
-						status: this.status,
-						lastSync: this.lastSync,
-						default: this.defaultValue,
-					}),
-				},
-			)
-				.then((response) => {
-					// Set propper modal states
-					this.loading = false
-					this.success = response.ok
-					// Lets refresh the catalogiList
-					directoryStore.refreshListingList()
-					response.json().then((data) => {
-						directoryStore.setListingItem(data)
-					})
-					navigationStore.setSelected('directory')
-					// Wait and then close the modal
-					const self = this
-					setTimeout(() => {
-						self.success = null
-						self.closeModal()
-					}, 2500)
-				})
-				.catch((err) => {
-					this.error = err
-					this.loading = false
-				})
-		},
-	},
-}
+    name: 'AddListingModal',
+    components: {
+        NcModal,
+        NcTextField,
+        NcButton,
+        NcLoadingIcon,
+        NcNoteCard,
+        ContentSaveOutline,
+    },
+    data() {
+        return {
+            directory: {
+                url: '',
+            },
+            loading: false,
+            success: null,
+            error: false,
+            validateUrlError: null,
+            urlPattern: new RegExp(
+                '^(https?:\\/\\/)' + // protocol
+                '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
+                '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+                '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+                '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+                '(\\#[-a-z\\d_]*)?$',
+                'i'
+            ), // fragment locator
+            testUrls: [
+                'http://example.com',
+                'https://example.com',
+                'http://www.example.com',
+                'https://www.example.com/path?query=string#fragment',
+                'test',
+                'http://',
+                'http://test',
+                'http::'
+            ]
+        };
+    },
+    computed: {
+        isUrlValid() {
+            return this.urlPattern.test(this.directory.url);
+        }
+    },
+    methods: {
+        addDirectory() {
+            this.loading = true;
+            this.$emit('metadata', this.title);
+            fetch('/index.php/apps/opencatalogi/api/directory', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    title: this.title,
+                    summary: this.summary,
+                    description: this.description,
+                    search: this.search,
+                    metadata: this.metadata,
+                    status: this.status,
+                    lastSync: this.lastSync,
+                    default: this.defaultValue,
+                }),
+            })
+            .then((response) => {
+                this.loading = false;
+                this.success = response.ok;
+                directoryStore.refreshListingList();
+                response.json().then((data) => {
+                    directoryStore.setListingItem(data);
+                });
+                navigationStore.setSelected('directory');
+                setTimeout(() => {
+                    this.success = null;
+                    this.closeModal();
+                }, 2500);
+            })
+            .catch((err) => {
+                this.error = err;
+                this.loading = false;
+            });
+        },
+        closeModal() {
+            navigationStore.setModal(false);
+        },
+        validateUrl(event) {
+            this.testUrls.forEach(url => {
+                console.log(`${url}: ${this.urlPattern.test(url)}`);
+            });
+            this.directory.url = event.target.value;
+            if (!this.isUrlValid) {
+                this.validateUrlError = 'Er is geen valide URL ingevoerd.';
+            } else {
+                this.validateUrlError = null;
+            }
+        }
+    },
+};
 </script>
 
 <style>
@@ -123,7 +160,6 @@ export default {
     margin-inline-start: var(--zaa-margin-20);
     margin-inline-end: var(--zaa-margin-20);
 }
-
 .success {
     color: green;
 }

From f6e8b1edba1cd68903f69c4557c63fbb95c7ab3e Mon Sep 17 00:00:00 2001
From: Barry Brands <barrybrands02@hotmail.com>
Date: Fri, 2 Aug 2024 15:12:17 +0200
Subject: [PATCH 2/2] remove testing

---
 src/modals/directory/AddListingModal.vue | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/modals/directory/AddListingModal.vue b/src/modals/directory/AddListingModal.vue
index 59feeb97..255adc92 100644
--- a/src/modals/directory/AddListingModal.vue
+++ b/src/modals/directory/AddListingModal.vue
@@ -76,16 +76,6 @@ export default {
                 '(\\#[-a-z\\d_]*)?$',
                 'i'
             ), // fragment locator
-            testUrls: [
-                'http://example.com',
-                'https://example.com',
-                'http://www.example.com',
-                'https://www.example.com/path?query=string#fragment',
-                'test',
-                'http://',
-                'http://test',
-                'http::'
-            ]
         };
     },
     computed: {
@@ -135,9 +125,6 @@ export default {
             navigationStore.setModal(false);
         },
         validateUrl(event) {
-            this.testUrls.forEach(url => {
-                console.log(`${url}: ${this.urlPattern.test(url)}`);
-            });
             this.directory.url = event.target.value;
             if (!this.isUrlValid) {
                 this.validateUrlError = 'Er is geen valide URL ingevoerd.';