Einmalpasswort-Flow für Portal-Credentials
Wenn Admin "Zugangsdaten versenden" klickt, ist das Passwort jetzt ein echtes Einmalpasswort: beim ersten erfolgreichen Portal-Login werden Hash + Encrypted-Feld sofort genullt und der Kunde wird zwangsweise auf eine "Neues Passwort vergeben"-Seite geleitet. Erst nach eigenem Passwort kommt er ins Portal. Schema: - Customer.portalPasswordMustChange: Boolean @default(false) Backend: - sendPortalCredentials setzt Flag = true + erweitertes Mail-Template mit Einmalpasswort-Warnung - customerLogin: bei Flag=true wird OTP konsumiert (Hash+Encrypted=null, portalLastLogin aktualisiert), Response enthält mustChangePassword=true in token-payload + user-objekt - setCustomerPortalPassword (manuelles Setzen) räumt Flag wieder auf - changeInitialPortalPassword: neue Service-Funktion + Endpoint POST /api/auth/change-initial-portal-password (authenticated, nur Portal-User), validiert Komplexität, setzt neuen Hash, löscht Encrypted, invalidiert Session via portalTokenInvalidatedAt Frontend: - User-Type erweitert um mustChangePassword - AuthContext.customerLogin gibt User zurück (für sofortige Routing- Entscheidung) - Login.tsx: redirect zu /change-initial-password wenn mustChangePassword - ProtectedRoute: zwingt eingeloggte User mit Flag immer zur Change-Seite - ChangeInitialPasswordGate: blockt User OHNE Flag vom Zugriff - ChangeInitialPassword: eigene Seite mit Live-Komplexitäts-Hint, Passwort-Wiederholung, automatischer Logout + Redirect nach Erfolg Live-verifiziert (10 Schritte): - Setzen → Send → DB-Flag=true → OTP-Login gibt mustChange=true und consumed Hash → Re-Login mit OTP fehlschlägt → Change schwach=400, komplex=200 → neues Passwort funktioniert → Session invalidated. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
+27
-1
@@ -8,6 +8,7 @@ import Layout from './components/layout/Layout';
|
||||
import Login from './pages/Login';
|
||||
import PasswordResetRequest from './pages/PasswordResetRequest';
|
||||
import PasswordResetConfirm from './pages/PasswordResetConfirm';
|
||||
import ChangeInitialPassword from './pages/ChangeInitialPassword';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import CustomerList from './pages/customers/CustomerList';
|
||||
import CustomerDetail from './pages/customers/CustomerDetail';
|
||||
@@ -49,7 +50,7 @@ import PortalProfile from './pages/portal/PortalProfile';
|
||||
import PortalMeters from './pages/portal/PortalMeters';
|
||||
|
||||
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated, isLoading } = useAuth();
|
||||
const { isAuthenticated, isLoading, user } = useAuth();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -63,9 +64,31 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
|
||||
// Force-Change-Password-Flow: nach Einmalpasswort-Login muss der Kunde
|
||||
// zwingend ein eigenes Passwort vergeben, bevor er irgendwohin sonst
|
||||
// navigieren darf.
|
||||
if (user?.mustChangePassword) {
|
||||
return <Navigate to="/change-initial-password" replace />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
function ChangeInitialPasswordGate() {
|
||||
const { isAuthenticated, isLoading, user } = useAuth();
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-gray-500">Laden...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (!isAuthenticated) return <Navigate to="/login" replace />;
|
||||
// Wer nicht im Einmalpasswort-Flow ist, hat hier nichts zu suchen.
|
||||
if (!user?.mustChangePassword) return <Navigate to="/" replace />;
|
||||
return <ChangeInitialPassword />;
|
||||
}
|
||||
|
||||
function PortalConsentGate({ children }: { children: React.ReactNode }) {
|
||||
const { isCustomerPortal } = useAuth();
|
||||
|
||||
@@ -153,6 +176,9 @@ function App() {
|
||||
<Route path="/password-reset/request" element={<PasswordResetRequest />} />
|
||||
<Route path="/password-reset" element={<PasswordResetConfirm />} />
|
||||
|
||||
{/* Einmalpasswort → eigenes Passwort vergeben (eingeloggt, eigene Gate-Logik) */}
|
||||
<Route path="/change-initial-password" element={<ChangeInitialPasswordGate />} />
|
||||
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
|
||||
@@ -8,7 +8,7 @@ interface AuthContextType {
|
||||
isLoading: boolean;
|
||||
isAuthenticated: boolean;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
customerLogin: (email: string, password: string) => Promise<void>;
|
||||
customerLogin: (email: string, password: string) => Promise<User>;
|
||||
logout: () => Promise<void>;
|
||||
hasPermission: (permission: string) => boolean;
|
||||
isCustomer: boolean;
|
||||
@@ -72,14 +72,14 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
}
|
||||
};
|
||||
|
||||
const customerLogin = async (email: string, password: string) => {
|
||||
const customerLogin = async (email: string, password: string): Promise<User> => {
|
||||
const res = await authApi.customerLogin(email, password);
|
||||
if (res.success && res.data) {
|
||||
setAccessToken(res.data.token);
|
||||
setUser(res.data.user);
|
||||
} else {
|
||||
throw new Error(res.error || 'Login fehlgeschlagen');
|
||||
return res.data.user;
|
||||
}
|
||||
throw new Error(res.error || 'Login fehlgeschlagen');
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { authApi } from '../services/api';
|
||||
import Button from '../components/ui/Button';
|
||||
import Input from '../components/ui/Input';
|
||||
import Card from '../components/ui/Card';
|
||||
|
||||
const MIN_LENGTH = 12;
|
||||
|
||||
function checkComplexity(pw: string) {
|
||||
return {
|
||||
length: pw.length >= MIN_LENGTH,
|
||||
upper: /[A-Z]/.test(pw),
|
||||
lower: /[a-z]/.test(pw),
|
||||
digit: /[0-9]/.test(pw),
|
||||
special: /[^A-Za-z0-9]/.test(pw),
|
||||
};
|
||||
}
|
||||
|
||||
function ComplexityHint({ pw }: { pw: string }) {
|
||||
const c = checkComplexity(pw);
|
||||
const items: [boolean, string][] = [
|
||||
[c.length, `Mindestens ${MIN_LENGTH} Zeichen`],
|
||||
[c.upper, 'Großbuchstabe'],
|
||||
[c.lower, 'Kleinbuchstabe'],
|
||||
[c.digit, 'Ziffer'],
|
||||
[c.special, 'Sonderzeichen'],
|
||||
];
|
||||
return (
|
||||
<ul className="text-xs mt-2 space-y-0.5">
|
||||
{items.map(([ok, label]) => (
|
||||
<li key={label} className={ok ? 'text-green-700' : 'text-gray-500'}>
|
||||
{ok ? '✓' : '○'} {label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ChangeInitialPassword() {
|
||||
const { logout, user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [repeat, setRepeat] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const c = checkComplexity(newPassword);
|
||||
const meetsComplexity = c.length && c.upper && c.lower && c.digit && c.special;
|
||||
const matches = newPassword.length > 0 && newPassword === repeat;
|
||||
const canSubmit = meetsComplexity && matches && !isSaving;
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
if (!canSubmit) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const res = await authApi.changeInitialPortalPassword(newPassword);
|
||||
if (!res.success) {
|
||||
throw new Error(res.error || 'Passwort konnte nicht geändert werden');
|
||||
}
|
||||
await logout();
|
||||
navigate('/login?changed=1', { replace: true });
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Fehler beim Setzen des Passworts');
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<div className="text-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Neues Passwort vergeben</h1>
|
||||
<p className="text-gray-600 mt-2 text-sm">
|
||||
Hallo {user?.firstName || 'Kunde'}, Sie haben sich mit einem Einmalpasswort
|
||||
angemeldet. Bitte vergeben Sie jetzt Ihr eigenes Passwort. Danach werden Sie
|
||||
ausgeloggt und können sich mit dem neuen Passwort anmelden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<Input
|
||||
label="Neues Passwort"
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
{newPassword.length > 0 && <ComplexityHint pw={newPassword} />}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
label="Passwort wiederholen"
|
||||
type="password"
|
||||
value={repeat}
|
||||
onChange={(e) => setRepeat(e.target.value)}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
{repeat.length > 0 && !matches && (
|
||||
<p className="text-xs text-red-600 mt-1">Passwörter stimmen nicht überein</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={!canSubmit}>
|
||||
{isSaving ? 'Speichere...' : 'Passwort setzen und ausloggen'}
|
||||
</Button>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,13 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { useNavigate, useSearchParams, Link } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import Button from '../components/ui/Button';
|
||||
import Input from '../components/ui/Input';
|
||||
import Card from '../components/ui/Card';
|
||||
|
||||
export default function Login() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const passwordChanged = searchParams.get('changed') === '1';
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
@@ -28,8 +30,13 @@ export default function Login() {
|
||||
}
|
||||
|
||||
try {
|
||||
await customerLogin(email, password);
|
||||
navigate('/');
|
||||
const portalUser = await customerLogin(email, password);
|
||||
// Einmalpasswort-Login → erzwungenes Passwort-Setzen vor Dashboard
|
||||
if (portalUser?.mustChangePassword) {
|
||||
navigate('/change-initial-password', { replace: true });
|
||||
} else {
|
||||
navigate('/');
|
||||
}
|
||||
} catch {
|
||||
// Beide fehlgeschlagen
|
||||
setError('Ungültige Anmeldedaten');
|
||||
@@ -45,6 +52,12 @@ export default function Login() {
|
||||
<p className="text-gray-600 mt-2">Melden Sie sich an</p>
|
||||
</div>
|
||||
|
||||
{passwordChanged && !error && (
|
||||
<div className="mb-4 p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm">
|
||||
Passwort wurde geändert. Bitte mit dem neuen Passwort anmelden.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
|
||||
{error}
|
||||
|
||||
@@ -127,6 +127,10 @@ export const authApi = {
|
||||
const res = await api.post<ApiResponse<void>>('/auth/logout');
|
||||
return res.data;
|
||||
},
|
||||
changeInitialPortalPassword: async (newPassword: string) => {
|
||||
const res = await api.post<ApiResponse<void>>('/auth/change-initial-portal-password', { newPassword });
|
||||
return res.data;
|
||||
},
|
||||
};
|
||||
|
||||
// Customers
|
||||
|
||||
@@ -7,6 +7,7 @@ export interface User {
|
||||
customerId?: number;
|
||||
roles?: Role[];
|
||||
isCustomerPortal?: boolean;
|
||||
mustChangePassword?: boolean;
|
||||
representedCustomers?: CustomerSummary[];
|
||||
whatsappNumber?: string;
|
||||
telegramUsername?: string;
|
||||
|
||||
Reference in New Issue
Block a user