chore: initial scaffold (Whitelabel-Fork von Pfandsystem)
- Source-Copy von /root/entwicklung/pfandsystem - docker-compose.yml umgeschrieben: pfandsystem-demo-* Container, Ports 3308/8083/3003 (alle localhost) - Traefik-Label fuer pfandsystem.dockly.de - Erweitertes Multi-Tenant-Schema (tenants, tenant_id auf allen Tabellen) - Neue Tabellen: kunden_bilder, geraete - Neue Spalten: kunden.anlieferungshinweis, kunden.lieferzeit_bis - Rollen: superadmin, admin, user, fahrer - .env.example + README Code-Refactor (Tailwind, Multi-Tenant-Middleware, Erweiterungen) folgt.
This commit is contained in:
christian
97
src/components/Auth/Login.jsx
Normal file
97
src/components/Auth/Login.jsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import { useState } from 'react';
|
||||
import { api } from '../../api/client';
|
||||
|
||||
export default function Login({ onLogin }) {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setMessage('');
|
||||
|
||||
try {
|
||||
const data = await api.login(email, password);
|
||||
setMessage('Login erfolgreich!');
|
||||
if (onLogin) {
|
||||
onLogin(data.user);
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage(error.message || 'Login fehlgeschlagen');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
maxWidth: 380,
|
||||
margin: '64px auto',
|
||||
background: '#fff',
|
||||
borderRadius: 22,
|
||||
boxShadow: '0 4px 22px #1976d222',
|
||||
padding: 36,
|
||||
fontFamily: 'DM Sans, Work Sans, Arial, sans-serif',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center',
|
||||
}}>
|
||||
<h1 style={{
|
||||
fontFamily: 'DM Sans, Work Sans, Arial, sans-serif',
|
||||
fontWeight: 700, fontSize: 32, margin: '0 0 18px 0', color: '#1976d2', letterSpacing: 0.5,
|
||||
textAlign: 'center', textShadow: '0 2px 8px #0001'
|
||||
}}>
|
||||
Pfandsystem
|
||||
</h1>
|
||||
<h2 style={{ textAlign: 'center', marginBottom: 24, fontWeight: 600, color: '#222', fontSize: 22, letterSpacing: 0.1 }}>Login</h2>
|
||||
<form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: 18, width: '100%' }}>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="E-Mail"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
required
|
||||
style={{
|
||||
fontSize: 18,
|
||||
padding: '14px 14px',
|
||||
borderRadius: 12,
|
||||
border: '1.5px solid #dbeafe',
|
||||
background: '#f6f7fb',
|
||||
outline: 'none',
|
||||
marginBottom: 2
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Passwort"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
required
|
||||
style={{
|
||||
fontSize: 18,
|
||||
padding: '14px 14px',
|
||||
borderRadius: 12,
|
||||
border: '1.5px solid #dbeafe',
|
||||
background: '#f6f7fb',
|
||||
outline: 'none',
|
||||
marginBottom: 2
|
||||
}}
|
||||
/>
|
||||
<button type="submit" disabled={loading} style={{
|
||||
marginTop: 8,
|
||||
background: loading ? '#ccc' : '#1976d2',
|
||||
color: '#fff',
|
||||
fontWeight: 700,
|
||||
fontSize: 18,
|
||||
border: 'none',
|
||||
borderRadius: 12,
|
||||
padding: '13px 0',
|
||||
boxShadow: '0 2px 10px #1976d222',
|
||||
cursor: loading ? 'not-allowed' : 'pointer',
|
||||
transition: 'background 0.18s',
|
||||
}}>{loading ? 'Wird geladen...' : 'Login'}</button>
|
||||
</form>
|
||||
{message && <div style={{ color: '#1976d2', marginTop: 18, fontWeight: 500 }}>{message}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/components/Auth/Logout.jsx
Normal file
27
src/components/Auth/Logout.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { api } from '../../api/client';
|
||||
|
||||
export default function Logout({ onLogout }) {
|
||||
const handleLogout = async () => {
|
||||
api.logout();
|
||||
if (onLogout) {
|
||||
onLogout();
|
||||
}
|
||||
// Seite neu laden um sicherzustellen dass der User ausgeloggt ist
|
||||
window.location.reload();
|
||||
};
|
||||
return (
|
||||
<button onClick={handleLogout} style={{
|
||||
margin: 8,
|
||||
padding: '10px 20px',
|
||||
background: '#d32f2f',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600,
|
||||
fontSize: 14
|
||||
}}>
|
||||
Logout
|
||||
</button>
|
||||
);
|
||||
}
|
||||
132
src/components/Auth/PasswordChange.jsx
Normal file
132
src/components/Auth/PasswordChange.jsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { useState } from 'react';
|
||||
import { api } from '../../api/client';
|
||||
|
||||
export default function PasswordChange() {
|
||||
const [form, setForm] = useState({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
});
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleChange = (e) => {
|
||||
setForm(f => ({ ...f, [e.target.name]: e.target.value }));
|
||||
setError('');
|
||||
setSuccess('');
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setSuccess('');
|
||||
|
||||
// Validierung
|
||||
if (!form.currentPassword || !form.newPassword || !form.confirmPassword) {
|
||||
setError('Bitte alle Felder ausfüllen');
|
||||
return;
|
||||
}
|
||||
|
||||
if (form.newPassword.length < 6) {
|
||||
setError('Neues Passwort muss mindestens 6 Zeichen lang sein');
|
||||
return;
|
||||
}
|
||||
|
||||
if (form.newPassword !== form.confirmPassword) {
|
||||
setError('Passwörter stimmen nicht überein');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await api.changePassword(form.currentPassword, form.newPassword);
|
||||
setSuccess('Passwort erfolgreich geändert!');
|
||||
setForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
|
||||
} catch (err) {
|
||||
setError(err.message || 'Fehler beim Ändern des Passworts');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ marginTop: 24, padding: 20, background: '#f5f5f5', borderRadius: 8 }}>
|
||||
<h3 style={{ marginBottom: 16, fontSize: 18, fontWeight: 600 }}>Passwort ändern</h3>
|
||||
|
||||
{error && (
|
||||
<div style={{ padding: 12, marginBottom: 12, background: '#ffebee', color: '#c62828', borderRadius: 6, fontSize: 14 }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div style={{ padding: 12, marginBottom: 12, background: '#e8f5e9', color: '#2e7d32', borderRadius: 6, fontSize: 14 }}>
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: 'block', marginBottom: 4, fontSize: 14, fontWeight: 500 }}>
|
||||
Aktuelles Passwort:
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="currentPassword"
|
||||
value={form.currentPassword}
|
||||
onChange={handleChange}
|
||||
style={{ width: '100%', padding: 10, border: '1px solid #ddd', borderRadius: 6, fontSize: 14 }}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: 'block', marginBottom: 4, fontSize: 14, fontWeight: 500 }}>
|
||||
Neues Passwort:
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="newPassword"
|
||||
value={form.newPassword}
|
||||
onChange={handleChange}
|
||||
style={{ width: '100%', padding: 10, border: '1px solid #ddd', borderRadius: 6, fontSize: 14 }}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label style={{ display: 'block', marginBottom: 4, fontSize: 14, fontWeight: 500 }}>
|
||||
Passwort bestätigen:
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
value={form.confirmPassword}
|
||||
onChange={handleChange}
|
||||
style={{ width: '100%', padding: 10, border: '1px solid #ddd', borderRadius: 6, fontSize: 14 }}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: 12,
|
||||
background: loading ? '#ccc' : '#1976d2',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: 6,
|
||||
fontSize: 15,
|
||||
fontWeight: 600,
|
||||
cursor: loading ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
>
|
||||
{loading ? 'Wird geändert...' : 'Passwort ändern'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user