maxibase 0.0.0-stage → 1.0.0

package/layers/base/app/components/DataExplorer.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const AsyncDataExplorer = defineAsyncComponent(() => import('./DataExplorer.vue'))
+
+defineProps<{
+  data: any
+}>()
+
+const openKeys = ref(new Set<string | number>())
+
+function toggle(key: string | number) {
+  if (openKeys.value.has(key)) openKeys.value.delete(key)
+  else openKeys.value.add(key)
+}
+</script>
+
+<template>
+  <div v-if="typeof data === 'object'">
+    <div
+      v-for="(value, key) in data"
+      :key="key"
+    >
+      <div
+        :class="openKeys.has(key) ? '' : 'line'"
+        style="cursor: pointer"
+        @click="toggle(key)"
+      >
+        {{ key }}:
+        <span v-if="!openKeys.has(key) || typeof value !== 'object'">{{ value }}</span>
+      </div>
+      <AsyncDataExplorer
+        v-if="typeof value === 'object' && openKeys.has(key)"
+        :data="value"
+        class="bl pl1"
+      />
+    </div>
+  </div>
+  <span v-else>{{ data }}</span>
+</template>

package/layers/base/app/components/LocaleSwitcher.vue

@@ -0,0 +1,28 @@
+<script setup>
+const { $getLocales, $switchLocale, $getLocale } = useI18n()
+</script>
+
+<template>
+  <select
+    v-if="$getLocales().length > 1"
+    class="locales"
+    :aria-label="$tc('language', 2)"
+    :id="$tc('language', 2)"
+    @change="$switchLocale($event.target.value)"
+  >
+    <option
+      v-for="locale in $getLocales()"
+      :key="locale.code"
+      :value="locale.code"
+      :selected="locale.code === $getLocale()"
+    >
+      {{ locale.code.toUpperCase() }}
+    </option>
+  </select>
+</template>
+
+<style scoped>
+.locales {
+  width: 4em;
+}
+</style>

