@dargmuesli/nuxt-vio 3.1.1 → 3.2.0-beta.2

package/components/vio/button/VioButton.vue

@@ -56,9 +56,7 @@ const emit = defineEmits<{
 const classesComputed = computed(() => {
   return [
     props.classes,
-    ...(props.isBlock
-      ? ['block']
-      : ['inline-flex items-center justify-center gap-2']),
+    ...(props.isBlock ? ['block'] : ['inline-flex items-center gap-2']),
     ...(props.isLinkColored ? ['text-link-dark dark:text-link-bright'] : []),
   ].join(' ')
 })

package/components/vio/button/VioButtonColored.vue

@@ -2,12 +2,12 @@
   <VioButton
     :is-to-relative="isToRelative"
     :aria-label="ariaLabel"
-    class="rounded-md border px-4 py-2 font-medium"
+    class="justify-center rounded-md border px-4 py-2 font-medium"
     :class="
       [
         ...(isPrimary
           ? [
-              'border-transparent bg-gray-800 text-text-bright hover:bg-black dark:bg-yellow-500  dark:text-gray-800 dark:hover:bg-yellow-600',
+              'border-transparent bg-gray-800 text-text-bright hover:bg-black dark:bg-vio-primary-bg dark:text-vio-primary-text dark:hover:bg-gray-200',
             ]
           : [
               'border-gray-300 text-text-dark hover:bg-black/5 dark:border-gray-600 dark:text-text-bright dark:hover:bg-black/30',

package/components/vio/button/VioButtonHome.vue

@@ -0,0 +1,28 @@
+<template>
+  <VioButtonColored
+    :aria-label="t('home')"
+    :to="localePath('/')"
+    @click="emit('click')"
+  >
+    {{ t('home') }}
+    <template #prefix>
+      <VioIconHome />
+    </template>
+  </VioButtonColored>
+</template>
+
+<script setup lang="ts">
+const localePath = useLocalePath()
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  click: []
+}>()
+</script>
+
+<i18n lang="yaml">
+de:
+  home: Nach Hause
+en:
+  home: Head home
+</i18n>

package/components/vio/button/VioButtonIcon.vue

@@ -0,0 +1,31 @@
+<template>
+  <VioButton
+    :aria-label="ariaLabel"
+    class="flex justify-center"
+    :disabled="disabled"
+    :title="ariaLabel"
+    :to="to"
+    :type="type"
+    @click="emit('click')"
+  >
+    <slot />
+  </VioButton>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  ariaLabel: string
+  disabled?: boolean
+  to?: string
+  type?: 'button' | 'submit' | 'reset'
+}
+withDefaults(defineProps<Props>(), {
+  disabled: false,
+  to: undefined,
+  type: 'button',
+})
+
+const emit = defineEmits<{
+  click: []
+}>()
+</script>

package/components/vio/button/VioButtonList.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex flex-wrap gap-2 lg:gap-4">
+    <slot />
+  </div>
+</template>

package/components/vio/button/VioButtonShare.vue

@@ -0,0 +1,45 @@
+<template>
+  <span v-if="url" class="flex items-center gap-2">
+    <slot />
+    <VioButtonColored :aria-label="t('share')" @click="copy(url)">
+      <template #prefix>
+        <VioIconShare />
+      </template>
+    </VioButtonColored>
+  </span>
+  <span v-else class="unready inline-block">
+    <slot name="unready" />
+  </span>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  url: string
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+
+// methods
+const copy = async (string: string) => {
+  if (typeof window === 'undefined') return
+
+  try {
+    await navigator.clipboard.writeText(string)
+    showToast({ title: t('donationUrlCopySuccess') })
+  } catch (error: any) {
+    alert(t('donationUrlCopyError'))
+  }
+}
+</script>
+
+<i18n lang="yaml">
+de:
+  donationUrlCopyError: 'Fehler: Der Spendenlink konnte leider nicht in die Zwischenablage kopiert werden!'
+  donationUrlCopySuccess: Der Spendenlink wurde in die Zwischenablage kopiert.
+  share: Teilen
+en:
+  donationUrlCopyError: 'Error: Unfortunately, the donation link could not be copied to the clipboard!'
+  donationUrlCopySuccess: The donation link has been copied to the clipboard.
+  share: Share
+</i18n>

package/components/vio/card/state/VioCardStateInfo.vue

@@ -0,0 +1,14 @@
+<template>
+  <VioCardState background-color="bg-blue-600" :is-edgy="isEdgy">
+    <slot />
+  </VioCardState>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  isEdgy?: boolean
+}
+withDefaults(defineProps<Props>(), {
+  isEdgy: false,
+})
+</script>

package/components/vio/icon/{IconArrowRight.vue → VioIconArrowRight.vue}

@@ -3,7 +3,7 @@
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
-    stroke-width="2"
+    stroke-width="1.5"
     :title="title || t('title')"
   >
     <path

package/components/vio/icon/{IconCalendar.vue → VioIconCalendar.vue}

@@ -8,7 +8,7 @@
     <path
       stroke-linecap="round"
       stroke-linejoin="round"
-      stroke-width="2"
+      stroke-width="1.5"
       d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
     />
   </VioIconContainer>

package/components/vio/icon/VioIconChartBar.vue

@@ -0,0 +1,31 @@
+<template>
+  <VioIconContainer
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="1.5"
+    :title="title || t('title')"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+    />
+  </VioIconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Balkendiagramm
+en:
+  title: Bar chart
+</i18n>

package/components/vio/icon/{IconChatOutline.vue → VioIconChatOutline.vue}

@@ -5,7 +5,7 @@
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
-    stroke-width="2"
+    stroke-width="1.5"
   >
     <path
       stroke-linecap="round"

package/components/vio/icon/{IconDownload.vue → VioIconDownload.vue}

@@ -3,12 +3,12 @@
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
+    stroke-width="1.5"
     :title="title || t('title')"
   >
     <path
       stroke-linecap="round"
       stroke-linejoin="round"
-      stroke-width="2"
       d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
     />
   </VioIconContainer>

package/components/vio/icon/VioIconHeart.vue

@@ -0,0 +1,31 @@
+<template>
+  <VioIconContainer
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="1.5"
+    :title="title || t('title')"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+    />
+  </VioIconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Herz
+en:
+  title: Heart
+</i18n>

package/components/vio/icon/{IconHome.vue → VioIconHome.vue}

@@ -3,12 +3,12 @@
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
+    stroke-width="1.5"
     :title="title || t('title')"
   >
     <path
       stroke-linecap="round"
       stroke-linejoin="round"
-      stroke-width="2"
       d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
     />
   </VioIconContainer>

package/components/vio/icon/{IconLightbulb.vue → VioIconLightbulb.vue}

@@ -5,7 +5,7 @@
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
-    stroke-width="2"
+    stroke-width="1.5"
   >
     <path
       stroke-linecap="round"

package/components/vio/icon/{IconMusic.vue → VioIconMusic.vue}

@@ -5,7 +5,7 @@
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
-    stroke-width="2"
+    stroke-width="1.5"
   >
     <path
       stroke-linecap="round"

package/components/vio/icon/VioIconShare.vue

@@ -0,0 +1,31 @@
+<template>
+  <VioIconContainer
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="1.5"
+    :title="title || t('title')"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
+    />
+  </VioIconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Einloggen
+en:
+  title: Login
+</i18n>

package/components/vio/icon/VioIconSignIn.vue

@@ -0,0 +1,31 @@
+<template>
+  <VioIconContainer
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="1.5"
+    :title="title || t('title')"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
+    />
+  </VioIconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: Einloggen
+en:
+  title: Login
+</i18n>

package/components/vio/icon/VioIconTv.vue

@@ -0,0 +1,31 @@
+<template>
+  <VioIconContainer
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="1.5"
+    :title="title || t('title')"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
+    />
+  </VioIconContainer>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title?: string // eslint-disable-line vue/require-default-prop
+}
+withDefaults(defineProps<Props>(), {})
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  title: TV
+en:
+  title: TV
+</i18n>

