From 7cad0a0c3d2d77d176e8daeabf96a36fa166226a Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Mon, 22 Apr 2024 15:46:19 +0100
Subject: [PATCH] feat: custom  page  favicon  upload (#380)

* feat: custom  page  favicon  upload

* fix helper text

* fix ios icon

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/app.vue                                | 17 ++++++++++++
 .../form-components/FormCustomSeo.vue         |  9 ++++++-
 client/pages/forms/[slug]/index.vue           | 27 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/client/app.vue b/client/app.vue
index f3a3ec6a..a5cd1846 100644
--- a/client/app.vue
+++ b/client/app.vue
@@ -79,6 +79,23 @@ export default {
       titleTemplate: (titleChunk) => {
         return titleChunk ? `${titleChunk} - OpnForm` : "OpnForm"
       },
+      meta: [
+        {
+          name: 'apple-mobile-web-app-capable',
+          content: 'yes'
+        },
+        {
+          name: 'apple-mobile-web-app-status-bar-style',
+          content: 'black-translucent'
+        },
+      ],
+      link: [
+        {
+          rel: 'apple-touch-icon',
+          type: 'image/png',
+          href: '/favicon.ico'
+        }
+      ]
     })
 
     const appStore = useAppStore()
diff --git a/client/components/open/forms/components/form-components/FormCustomSeo.vue b/client/components/open/forms/components/form-components/FormCustomSeo.vue
index b1c9bd71..0fc10ed5 100644
--- a/client/components/open/forms/components/form-components/FormCustomSeo.vue
+++ b/client/components/open/forms/components/form-components/FormCustomSeo.vue
@@ -55,6 +55,13 @@
       label="Page Thumbnail Image"
       help="Also know as og:image - 1200 X 630"
     />
+    <image-input
+        v-model="form.seo_meta.page_favicon"
+        name="page_favicon"
+        class="mt-4"
+        label="Page Favicon Image"
+        help="Upload favicon image to be displayed on the form page"
+    />
   </editor-options-panel>
 </template>
 
@@ -104,7 +111,7 @@ export default {
   },
   watch: {},
   mounted() {
-    ["page_title", "page_description", "page_thumbnail"].forEach((keyname) => {
+    ["page_title", "page_description", "page_thumbnail", "page_favicon"].forEach((keyname) => {
       if (this.form.seo_meta[keyname] === undefined) {
         this.form.seo_meta[keyname] = null
       }
diff --git a/client/pages/forms/[slug]/index.vue b/client/pages/forms/[slug]/index.vue
index 55769731..b17cae96 100644
--- a/client/pages/forms/[slug]/index.vue
+++ b/client/pages/forms/[slug]/index.vue
@@ -207,6 +207,31 @@ useHead({
     }
     return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm'
   },
-  script: [ { src: '/widgets/iframeResizer.contentWindow.min.js' } ]
+  link: pageMeta.value.page_favicon ? [
+    {
+      rel: 'icon', type: 'image/x-icon',
+      href: pageMeta.value.page_favicon
+    },
+    {
+      rel: 'apple-touch-icon',
+      type: 'image/png',
+      href: pageMeta.value.page_favicon
+    },
+    {
+      rel: 'shortcut icon',
+      href: pageMeta.value.page_favicon
+    }
+  ] : {},
+  meta: pageMeta.value.page_favicon ? [
+    {
+      name: 'apple-mobile-web-app-capable',
+      content: 'yes'
+    },
+    {
+      name: 'apple-mobile-web-app-status-bar-style',
+      content: 'black-translucent'
+    },
+  ] : {},
+  script: [{ src: '/widgets/iframeResizer.contentWindow.min.js' } ]
 })
 </script>