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

@@ -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()

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
       }

client/pages/forms/[slug]/index.vue

@@ -207,6 +207,31 @@ useHead({
     }
     return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm'
   },
+  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>