Replace all marketing placeholder content with real MYeasyCMS content
- Logo: Replace generic Makerkit SVG with MYeasyCMS branded logo (grid icon + styled text) - Blog: Replace 3 SaaS placeholder posts with 5 real articles (Vereinsverwaltung, SEPA, Website, DSGVO, Mitglieder-Tipps) - Changelog: Replace 6 generic entries with real feature announcements (Verbandsverwaltung, Fischerei, Dateien, Kurse, Einladungen, i18n) - Documentation: Rewrite all 20 docs from Makerkit references to MYeasyCMS content - FAQ: Replace 6 generic SaaS questions with 10 real MYeasyCMS questions - Navigation: Replace Changelog link with Contact in main nav - Footer: Reorganize into Product/Company/Legal sections - Translations: Update all EN marketing strings to match real Com.BISS content
This commit is contained in:
Zaid Marzguioui
@@ -1,25 +1,37 @@
|
||||
---
|
||||
title: "Authentication Overview"
|
||||
description: "Learn how to set up authentication in your MakerKit application."
|
||||
title: "Benutzerkonten"
|
||||
description: "Benutzerkonten in MYeasyCMS — Registrierung, Login und Profilverwaltung."
|
||||
publishedAt: 2024-04-11
|
||||
order: 1
|
||||
order: 0
|
||||
status: "published"
|
||||
---
|
||||
|
||||
MakerKit uses Supabase to manage authentication within your application.
|
||||
Jeder Benutzer in MYeasyCMS hat ein persönliches Konto mit eigenen Zugangsdaten und Berechtigungen.
|
||||
|
||||
By default, every kit comes with the following built-in authentication methods:
|
||||
- **Email/Password** - we added, by default, the traditional way of signing in
|
||||
- **Third Party Providers** - we also added by default Google Auth sign-in
|
||||
- **Email Links**
|
||||
- **Phone Number**
|
||||
## Anmeldung
|
||||
|
||||
You're free to add (or remove) any of the methods supported by Supabase's
|
||||
Authentication: we will see how.
|
||||
Melden Sie sich mit Ihrer E-Mail-Adresse und Ihrem Passwort an. Beim ersten Login werden Sie aufgefordert, Ihr Passwort zu ändern.
|
||||
|
||||
This documentation will help you with the following:
|
||||
- **Setup** - setting up your Supabase project
|
||||
- **SSR** - use SSR to persist your users' authentication, adding new
|
||||
providers
|
||||
- **Customization** - an overview of how MakerKit works so that you can adapt
|
||||
it to your own application's needs
|
||||
## Rollen
|
||||
|
||||
Jedem Benutzer wird eine Rolle zugewiesen, die seinen Zugriff steuert:
|
||||
|
||||
- **Administrator** — Vollzugriff auf alle Module und Einstellungen
|
||||
- **Kassenwart** — Finanzen, Beiträge, Mitgliederdaten
|
||||
- **Kursleiter** — Kurse, Teilnehmer
|
||||
- **Schriftführer** — Protokolle, Dokumente
|
||||
- **Mitglied** — Zugriff über das Mitgliederportal (eingeschränkt)
|
||||
|
||||
## Profil
|
||||
|
||||
Unter **Profil** können Sie Ihre persönlichen Daten aktualisieren:
|
||||
|
||||
- Name und Kontaktdaten
|
||||
- E-Mail-Adresse
|
||||
- Passwort ändern
|
||||
- Sprache wählen (Deutsch / Englisch)
|
||||
- Multi-Faktor-Authentifizierung aktivieren
|
||||
|
||||
## Multi-Faktor-Authentifizierung (MFA)
|
||||
|
||||
Für zusätzliche Sicherheit können Sie MFA aktivieren. Bei der Anmeldung wird dann neben dem Passwort ein zusätzlicher Code abgefragt — über eine Authenticator-App auf Ihrem Smartphone.
|
||||
|
||||
@@ -1,55 +1,28 @@
|
||||
---
|
||||
title: "Configuration"
|
||||
description: "Learn how authentication works in MakerKit and how to configure it."
|
||||
title: "Anmeldung konfigurieren"
|
||||
description: "Login-Optionen und Sicherheitseinstellungen in MYeasyCMS konfigurieren."
|
||||
publishedAt: 2024-04-11
|
||||
order: 1
|
||||
status: "published"
|
||||
---
|
||||
|
||||
The way you want your users to authenticate can be driven via configuration.
|
||||
MYeasyCMS bietet verschiedene Anmeldemethoden, die vom Administrator konfiguriert werden können.
|
||||
|
||||
If you open the global configuration at `src/configuration.ts`, you'll find
|
||||
the `auth` object:
|
||||
## E-Mail und Passwort
|
||||
|
||||
```tsx title="configuration.ts"
|
||||
import type { Provider } from '@supabase/gotrue-js/src/lib/types';
|
||||
Die Standard-Anmeldung erfolgt mit E-Mail-Adresse und Passwort. Passwörter müssen eine Mindestlänge von 8 Zeichen haben und sollten Groß- und Kleinbuchstaben sowie Zahlen enthalten.
|
||||
|
||||
auth: {
|
||||
requireEmailConfirmation: false,
|
||||
providers: {
|
||||
emailPassword: true,
|
||||
phoneNumber: false,
|
||||
emailLink: false,
|
||||
oAuth: ['google'] as Provider[],
|
||||
},
|
||||
}
|
||||
```
|
||||
## Passwort zurücksetzen
|
||||
|
||||
As you can see, the `providers` object can be configured to only display the
|
||||
auth methods we want to use.
|
||||
Benutzer können ihr Passwort über die "Passwort vergessen"-Funktion zurücksetzen. Ein Link zur Passworterstellung wird per E-Mail zugesandt.
|
||||
|
||||
1. For example, by setting both `phoneNumber` and `emailLink` to `true`, the
|
||||
authentication pages will display the `Email Link` authentication
|
||||
and the `Phone Number` authentication forms.
|
||||
2. Instead, by setting `emailPassword` to `false`, we will remove the
|
||||
`email/password` form from the authentication and user profile pages.
|
||||
## Multi-Faktor-Authentifizierung
|
||||
|
||||
## Requiring Email Verification
|
||||
Für zusätzliche Sicherheit kann MFA aktiviert werden. Unterstützt werden:
|
||||
|
||||
This setting needs to match what you have set up in Supabase. If you require email confirmation before your users can sign in, you will have to flip the following flag in your configuration:
|
||||
- **Authenticator-Apps** — Google Authenticator, Authy oder vergleichbare TOTP-Apps
|
||||
- **Passkeys** — Biometrische Anmeldung über Fingerabdruck oder Gesichtserkennung
|
||||
|
||||
```ts
|
||||
auth: {
|
||||
requireEmailConfirmation: false,
|
||||
}
|
||||
```
|
||||
## Sitzungsdauer
|
||||
|
||||
When the flag is set to `true`, the user will not be redirected to the onboarding flow, but will instead see a successful alert asking them to confirm their email. After confirmation, they will be able to sign in.
|
||||
|
||||
When the flag is set to `false`, the application will redirect them directly to the onboarding flow.
|
||||
|
||||
## Emails sent by Supabase
|
||||
|
||||
Supabase spins up an [InBucket](http://localhost:54324/) instance where all the emails are sent: this is where you can find emails related to password reset, sign-in links, and email verifications.
|
||||
|
||||
To access the InBucket instance, you can go to the following URL: [http://localhost:54324/](http://localhost:54324/). Save this URL, you will use it very often.
|
||||
Anmeldesitzungen laufen nach einer konfigurierbaren Zeitspanne ab. Benutzer werden automatisch abgemeldet, wenn sie längere Zeit inaktiv sind.
|
||||
|
||||
@@ -1,382 +1,29 @@
|
||||
---
|
||||
title: "Email & Password"
|
||||
description: "Traditional email and password authentication."
|
||||
title: "E-Mail und Passwort"
|
||||
description: "Anmeldung mit E-Mail-Adresse und Passwort — die Standard-Authentifizierung in MYeasyCMS."
|
||||
publishedAt: 2024-04-11
|
||||
order: 2
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
Die Anmeldung mit E-Mail und Passwort ist die Standard-Authentifizierungsmethode in MYeasyCMS.
|
||||
|
||||
Email and password authentication is the traditional way users sign up and sign in.
|
||||
## Registrierung
|
||||
|
||||
## Overview
|
||||
Neue Benutzer registrieren sich mit ihrer E-Mail-Adresse und einem selbst gewählten Passwort. Nach der Registrierung wird eine Bestätigungs-E-Mail versendet.
|
||||
|
||||
Email/password authentication provides:
|
||||
- User registration with email verification
|
||||
- Secure password storage
|
||||
- Password reset functionality
|
||||
- Session management
|
||||
## Passwortanforderungen
|
||||
|
||||
## Sign Up Flow
|
||||
- Mindestens 8 Zeichen
|
||||
- Kombination aus Buchstaben und Zahlen empfohlen
|
||||
- Das Passwort kann jederzeit in den Profileinstellungen geändert werden
|
||||
|
||||
### User Registration
|
||||
## Passwort vergessen
|
||||
|
||||
```typescript
|
||||
import { signUpAction } from '~/lib/auth/actions';
|
||||
Über die "Passwort vergessen"-Funktion auf der Login-Seite kann ein neues Passwort angefordert werden. Der Benutzer erhält einen Link per E-Mail, um ein neues Passwort festzulegen.
|
||||
|
||||
const result = await signUpAction({
|
||||
email: 'user@example.com',
|
||||
password: 'SecurePassword123!',
|
||||
});
|
||||
```
|
||||
## Sicherheitshinweise
|
||||
|
||||
### Server Action Implementation
|
||||
|
||||
```typescript
|
||||
'use server';
|
||||
|
||||
import { enhanceAction } from '@kit/next/actions';
|
||||
import * as z from 'zod';
|
||||
|
||||
const SignUpSchema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(8),
|
||||
});
|
||||
|
||||
export const signUpAction = enhanceAction(
|
||||
async (data) => {
|
||||
const client = getSupabaseServerClient();
|
||||
|
||||
const { data: authData, error } = await client.auth.signUp({
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
options: {
|
||||
emailRedirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`,
|
||||
},
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
return { success: true, data: authData };
|
||||
},
|
||||
{ schema: SignUpSchema }
|
||||
);
|
||||
```
|
||||
|
||||
### Sign Up Component
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { signUpAction } from '../_lib/actions';
|
||||
|
||||
export function SignUpForm() {
|
||||
const { register, handleSubmit, formState: { errors } } = useForm();
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const result = await signUpAction(data);
|
||||
|
||||
if (result.success) {
|
||||
toast.success('Check your email to confirm your account');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<label>Email</label>
|
||||
<input
|
||||
type="email"
|
||||
{...register('email', { required: true })}
|
||||
/>
|
||||
{errors.email && <span>Email is required</span>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Password</label>
|
||||
<input
|
||||
type="password"
|
||||
{...register('password', { required: true, minLength: 8 })}
|
||||
/>
|
||||
{errors.password && <span>Password must be 8+ characters</span>}
|
||||
</div>
|
||||
|
||||
<button type="submit">Sign Up</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Sign In Flow
|
||||
|
||||
### User Login
|
||||
|
||||
```typescript
|
||||
export const signInAction = enhanceAction(
|
||||
async (data) => {
|
||||
const client = getSupabaseServerClient();
|
||||
|
||||
const { error } = await client.auth.signInWithPassword({
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
redirect('/home');
|
||||
},
|
||||
{ schema: SignInSchema }
|
||||
);
|
||||
```
|
||||
|
||||
### Sign In Component
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
export function SignInForm() {
|
||||
const { register, handleSubmit } = useForm();
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
try {
|
||||
await signInAction(data);
|
||||
} catch (error) {
|
||||
toast.error('Invalid email or password');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<input
|
||||
type="email"
|
||||
{...register('email')}
|
||||
placeholder="Email"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
{...register('password')}
|
||||
placeholder="Password"
|
||||
/>
|
||||
<button type="submit">Sign In</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Email Verification
|
||||
|
||||
### Requiring Email Confirmation
|
||||
|
||||
Configure in Supabase dashboard or config:
|
||||
|
||||
```typescript
|
||||
// config/auth.config.ts
|
||||
export const authConfig = {
|
||||
requireEmailConfirmation: true,
|
||||
};
|
||||
```
|
||||
|
||||
### Handling Unconfirmed Emails
|
||||
|
||||
```typescript
|
||||
export const signInAction = enhanceAction(
|
||||
async (data) => {
|
||||
const client = getSupabaseServerClient();
|
||||
|
||||
const { data: authData, error } = await client.auth.signInWithPassword({
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
if (error.message.includes('Email not confirmed')) {
|
||||
return {
|
||||
success: false,
|
||||
error: 'Please confirm your email before signing in',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
|
||||
redirect('/home');
|
||||
},
|
||||
{ schema: SignInSchema }
|
||||
);
|
||||
```
|
||||
|
||||
## Password Reset
|
||||
|
||||
### Request Password Reset
|
||||
|
||||
```typescript
|
||||
export const requestPasswordResetAction = enhanceAction(
|
||||
async (data) => {
|
||||
const client = getSupabaseServerClient();
|
||||
|
||||
const { error } = await client.auth.resetPasswordForEmail(data.email, {
|
||||
redirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/reset-password`,
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Check your email for reset instructions',
|
||||
};
|
||||
},
|
||||
{
|
||||
schema: z.object({
|
||||
email: z.string().email(),
|
||||
}),
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
### Reset Password Form
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
export function PasswordResetRequestForm() {
|
||||
const { register, handleSubmit } = useForm();
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const result = await requestPasswordResetAction(data);
|
||||
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<input
|
||||
type="email"
|
||||
{...register('email')}
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
<button type="submit">Send Reset Link</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Update Password
|
||||
|
||||
```typescript
|
||||
export const updatePasswordAction = enhanceAction(
|
||||
async (data) => {
|
||||
const client = getSupabaseServerClient();
|
||||
|
||||
const { error } = await client.auth.updateUser({
|
||||
password: data.newPassword,
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
redirect('/home');
|
||||
},
|
||||
{
|
||||
schema: z.object({
|
||||
newPassword: z.string().min(8),
|
||||
}),
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Password Requirements
|
||||
|
||||
### Validation Schema
|
||||
|
||||
```typescript
|
||||
const PasswordSchema = z
|
||||
.string()
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[A-Z]/, 'Password must contain an uppercase letter')
|
||||
.regex(/[a-z]/, 'Password must contain a lowercase letter')
|
||||
.regex(/[0-9]/, 'Password must contain a number')
|
||||
.regex(/[^A-Za-z0-9]/, 'Password must contain a special character');
|
||||
```
|
||||
|
||||
### Password Strength Indicator
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
export function PasswordInput() {
|
||||
const [password, setPassword] = useState('');
|
||||
const strength = calculatePasswordStrength(password);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-1">
|
||||
{[1, 2, 3, 4].map((level) => (
|
||||
<div
|
||||
key={level}
|
||||
className={cn(
|
||||
'h-1 flex-1 rounded',
|
||||
strength >= level ? 'bg-green-500' : 'bg-gray-200'
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm">
|
||||
{strength === 4 && 'Strong password'}
|
||||
{strength === 3 && 'Good password'}
|
||||
{strength === 2 && 'Fair password'}
|
||||
{strength === 1 && 'Weak password'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Session Management
|
||||
|
||||
### Checking Authentication Status
|
||||
|
||||
```typescript
|
||||
import { getSupabaseServerClient } from '@kit/supabase/server-client';
|
||||
|
||||
export async function requireAuth() {
|
||||
const client = getSupabaseServerClient();
|
||||
const { data: { user } } = await client.auth.getUser();
|
||||
|
||||
if (!user) {
|
||||
redirect('/auth/sign-in');
|
||||
}
|
||||
|
||||
return user;
|
||||
}
|
||||
```
|
||||
|
||||
### Sign Out
|
||||
|
||||
```typescript
|
||||
export const signOutAction = enhanceAction(
|
||||
async () => {
|
||||
const client = getSupabaseServerClient();
|
||||
await client.auth.signOut();
|
||||
redirect('/auth/sign-in');
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Security Best Practices
|
||||
|
||||
1. **Enforce strong passwords** - Minimum 8 characters, mixed case, numbers, symbols
|
||||
2. **Rate limit login attempts** - Prevent brute force attacks
|
||||
3. **Use HTTPS only** - Encrypt data in transit
|
||||
4. **Enable email verification** - Confirm email ownership
|
||||
5. **Implement account lockout** - After failed attempts
|
||||
6. **Log authentication events** - Track sign-ins and failures
|
||||
7. **Support 2FA** - Add extra security layer
|
||||
- Verwenden Sie ein einzigartiges Passwort für MYeasyCMS
|
||||
- Geben Sie Ihre Zugangsdaten nicht an andere weiter
|
||||
- Aktivieren Sie die Multi-Faktor-Authentifizierung für zusätzliche Sicherheit
|
||||
|
||||
@@ -1,392 +1,30 @@
|
||||
---
|
||||
title: "Magic Links"
|
||||
description: "Passwordless authentication with email magic links."
|
||||
title: "Einladungslinks"
|
||||
description: "Benutzer per E-Mail-Einladung in den Vereins-Account einladen."
|
||||
publishedAt: 2024-04-11
|
||||
order: 4
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
Administratoren können neue Benutzer per Einladungslink in den Vereins-Account einladen.
|
||||
|
||||
Magic links provide passwordless authentication by sending a one-time link to the user's email.
|
||||
## So funktioniert die Einladung
|
||||
|
||||
## How It Works
|
||||
1. Navigieren Sie zu **Einstellungen → Mitarbeiter → Einladen**
|
||||
2. Geben Sie die E-Mail-Adresse des neuen Benutzers ein
|
||||
3. Wählen Sie die Rolle (Administrator, Kassenwart, Kursleiter, etc.)
|
||||
4. Klicken Sie auf **Einladung senden**
|
||||
|
||||
1. User enters their email address
|
||||
2. System sends an email with a unique link
|
||||
3. User clicks the link in their email
|
||||
4. User is automatically signed in
|
||||
Der eingeladene Benutzer erhält eine E-Mail mit einem Registrierungslink. Nach der Registrierung hat er sofort Zugriff auf die Funktionen, die seiner Rolle entsprechen.
|
||||
|
||||
## Benefits
|
||||
## Einladungen verwalten
|
||||
|
||||
- **No password to remember** - Better UX
|
||||
- **More secure** - No password to steal
|
||||
- **Lower friction** - Faster sign-up process
|
||||
- **Email verification** - Confirms email ownership
|
||||
Unter **Mitglieder → Einladungen** sehen Sie alle offenen und angenommenen Einladungen:
|
||||
|
||||
## Implementation
|
||||
- **Offen** — Einladung wurde versendet, aber noch nicht angenommen
|
||||
- **Angenommen** — Benutzer hat die Einladung angenommen und sein Konto erstellt
|
||||
- **Abgelaufen** — Einladungslink ist nicht mehr gültig (kann erneut gesendet werden)
|
||||
|
||||
### Magic Link Form
|
||||
## Erneut einladen
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { sendMagicLinkAction } from '../_lib/actions';
|
||||
|
||||
export function MagicLinkForm() {
|
||||
const { register, handleSubmit, formState: { isSubmitting } } = useForm();
|
||||
const [sent, setSent] = useState(false);
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const result = await sendMagicLinkAction(data);
|
||||
|
||||
if (result.success) {
|
||||
setSent(true);
|
||||
}
|
||||
};
|
||||
|
||||
if (sent) {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<h2>Check your email</h2>
|
||||
<p>We've sent you a magic link to sign in.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<label>Email address</label>
|
||||
<input
|
||||
type="email"
|
||||
{...register('email', { required: true })}
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Sending...' : 'Send magic link'}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Server Action
|
||||
|
||||
```typescript
|
||||
'use server';
|
||||
|
||||
import { enhanceAction } from '@kit/next/actions';
|
||||
import { getSupabaseServerClient } from '@kit/supabase/server-client';
|
||||
import * as z from 'zod';
|
||||
|
||||
export const sendMagicLinkAction = enhanceAction(
|
||||
async (data) => {
|
||||
const client = getSupabaseServerClient();
|
||||
const origin = process.env.NEXT_PUBLIC_SITE_URL!;
|
||||
|
||||
const { error } = await client.auth.signInWithOtp({
|
||||
email: data.email,
|
||||
options: {
|
||||
emailRedirectTo: `${origin}/auth/callback`,
|
||||
shouldCreateUser: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Check your email for the magic link',
|
||||
};
|
||||
},
|
||||
{
|
||||
schema: z.object({
|
||||
email: z.string().email(),
|
||||
}),
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
### Enable in Supabase
|
||||
|
||||
1. Go to **Authentication** → **Providers** → **Email**
|
||||
2. Enable "Enable Email Provider"
|
||||
3. Enable "Enable Email Confirmations"
|
||||
|
||||
### Configure Email Template
|
||||
|
||||
Customize the magic link email in Supabase Dashboard:
|
||||
|
||||
1. Go to **Authentication** → **Email Templates**
|
||||
2. Select "Magic Link"
|
||||
3. Customize the template:
|
||||
|
||||
```html
|
||||
<h2>Sign in to {{ .SiteURL }}</h2>
|
||||
<p>Click the link below to sign in:</p>
|
||||
<p><a href="{{ .ConfirmationURL }}">Sign in</a></p>
|
||||
<p>This link expires in {{ .TokenExpiryHours }} hours.</p>
|
||||
```
|
||||
|
||||
## Callback Handler
|
||||
|
||||
Handle the magic link callback:
|
||||
|
||||
```typescript
|
||||
// app/auth/callback/route.ts
|
||||
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { cookies } from 'next/headers';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const requestUrl = new URL(request.url);
|
||||
const token_hash = requestUrl.searchParams.get('token_hash');
|
||||
const type = requestUrl.searchParams.get('type');
|
||||
|
||||
if (token_hash && type === 'magiclink') {
|
||||
const cookieStore = cookies();
|
||||
const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
|
||||
|
||||
const { error } = await supabase.auth.verifyOtp({
|
||||
token_hash,
|
||||
type: 'magiclink',
|
||||
});
|
||||
|
||||
if (!error) {
|
||||
return NextResponse.redirect(new URL('/home', request.url));
|
||||
}
|
||||
}
|
||||
|
||||
// Return error if verification failed
|
||||
return NextResponse.redirect(
|
||||
new URL('/auth/sign-in?error=invalid_link', request.url)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced Features
|
||||
|
||||
### Custom Redirect
|
||||
|
||||
Specify where users go after clicking the link:
|
||||
|
||||
```typescript
|
||||
await client.auth.signInWithOtp({
|
||||
email: data.email,
|
||||
options: {
|
||||
emailRedirectTo: `${origin}/onboarding`,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Disable Auto Sign-Up
|
||||
|
||||
Require users to sign up first:
|
||||
|
||||
```typescript
|
||||
await client.auth.signInWithOtp({
|
||||
email: data.email,
|
||||
options: {
|
||||
shouldCreateUser: false, // Don't create new users
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Token Expiry
|
||||
|
||||
Configure link expiration (default: 1 hour):
|
||||
|
||||
```sql
|
||||
-- In Supabase SQL Editor
|
||||
ALTER TABLE auth.users
|
||||
SET default_token_lifetime = '15 minutes';
|
||||
```
|
||||
|
||||
## Rate Limiting
|
||||
|
||||
Prevent abuse by rate limiting magic link requests:
|
||||
|
||||
```typescript
|
||||
import { ratelimit } from '~/lib/rate-limit';
|
||||
|
||||
export const sendMagicLinkAction = enhanceAction(
|
||||
async (data, user, request) => {
|
||||
// Rate limit by IP
|
||||
const ip = request.headers.get('x-forwarded-for') || 'unknown';
|
||||
const { success } = await ratelimit.limit(ip);
|
||||
|
||||
if (!success) {
|
||||
throw new Error('Too many requests. Please try again later.');
|
||||
}
|
||||
|
||||
const client = getSupabaseServerClient();
|
||||
|
||||
await client.auth.signInWithOtp({
|
||||
email: data.email,
|
||||
});
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
{ schema: EmailSchema }
|
||||
);
|
||||
```
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Link Expiration
|
||||
|
||||
Magic links should expire quickly:
|
||||
- Default: 1 hour
|
||||
- Recommended: 15-30 minutes for production
|
||||
- Shorter for sensitive actions
|
||||
|
||||
### One-Time Use
|
||||
|
||||
Links should be invalidated after use:
|
||||
|
||||
```typescript
|
||||
// Supabase handles this automatically
|
||||
// Each link can only be used once
|
||||
```
|
||||
|
||||
### Email Verification
|
||||
|
||||
Ensure emails are verified:
|
||||
|
||||
```typescript
|
||||
const { data: { user } } = await client.auth.getUser();
|
||||
|
||||
if (!user.email_confirmed_at) {
|
||||
redirect('/verify-email');
|
||||
}
|
||||
```
|
||||
|
||||
## User Experience
|
||||
|
||||
### Loading State
|
||||
|
||||
Show feedback while sending:
|
||||
|
||||
```tsx
|
||||
export function MagicLinkForm() {
|
||||
const [status, setStatus] = useState<'idle' | 'sending' | 'sent'>('idle');
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
setStatus('sending');
|
||||
await sendMagicLinkAction(data);
|
||||
setStatus('sent');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{status === 'idle' && <EmailForm onSubmit={onSubmit} />}
|
||||
{status === 'sending' && <SendingMessage />}
|
||||
{status === 'sent' && <CheckEmailMessage />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Resend Link
|
||||
|
||||
Allow users to request a new link:
|
||||
|
||||
```tsx
|
||||
export function ResendMagicLink({ email }: { email: string }) {
|
||||
const [canResend, setCanResend] = useState(false);
|
||||
const [countdown, setCountdown] = useState(60);
|
||||
|
||||
useEffect(() => {
|
||||
if (countdown > 0) {
|
||||
const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
|
||||
return () => clearTimeout(timer);
|
||||
} else {
|
||||
setCanResend(true);
|
||||
}
|
||||
}, [countdown]);
|
||||
|
||||
const handleResend = async () => {
|
||||
await sendMagicLinkAction({ email });
|
||||
setCountdown(60);
|
||||
setCanResend(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<button onClick={handleResend} disabled={!canResend}>
|
||||
{canResend ? 'Resend link' : `Resend in ${countdown}s`}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Email Deliverability
|
||||
|
||||
### SPF, DKIM, DMARC
|
||||
|
||||
Configure email authentication:
|
||||
1. Add SPF record to DNS
|
||||
2. Enable DKIM signing
|
||||
3. Set up DMARC policy
|
||||
|
||||
### Custom Email Domain
|
||||
|
||||
Use your own domain for better deliverability:
|
||||
|
||||
1. Go to **Project Settings** → **Auth**
|
||||
2. Configure custom SMTP
|
||||
3. Verify domain ownership
|
||||
|
||||
### Monitor Bounces
|
||||
|
||||
Track email delivery issues:
|
||||
|
||||
```typescript
|
||||
// Handle email bounces
|
||||
export async function handleEmailBounce(email: string) {
|
||||
await client.from('email_bounces').insert({
|
||||
email,
|
||||
bounced_at: new Date(),
|
||||
});
|
||||
|
||||
// Notify user via other channel
|
||||
}
|
||||
```
|
||||
|
||||
## Testing
|
||||
|
||||
### Local Development
|
||||
|
||||
In development, emails go to InBucket:
|
||||
|
||||
```
|
||||
http://localhost:54324
|
||||
```
|
||||
|
||||
Check this URL to see magic link emails during testing.
|
||||
|
||||
### Test Mode
|
||||
|
||||
Create a test link without sending email:
|
||||
|
||||
```typescript
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('Magic link URL:', confirmationUrl);
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Clear communication** - Tell users to check spam
|
||||
2. **Short expiry** - 15-30 minutes for security
|
||||
3. **Rate limiting** - Prevent abuse
|
||||
4. **Fallback option** - Offer password auth as backup
|
||||
5. **Custom domain** - Better deliverability
|
||||
6. **Monitor delivery** - Track bounces and failures
|
||||
7. **Resend option** - Let users request new link
|
||||
8. **Mobile-friendly** - Ensure links work on mobile
|
||||
Abgelaufene oder nicht angenommene Einladungen können mit einem Klick erneut versendet werden.
|
||||
|
||||
@@ -1,395 +1,31 @@
|
||||
---
|
||||
title: "OAuth"
|
||||
description: "Sign in with Google, GitHub, and other OAuth providers."
|
||||
title: "Mitgliederportal"
|
||||
description: "Das Mitgliederportal ermöglicht Vereinsmitgliedern den Zugriff auf ihre eigenen Daten."
|
||||
publishedAt: 2024-04-11
|
||||
order: 3
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
Das Mitgliederportal ist der Bereich von MYeasyCMS, der für die Vereinsmitglieder selbst zugänglich ist.
|
||||
|
||||
Allow users to sign in with their existing accounts from Google, GitHub, and other providers.
|
||||
## Funktionen für Mitglieder
|
||||
|
||||
## Supported Providers
|
||||
Über das Portal können Mitglieder:
|
||||
|
||||
Supabase supports many OAuth providers:
|
||||
- Google
|
||||
- GitHub
|
||||
- GitLab
|
||||
- Bitbucket
|
||||
- Azure
|
||||
- Facebook
|
||||
- Twitter
|
||||
- Discord
|
||||
- Slack
|
||||
- And more...
|
||||
- **Stammdaten einsehen und aktualisieren** — Adresse, Telefonnummer, E-Mail
|
||||
- **Kursanmeldungen** — Sich für Kurse und Veranstaltungen anmelden
|
||||
- **Beitragshistorie** — Ihre Zahlungshistorie einsehen
|
||||
- **Dokumente** — Persönliche Dokumente herunterladen (Ausweis, Bestätigungen)
|
||||
- **Newsletter** — Newsletter-Abonnement verwalten
|
||||
|
||||
## Setting Up OAuth
|
||||
## Zugang einrichten
|
||||
|
||||
### Configure in Supabase Dashboard
|
||||
Mitglieder erhalten Zugang zum Portal über die Vereinswebsite. Der Login erfolgt mit E-Mail-Adresse und Passwort.
|
||||
|
||||
1. Go to **Authentication** → **Providers**
|
||||
2. Enable your desired provider (e.g., Google)
|
||||
3. Add your OAuth credentials:
|
||||
- **Client ID**
|
||||
- **Client Secret**
|
||||
- **Redirect URL**: `https://your-project.supabase.co/auth/v1/callback`
|
||||
## Datenschutz
|
||||
|
||||
### Google OAuth Setup
|
||||
Jedes Mitglied sieht ausschließlich seine eigenen Daten. Ein Zugriff auf andere Mitgliederdaten oder Verwaltungsfunktionen ist nicht möglich.
|
||||
|
||||
1. Go to [Google Cloud Console](https://console.cloud.google.com)
|
||||
2. Create a new project or select existing
|
||||
3. Enable Google+ API
|
||||
4. Create OAuth 2.0 credentials
|
||||
5. Add authorized redirect URIs:
|
||||
- Production: `https://your-project.supabase.co/auth/v1/callback`
|
||||
- Development: `http://localhost:54321/auth/v1/callback`
|
||||
## Kontoverknüpfung
|
||||
|
||||
### GitHub OAuth Setup
|
||||
|
||||
1. Go to GitHub Settings → Developer Settings → OAuth Apps
|
||||
2. Click "New OAuth App"
|
||||
3. Fill in details:
|
||||
- **Application name**: Your App
|
||||
- **Homepage URL**: `https://yourapp.com`
|
||||
- **Authorization callback URL**: `https://your-project.supabase.co/auth/v1/callback`
|
||||
4. Copy Client ID and Client Secret to Supabase
|
||||
|
||||
## Implementation
|
||||
|
||||
### OAuth Sign In Button
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { signInWithOAuthAction } from '../_lib/actions';
|
||||
|
||||
export function OAuthButtons() {
|
||||
const handleGoogleSignIn = async () => {
|
||||
await signInWithOAuthAction('google');
|
||||
};
|
||||
|
||||
const handleGitHubSignIn = async () => {
|
||||
await signInWithOAuthAction('github');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
onClick={handleGoogleSignIn}
|
||||
className="w-full flex items-center justify-center gap-2 border rounded-lg p-2"
|
||||
>
|
||||
<GoogleIcon />
|
||||
Continue with Google
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleGitHubSignIn}
|
||||
className="w-full flex items-center justify-center gap-2 border rounded-lg p-2"
|
||||
>
|
||||
<GitHubIcon />
|
||||
Continue with GitHub
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Server Action
|
||||
|
||||
```typescript
|
||||
'use server';
|
||||
|
||||
import { enhanceAction } from '@kit/next/actions';
|
||||
import { getSupabaseServerClient } from '@kit/supabase/server-client';
|
||||
import * as z from 'zod';
|
||||
|
||||
const OAuthProviderSchema = z.enum([
|
||||
'google',
|
||||
'github',
|
||||
'gitlab',
|
||||
'azure',
|
||||
'facebook',
|
||||
]);
|
||||
|
||||
export const signInWithOAuthAction = enhanceAction(
|
||||
async (provider) => {
|
||||
const client = getSupabaseServerClient();
|
||||
const origin = process.env.NEXT_PUBLIC_SITE_URL!;
|
||||
|
||||
const { data, error } = await client.auth.signInWithOAuth({
|
||||
provider,
|
||||
options: {
|
||||
redirectTo: `${origin}/auth/callback`,
|
||||
},
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Redirect to OAuth provider
|
||||
redirect(data.url);
|
||||
},
|
||||
{
|
||||
schema: OAuthProviderSchema,
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
### OAuth Callback Handler
|
||||
|
||||
```typescript
|
||||
// app/auth/callback/route.ts
|
||||
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { cookies } from 'next/headers';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const requestUrl = new URL(request.url);
|
||||
const code = requestUrl.searchParams.get('code');
|
||||
|
||||
if (code) {
|
||||
const cookieStore = cookies();
|
||||
const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
|
||||
|
||||
await supabase.auth.exchangeCodeForSession(code);
|
||||
}
|
||||
|
||||
// Redirect to home page
|
||||
return NextResponse.redirect(new URL('/home', request.url));
|
||||
}
|
||||
```
|
||||
|
||||
## Customizing OAuth Flow
|
||||
|
||||
### Scopes
|
||||
|
||||
Request specific permissions:
|
||||
|
||||
```typescript
|
||||
await client.auth.signInWithOAuth({
|
||||
provider: 'google',
|
||||
options: {
|
||||
scopes: 'email profile https://www.googleapis.com/auth/calendar',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Query Parameters
|
||||
|
||||
Pass custom parameters:
|
||||
|
||||
```typescript
|
||||
await client.auth.signInWithOAuth({
|
||||
provider: 'azure',
|
||||
options: {
|
||||
queryParams: {
|
||||
prompt: 'consent',
|
||||
access_type: 'offline',
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Skip Browser Redirect
|
||||
|
||||
For mobile apps or custom flows:
|
||||
|
||||
```typescript
|
||||
const { data } = await client.auth.signInWithOAuth({
|
||||
provider: 'google',
|
||||
options: {
|
||||
skipBrowserRedirect: true,
|
||||
},
|
||||
});
|
||||
|
||||
// data.url contains the OAuth URL
|
||||
// Handle redirect manually
|
||||
```
|
||||
|
||||
## Account Linking
|
||||
|
||||
### Linking Additional Providers
|
||||
|
||||
Allow users to link multiple OAuth accounts:
|
||||
|
||||
```typescript
|
||||
export const linkOAuthProviderAction = enhanceAction(
|
||||
async (provider) => {
|
||||
const client = getSupabaseServerClient();
|
||||
const user = await requireAuth();
|
||||
|
||||
const { data, error } = await client.auth.linkIdentity({
|
||||
provider,
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
redirect(data.url);
|
||||
},
|
||||
{ schema: OAuthProviderSchema, auth: true }
|
||||
);
|
||||
```
|
||||
|
||||
### Unlinking Providers
|
||||
|
||||
```typescript
|
||||
export const unlinkOAuthProviderAction = enhanceAction(
|
||||
async ({ provider, identityId }) => {
|
||||
const client = getSupabaseServerClient();
|
||||
|
||||
const { error } = await client.auth.unlinkIdentity({
|
||||
identity_id: identityId,
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
revalidatePath('/settings/security');
|
||||
},
|
||||
{
|
||||
schema: z.object({
|
||||
provider: z.string(),
|
||||
identityId: z.string(),
|
||||
}),
|
||||
auth: true,
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
### Viewing Linked Identities
|
||||
|
||||
```typescript
|
||||
import { getSupabaseServerClient } from '@kit/supabase/server-client';
|
||||
|
||||
export async function getLinkedIdentities() {
|
||||
const client = getSupabaseServerClient();
|
||||
const { data: { user } } = await client.auth.getUser();
|
||||
|
||||
return user?.identities || [];
|
||||
}
|
||||
```
|
||||
|
||||
## User Data from OAuth
|
||||
|
||||
### Accessing Provider Data
|
||||
|
||||
```typescript
|
||||
const { data: { user } } = await client.auth.getUser();
|
||||
|
||||
// User metadata from provider
|
||||
const {
|
||||
full_name,
|
||||
avatar_url,
|
||||
email,
|
||||
} = user.user_metadata;
|
||||
|
||||
// Provider-specific data
|
||||
const identities = user.identities || [];
|
||||
const googleIdentity = identities.find(i => i.provider === 'google');
|
||||
|
||||
console.log(googleIdentity?.identity_data);
|
||||
```
|
||||
|
||||
### Storing Additional Data
|
||||
|
||||
```typescript
|
||||
export const completeOAuthProfileAction = enhanceAction(
|
||||
async (data) => {
|
||||
const client = getSupabaseServerClient();
|
||||
const user = await requireAuth();
|
||||
|
||||
// Update user metadata
|
||||
await client.auth.updateUser({
|
||||
data: {
|
||||
username: data.username,
|
||||
bio: data.bio,
|
||||
},
|
||||
});
|
||||
|
||||
// Update profile in database
|
||||
await client.from('profiles').upsert({
|
||||
id: user.id,
|
||||
username: data.username,
|
||||
bio: data.bio,
|
||||
avatar_url: user.user_metadata.avatar_url,
|
||||
});
|
||||
|
||||
redirect('/home');
|
||||
},
|
||||
{ schema: ProfileSchema, auth: true }
|
||||
);
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
### Enable OAuth in Config
|
||||
|
||||
```typescript
|
||||
// config/auth.config.ts
|
||||
export const authConfig = {
|
||||
providers: {
|
||||
emailPassword: true,
|
||||
oAuth: ['google', 'github'],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Conditional Rendering
|
||||
|
||||
```tsx
|
||||
import { authConfig } from '~/config/auth.config';
|
||||
|
||||
export function AuthProviders() {
|
||||
return (
|
||||
<>
|
||||
{authConfig.providers.emailPassword && <EmailPasswordForm />}
|
||||
|
||||
{authConfig.providers.oAuth?.includes('google') && (
|
||||
<GoogleSignInButton />
|
||||
)}
|
||||
|
||||
{authConfig.providers.oAuth?.includes('github') && (
|
||||
<GitHubSignInButton />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Redirect URI Mismatch
|
||||
|
||||
Ensure redirect URIs match exactly:
|
||||
- Check Supabase Dashboard → Authentication → URL Configuration
|
||||
- Verify OAuth app settings in provider console
|
||||
- Use exact URLs (including http/https)
|
||||
|
||||
### Missing Email
|
||||
|
||||
Some providers don't share email by default:
|
||||
|
||||
```typescript
|
||||
const { data: { user } } = await client.auth.getUser();
|
||||
|
||||
if (!user.email) {
|
||||
// Request email separately or prompt user
|
||||
redirect('/auth/complete-profile');
|
||||
}
|
||||
```
|
||||
|
||||
### Rate Limiting
|
||||
|
||||
OAuth providers may rate limit requests:
|
||||
- Cache OAuth tokens appropriately
|
||||
- Don't make excessive authorization requests
|
||||
- Handle rate limit errors gracefully
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Request minimum scopes** - Only ask for what you need
|
||||
2. **Handle errors gracefully** - OAuth can fail for many reasons
|
||||
3. **Verify email addresses** - Some providers don't verify emails
|
||||
4. **Support account linking** - Let users connect multiple providers
|
||||
5. **Provide fallback** - Always offer email/password as backup
|
||||
6. **Log OAuth events** - Track sign-ins and linking attempts
|
||||
7. **Test thoroughly** - Test with real provider accounts
|
||||
Mitglieder, die in mehreren Vereinen aktiv sind, können ihre Konten verknüpfen und zwischen den Vereinen wechseln, ohne sich erneut anmelden zu müssen.
|
||||
|
||||
@@ -1,15 +1,32 @@
|
||||
---
|
||||
title: "Billing & Payments"
|
||||
description: "Learn how to set up billing and payment processing in your MakerKit application."
|
||||
title: "Tarife und Preise"
|
||||
description: "Faire Preise nach Vereinsgröße — alle Funktionen inklusive."
|
||||
publishedAt: 2024-04-11
|
||||
order: 5
|
||||
status: "published"
|
||||
---
|
||||
|
||||
MakerKit integrates with popular payment providers to handle subscriptions and billing.
|
||||
MYeasyCMS bietet faire Preise, die sich an der Größe Ihres Vereins orientieren.
|
||||
|
||||
This section covers:
|
||||
- Setting up payment providers
|
||||
- Managing subscriptions
|
||||
- Handling webhooks
|
||||
- Pricing plans and tiers
|
||||
## Preismodell
|
||||
|
||||
Die Preise richten sich nach der Anzahl der verwalteten Mitglieder. Alle Module und Funktionen sind in jedem Tarif enthalten — es gibt keine kostenpflichtigen Zusatzmodule.
|
||||
|
||||
## Was ist inklusive?
|
||||
|
||||
- **Alle Module** — Mitglieder, Finanzen, Kurse, Veranstaltungen, Newsletter, Dokumente, Site-Builder
|
||||
- **Unbegrenzte Benutzer** — Keine Begrenzung der Benutzeranzahl
|
||||
- **Persönliche Einrichtung** — Das Com.BISS-Team richtet Ihren Account ein
|
||||
- **Support** — Direkter, persönlicher Support per Telefon und E-Mail
|
||||
- **Updates** — Neue Funktionen und Verbesserungen automatisch
|
||||
|
||||
## Testzugang
|
||||
|
||||
Fordern Sie einen kostenlosen Testzugang an, um MYeasyCMS unverbindlich kennenzulernen. Das Team führt Sie persönlich durch die Plattform.
|
||||
|
||||
## Kontakt für Preisanfragen
|
||||
|
||||
Für ein individuelles Angebot wenden Sie sich an:
|
||||
|
||||
- **Telefon:** 09451 9499-09
|
||||
- **E-Mail:** info@combiss.de
|
||||
|
||||
@@ -1,186 +1,35 @@
|
||||
---
|
||||
title: "Pricing Plans"
|
||||
description: "How to configure and customize pricing plans for your SaaS application."
|
||||
title: "Tarifübersicht"
|
||||
description: "Übersicht der verfügbaren Tarife für Vereine und Verbände."
|
||||
publishedAt: 2024-04-11
|
||||
order: 1
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS bietet drei Tarife, die sich an der Vereinsgröße orientieren.
|
||||
|
||||
Configure your pricing structure to match your business model.
|
||||
## Tarife
|
||||
|
||||
## Plan Structure
|
||||
### Basis
|
||||
|
||||
Each pricing plan consists of:
|
||||
- **ID** - Unique identifier
|
||||
- **Name** - Display name
|
||||
- **Price** - Amount in your currency
|
||||
- **Interval** - Billing frequency (month, year)
|
||||
- **Features** - List of included features
|
||||
- **Limits** - Usage constraints
|
||||
Für kleine Vereine mit bis zu 200 Mitgliedern. Alle Kernmodule enthalten.
|
||||
|
||||
## Example Configuration
|
||||
### Standard
|
||||
|
||||
```typescript
|
||||
// config/billing.config.ts
|
||||
export const billingConfig = {
|
||||
provider: 'stripe', // or 'paddle'
|
||||
currency: 'usd',
|
||||
plans: [
|
||||
{
|
||||
id: 'free',
|
||||
name: 'Free',
|
||||
description: 'Perfect for getting started',
|
||||
price: 0,
|
||||
features: [
|
||||
'5 projects',
|
||||
'Basic analytics',
|
||||
'Community support',
|
||||
],
|
||||
limits: {
|
||||
projects: 5,
|
||||
members: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'starter',
|
||||
name: 'Starter',
|
||||
description: 'For small teams',
|
||||
price: 19,
|
||||
interval: 'month',
|
||||
features: [
|
||||
'25 projects',
|
||||
'Advanced analytics',
|
||||
'Email support',
|
||||
'API access',
|
||||
],
|
||||
limits: {
|
||||
projects: 25,
|
||||
members: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: 'Professional',
|
||||
description: 'For growing businesses',
|
||||
price: 49,
|
||||
interval: 'month',
|
||||
popular: true,
|
||||
features: [
|
||||
'Unlimited projects',
|
||||
'Advanced analytics',
|
||||
'Priority support',
|
||||
'API access',
|
||||
'Custom integrations',
|
||||
],
|
||||
limits: {
|
||||
projects: -1, // unlimited
|
||||
members: 20,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
Für mittelgroße Vereine und Organisationen. Alle Module inklusive erweiterter Funktionen wie Fischereiverwaltung und Sitzungsprotokolle.
|
||||
|
||||
## Feature Gating
|
||||
### Verband
|
||||
|
||||
Restrict features based on subscription plan:
|
||||
Für Dachverbände und Kreisverbände mit Untergliedern. Enthält die Verbandsverwaltung mit Hierarchien, vereinsübergreifender Suche und konsolidierten Berichten.
|
||||
|
||||
```typescript
|
||||
import { hasFeature } from '~/lib/billing/features';
|
||||
## Gemeinsam für alle Tarife
|
||||
|
||||
async function createProject() {
|
||||
const subscription = await getSubscription(accountId);
|
||||
- Unbegrenzte Benutzeranzahl
|
||||
- Persönliche Einrichtung durch das Com.BISS-Team
|
||||
- Direkter Support per Telefon und E-Mail
|
||||
- Automatische Updates und neue Funktionen
|
||||
- Server in Deutschland, DSGVO-konform
|
||||
|
||||
if (!hasFeature(subscription, 'api_access')) {
|
||||
throw new Error('API access requires Pro plan');
|
||||
}
|
||||
## Individuelle Angebote
|
||||
|
||||
// Create project
|
||||
}
|
||||
```
|
||||
|
||||
## Usage Limits
|
||||
|
||||
Enforce usage limits per plan:
|
||||
|
||||
```typescript
|
||||
import { checkLimit } from '~/lib/billing/limits';
|
||||
|
||||
async function addTeamMember() {
|
||||
const canAdd = await checkLimit(accountId, 'members');
|
||||
|
||||
if (!canAdd) {
|
||||
throw new Error('Member limit reached. Upgrade to add more members.');
|
||||
}
|
||||
|
||||
// Add member
|
||||
}
|
||||
```
|
||||
|
||||
## Annual Billing
|
||||
|
||||
Offer discounted annual plans:
|
||||
|
||||
```typescript
|
||||
{
|
||||
id: 'pro-annual',
|
||||
name: 'Professional Annual',
|
||||
price: 470, // ~20% discount
|
||||
interval: 'year',
|
||||
discount: '20% off',
|
||||
features: [ /* same as monthly */ ],
|
||||
}
|
||||
```
|
||||
|
||||
## Trial Periods
|
||||
|
||||
Configure free trial periods:
|
||||
|
||||
```typescript
|
||||
export const trialConfig = {
|
||||
enabled: true,
|
||||
duration: 14, // days
|
||||
plans: ['starter', 'pro'], // plans eligible for trial
|
||||
requirePaymentMethod: true,
|
||||
};
|
||||
```
|
||||
|
||||
## Customizing the Pricing Page
|
||||
|
||||
The pricing page automatically generates from your configuration:
|
||||
|
||||
```tsx
|
||||
import { billingConfig } from '~/config/billing.config';
|
||||
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<PricingTable
|
||||
plans={billingConfig.plans}
|
||||
currency={billingConfig.currency}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Adding Custom Features
|
||||
|
||||
Extend plan features with custom attributes:
|
||||
|
||||
```typescript
|
||||
{
|
||||
id: 'enterprise',
|
||||
name: 'Enterprise',
|
||||
price: null, // Contact for pricing
|
||||
custom: true,
|
||||
features: [
|
||||
'Everything in Pro',
|
||||
'Dedicated support',
|
||||
'Custom SLA',
|
||||
'On-premise deployment',
|
||||
],
|
||||
ctaText: 'Contact Sales',
|
||||
ctaUrl: '/contact',
|
||||
}
|
||||
```
|
||||
Für Verbände mit vielen Untergliedern oder besondere Anforderungen erstellen wir individuelle Angebote. Sprechen Sie uns an.
|
||||
|
||||
@@ -1,143 +1,33 @@
|
||||
---
|
||||
title: "Billing Overview"
|
||||
description: "Learn how to manage subscriptions and billing in your application."
|
||||
title: "Abrechnung"
|
||||
description: "Wie die Abrechnung für MYeasyCMS funktioniert — Zahlungsmodalitäten und Rechnungen."
|
||||
publishedAt: 2024-04-11
|
||||
order: 0
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
Die Abrechnung für MYeasyCMS ist transparent und unkompliziert.
|
||||
|
||||
The billing system supports subscription-based pricing with multiple tiers and payment providers.
|
||||
## Zahlungsrhythmus
|
||||
|
||||
## Supported Providers
|
||||
MYeasyCMS wird jährlich abgerechnet. Sie erhalten eine Rechnung per E-Mail mit den üblichen Zahlungsfristen.
|
||||
|
||||
### Stripe
|
||||
Industry-standard payment processing with comprehensive features:
|
||||
- Credit card payments
|
||||
- Subscription management
|
||||
- Invoice generation
|
||||
- Tax calculation
|
||||
- Customer portal
|
||||
## Zahlungsmethoden
|
||||
|
||||
### Paddle
|
||||
Merchant of record solution that handles:
|
||||
- Global tax compliance
|
||||
- Payment processing
|
||||
- Subscription billing
|
||||
- Revenue recovery
|
||||
- **Überweisung** — Die gängigste Zahlungsart für Vereine
|
||||
- **SEPA-Lastschrift** — Bequem und automatisch
|
||||
|
||||
## Subscription Tiers
|
||||
## Rechnungen
|
||||
|
||||
Define your subscription tiers in the billing configuration:
|
||||
Rechnungen werden als PDF per E-Mail zugestellt. Sie enthalten alle relevanten Angaben für die Buchhaltung des Vereins.
|
||||
|
||||
```typescript
|
||||
export const plans = [
|
||||
{
|
||||
id: 'free',
|
||||
name: 'Free',
|
||||
price: 0,
|
||||
features: ['Feature 1', 'Feature 2'],
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: 'Professional',
|
||||
price: 29,
|
||||
interval: 'month',
|
||||
features: ['All Free features', 'Feature 3', 'Feature 4'],
|
||||
},
|
||||
{
|
||||
id: 'enterprise',
|
||||
name: 'Enterprise',
|
||||
price: 99,
|
||||
interval: 'month',
|
||||
features: ['All Pro features', 'Feature 5', 'Priority support'],
|
||||
},
|
||||
];
|
||||
```
|
||||
## Kündigung
|
||||
|
||||
## Subscription Lifecycle
|
||||
Die Kündigung ist zum Ende des Vertragsjahres möglich. Ihre Daten bleiben nach Vertragsende noch für einen vereinbarten Zeitraum verfügbar, damit Sie sie exportieren können.
|
||||
|
||||
1. **Customer selects plan** - User chooses subscription tier
|
||||
2. **Payment processed** - Provider handles payment collection
|
||||
3. **Webhook received** - Your app receives confirmation
|
||||
4. **Subscription activated** - User gains access to features
|
||||
5. **Recurring billing** - Automatic renewal each period
|
||||
6. **Cancellation** - User can cancel anytime
|
||||
## Fragen zur Abrechnung
|
||||
|
||||
## Managing Subscriptions
|
||||
Bei Fragen zur Abrechnung wenden Sie sich direkt an das Com.BISS-Team:
|
||||
|
||||
### Creating a Subscription
|
||||
|
||||
```typescript
|
||||
import { createCheckoutSession } from '~/lib/billing/checkout';
|
||||
|
||||
const session = await createCheckoutSession({
|
||||
accountId: user.accountId,
|
||||
planId: 'pro',
|
||||
returnUrl: '/dashboard',
|
||||
});
|
||||
|
||||
// Redirect user to payment page
|
||||
redirect(session.url);
|
||||
```
|
||||
|
||||
### Checking Subscription Status
|
||||
|
||||
```typescript
|
||||
import { getSubscription } from '~/lib/billing/subscription';
|
||||
|
||||
const subscription = await getSubscription(accountId);
|
||||
|
||||
if (subscription.status === 'active') {
|
||||
// User has active subscription
|
||||
}
|
||||
```
|
||||
|
||||
### Canceling a Subscription
|
||||
|
||||
```typescript
|
||||
import { cancelSubscription } from '~/lib/billing/subscription';
|
||||
|
||||
await cancelSubscription(subscriptionId);
|
||||
```
|
||||
|
||||
## Webhook Handling
|
||||
|
||||
Webhooks notify your application of billing events:
|
||||
|
||||
```typescript
|
||||
export async function POST(request: Request) {
|
||||
const signature = request.headers.get('stripe-signature');
|
||||
const payload = await request.text();
|
||||
|
||||
const event = stripe.webhooks.constructEvent(
|
||||
payload,
|
||||
signature,
|
||||
process.env.STRIPE_WEBHOOK_SECRET
|
||||
);
|
||||
|
||||
switch (event.type) {
|
||||
case 'customer.subscription.created':
|
||||
await handleSubscriptionCreated(event.data.object);
|
||||
break;
|
||||
case 'customer.subscription.updated':
|
||||
await handleSubscriptionUpdated(event.data.object);
|
||||
break;
|
||||
case 'customer.subscription.deleted':
|
||||
await handleSubscriptionCanceled(event.data.object);
|
||||
break;
|
||||
}
|
||||
|
||||
return new Response('OK');
|
||||
}
|
||||
```
|
||||
|
||||
## Testing
|
||||
|
||||
Use test mode credentials for development:
|
||||
- Test card: 4242 4242 4242 4242
|
||||
- Any future expiry date
|
||||
- Any CVC
|
||||
|
||||
All test transactions will appear in your provider's test dashboard.
|
||||
- **Telefon:** 09451 9499-09
|
||||
- **E-Mail:** info@combiss.de
|
||||
|
||||
@@ -1,194 +1,33 @@
|
||||
---
|
||||
title: "Webhook Integration"
|
||||
description: "Setting up and handling payment provider webhooks for subscription events."
|
||||
title: "Schnittstellen"
|
||||
description: "Schnittstellen und Exportmöglichkeiten in MYeasyCMS."
|
||||
publishedAt: 2024-04-11
|
||||
order: 2
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS bietet verschiedene Schnittstellen für den Datenaustausch.
|
||||
|
||||
Webhooks notify your application when billing events occur, ensuring your app stays synchronized with your payment provider.
|
||||
## SEPA-Export
|
||||
|
||||
## Why Webhooks?
|
||||
Die wichtigste Schnittstelle für die meisten Vereine: der Export von SEPA-Sammellastschriften als XML-Datei (pain.008) für den Bankeinzug.
|
||||
|
||||
Webhooks are essential for:
|
||||
- **Real-time updates** - Instant notification of payment events
|
||||
- **Reliability** - Handles events even if users close their browser
|
||||
- **Security** - Server-to-server communication
|
||||
- **Automation** - Automatic subscription status updates
|
||||
## Datenimport
|
||||
|
||||
## Webhook Endpoint
|
||||
Importieren Sie Mitgliederdaten aus Excel- oder CSV-Dateien. Der Import-Assistent unterstützt die Zuordnung der Spalten und prüft die Daten auf Vollständigkeit.
|
||||
|
||||
Your webhook endpoint receives events from the payment provider:
|
||||
## Datenexport
|
||||
|
||||
```typescript
|
||||
// app/api/billing/webhook/route.ts
|
||||
export async function POST(request: Request) {
|
||||
const body = await request.text();
|
||||
const signature = request.headers.get('stripe-signature');
|
||||
Exportieren Sie Ihre Daten in verschiedenen Formaten:
|
||||
|
||||
// Verify webhook signature
|
||||
const event = stripe.webhooks.constructEvent(
|
||||
body,
|
||||
signature,
|
||||
process.env.STRIPE_WEBHOOK_SECRET
|
||||
);
|
||||
- Excel (.xlsx) für Tabellenkalkulationen
|
||||
- CSV für den universellen Datenaustausch
|
||||
- PDF für druckfertige Berichte
|
||||
|
||||
// Handle the event
|
||||
await handleBillingEvent(event);
|
||||
## E-Mail-Versand
|
||||
|
||||
return new Response('OK', { status: 200 });
|
||||
}
|
||||
```
|
||||
MYeasyCMS versendet E-Mails für Newsletter, Einladungen und Benachrichtigungen. Der Versand erfolgt über die konfigurierte E-Mail-Infrastruktur.
|
||||
|
||||
## Common Events
|
||||
## Mitgliederportal
|
||||
|
||||
### Subscription Created
|
||||
```typescript
|
||||
case 'customer.subscription.created':
|
||||
await prisma.subscription.create({
|
||||
data: {
|
||||
id: event.data.object.id,
|
||||
accountId: event.data.object.metadata.accountId,
|
||||
status: 'active',
|
||||
planId: event.data.object.items.data[0].price.id,
|
||||
currentPeriodEnd: new Date(event.data.object.current_period_end * 1000),
|
||||
},
|
||||
});
|
||||
break;
|
||||
```
|
||||
|
||||
### Subscription Updated
|
||||
```typescript
|
||||
case 'customer.subscription.updated':
|
||||
await prisma.subscription.update({
|
||||
where: { id: event.data.object.id },
|
||||
data: {
|
||||
status: event.data.object.status,
|
||||
planId: event.data.object.items.data[0].price.id,
|
||||
currentPeriodEnd: new Date(event.data.object.current_period_end * 1000),
|
||||
},
|
||||
});
|
||||
break;
|
||||
```
|
||||
|
||||
### Subscription Deleted
|
||||
```typescript
|
||||
case 'customer.subscription.deleted':
|
||||
await prisma.subscription.update({
|
||||
where: { id: event.data.object.id },
|
||||
data: {
|
||||
status: 'canceled',
|
||||
canceledAt: new Date(),
|
||||
},
|
||||
});
|
||||
break;
|
||||
```
|
||||
|
||||
### Payment Failed
|
||||
```typescript
|
||||
case 'invoice.payment_failed':
|
||||
const subscription = await prisma.subscription.findUnique({
|
||||
where: { id: event.data.object.subscription },
|
||||
});
|
||||
|
||||
// Send payment failure notification
|
||||
await sendPaymentFailureEmail(subscription.accountId);
|
||||
break;
|
||||
```
|
||||
|
||||
## Setting Up Webhooks
|
||||
|
||||
### Stripe
|
||||
|
||||
1. **Local Development** (using Stripe CLI):
|
||||
```bash
|
||||
stripe listen --forward-to localhost:3000/api/billing/webhook
|
||||
```
|
||||
|
||||
2. **Production**:
|
||||
- Go to Stripe Dashboard → Developers → Webhooks
|
||||
- Add endpoint: `https://yourdomain.com/api/billing/webhook`
|
||||
- Select events to listen to
|
||||
- Copy webhook signing secret to your `.env`
|
||||
|
||||
### Paddle
|
||||
|
||||
1. **Configure webhook URL** in Paddle dashboard
|
||||
2. **Add webhook secret** to environment variables
|
||||
3. **Verify webhook signature**:
|
||||
|
||||
```typescript
|
||||
const signature = request.headers.get('paddle-signature');
|
||||
const verified = paddle.webhooks.verify(body, signature);
|
||||
|
||||
if (!verified) {
|
||||
return new Response('Invalid signature', { status: 401 });
|
||||
}
|
||||
```
|
||||
|
||||
## Security Best Practices
|
||||
|
||||
1. **Always verify signatures** - Prevents unauthorized requests
|
||||
2. **Use HTTPS** - Encrypts webhook data in transit
|
||||
3. **Validate event data** - Check for required fields
|
||||
4. **Handle idempotently** - Process duplicate events safely
|
||||
5. **Return 200 quickly** - Acknowledge receipt, process async
|
||||
|
||||
## Error Handling
|
||||
|
||||
```typescript
|
||||
async function handleBillingEvent(event: Event) {
|
||||
try {
|
||||
await processEvent(event);
|
||||
} catch (error) {
|
||||
// Log error for debugging
|
||||
console.error('Webhook error:', error);
|
||||
|
||||
// Store failed event for retry
|
||||
await prisma.failedWebhook.create({
|
||||
data: {
|
||||
eventId: event.id,
|
||||
type: event.type,
|
||||
payload: event,
|
||||
error: error.message,
|
||||
},
|
||||
});
|
||||
|
||||
// Throw to trigger provider retry
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Testing Webhooks
|
||||
|
||||
### Using Provider's CLI Tools
|
||||
|
||||
```bash
|
||||
# Stripe
|
||||
stripe trigger customer.subscription.created
|
||||
|
||||
# Test specific scenarios
|
||||
stripe trigger payment_intent.payment_failed
|
||||
```
|
||||
|
||||
### Manual Testing
|
||||
|
||||
```bash
|
||||
curl -X POST https://your-app.com/api/billing/webhook \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "stripe-signature: test_signature" \
|
||||
-d @test-event.json
|
||||
```
|
||||
|
||||
## Monitoring
|
||||
|
||||
Track webhook delivery:
|
||||
- Response times
|
||||
- Success/failure rates
|
||||
- Event processing duration
|
||||
- Failed events requiring manual intervention
|
||||
|
||||
Most providers offer webhook monitoring dashboards showing delivery attempts and failures.
|
||||
Das Portal stellt eine Schnittstelle zwischen Vereinsverwaltung und Mitgliedern dar. Mitglieder können ihre Daten einsehen und aktualisieren, ohne dass der Vorstand eingreifen muss.
|
||||
|
||||
@@ -1,16 +1,36 @@
|
||||
---
|
||||
title: "Database"
|
||||
description: "Learn how to work with the Supabase database in your MakerKit application."
|
||||
title: "Datensicherheit"
|
||||
description: "Wie MYeasyCMS Ihre Vereinsdaten schützt — Verschlüsselung, Zugriffsrechte und Backups."
|
||||
publishedAt: 2024-04-11
|
||||
order: 2
|
||||
order: 0
|
||||
status: "published"
|
||||
---
|
||||
|
||||
MakerKit uses Supabase Postgres for database management with built-in security and performance.
|
||||
Die Sicherheit Ihrer Vereinsdaten hat für uns höchste Priorität. MYeasyCMS setzt auf mehrere Schutzebenen.
|
||||
|
||||
This section covers:
|
||||
- Database schema and structure
|
||||
- Running migrations
|
||||
- Row Level Security (RLS)
|
||||
- Querying data
|
||||
- Functions and triggers
|
||||
## Verschlüsselung
|
||||
|
||||
Alle Daten werden verschlüsselt übertragen (TLS/SSL). Die Verbindung zwischen Ihrem Browser und dem Server ist jederzeit geschützt — erkennbar am Schloss-Symbol in der Adressleiste.
|
||||
|
||||
## Server in Deutschland
|
||||
|
||||
Alle Daten werden auf Servern in deutschen Rechenzentren gespeichert. Es findet keine Datenübertragung in Drittländer statt.
|
||||
|
||||
## Zugriffsrechte
|
||||
|
||||
MYeasyCMS verwendet ein rollenbasiertes Berechtigungssystem:
|
||||
|
||||
- Jeder Benutzer sieht nur die Daten, die für seine Rolle relevant sind
|
||||
- Der Kassenwart hat Zugriff auf Finanzdaten, nicht auf Protokolle
|
||||
- Kursleiter sehen ihre Teilnehmer, nicht die Bankverbindungen
|
||||
- Nur Administratoren können Einstellungen und Benutzer verwalten
|
||||
|
||||
## Backups
|
||||
|
||||
Regelmäßige automatische Backups schützen gegen Datenverlust. Im Fall eines Problems kann der letzte Stand wiederhergestellt werden.
|
||||
|
||||
## Passwortschutz
|
||||
|
||||
- Sichere Passwortrichtlinien bei der Registrierung
|
||||
- Möglichkeit zur Multi-Faktor-Authentifizierung (MFA)
|
||||
- Automatische Sperrung bei wiederholten Fehlversuchen
|
||||
|
||||
@@ -1,446 +1,34 @@
|
||||
---
|
||||
title: "Functions & Triggers"
|
||||
description: "Create database functions and triggers for automated logic."
|
||||
title: "Automatisierungen"
|
||||
description: "Automatische Funktionen in MYeasyCMS — Beitragsberechnung, Benachrichtigungen und mehr."
|
||||
publishedAt: 2024-04-11
|
||||
order: 4
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS automatisiert wiederkehrende Aufgaben, damit Sie sich auf die Vereinsarbeit konzentrieren können.
|
||||
|
||||
Database functions and triggers enable server-side logic and automation.
|
||||
## Beitragsberechnung
|
||||
|
||||
## Database Functions
|
||||
Beiträge werden automatisch basierend auf den zugewiesenen Beitragskategorien berechnet. Bei Eintritt oder Austritt während des Geschäftsjahres erfolgt die anteilige Berechnung.
|
||||
|
||||
### Creating a Function
|
||||
## SEPA-Erzeugung
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION get_user_projects(user_id UUID)
|
||||
RETURNS TABLE (
|
||||
id UUID,
|
||||
name TEXT,
|
||||
created_at TIMESTAMPTZ
|
||||
)
|
||||
LANGUAGE plpgsql
|
||||
SECURITY DEFINER
|
||||
AS $$
|
||||
BEGIN
|
||||
RETURN QUERY
|
||||
SELECT p.id, p.name, p.created_at
|
||||
FROM projects p
|
||||
INNER JOIN accounts_memberships am ON am.account_id = p.account_id
|
||||
WHERE am.user_id = get_user_projects.user_id;
|
||||
END;
|
||||
$$;
|
||||
```
|
||||
Die SEPA-Sammellastschrift wird automatisch aus den hinterlegten Mandaten und offenen Beiträgen zusammengestellt. Sie müssen nur noch prüfen und herunterladen.
|
||||
|
||||
### Calling from TypeScript
|
||||
## E-Mail-Benachrichtigungen
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client.rpc('get_user_projects', {
|
||||
user_id: userId,
|
||||
});
|
||||
```
|
||||
Das System versendet automatische Benachrichtigungen bei:
|
||||
|
||||
## Common Function Patterns
|
||||
- Neuen Kursanmeldungen
|
||||
- Eingehenden Mitgliedsanträgen
|
||||
- Fälligen Beiträgen
|
||||
- Ablaufenden SEPA-Mandaten
|
||||
|
||||
### Get User Accounts
|
||||
## Newsletter-Abonnement
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION get_user_accounts(user_id UUID)
|
||||
RETURNS TABLE (account_id UUID)
|
||||
LANGUAGE sql
|
||||
SECURITY DEFINER
|
||||
AS $$
|
||||
SELECT account_id
|
||||
FROM accounts_memberships
|
||||
WHERE user_id = $1;
|
||||
$$;
|
||||
```
|
||||
Die An- und Abmeldung von Newslettern wird automatisch verwaltet — inklusive Double-Opt-In und Dokumentation der Einwilligung.
|
||||
|
||||
### Check Permission
|
||||
## Dokumentengenerierung
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION has_permission(
|
||||
user_id UUID,
|
||||
account_id UUID,
|
||||
required_role TEXT
|
||||
)
|
||||
RETURNS BOOLEAN
|
||||
LANGUAGE plpgsql
|
||||
SECURITY DEFINER
|
||||
AS $$
|
||||
DECLARE
|
||||
user_role TEXT;
|
||||
BEGIN
|
||||
SELECT role INTO user_role
|
||||
FROM accounts_memberships
|
||||
WHERE user_id = has_permission.user_id
|
||||
AND account_id = has_permission.account_id;
|
||||
|
||||
RETURN user_role = required_role OR user_role = 'owner';
|
||||
END;
|
||||
$$;
|
||||
```
|
||||
|
||||
### Search Function
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION search_projects(
|
||||
search_term TEXT,
|
||||
account_id UUID
|
||||
)
|
||||
RETURNS TABLE (
|
||||
id UUID,
|
||||
name TEXT,
|
||||
description TEXT,
|
||||
relevance REAL
|
||||
)
|
||||
LANGUAGE plpgsql
|
||||
SECURITY DEFINER
|
||||
AS $$
|
||||
BEGIN
|
||||
RETURN QUERY
|
||||
SELECT
|
||||
p.id,
|
||||
p.name,
|
||||
p.description,
|
||||
ts_rank(
|
||||
to_tsvector('english', p.name || ' ' || COALESCE(p.description, '')),
|
||||
plainto_tsquery('english', search_term)
|
||||
) AS relevance
|
||||
FROM projects p
|
||||
WHERE p.account_id = search_projects.account_id
|
||||
AND (
|
||||
to_tsvector('english', p.name || ' ' || COALESCE(p.description, ''))
|
||||
@@ plainto_tsquery('english', search_term)
|
||||
)
|
||||
ORDER BY relevance DESC;
|
||||
END;
|
||||
$$;
|
||||
```
|
||||
|
||||
## Triggers
|
||||
|
||||
### Auto-Update Timestamp
|
||||
|
||||
```sql
|
||||
-- Create trigger function
|
||||
CREATE OR REPLACE FUNCTION update_updated_at_column()
|
||||
RETURNS TRIGGER
|
||||
LANGUAGE plpgsql
|
||||
AS $$
|
||||
BEGIN
|
||||
NEW.updated_at = NOW();
|
||||
RETURN NEW;
|
||||
END;
|
||||
$$;
|
||||
|
||||
-- Attach to table
|
||||
CREATE TRIGGER update_projects_updated_at
|
||||
BEFORE UPDATE ON projects
|
||||
FOR EACH ROW
|
||||
EXECUTE FUNCTION update_updated_at_column();
|
||||
```
|
||||
|
||||
### Audit Log Trigger
|
||||
|
||||
```sql
|
||||
-- Create audit log table
|
||||
CREATE TABLE audit_log (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
table_name TEXT NOT NULL,
|
||||
record_id UUID NOT NULL,
|
||||
action TEXT NOT NULL,
|
||||
old_data JSONB,
|
||||
new_data JSONB,
|
||||
user_id UUID,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Create trigger function
|
||||
CREATE OR REPLACE FUNCTION log_changes()
|
||||
RETURNS TRIGGER
|
||||
LANGUAGE plpgsql
|
||||
AS $$
|
||||
BEGIN
|
||||
IF TG_OP = 'INSERT' THEN
|
||||
INSERT INTO audit_log (table_name, record_id, action, new_data, user_id)
|
||||
VALUES (TG_TABLE_NAME, NEW.id, 'INSERT', to_jsonb(NEW), auth.uid());
|
||||
RETURN NEW;
|
||||
ELSIF TG_OP = 'UPDATE' THEN
|
||||
INSERT INTO audit_log (table_name, record_id, action, old_data, new_data, user_id)
|
||||
VALUES (TG_TABLE_NAME, NEW.id, 'UPDATE', to_jsonb(OLD), to_jsonb(NEW), auth.uid());
|
||||
RETURN NEW;
|
||||
ELSIF TG_OP = 'DELETE' THEN
|
||||
INSERT INTO audit_log (table_name, record_id, action, old_data, user_id)
|
||||
VALUES (TG_TABLE_NAME, OLD.id, 'DELETE', to_jsonb(OLD), auth.uid());
|
||||
RETURN OLD;
|
||||
END IF;
|
||||
END;
|
||||
$$;
|
||||
|
||||
-- Attach to table
|
||||
CREATE TRIGGER audit_projects
|
||||
AFTER INSERT OR UPDATE OR DELETE ON projects
|
||||
FOR EACH ROW
|
||||
EXECUTE FUNCTION log_changes();
|
||||
```
|
||||
|
||||
### Cascade Soft Delete
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION soft_delete_cascade()
|
||||
RETURNS TRIGGER
|
||||
LANGUAGE plpgsql
|
||||
AS $$
|
||||
BEGIN
|
||||
-- Soft delete related tasks
|
||||
UPDATE tasks
|
||||
SET deleted_at = NOW()
|
||||
WHERE project_id = OLD.id
|
||||
AND deleted_at IS NULL;
|
||||
|
||||
RETURN OLD;
|
||||
END;
|
||||
$$;
|
||||
|
||||
CREATE TRIGGER soft_delete_project_tasks
|
||||
BEFORE DELETE ON projects
|
||||
FOR EACH ROW
|
||||
EXECUTE FUNCTION soft_delete_cascade();
|
||||
```
|
||||
|
||||
## Validation Triggers
|
||||
|
||||
### Enforce Business Rules
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION validate_project_budget()
|
||||
RETURNS TRIGGER
|
||||
LANGUAGE plpgsql
|
||||
AS $$
|
||||
BEGIN
|
||||
IF NEW.budget < 0 THEN
|
||||
RAISE EXCEPTION 'Budget cannot be negative';
|
||||
END IF;
|
||||
|
||||
IF NEW.budget > 1000000 THEN
|
||||
RAISE EXCEPTION 'Budget cannot exceed 1,000,000';
|
||||
END IF;
|
||||
|
||||
RETURN NEW;
|
||||
END;
|
||||
$$;
|
||||
|
||||
CREATE TRIGGER check_project_budget
|
||||
BEFORE INSERT OR UPDATE ON projects
|
||||
FOR EACH ROW
|
||||
EXECUTE FUNCTION validate_project_budget();
|
||||
```
|
||||
|
||||
### Prevent Orphaned Records
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION prevent_owner_removal()
|
||||
RETURNS TRIGGER
|
||||
LANGUAGE plpgsql
|
||||
AS $$
|
||||
DECLARE
|
||||
owner_count INTEGER;
|
||||
BEGIN
|
||||
IF OLD.role = 'owner' THEN
|
||||
SELECT COUNT(*) INTO owner_count
|
||||
FROM accounts_memberships
|
||||
WHERE account_id = OLD.account_id
|
||||
AND role = 'owner'
|
||||
AND id != OLD.id;
|
||||
|
||||
IF owner_count = 0 THEN
|
||||
RAISE EXCEPTION 'Cannot remove the last owner of an account';
|
||||
END IF;
|
||||
END IF;
|
||||
|
||||
RETURN OLD;
|
||||
END;
|
||||
$$;
|
||||
|
||||
CREATE TRIGGER check_owner_before_delete
|
||||
BEFORE DELETE ON accounts_memberships
|
||||
FOR EACH ROW
|
||||
EXECUTE FUNCTION prevent_owner_removal();
|
||||
```
|
||||
|
||||
## Computed Columns
|
||||
|
||||
### Virtual Column with Function
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION project_task_count(project_id UUID)
|
||||
RETURNS INTEGER
|
||||
LANGUAGE sql
|
||||
STABLE
|
||||
AS $$
|
||||
SELECT COUNT(*)::INTEGER
|
||||
FROM tasks
|
||||
WHERE project_id = $1
|
||||
AND deleted_at IS NULL;
|
||||
$$;
|
||||
|
||||
-- Use in queries
|
||||
SELECT
|
||||
id,
|
||||
name,
|
||||
project_task_count(id) as task_count
|
||||
FROM projects;
|
||||
```
|
||||
|
||||
## Event Notifications
|
||||
|
||||
### Notify on Changes
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION notify_project_change()
|
||||
RETURNS TRIGGER
|
||||
LANGUAGE plpgsql
|
||||
AS $$
|
||||
BEGIN
|
||||
PERFORM pg_notify(
|
||||
'project_changes',
|
||||
json_build_object(
|
||||
'operation', TG_OP,
|
||||
'record', NEW
|
||||
)::text
|
||||
);
|
||||
RETURN NEW;
|
||||
END;
|
||||
$$;
|
||||
|
||||
CREATE TRIGGER project_change_notification
|
||||
AFTER INSERT OR UPDATE ON projects
|
||||
FOR EACH ROW
|
||||
EXECUTE FUNCTION notify_project_change();
|
||||
```
|
||||
|
||||
### Listen in TypeScript
|
||||
|
||||
```typescript
|
||||
const channel = client
|
||||
.channel('project_changes')
|
||||
.on(
|
||||
'postgres_changes',
|
||||
{
|
||||
event: '*',
|
||||
schema: 'public',
|
||||
table: 'projects',
|
||||
},
|
||||
(payload) => {
|
||||
console.log('Project changed:', payload);
|
||||
}
|
||||
)
|
||||
.subscribe();
|
||||
```
|
||||
|
||||
## Security Functions
|
||||
|
||||
### Row Level Security Helper
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION is_account_member(account_id UUID)
|
||||
RETURNS BOOLEAN
|
||||
LANGUAGE sql
|
||||
SECURITY DEFINER
|
||||
STABLE
|
||||
AS $$
|
||||
SELECT EXISTS (
|
||||
SELECT 1
|
||||
FROM accounts_memberships
|
||||
WHERE account_id = $1
|
||||
AND user_id = auth.uid()
|
||||
);
|
||||
$$;
|
||||
|
||||
-- Use in RLS policy
|
||||
CREATE POLICY "Users can access their account's projects"
|
||||
ON projects FOR ALL
|
||||
USING (is_account_member(account_id));
|
||||
```
|
||||
|
||||
## Scheduled Functions
|
||||
|
||||
### Using pg_cron Extension
|
||||
|
||||
```sql
|
||||
-- Enable pg_cron extension
|
||||
CREATE EXTENSION IF NOT EXISTS pg_cron;
|
||||
|
||||
-- Schedule cleanup job
|
||||
SELECT cron.schedule(
|
||||
'cleanup-old-sessions',
|
||||
'0 2 * * *', -- Every day at 2 AM
|
||||
$$
|
||||
DELETE FROM sessions
|
||||
WHERE expires_at < NOW();
|
||||
$$
|
||||
);
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use SECURITY DEFINER carefully** - Can bypass RLS
|
||||
2. **Add error handling** - Use EXCEPTION blocks
|
||||
3. **Keep functions simple** - One responsibility per function
|
||||
4. **Document functions** - Add comments
|
||||
5. **Test thoroughly** - Unit test database functions
|
||||
6. **Use STABLE/IMMUTABLE** - Performance optimization
|
||||
7. **Avoid side effects** - Make functions predictable
|
||||
8. **Return proper types** - Use RETURNS TABLE for clarity
|
||||
|
||||
## Testing Functions
|
||||
|
||||
```sql
|
||||
-- Test function
|
||||
DO $$
|
||||
DECLARE
|
||||
result INTEGER;
|
||||
BEGIN
|
||||
SELECT project_task_count('some-uuid') INTO result;
|
||||
|
||||
ASSERT result >= 0, 'Task count should not be negative';
|
||||
|
||||
RAISE NOTICE 'Test passed: task count = %', result;
|
||||
END;
|
||||
$$;
|
||||
```
|
||||
|
||||
## Debugging
|
||||
|
||||
### Enable Function Logging
|
||||
|
||||
```sql
|
||||
CREATE OR REPLACE FUNCTION debug_function()
|
||||
RETURNS void
|
||||
LANGUAGE plpgsql
|
||||
AS $$
|
||||
BEGIN
|
||||
RAISE NOTICE 'Debug: Processing started';
|
||||
RAISE NOTICE 'Debug: Current user is %', auth.uid();
|
||||
-- Your function logic
|
||||
RAISE NOTICE 'Debug: Processing completed';
|
||||
END;
|
||||
$$;
|
||||
```
|
||||
|
||||
### Check Function Execution
|
||||
|
||||
```sql
|
||||
-- View function execution stats
|
||||
SELECT
|
||||
schemaname,
|
||||
funcname,
|
||||
calls,
|
||||
total_time,
|
||||
self_time
|
||||
FROM pg_stat_user_functions
|
||||
ORDER BY total_time DESC;
|
||||
```
|
||||
Mitgliedsausweise, Rechnungen und Serienbriefe werden automatisch aus Vorlagen generiert. Platzhalter werden mit den aktuellen Mitgliederdaten befüllt.
|
||||
|
||||
@@ -1,68 +1,27 @@
|
||||
---
|
||||
title: "Migrations"
|
||||
description: "Learn how to create and manage database migrations in your application."
|
||||
title: "Updates und Änderungen"
|
||||
description: "Wie MYeasyCMS aktualisiert wird — automatische Updates ohne Aufwand für den Verein."
|
||||
publishedAt: 2024-04-11
|
||||
order: 1
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS wird kontinuierlich weiterentwickelt. Neue Funktionen und Verbesserungen stehen automatisch zur Verfügung.
|
||||
|
||||
Database migrations allow you to version control your database schema changes and apply them consistently across environments.
|
||||
## Automatische Updates
|
||||
|
||||
## Creating a Migration
|
||||
Als webbasierte Plattform wird MYeasyCMS zentral aktualisiert. Sie müssen:
|
||||
|
||||
To create a new migration, use the following command:
|
||||
- Keine Software herunterladen
|
||||
- Keine Installation durchführen
|
||||
- Keine Datenbank-Updates ausführen
|
||||
|
||||
```bash
|
||||
pnpm --filter web supabase:db:diff
|
||||
```
|
||||
Alle Änderungen werden vom Com.BISS-Team eingespielt und getestet, bevor sie live gehen.
|
||||
|
||||
This will generate a new migration file in the `apps/web/supabase/migrations` directory based on the differences between your local database and the schema files.
|
||||
## Änderungsprotokoll
|
||||
|
||||
## Applying Migrations
|
||||
Unter **Changelog** auf der Website informieren wir über neue Funktionen, Verbesserungen und Fehlerbehebungen. Bei größeren Änderungen werden Sie zusätzlich per E-Mail informiert.
|
||||
|
||||
To apply migrations to your local database:
|
||||
## Feedback und Wünsche
|
||||
|
||||
```bash
|
||||
pnpm --filter web supabase migrations up
|
||||
```
|
||||
|
||||
## Migration Best Practices
|
||||
|
||||
1. **Always test migrations locally first** before applying to production
|
||||
2. **Make migrations reversible** when possible by including DOWN statements
|
||||
3. **Use transactions** to ensure atomic operations
|
||||
4. **Add indexes** for foreign keys and frequently queried columns
|
||||
5. **Include RLS policies** in the same migration as table creation
|
||||
|
||||
## Example Migration
|
||||
|
||||
```sql
|
||||
-- Create a new table
|
||||
CREATE TABLE tasks (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
account_id UUID NOT NULL REFERENCES accounts(id) ON DELETE CASCADE,
|
||||
title TEXT NOT NULL,
|
||||
completed BOOLEAN DEFAULT false,
|
||||
created_at TIMESTAMPTZ DEFAULT now()
|
||||
);
|
||||
|
||||
-- Add RLS
|
||||
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
|
||||
|
||||
-- Create policies
|
||||
CREATE POLICY "Users can view their account tasks"
|
||||
ON tasks FOR SELECT
|
||||
USING (account_id IN (SELECT get_user_accounts(auth.uid())));
|
||||
```
|
||||
|
||||
## Resetting the Database
|
||||
|
||||
To completely reset your local database with the latest schema:
|
||||
|
||||
```bash
|
||||
pnpm supabase:web:reset
|
||||
```
|
||||
|
||||
This will drop all tables and reapply all migrations from scratch.
|
||||
Haben Sie Ideen für neue Funktionen oder Verbesserungen? Sprechen Sie uns an — viele Funktionen in MYeasyCMS sind auf Wunsch unserer Kunden entstanden. Neuentwicklungen zu festen Preisen, keine Überraschungen.
|
||||
|
||||
@@ -1,430 +1,34 @@
|
||||
---
|
||||
title: "Querying Data"
|
||||
description: "Learn how to query and filter data from your database."
|
||||
title: "Datenexport"
|
||||
description: "Exportieren Sie Ihre Vereinsdaten in verschiedenen Formaten — für Berichte, Auswertungen und Datensicherung."
|
||||
publishedAt: 2024-04-11
|
||||
order: 3
|
||||
order: 1
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS bietet umfangreiche Exportmöglichkeiten für alle Ihre Vereinsdaten.
|
||||
|
||||
Efficiently query and filter data using Supabase's query builder.
|
||||
## Exportformate
|
||||
|
||||
## Basic Queries
|
||||
- **Excel (.xlsx)** — Für die Weiterverarbeitung in Tabellenkalkulationen
|
||||
- **CSV** — Universelles Format für den Datenaustausch
|
||||
- **PDF** — Für druckfertige Berichte und Dokumente
|
||||
- **SEPA XML (pain.008)** — Für den Bankeinzug per Lastschrift
|
||||
|
||||
### Select All
|
||||
## Was kann exportiert werden?
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.from('projects')
|
||||
.select('*');
|
||||
```
|
||||
### Mitgliederdaten
|
||||
Exportieren Sie die vollständige Mitgliederliste oder gefilterte Teilmengen — nach Abteilung, Status, Eintrittsdatum oder anderen Kriterien.
|
||||
|
||||
### Select Specific Columns
|
||||
### Finanzdaten
|
||||
Beitragsübersichten, offene Posten, Zahlungshistorie und SEPA-Dateien für den Bankeinzug.
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.from('projects')
|
||||
.select('id, name, created_at');
|
||||
```
|
||||
### Kurs- und Veranstaltungsdaten
|
||||
Teilnehmerlisten, Kursübersichten und Anwesenheitslisten.
|
||||
|
||||
### Select with Related Data
|
||||
### Dokumente
|
||||
Generierte Dokumente (Ausweise, Rechnungen, Briefe) als PDF herunterladen.
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.from('projects')
|
||||
.select(`
|
||||
id,
|
||||
name,
|
||||
account:accounts(id, name),
|
||||
tasks(id, title, completed)
|
||||
`);
|
||||
```
|
||||
## Datensicherung
|
||||
|
||||
## Filtering
|
||||
|
||||
### Equal
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.eq('status', 'active');
|
||||
```
|
||||
|
||||
### Not Equal
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.neq('status', 'deleted');
|
||||
```
|
||||
|
||||
### Greater Than / Less Than
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.gt('created_at', '2024-01-01')
|
||||
.lt('budget', 10000);
|
||||
```
|
||||
|
||||
### In Array
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.in('status', ['active', 'pending']);
|
||||
```
|
||||
|
||||
### Like (Pattern Matching)
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.like('name', '%website%');
|
||||
```
|
||||
|
||||
### Full-Text Search
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.textSearch('description', 'design & development');
|
||||
```
|
||||
|
||||
## Ordering
|
||||
|
||||
### Order By
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.order('created_at', { ascending: false });
|
||||
```
|
||||
|
||||
### Multiple Order By
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.order('status')
|
||||
.order('created_at', { ascending: false });
|
||||
```
|
||||
|
||||
## Pagination
|
||||
|
||||
### Limit
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.limit(10);
|
||||
```
|
||||
|
||||
### Range (Offset)
|
||||
|
||||
```typescript
|
||||
const page = 2;
|
||||
const pageSize = 10;
|
||||
const from = (page - 1) * pageSize;
|
||||
const to = from + pageSize - 1;
|
||||
|
||||
const { data, count } = await client
|
||||
.from('projects')
|
||||
.select('*', { count: 'exact' })
|
||||
.range(from, to);
|
||||
```
|
||||
|
||||
## Aggregations
|
||||
|
||||
### Count
|
||||
|
||||
```typescript
|
||||
const { count } = await client
|
||||
.from('projects')
|
||||
.select('*', { count: 'exact', head: true });
|
||||
```
|
||||
|
||||
### Count with Filters
|
||||
|
||||
```typescript
|
||||
const { count } = await client
|
||||
.from('projects')
|
||||
.select('*', { count: 'exact', head: true })
|
||||
.eq('status', 'active');
|
||||
```
|
||||
|
||||
## Advanced Queries
|
||||
|
||||
### Multiple Filters
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.eq('account_id', accountId)
|
||||
.eq('status', 'active')
|
||||
.gte('created_at', startDate)
|
||||
.lte('created_at', endDate)
|
||||
.order('created_at', { ascending: false })
|
||||
.limit(20);
|
||||
```
|
||||
|
||||
### OR Conditions
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.or('status.eq.active,status.eq.pending');
|
||||
```
|
||||
|
||||
### Nested OR
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.or('and(status.eq.active,priority.eq.high),status.eq.urgent');
|
||||
```
|
||||
|
||||
## Joins
|
||||
|
||||
### Inner Join
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select(`
|
||||
*,
|
||||
account:accounts!inner(
|
||||
id,
|
||||
name
|
||||
)
|
||||
`)
|
||||
.eq('account.name', 'Acme Corp');
|
||||
```
|
||||
|
||||
### Left Join
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select(`
|
||||
*,
|
||||
tasks(*)
|
||||
`);
|
||||
```
|
||||
|
||||
## Null Handling
|
||||
|
||||
### Is Null
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.is('completed_at', null);
|
||||
```
|
||||
|
||||
### Not Null
|
||||
|
||||
```typescript
|
||||
const { data} = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.not('completed_at', 'is', null);
|
||||
```
|
||||
|
||||
## Insert Data
|
||||
|
||||
### Single Insert
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.from('projects')
|
||||
.insert({
|
||||
name: 'New Project',
|
||||
account_id: accountId,
|
||||
status: 'active',
|
||||
})
|
||||
.select()
|
||||
.single();
|
||||
```
|
||||
|
||||
### Multiple Insert
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.from('projects')
|
||||
.insert([
|
||||
{ name: 'Project 1', account_id: accountId },
|
||||
{ name: 'Project 2', account_id: accountId },
|
||||
])
|
||||
.select();
|
||||
```
|
||||
|
||||
## Update Data
|
||||
|
||||
### Update with Filter
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.from('projects')
|
||||
.update({ status: 'completed' })
|
||||
.eq('id', projectId)
|
||||
.select()
|
||||
.single();
|
||||
```
|
||||
|
||||
### Update Multiple Rows
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.from('projects')
|
||||
.update({ status: 'archived' })
|
||||
.eq('account_id', accountId)
|
||||
.lt('updated_at', oldDate);
|
||||
```
|
||||
|
||||
## Delete Data
|
||||
|
||||
### Delete with Filter
|
||||
|
||||
```typescript
|
||||
const { error } = await client
|
||||
.from('projects')
|
||||
.delete()
|
||||
.eq('id', projectId);
|
||||
```
|
||||
|
||||
### Delete Multiple
|
||||
|
||||
```typescript
|
||||
const { error } = await client
|
||||
.from('projects')
|
||||
.delete()
|
||||
.in('id', projectIds);
|
||||
```
|
||||
|
||||
## Upsert
|
||||
|
||||
### Insert or Update
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.from('projects')
|
||||
.upsert({
|
||||
id: projectId,
|
||||
name: 'Updated Name',
|
||||
status: 'active',
|
||||
})
|
||||
.select()
|
||||
.single();
|
||||
```
|
||||
|
||||
## RPC (Stored Procedures)
|
||||
|
||||
### Call Database Function
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.rpc('get_user_projects', {
|
||||
user_id: userId,
|
||||
});
|
||||
```
|
||||
|
||||
### With Complex Parameters
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.rpc('search_projects', {
|
||||
search_term: 'design',
|
||||
account_ids: [1, 2, 3],
|
||||
min_budget: 5000,
|
||||
});
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Basic Error Handling
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client
|
||||
.from('projects')
|
||||
.select('*');
|
||||
|
||||
if (error) {
|
||||
console.error('Error fetching projects:', error.message);
|
||||
throw error;
|
||||
}
|
||||
|
||||
return data;
|
||||
```
|
||||
|
||||
### Typed Error Handling
|
||||
|
||||
```typescript
|
||||
import { PostgrestError } from '@supabase/supabase-js';
|
||||
|
||||
function handleDatabaseError(error: PostgrestError) {
|
||||
switch (error.code) {
|
||||
case '23505': // unique_violation
|
||||
throw new Error('A project with this name already exists');
|
||||
case '23503': // foreign_key_violation
|
||||
throw new Error('Invalid account reference');
|
||||
default:
|
||||
throw new Error('Database error: ' + error.message);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## TypeScript Types
|
||||
|
||||
### Generated Types
|
||||
|
||||
```typescript
|
||||
import { Database } from '~/types/database.types';
|
||||
|
||||
type Project = Database['public']['Tables']['projects']['Row'];
|
||||
type ProjectInsert = Database['public']['Tables']['projects']['Insert'];
|
||||
type ProjectUpdate = Database['public']['Tables']['projects']['Update'];
|
||||
```
|
||||
|
||||
### Typed Queries
|
||||
|
||||
```typescript
|
||||
const { data } = await client
|
||||
.from('projects')
|
||||
.select('*')
|
||||
.returns<Project[]>();
|
||||
```
|
||||
|
||||
## Performance Tips
|
||||
|
||||
1. **Select only needed columns** - Don't use `select('*')` unnecessarily
|
||||
2. **Use indexes** - Create indexes on frequently filtered columns
|
||||
3. **Limit results** - Always paginate large datasets
|
||||
4. **Avoid N+1 queries** - Use joins instead of multiple queries
|
||||
5. **Use RPC for complex queries** - Move logic to database
|
||||
6. **Cache when possible** - Use React Query or similar
|
||||
7. **Profile queries** - Use `EXPLAIN ANALYZE` in SQL
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Always handle errors** - Check error responses
|
||||
2. **Validate input** - Use Zod or similar
|
||||
3. **Use TypeScript** - Generate and use types
|
||||
4. **Consistent naming** - Follow database naming conventions
|
||||
5. **Document complex queries** - Add comments
|
||||
6. **Test queries** - Unit test database operations
|
||||
7. **Monitor performance** - Track slow queries
|
||||
Für die eigene Datensicherung können Sie regelmäßig einen Gesamtexport Ihrer Mitgliederdaten erstellen. Dies dient als zusätzliche Sicherheit neben den automatischen Server-Backups.
|
||||
|
||||
@@ -1,88 +1,41 @@
|
||||
---
|
||||
title: "Row Level Security"
|
||||
description: "Understanding and implementing Row Level Security (RLS) for data protection."
|
||||
title: "Zugriffsrechte"
|
||||
description: "Rollenbasierte Zugriffsrechte — wer welche Daten sehen und bearbeiten darf."
|
||||
publishedAt: 2024-04-11
|
||||
order: 2
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS schützt Ihre Daten durch ein feingranulares Berechtigungssystem.
|
||||
|
||||
Row Level Security (RLS) is PostgreSQL's built-in authorization system that controls which rows users can access in database tables.
|
||||
## Rollenkonzept
|
||||
|
||||
## Why RLS?
|
||||
Jeder Benutzer erhält eine Rolle, die seinen Zugriff auf Module und Daten steuert. Das Prinzip: Jeder sieht nur das, was er für seine Aufgabe braucht.
|
||||
|
||||
RLS provides several advantages:
|
||||
- **Database-level security** - Protection even if application code has bugs
|
||||
- **Automatic enforcement** - No need for manual authorization checks
|
||||
- **Multi-tenant isolation** - Ensures users only see their own data
|
||||
- **Performance** - Optimized at the database level
|
||||
## Standardrollen
|
||||
|
||||
## Enabling RLS
|
||||
| Rolle | Zugriff |
|
||||
|-------|---------|
|
||||
| **Administrator** | Alle Module, Einstellungen, Benutzerverwaltung |
|
||||
| **Kassenwart** | Finanzen, Beiträge, Mitgliederdaten, SEPA |
|
||||
| **Kursleiter** | Kurse, Teilnehmer, Anwesenheit |
|
||||
| **Schriftführer** | Protokolle, Dokumente |
|
||||
| **Mitglied** | Eigene Daten über das Portal |
|
||||
|
||||
All tables should have RLS enabled:
|
||||
## Datenebene
|
||||
|
||||
```sql
|
||||
ALTER TABLE your_table ENABLE ROW LEVEL SECURITY;
|
||||
```
|
||||
Die Zugriffsrechte wirken auf Datenebene:
|
||||
|
||||
## Common Policy Patterns
|
||||
- Ein Kursleiter sieht nur die Teilnehmer seiner Kurse
|
||||
- Ein Mitglied sieht nur seine eigenen Daten im Portal
|
||||
- SEPA-Mandate und Bankverbindungen sind nur für den Kassenwart und Administratoren sichtbar
|
||||
|
||||
### Personal Account Access
|
||||
## Administratorrechte
|
||||
|
||||
```sql
|
||||
CREATE POLICY "Users can access their personal account data"
|
||||
ON your_table FOR ALL
|
||||
USING (account_id = auth.uid());
|
||||
```
|
||||
Nur Administratoren können:
|
||||
|
||||
### Team Account Access
|
||||
|
||||
```sql
|
||||
CREATE POLICY "Users can access their team account data"
|
||||
ON your_table FOR ALL
|
||||
USING (
|
||||
account_id IN (
|
||||
SELECT account_id FROM accounts_memberships
|
||||
WHERE user_id = auth.uid()
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
### Read vs Write Permissions
|
||||
|
||||
```sql
|
||||
-- All members can read
|
||||
CREATE POLICY "Team members can view data"
|
||||
ON your_table FOR SELECT
|
||||
USING (account_id IN (SELECT get_user_accounts(auth.uid())));
|
||||
|
||||
-- Only owners can modify
|
||||
CREATE POLICY "Only owners can modify data"
|
||||
ON your_table FOR UPDATE
|
||||
USING (
|
||||
account_id IN (
|
||||
SELECT account_id FROM accounts_memberships
|
||||
WHERE user_id = auth.uid() AND role = 'owner'
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
## Testing RLS Policies
|
||||
|
||||
Always test your RLS policies to ensure they work correctly:
|
||||
|
||||
```sql
|
||||
-- Test as specific user
|
||||
SET request.jwt.claims.sub = 'user-uuid-here';
|
||||
|
||||
-- Try to select data
|
||||
SELECT * FROM your_table;
|
||||
|
||||
-- Reset
|
||||
RESET request.jwt.claims.sub;
|
||||
```
|
||||
|
||||
## Admin Bypass
|
||||
|
||||
Service role keys bypass RLS. Use with extreme caution and always implement manual authorization checks when using the admin client.
|
||||
- Neue Benutzer einladen
|
||||
- Rollen zuweisen
|
||||
- Module aktivieren/deaktivieren
|
||||
- Vereinseinstellungen ändern
|
||||
- Das Audit-Protokoll einsehen
|
||||
|
||||
@@ -1,43 +1,38 @@
|
||||
---
|
||||
title: "Database Overview"
|
||||
description: "Understanding the database schema and table structure in your application."
|
||||
title: "Datenstruktur"
|
||||
description: "Wie MYeasyCMS Ihre Vereinsdaten organisiert — Stammdaten, Module und Verknüpfungen."
|
||||
publishedAt: 2024-04-11
|
||||
order: 0
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS organisiert Ihre Vereinsdaten in einer durchdachten Struktur.
|
||||
|
||||
The database schema is designed with a multi-tenant architecture that supports both personal and team accounts.
|
||||
## Mitgliederstamm
|
||||
|
||||
## Core Tables
|
||||
Im Zentrum steht der Mitgliederstamm. Jedes Mitglied hat:
|
||||
|
||||
### Users Table
|
||||
The `users` table stores user authentication data and is managed by Supabase Auth:
|
||||
- `id` - Unique user identifier
|
||||
- `email` - User's email address
|
||||
- `created_at` - Account creation timestamp
|
||||
- **Persönliche Daten** — Name, Geburtsdatum, Geschlecht
|
||||
- **Kontaktdaten** — Adresse, Telefon, E-Mail
|
||||
- **Vereinsdaten** — Eintrittsdatum, Mitgliedsnummer, Status
|
||||
- **Abteilungen** — Zugehörigkeit zu einer oder mehreren Abteilungen
|
||||
- **SEPA-Mandat** — Bankverbindung und Mandatsdaten
|
||||
- **Notizen** — Freitextfeld für Anmerkungen
|
||||
|
||||
### Accounts Table
|
||||
The `accounts` table represents both personal and team accounts:
|
||||
- `id` - Unique account identifier
|
||||
- `name` - Account display name
|
||||
- `slug` - URL-friendly identifier
|
||||
- `is_personal_account` - Boolean flag for personal vs team accounts
|
||||
## Verknüpfungen
|
||||
|
||||
### Projects Table
|
||||
Store your application's project data:
|
||||
- `id` - Unique project identifier
|
||||
- `account_id` - Foreign key to accounts table
|
||||
- `name` - Project name
|
||||
- `description` - Project description
|
||||
- `created_at` - Creation timestamp
|
||||
Mitgliederdaten sind mit anderen Modulen verknüpft:
|
||||
|
||||
## Relationships
|
||||
- **Beiträge** — Welche Beiträge sind fällig, bezahlt oder offen?
|
||||
- **Kurse** — An welchen Kursen nimmt das Mitglied teil?
|
||||
- **Veranstaltungen** — Für welche Events ist es angemeldet?
|
||||
- **Dokumente** — Welche Ausweise und Rechnungen wurden generiert?
|
||||
|
||||
All data in the application is tied to accounts through foreign key relationships. This ensures proper data isolation and access control through Row Level Security (RLS).
|
||||
## Individuelle Module
|
||||
|
||||
## Next Steps
|
||||
Mit dem Modul-Baukasten können Sie eigene Datenmodule erstellen:
|
||||
|
||||
- Learn about [migrations](/docs/database/migrations)
|
||||
- Understand [RLS policies](/docs/database/row-level-security)
|
||||
- **Felder definieren** — Text, Zahl, Datum, Auswahl, Dateiupload und mehr
|
||||
- **Formulare gestalten** — Layout und Reihenfolge der Felder festlegen
|
||||
- **Beziehungen** — Module miteinander verknüpfen
|
||||
- **Import/Export** — Daten aus Excel oder CSV importieren
|
||||
|
||||
@@ -1,279 +1,37 @@
|
||||
---
|
||||
title: "Features Overview"
|
||||
description: "Send emails and notifications to your users."
|
||||
title: "E-Mail & Newsletter"
|
||||
description: "Kommunizieren Sie mit Ihren Mitgliedern per E-Mail und Newsletter — direkt aus MYeasyCMS."
|
||||
publishedAt: 2024-04-11
|
||||
order: 0
|
||||
order: 1
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS integriert E-Mail-Kommunikation und Newsletter-Versand direkt in die Vereinsverwaltung.
|
||||
|
||||
The application includes email functionality for transactional messages and user notifications.
|
||||
## Newsletter erstellen
|
||||
|
||||
## Email Configuration
|
||||
Erstellen Sie Newsletter mit dem integrierten Editor:
|
||||
|
||||
### Supabase Email (Default)
|
||||
1. **Kampagne anlegen** — Betreff und Absender festlegen
|
||||
2. **Inhalt gestalten** — Text, Bilder und Formatierungen hinzufügen
|
||||
3. **Empfänger wählen** — Alle Mitglieder, einzelne Abteilungen oder manuelle Auswahl
|
||||
4. **Vorschau prüfen** — So sieht der Newsletter im Posteingang aus
|
||||
5. **Versenden** — Sofort oder zu einem geplanten Zeitpunkt
|
||||
|
||||
By default, emails are sent through Supabase:
|
||||
- Authentication emails (sign-up, password reset, magic links)
|
||||
- Email verification
|
||||
- Email change confirmation
|
||||
## Abonnentenverwaltung
|
||||
|
||||
### Custom SMTP
|
||||
- **Anmeldung** — Neue Abonnenten über die Vereinswebsite mit Double-Opt-In
|
||||
- **Abmeldung** — Automatischer Abmeldelink in jeder E-Mail
|
||||
- **Statusverfolgung** — Aktive und inaktive Abonnenten im Überblick
|
||||
|
||||
For transactional emails, configure your own SMTP provider:
|
||||
## Vorlagen
|
||||
|
||||
```bash
|
||||
# .env
|
||||
SMTP_HOST=smtp.example.com
|
||||
SMTP_PORT=587
|
||||
SMTP_USER=your-username
|
||||
SMTP_PASSWORD=your-password
|
||||
SMTP_FROM_EMAIL=noreply@yourdomain.com
|
||||
SMTP_FROM_NAME=Your App Name
|
||||
```
|
||||
Erstellen Sie Vorlagen für wiederkehrende Newsletter — zum Beispiel den monatlichen Vereinsrundbrief oder Einladungen zu Veranstaltungen.
|
||||
|
||||
## Sending Emails
|
||||
## Datenschutz
|
||||
|
||||
### Using the Email Service
|
||||
Der Newsletter-Versand entspricht den DSGVO-Anforderungen:
|
||||
|
||||
```typescript
|
||||
import { sendEmail } from '~/lib/email/send-email';
|
||||
|
||||
await sendEmail({
|
||||
to: 'user@example.com',
|
||||
subject: 'Welcome to Our App',
|
||||
html: '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
|
||||
});
|
||||
```
|
||||
|
||||
### Using Email Templates
|
||||
|
||||
Create reusable email templates:
|
||||
|
||||
```typescript
|
||||
// lib/email/templates/welcome-email.tsx
|
||||
import { EmailTemplate } from '~/lib/email/email-template';
|
||||
|
||||
interface WelcomeEmailProps {
|
||||
name: string;
|
||||
loginUrl: string;
|
||||
}
|
||||
|
||||
export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
|
||||
return (
|
||||
<EmailTemplate>
|
||||
<h1>Welcome, {name}!</h1>
|
||||
<p>We're excited to have you on board.</p>
|
||||
<a href={loginUrl}>Get Started</a>
|
||||
</EmailTemplate>
|
||||
);
|
||||
}
|
||||
|
||||
// Send the email
|
||||
import { render } from '@react-email/render';
|
||||
import { WelcomeEmail } from '~/lib/email/templates/welcome-email';
|
||||
|
||||
const html = render(
|
||||
<WelcomeEmail name="John" loginUrl="https://app.com/login" />
|
||||
);
|
||||
|
||||
await sendEmail({
|
||||
to: 'john@example.com',
|
||||
subject: 'Welcome to Our App',
|
||||
html,
|
||||
});
|
||||
```
|
||||
|
||||
## Email Types
|
||||
|
||||
### Transactional Emails
|
||||
|
||||
Emails triggered by user actions:
|
||||
- Welcome emails
|
||||
- Order confirmations
|
||||
- Password resets
|
||||
- Account notifications
|
||||
- Billing updates
|
||||
|
||||
### Marketing Emails
|
||||
|
||||
Promotional and engagement emails:
|
||||
- Product updates
|
||||
- Feature announcements
|
||||
- Newsletters
|
||||
- Onboarding sequences
|
||||
|
||||
## Email Providers
|
||||
|
||||
### Recommended Providers
|
||||
|
||||
**Resend** - Developer-friendly email API
|
||||
```bash
|
||||
npm install resend
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { Resend } from 'resend';
|
||||
|
||||
const resend = new Resend(process.env.RESEND_API_KEY);
|
||||
|
||||
await resend.emails.send({
|
||||
from: 'noreply@yourdomain.com',
|
||||
to: 'user@example.com',
|
||||
subject: 'Welcome',
|
||||
html: emailHtml,
|
||||
});
|
||||
```
|
||||
|
||||
**SendGrid** - Comprehensive email platform
|
||||
```bash
|
||||
npm install @sendgrid/mail
|
||||
```
|
||||
|
||||
```typescript
|
||||
import sgMail from '@sendgrid/mail';
|
||||
|
||||
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
|
||||
|
||||
await sgMail.send({
|
||||
to: 'user@example.com',
|
||||
from: 'noreply@yourdomain.com',
|
||||
subject: 'Welcome',
|
||||
html: emailHtml,
|
||||
});
|
||||
```
|
||||
|
||||
**Postmark** - Fast transactional email
|
||||
```bash
|
||||
npm install postmark
|
||||
```
|
||||
|
||||
## In-App Notifications
|
||||
|
||||
### Notification System
|
||||
|
||||
Send in-app notifications to users:
|
||||
|
||||
```typescript
|
||||
import { createNotification } from '~/lib/notifications';
|
||||
|
||||
await createNotification({
|
||||
userId: user.id,
|
||||
title: 'New Message',
|
||||
message: 'You have a new message from John',
|
||||
type: 'info',
|
||||
link: '/messages/123',
|
||||
});
|
||||
```
|
||||
|
||||
### Notification Types
|
||||
|
||||
```typescript
|
||||
type NotificationType = 'info' | 'success' | 'warning' | 'error';
|
||||
|
||||
await createNotification({
|
||||
userId: user.id,
|
||||
title: 'Payment Successful',
|
||||
message: 'Your subscription has been renewed',
|
||||
type: 'success',
|
||||
});
|
||||
```
|
||||
|
||||
### Fetching Notifications
|
||||
|
||||
```typescript
|
||||
import { getUserNotifications } from '~/lib/notifications';
|
||||
|
||||
const notifications = await getUserNotifications(userId, {
|
||||
limit: 10,
|
||||
unreadOnly: true,
|
||||
});
|
||||
```
|
||||
|
||||
### Marking as Read
|
||||
|
||||
```typescript
|
||||
import { markNotificationAsRead } from '~/lib/notifications';
|
||||
|
||||
await markNotificationAsRead(notificationId);
|
||||
```
|
||||
|
||||
## Real-time Notifications
|
||||
|
||||
Use Supabase Realtime for instant notifications:
|
||||
|
||||
```typescript
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useSupabase } from '@kit/supabase/hooks/use-supabase';
|
||||
|
||||
export function NotificationListener() {
|
||||
const supabase = useSupabase();
|
||||
|
||||
useEffect(() => {
|
||||
const channel = supabase
|
||||
.channel('notifications')
|
||||
.on(
|
||||
'postgres_changes',
|
||||
{
|
||||
event: 'INSERT',
|
||||
schema: 'public',
|
||||
table: 'notifications',
|
||||
filter: `user_id=eq.${userId}`,
|
||||
},
|
||||
(payload) => {
|
||||
// Show toast notification
|
||||
toast.info(payload.new.title);
|
||||
}
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
return () => {
|
||||
supabase.removeChannel(channel);
|
||||
};
|
||||
}, [supabase]);
|
||||
|
||||
return null;
|
||||
}
|
||||
```
|
||||
|
||||
## Email Templates Best Practices
|
||||
|
||||
1. **Keep it simple** - Plain text and minimal HTML
|
||||
2. **Mobile responsive** - Most emails are read on mobile
|
||||
3. **Clear CTAs** - Make action buttons prominent
|
||||
4. **Personalize** - Use user's name and relevant data
|
||||
5. **Test rendering** - Check across email clients
|
||||
6. **Include plain text** - Always provide text alternative
|
||||
7. **Unsubscribe link** - Required for marketing emails
|
||||
|
||||
## Testing Emails
|
||||
|
||||
### Local Development
|
||||
|
||||
In development, emails are caught by InBucket:
|
||||
|
||||
```
|
||||
http://localhost:54324
|
||||
```
|
||||
|
||||
### Preview Emails
|
||||
|
||||
Use React Email to preview templates:
|
||||
|
||||
```bash
|
||||
npm run email:dev
|
||||
```
|
||||
|
||||
Visit `http://localhost:3001` to see email previews.
|
||||
|
||||
## Deliverability Tips
|
||||
|
||||
1. **Authenticate your domain** - Set up SPF, DKIM, DMARC
|
||||
2. **Warm up your domain** - Start with low volumes
|
||||
3. **Monitor bounce rates** - Keep below 5%
|
||||
4. **Avoid spam triggers** - Don't use all caps, excessive punctuation
|
||||
5. **Provide value** - Only send relevant, useful emails
|
||||
6. **Easy unsubscribe** - Make it one-click simple
|
||||
- Double-Opt-In für die Anmeldung
|
||||
- Dokumentation der Einwilligung
|
||||
- Einfache Abmeldemöglichkeit in jeder E-Mail
|
||||
|
||||
@@ -1,16 +1,73 @@
|
||||
---
|
||||
title: "Features"
|
||||
description: "Learn about the built-in features available in MakerKit."
|
||||
title: "Funktionen"
|
||||
description: "Überblick über die Kernfunktionen von MYeasyCMS — Mitgliederverwaltung, Finanzen, Kurse, Veranstaltungen und mehr."
|
||||
publishedAt: 2024-04-11
|
||||
order: 3
|
||||
order: 0
|
||||
status: "published"
|
||||
---
|
||||
|
||||
MakerKit comes with a rich set of features to help you build your SaaS quickly.
|
||||
MYeasyCMS bietet eine umfassende Palette von Funktionen für die tägliche Vereinsarbeit.
|
||||
|
||||
This section covers:
|
||||
- Team collaboration
|
||||
- File uploads
|
||||
- Email functionality
|
||||
- User management
|
||||
- And more built-in features
|
||||
## Mitgliederverwaltung
|
||||
|
||||
- **Stammdaten** — Name, Adresse, Kontaktdaten, Geburtsdatum, Fotos
|
||||
- **Abteilungen** — Mitglieder verschiedenen Abteilungen zuordnen
|
||||
- **SEPA-Mandate** — Lastschriftmandate direkt im Mitgliedsstamm verwalten
|
||||
- **Mitgliedsausweise** — Ausweise aus Vorlagen generieren (mit Foto und Barcode)
|
||||
- **Ein-/Austritte** — Historisierte Dokumentation aller Statusänderungen
|
||||
- **Import/Export** — Mitgliederlisten aus Excel/CSV importieren und exportieren
|
||||
- **Statistiken** — Mitgliederentwicklung, Altersstruktur, Abteilungsverteilung
|
||||
|
||||
## Finanzen & SEPA
|
||||
|
||||
- **Beitragskategorien** — Verschiedene Beitragssätze definieren und zuordnen
|
||||
- **SEPA-Sammellastschrift** — XML-Dateien (pain.008) für den Bankeinzug erzeugen
|
||||
- **Rechnungen** — Erstellen, versenden und nachverfolgen
|
||||
- **Zahlungsverfolgung** — Offene Posten, Mahnwesen, Rückläufer
|
||||
- **Geschäftsjahre** — Jahresabschluss und Übertrag
|
||||
|
||||
## Kursverwaltung
|
||||
|
||||
- **Kurse anlegen** — Titel, Beschreibung, Termine, Dozent, Kosten
|
||||
- **Teilnehmerverwaltung** — Anmeldungen, Wartelisten, Anwesenheit
|
||||
- **Kalender** — Übersichtliche Terminplanung mit Ferien- und Feiertagsberücksichtigung
|
||||
- **Kategorien und Orte** — Kurstypen und Veranstaltungsorte verwalten
|
||||
- **Online-Anmeldung** — Teilnehmer können sich über die Vereinswebsite anmelden
|
||||
|
||||
## Veranstaltungen
|
||||
|
||||
- **Eventplanung** — Veranstaltungen mit Beschreibung, Ort, Datum und Kapazität
|
||||
- **Registrierungen** — Online-Anmeldung und Teilnehmerlisten
|
||||
- **Ferienpässe** — Verwaltung von Ferienprogrammen (entwickelt mit der Stadt Regensburg)
|
||||
|
||||
## Newsletter
|
||||
|
||||
- **Kampagnen erstellen** — E-Mails mit Vorlagen gestalten
|
||||
- **Empfänger verwalten** — Versand an Abteilungen, Gruppen oder individuelle Listen
|
||||
- **An-/Abmeldung** — Automatische Verwaltung mit Double-Opt-In
|
||||
|
||||
## Dokumente
|
||||
|
||||
- **Vorlagen** — Briefvorlagen, Etiketten, Ausweise, Zertifikate
|
||||
- **Seriendokumente** — Massengenerierung für alle Mitglieder oder Gruppen
|
||||
- **Export** — PDF- und Excel-Export
|
||||
|
||||
## Site-Builder
|
||||
|
||||
- **Drag-and-Drop** — Seiten visuell zusammenbauen
|
||||
- **Vereinsdaten einbinden** — Kurse, Veranstaltungen und Kontakte direkt anzeigen
|
||||
- **Responsive** — Automatisch für alle Bildschirmgrößen optimiert
|
||||
|
||||
## Fischereiverwaltung
|
||||
|
||||
- **Gewässer** — Gewässerverzeichnis mit Details und Karten
|
||||
- **Besatzmaßnahmen** — Dokumentation von Fischbesatz
|
||||
- **Fangbücher** — Digitale Fangbuchführung
|
||||
- **Erlaubnisscheine** — Ausgabe und Verwaltung von Fischereierlaubnisscheinen
|
||||
- **Statistiken** — Fang- und Besatzauswertungen
|
||||
|
||||
## Sitzungsprotokolle
|
||||
|
||||
- **Protokolle** — Sitzungsprotokolle mit Tagesordnungspunkten erstellen
|
||||
- **Aufgaben** — Aufgaben aus Protokollen ableiten und nachverfolgen
|
||||
- **Beschlüsse** — Beschlüsse dokumentieren und archivieren
|
||||
|
||||
@@ -1,398 +1,37 @@
|
||||
---
|
||||
title: "File Uploads"
|
||||
description: "Handle file uploads with Supabase Storage."
|
||||
title: "Dateien und Dokumente"
|
||||
description: "Verwalten und generieren Sie Dokumente — Mitgliedsausweise, Rechnungen, Briefe und mehr."
|
||||
publishedAt: 2024-04-11
|
||||
order: 2
|
||||
order: 3
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS bietet integrierte Dokumentenverwaltung und -generierung.
|
||||
|
||||
Enable users to upload and manage files using Supabase Storage.
|
||||
## Dokumentenvorlagen
|
||||
|
||||
## Setup
|
||||
Erstellen Sie Vorlagen für häufig benötigte Dokumente:
|
||||
|
||||
### Create Storage Bucket
|
||||
- **Mitgliedsausweise** — Mit Foto, Mitgliedsnummer und Barcode
|
||||
- **Rechnungen** — Für Beiträge, Kursgebühren und sonstige Leistungen
|
||||
- **Briefe** — Serienbriefe an Mitglieder oder Gruppen
|
||||
- **Etiketten** — Adressetiketten für den Postversand
|
||||
- **Zertifikate** — Teilnahmebestätigungen für Kurse und Lehrgänge
|
||||
- **Berichte** — Mitgliederlisten und Statistiken
|
||||
|
||||
```sql
|
||||
-- Create a public bucket for avatars
|
||||
INSERT INTO storage.buckets (id, name, public)
|
||||
VALUES ('avatars', 'avatars', true);
|
||||
## Seriendokumente
|
||||
|
||||
-- Create a private bucket for documents
|
||||
INSERT INTO storage.buckets (id, name, public)
|
||||
VALUES ('documents', 'documents', false);
|
||||
```
|
||||
Generieren Sie Dokumente für mehrere Mitglieder gleichzeitig. Platzhalter in der Vorlage werden automatisch mit den Mitgliederdaten gefüllt.
|
||||
|
||||
### Set Storage Policies
|
||||
## Dateiverwaltung
|
||||
|
||||
```sql
|
||||
-- Allow users to upload their own avatars
|
||||
CREATE POLICY "Users can upload their own avatar"
|
||||
ON storage.objects FOR INSERT
|
||||
WITH CHECK (
|
||||
bucket_id = 'avatars' AND
|
||||
auth.uid()::text = (storage.foldername(name))[1]
|
||||
);
|
||||
Laden Sie Dateien direkt in MYeasyCMS hoch und organisieren Sie Ihre Vereinsdokumente:
|
||||
|
||||
-- Allow users to view their own avatars
|
||||
CREATE POLICY "Users can view their own avatar"
|
||||
ON storage.objects FOR SELECT
|
||||
USING (
|
||||
bucket_id = 'avatars' AND
|
||||
auth.uid()::text = (storage.foldername(name))[1]
|
||||
);
|
||||
- Satzung und Geschäftsordnung
|
||||
- Protokolle und Beschlüsse
|
||||
- Formulare und Vordrucke
|
||||
- Fotos und Medien
|
||||
|
||||
-- Allow users to delete their own avatars
|
||||
CREATE POLICY "Users can delete their own avatar"
|
||||
ON storage.objects FOR DELETE
|
||||
USING (
|
||||
bucket_id = 'avatars' AND
|
||||
auth.uid()::text = (storage.foldername(name))[1]
|
||||
);
|
||||
```
|
||||
## Export
|
||||
|
||||
## Upload Component
|
||||
|
||||
### Basic File Upload
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { uploadFileAction } from '../_lib/actions';
|
||||
|
||||
export function FileUpload() {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!file) return;
|
||||
|
||||
setUploading(true);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const result = await uploadFileAction(formData);
|
||||
|
||||
if (result.success) {
|
||||
toast.success('File uploaded successfully');
|
||||
}
|
||||
|
||||
setUploading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
type="file"
|
||||
onChange={(e) => setFile(e.files?.[0] || null)}
|
||||
accept="image/*"
|
||||
/>
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={!file || uploading}
|
||||
>
|
||||
{uploading ? 'Uploading...' : 'Upload'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Server Action
|
||||
|
||||
```typescript
|
||||
'use server';
|
||||
|
||||
import { enhanceAction } from '@kit/next/actions';
|
||||
import { getSupabaseServerClient } from '@kit/supabase/server-client';
|
||||
|
||||
export const uploadFileAction = enhanceAction(
|
||||
async (formData: FormData, user) => {
|
||||
const file = formData.get('file') as File;
|
||||
|
||||
if (!file) {
|
||||
throw new Error('No file provided');
|
||||
}
|
||||
|
||||
const client = getSupabaseServerClient();
|
||||
const fileExt = file.name.split('.').pop();
|
||||
const fileName = `${user.id}/${Date.now()}.${fileExt}`;
|
||||
|
||||
const { data, error } = await client.storage
|
||||
.from('avatars')
|
||||
.upload(fileName, file, {
|
||||
cacheControl: '3600',
|
||||
upsert: false,
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Get public URL
|
||||
const { data: { publicUrl } } = client.storage
|
||||
.from('avatars')
|
||||
.getPublicUrl(fileName);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
url: publicUrl,
|
||||
path: data.path,
|
||||
};
|
||||
},
|
||||
{ auth: true }
|
||||
);
|
||||
```
|
||||
|
||||
## Drag and Drop Upload
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
|
||||
export function DragDropUpload() {
|
||||
const onDrop = useCallback(async (acceptedFiles: File[]) => {
|
||||
for (const file of acceptedFiles) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
await uploadFileAction(formData);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
onDrop,
|
||||
accept: {
|
||||
'image/*': ['.png', '.jpg', '.jpeg', '.gif'],
|
||||
},
|
||||
maxSize: 5 * 1024 * 1024, // 5MB
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={cn(
|
||||
'border-2 border-dashed rounded-lg p-8 text-center cursor-pointer',
|
||||
isDragActive && 'border-primary bg-primary/10'
|
||||
)}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
{isDragActive ? (
|
||||
<p>Drop files here...</p>
|
||||
) : (
|
||||
<p>Drag and drop files here, or click to select</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## File Validation
|
||||
|
||||
### Client-Side Validation
|
||||
|
||||
```typescript
|
||||
function validateFile(file: File) {
|
||||
const maxSize = 5 * 1024 * 1024; // 5MB
|
||||
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
|
||||
|
||||
if (file.size > maxSize) {
|
||||
throw new Error('File size must be less than 5MB');
|
||||
}
|
||||
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
throw new Error('File type must be JPEG, PNG, or GIF');
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
### Server-Side Validation
|
||||
|
||||
```typescript
|
||||
export const uploadFileAction = enhanceAction(
|
||||
async (formData: FormData, user) => {
|
||||
const file = formData.get('file') as File;
|
||||
|
||||
// Validate file size
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
throw new Error('File too large');
|
||||
}
|
||||
|
||||
// Validate file type
|
||||
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
throw new Error('Invalid file type');
|
||||
}
|
||||
|
||||
// Validate dimensions for images
|
||||
if (file.type.startsWith('image/')) {
|
||||
const dimensions = await getImageDimensions(file);
|
||||
if (dimensions.width > 4000 || dimensions.height > 4000) {
|
||||
throw new Error('Image dimensions too large');
|
||||
}
|
||||
}
|
||||
|
||||
// Continue with upload...
|
||||
},
|
||||
{ auth: true }
|
||||
);
|
||||
```
|
||||
|
||||
## Image Optimization
|
||||
|
||||
### Resize on Upload
|
||||
|
||||
```typescript
|
||||
import sharp from 'sharp';
|
||||
|
||||
export const uploadAvatarAction = enhanceAction(
|
||||
async (formData: FormData, user) => {
|
||||
const file = formData.get('file') as File;
|
||||
const buffer = Buffer.from(await file.arrayBuffer());
|
||||
|
||||
// Resize image
|
||||
const resized = await sharp(buffer)
|
||||
.resize(200, 200, {
|
||||
fit: 'cover',
|
||||
position: 'center',
|
||||
})
|
||||
.jpeg({ quality: 90 })
|
||||
.toBuffer();
|
||||
|
||||
const client = getSupabaseServerClient();
|
||||
const fileName = `${user.id}/avatar.jpg`;
|
||||
|
||||
const { error } = await client.storage
|
||||
.from('avatars')
|
||||
.upload(fileName, resized, {
|
||||
contentType: 'image/jpeg',
|
||||
upsert: true,
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
{ auth: true }
|
||||
);
|
||||
```
|
||||
|
||||
## Progress Tracking
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
export function UploadWithProgress() {
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
const handleUpload = async (file: File) => {
|
||||
const client = getSupabaseBrowserClient();
|
||||
|
||||
const { error } = await client.storage
|
||||
.from('documents')
|
||||
.upload(`uploads/${file.name}`, file, {
|
||||
onUploadProgress: (progressEvent) => {
|
||||
const percent = (progressEvent.loaded / progressEvent.total) * 100;
|
||||
setProgress(Math.round(percent));
|
||||
},
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input type="file" onChange={(e) => handleUpload(e.target.files![0])} />
|
||||
{progress > 0 && (
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-primary h-2 rounded-full transition-all"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Downloading Files
|
||||
|
||||
### Get Public URL
|
||||
|
||||
```typescript
|
||||
const { data } = client.storage
|
||||
.from('avatars')
|
||||
.getPublicUrl('user-id/avatar.jpg');
|
||||
|
||||
console.log(data.publicUrl);
|
||||
```
|
||||
|
||||
### Download Private File
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client.storage
|
||||
.from('documents')
|
||||
.download('private-file.pdf');
|
||||
|
||||
if (data) {
|
||||
const url = URL.createObjectURL(data);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'file.pdf';
|
||||
a.click();
|
||||
}
|
||||
```
|
||||
|
||||
### Generate Signed URL
|
||||
|
||||
```typescript
|
||||
const { data, error } = await client.storage
|
||||
.from('documents')
|
||||
.createSignedUrl('private-file.pdf', 3600); // 1 hour
|
||||
|
||||
console.log(data.signedUrl);
|
||||
```
|
||||
|
||||
## Deleting Files
|
||||
|
||||
```typescript
|
||||
export const deleteFileAction = enhanceAction(
|
||||
async (data, user) => {
|
||||
const client = getSupabaseServerClient();
|
||||
|
||||
const { error } = await client.storage
|
||||
.from('avatars')
|
||||
.remove([data.path]);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
{
|
||||
schema: z.object({
|
||||
path: z.string(),
|
||||
}),
|
||||
auth: true,
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Validate on both sides** - Client and server
|
||||
2. **Limit file sizes** - Prevent abuse
|
||||
3. **Sanitize filenames** - Remove special characters
|
||||
4. **Use unique names** - Prevent collisions
|
||||
5. **Optimize images** - Resize before upload
|
||||
6. **Set storage policies** - Control access
|
||||
7. **Monitor usage** - Track storage costs
|
||||
8. **Clean up unused files** - Regular maintenance
|
||||
9. **Use CDN** - For public files
|
||||
10. **Implement virus scanning** - For user uploads
|
||||
Alle generierten Dokumente können als PDF heruntergeladen werden. Listen und Auswertungen sind zusätzlich als Excel-Export verfügbar.
|
||||
|
||||
@@ -1,276 +1,32 @@
|
||||
---
|
||||
title: "Team Collaboration"
|
||||
description: "Manage team members, roles, and permissions in your application."
|
||||
title: "Teamarbeit"
|
||||
description: "Arbeiten Sie im Team — mit Rollen, Berechtigungen und gemeinsamer Datenpflege."
|
||||
publishedAt: 2024-04-11
|
||||
order: 1
|
||||
order: 2
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS ist für die Zusammenarbeit im Vereinsvorstand konzipiert. Mehrere Benutzer können gleichzeitig arbeiten.
|
||||
|
||||
Enable teams to collaborate effectively with built-in team management features.
|
||||
## Mehrere Benutzer
|
||||
|
||||
## Team Accounts
|
||||
Fügen Sie beliebig viele Benutzer zu Ihrem Vereins-Account hinzu. Es gibt keine Begrenzung der Benutzeranzahl — alle Tarife enthalten unbegrenzte Zugänge.
|
||||
|
||||
The application supports multi-tenant team accounts where multiple users can collaborate.
|
||||
## Rollenbasierte Zugriffskontrolle
|
||||
|
||||
### Creating a Team
|
||||
Jeder Benutzer sieht nur die Daten, die für seine Aufgabe relevant sind:
|
||||
|
||||
Users can create new team accounts:
|
||||
| Rolle | Zugriff |
|
||||
|-------|---------|
|
||||
| Administrator | Alle Module und Einstellungen |
|
||||
| Kassenwart | Finanzen, Beiträge, Mitgliederdaten |
|
||||
| Kursleiter | Kursverwaltung, Teilnehmer |
|
||||
| Schriftführer | Protokolle, Dokumente |
|
||||
|
||||
```typescript
|
||||
import { createTeamAccount } from '~/lib/teams/create-team';
|
||||
## Einladungen
|
||||
|
||||
const team = await createTeamAccount({
|
||||
name: 'Acme Corp',
|
||||
slug: 'acme-corp',
|
||||
ownerId: currentUser.id,
|
||||
});
|
||||
```
|
||||
Neue Benutzer werden per E-Mail eingeladen. Die Einladung enthält einen Registrierungslink, über den der neue Benutzer sein Konto erstellt.
|
||||
|
||||
### Team Workspace
|
||||
## Aktivitätsprotokoll
|
||||
|
||||
Each team has its own workspace with isolated data:
|
||||
- Projects and resources
|
||||
- Team-specific settings
|
||||
- Billing and subscription
|
||||
- Activity logs
|
||||
|
||||
## Inviting Members
|
||||
|
||||
### Send Invitations
|
||||
|
||||
Invite new members to your team:
|
||||
|
||||
```typescript
|
||||
import { inviteTeamMember } from '~/lib/teams/invitations';
|
||||
|
||||
await inviteTeamMember({
|
||||
teamId: team.id,
|
||||
email: 'member@example.com',
|
||||
role: 'member',
|
||||
});
|
||||
```
|
||||
|
||||
### Invitation Flow
|
||||
|
||||
1. Owner sends invitation via email
|
||||
2. Recipient receives email with invitation link
|
||||
3. Recipient accepts invitation
|
||||
4. Member gains access to team workspace
|
||||
|
||||
### Managing Invitations
|
||||
|
||||
```tsx
|
||||
import { PendingInvitations } from '~/components/teams/pending-invitations';
|
||||
|
||||
<PendingInvitations teamId={team.id} />
|
||||
```
|
||||
|
||||
## Roles and Permissions
|
||||
|
||||
### Default Roles
|
||||
|
||||
**Owner**
|
||||
- Full access to team and settings
|
||||
- Manage billing and subscriptions
|
||||
- Invite and remove members
|
||||
- Delete team
|
||||
|
||||
**Admin**
|
||||
- Manage team members
|
||||
- Manage team resources
|
||||
- Cannot access billing
|
||||
- Cannot delete team
|
||||
|
||||
**Member**
|
||||
- View team resources
|
||||
- Create and edit own content
|
||||
- Limited team settings access
|
||||
|
||||
### Custom Roles
|
||||
|
||||
Define custom roles with specific permissions:
|
||||
|
||||
```typescript
|
||||
const customRole = {
|
||||
name: 'Editor',
|
||||
permissions: [
|
||||
'read:projects',
|
||||
'write:projects',
|
||||
'read:members',
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Checking Permissions
|
||||
|
||||
```typescript
|
||||
import { checkPermission } from '~/lib/teams/permissions';
|
||||
|
||||
const canEdit = await checkPermission(userId, teamId, 'write:projects');
|
||||
|
||||
if (!canEdit) {
|
||||
throw new Error('Insufficient permissions');
|
||||
}
|
||||
```
|
||||
|
||||
## Member Management
|
||||
|
||||
### Listing Members
|
||||
|
||||
```typescript
|
||||
import { getTeamMembers } from '~/lib/teams/members';
|
||||
|
||||
const members = await getTeamMembers(teamId);
|
||||
```
|
||||
|
||||
### Updating Member Role
|
||||
|
||||
```typescript
|
||||
import { updateMemberRole } from '~/lib/teams/members';
|
||||
|
||||
await updateMemberRole({
|
||||
memberId: member.id,
|
||||
role: 'admin',
|
||||
});
|
||||
```
|
||||
|
||||
### Removing Members
|
||||
|
||||
```typescript
|
||||
import { removeMember } from '~/lib/teams/members';
|
||||
|
||||
await removeMember(memberId);
|
||||
```
|
||||
|
||||
## Team Settings
|
||||
|
||||
### Updating Team Info
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { updateTeamAction } from '../_lib/server/actions';
|
||||
|
||||
export function TeamSettingsForm({ team }) {
|
||||
const { register, handleSubmit } = useForm({
|
||||
defaultValues: {
|
||||
name: team.name,
|
||||
description: team.description,
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
await updateTeamAction({ teamId: team.id, ...data });
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<input {...register('name')} placeholder="Team name" />
|
||||
<textarea {...register('description')} placeholder="Description" />
|
||||
<button type="submit">Save Changes</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Team Avatar
|
||||
|
||||
```typescript
|
||||
import { uploadTeamAvatar } from '~/lib/teams/avatar';
|
||||
|
||||
const avatarUrl = await uploadTeamAvatar({
|
||||
teamId: team.id,
|
||||
file: avatarFile,
|
||||
});
|
||||
```
|
||||
|
||||
## Activity Log
|
||||
|
||||
Track team activity for transparency:
|
||||
|
||||
```typescript
|
||||
import { logActivity } from '~/lib/teams/activity';
|
||||
|
||||
await logActivity({
|
||||
teamId: team.id,
|
||||
userId: user.id,
|
||||
action: 'member_invited',
|
||||
metadata: {
|
||||
invitedEmail: 'new@example.com',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Viewing Activity
|
||||
|
||||
```typescript
|
||||
import { getTeamActivity } from '~/lib/teams/activity';
|
||||
|
||||
const activities = await getTeamActivity(teamId, {
|
||||
limit: 50,
|
||||
offset: 0,
|
||||
});
|
||||
```
|
||||
|
||||
## Team Switching
|
||||
|
||||
Allow users to switch between their teams:
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useTeamAccountWorkspace } from '@kit/team-accounts/hooks/use-team-account-workspace';
|
||||
|
||||
export function TeamSwitcher() {
|
||||
const { accounts, account } = useTeamAccountWorkspace();
|
||||
|
||||
return (
|
||||
<select
|
||||
value={account.id}
|
||||
onChange={(e) => switchTeam(e.target.value)}
|
||||
>
|
||||
{accounts.map((team) => (
|
||||
<option key={team.id} value={team.id}>
|
||||
{team.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Notifications
|
||||
|
||||
### Member Joined
|
||||
|
||||
```typescript
|
||||
await createNotification({
|
||||
teamId: team.id,
|
||||
title: 'New Member',
|
||||
message: `${user.name} joined the team`,
|
||||
type: 'info',
|
||||
});
|
||||
```
|
||||
|
||||
### Role Changed
|
||||
|
||||
```typescript
|
||||
await createNotification({
|
||||
userId: member.userId,
|
||||
title: 'Role Updated',
|
||||
message: `Your role was changed to ${newRole}`,
|
||||
type: 'info',
|
||||
});
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Clear role hierarchy** - Define roles that make sense for your use case
|
||||
2. **Principle of least privilege** - Give minimum required permissions
|
||||
3. **Audit trail** - Log important team actions
|
||||
4. **Easy onboarding** - Simple invitation process
|
||||
5. **Self-service** - Let members manage their own settings
|
||||
6. **Transparent billing** - Show usage and costs clearly
|
||||
Unter **Verwaltung → Audit** sehen Administratoren, wer wann welche Änderungen vorgenommen hat. Das Protokoll hilft bei der Nachverfolgung und Qualitätssicherung.
|
||||
|
||||
@@ -1,350 +1,43 @@
|
||||
---
|
||||
title: "Configuration"
|
||||
description: "Configure your application settings and feature flags."
|
||||
title: "Konfiguration"
|
||||
description: "MYeasyCMS an Ihren Verein anpassen — Stammdaten, Module, Rollen und Grundeinstellungen konfigurieren."
|
||||
publishedAt: 2024-04-11
|
||||
order: 4
|
||||
order: 2
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
Nach dem ersten Login sollten Sie die Grundeinstellungen Ihres Vereins konfigurieren.
|
||||
|
||||
Customize your application behavior through configuration files.
|
||||
## Vereinsstammdaten
|
||||
|
||||
## Configuration Files
|
||||
Unter **Einstellungen → Vereinsdaten** hinterlegen Sie:
|
||||
|
||||
All configuration files are located in `apps/web/config/`:
|
||||
- **Vereinsname** — Der offizielle Name laut Satzung
|
||||
- **Adresse** — Anschrift des Vereinssitzes
|
||||
- **Kontaktdaten** — Telefon, E-Mail, Website
|
||||
- **Bankverbindung** — IBAN und BIC für den SEPA-Einzug
|
||||
- **Gläubiger-ID** — Ihre SEPA-Gläubiger-Identifikationsnummer
|
||||
- **Vereinslogo** — Wird auf Ausweisen, Rechnungen und der Website angezeigt
|
||||
|
||||
```
|
||||
config/
|
||||
├── paths.config.ts # Route paths
|
||||
├── billing.config.ts # Billing & pricing
|
||||
├── feature-flags.config.ts # Feature toggles
|
||||
├── personal-account-navigation.config.tsx
|
||||
├── team-account-navigation.config.tsx
|
||||
└── i18n.settings.ts # Internationalization
|
||||
```
|
||||
## Abteilungen und Gruppen
|
||||
|
||||
## Feature Flags
|
||||
Unter **Mitglieder → Abteilungen** legen Sie die Struktur Ihres Vereins an. Abteilungen werden für die Beitragsberechnung, Kommunikation und Statistiken verwendet.
|
||||
|
||||
Control feature availability:
|
||||
## Beitragskategorien
|
||||
|
||||
```typescript
|
||||
// config/feature-flags.config.ts
|
||||
export const featureFlags = {
|
||||
enableTeamAccounts: true,
|
||||
enableBilling: true,
|
||||
enableNotifications: true,
|
||||
enableFileUploads: false,
|
||||
enableAnalytics: true,
|
||||
enableChat: false,
|
||||
};
|
||||
```
|
||||
Unter **Finanzen → Beitragskategorien** definieren Sie die verschiedenen Beitragssätze:
|
||||
|
||||
### Using Feature Flags
|
||||
- **Bezeichnung** — z.B. „Erwachsene", „Jugendliche", „Familie"
|
||||
- **Jahresbeitrag** — Der reguläre Beitragssatz
|
||||
- **Aufnahmegebühr** — Einmalige Gebühr bei Eintritt (optional)
|
||||
- **Abrechnungszeitraum** — Jährlich, halbjährlich oder quartalsweise
|
||||
|
||||
```typescript
|
||||
import { featureFlags } from '~/config/feature-flags.config';
|
||||
## Rollen und Berechtigungen
|
||||
|
||||
export function ConditionalFeature() {
|
||||
if (!featureFlags.enableChat) {
|
||||
return null;
|
||||
}
|
||||
MYeasyCMS verwendet ein rollenbasiertes Berechtigungssystem. Jeder Benutzer erhält eine oder mehrere Rollen, die seinen Zugriff steuern.
|
||||
|
||||
return <ChatWidget />;
|
||||
}
|
||||
```
|
||||
Die Rollen können unter **Einstellungen → Mitarbeiter** zugewiesen werden.
|
||||
|
||||
## Path Configuration
|
||||
## E-Mail-Einstellungen
|
||||
|
||||
Define application routes:
|
||||
|
||||
```typescript
|
||||
// config/paths.config.ts
|
||||
export const pathsConfig = {
|
||||
auth: {
|
||||
signIn: '/auth/sign-in',
|
||||
signUp: '/auth/sign-up',
|
||||
passwordReset: '/auth/password-reset',
|
||||
callback: '/auth/callback',
|
||||
},
|
||||
app: {
|
||||
home: '/home',
|
||||
personalAccount: '/home',
|
||||
teamAccount: '/home/[account]',
|
||||
settings: '/home/settings',
|
||||
billing: '/home/settings/billing',
|
||||
},
|
||||
admin: {
|
||||
home: '/admin',
|
||||
users: '/admin/users',
|
||||
analytics: '/admin/analytics',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Using Paths
|
||||
|
||||
```typescript
|
||||
import { pathsConfig } from '~/config/paths.config';
|
||||
import Link from 'next/link';
|
||||
|
||||
<Link href={pathsConfig.app.settings}>
|
||||
Settings
|
||||
</Link>
|
||||
```
|
||||
|
||||
## Navigation Configuration
|
||||
|
||||
### Personal Account Navigation
|
||||
|
||||
```typescript
|
||||
// config/personal-account-navigation.config.tsx
|
||||
import { HomeIcon, SettingsIcon } from 'lucide-react';
|
||||
|
||||
export default [
|
||||
{
|
||||
label: 'common.routes.home',
|
||||
path: pathsConfig.app.personalAccount,
|
||||
Icon: <HomeIcon className="w-4" />,
|
||||
end: true,
|
||||
},
|
||||
{
|
||||
label: 'common.routes.settings',
|
||||
path: pathsConfig.app.settings,
|
||||
Icon: <SettingsIcon className="w-4" />,
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
### Team Account Navigation
|
||||
|
||||
```typescript
|
||||
// config/team-account-navigation.config.tsx
|
||||
export default [
|
||||
{
|
||||
label: 'common.routes.dashboard',
|
||||
path: createPath(pathsConfig.app.teamAccount, account),
|
||||
Icon: <LayoutDashboardIcon className="w-4" />,
|
||||
end: true,
|
||||
},
|
||||
{
|
||||
label: 'common.routes.projects',
|
||||
path: createPath(pathsConfig.app.projects, account),
|
||||
Icon: <FolderIcon className="w-4" />,
|
||||
},
|
||||
{
|
||||
label: 'common.routes.members',
|
||||
path: createPath(pathsConfig.app.members, account),
|
||||
Icon: <UsersIcon className="w-4" />,
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
## Billing Configuration
|
||||
|
||||
```typescript
|
||||
// config/billing.config.ts
|
||||
export const billingConfig = {
|
||||
provider: 'stripe', // 'stripe' | 'paddle'
|
||||
enableTrial: true,
|
||||
trialDays: 14,
|
||||
|
||||
plans: [
|
||||
{
|
||||
id: 'free',
|
||||
name: 'Free',
|
||||
price: 0,
|
||||
features: ['5 projects', 'Basic support'],
|
||||
limits: {
|
||||
projects: 5,
|
||||
members: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: 'Professional',
|
||||
price: 29,
|
||||
interval: 'month',
|
||||
features: ['Unlimited projects', 'Priority support'],
|
||||
limits: {
|
||||
projects: -1, // unlimited
|
||||
members: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## Internationalization
|
||||
|
||||
```typescript
|
||||
// lib/i18n/i18n.settings.ts
|
||||
export const i18nSettings = {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en', 'es', 'fr', 'de'],
|
||||
defaultNamespace: 'common',
|
||||
namespaces: ['common', 'auth', 'billing', 'errors'],
|
||||
};
|
||||
```
|
||||
|
||||
## Email Configuration
|
||||
|
||||
```typescript
|
||||
// config/email.config.ts
|
||||
export const emailConfig = {
|
||||
from: {
|
||||
email: process.env.EMAIL_FROM || 'noreply@example.com',
|
||||
name: process.env.EMAIL_FROM_NAME || 'Your App',
|
||||
},
|
||||
provider: 'resend', // 'resend' | 'sendgrid' | 'postmark'
|
||||
};
|
||||
```
|
||||
|
||||
## SEO Configuration
|
||||
|
||||
```typescript
|
||||
// config/seo.config.ts
|
||||
export const seoConfig = {
|
||||
title: 'Your App Name',
|
||||
description: 'Your app description',
|
||||
ogImage: '/images/og-image.png',
|
||||
twitterHandle: '@yourapp',
|
||||
locale: 'en_US',
|
||||
|
||||
// Per-page overrides
|
||||
pages: {
|
||||
home: {
|
||||
title: 'Home - Your App',
|
||||
description: 'Welcome to your app',
|
||||
},
|
||||
pricing: {
|
||||
title: 'Pricing - Your App',
|
||||
description: 'Simple, transparent pricing',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Theme Configuration
|
||||
|
||||
```typescript
|
||||
// config/theme.config.ts
|
||||
export const themeConfig = {
|
||||
defaultTheme: 'system', // 'light' | 'dark' | 'system'
|
||||
enableColorSchemeToggle: true,
|
||||
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
accent: 'purple',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Analytics Configuration
|
||||
|
||||
```typescript
|
||||
// config/analytics.config.ts
|
||||
export const analyticsConfig = {
|
||||
googleAnalytics: {
|
||||
enabled: true,
|
||||
measurementId: process.env.NEXT_PUBLIC_GA_ID,
|
||||
},
|
||||
|
||||
posthog: {
|
||||
enabled: false,
|
||||
apiKey: process.env.NEXT_PUBLIC_POSTHOG_KEY,
|
||||
},
|
||||
|
||||
plausible: {
|
||||
enabled: false,
|
||||
domain: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Rate Limiting
|
||||
|
||||
```typescript
|
||||
// config/rate-limit.config.ts
|
||||
export const rateLimitConfig = {
|
||||
api: {
|
||||
windowMs: 15 * 60 * 1000, // 15 minutes
|
||||
max: 100, // requests per window
|
||||
},
|
||||
|
||||
auth: {
|
||||
windowMs: 15 * 60 * 1000,
|
||||
max: 5, // login attempts
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Upload Configuration
|
||||
|
||||
```typescript
|
||||
// config/upload.config.ts
|
||||
export const uploadConfig = {
|
||||
maxFileSize: 5 * 1024 * 1024, // 5MB
|
||||
allowedMimeTypes: [
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
'image/gif',
|
||||
'image/webp',
|
||||
'application/pdf',
|
||||
],
|
||||
|
||||
storage: {
|
||||
provider: 'supabase', // 'supabase' | 's3' | 'cloudinary'
|
||||
bucket: 'uploads',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Environment-Specific Config
|
||||
|
||||
```typescript
|
||||
// config/app.config.ts
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const isProd = process.env.NODE_ENV === 'production';
|
||||
|
||||
export const appConfig = {
|
||||
environment: process.env.NODE_ENV,
|
||||
apiUrl: isProd
|
||||
? 'https://api.yourapp.com'
|
||||
: 'http://localhost:3000/api',
|
||||
|
||||
features: {
|
||||
enableDebugTools: isDev,
|
||||
enableErrorReporting: isProd,
|
||||
enableAnalytics: isProd,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use environment variables** for secrets
|
||||
2. **Type your configs** for autocomplete and safety
|
||||
3. **Document options** with comments
|
||||
4. **Validate on startup** to catch errors early
|
||||
5. **Keep configs simple** - avoid complex logic
|
||||
6. **Use feature flags** for gradual rollouts
|
||||
7. **Environment-specific values** for dev/prod differences
|
||||
|
||||
## Loading Configuration
|
||||
|
||||
Configs are automatically loaded but you can validate:
|
||||
|
||||
```typescript
|
||||
// lib/config/validate-config.ts
|
||||
import * as z from 'zod';
|
||||
|
||||
const ConfigSchema = z.object({
|
||||
apiUrl: z.string().url(),
|
||||
enableFeatureX: z.boolean(),
|
||||
});
|
||||
|
||||
export function validateConfig(config: unknown) {
|
||||
return ConfigSchema.parse(config);
|
||||
}
|
||||
```
|
||||
Für den Versand von Newslettern und Benachrichtigungen konfigurieren Sie unter **Einstellungen → E-Mail** Ihre Absenderdaten.
|
||||
|
||||
@@ -1,30 +1,50 @@
|
||||
---
|
||||
title: "Introduction"
|
||||
description: "Makerkit is a SaaS Starter Kit that helps you build a SaaS. Learn how to get started with Makerkit."
|
||||
title: "Einführung"
|
||||
description: "MYeasyCMS ist die webbasierte Vereins- und Verbandsverwaltung von Com.BISS GmbH. Seit 2004 unterstützt die Plattform Vereine, Verbände und Bildungseinrichtungen in ganz Bayern."
|
||||
publishedAt: 2024-04-11
|
||||
order: 0
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS ist die webbasierte Verwaltungsplattform für Vereine, Verbände und Organisationen. Entwickelt von der Com.BISS GmbH in Schierling bei Regensburg, wird die Software seit 2004 kontinuierlich weiterentwickelt und betreut über 69.000 Mitglieder in mehr als 90 angebundenen Vereinen.
|
||||
|
||||
Makerkit is a SaaS Starter Kit that helps you build a SaaS. It provides you with a set of tools and best practices to help you build a SaaS quickly and efficiently.
|
||||
## Für wen ist MYeasyCMS?
|
||||
|
||||
## Getting started
|
||||
- **Vereine** — Sportvereine, Fischereivereine, Kulturvereine und andere gemeinnützige Organisationen
|
||||
- **Verbände** — Bezirksfischereiverbände, Kreisverbände und Dachorganisationen mit Untergliedern
|
||||
- **Bildungseinrichtungen** — Volkshochschulen und andere Kursanbieter
|
||||
- **Kommunale Einrichtungen** — Städte und Gemeinden mit Veranstaltungs- und Raumbuchungsverwaltung
|
||||
|
||||
To get started follow these steps:
|
||||
## Module im Überblick
|
||||
|
||||
1. Sign up for an account on the [website](#).
|
||||
2. Create a new project by clicking on the "New Project" button.
|
||||
3. Choose a template for your project. Makerkit provides several templates to help you get started quickly.
|
||||
MYeasyCMS ist modular aufgebaut. Sie aktivieren nur die Module, die Ihr Verein tatsächlich braucht:
|
||||
|
||||
## Features
|
||||
| Modul | Funktion |
|
||||
|-------|----------|
|
||||
| **Mitgliederverwaltung** | Stammdaten, Abteilungen, Mandate, Ausweise, Statistiken |
|
||||
| **Kursverwaltung** | Kurse, Dozenten, Teilnehmer, Kalender, Online-Anmeldung |
|
||||
| **Veranstaltungen** | Eventplanung, Anmeldungen, Ferienpässe |
|
||||
| **Raumbuchungen** | Reservierungen, Kalender, Schlüsselverwaltung |
|
||||
| **Finanzen & SEPA** | Beiträge, Rechnungen, SEPA-Lastschrift, Kontenverwaltung |
|
||||
| **Newsletter** | E-Mail-Versand, Vorlagen, Abonnentenverwaltung |
|
||||
| **Dokumente** | Ausweise, Rechnungen, Briefe, Etiketten aus Vorlagen |
|
||||
| **Site-Builder** | Vereinswebsite mit Drag-and-Drop-Editor |
|
||||
| **Individuelle Module** | Eigene Datenmodule für Gewässer, Fangbücher, etc. |
|
||||
| **Fischereiverwaltung** | Gewässer, Besatzmaßnahmen, Fangbücher, Erlaubnisscheine |
|
||||
| **Sitzungsprotokolle** | Protokolle, Tagesordnungspunkte, Aufgaben |
|
||||
| **Verbandsverwaltung** | Hierarchien, Unterglieder, vereinsübergreifende Suche |
|
||||
|
||||
Makerkit provides the following features to help you build a SaaS:
|
||||
1. User authentication
|
||||
2. User management
|
||||
3. Subscription management
|
||||
4. Billing and payments
|
||||
5. Super Admin
|
||||
## Technische Grundlagen
|
||||
|
||||
... and many more!
|
||||
- **Webbasiert** — Zugriff über jeden modernen Browser (Chrome, Firefox, Safari, Edge)
|
||||
- **Responsive** — Funktioniert auf Desktop, Tablet und Smartphone
|
||||
- **Server in Deutschland** — Hosting in deutschen Rechenzentren
|
||||
- **DSGVO-konform** — Rollenbasierte Zugriffsrechte, verschlüsselte Datenübertragung
|
||||
|
||||
## Support
|
||||
|
||||
Bei Fragen erreichen Sie das Com.BISS-Team direkt:
|
||||
|
||||
- **Telefon:** 09451 9499-09
|
||||
- **E-Mail:** info@combiss.de
|
||||
- **Persönlich:** Kein anonymes Ticketsystem — Sie sprechen direkt mit den Menschen, die Ihre Software entwickeln.
|
||||
|
||||
@@ -1,23 +1,46 @@
|
||||
---
|
||||
title: "Installing Dependencies"
|
||||
description: "Learn how to install dependencies for your project."
|
||||
title: "Abhängigkeiten installieren"
|
||||
description: "Voraussetzungen und Systemanforderungen für die Nutzung von MYeasyCMS."
|
||||
publishedAt: 2024-04-11
|
||||
order: 1
|
||||
order: 4
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS ist eine vollständig webbasierte Anwendung. Es muss keine Software installiert werden.
|
||||
|
||||
To install dependencies in your project, please install `pnpm` by running the following command:
|
||||
## Systemanforderungen
|
||||
|
||||
```bash
|
||||
npm install -g pnpm
|
||||
```
|
||||
### Browser
|
||||
|
||||
Next, navigate to your project directory and run the following command:
|
||||
MYeasyCMS funktioniert mit allen modernen Browsern:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
- **Google Chrome** (empfohlen) — ab Version 90
|
||||
- **Mozilla Firefox** — ab Version 90
|
||||
- **Microsoft Edge** — ab Version 90
|
||||
- **Apple Safari** — ab Version 14
|
||||
|
||||
This will install all the dependencies listed in your `package.json` file.
|
||||
### Internetverbindung
|
||||
|
||||
Eine stabile Internetverbindung ist erforderlich. MYeasyCMS funktioniert auch bei langsameren Verbindungen, empfohlen wird jedoch eine Bandbreite von mindestens 2 Mbit/s.
|
||||
|
||||
### Endgeräte
|
||||
|
||||
- **Desktop-Computer** oder Laptop (empfohlen für die tägliche Arbeit)
|
||||
- **Tablet** (geeignet für Kursverwaltung und Veranstaltungen vor Ort)
|
||||
- **Smartphone** (geeignet für schnelle Abfragen und Statusprüfungen)
|
||||
|
||||
## Keine Installation nötig
|
||||
|
||||
Anders als klassische Vereinssoftware muss MYeasyCMS nicht auf einzelnen Rechnern installiert werden:
|
||||
|
||||
- Kein Download oder Setup-Programm
|
||||
- Keine lokale Datenbank
|
||||
- Keine manuellen Updates — neue Funktionen stehen automatisch zur Verfügung
|
||||
- Kein IT-Aufwand für den Verein
|
||||
|
||||
## Zugangsdaten
|
||||
|
||||
Die Zugangsdaten erhalten Sie vom Com.BISS-Team nach der Einrichtung Ihres Vereins-Accounts. Bei Fragen wenden Sie sich an:
|
||||
|
||||
- **Telefon:** 09451 9499-09
|
||||
- **E-Mail:** info@combiss.de
|
||||
|
||||
@@ -1,247 +1,54 @@
|
||||
---
|
||||
title: "Project Structure"
|
||||
description: "Understanding the monorepo structure and organization."
|
||||
title: "Projektstruktur"
|
||||
description: "Überblick über die Struktur von MYeasyCMS — Module, Pakete und Konfiguration."
|
||||
publishedAt: 2024-04-11
|
||||
order: 3
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS ist als modulare Plattform aufgebaut. Jedes Funktionsmodul kann unabhängig aktiviert oder deaktiviert werden.
|
||||
|
||||
Learn how the codebase is organized and where to find things.
|
||||
## Modulstruktur
|
||||
|
||||
## Monorepo Overview
|
||||
Die Plattform gliedert sich in folgende Bereiche:
|
||||
|
||||
This project uses Turborepo to manage a monorepo with multiple apps and packages.
|
||||
### Kernmodule
|
||||
|
||||
```
|
||||
project-root/
|
||||
├── apps/ # Applications
|
||||
│ ├── web/ # Main Next.js app
|
||||
│ ├── e2e/ # Playwright E2E tests
|
||||
│ └── dev-tool/ # Development utilities
|
||||
├── packages/ # Shared packages
|
||||
│ ├── features/ # Feature packages
|
||||
│ ├── ui/ # UI components
|
||||
│ ├── supabase/ # Supabase utilities
|
||||
│ └── billing/ # Billing integrations
|
||||
├── tooling/ # Development tools
|
||||
├── supabase/ # Database schema & migrations
|
||||
└── docs/ # Documentation
|
||||
```
|
||||
Diese Module bilden das Fundament der Vereinsverwaltung:
|
||||
|
||||
## Main Application (`apps/web`)
|
||||
- **Mitgliederverwaltung** — Stammdaten, Abteilungen, Mandate
|
||||
- **Finanzen** — Beiträge, SEPA, Rechnungen
|
||||
- **Benutzer- und Rechteverwaltung** — Rollen, Zugriffsrechte
|
||||
|
||||
The primary Next.js application:
|
||||
### Erweiterte Module
|
||||
|
||||
```
|
||||
apps/web/
|
||||
├── app/ # Next.js App Router
|
||||
│ ├── (marketing)/ # Public pages
|
||||
│ ├── (auth)/ # Authentication
|
||||
│ ├── home/ # Main application
|
||||
│ │ ├── (user)/ # Personal account
|
||||
│ │ └── [account]/ # Team accounts
|
||||
│ ├── admin/ # Admin panel
|
||||
│ └── api/ # API routes
|
||||
├── components/ # Shared components
|
||||
├── config/ # Configuration files
|
||||
├── lib/ # Utility functions
|
||||
├── public/ # Static assets
|
||||
└── supabase/ # Supabase setup
|
||||
```
|
||||
Diese Module erweitern die Plattform um spezifische Funktionen:
|
||||
|
||||
## Route Structure
|
||||
- **Kursverwaltung** — Kursplanung mit Dozenten und Teilnehmern
|
||||
- **Veranstaltungen** — Eventmanagement mit Registrierungen
|
||||
- **Raumbuchungen** — Ressourcenverwaltung und Kalender
|
||||
- **Newsletter** — E-Mail-Kommunikation
|
||||
- **Dokumente** — Vorlagen und Seriendruckfunktionen
|
||||
- **Site-Builder** — Vereinswebsite
|
||||
|
||||
### Marketing Routes (`(marketing)`)
|
||||
### Spezialmodule
|
||||
|
||||
Public-facing pages:
|
||||
Module für spezifische Vereinstypen:
|
||||
|
||||
```
|
||||
app/(marketing)/
|
||||
├── page.tsx # Landing page
|
||||
├── pricing/ # Pricing page
|
||||
├── blog/ # Blog
|
||||
└── docs/ # Documentation
|
||||
```
|
||||
- **Fischereiverwaltung** — Gewässer, Besatz, Fangbücher, Erlaubnisscheine
|
||||
- **Sitzungsprotokolle** — Protokolle, Beschlüsse, Aufgaben
|
||||
- **Verbandsverwaltung** — Hierarchien, Unterglieder, vereinsübergreifende Verwaltung
|
||||
|
||||
### Auth Routes (`(auth)`)
|
||||
### Individuelle Module
|
||||
|
||||
Authentication pages:
|
||||
Mit dem Modul-Baukasten können Sie eigene Datenmodule erstellen — ohne Programmierung. Definieren Sie Felder, Formulare und Ansichten für beliebige Vereinsdaten.
|
||||
|
||||
```
|
||||
app/(auth)/
|
||||
├── sign-in/
|
||||
├── sign-up/
|
||||
├── password-reset/
|
||||
└── verify/
|
||||
```
|
||||
## Einstellungen
|
||||
|
||||
### Application Routes (`home`)
|
||||
Unter **Einstellungen** konfigurieren Sie:
|
||||
|
||||
Main application:
|
||||
|
||||
```
|
||||
app/home/
|
||||
├── (user)/ # Personal account context
|
||||
│ ├── page.tsx # Personal dashboard
|
||||
│ ├── settings/ # User settings
|
||||
│ └── projects/ # Personal projects
|
||||
└── [account]/ # Team account context
|
||||
├── page.tsx # Team dashboard
|
||||
├── settings/ # Team settings
|
||||
├── projects/ # Team projects
|
||||
└── members/ # Team members
|
||||
```
|
||||
|
||||
## Packages Structure
|
||||
|
||||
### Feature Packages (`packages/features/`)
|
||||
|
||||
Modular features:
|
||||
|
||||
```
|
||||
packages/features/
|
||||
├── accounts/ # Account management
|
||||
├── auth/ # Authentication
|
||||
├── team-accounts/ # Team features
|
||||
├── billing/ # Billing & subscriptions
|
||||
├── admin/ # Admin features
|
||||
└── notifications/ # Notification system
|
||||
```
|
||||
|
||||
### UI Package (`packages/ui/`)
|
||||
|
||||
Shared UI components:
|
||||
|
||||
```
|
||||
packages/ui/
|
||||
└── src/
|
||||
├── components/ # Shadcn UI components
|
||||
│ ├── button.tsx
|
||||
│ ├── input.tsx
|
||||
│ ├── dialog.tsx
|
||||
│ └── ...
|
||||
└── utils/ # UI utilities
|
||||
```
|
||||
|
||||
### Supabase Package (`packages/supabase/`)
|
||||
|
||||
Database utilities:
|
||||
|
||||
```
|
||||
packages/supabase/
|
||||
├── schema/ # Declarative schemas
|
||||
│ ├── accounts.schema.ts
|
||||
│ ├── auth.schema.ts
|
||||
│ └── ...
|
||||
├── src/
|
||||
│ ├── clients/ # Supabase clients
|
||||
│ ├── hooks/ # React hooks
|
||||
│ └── middleware/ # Auth middleware
|
||||
└── migrations/ # SQL migrations
|
||||
```
|
||||
|
||||
## Configuration Files
|
||||
|
||||
### Root Level
|
||||
|
||||
```
|
||||
project-root/
|
||||
├── package.json # Root package.json
|
||||
├── turbo.json # Turborepo config
|
||||
├── pnpm-workspace.yaml # PNPM workspace
|
||||
└── tsconfig.json # Base TypeScript config
|
||||
```
|
||||
|
||||
### Application Level
|
||||
|
||||
```
|
||||
apps/web/
|
||||
├── next.config.js # Next.js configuration
|
||||
├── tailwind.config.ts # Tailwind CSS
|
||||
├── tsconfig.json # TypeScript config
|
||||
└── .env.local # Environment variables
|
||||
```
|
||||
|
||||
### Feature Configuration
|
||||
|
||||
```
|
||||
apps/web/config/
|
||||
├── paths.config.ts # Route paths
|
||||
├── billing.config.ts # Billing settings
|
||||
├── feature-flags.config.ts # Feature flags
|
||||
├── personal-account-navigation.config.tsx
|
||||
└── team-account-navigation.config.tsx
|
||||
```
|
||||
|
||||
## Naming Conventions
|
||||
|
||||
### Files
|
||||
|
||||
- **Pages**: `page.tsx` (Next.js convention)
|
||||
- **Layouts**: `layout.tsx`
|
||||
- **Components**: `kebab-case.tsx`
|
||||
- **Utilities**: `kebab-case.ts`
|
||||
- **Types**: `types.ts` or `component-name.types.ts`
|
||||
|
||||
### Directories
|
||||
|
||||
- **Route segments**: `[param]` for dynamic
|
||||
- **Route groups**: `(group)` for organization
|
||||
- **Private folders**: `_components`, `_lib`
|
||||
- **Parallel routes**: `@folder`
|
||||
|
||||
### Code Organization
|
||||
|
||||
```
|
||||
feature/
|
||||
├── page.tsx # Route page
|
||||
├── layout.tsx # Route layout
|
||||
├── loading.tsx # Loading state
|
||||
├── error.tsx # Error boundary
|
||||
├── _components/ # Private components
|
||||
│ ├── feature-list.tsx
|
||||
│ └── feature-form.tsx
|
||||
└── _lib/ # Private utilities
|
||||
├── server/ # Server-side code
|
||||
│ ├── loaders.ts
|
||||
│ └── actions.ts
|
||||
└── schemas/ # Validation schemas
|
||||
└── feature.schema.ts
|
||||
```
|
||||
|
||||
## Import Paths
|
||||
|
||||
Use TypeScript path aliases:
|
||||
|
||||
```typescript
|
||||
// Absolute imports from packages
|
||||
import { Button } from '@kit/ui/button';
|
||||
import { createClient } from '@kit/supabase/server-client';
|
||||
|
||||
// Relative imports within app
|
||||
import { FeatureList } from './_components/feature-list';
|
||||
import { loadData } from './_lib/server/loaders';
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Keep route-specific code private** - Use `_components` and `_lib`
|
||||
2. **Share reusable code** - Extract to packages
|
||||
3. **Collocate related files** - Keep files near where they're used
|
||||
4. **Use consistent naming** - Follow established patterns
|
||||
5. **Organize by feature** - Not by file type
|
||||
|
||||
## Finding Your Way
|
||||
|
||||
| Looking for... | Location |
|
||||
|----------------|----------|
|
||||
| UI Components | `packages/ui/src/components/` |
|
||||
| Database Schema | `packages/supabase/schema/` |
|
||||
| API Routes | `apps/web/app/api/` |
|
||||
| Auth Logic | `packages/features/auth/` |
|
||||
| Billing Code | `packages/features/billing/` |
|
||||
| Team Features | `packages/features/team-accounts/` |
|
||||
| Config Files | `apps/web/config/` |
|
||||
| Types | `*.types.ts` files throughout |
|
||||
- Vereinsstammdaten und Logo
|
||||
- Benutzer und Rollen
|
||||
- Modulaktivierung
|
||||
- E-Mail-Einstellungen
|
||||
- SEPA-Konfiguration
|
||||
|
||||
@@ -1,133 +1,59 @@
|
||||
---
|
||||
title: "Quick Start"
|
||||
description: "Get your application running in minutes with this quick start guide."
|
||||
title: "Schnellstart"
|
||||
description: "In wenigen Schritten mit MYeasyCMS loslegen — Testzugang einrichten, Module aktivieren und die erste Mitgliederliste importieren."
|
||||
publishedAt: 2024-04-11
|
||||
order: 2
|
||||
order: 1
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
Dieser Schnellstart-Guide führt Sie durch die ersten Schritte mit MYeasyCMS.
|
||||
|
||||
Get your development environment up and running quickly.
|
||||
## 1. Testzugang anfordern
|
||||
|
||||
## Prerequisites
|
||||
Fordern Sie einen kostenlosen Testzugang an. Das Team von Com.BISS richtet Ihren Vereins-Account ein und gibt Ihnen eine persönliche Einführung.
|
||||
|
||||
Before you begin, ensure you have:
|
||||
- **Node.js** 18.x or higher
|
||||
- **pnpm** 8.x or higher
|
||||
- **Git** for version control
|
||||
- A **Supabase** account (free tier works great)
|
||||
- **Online:** Über das Kontaktformular auf der Website
|
||||
- **Telefon:** 09451 9499-09
|
||||
- **E-Mail:** info@combiss.de
|
||||
|
||||
## Step 1: Clone the Repository
|
||||
## 2. Anmelden
|
||||
|
||||
```bash
|
||||
git clone https://github.com/yourorg/yourapp.git
|
||||
cd yourapp
|
||||
```
|
||||
Nach der Einrichtung erhalten Sie Ihre Zugangsdaten per E-Mail. Melden Sie sich unter der bereitgestellten URL an. Beim ersten Login werden Sie aufgefordert, Ihr Passwort zu ändern.
|
||||
|
||||
## Step 2: Install Dependencies
|
||||
## 3. Module aktivieren
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
Unter **Einstellungen → Module** sehen Sie alle verfügbaren Module. Aktivieren Sie die Module, die Ihr Verein benötigt:
|
||||
|
||||
This will install all required dependencies across the monorepo.
|
||||
- **Mitgliederverwaltung** — Fast immer der erste Schritt
|
||||
- **Finanzen & SEPA** — Wenn Sie Beiträge per Lastschrift einziehen
|
||||
- **Kursverwaltung** — Für Vereine mit Kursangebot
|
||||
- **Veranstaltungen** — Für Eventplanung
|
||||
|
||||
## Step 3: Set Up Environment Variables
|
||||
Nicht benötigte Module können jederzeit aktiviert oder deaktiviert werden.
|
||||
|
||||
Copy the example environment file:
|
||||
## 4. Mitglieder importieren
|
||||
|
||||
```bash
|
||||
cp apps/web/.env.example apps/web/.env.local
|
||||
```
|
||||
Unter **Mitglieder → Import** können Sie bestehende Mitgliederlisten hochladen:
|
||||
|
||||
Update the following variables:
|
||||
1. Laden Sie die Importvorlage als Excel-Datei herunter
|
||||
2. Tragen Sie Ihre Mitgliederdaten in die Vorlage ein
|
||||
3. Laden Sie die ausgefüllte Datei hoch
|
||||
4. Prüfen Sie die Zuordnung der Spalten
|
||||
5. Starten Sie den Import
|
||||
|
||||
```bash
|
||||
# Supabase Configuration
|
||||
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
|
||||
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here
|
||||
Das System zeigt Ihnen eine Vorschau und weist auf mögliche Probleme hin (fehlende Pflichtfelder, doppelte Einträge).
|
||||
|
||||
# Application
|
||||
NEXT_PUBLIC_SITE_URL=http://localhost:3000
|
||||
```
|
||||
## 5. Team einladen
|
||||
|
||||
## Step 4: Start Supabase
|
||||
Unter **Einstellungen → Mitarbeiter** können Sie weitere Benutzer einladen. Vergeben Sie Rollen, um den Zugriff zu steuern:
|
||||
|
||||
Start your local Supabase instance:
|
||||
- **Administrator** — Vollzugriff auf alle Module und Einstellungen
|
||||
- **Kassenwart** — Zugriff auf Finanzen, Beiträge und Mitgliederdaten
|
||||
- **Kursleiter** — Zugriff auf Kursverwaltung und Teilnehmer
|
||||
- **Schriftführer** — Zugriff auf Protokolle und Dokumente
|
||||
|
||||
```bash
|
||||
pnpm supabase:web:start
|
||||
```
|
||||
## Nächste Schritte
|
||||
|
||||
This will:
|
||||
- Start PostgreSQL database
|
||||
- Start Supabase Studio (localhost:54323)
|
||||
- Apply all migrations
|
||||
- Seed initial data
|
||||
|
||||
## Step 5: Start Development Server
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Your application will be available at:
|
||||
- **App**: http://localhost:3000
|
||||
- **Supabase Studio**: http://localhost:54323
|
||||
- **Email Testing**: http://localhost:54324
|
||||
|
||||
## Step 6: Create Your First User
|
||||
|
||||
1. Navigate to http://localhost:3000/auth/sign-up
|
||||
2. Enter your email and password
|
||||
3. Check http://localhost:54324 for the confirmation email
|
||||
4. Click the confirmation link
|
||||
5. You're ready to go!
|
||||
|
||||
## Next Steps
|
||||
|
||||
Now that your app is running:
|
||||
|
||||
1. **Explore the Dashboard** - Check out the main features
|
||||
2. **Review the Code** - Familiarize yourself with the structure
|
||||
3. **Read the Docs** - Learn about key concepts
|
||||
4. **Build Your Feature** - Start customizing
|
||||
|
||||
## Common Issues
|
||||
|
||||
### Port Already in Use
|
||||
|
||||
If port 3000 is already in use:
|
||||
|
||||
```bash
|
||||
# Find and kill the process
|
||||
lsof -i :3000
|
||||
kill -9 <PID>
|
||||
```
|
||||
|
||||
### Supabase Won't Start
|
||||
|
||||
Try resetting Supabase:
|
||||
|
||||
```bash
|
||||
pnpm supabase:web:stop
|
||||
docker system prune -a # Clean Docker
|
||||
pnpm supabase:web:start
|
||||
```
|
||||
|
||||
### Database Connection Error
|
||||
|
||||
Ensure Docker is running and restart Supabase:
|
||||
|
||||
```bash
|
||||
docker ps # Check Docker is running
|
||||
pnpm supabase:web:reset
|
||||
```
|
||||
|
||||
## What's Next?
|
||||
|
||||
- Learn about the [project structure](/docs/getting-started/project-structure)
|
||||
- Understand [configuration options](/docs/getting-started/configuration)
|
||||
- Follow [best practices](/docs/development/workflow)
|
||||
- [Module konfigurieren](/docs/getting-started/configuration) — Passen Sie die Module an Ihren Verein an
|
||||
- [Beiträge einrichten](/docs/features/features) — SEPA-Mandate und Beitragskategorien definieren
|
||||
- [Website erstellen](/docs/features/features) — Vereinswebsite mit dem Site-Builder aufbauen
|
||||
|
||||
Reference in New Issue
Block a user