package/components/vio/loader/Loader.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div v-if="api.isFetching" class="aspect-square" :class="classes">
+      <VioLoaderIndicatorPing v-if="indicator === 'ping'" />
+      <VioLoaderIndicatorSpinner v-else-if="indicator === 'spinner'" />
+      <VioLoaderIndicatorText v-else-if="indicator === 'text'" />
+      <VioLoaderIndicatorText v-else />
+    </div>
+    <VioCardStateAlert v-if="errorMessages.length">
+      <VioLayoutSpanList :span="errorMessages" />
+    </VioCardStateAlert>
+    <slot v-if="api.data && Object.keys(api.data).length" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UnwrapRef } from 'vue'
+
+import { ApiData } from '@dargmuesli/nuxt-vio/types/api'
+
+export interface Props {
+  api: UnwrapRef<ApiData>
+  errorPgIds?: Record<string, string>
+  classes?: string
+  indicator?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  errorPgIds: undefined,
+  classes: undefined,
+  indicator: undefined,
+})
+
+// computations
+const errorMessages = computed(() =>
+  getCombinedErrorMessages(props.api.errors, props.errorPgIds),
+)
+</script>
+
+<script lang="ts">
+export default {
+  name: 'MaevsiLoader',
+}
+</script>

package/components/vio/loader/LoaderImage.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="[aspect, classes]">
+    <VioLoaderIndicatorPing v-if="isLoading" />
+    <VioCardStateAlert v-if="isError">
+      {{ t('error') }}
+    </VioCardStateAlert>
+    <img
+      v-if="srcWhenLoaded"
+      :alt="alt"
+      :class="[aspect, classes]"
+      :height="height"
+      :src="srcWhenLoaded"
+      :width="width"
+    />
+    <img :alt="alt" class="hidden" :height="height" :src="src" :width="width" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from 'lodash-es'
+
+export interface Props {
+  alt: string
+  aspect: string
+  classes?: string
+  height: string
+  src: string
+  width: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  classes: undefined,
+})
+const srcProp = toRef(() => props.src)
+
+const { t } = useI18n()
+
+// data
+const img = ref<HTMLImageElement>()
+const isError = ref(false)
+const isLoading = ref(false)
+const loadingId = Math.random()
+const loadingIds = useState('loadingIds', () => [] as number[])
+const srcWhenLoaded = ref<string | undefined>(srcProp.value)
+
+// methods
+const loadOnClient = () => {
+  loadingStartDebounced()
+
+  img.value = new Image()
+  img.value.onload = () => {
+    loadingStop()
+    srcWhenLoaded.value = img.value?.src
+  }
+  img.value.onerror = () => {
+    loadingStop()
+    isError.value = true
+  }
+  img.value.src = props.src
+}
+const loadingStart = () => {
+  srcWhenLoaded.value = undefined
+  isLoading.value = true
+  loadingIds.value.push(loadingId)
+}
+const loadingStartDebounced = debounce(loadingStart, 100)
+const loadingStop = () => {
+  loadingStartDebounced.cancel()
+  isLoading.value = false
+  loadingIds.value.splice(loadingIds.value.indexOf(loadingId), 1)
+}
+
+// lifecycle
+onMounted(loadOnClient)
+</script>
+
+<i18n lang="yaml">
+de:
+  error: Bild konnte nicht geladen werden!
+en:
+  error: Image could not be loaded!
+</i18n>

