Add functional forgot-password flow and login modal UX updates

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-02-24
+- Added login modal actions: `Cancel` button and accent-styled, right-aligned `Sign in` button.
+- Added functional `Forgot password?` flow with dedicated SPA route/page at `/reset-password`.
+- Implemented reset-link request UI wired to `POST /api/forgot-password`.
+- Implemented token-based new-password submission (`?token=...&email=...`) wired to `POST /api/reset-password`.
+- Updated reset flow UX to return to `/login` after successful reset-link request and after successful password update.
+- Added English and German translations for password reset screens/messages.
+
 ## 2026-02-18
 - Added CLI default PHP version detection to system status (`php_default_version`) using the CLI `php` binary.
 - Updated ACP System -> CLI to show the CLI default PHP path/version in the panel header with sufficiency indicator and warning tooltip.

resources/js/App.jsx

@@ -7,6 +7,7 @@ import ForumView from './pages/ForumView'
 import ThreadView from './pages/ThreadView'
 import Login from './pages/Login'
 import Register from './pages/Register'
+import ResetPassword from './pages/ResetPassword'
 import { Acp } from './pages/Acp'
 import BoardIndex from './pages/BoardIndex'
 import Ucp from './pages/Ucp'
@@ -466,6 +467,7 @@ function AppShell() {
                                 <Route path="/forum/:id" element={<ForumView />} />
                                 <Route path="/thread/:id" element={<ThreadView />} />
                                 <Route path="/login" element={<Login />} />
+                                <Route path="/reset-password" element={<ResetPassword />} />
                                 <Route path="/register" element={<Register />} />
                                 <Route path="/profile/:id" element={<Profile />} />
                                 <Route path="/acp/*" element={<Acp isAdmin={isAdmin} />} />

resources/js/api/client.js

@@ -62,6 +62,20 @@ export async function registerUser({ email, username, plainPassword }) {
     })
 }
 
