feat(frontend): Prettier, add openapi client generation

.gitignore

@@ -56,3 +56,6 @@ bin/
 
 ### Kotlin ###
 .kotlin
+
+### OpenAPI ###
+.api-client

legalconsenthub/.prettierignore

@@ -3,3 +3,4 @@ build
 coverage
 .nuxt
 .output
+.api-client

legalconsenthub/.prettierrc

@@ -1 +1,6 @@
-{}
+{
+  "trailingComma": "none",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

legalconsenthub/api/legalconsenthub-client.ts

@@ -0,0 +1,3 @@
+import { ApplicationFormApi } from '#build/.api-client'
+
+export const applicationFormApiClient = new ApplicationFormApi()

legalconsenthub/app.config.ts

@@ -1,8 +1,8 @@
 export default defineAppConfig({
   ui: {
     colors: {
-      primary: "green",
+      primary: 'green',
-      neutral: "zinc",
+      neutral: 'zinc'
-    },
+    }
-  },
+  }
-});
+})

legalconsenthub/app.vue

@@ -9,35 +9,32 @@
 </template>
 
 <script setup lang="ts">
-const colorMode = useColorMode();
+const colorMode = useColorMode()
 
-const color = computed(() =>
+const color = computed(() => (colorMode.value === 'dark' ? '#111827' : 'white'))
-  colorMode.value === "dark" ? "#111827" : "white",
-);
 
 useHead({
   meta: [
-    { charset: "utf-8" },
+    { charset: 'utf-8' },
-    { name: "viewport", content: "width=device-width, initial-scale=1" },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    { key: "theme-color", name: "theme-color", content: color },
+    { key: 'theme-color', name: 'theme-color', content: color }
   ],
-  link: [{ rel: "icon", href: "/favicon.ico" }],
+  link: [{ rel: 'icon', href: '/favicon.ico' }],
   htmlAttrs: {
-    lang: "en",
+    lang: 'en'
-  },
+  }
-});
+})
 
-const title = "LegalConsentHub";
+const title = 'LegalConsentHub'
-const description =
+const description = 'Das Tool für die Einführung von mitbestimmungspflichtigen digitalen Lösungen.'
-  "Das Tool für die Einführung von mitbestimmungspflichtigen digitalen Lösungen.";
 
 useSeoMeta({
   title,
   description,
   ogTitle: title,
   ogDescription: description,
-  ogImage: "https://dashboard-template.nuxt.dev/social-card.png",
+  ogImage: 'https://dashboard-template.nuxt.dev/social-card.png',
-  twitterImage: "https://dashboard-template.nuxt.dev/social-card.png",
+  twitterImage: 'https://dashboard-template.nuxt.dev/social-card.png',
-  twitterCard: "summary_large_image",
+  twitterCard: 'summary_large_image'
-});
+})
 </script>

legalconsenthub/assets/css/main.css

@@ -1,2 +1,2 @@
-@import "tailwindcss";
+@import 'tailwindcss';
-@import "@nuxt/ui-pro";
+@import '@nuxt/ui-pro';

legalconsenthub/components/Login.vue

@@ -9,12 +9,7 @@
 
       <div class="form-group">
         <label for="password-login">Passwort:</label>
-        <input
+        <input type="password" id="password-login" v-model="password" required />
-          type="password"
-          id="password-login"
-          v-model="password"
-          required
-        />
       </div>
 
       <button type="submit">Login</button>
@@ -23,34 +18,34 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref } from 'vue'
 
-const email = ref("");
+const email = ref('')
-const password = ref("");
+const password = ref('')
 
 const handleLogin = () => {
   if (!email.value || !password.value) {
-    alert("Bitte alle Felder ausfüllen");
+    alert('Bitte alle Felder ausfüllen')
-    return;
+    return
   }
   authClient.signIn.email(
     {
       email: email.value,
-      password: password.value,
+      password: password.value
     },
     {
       onRequest: (ctx) => {
-        console.log("Sending login request", ctx);
+        console.log('Sending login request', ctx)
       },
       onSuccess: (ctx) => {
-        console.log("Successfully logged in!");
+        console.log('Successfully logged in!')
       },
       onError: (ctx) => {
-        console.log(ctx.error.message);
+        console.log(ctx.error.message)
-      },
+      }
-    },
+    }
-  );
+  )
-};
+}
 </script>
 
 <style scoped>

