From 0a7c128ab1faed83d6b46c8b89d14b178d43d55b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 7 Sep 2023 17:58:59 +0200
Subject: [PATCH] add CustomLogo component and update views

---
 components/CustomLogo.vue | 91 +++++++++++++++++++++++++++++++++++++++
 layouts/default.vue       |  5 +--
 pages/login.vue           |  5 +--
 3 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 components/CustomLogo.vue

diff --git a/components/CustomLogo.vue b/components/CustomLogo.vue
new file mode 100644
index 0000000..74e4486
--- /dev/null
+++ b/components/CustomLogo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+const settings = await useSettings()
+const customLogo = computed(() => {
+  const logo = settings.value.portal_logo
+  if (!logo) return {}
+
+  const [mimetype, base64Content] = logo.split(':')
+  if (mimetype === 'image/svg+xml') {
+    // Will render as inline SVG so that CSS "currentColor" can cascade to it
+    return {
+      is: 'svg',
+      content: atob(base64Content),
+    }
+  } else {
+    return {
+      is: 'img',
+      content: `data:${mimetype};base64, ${base64Content}`,
+    }
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="customLogo.is === 'svg'"
+    aria-hidden="true"
+    class="svg-div"
+    v-html="customLogo.content"
+  />
+  <img
+    v-else-if="customLogo.is === 'img'"
+    :src="customLogo.content"
+    alt=""
+    aria-hidden="true"
+  />
+  <svg
+    v-else
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 98 85"
+    aria-hidden="true"
+  >
+    <path
+      d="M97,51c-2.02,4.98-8.33,5.67-14,7c-0.609,6.29,3.05,10.95-1,16c-6.41-0.26-7.471-5.859-7-13c-1,0-2,0-3,0
+	c-2.09,2.77,0.9,4.52,0,8c-1.12,4.34-7.88,7.91-11,7c-2.18-0.641-5.96-6.63-5-12c2.82-2.71,2.76,3.12,6,3c5.05-7.84-9.63-8.55-8-17
+	c1.24-6.42,11.66-9.66,15-1c1.54,4.21-5.17,0.16-5,3c-0.279,1.62,0.95,1.72,1,3c2.52,0.77,1.68-2.16,3-3c1.859-1.17,3.09-0.75,6-1
+	c2.45-2.55,1.08-8.92,4-11c3.87,0.46,6.08,2.59,6,7C91.01,46.109,94.3,46.05,97,51z"
+    />
+    <path
+      d="M87,13c0.609,3.21,2.32,4.98,2,8c-0.34,3.21-2.9,8.83-4,9c-1.17,0.18-1.34,1.78-2,2
+	c-4.66,1.57-12.391-1.48-14-7c-1.16-3.97,1.9-13.37,4-17c1.3-2.25,1.221-2.99,5-4c2.41-0.65,3.65-2.25,6,0
+	c0.471,0.45,1.3,0.49,1.85,0.89c-0.199,0,2,3.14,2.15,4.11C88.32,11.07,86.77,11.78,87,13z M79,22c1.779-1.89,3.29-4.04,3-8
+	C77.49,12.33,74.67,21.3,79,22z"
+    />
+    <path
+      d="M67,21c-0.07,5.81,2.48,10.7,0,15c-6.73,1.06-7.24-4.1-11-6c-1.939,1.39-1.49,5.18-3,7
+	c-3.78,0.44-4.69-1.97-7-3c2.47-7.81,1.26-18.98,2-26c8.58-0.58,7.68,8.32,12,12c0.52-4.34-0.359-15.52,3-20
+	C70.33,3.29,67.09,12.99,67,21z"
+    />
+    <path
+      d="M52,55c1.93,8.41,0.12,22.689-12,20c-1.59-0.35-8.42-5.22-9-7c-1.62-5,0.34-13.34,3-16
+	C39.03,46.97,45.48,50.359,52,55z M39,66c4.55,0.96,6.3-4.2,4-7C39.37,59.03,38.61,61.939,39,66z"
+    />
+    <path
+      d="M39,8c5.58,0.9,6.4,6.81,5,15c-1.43,8.38-3.02,14.59-9,15c-9.57,0.65-12.25-16.69-9-29
+	c8.32,1.27,6.59,10.36,6,17c2.71,0.83,2.2-0.85,3-2C37.05,21.04,37.82,13.61,39,8z"
+    />
+    <path
+      d="M28,62c0.1,5.67,4.4,11.33,2,17c-4.32-1.01-6.57-4.09-9-7c-3.15-0.48-2.26,3.07-6,2
+	c-0.67,5.061,2.29,7.57-1,10c-4.7-0.63-6.66-4-8-8c-2.61-1.38-5.48-2.52-6-6c0.14-3.53,4.48-2.85,7-4c0.47-5.53-1.41-13.41,2-16
+	c8.31,0.49,8.21,7.13,7,15c4.36,0.29,4.94-4.35,5-7c0.06-2.43-1.82-8.26,2-11c3.06-0.73,2.94,1.73,6,1
+	C32.35,52.7,27.92,57.439,28,62z"
+    />
+    <path
+      d="M24,12c1.07,7.07-3.86,8.14-6,12c0.21,6.88-0.47,12.86-2,18c-5.86-1.32-8.7-10.38-6-17
+	c-0.33-3.52-5.26-4.22-7-8c-0.3-0.66-0.47-4.43-1-7C1.09,5.63,0.55,4.31,3,1c8.16-0.49,7.21,8.13,9,14c5.05,0.39,3.91-5.42,8-6
+	C20.98,10.35,22.67,11,24,12z"
+    />
+  </svg>
+</template>
+
+<style>
+svg,
+img,
+.svg-div {
+  max-width: 100px;
+  max-height: 100px;
+  fill: currentColor;
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 1855fdd..466e117 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -142,10 +142,7 @@ async function logout() {
             </NuxtLink>
           </nav>
 
-          <img
-            src="/assets/img/logo-white.svg"
-            class="mt-8 sm:mt-0 mx-auto sm:ml-auto sm:mr-0"
-          />
+          <CustomLogo class="mt-8 sm:mt-0 mx-auto sm:ml-auto sm:mr-0" />
         </div>
       </slot>
     </footer>
diff --git a/pages/login.vue b/pages/login.vue
index 1a5e41e..d4d4c7b 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -46,10 +46,7 @@ const login = handleSubmit(async (form) => {
 
 <template>
   <main class="w-50 m-auto">
-    <img
-      class="flex-none mx-auto w-1/2 mb-10"
-      src="/assets/img/logo-white.svg"
-    />
+    <CustomLogo class="flex-none mx-auto w-1/2 mb-10" />
 
     <form novalidate @submit="login">
       <FormField