package/components/vio/loader/indicator/LoaderIndicatorText.vue

@@ -0,0 +1,9 @@
+<template>
+  <VioLoaderIndicator class="animate-pulse">
+    {{ t('globalStatusLoading') }}
+  </VioLoaderIndicator>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+</script>

package/locales/de.json

@@ -3,6 +3,7 @@
   "globalStatusError": "Fehler",
   "globalStatusLoading": "Lade...",
   "globalValidationFailed": "Bitte überprüfe deine Eingaben 🙈",
+  "globalValidationFormatIncorrect": "Falsches Format",
   "globalValidationFormatUrlHttps": "Muss mit \"https://\" beginnen",
   "globalValidationLength": "Zu lang",
   "globalValidationRequired": "Pflichtfeld"

package/locales/en.json

@@ -3,6 +3,7 @@
   "globalStatusError": "Error",
   "globalStatusLoading": "Loading...",
   "globalValidationFailed": "Please check your input 🙈",
+  "globalValidationFormatIncorrect": "Incorrect format",
   "globalValidationFormatUrlHttps": "Must start with \"https://\"",
   "globalValidationLength": "Too long",
   "globalValidationRequired": "Required"

package/nuxt.config.ts

@@ -63,6 +63,7 @@ export default defineNuxtConfig(
       },
       typescript: {
         shim: false,
+        strict: true,
         tsConfig: {
           compilerOptions: {
             esModuleInterop: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "3.1.1",
+  "version": "3.2.0-beta.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -52,6 +52,7 @@
     "@pinia/nuxt": "0.4.11",
     "@tailwindcss/forms": "0.5.5",
     "@tailwindcss/typography": "0.5.9",
+    "@types/cookie": "0.5.1",
     "@urql/core": "4.1.1",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "6.3.2",
@@ -59,6 +60,7 @@
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.3",
     "clipboard": "2.0.11",
+    "cookie": "0.5.0",
     "dayjs": "2.0.0-alpha.4",
     "is-https": "4.0.0",
     "jose": "4.14.4",
@@ -72,6 +74,7 @@
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.3",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
+    "@types/lodash-es": "4.17.8",
     "@types/marked": "5.0.1",
     "eslint": "8.47.0",
     "eslint-config-prettier": "9.0.0",
@@ -80,6 +83,7 @@
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-yml": "1.8.0",
     "lint-staged": "14.0.1",
+    "lodash-es": "4.17.21",
     "nuxt": "3.6.5",
     "prettier": "3.0.2",
     "prettier-plugin-tailwindcss": "0.5.3",

package/plugins/dayjs.ts

@@ -6,12 +6,14 @@ import de from 'dayjs/locale/de'
 
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
 
 export default defineNuxtPlugin((_nuxtApp) => {
   dayjs.extend(isSameOrBefore)
   dayjs.extend(localizedFormat)
+  dayjs.extend(relativeTime)
   dayjs.extend(timezone)
   dayjs.extend(utc)
 

package/tailwind.config.ts

@@ -98,6 +98,29 @@ export default {
         h6: {
           ...heading(theme),
         },
+        img: {
+          '&::before': {
+            alignItems: 'center',
+            display: 'flex',
+            height: '100%',
+            justifyContent: 'center',
+          },
+        },
+        table: {
+          width: '100%',
+        },
+        td: {
+          padding: theme('padding.4') + ' ' + theme('padding.6'),
+          whiteSpace: 'nowrap',
+        },
+        th: {
+          padding: theme('padding.3') + ' ' + theme('padding.6'),
+          textAlign: 'left',
+          fontSize: theme('fontSize.xs'),
+          fontWeight: theme('fontWeight.medium'),
+          textTransform: 'uppercase',
+          letterSpacing: theme('letterSpacing.wider'),
+        },
       })
       addComponents({
         '::placeholder': {
@@ -186,6 +209,12 @@ export default {
           bright: gray['50'],
           dark: gray['900'],
         },
+        vio: {
+          primary: {
+            bg: gray['100'],
+            text: gray['900'],
+          },
+        },
       },
       keyframes: {
         shake: {

package/utils/auth.ts

@@ -0,0 +1,118 @@
+import { IncomingMessage, ServerResponse } from 'node:http'
+
+import { consola } from 'consola'
+import { parse, serialize } from 'cookie'
+import { decodeJwt } from 'jose'
+import { Store } from 'pinia'
+
+import { useVioAuthStore } from '../store/auth'
+import { xhrPromise } from '../utils/networking'
+import { JWT_NAME } from './constants'
+
+export const getJwtFromCookie = ({ req }: { req: IncomingMessage }) => {
+  if (req.headers.cookie) {
+    const cookies = parse(req.headers.cookie)
+
+    if (cookies[JWT_NAME()]) {
+      const cookie = decodeJwt(cookies[JWT_NAME()])
+
+      if (cookie.exp !== undefined && cookie.exp > Date.now() / 1000) {
+        return {
+          jwt: cookies[JWT_NAME()],
+          jwtDecoded: cookie,
+        }
+      } else {
+        consola.info('Token expired.')
+      }
+    } else {
+      consola.debug('No token cookie.')
+    }
+  } else {
+    consola.debug('No cookie header.')
+  }
+}
+
+export const jwtStore = async ({
+  $urqlReset,
+  store,
+  res,
+  jwt,
+}: {
+  $urqlReset: Function
+  store: Store
+  res?: ServerResponse
+  jwt?: string
+}) => {
+  $urqlReset()
+
+  consola.trace('Storing the following JWT: ' + jwt)
+  ;(store as unknown as { jwtSet: (jwtNew?: string) => void }).jwtSet(jwt)
+
+  if (process.server) {
+    res?.setHeader(
+      'Set-Cookie',
+      serialize(JWT_NAME(), jwt || '', {
+        expires: jwt ? new Date(Date.now() + 86400 * 1000 * 31) : new Date(0),
+        httpOnly: true,
+        path: '/',
+        sameSite: 'lax', // Cannot be 'strict' to allow authentications after clicking on links within webmailers.
+        secure: true,
+      }),
+    )
+  } else {
+    try {
+      await xhrPromise('POST', '/api/auth', jwt || '')
+    } catch (error: any) {
+      return Promise.reject(Error('Authentication api call failed.'))
+    }
+  }
+}
+
+export const useJwtStore = () => {
+  const { $urqlReset } = useNuxtApp()
+  const store = useVioAuthStore()
+  const event = useRequestEvent()
+
+  if (typeof $urqlReset !== 'function')
+    throw new Error('`$urqlReset` is not a function!')
+
+  return {
+    async jwtStore(jwt?: string) {
+      await jwtStore({
+        $urqlReset,
+        store,
+        res: process.server ? event.node.res : undefined,
+        jwt,
+      })
+    },
+  }
+}
+
+export const signOut = async ({
+  $urqlReset,
+  store,
+  res,
+}: {
+  $urqlReset: Function
+  store: Store
+  res?: ServerResponse
+}) => await jwtStore({ $urqlReset, store, res })
+
+export const useSignOut = () => {
+  const { $urqlReset } = useNuxtApp()
+  const store = useVioAuthStore()
+  const event = useRequestEvent()
+
+  if (typeof $urqlReset !== 'function')
+    throw new Error('`$urqlReset` is not a function!')
+
+  return {
+    async signOut() {
+      await signOut({
+        $urqlReset,
+        store,
+        res: process.server ? event.node.res : undefined,
+      })
+    },
+  }
+}

package/utils/constants.ts

@@ -1,3 +1,5 @@
+import { helpers } from '@vuelidate/validators'
+
 export const SITE_NAME = 'Vio'
 
 export const BASE_URL =
@@ -36,9 +38,14 @@ export const I18N_VUE_CONFIG = {
   fallbackWarn: false, // covered by linting
   missingWarn: false, // covered by linting
 }
+export const JWT_NAME = () =>
+  `${process.env.NODE_ENV === 'production' ? '__Secure-' : ''}jwt`
+export const REGEX_UUID =
+  /^[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}$/
 export const TIMEZONE_COOKIE_NAME = [COOKIE_PREFIX, 'tz'].join(COOKIE_SEPARATOR)
 export const TIMEZONE_HEADER_KEY = `X-${SITE_NAME}-Timezone`
 export const VALIDATION_SUGGESTION_TITLE_LENGTH_MAXIMUM = 300
+export const VERIFICATION_FORMAT_UUID = helpers.regex(REGEX_UUID)
 export const VIO_NUXT_BASE_CONFIG = ({
   baseUrl,
   siteName,

package/utils/networking.ts

@@ -6,9 +6,17 @@ import { H3Event, getCookie } from 'h3'
 import { ofetch } from 'ofetch'
 import { Ref } from 'vue'
 
-import type { BackendError } from '../types/api'
+import type { ApiData, BackendError } from '../types/api'
 import { TIMEZONE_COOKIE_NAME } from './constants'
 
+export const getApiDataDefault = (): ApiData =>
+  computed(() =>
+    reactive({
+      data: undefined,
+      ...getApiMeta(),
+    }),
+  )
+
 export const getApiMeta = (
   queries?: {
     error: Ref<CombinedError | undefined>
@@ -122,3 +130,25 @@ export const getTimezone = async (event: H3Event) => {
 
   return undefined
 }
+
+// TODO: use fetch
+export const xhrPromise = (method: string, url: string, jwt: string) =>
+  new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+    xhr.open(method, url)
+
+    if (jwt) {
+      xhr.setRequestHeader('Authorization', 'Bearer ' + jwt)
+    }
+
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(xhr.response)
+      } else {
+        reject(new Error(`${xhr.status}\n${xhr.statusText}`))
+      }
+    }
+    xhr.onerror = () => reject(new Error(`${xhr.status}\n${xhr.statusText}`))
+
+    xhr.send()
+  })

package/utils/{routing.ts → utils.ts}

@@ -2,3 +2,6 @@ import { RouteLocationRaw } from '#vue-router'
 
 export const append = (path: string, pathToAppend?: RouteLocationRaw) =>
   path + (path.endsWith('/') ? '' : '/') + (pathToAppend ?? '')
+
+export const arrayRemoveNulls = <T>(array?: Array<T>) =>
+  array?.flatMap((x: T) => (x ? [x] : [])) || []

package/components/vio/icon/IconShare.vue

@@ -1,27 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :class="classes"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    stroke-width="2"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
-    />
-  </svg>
-</template>
-
-<script lang="ts">
-export default defineComponent({
-  props: {
-    classes: {
-      default: 'h-5 md:h-6 w-5 md:w-6',
-      type: String,
-    },
-  },
-})
-</script>