legalconsenthub/components/Register.vue

@@ -19,12 +19,7 @@
 
       <div class="form-group">
         <label for="confirmPassword">Passwort bestätigen:</label>
-        <input
+        <input type="password" id="confirmPassword" v-model="confirmPassword" required />
-          type="password"
-          id="confirmPassword"
-          v-model="confirmPassword"
-          required
-        />
       </div>
 
       <button type="submit">Registrieren</button>
@@ -33,46 +28,41 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref } from 'vue'
 
-const username = ref("");
+const username = ref('')
-const email = ref("");
+const email = ref('')
-const password = ref("");
+const password = ref('')
-const confirmPassword = ref("");
+const confirmPassword = ref('')
 
 const handleRegister = () => {
-  if (
+  if (!username.value || !email.value || !password.value || !confirmPassword.value) {
-    !username.value ||
+    alert('Bitte alle Felder ausfüllen')
-    !email.value ||
+    return
-    !password.value ||
-    !confirmPassword.value
-  ) {
-    alert("Bitte alle Felder ausfüllen");
-    return;
   }
   if (password.value !== confirmPassword.value) {
-    alert("Passwörter stimmen nicht überein");
+    alert('Passwörter stimmen nicht überein')
-    return;
+    return
   }
   authClient.signUp.email(
     {
       email: email.value,
       password: password.value,
-      name: username.value,
+      name: username.value
     },
     {
       onRequest: (ctx) => {
-        console.log("Sending register request", ctx);
+        console.log('Sending register request', ctx)
       },
       onSuccess: (ctx) => {
-        console.log("Successfully registered!");
+        console.log('Successfully registered!')
       },
       onError: (ctx) => {
-        console.log(ctx.error.message);
+        console.log(ctx.error.message)
-      },
+      }
-    },
+    }
-  );
+  )
-};
+}
 </script>
 
 <style scoped>

legalconsenthub/error.vue

@@ -5,20 +5,20 @@
 </template>
 
 <script setup lang="ts">
-import type { NuxtError } from "#app";
+import type { NuxtError } from '#app'
 
 defineProps<{
-  error: NuxtError;
+  error: NuxtError
-}>();
+}>()
 
 useSeoMeta({
-  title: "Page not found",
+  title: 'Page not found',
-  description: "We are sorry but this page could not be found.",
+  description: 'We are sorry but this page could not be found.'
-});
+})
 
 useHead({
   htmlAttrs: {
-    lang: "en",
+    lang: 'en'
-  },
+  }
-});
+})
 </script>

legalconsenthub/eslint.config.mjs

@@ -1,6 +1,6 @@
-import withNuxt from "./.nuxt/eslint.config.mjs";
+import withNuxt from './.nuxt/eslint.config.mjs'
 
-export default withNuxt();
+export default withNuxt()
 // your custom flat configs go here, for example:
 // {
 //   files: ['**/*.ts', '**/*.tsx'],

legalconsenthub/layouts/default.vue

@@ -13,23 +13,11 @@
       </template>
 
       <template #default="{ collapsed }">
-        <UDashboardSearchButton
+        <UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-(--ui-border)" />
-          :collapsed="collapsed"
-          class="bg-transparent ring-(--ui-border)"
-        />
 
-        <UNavigationMenu
+        <UNavigationMenu :collapsed="collapsed" :items="links[0]" orientation="vertical" />
-          :collapsed="collapsed"
-          :items="links[0]"
-          orientation="vertical"
-        />
 
-        <UNavigationMenu
+        <UNavigationMenu :collapsed="collapsed" :items="links[1]" orientation="vertical" class="mt-auto" />
-          :collapsed="collapsed"
-          :items="links[1]"
-          orientation="vertical"
-          class="mt-auto"
-        />
       </template>
 
       <template #footer="{ collapsed }">
@@ -45,116 +33,115 @@
 </template>
 
 <script setup lang="ts">
