create-nuxt-base 0.3.16 → 1.0.2

package/nuxt-base-template/app/components/Modal/ModalBackupCodes.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+// ============================================================================
+// Imports
+// ============================================================================
+import type { FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
+import * as v from 'valibot';
+
+import { authClient } from '~/lib/auth-client';
+
+// ============================================================================
+// Props & Emits
+// ============================================================================
+interface Props {
+  initialCodes?: string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialCodes: () => [],
+});
+
+const emit = defineEmits<{
+  close: [result?: unknown];
+}>();
+
+// ============================================================================
+// Composables
+// ============================================================================
+const toast = useToast();
+
+// ============================================================================
+// Variables
+// ============================================================================
+const loading = ref<boolean>(false);
+const backupCodes = ref<string[]>(props.initialCodes);
+
+const passwordSchema = v.object({
+  password: v.pipe(v.string('Passwort ist erforderlich'), v.minLength(1, 'Passwort ist erforderlich')),
+});
+
+type PasswordSchema = InferOutput<typeof passwordSchema>;
+
+// ============================================================================
+// Functions
+// ============================================================================
+function copyBackupCodes(): void {
+  navigator.clipboard.writeText(backupCodes.value.join('\n'));
+  toast.add({
+    color: 'success',
+    description: 'Backup-Codes wurden in die Zwischenablage kopiert',
+    title: 'Kopiert',
+  });
+}
+
+async function generateBackupCodes(payload: FormSubmitEvent<PasswordSchema>): Promise<void> {
+  loading.value = true;
+
+  try {
+    const { data, error } = await authClient.twoFactor.generateBackupCodes({
+      password: payload.data.password,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Backup-Codes konnten nicht generiert werden',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    backupCodes.value = data?.backupCodes ?? [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function handleClose(): void {
+  emit('close');
+}
+</script>
+
+<template>
+  <UModal title="Backup-Codes" :close="{ onClick: handleClose }">
+    <template #body>
+      <div class="space-y-4">
+        <div class="flex items-center gap-3">
+          <UIcon name="i-lucide-key" class="size-6 text-warning" />
+          <p class="text-sm text-muted">Bewahre diese Codes sicher auf. Jeder Code kann nur einmal verwendet werden.</p>
+        </div>
+
+        <template v-if="backupCodes.length > 0">
+          <div class="grid grid-cols-2 gap-2 rounded-lg bg-muted/50 p-4 font-mono text-sm">
+            <span v-for="code in backupCodes" :key="code">{{ code }}</span>
+          </div>
+        </template>
+
+        <template v-else>
+          <UForm :schema="passwordSchema" class="space-y-4" @submit="generateBackupCodes">
+            <UFormField label="Passwort" name="password">
+              <UInput name="password" type="password" placeholder="Dein Passwort" />
+            </UFormField>
+            <UButton type="submit" block :loading="loading"> Neue Backup-Codes generieren </UButton>
+          </UForm>
+        </template>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-3">
+        <UButton v-if="backupCodes.length > 0" variant="outline" icon="i-lucide-copy" @click="copyBackupCodes"> Codes kopieren </UButton>
+        <UButton color="neutral" variant="outline" @click="handleClose"> Schließen </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/nuxt-base-template/app/components/Modal/ModalBase.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+// ============================================================================
+// Props & Emits
+// ============================================================================
+interface Props {
+  description?: string;
+  title?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  description: 'This is a base modal example using Nuxt UI. You can customize this component to fit your needs.',
+  title: 'Modal Example',
+});
+
+const emit = defineEmits<{
+  close: [result?: unknown];
+}>();
+
+// ============================================================================
+// Functions
+// ============================================================================
+function handleCancel(): void {
+  emit('close', false);
+}
+
+function handleConfirm(): void {
+  emit('close', true);
+}
+</script>
+
+<template>
+  <UModal :title="title" :description="description" :close="{ onClick: () => emit('close', false) }">
+    <template #body>
+      <div class="space-y-4">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          This modal demonstrates how to use the <code class="px-1.5 py-0.5 bg-neutral-100 dark:bg-neutral-800 rounded text-xs">useOverlay</code> composable to open modals
+          programmatically.
+        </p>
+        <div class="rounded-lg bg-neutral-50 dark:bg-neutral-900 p-4">
+          <h4 class="text-sm font-medium text-neutral-900 dark:text-white mb-2">Key Features:</h4>
+          <ul class="space-y-2 text-sm text-neutral-600 dark:text-neutral-400">
+            <li class="flex items-start gap-2">
+              <UIcon name="i-lucide-check" class="size-4 mt-0.5 text-success shrink-0" />
+              <span>Programmatic control with useOverlay()</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <UIcon name="i-lucide-check" class="size-4 mt-0.5 text-success shrink-0" />
+              <span>Return values via emit('close')</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <UIcon name="i-lucide-check" class="size-4 mt-0.5 text-success shrink-0" />
+              <span>Fully typed props and emits</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-3">
+        <UButton color="neutral" variant="outline" @click="handleCancel"> Cancel </UButton>
+        <UButton color="primary" @click="handleConfirm"> Confirm </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/nuxt-base-template/app/components/Transition/TransitionSlide.vue

@@ -1,5 +1,3 @@
-<script setup lang="ts"></script>
-
 <template>
   <Transition
     enter-active-class="transition ease-out duration-500"

package/nuxt-base-template/app/components/Transition/TransitionSlideBottom.vue

@@ -1,5 +1,3 @@
-<script setup lang="ts"></script>
-
 <template>
   <Transition
     enter-active-class="transition ease-out duration-500"

package/nuxt-base-template/app/components/Transition/TransitionSlideRevert.vue

@@ -1,5 +1,3 @@
-<script setup lang="ts"></script>
-
 <template>
   <Transition
     enter-active-class="transition ease-out duration-500"

package/nuxt-base-template/app/components/Upload/TusFileUpload.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import type { UploadItem } from '~/interfaces/upload.interface';
+
+// ============================================================================
+// Props & Emits
+// ============================================================================
+interface Props {
+  /** Erlaubte Dateitypen (MIME types oder Extensions) */
+  accept?: string;
+  /** Upload automatisch starten */
+  autoStart?: boolean;
+  /** Chunk-Groesse fuer TUS */
+  chunkSize?: number;
+  /** Beschreibung fuer Dropzone */
+  description?: string;
+  /** Deaktiviert */
+  disabled?: boolean;
+  /** TUS Upload Endpoint */
+  endpoint?: string;
+  /** Label fuer Dropzone */
+  label?: string;
+  /** Layout der Dateiliste */
+  layout?: 'grid' | 'list';
+  /** Maximale Dateigroesse in Bytes */
+  maxSize?: number;
+  /** Zusaetzliche Metadaten */
+  metadata?: Record<string, string>;
+  /** Mehrere Dateien erlauben */
+  multiple?: boolean;
+  /** Parallele Uploads */
+  parallelUploads?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  accept: '*/*',
+  autoStart: true,
+  chunkSize: 5 * 1024 * 1024,
+  description: 'Dateien werden automatisch hochgeladen',
+  label: 'Dateien hier ablegen',
+  layout: 'list',
+  maxSize: 100 * 1024 * 1024,
+  multiple: true,
+  parallelUploads: 3,
+});
+
+const emit = defineEmits<{
+  /** Alle Uploads abgeschlossen */
+  complete: [items: UploadItem[]];
+  /** Upload-Fehler */
+  error: [item: UploadItem, error: Error];
+  /** Ein Upload abgeschlossen */
+  success: [item: UploadItem];
+  /** Files geaendert */
+  'update:modelValue': [files: File[]];
+}>();
+
+// ============================================================================
+// Composables
+// ============================================================================
+const toast = useToast();
+const { formatDuration, formatFileSize } = useFile();
+
+// ============================================================================
+// TUS Upload Setup
+// ============================================================================
+const { addFiles, cancelAll, cancelUpload, clearCompleted, isUploading, pauseAll, pauseUpload, resumeAll, resumeUpload, retryUpload, totalProgress, uploads } = useTusUpload({
+  autoStart: props.autoStart,
+  chunkSize: props.chunkSize,
+  endpoint: props.endpoint,
+  metadata: props.metadata,
+  onError: (item, error) => {
+    toast.add({
+      color: 'error',
+      description: item.file.name,
+      title: 'Upload fehlgeschlagen',
+    });
+    emit('error', item, error);
+  },
+  onSuccess: (item) => {
+    toast.add({
+      color: 'success',
+      description: item.file.name,
+      title: 'Upload abgeschlossen',
+    });
+    emit('success', item);
+  },
+  parallelUploads: props.parallelUploads,
+});
+
+// ============================================================================
+// State
+// ============================================================================
+const files = ref<File[]>([]);
+
+// ============================================================================
+// Watchers
+// ============================================================================
+// Neue Dateien zu TUS hinzufuegen
+watch(
+  files,
+  (newFiles, oldFiles) => {
+    const addedFiles = newFiles.filter((f) => !oldFiles?.includes(f));
+    if (addedFiles.length > 0) {
+      // Validierung
+      const validFiles = addedFiles.filter((file) => {
+        if (file.size > props.maxSize) {
+          toast.add({
+            color: 'error',
+            description: `${file.name} ist zu gross (max. ${formatFileSize(props.maxSize)})`,
+            title: 'Datei zu gross',
+          });
+          return false;
+        }
+        return true;
+      });
+
+      if (validFiles.length > 0) {
+        addFiles(validFiles);
+      }
+    }
+    emit('update:modelValue', newFiles);
+  },
+  { deep: true },
+);
+
+// Emit complete wenn alle fertig
+const completedUploads = computed(() => uploads.value.filter((u) => u.status === 'completed'));
+watch([completedUploads, isUploading], ([completed, uploading]) => {
+  if (completed.length > 0 && !uploading && uploads.value.every((u) => u.status === 'completed' || u.status === 'error')) {
+    emit('complete', completed);
+  }
+});
+
+function getStatusColor(status: string): 'error' | 'neutral' | 'success' | 'warning' {
+  switch (status) {
+    case 'completed':
+      return 'success';
+    case 'error':
+      return 'error';
+    case 'paused':
+      return 'warning';
+    default:
+      return 'neutral';
+  }
+}
+
+function getStatusLabel(status: string): string {
+  switch (status) {
+    case 'completed':
+      return 'Fertig';
+    case 'error':
+      return 'Fehler';
+    case 'paused':
+      return 'Pausiert';
+    case 'uploading':
+      return 'Hochladen';
+    default:
+      return 'Wartend';
+  }
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+function getUploadForFile(file: File, index: number): undefined | UploadItem {
+  // Versuche ueber Index zu matchen (funktioniert wenn Reihenfolge gleich)
+  const upload = uploads.value[index];
+  if (upload?.file.name === file.name && upload?.file.size === file.size) {
+    return upload;
+  }
+  // Fallback: Suche ueber Name und Groesse
+  return uploads.value.find((u) => u.file.name === file.name && u.file.size === file.size);
+}
+
+// ============================================================================
+// Expose fuer Parent-Zugriff
+// ============================================================================
+defineExpose({
+  cancelAll,
+  clearCompleted,
+  isUploading,
+  pauseAll,
+  resumeAll,
+  totalProgress,
+  uploads,
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Nuxt UI FileUpload -->
+    <UFileUpload
+      v-model="files"
+      :accept="accept"
+      :description="description"
+      :disabled="disabled || isUploading"
+      :dropzone="!disabled"
+      :label="label"
+      :layout="layout"
+      :multiple="multiple"
+      class="w-full"
+    >
+      <!-- Custom File Slot mit TUS Progress -->
+      <template #file="{ file, index }">
+        <div class="flex w-full items-center gap-3 rounded-lg border border-default bg-default p-3">
+          <UIcon name="i-lucide-file" class="size-6 shrink-0 text-muted" />
+
+          <div class="min-w-0 flex-1">
+            <p class="truncate text-sm font-medium">{{ file.name }}</p>
+
+            <template v-if="getUploadForFile(file, index)">
+              <div class="mt-0.5 flex items-center gap-2 text-xs text-muted">
+                <span>{{ formatFileSize(file.size) }}</span>
+
+                <template v-if="getUploadForFile(file, index)?.status === 'uploading'">
+                  <span>-</span>
+                  <span>{{ getUploadForFile(file, index)?.progress.percentage }}%</span>
+                  <span>-</span>
+                  <span>{{ formatFileSize(getUploadForFile(file, index)?.progress.speed || 0) }}/s</span>
+                  <span>-</span>
+                  <span>{{ formatDuration(getUploadForFile(file, index)?.progress.remainingTime || 0) }}</span>
+                </template>
+
+                <template v-else>
+                  <span>-</span>
+                  <UBadge :color="getStatusColor(getUploadForFile(file, index)?.status || 'idle')" size="xs" variant="subtle">
+                    {{ getStatusLabel(getUploadForFile(file, index)?.status || 'idle') }}
+                  </UBadge>
+                </template>
+              </div>
+
+              <UProgress
+                v-if="getUploadForFile(file, index)?.status === 'uploading' || getUploadForFile(file, index)?.status === 'paused'"
+                :color="getUploadForFile(file, index)?.status === 'paused' ? 'warning' : 'primary'"
+                :value="getUploadForFile(file, index)?.progress.percentage || 0"
+                class="mt-2"
+                size="xs"
+              />
+            </template>
+
+            <template v-else>
+              <p class="text-xs text-muted">{{ formatFileSize(file.size) }}</p>
+            </template>
+          </div>
+
+          <!-- Actions -->
+          <div class="flex shrink-0 gap-0.5">
+            <UButton
+              v-if="getUploadForFile(file, index)?.status === 'uploading'"
+              color="neutral"
+              icon="i-lucide-pause"
+              size="xs"
+              variant="ghost"
+              @click.stop="pauseUpload(getUploadForFile(file, index)!.id)"
+            />
+            <UButton
+              v-if="getUploadForFile(file, index)?.status === 'paused'"
+              color="primary"
+              icon="i-lucide-play"
+              size="xs"
+              variant="ghost"
+              @click.stop="resumeUpload(getUploadForFile(file, index)!.id)"
+            />
+            <UButton
+              v-if="getUploadForFile(file, index)?.status === 'error'"
+              color="warning"
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              variant="ghost"
+              @click.stop="retryUpload(getUploadForFile(file, index)!.id)"
+            />
+            <UButton
+              v-if="getUploadForFile(file, index)?.status !== 'completed'"
+              color="error"
+              icon="i-lucide-x"
+              size="xs"
+              variant="ghost"
+              @click.stop="cancelUpload(getUploadForFile(file, index)!.id)"
+            />
+          </div>
+        </div>
+      </template>
+
+      <!-- Actions Slot fuer Bulk-Actions -->
+      <template #files-bottom="{ files: fileList }">
+        <div v-if="fileList && Array.isArray(fileList) && fileList.length > 1 && uploads.length > 0" class="flex items-center justify-between border-t border-default pt-2">
+          <div class="text-xs text-muted">
+            <template v-if="isUploading"> {{ totalProgress.percentage }}% - {{ formatFileSize(totalProgress.speed) }}/s </template>
+            <template v-else> {{ uploads.filter((u) => u.status === 'completed').length }}/{{ uploads.length }} abgeschlossen </template>
+          </div>
+
+          <div class="flex gap-1">
+            <UButton v-if="isUploading" color="neutral" size="xs" variant="ghost" @click="pauseAll"> Alle pausieren </UButton>
+            <UButton v-if="uploads.some((u) => u.status === 'paused')" color="primary" size="xs" variant="ghost" @click="resumeAll"> Alle fortsetzen </UButton>
+            <UButton v-if="uploads.some((u) => u.status === 'completed')" color="neutral" size="xs" variant="ghost" @click="clearCompleted"> Fertige entfernen </UButton>
+            <UButton v-if="uploads.length > 0" color="error" size="xs" variant="ghost" @click="cancelAll"> Alle abbrechen </UButton>
+          </div>
+        </div>
+      </template>
+    </UFileUpload>
+  </div>
+</template>

package/nuxt-base-template/app/composables/use-better-auth.ts

@@ -0,0 +1,25 @@
+import { authClient } from '~/lib/auth-client';
+
+export function useBetterAuth() {
+  const session = authClient.useSession();
+
+  const user = computed<null | User>(() => (session.value.data?.user as User) ?? null);
+  const isAuthenticated = computed<boolean>(() => !!user.value);
+  const isAdmin = computed<boolean>(() => user.value?.role === 'admin');
+  const is2FAEnabled = computed<boolean>(() => user.value?.twoFactorEnabled ?? false);
+  const isLoading = computed<boolean>(() => session.value.isPending);
+
+  return {
+    is2FAEnabled,
+    isAdmin,
+    isAuthenticated,
+    isLoading,
+    passkey: authClient.passkey,
+    session,
+    signIn: authClient.signIn,
+    signOut: authClient.signOut,
+    signUp: authClient.signUp,
+    twoFactor: authClient.twoFactor,
+    user,
+  };
+}

package/nuxt-base-template/app/composables/use-file.ts

@@ -1,10 +1,20 @@
-import { useFetch } from '@vueuse/core';
+interface FileInfo {
+  [key: string]: unknown;
+  filename: string;
+  id: string;
+  mimetype: string;
+  size: number;
+  url?: string;
+}
 
 export function useFile() {
-  const { isValidMongoID } = useHelper();
-  async function getFileInfo(id: string | undefined): Promise<any> {
-    const config = useRuntimeConfig();
+  const config = useRuntimeConfig();
+
+  function isValidMongoID(id: string): boolean {
+    return /^[a-f\d]{24}$/i.test(id);
+  }
 
+  async function getFileInfo(id: string | undefined): Promise<FileInfo | null | string> {
     if (!id) {
       return null;
     }
@@ -13,8 +23,49 @@ export function useFile() {
       return id;
     }
 
-    return useFetch<File>(config.public.apiUrl + '/files/info/' + id, { method: 'GET' });
+    try {
+      const response = await $fetch<FileInfo>(config.public.host + '/files/info/' + id, {
+        credentials: 'include',
+        method: 'GET',
+      });
+      return response;
+    } catch (error) {
+      console.error('Error fetching file info:', error);
+      return null;
+    }
+  }
+
+  function getFileUrl(id: string): string {
+    return `${config.public.host}/files/${id}`;
+  }
+
+  function getDownloadUrl(id: string, filename?: string): string {
+    const base = `${config.public.host}/files/download/${id}`;
+    return filename ? `${base}?filename=${encodeURIComponent(filename)}` : base;
+  }
+
+  function formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+  }
+
+  function formatDuration(seconds: number): string {
+    if (seconds < 60) return `${seconds}s`;
+    if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return `${hours}h ${minutes}m`;
   }
 
-  return { getFileInfo };
+  return {
+    formatDuration,
+    formatFileSize,
+    getDownloadUrl,
+    getFileInfo,
+    getFileUrl,
+    isValidMongoID,
+  };
 }

package/nuxt-base-template/app/composables/use-share.ts

@@ -1,18 +1,34 @@
-import ModalShare from '~/components/ModalShare.vue';
-import { useModal } from '~/composables/use-modal';
-
 export function useShare() {
   const route = useRoute();
 
-  function share(title?: string, text?: string, url?: string) {
+  async function share(title?: string, text?: string, url?: string) {
+    if (!import.meta.client) {
+      return;
+    }
+
     if (window?.navigator?.share) {
-      window.navigator.share({
-        text: text ?? window.location.origin,
-        title: title,
-        url: url ?? route.fullPath,
-      });
+      try {
+        await window.navigator.share({
+          text: text ?? window.location.origin,
+          title: title,
+          url: url ?? route.fullPath,
+        });
+      } catch (error) {
+        console.error('Error sharing:', error);
+      }
     } else {
-      useModal().open({ component: ModalShare, data: { link: url ?? window.location.origin, name: window.name }, size: 'md' });
+      // Fallback: Copy to clipboard
+      try {
+        await navigator.clipboard.writeText(url ?? window.location.origin);
+        const toast = useToast();
+        toast.add({
+          color: 'success',
+          description: 'Der Link wurde in die Zwischenablage kopiert.',
+          title: 'Link kopiert',
+        });
+      } catch (error) {
+        console.error('Error copying to clipboard:', error);
+      }
     }
   }