bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement authentication phase with Cidaas OAuth2 integration

Browse Source 
- Add authentication middleware to protect routes
- Create API endpoints for login, logout, registration, and user info
- Develop UI components for login and registration forms
- Integrate VeeValidate for form validation
- Update environment configuration for Cidaas settings
- Add i18n support for English and German languages
- Enhance Tailwind CSS for improved styling of auth components
- Document authentication flow and testing procedures
This commit is contained in:
Bastian Masanek
2025-10-31 11:44:48 +01:00
parent 749d5401c6
commit f8572c3386
57 changed files with 3357 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
app/pages/auth.vue Normal file
View File

@@ -0,0 +1,105 @@
<!-- app/pages/auth.vue -->
<script setup lang="ts">
/**
* Combined Authentication Page
*
* Features:
* - Tab navigation (Login / Register)
* - Redirects logged-in users to homepage
* - Stores intended destination for post-login redirect
*/
const route = useRoute()
const { loggedIn } = useAuth()
// Redirect if already logged in
if (loggedIn.value) {
navigateTo('/')
}
// Active tab state
const activeTab = ref<'login' | 'register'>('login')
// Set tab from query param if present
onMounted(() => {
if (route.query.tab === 'register') {
activeTab.value = 'register'
}
})
// Error message from OAuth callback
const errorMessage = computed(() => {
if (route.query.error === 'login_failed') {
return 'Login fehlgeschlagen. Bitte versuchen Sie es erneut.'
}
return null
})
// Set page meta
definePageMeta({
layout: 'auth', // Optional: Use separate layout for auth pages
})
</script>
<template>
<div class="container mx-auto max-w-lg px-4 py-12 sm:py-16">
<div class="mb-10 text-center">
<h1 class="text-4xl font-light tracking-tight">
Willkommen
</h1>
<p class="mt-3 text-lg text-white/80">
Melden Sie sich an oder erstellen Sie ein Konto
</p>
</div>
<!-- Error Alert -->
<Alert v-if="errorMessage" class="mb-6 border-destructive bg-destructive/10 text-white">
<AlertCircle class="h-5 w-5 text-destructive" />
<AlertTitle class="text-destructive">Fehler</AlertTitle>
<AlertDescription class="text-white/90">{{ errorMessage }}</AlertDescription>
</Alert>
<!-- Tabs -->
<Tabs v-model="activeTab" class="w-full">
<TabsList class="mb-6 grid w-full grid-cols-2">
<TabsTrigger value="login">
Anmelden
</TabsTrigger>
<TabsTrigger value="register">
Registrieren
</TabsTrigger>
</TabsList>
<!-- Login Tab -->
<TabsContent value="login">
<Card class="p-6 sm:p-8">
<CardHeader class="px-0 pt-0">
<CardTitle class="text-2xl font-medium">Anmelden</CardTitle>
<CardDescription class="text-white/70 mt-2">
Melden Sie sich mit Ihrer E-Mail-Adresse an
</CardDescription>
</CardHeader>
<CardContent class="px-0 pb-0">
<AuthLoginForm />
</CardContent>
</Card>
</TabsContent>
<!-- Register Tab -->
<TabsContent value="register">
<Card class="p-6 sm:p-8">
<CardHeader class="px-0 pt-0">
<CardTitle class="text-2xl font-medium">Konto erstellen</CardTitle>
<CardDescription class="text-white/70 mt-2">
Erstellen Sie ein neues experimenta-Konto
</CardDescription>
</CardHeader>
<CardContent class="px-0 pb-0">
<AuthRegisterForm />
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
</template>

20
app/pages/index.vue
View File