-const route = useRoute();
+const route = useRoute()
-const toast = useToast();
+const toast = useToast()
 
 const links = [
   [
     {
-      label: "Home",
+      label: 'Home',
-      icon: "i-lucide-house",
+      icon: 'i-lucide-house',
-      to: "/",
+      to: '/'
     },
     {
-      label: "Inbox",
+      label: 'Inbox',
-      icon: "i-lucide-inbox",
+      icon: 'i-lucide-inbox',
-      to: "/inbox",
+      to: '/inbox',
-      badge: "4",
+      badge: '4'
     },
     {
-      label: "Customers",
+      label: 'Customers',
-      icon: "i-lucide-users",
+      icon: 'i-lucide-users',
-      to: "/customers",
+      to: '/customers'
     },
     {
-      label: "Settings",
+      label: 'Settings',
-      to: "/settings",
+      to: '/settings',
-      icon: "i-lucide-settings",
+      icon: 'i-lucide-settings',
       defaultOpen: true,
       children: [
         {
-          label: "General",
+          label: 'General',
-          to: "/settings",
+          to: '/settings',
-          exact: true,
+          exact: true
         },
         {
-          label: "Members",
+          label: 'Members',
-          to: "/settings/members",
+          to: '/settings/members'
         },
         {
-          label: "Notifications",
+          label: 'Notifications',
-          to: "/settings/notifications",
+          to: '/settings/notifications'
         },
         {
-          label: "Security",
+          label: 'Security',
-          to: "/settings/security",
+          to: '/settings/security'
-        },
+        }
-      ],
+      ]
-    },
+    }
   ],
   [
     {
-      label: "Feedback",
+      label: 'Feedback',
-      icon: "i-lucide-message-circle",
+      icon: 'i-lucide-message-circle',
-      to: "https://github.com/nuxt-ui-pro/dashboard",
+      to: 'https://github.com/nuxt-ui-pro/dashboard',
-      target: "_blank",
+      target: '_blank'
     },
     {
-      label: "Help & Support",
+      label: 'Help & Support',
-      icon: "i-lucide-info",
+      icon: 'i-lucide-info',
-      to: "https://github.com/nuxt/ui-pro",
+      to: 'https://github.com/nuxt/ui-pro',
-      target: "_blank",
+      target: '_blank'
-    },
+    }
-  ],
+  ]
-];
+]
 
 const groups = computed(() => [
   {
-    id: "links",
+    id: 'links',
-    label: "Go to",
+    label: 'Go to',
-    items: links.flat(),
+    items: links.flat()
   },
   {
-    id: "code",
+    id: 'code',
-    label: "Code",
+    label: 'Code',
     items: [
       {
-        id: "source",
+        id: 'source',
-        label: "View page source",
+        label: 'View page source',
-        icon: "i-simple-icons-github",
+        icon: 'i-simple-icons-github',
-        to: `https://github.com/nuxt-ui-pro/dashboard/blob/v3/app/pages${route.path === "/" ? "/index" : route.path}.vue`,
+        to: `https://github.com/nuxt-ui-pro/dashboard/blob/v3/app/pages${route.path === '/' ? '/index' : route.path}.vue`,
-        target: "_blank",
+        target: '_blank'
-      },
+      }
-    ],
+    ]
-  },
+  }
-]);
+])
 
 onMounted(async () => {
-  const cookie = useCookie("cookie-consent");
+  const cookie = useCookie('cookie-consent')
-  if (cookie.value === "accepted") {
+  if (cookie.value === 'accepted') {
-    return;
+    return
   }
 
   toast.add({
-    title:
+    title: 'We use first-party cookies to enhance your experience on our website.',
-      "We use first-party cookies to enhance your experience on our website.",
     duration: 0,
     close: false,
     actions: [
       {
-        label: "Accept",
+        label: 'Accept',
-        color: "neutral",
+        color: 'neutral',
-        variant: "outline",
+        variant: 'outline',
         onClick: () => {
-          cookie.value = "accepted";
+          cookie.value = 'accepted'
-        },
+        }
       },
       {
-        label: "Opt out",
+        label: 'Opt out',
-        color: "neutral",
+        color: 'neutral',
-        variant: "ghost",
+        variant: 'ghost'
-      },
+      }
-    ],
+    ]
-  });
+  })
-});
+})
 </script>

legalconsenthub/nuxt.config.ts

