mirror of
https://github.com/ceratic/project_vollidioten_website.git
synced 2026-05-14 00:16:47 +02:00
feat: Add DatabaseManager and LinkPlayer components, implement authentication and linking logic
- Created DatabaseManager component for managing database access via phpMyAdmin. - Developed LinkPlayer component to link Discord accounts with game characters, including user authentication and error handling. - Added mock data files for players, organizations, and projects to handle backend unavailability. - Implemented AuthService for managing user authentication and session checks. - Created DatabaseService to fetch and manage player, organization, and project data with fallback to mock data. - Added HTML page for handling authentication unavailability. - Developed a test script for validating Docker setup and required files.
This commit is contained in:
Lars Behrends
218
components/CreateProjectModal.tsx
Normal file
218
components/CreateProjectModal.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Project } from '../types';
|
||||
import { Icons } from './IconSet';
|
||||
|
||||
interface CreateProjectModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onCreate: (projectData: {
|
||||
title: string;
|
||||
description: string;
|
||||
category: Project['category'];
|
||||
}) => Promise<void>;
|
||||
linkedPlayerName?: string | null;
|
||||
}
|
||||
|
||||
const CreateProjectModal: React.FC<CreateProjectModalProps> = ({ isOpen, onClose, onCreate, linkedPlayerName }) => {
|
||||
const [title, setTitle] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [category, setCategory] = useState<Project['category']>('Enterprise');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const categories = [
|
||||
{ value: 'Enterprise', label: 'Unternehmen', description: 'Firmen, Läden, Dienstleistungen' },
|
||||
{ value: 'Story Arc', label: 'Story Arc', description: 'Rollenspiel-Handlung, Quest' },
|
||||
{ value: 'Faction', label: 'Fraktion', description: 'Gruppe, Gilde, Organisation' },
|
||||
{ value: 'Black Market', label: 'Schwarzmarkt', description: 'Illegale Geschäfte (Vorsicht!)' },
|
||||
];
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!title.trim() || !description.trim()) {
|
||||
setError('Titel und Beschreibung sind erforderlich');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
await onCreate({ title: title.trim(), description: description.trim(), category });
|
||||
onClose();
|
||||
// Reset form
|
||||
setTitle('');
|
||||
setDescription('');
|
||||
setCategory('Enterprise');
|
||||
} catch (err) {
|
||||
console.error('Error creating project:', err);
|
||||
setError('Fehler beim Erstellen des Projekts');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="bg-surface border border-border rounded-xl w-full max-w-2xl shadow-2xl flex flex-col max-h-[90vh]">
|
||||
<div className="p-4 border-b border-border flex justify-between items-center bg-surfaceHighlight/20">
|
||||
<h3 className="font-bold text-textMain flex items-center gap-2">
|
||||
<Icons.ShoppingBag className="w-5 h-5" />
|
||||
Neues Unternehmen erstellen
|
||||
</h3>
|
||||
<button onClick={onClose} className="text-textMuted hover:text-white transition-colors text-xl leading-none">×</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 flex-1 overflow-y-auto">
|
||||
<div className="space-y-6">
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-textMain mb-2">
|
||||
Name des Unternehmens *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="w-full bg-[#0b0b0d] border border-border rounded-lg p-3 text-sm text-gray-300 focus:border-accentInfo focus:outline-none"
|
||||
placeholder="z.B. DrKButz Architektur GmbH"
|
||||
required
|
||||
maxLength={100}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Category */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-textMain mb-3">
|
||||
Kategorie *
|
||||
</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{categories.map((cat) => (
|
||||
<label
|
||||
key={cat.value}
|
||||
className={`p-3 border rounded-lg cursor-pointer transition-all ${
|
||||
category === cat.value
|
||||
? 'border-accentInfo bg-accentInfo/10'
|
||||
: 'border-border hover:border-accentInfo/50'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="category"
|
||||
value={cat.value}
|
||||
checked={category === cat.value}
|
||||
onChange={(e) => setCategory(e.target.value as Project['category'])}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`w-4 h-4 rounded-full border-2 mt-0.5 ${
|
||||
category === cat.value
|
||||
? 'border-accentInfo bg-accentInfo'
|
||||
: 'border-textMuted'
|
||||
}`}>
|
||||
{category === cat.value && (
|
||||
<div className="w-full h-full rounded-full bg-white scale-50"></div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-textMain">{cat.label}</div>
|
||||
<div className="text-xs text-textMuted mt-1">{cat.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-textMain mb-2">
|
||||
Beschreibung *
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full h-32 bg-[#0b0b0d] border border-border rounded-lg p-3 text-sm text-gray-300 focus:border-accentInfo focus:outline-none resize-none"
|
||||
placeholder="Beschreiben Sie Ihr Unternehmen, seine Dienstleistungen und Ziele..."
|
||||
required
|
||||
maxLength={1000}
|
||||
/>
|
||||
<div className="text-xs text-textMuted mt-1">
|
||||
{description.length}/1000 Zeichen
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Linked Player Info */}
|
||||
{linkedPlayerName && (
|
||||
<div className="bg-green-500/10 border border-green-500/20 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Icons.Users className="w-5 h-5 text-green-400 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-green-400 mb-1">Projekt-Ersteller</h4>
|
||||
<p className="text-sm text-green-300">
|
||||
Dieses Unternehmen wird im Namen von <strong>{linkedPlayerName}</strong> erstellt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4">
|
||||
<p className="text-red-400 text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Info */}
|
||||
<div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Icons.Crown className="w-5 h-5 text-blue-400 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-blue-400 mb-1">Wichtige Hinweise</h4>
|
||||
<ul className="text-xs text-blue-300 space-y-1">
|
||||
<li>• Sie sind automatisch der Eigentümer und können das Unternehmen jederzeit bearbeiten</li>
|
||||
<li>• Das Unternehmen startet mit dem Status "aktiv"</li>
|
||||
<li>• Sie können später Mitarbeiter hinzufügen und einen Shop einrichten</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 mt-8 pt-6 border-t border-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-medium text-textMuted hover:text-white transition-colors"
|
||||
disabled={loading}
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !title.trim() || !description.trim()}
|
||||
className="px-6 py-2 text-sm font-medium bg-accentInfo hover:bg-accentInfo/90 text-white rounded transition-colors shadow-lg shadow-accentInfo/20 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
||||
Erstelle...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Icons.ShoppingBag className="w-4 h-4" />
|
||||
Unternehmen erstellen
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateProjectModal;
|
||||
Reference in New Issue
Block a user