@@ -40,13 +40,13 @@ const handleClick = () => {
</p>
<div class="flex flex-wrap gap-4 items-center">
<UiButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
<Button variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
Zur experimenta Startseite
</UiButton>
</Button>
<UiButton variant="experimenta" size="experimenta" @click="handleClick">
<Button variant="experimenta" size="experimenta" @click="handleClick">
Mit Click Handler
</UiButton>
</Button>
</div>
<p class="mt-6 text-sm text-white/70">
@@ -60,17 +60,17 @@ const handleClick = () => {
<p class="mb-6 text-white/90">Testing shadcn-nuxt Button component integration:</p>
<div class="flex flex-wrap gap-4">
<UiButton variant="default" @click="handleClick"> Default Button </UiButton>
<Button variant="default" @click="handleClick"> Default Button </Button>
<UiButton variant="destructive" @click="handleClick"> Destructive </UiButton>
<Button variant="destructive" @click="handleClick"> Destructive </Button>
<UiButton variant="outline" @click="handleClick"> Outline </UiButton>
<Button variant="outline" @click="handleClick"> Outline </Button>
<UiButton variant="secondary" @click="handleClick"> Secondary </UiButton>
<Button variant="secondary" @click="handleClick"> Secondary </Button>
<UiButton variant="ghost" @click="handleClick"> Ghost </UiButton>
<Button variant="ghost" @click="handleClick"> Ghost </Button>
<UiButton variant="link" @click="handleClick"> Link </UiButton>
<Button variant="link" @click="handleClick"> Link </Button>
</div>
<p class="mt-6 text-sm text-white/70">Open browser console to see button click events.</p>

53
app/pages/internal/styleguide.vue
View File

@@ -223,20 +223,20 @@ const copyCode = async (code: string) => {
</p>
<div class="flex flex-wrap gap-4 items-center mb-6">
<UiButton variant="experimenta" size="experimenta" @click="handleClick">
<Button variant="experimenta" size="experimenta" @click="handleClick">
experimenta Button
</UiButton>
</Button>
<UiButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
<Button variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
As Link
</UiButton>
</Button>
</div>
<details class="bg-white/5 p-4 rounded-lg">
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;UiButton variant="experimenta" size="experimenta" @click="handleClick"&gt;
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;Button variant="experimenta" size="experimenta" @click="handleClick"&gt;
experimenta Button
&lt;/UiButton&gt;</code></pre>
&lt;/Button&gt;</code></pre>
</details>
</div>
@@ -246,22 +246,22 @@ const copyCode = async (code: string) => {
<p class="mb-6 text-white/90">All button variants from shadcn-nuxt component library:</p>
<div class="flex flex-wrap gap-4 mb-6">
<UiButton variant="default" @click="handleClick">Default</UiButton>
<UiButton variant="destructive" @click="handleClick">Destructive</UiButton>
<UiButton variant="outline" @click="handleClick">Outline</UiButton>
<UiButton variant="secondary" @click="handleClick">Secondary</UiButton>
<UiButton variant="ghost" @click="handleClick">Ghost</UiButton>
<UiButton variant="link" @click="handleClick">Link</UiButton>
<Button variant="default" @click="handleClick">Default</Button>
<Button variant="destructive" @click="handleClick">Destructive</Button>
<Button variant="outline" @click="handleClick">Outline</Button>
<Button variant="secondary" @click="handleClick">Secondary</Button>
<Button variant="ghost" @click="handleClick">Ghost</Button>
<Button variant="link" @click="handleClick">Link</Button>
</div>
<details class="bg-white/5 p-4 rounded-lg">
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;UiButton variant="default"&gt;Default&lt;/UiButton&gt;
&lt;UiButton variant="destructive"&gt;Destructive&lt;/UiButton&gt;
&lt;UiButton variant="outline"&gt;Outline&lt;/UiButton&gt;
&lt;UiButton variant="secondary"&gt;Secondary&lt;/UiButton&gt;
&lt;UiButton variant="ghost"&gt;Ghost&lt;/UiButton&gt;
&lt;UiButton variant="link"&gt;Link&lt;/UiButton&gt;</code></pre>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;Button variant="default"&gt;Default&lt;/Button&gt;
&lt;Button variant="destructive"&gt;Destructive&lt;/Button&gt;
&lt;Button variant="outline"&gt;Outline&lt;/Button&gt;
&lt;Button variant="secondary"&gt;Secondary&lt;/Button&gt;
&lt;Button variant="ghost"&gt;Ghost&lt;/Button&gt;
&lt;Button variant="link"&gt;Link&lt;/Button&gt;</code></pre>
</details>
</div>
</section>
@@ -431,6 +431,21 @@ const copyCode = async (code: string) => {
</label>
</div>
</div>
<!-- Error Messages -->
<div>
<label class="form-label">Form mit Fehlermeldung</label>
<input type="email" class="form-input border-red-500/50" placeholder="ihre.email@beispiel.de" />
<p class="form-error">Bitte geben Sie eine gültige E-Mail-Adresse ein</p>
</div>
<!-- Error Message Styles -->
<div class="space-y-3 mt-6">
<h4 class="text-lg font-semibold text-white">Fehlermeldungen (.form-error)</h4>
<p class="form-error">Dies ist eine Fehlermeldung mit gutem Kontrast</p>
<p class="form-error">Required</p>
<p class="form-error">Das Passwort muss mindestens 8 Zeichen lang sein</p>
</div>
</div>
<details class="bg-white/5 p-4 rounded-lg mt-6">
@@ -568,7 +583,7 @@ const copyCode = async (code: string) => {
<ul class="list-disc list-inside space-y-2 text-white/90">
<li><strong>CommonHeader</strong> - Main navigation header with experimenta logo</li>
<li><strong>CommonFooter</strong> - Footer with 4-column grid (links, contact, legal, social)</li>
<li><strong>UiButton</strong> - shadcn-nuxt Button component with 7 variants</li>
<li><strong>Button</strong> - shadcn-nuxt Button component with 7 variants</li>
</ul>
<p class="mt-4 text-sm text-white/70">
See individual component files in <code