@@ -1,6 +1,6 @@
 export default defineNuxtConfig({
-  modules: ["@nuxt/ui-pro", "@nuxt/eslint"],
+  modules: ['@nuxt/ui-pro', '@nuxt/eslint'],
-  css: ["~/assets/css/main.css"],
+  css: ['~/assets/css/main.css'],
   devtools: { enabled: true },
-  compatibilityDate: "2024-11-01",
+  compatibilityDate: '2024-11-01'
-});
+})

legalconsenthub/openapitools.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+  "spaces": 2,
+  "generator-cli": {
+    "version": "7.11.0"
+  }
+}

legalconsenthub/package.json

@@ -11,6 +11,7 @@
     "format": "prettier . --write",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "api:generate": "openapi-generator-cli generate -i ../legalconsenthub-backend/api/legalconsenthub.yml -g typescript-fetch -o .api-client",
     "fix:bettersqlite": "cd node_modules/better-sqlite3 && npx node-gyp rebuild && cd ../.."
   },
   "dependencies": {
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.1.0",
+    "@openapitools/openapi-generator-cli": "^2.16.3",
     "@types/better-sqlite3": "^7.6.12",
     "eslint": "^9.20.1",
     "prettier": "3.5.1",

legalconsenthub/pages/index.vue

@@ -34,10 +34,8 @@
     <template #body>
       <div>
         <pre>{{ session }}</pre>
-        <h1>{{ session.data ? "Du bist eingeloggt" : "Nicht eingeloggt" }}</h1>
+        <h1>{{ session.data ? 'Du bist eingeloggt' : 'Nicht eingeloggt' }}</h1>
-        <button v-if="session?.data" @click="authClient.signOut()">
+        <button v-if="session?.data" @click="authClient.signOut()">Sign out</button>
-          Sign out
-        </button>
       </div>
       <Register />
       <Login />
@@ -50,26 +48,26 @@
 </template>
 
 <script setup lang="ts">
-const session = authClient.useSession();
+const session = authClient.useSession()
 
 const items = [
   [
     {
-      label: "New mail",
+      label: 'New mail',
-      icon: "i-lucide-send",
+      icon: 'i-lucide-send',
-      to: "/inbox",
+      to: '/inbox'
     },
     {
-      label: "New customer",
+      label: 'New customer',
-      icon: "i-lucide-user-plus",
+      icon: 'i-lucide-user-plus',
-      to: "/customers",
+      to: '/customers'
-    },
+    }
-  ],
+  ]
-];
+]
 
 const range = shallowRef({
   start: new Date(),
-  end: new Date(),
+  end: new Date()
-});
+})
-const period = ref<string>("daily");
+const period = ref<string>('daily')
 </script>

legalconsenthub/server/api/auth/[...].ts

@@ -1,6 +1,6 @@
-import { auth } from "../../utils/auth";
+import { auth } from '../../utils/auth'
-import { H3Event } from "h3";
+import { H3Event } from 'h3'
 
 export default defineEventHandler((event: H3Event) => {
-  return auth.handler(toWebRequest(event));
+  return auth.handler(toWebRequest(event))
-});
+})

legalconsenthub/server/utils/auth.ts

@@ -1,11 +1,11 @@
-import { betterAuth } from "better-auth";
+import { betterAuth } from 'better-auth'
-import Database from "better-sqlite3";
+import Database from 'better-sqlite3'
 
 export const auth = betterAuth({
-  database: new Database("./sqlite.db"),
+  database: new Database('./sqlite.db'),
   emailAndPassword: { enabled: true, autoSignIn: false },
-  user: { modelName: "better_auth_user" },
+  user: { modelName: 'better_auth_user' },
-  session: { modelName: "better_auth_session" },
+  session: { modelName: 'better_auth_session' },
-  account: { modelName: "better_auth_account" },
+  account: { modelName: 'better_auth_account' },
-  verification: { modelName: "better_auth_verification" },
+  verification: { modelName: 'better_auth_verification' }
-});
+})

legalconsenthub/utils/auth-client.ts

@@ -1,5 +1,5 @@
-import { createAuthClient } from "better-auth/vue";
+import { createAuthClient } from 'better-auth/vue'
 
 export const authClient = createAuthClient({
-  baseURL: "http://localhost:3000",
+  baseURL: 'http://localhost:3000'
-});
+})