package/layers/base/app/components/TheConfirmation.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const app = useAppStore()
+const isWorking = ref()
+
+async function confirm() {
+  if (isWorking.value) return
+  isWorking.value = true
+  app.confirmation!.resolve(true)
+  isWorking.value = false
+}
+
+function cancel() {
+  app.confirmation!.resolve(false)
+}
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="app.confirmation"
+      class="modal"
+    >
+      <div
+        class="p2"
+        style="max-width: 600px"
+      >
+        {{ app.confirmation.message || $t('areYouSure') }}
+        <div class="flex-row g2 mt1">
+          <button
+            :class="['flex-1', isWorking ? 'spin' : '']"
+            @click="confirm"
+          >
+            {{ $t('confirm') }}
+          </button>
+          <button
+            class="flex-1"
+            :disabled="isWorking"
+            @click="cancel"
+          >
+            {{ $t('cancel') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>

package/layers/base/app/components/TheLoading.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const appStore = useAppStore()
+</script>
+
+<template>
+  <transition
+    name="loading"
+    mode="out-in"
+  >
+    <div
+      v-if="appStore.isLoading"
+      class="loading primary spin bottom left shadow"
+    />
+  </transition>
+</template>
+
+<style scoped>
+.loading {
+  position: fixed;
+  z-index: 999999;
+  border-radius: 50%;
+  height: 2em;
+  aspect-ratio: 1;
+  margin: 8px;
+}
+
+.loading-enter-active,
+.loading-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+.loading-enter-from,
+.loading-leave-to {
+  opacity: 0;
+}
+</style>

package/layers/base/app/components/TheNotifications.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+const appStore = useAppStore()
+</script>
+
+<template>
+  <TransitionGroup
+    name="notifications"
+    class="notifications flex-column fixed bottom right g2 m1"
+    tag="div"
+  >
+    <div
+      v-for="notification in appStore.notifications"
+      :key="notification.id"
+      :class="[
+        'px2 py1 flex-row flex-center shadow',
+        notification.type === 'error' ? 'danger' : notification.type || 'fg',
+      ]"
+    >
+      {{ $t(notification.message, notification.params) }}
+      <button
+        v-if="notification.isSticky"
+        :class="[notification.type, notification.type + '-border', 'py0 pr0']"
+        @click="appStore.removeNotification(notification.id)"
+      >
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+        >
+          <line
+            x1="0"
+            y1="0"
+            x2="10"
+            y2="10"
+            stroke="currentColor"
+            stroke-width="2"
+          />
+          <line
+            x1="0"
+            y1="10"
+            x2="10"
+            y2="0"
+            stroke="currentColor"
+            stroke-width="2"
+          />
+        </svg>
+      </button>
+    </div>
+  </TransitionGroup>
+</template>
+
+<style scoped>
+.notifications {
+  z-index: 999999;
+  max-width: 400px;
+}
+
+.notifications-move,
+.notifications-enter-active,
+.notifications-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.notifications-enter-from {
+  transform: translateY(120%);
+}
+
+.notifications-leave-to {
+  transform: translateX(100%);
+}
+</style>

package/layers/base/app/components/files/FilesDelete.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const appStore = useAppStore()
+const emits = defineEmits(['deleted'])
+const props = defineProps({
+  path: String,
+  isPrivate: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+async function deleteFile() {
+  try {
+    if (await appStore.confirm()) {
+      await deleteFiles(props.path!, props.isPrivate)
+      appStore.notify('deleted', 'success')
+      emits('deleted')
+    }
+  } catch (e: any) {
+    appStore.notify(e.data?.message, 'error')
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="flex-row g2"
+    @click="deleteFile"
+  >
+    {{ $t('delete') }}
+  </button>
+</template>

package/layers/base/app/components/files/FilesUpload.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const appStore = useAppStore()
+const emits = defineEmits(['uploaded'])
+const props = defineProps({
+  path: String,
+  isPrivate: {
+    type: Boolean,
+    default: true,
+  },
+  imageFormat: {
+    type: Object as PropType<{
+      maxHeight?: number
+      format?: string
+      quality?: number
+    }>,
+  },
+})
+
+const progress = ref<number>(0)
+
+async function uploadFile(event: Event) {
+  const input = event.target as HTMLInputElement
+  if (!input.files || input.files.length === 0 || !props.path) return
+
+  try {
+    let files = Array.from(input.files)
+    if (props.imageFormat) {
+      progress.value = 1
+      const { maxHeight, format, quality } = props.imageFormat
+      const results = await Promise.allSettled(
+        files.map((file) =>
+          file.type.startsWith('image/')
+            ? formatImage(file, maxHeight, format, quality)
+            : Promise.resolve(file),
+        ),
+      )
+      const failed: string[] = []
+      files = files.flatMap((file, i) => {
+        const result = results[i]!
+        if (result.status === 'fulfilled') return result.value
+        failed.push(file.name)
+        return []
+      })
+      if (failed.length) {
+        appStore.notify('formatFailed', 'error', false, { files: failed.join(', ') })
+      }
+    }
+    if (files.length) {
+      let response = await uploadFiles(files, props.path, props.isPrivate, (p) => {
+        progress.value = p
+      })
+      emits('uploaded', response)
+      appStore.notify('saved', 'success')
+    }
+  } catch (e: any) {
+    appStore.notify(e?.data?.message || e?.message, 'error')
+  }
+  progress.value = 0
+  input.value = ''
+}
+</script>
+
+<template>
+  <div
+    v-if="progress"
+    class="modal flex-center"
+  >
+    <progress
+      v-if="progress"
+      :value="progress"
+      max="100"
+      style="width: 90vw"
+    >
+      {{ progress }}%
+    </progress>
+  </div>
+  <input
+    v-else
+    type="file"
+    multiple
+    @change="uploadFile"
+  />
+</template>

package/layers/base/app/error.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps<{ error: NuxtError }>()
+
+const isClientError = props.error.status && props.error.status >= 400 && props.error.status < 500
+
+if (import.meta.client && !isClientError) {
+  $fetch('/api/log', {
+    method: 'POST',
+    body: {
+      summary: props.error.message,
+      data: props.error,
+      origin: useRoute().fullPath,
+      type: 'error',
+    },
+  }).catch(() => {})
+}
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <div class="text-center flex-center flex-column m3 g3">
+      <h1 class="mt0">{{ error.message }}</h1>
+      <NuxtLink to="/">Go back home</NuxtLink>
+    </div>
+  </NuxtLayout>
+</template>

package/layers/base/app/layouts/default.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="page flex-column">
+    <TheHeader />
+    <div class="flex-auto">
+      <slot />
+    </div>
+    <TheFooter />
+  </div>
+</template>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+}
+</style>

package/layers/base/app/layouts/simple.vue

@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>

package/layers/base/app/middleware/admin.ts

@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { user } = useUserSession()
+
+  if (!user.value) {
+    const redirectUrl =
+      '/signin' + (to.fullPath !== '/' ? '?goto=' + encodeURIComponent(to.fullPath) : '')
+    return navigateTo(redirectUrl, { replace: true })
+  } else if (user.value.role !== 'admin') {
+    return createError({
+      statusCode: 403,
+      statusMessage: 'Forbidden',
+      message: 'You do not have permission to access this page.',
+    })
+  }
+})

package/layers/base/app/middleware/authenticated.ts

@@ -0,0 +1,10 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { loggedIn } = useUserSession()
+
+  if (!loggedIn.value) {
+    if (String(to.name)?.endsWith('signin')) return
+    const redirectUrl =
+      '/signin' + (to.fullPath !== '/' ? '?goto=' + encodeURIComponent(to.fullPath) : '')
+    return navigateTo(redirectUrl, { replace: true })
+  }
+})

package/layers/base/app/middleware/mfa.global.ts

@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { loggedIn, user } = useUserSession()
+
+  if (!loggedIn.value || !user.value?.requiresMfaSetup) return
+  if (to.path.endsWith('/user/auth')) return
+
+  return navigateTo('/user/auth', { replace: true })
+})