71 lines
3.2 KiB
TypeScript
71 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { useActionState, useState } from 'react'
|
|
import { changePasswordAndDisableMustChange } from '../actions'
|
|
|
|
export function ForcePasswordChange({ slug }: { slug: string }) {
|
|
const [state, action, isPending] = useActionState(changePasswordAndDisableMustChange, { success: false, error: '' })
|
|
|
|
return (
|
|
<div className="bg-white border rounded-xl p-8 max-w-md w-full shadow-sm">
|
|
<div className="mb-6">
|
|
<h1 className="text-xl font-bold text-gray-900 mb-2">Passwort ändern</h1>
|
|
<p className="text-gray-500 text-sm">
|
|
Dies ist Ihre erste Anmeldung mit den vom Administrator vergebenen Zugangsdaten.
|
|
Bitte vergeben Sie ein neues, sicheres Passwort.
|
|
</p>
|
|
</div>
|
|
|
|
<form action={action} className="space-y-4">
|
|
<input type="hidden" name="slug" value={slug} />
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Aktuelles (temporäres) Passwort</label>
|
|
<input
|
|
name="currentPassword"
|
|
type="password"
|
|
required
|
|
placeholder="••••••••"
|
|
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-500 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Neues Passwort</label>
|
|
<input
|
|
name="newPassword"
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
placeholder="••••••••"
|
|
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-500 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Passwort wiederholen</label>
|
|
<input
|
|
name="confirmPassword"
|
|
type="password"
|
|
required
|
|
minLength={8}
|
|
placeholder="••••••••"
|
|
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-500 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
|
|
{state?.error && (
|
|
<p className="text-xs text-red-600 bg-red-50 p-2 rounded">{state?.error}</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isPending}
|
|
className="w-full bg-gray-900 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-gray-800 disabled:opacity-50 transition-all shadow-sm"
|
|
>
|
|
{isPending ? 'Speichern...' : 'Passwort aktualisieren'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|