Unify page layouts, compact headers and shared UI styling

frontend/app/reset-password/page.tsx

@@ -2,7 +2,7 @@
 
 import { Suspense, useEffect, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import BrandingLogo from '../ui/BrandingLogo'
+import AuthLayout from '../ui/AuthLayout'
 import { getApiBase } from '../lib/auth'
 
 type ResetVerification = {
@@ -100,11 +100,8 @@ function ResetPasswordPageContent() {
     verification?.auth_provider === 'jellyfin' ? 'Jellyfin, Seerr, and Magent' : 'Magent'
 
   return (
-    <main className="card auth-card">
-      <BrandingLogo className="brand-logo brand-logo--login" />
-      <h1>Reset password</h1>
-      <p className="lede">Choose a new password for your account.</p>
-      <form className="auth-form" onSubmit={submit}>
+    <AuthLayout title="Reset password" description="Choose a new password of at least 8 characters.">
+      <form className="account-form login-form auth-flow-form" onSubmit={submit}>
         {verifying && <div className="status-banner">Checking password reset link…</div>}
         {!verifying && verification && (
           <div className="status-banner">
@@ -132,10 +129,10 @@ function ResetPasswordPageContent() {
             disabled={!verification || loading}
           />
         </label>
-        {error && <div className="error-banner">{error}</div>}
-        {status && <div className="status-banner">{status}</div>}
+        {error && <div className="account-notice is-error" role="alert">{error}</div>}
+        {status && <div className="account-notice is-status" role="status">{status}</div>}
         <div className="auth-actions">
-          <button type="submit" disabled={loading || verifying || !verification}>
+          <button type="submit" className="account-primary" disabled={loading || verifying || !verification}>
             {loading ? 'Updating password…' : 'Reset password'}
           </button>
         </div>
@@ -143,13 +140,13 @@ function ResetPasswordPageContent() {
           Back to sign in
         </button>
       </form>
-    </main>
+    </AuthLayout>
   )
 }
 
 export default function ResetPasswordPage() {
   return (
-    <Suspense fallback={<main className="card auth-card">Loading password reset…</main>}>
+    <Suspense fallback={<AuthLayout title="Reset password" description="Choose a new password for your account."><p role="status">Checking your reset link…</p></AuthLayout>}>
       <ResetPasswordPageContent />
     </Suspense>
   )