+export async function requestPasswordReset(email) {
+    return apiFetch('/forgot-password', {
+        method: 'POST',
+        body: JSON.stringify({ email }),
+    })
+}
+
+export async function resetPassword({ token, email, password, password_confirmation }) {
+    return apiFetch('/reset-password', {
+        method: 'POST',
+        body: JSON.stringify({ token, email, password, password_confirmation }),
+    })
+}
+
 export async function logoutUser() {
     return apiFetch('/logout', {
         method: 'POST',

resources/js/pages/Login.jsx

@@ -57,11 +57,11 @@ export default function Login() {
                                 <Link to="/reset-password">{t('auth.forgot_password')}</Link>
                             </div>
                         </Form.Group>
-                        <div className="d-flex gap-2">
+                        <div className="d-flex w-100 align-items-center gap-2">
                             <Button as={Link} to="/" type="button" variant="outline-secondary" disabled={loading}>
                                 {t('acp.cancel')}
                             </Button>
-                            <Button type="submit" variant="dark" disabled={loading}>
+                            <Button type="submit" className="ms-auto bb-accent-button" disabled={loading}>
                                 {loading ? t('form.signing_in') : t('form.sign_in')}
                             </Button>
                         </div>

resources/js/pages/ResetPassword.jsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react'
+import { Button, Card, Container, Form } from 'react-bootstrap'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { requestPasswordReset, resetPassword } from '../api/client'
+
+export default function ResetPassword() {
+    const { t } = useTranslation()
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+    const token = searchParams.get('token') || ''
+    const emailFromLink = searchParams.get('email') || ''
+    const isResetFlow = token.length > 0
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+    const [passwordConfirmation, setPasswordConfirmation] = useState('')
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        if (emailFromLink) {
+            setEmail(emailFromLink)
+        }
+    }, [emailFromLink])
+
+    const handleSubmit = async (event) => {
+        event.preventDefault()
+        setError('')
+        setLoading(true)
+        try {
+            if (isResetFlow) {
+                await resetPassword({
+                    token,
+                    email,
+                    password,
+                    password_confirmation: passwordConfirmation,
+                })
+                navigate('/login')
+            } else {
+                await requestPasswordReset(email)
+                navigate('/login')
+            }
+        } catch (err) {
+            setError(err.message)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <Container fluid className="py-5">
+            <Card className="bb-card mx-auto" style={{ maxWidth: '480px' }}>
+                <Card.Body>
+                    <Card.Title className="mb-3">
+                        {isResetFlow ? t('auth.reset_password_title') : t('auth.forgot_password')}
+                    </Card.Title>
+                    <Card.Text className="bb-muted">
+                        {isResetFlow ? t('auth.reset_password_hint') : t('auth.forgot_password_hint')}
+                    </Card.Text>
+                    {error && <p className="text-danger">{error}</p>}
+                    <Form onSubmit={handleSubmit}>
+                        <Form.Group className="mb-4">
+                            <Form.Label>{t('form.email')}</Form.Label>
+                            <Form.Control
+                                type="email"
+                                value={email}
+                                onChange={(event) => setEmail(event.target.value)}
+                                placeholder={t('auth.reset_email_placeholder')}
+                                required
+                            />
+                        </Form.Group>
+                        {isResetFlow && (
+                            <>
+                                <Form.Group className="mb-3">
+                                    <Form.Label>{t('form.password')}</Form.Label>
+                                    <Form.Control
+                                        type="password"
+                                        value={password}
+                                        onChange={(event) => setPassword(event.target.value)}
+                                        required
+                                    />
+                                </Form.Group>
+                                <Form.Group className="mb-4">
+                                    <Form.Label>{t('auth.confirm_password')}</Form.Label>
+                                    <Form.Control
+                                        type="password"
+                                        value={passwordConfirmation}
+                                        onChange={(event) => setPasswordConfirmation(event.target.value)}
+                                        required
+                                    />
+                                </Form.Group>
+                            </>
+                        )}
+                        <div className="d-flex w-100 align-items-center gap-2">
+                            <Button as={Link} to="/login" type="button" variant="outline-secondary" disabled={loading}>
+                                {t('acp.cancel')}
+                            </Button>
+                            <Button type="submit" className="ms-auto bb-accent-button" disabled={loading}>
+                                {loading
+                                    ? isResetFlow
+                                        ? t('auth.resetting_password')
+                                        : t('auth.sending_reset_link')
+                                    : isResetFlow
+                                      ? t('auth.reset_password_submit')
+                                      : t('auth.send_reset_link')}
+                            </Button>
+                        </div>
+                    </Form>
+                </Card.Body>
+            </Card>
+        </Container>
+    )
+}

resources/lang/de.json

@@ -82,6 +82,17 @@
   "auth.login_identifier": "E-Mail oder Benutzername",
   "auth.login_placeholder": "name@example.com oder benutzername",
   "auth.forgot_password": "Passwort vergessen?",
+  "auth.forgot_password_hint": "Gib die E-Mail-Adresse deines Kontos ein, dann senden wir dir einen Link zum Zuruecksetzen.",
+  "auth.reset_email_placeholder": "name@example.com",
+  "auth.send_reset_link": "Reset-Link senden",
+  "auth.sending_reset_link": "Wird gesendet...",
+  "auth.reset_link_sent": "Falls ein Konto existiert, wurde ein Passwort-Reset-Link gesendet.",
+  "auth.reset_password_title": "Passwort zuruecksetzen",
+  "auth.reset_password_hint": "Gib deine E-Mail-Adresse ein und waehle ein neues Passwort.",
+  "auth.reset_password_submit": "Passwort zuruecksetzen",
+  "auth.resetting_password": "Wird zurueckgesetzt...",
+  "auth.password_reset_success": "Passwort erfolgreich zurueckgesetzt. Du kannst dich jetzt anmelden.",
+  "auth.confirm_password": "Passwort bestaetigen",
   "auth.register_hint": "Registriere dich mit E-Mail und einem eindeutigen Benutzernamen.",
   "auth.verify_notice": "Bitte bestätige deine E-Mail-Adresse, bevor du dich anmeldest.",
   "auth.register_title": "Konto erstellen",

resources/lang/en.json

@@ -82,6 +82,17 @@
   "auth.login_identifier": "Email or username",
   "auth.login_placeholder": "name@example.com or username",
   "auth.forgot_password": "Forgot password?",
+  "auth.forgot_password_hint": "Enter your account email and we will send you a password reset link.",
+  "auth.reset_email_placeholder": "name@example.com",
+  "auth.send_reset_link": "Send reset link",
+  "auth.sending_reset_link": "Sending...",
+  "auth.reset_link_sent": "If an account exists, a password reset link has been sent.",
+  "auth.reset_password_title": "Reset password",
+  "auth.reset_password_hint": "Enter your email and choose a new password.",
+  "auth.reset_password_submit": "Reset password",
+  "auth.resetting_password": "Resetting...",
+  "auth.password_reset_success": "Password reset successful. You can now sign in.",
+  "auth.confirm_password": "Confirm password",
   "auth.register_hint": "Register with an email and a unique username.",
   "auth.verify_notice": "Check your email to verify your account before logging in.",
   "auth.register_title": "Create account",