From 5fc958484a880de44de442cde939fbc5689453b4 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Sat, 27 Jun 2026 21:53:33 +0200
Subject: [PATCH 1/2] Port CP set-password and verify-email into Inertia

---
 resources/js/common/layouts/AuthBase.vue      | 11 ++-
 resources/js/pages/auth/SetPassword.vue       | 69 +++++++++++++++++++
 resources/js/pages/auth/VerifyEmail.vue       | 49 +++++++++++++
 resources/templates/set-password.twig         |  2 +-
 resources/templates/verify-email.twig         |  2 +-
 routes/web.php                                |  6 ++
 src/Config/GeneralConfig.php                  |  3 +-
 .../Auth/AuthenticationController.php         | 16 ++---
 .../Auth/SetPasswordController.php            | 33 +++++----
 .../Auth/VerifyEmailController.php            | 15 ++--
 src/User/Users.php                            |  2 +-
 .../Auth/SetPasswordControllerTest.php        | 40 ++++++-----
 .../Auth/VerifyEmailControllerTest.php        | 35 ++++------
 tests/Feature/User/EmailVerificationTest.php  | 18 ++++-
 tests/Feature/User/PasswordResetTest.php      |  6 +-
 15 files changed, 230 insertions(+), 77 deletions(-)
 create mode 100644 resources/js/pages/auth/SetPassword.vue
 create mode 100644 resources/js/pages/auth/VerifyEmail.vue
diff --git a/resources/js/common/layouts/AuthBase.vue b/resources/js/common/layouts/AuthBase.vue
index 18e2216e090..1b4490dd3c5 100644
--- a/resources/js/common/layouts/AuthBase.vue
+++ b/resources/js/common/layouts/AuthBase.vue
@@ -4,11 +4,20 @@
   import craftCmsLogoUrl from '@public/images/craftcms.svg';
   import {t} from '@craftcms/cp';
 
+  const props = withDefaults(
+    defineProps<{
+      title?: string;
+    }>(),
+    {
+      title: t('Sign In'),
+    }
+  );
+
   const {general, system} = useCraftData();
 </script>
 
 <template>
-  <Head :title="t('Sign In')"></Head>
+  <Head :title="props.title"></Head>
   <main class="cp-login">
     <div class="cp-login__wrapper grid gap-3 justify-items-center">
       <h1 class="flex justify-center">
diff --git a/resources/js/pages/auth/SetPassword.vue b/resources/js/pages/auth/SetPassword.vue
new file mode 100644
index 00000000000..c372f7d7fd0
--- /dev/null
+++ b/resources/js/pages/auth/SetPassword.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+  import {computed} from 'vue';
+  import {t} from '@craftcms/cp';
+  import {useForm} from '@inertiajs/vue3';
+  import AuthBase from '@/common/layouts/AuthBase.vue';
+  import Pane from '@/common/components/Pane.vue';
+  import CraftInputPassword from '@craftcms/cp/vue/CraftInputPassword.vue';
+  import {store} from '@actions/Auth/SetPasswordController';
+
+  interface SetPasswordForm {
+    uid: string;
+    code: string;
+    newPassword: string;
+  }
+
+  const props = defineProps<{
+    uid: string;
+    code: string;
+    newUser: boolean;
+  }>();
+
+  const form = useForm<SetPasswordForm>({
+    uid: props.uid,
+    code: props.code,
+    newPassword: '',
+  });
+
+  const title = computed(() =>
+    props.newUser ? t('Set Your Password') : t('Set Your New Password')
+  );
+
+  const passwordLabel = computed(() =>
+    props.newUser ? t('Choose a password') : t('Choose a new password')
+  );
+
+  function submit() {
+    form.post(store().url);
+  }
+</script>
+
+<template>
+  <AuthBase :title="title">
+    <form @submit.prevent="submit">
+      <Pane appearance="raised">
+        <div class="grid gap-3">
+          <CraftInputPassword
+            id="newPassword"
+            name="newPassword"
+            v-model="form.newPassword"
+            :label="passwordLabel"
+            :error="form.errors.newPassword"
+            autocomplete="new-password"
+            required
+            autofocus
+          />
+
+          <craft-button
+            type="submit"
+            variant="accent"
+            :loading="form.processing"
+            class="w-full"
+          >
+            {{ t('Set Password') }}
+          </craft-button>
+        </div>
+      </Pane>
+    </form>
+  </AuthBase>
+</template>
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
new file mode 100644
index 00000000000..aaf5f153967
--- /dev/null
+++ b/resources/js/pages/auth/VerifyEmail.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/cp';
+  import {useForm} from '@inertiajs/vue3';
+  import AuthBase from '@/common/layouts/AuthBase.vue';
+  import Pane from '@/common/components/Pane.vue';
+  import {store} from '@actions/Auth/VerifyEmailController';
+
+  interface VerifyEmailForm {
+    uid: string;
+    code: string;
+  }
+
+  const props = defineProps<{
+    uid: string;
+    code: string;
+  }>();
+
+  const form = useForm<VerifyEmailForm>({
+    uid: props.uid,
+    code: props.code,
+  });
+
+  function submit() {
+    form.post(store().url);
+  }
+</script>
+
+<template>
+  <AuthBase :title="t('Verify your email address')">
+    <form @submit.prevent="submit">
+      <Pane appearance="raised">
+        <div class="grid gap-3">
+          <h2 class="text-base">
+            {{ t('Verify your email address') }}
+          </h2>
+
+          <craft-button
+            type="submit"
+            variant="accent"
+            :loading="form.processing"
+            class="w-full"
+          >
+            {{ t('Verify') }}
+          </craft-button>
+        </div>
+      </Pane>
+    </form>
+  </AuthBase>
+</template>
diff --git a/resources/templates/set-password.twig b/resources/templates/set-password.twig
index d561286a64d..550fd7173fe 100644
--- a/resources/templates/set-password.twig
+++ b/resources/templates/set-password.twig
@@ -10,7 +10,7 @@
 {% block message %}
     <form method="post" accept-charset="UTF-8">
         {{ hiddenInput('code', code) }}
-        {{ hiddenInput('uid', id) }}
+        {{ hiddenInput('uid', uid) }}
         {{ csrfInput() }}
 
         <div>
diff --git a/resources/templates/verify-email.twig b/resources/templates/verify-email.twig
index d04ea1f0e7d..91ad1ec3071 100644
--- a/resources/templates/verify-email.twig
+++ b/resources/templates/verify-email.twig
@@ -5,7 +5,7 @@
 
 {% block message %}
   <form method="post" accept-charset="UTF-8">
-    {{ hiddenInput('uid', id) }}
+    {{ hiddenInput('uid', uid) }}
     {{ hiddenInput('code', code) }}
     {{ csrfInput() }}
 
diff --git a/routes/web.php b/routes/web.php
index c74e83d2870..e89e7eb6d26 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -6,6 +6,7 @@
 use CraftCms\Cms\Edition;
 use CraftCms\Cms\Http\Controllers\Auth\LoginController;
 use CraftCms\Cms\Http\Controllers\Auth\OAuthController;
+use CraftCms\Cms\Http\Controllers\Auth\SetPasswordController;
 use CraftCms\Cms\Http\Controllers\Auth\TwoFactorAuthenticationController;
 use CraftCms\Cms\Http\Controllers\Auth\VerifyEmailController;
 use CraftCms\Cms\Http\Middleware\RequireEdition;
@@ -26,6 +27,11 @@
         Route::post(Cms::config()->verifyEmailPath, [VerifyEmailController::class, 'store']);
     }
 
+    if (Cms::config()->setPasswordPath !== false) {
+        Route::get(Cms::config()->setPasswordPath, [SetPasswordController::class, 'show']);
+        Route::post(Cms::config()->setPasswordPath, [SetPasswordController::class, 'store']);
+    }
+
     Route::middleware('auth')->group(function () {
         if (Cms::config()->logoutPath !== false) {
             Route::get(Cms::config()->logoutPath, [LoginController::class, 'logout']);
diff --git a/src/Config/GeneralConfig.php b/src/Config/GeneralConfig.php
index 4d3a9a913b7..dd2dfeaf8cd 100644
--- a/src/Config/GeneralConfig.php
+++ b/src/Config/GeneralConfig.php
@@ -5,6 +5,7 @@
 namespace CraftCms\Cms\Config;
 
 use Closure;
+use CraftCms\Cms\Auth\Enums\CpAuthPath;
 use CraftCms\Cms\Support\Attributes\EnvName;
 use CraftCms\Cms\Support\Config as ConfigHelper;
 use CraftCms\Cms\Support\DateTimeHelper;
@@ -2658,7 +2659,7 @@ class GeneralConfig extends BaseConfig
      *
      * @group Routing
      */
-    public mixed $setPasswordPath = 'setpassword';
+    public mixed $setPasswordPath = CpAuthPath::SetPassword->value;
 
     /**
      * @var mixed The URI to the page where users can request to change their password.
diff --git a/src/Http/Controllers/Auth/AuthenticationController.php b/src/Http/Controllers/Auth/AuthenticationController.php
index 7601c35cf49..a24687342b8 100644
--- a/src/Http/Controllers/Auth/AuthenticationController.php
+++ b/src/Http/Controllers/Auth/AuthenticationController.php
@@ -101,16 +101,16 @@ protected function handleLoginFailure(Request $request, ?AuthError $authError =
         return $this->asFailure($message, ['errorCode' => $authError?->value]);
     }
 
-    protected function renderViewWithFallback(string $cpTemplate, array $data = [], ?string $inertiaComponent = null, ?array $inertiaProps = []): View|InertiaResponse|Response
+    protected function renderViewWithFallback(string $cpTemplate, array $data = [], ?string $inertiaComponent = null, ?array $inertiaProps = null): View|InertiaResponse|Response
     {
-        if (view()->exists(request()->craftPath())) {
-            return view(request()->craftPath(), $data);
-        }
-
         if ($inertiaComponent !== null && request()->isCpRequest()) {
             return Inertia::render($inertiaComponent, $inertiaProps ?? $data);
         }
 
+        if (view()->exists(request()->craftPath())) {
+            return view(request()->craftPath(), $data);
+        }
+
         TemplateMode::set(TemplateMode::Cp);
 
         if (! view()->exists('craftcms::'.$cpTemplate)) {
@@ -123,13 +123,13 @@ protected function renderViewWithFallback(string $cpTemplate, array $data = [],
     protected function processTokenRequest(Request $request): Response|array
     {
         $request->validate([
-            'id' => ['required'],
+            'uid' => ['required'],
             'code' => ['required'],
         ]);
 
         /** @var User|null $user */
         $user = User::find()
-            ->uid($request->input('id'))
+            ->uid($request->input('uid'))
             ->status(null)
             ->addSelect(['users.password'])
             ->one();
@@ -153,7 +153,7 @@ protected function processTokenRequest(Request $request): Response|array
 
         event(new EmailVerified($user));
 
-        return [$user, $request->input('id'), $request->input('code')];
+        return [$user, $request->input('uid'), $request->input('code')];
     }
 
     protected function processInvalidToken(Request $request, ?User $user = null): Response
diff --git a/src/Http/Controllers/Auth/SetPasswordController.php b/src/Http/Controllers/Auth/SetPasswordController.php
index cae88002b71..eec18846bde 100644
--- a/src/Http/Controllers/Auth/SetPasswordController.php
+++ b/src/Http/Controllers/Auth/SetPasswordController.php
@@ -19,6 +19,8 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Password as PasswordFacade;
 use Illuminate\Validation\Rules\Password;
+use Illuminate\Validation\ValidationException;
+use Inertia\Response as InertiaResponse;
 use RuntimeException;
 use Symfony\Component\HttpFoundation\Response;
 
@@ -26,7 +28,7 @@
 
 readonly class SetPasswordController extends AuthenticationController
 {
-    public function show(Request $request, AuthMethods $auth): Response|View
+    public function show(Request $request, AuthMethods $auth): Response|View|InertiaResponse
     {
         if (! is_array($info = $this->processTokenRequest($request))) {
             return $info;
@@ -42,28 +44,32 @@ public function show(Request $request, AuthMethods $auth): Response|View
         $auth->setRememberedUsername($user);
 
         // Send them to the set password template.
-        return $this->renderViewWithFallback('set-password', [
-            'code' => $code,
-            'id' => $uid,
-            'newUser' => ! $user->password,
-        ]);
+        return $this->renderViewWithFallback(
+            cpTemplate: 'set-password',
+            data: [
+                'code' => $code,
+                'uid' => $uid,
+                'newUser' => ! $user->password,
+            ],
+            inertiaComponent: 'auth/SetPassword',
+        );
     }
 
-    public function store(Request $request, Users $users, Elements $elements): Response|View
+    public function store(Request $request, Users $users, Elements $elements): Response|View|InertiaResponse
     {
         $request->validate([
             'code' => ['required'],
-            'id' => ['required'],
+            'uid' => ['required'],
             'newPassword' => ['required', Password::default()],
         ]);
 
         $user = User::find()
-            ->uid($request->input('id'))
+            ->uid($request->input('uid'))
             ->status(null)
             ->addSelect('users.password')
             ->first();
 
-        abort_if(is_null($user), 400, 'Invalid user UUID: '.$request->input('id'));
+        abort_if(is_null($user), 400, 'Invalid user UUID: '.$request->input('uid'));
 
         try {
             $status = PasswordFacade::broker()->reset(
@@ -98,11 +104,8 @@ function (CraftUser $authUser, string $password) use ($elements) {
                 );
             }
 
-            return $this->renderViewWithFallback('set-password', [
-                'errors' => $user->errors()->get('newPassword'),
-                'code' => $request->input('code'),
-                'id' => $request->input('id'),
-                'newUser' => ! $user->password,
+            throw ValidationException::withMessages([
+                'newPassword' => $user->errors()->get('newPassword') ?: [t('Couldn’t update password.')],
             ]);
         }
 
diff --git a/src/Http/Controllers/Auth/VerifyEmailController.php b/src/Http/Controllers/Auth/VerifyEmailController.php
index 40a7f875d91..d3d32260d77 100644
--- a/src/Http/Controllers/Auth/VerifyEmailController.php
+++ b/src/Http/Controllers/Auth/VerifyEmailController.php
@@ -13,13 +13,14 @@
 use Illuminate\Contracts\View\View;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Password;
+use Inertia\Response as InertiaResponse;
 use Symfony\Component\HttpFoundation\Response;
 
 use function CraftCms\Cms\t;
 
 readonly class VerifyEmailController extends AuthenticationController
 {
-    public function show(Request $request): Response|View
+    public function show(Request $request): Response|View|InertiaResponse
     {
         if (! is_array($info = $this->processTokenRequest($request))) {
             return $info;
@@ -33,10 +34,14 @@ public function show(Request $request): Response|View
         app(AuthMethods::class)->setRememberedUsername($user);
 
         // Send them to the set verify-email template
-        return $this->renderViewWithFallback('verify-email', [
-            'id' => $uid,
-            'code' => $code,
-        ]);
+        return $this->renderViewWithFallback(
+            cpTemplate: 'verify-email',
+            data: [
+                'uid' => $uid,
+                'code' => $code,
+            ],
+            inertiaComponent: 'auth/VerifyEmail',
+        );
     }
 
     public function store(Request $request, Users $users): Response|View
diff --git a/src/User/Users.php b/src/User/Users.php
index 7136e69b226..e346b30d786 100644
--- a/src/User/Users.php
+++ b/src/User/Users.php
@@ -1260,7 +1260,7 @@ private function getUserUrl(User $user, string $fePath, string $cpPath, ?string
 
         $params = [
             'code' => $token,
-            'id' => $user->uid,
+            'uid' => $user->uid,
         ];
 
         $isCpRequest = request()->isCpRequest();
diff --git a/tests/Feature/Http/Controllers/Auth/SetPasswordControllerTest.php b/tests/Feature/Http/Controllers/Auth/SetPasswordControllerTest.php
index 342dac41cc9..bfb3dadd0a5 100644
--- a/tests/Feature/Http/Controllers/Auth/SetPasswordControllerTest.php
+++ b/tests/Feature/Http/Controllers/Auth/SetPasswordControllerTest.php
@@ -5,19 +5,21 @@
 use CraftCms\Cms\Http\Controllers\Auth\SetPasswordController;
 use CraftCms\Cms\Support\Facades\Users;
 use CraftCms\Cms\User\Elements\User;
+use Inertia\Testing\AssertableInertia;
 
+use function CraftCms\Cms\cp_url;
 use function Pest\Laravel\get;
 use function Pest\Laravel\getJson;
 use function Pest\Laravel\postJson;
 
-test('show validates required id and code parameters', function () {
+test('show validates required uid and code parameters', function () {
     getJson(action([SetPasswordController::class, 'show']))
-        ->assertJsonValidationErrors(['id', 'code']);
+        ->assertJsonValidationErrors(['uid', 'code']);
 });
 
-test('show returns invalid token response for invalid user id', function () {
+test('show returns invalid token response for invalid user uid', function () {
     get(action([SetPasswordController::class, 'show'], [
-        'id' => 'invalid-uuid',
+        'uid' => 'invalid-uuid',
         'code' => 'some-code',
     ]))->assertRedirect();
 });
@@ -26,7 +28,7 @@
     $user = User::findOne();
 
     get(action([SetPasswordController::class, 'show'], [
-        'id' => $user->uid,
+        'uid' => $user->uid,
         'code' => 'invalid-code',
     ]))->assertRedirect();
 });
@@ -35,15 +37,19 @@
     $user = User::findOne();
     $code = Users::setVerificationCodeOnUser($user);
 
-    get(action([SetPasswordController::class, 'show'], [
-        'id' => $user->uid,
+    get(cp_url('set-password', [
+        'uid' => $user->uid,
         'code' => $code,
-    ]))->assertOk();
+    ]))->assertInertia(fn (AssertableInertia $page) => $page
+        ->component('auth/SetPassword')
+        ->where('uid', $user->uid)
+        ->where('code', $code)
+        ->where('newUser', false));
 });
 
 test('store validates required fields', function () {
     postJson(action([SetPasswordController::class, 'store']), [])
-        ->assertJsonValidationErrors(['id', 'code', 'newPassword']);
+        ->assertJsonValidationErrors(['uid', 'code', 'newPassword']);
 });
 
 test('store validates password meets requirements', function () {
@@ -51,15 +57,15 @@
     $code = Users::setVerificationCodeOnUser($user);
 
     postJson(action([SetPasswordController::class, 'store']), [
-        'id' => $user->uid,
+        'uid' => $user->uid,
         'code' => $code,
         'newPassword' => 'short',
     ])->assertJsonValidationErrors(['newPassword']);
 });
 
-test('store aborts for invalid user id', function () {
+test('store aborts for invalid user uid', function () {
     postJson(action([SetPasswordController::class, 'store']), [
-        'id' => 'invalid-uuid',
+        'uid' => 'invalid-uuid',
         'code' => 'some-code',
         'newPassword' => 'validpassword123!',
     ])->assertStatus(400);
@@ -69,7 +75,7 @@
     $user = User::findOne();
 
     postJson(action([SetPasswordController::class, 'store']), [
-        'id' => $user->uid,
+        'uid' => $user->uid,
         'code' => 'invalid-code',
         'newPassword' => 'validpassword123!',
     ])->assertStatus(400);
@@ -80,7 +86,7 @@
     $code = Users::setVerificationCodeOnUser($user);
 
     postJson(action([SetPasswordController::class, 'store']), [
-        'id' => $user->uid,
+        'uid' => $user->uid,
         'code' => $code,
         'newPassword' => 'newvalidpassword123!',
     ])->assertOk();
@@ -91,7 +97,7 @@
     $code = Users::setVerificationCodeOnUser($user);
 
     postJson(action([SetPasswordController::class, 'store']), [
-        'id' => $user->uid,
+        'uid' => $user->uid,
         'code' => $code,
         'newPassword' => 'newvalidpassword123!',
     ])
@@ -103,7 +109,7 @@
     $user = User::findOne();
 
     getJson(action([SetPasswordController::class, 'show'], [
-        'id' => $user->uid,
+        'uid' => $user->uid,
         'code' => '', // Empty code
     ]))->assertJsonValidationErrors(['code']);
 });
@@ -115,7 +121,7 @@
     $longPassword = str_repeat('a', 255).'!1A';
 
     postJson(action([SetPasswordController::class, 'store']), [
-        'id' => $user->uid,
+        'uid' => $user->uid,
         'code' => $code,
         'newPassword' => $longPassword,
     ])->assertJsonValidationErrorFor('newPassword');
diff --git a/tests/Feature/Http/Controllers/Auth/VerifyEmailControllerTest.php b/tests/Feature/Http/Controllers/Auth/VerifyEmailControllerTest.php
index 61245b41bd3..113c064f261 100644
--- a/tests/Feature/Http/Controllers/Auth/VerifyEmailControllerTest.php
+++ b/tests/Feature/Http/Controllers/Auth/VerifyEmailControllerTest.php
@@ -7,14 +7,15 @@
 use CraftCms\Cms\Support\Facades\Users;
 use CraftCms\Cms\User\Elements\User;
 use CraftCms\Cms\User\Models\User as UserModel;
+use Inertia\Testing\AssertableInertia;
 
-use function CraftCms\Cms\t;
+use function CraftCms\Cms\cp_url;
 use function Pest\Laravel\get;
 use function Pest\Laravel\postJson;
 
-test('show redirects for invalid user id', function () {
+test('show redirects for invalid user uid', function () {
     get(action([VerifyEmailController::class, 'show'], [
-        'id' => 'invalid-uuid',
+        'uid' => 'invalid-uuid',
         'code' => 'some-code',
     ]))->assertRedirect(CpAuthPath::Login->value);
 });
@@ -23,7 +24,7 @@
     $user = User::findOne();
 
     get(action([VerifyEmailController::class, 'show'], [
-        'id' => $user->uid,
+        'uid' => $user->uid,
         'code' => 'invalid-code',
     ]))->assertRedirect(CpAuthPath::Login->value);
 });
@@ -32,26 +33,14 @@
     $user = User::findOne();
     $code = Users::setVerificationCodeOnUser($user);
 
-    get(action([VerifyEmailController::class, 'show'], [
-        'id' => $user->uid,
-        'code' => $code,
-    ]))
-        ->assertOk()
-        ->assertSee(t('Verify your email address'));
-});
-
-test('show passes id and code to view', function () {
-    $user = User::findOne();
-    $code = Users::setVerificationCodeOnUser($user);
-
-    get(action([VerifyEmailController::class, 'show'], [
-        'id' => $user->uid,
+    get(cp_url(CpAuthPath::VerifyEmail->value, [
+        'uid' => $user->uid,
         'code' => $code,
     ]))
-        ->assertOk()
-        ->assertSee($user->uid)
-        ->assertSee($code)
-        ->assertSee(t('Verify your email address'));
+        ->assertInertia(fn (AssertableInertia $page) => $page
+            ->component('auth/VerifyEmail')
+            ->where('uid', $user->uid)
+            ->where('code', $code));
 });
 
 test('store validates required fields', function () {
@@ -59,7 +48,7 @@
         ->assertJsonValidationErrors(['code', 'uid']);
 });
 
-test('store aborts for invalid user id', function () {
+test('store aborts for invalid user uid', function () {
     postJson(action([VerifyEmailController::class, 'store']), [
         'uid' => 'invalid-uuid',
         'code' => 'some-code',
diff --git a/tests/Feature/User/EmailVerificationTest.php b/tests/Feature/User/EmailVerificationTest.php
index cf8e017b8dd..69e637b991f 100644
--- a/tests/Feature/User/EmailVerificationTest.php
+++ b/tests/Feature/User/EmailVerificationTest.php
@@ -55,9 +55,13 @@
     ]);
     $token = Users::setVerificationCodeOnUser($user);
     $mailable = new ActivationNotification($token)->toMail($user);
+    parse_str(parse_url((string) $mailable->variables['link'], PHP_URL_QUERY), $query);
 
     expect($mailable->key)->toBe('account_activation')
-        ->and((string) $mailable->variables['link'])->toContain('setpassword?code='.$token)
+        ->and($query)->toMatchArray([
+            'code' => $token,
+            'uid' => $user->uid,
+        ])
         ->and((string) $mailable->variables['link'])->not->toContain('verifyemail?code=');
 });
 
@@ -68,9 +72,13 @@
     ]);
     $token = Users::setVerificationCodeOnUser($user);
     $mailable = new ActivationNotification($token)->toMail($user);
+    parse_str(parse_url((string) $mailable->variables['link'], PHP_URL_QUERY), $query);
 
     expect($mailable->key)->toBe('account_activation')
-        ->and((string) $mailable->variables['link'])->toContain('verifyemail?code='.$token)
+        ->and($query)->toMatchArray([
+            'code' => $token,
+            'uid' => $user->uid,
+        ])
         ->and((string) $mailable->variables['link'])->not->toContain('setpassword?code=');
 });
 
@@ -78,9 +86,13 @@
     $user = UserModel::factory()->createElement();
     $token = Users::setVerificationCodeOnUser($user);
     $mailable = new VerifyEmailNotification($token)->toMail($user);
+    parse_str(parse_url((string) $mailable->variables['link'], PHP_URL_QUERY), $query);
 
     expect($mailable->key)->toBe('verify_new_email')
-        ->and((string) $mailable->variables['link'])->toContain('verifyemail?code='.$token);
+        ->and($query)->toMatchArray([
+            'code' => $token,
+            'uid' => $user->uid,
+        ]);
 });
 
 test('purgeExpiredPendingUsers deletes users with expired tokens', function () {
diff --git a/tests/Feature/User/PasswordResetTest.php b/tests/Feature/User/PasswordResetTest.php
index 8083bf15565..55a3c00e3d5 100644
--- a/tests/Feature/User/PasswordResetTest.php
+++ b/tests/Feature/User/PasswordResetTest.php
@@ -42,7 +42,11 @@
     $user = UserModel::factory()->createElement();
     $token = Password::broker()->createToken($user);
     $mailable = new ResetPasswordNotification($token)->toMail($user);
+    parse_str(parse_url((string) $mailable->variables['link'], PHP_URL_QUERY), $query);
 
-    expect((string) $mailable->variables['link'])->toContain('setpassword?code='.$token)
+    expect($query)->toMatchArray([
+        'code' => $token,
+        'uid' => $user->uid,
+    ])
         ->and(Password::broker()->tokenExists($user, $token))->toBeTrue();
 });

From 92a28a2c10b931c37d0aba2f38dd5223d6034050 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Sun, 28 Jun 2026 15:45:28 +0200
Subject: [PATCH 2/2] Move set-password and verify-email to web components

---
 resources/js/legacy.ts                        |  2 +
 .../components/login/login-form.styles.ts     | 12 ++-
 .../auth/components/login/login-form.ts       |  6 +-
 .../components/login/login-reset-password.ts  |  6 +-
 .../set-password/set-password-form.ts         | 83 +++++++++++++++++++
 .../verify-email/verify-email-form.ts         | 69 +++++++++++++++
 resources/js/pages/auth/SetPassword.vue       | 59 ++++---------
 resources/js/pages/auth/VerifyEmail.vue       | 51 +++++-------
 resources/templates/set-password.twig         | 33 ++------
 resources/templates/verify-email.twig         | 17 ++--
 .../Auth/SetPasswordControllerTest.php        | 13 +++
 .../Auth/VerifyEmailControllerTest.php        | 13 +++
 12 files changed, 241 insertions(+), 123 deletions(-)
 create mode 100644 resources/js/modules/auth/components/set-password/set-password-form.ts
 create mode 100644 resources/js/modules/auth/components/verify-email/verify-email-form.ts

diff --git a/resources/js/legacy.ts b/resources/js/legacy.ts
index 11b92226f7c..17a1372d4e0 100644
--- a/resources/js/legacy.ts
+++ b/resources/js/legacy.ts
@@ -2,6 +2,8 @@
 // elevated session modal can be called from pretty much anywhere
 await Promise.all([
   import('./modules/auth/components/login/login-form.js'),
+  import('./modules/auth/components/set-password/set-password-form.js'),
+  import('./modules/auth/components/verify-email/verify-email-form.js'),
   import('./modules/auth/components/totp/totp-form.js'),
   import('./modules/auth/components/recovery-codes/recovery-code-form.js'),
 ]);
diff --git a/resources/js/modules/auth/components/login/login-form.styles.ts b/resources/js/modules/auth/components/login/login-form.styles.ts
index b91eea0c1cc..c77f5a961d0 100644
--- a/resources/js/modules/auth/components/login/login-form.styles.ts
+++ b/resources/js/modules/auth/components/login/login-form.styles.ts
@@ -11,17 +11,23 @@ export default css`
     place-items: center;
   }
 
-  .login-form__fields {
+  .auth-form__fields {
     display: flex;
     gap: var(--c-spacing-md);
     align-items: end;
   }
 
-  .login-form__actions {
+  .auth-form__actions {
     margin-block-start: var(--c-spacing-lg);
   }
 
-  .login-form__error {
+  .auth-form__heading {
+    margin: 0;
+    font-size: var(--c-font-size);
+    font-weight: var(--c-font-weight-bold);
+  }
+
+  .auth-form__error {
     margin-block-start: var(--c-spacing-md);
   }
 
diff --git a/resources/js/modules/auth/components/login/login-form.ts b/resources/js/modules/auth/components/login/login-form.ts
index dbf17659393..01422f9f528 100644
--- a/resources/js/modules/auth/components/login/login-form.ts
+++ b/resources/js/modules/auth/components/login/login-form.ts
@@ -248,7 +248,7 @@ export default class CraftLoginForm extends LitElement {
     return html`
       <craft-pane>
         <form
-          class="login-form"
+          class="auth-form"
           method="post"
           accept-charset="UTF-8"
           @submit="${this.#onSubmit}"
@@ -316,7 +316,7 @@ export default class CraftLoginForm extends LitElement {
               : nothing}
           </craft-field-group>
 
-          <div class="login-form__actions">
+          <div class="auth-form__actions">
             <craft-button
               type="submit"
               variant="accent"
@@ -329,7 +329,7 @@ export default class CraftLoginForm extends LitElement {
         </form>
 
         ${this._error
-          ? html`<craft-callout class="login-form__error" variant="danger"
+          ? html`<craft-callout class="auth-form__error" variant="danger"
               >${this._error}</craft-callout
             >`
           : nothing}
diff --git a/resources/js/modules/auth/components/login/login-reset-password.ts b/resources/js/modules/auth/components/login/login-reset-password.ts
index 1e5efc23ddb..53ad0a9cc19 100644
--- a/resources/js/modules/auth/components/login/login-reset-password.ts
+++ b/resources/js/modules/auth/components/login/login-reset-password.ts
@@ -75,7 +75,7 @@ export default class CraftLoginResetPassword extends LitElement {
     return html`
       <craft-pane>
         <form
-          class="login-form login-form--reset"
+          class="auth-form auth-form--reset"
           method="post"
           accept-charset="UTF-8"
           @submit="${this.#onSubmit}"
@@ -95,7 +95,7 @@ export default class CraftLoginResetPassword extends LitElement {
             </craft-input>
           </craft-field-group>
 
-          <div class="login-form__actions">
+          <div class="auth-form__actions">
             <craft-button
               type="submit"
               variant="accent"
@@ -106,7 +106,7 @@ export default class CraftLoginResetPassword extends LitElement {
           </div>
 
           ${this._error
-            ? html`<craft-callout variant="danger" class="login-form__error"
+            ? html`<craft-callout variant="danger" class="auth-form__error"
                 >${this._error}</craft-callout
               >`
             : nothing}
diff --git a/resources/js/modules/auth/components/set-password/set-password-form.ts b/resources/js/modules/auth/components/set-password/set-password-form.ts
new file mode 100644
index 00000000000..ed36d892c12
--- /dev/null
+++ b/resources/js/modules/auth/components/set-password/set-password-form.ts
@@ -0,0 +1,83 @@
+import {html, LitElement, nothing} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import {t} from '@craftcms/cp';
+import componentStyles from '../login/login-form.styles.js';
+
+/**
+ * @summary Full-page set-password form.
+ * @since 6.0
+ */
+export default class CraftSetPasswordForm extends LitElement {
+  static override styles = [componentStyles];
+
+  @property() action = '';
+  @property() uid = '';
+  @property() code = '';
+  @property({attribute: 'initial-error'}) initialError = '';
+  @property({type: Boolean, attribute: 'new-user'}) newUser = false;
+
+  @state() private _busy = false;
+
+  #passwordLabel() {
+    return this.newUser ? t('Choose a password') : t('Choose a new password');
+  }
+
+  #onSubmit() {
+    this._busy = true;
+  }
+
+  override render() {
+    return html`
+      <craft-pane>
+        <form
+          class="auth-form"
+          method="post"
+          action="${this.action}"
+          accept-charset="UTF-8"
+          @submit="${this.#onSubmit}"
+        >
+          <input type="hidden" name="uid" value="${this.uid}" />
+          <input type="hidden" name="code" value="${this.code}" />
+
+          <craft-field-group>
+            <craft-input-password
+              label="${this.#passwordLabel()}"
+              id="newPassword"
+              name="newPassword"
+              autocomplete="new-password"
+              required
+              autofocus
+            ></craft-input-password>
+          </craft-field-group>
+
+          <div class="auth-form__actions">
+            <craft-button
+              type="submit"
+              variant="accent"
+              ?loading="${this._busy}"
+              style="width: 100%"
+            >
+              ${t('Set Password')}
+            </craft-button>
+          </div>
+        </form>
+
+        ${this.initialError
+          ? html`<craft-callout class="auth-form__error" variant="danger"
+              >${this.initialError}</craft-callout
+            >`
+          : nothing}
+      </craft-pane>
+    `;
+  }
+}
+
+if (!customElements.get('craft-set-password-form')) {
+  customElements.define('craft-set-password-form', CraftSetPasswordForm);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-set-password-form': CraftSetPasswordForm;
+  }
+}
diff --git a/resources/js/modules/auth/components/verify-email/verify-email-form.ts b/resources/js/modules/auth/components/verify-email/verify-email-form.ts
new file mode 100644
index 00000000000..1a88e593eb7
--- /dev/null
+++ b/resources/js/modules/auth/components/verify-email/verify-email-form.ts
@@ -0,0 +1,69 @@
+import {html, LitElement, nothing} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import {t} from '@craftcms/cp';
+import componentStyles from '../login/login-form.styles.js';
+
+/**
+ * @summary Full-page verify-email form.
+ * @since 6.0
+ */
+export default class CraftVerifyEmailForm extends LitElement {
+  static override styles = [componentStyles];
+
+  @property() action = '';
+  @property() uid = '';
+  @property() code = '';
+  @property({attribute: 'initial-error'}) initialError = '';
+
+  @state() private _busy = false;
+
+  #onSubmit() {
+    this._busy = true;
+  }
+
+  override render() {
+    return html`
+      <craft-pane>
+        <form
+          class="auth-form"
+          method="post"
+          action="${this.action}"
+          accept-charset="UTF-8"
+          @submit="${this.#onSubmit}"
+        >
+          <input type="hidden" name="uid" value="${this.uid}" />
+          <input type="hidden" name="code" value="${this.code}" />
+
+          <h2 class="auth-form__heading">${t('Verify your email address')}</h2>
+
+          <div class="auth-form__actions">
+            <craft-button
+              type="submit"
+              variant="accent"
+              ?loading="${this._busy}"
+              style="width: 100%"
+            >
+              ${t('Verify')}
+            </craft-button>
+          </div>
+        </form>
+
+        ${this.initialError
+          ? html`<craft-callout class="auth-form__error" variant="danger"
+              >${this.initialError}</craft-callout
+            >`
+          : nothing}
+      </craft-pane>
+    `;
+  }
+}
+
+if (!customElements.get('craft-verify-email-form')) {
+  customElements.define('craft-verify-email-form', CraftVerifyEmailForm);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-verify-email-form': CraftVerifyEmailForm;
+  }
+}
diff --git a/resources/js/pages/auth/SetPassword.vue b/resources/js/pages/auth/SetPassword.vue
index c372f7d7fd0..a9e98279cdd 100644
--- a/resources/js/pages/auth/SetPassword.vue
+++ b/resources/js/pages/auth/SetPassword.vue
@@ -1,17 +1,10 @@
 <script setup lang="ts">
   import {computed} from 'vue';
   import {t} from '@craftcms/cp';
-  import {useForm} from '@inertiajs/vue3';
+  import {usePage} from '@inertiajs/vue3';
   import AuthBase from '@/common/layouts/AuthBase.vue';
-  import Pane from '@/common/components/Pane.vue';
-  import CraftInputPassword from '@craftcms/cp/vue/CraftInputPassword.vue';
   import {store} from '@actions/Auth/SetPasswordController';
-
-  interface SetPasswordForm {
-    uid: string;
-    code: string;
-    newPassword: string;
-  }
+  import '@/modules/auth/components/set-password/set-password-form.js';
 
   const props = defineProps<{
     uid: string;
@@ -19,51 +12,27 @@
     newUser: boolean;
   }>();
 
-  const form = useForm<SetPasswordForm>({
-    uid: props.uid,
-    code: props.code,
-    newPassword: '',
-  });
+  const page = usePage<{
+    errors?: Record<string, string>;
+  }>();
 
   const title = computed(() =>
     props.newUser ? t('Set Your Password') : t('Set Your New Password')
   );
 
-  const passwordLabel = computed(() =>
-    props.newUser ? t('Choose a password') : t('Choose a new password')
+  const action = computed(
+    () => store(undefined, {query: {uid: props.uid, code: props.code}}).url
   );
-
-  function submit() {
-    form.post(store().url);
-  }
 </script>
 
 <template>
   <AuthBase :title="title">
-    <form @submit.prevent="submit">
-      <Pane appearance="raised">
-        <div class="grid gap-3">
-          <CraftInputPassword
-            id="newPassword"
-            name="newPassword"
-            v-model="form.newPassword"
-            :label="passwordLabel"
-            :error="form.errors.newPassword"
-            autocomplete="new-password"
-            required
-            autofocus
-          />
-
-          <craft-button
-            type="submit"
-            variant="accent"
-            :loading="form.processing"
-            class="w-full"
-          >
-            {{ t('Set Password') }}
-          </craft-button>
-        </div>
-      </Pane>
-    </form>
+    <craft-set-password-form
+      :action="action"
+      :uid="uid"
+      :code="code"
+      :initial-error="page.props.errors?.newPassword"
+      :new-user="newUser ? '' : null"
+    ></craft-set-password-form>
   </AuthBase>
 </template>
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
index aaf5f153967..603180be957 100644
--- a/resources/js/pages/auth/VerifyEmail.vue
+++ b/resources/js/pages/auth/VerifyEmail.vue
@@ -1,49 +1,36 @@
 <script setup lang="ts">
   import {t} from '@craftcms/cp';
-  import {useForm} from '@inertiajs/vue3';
+  import {computed} from 'vue';
+  import {usePage} from '@inertiajs/vue3';
   import AuthBase from '@/common/layouts/AuthBase.vue';
-  import Pane from '@/common/components/Pane.vue';
   import {store} from '@actions/Auth/VerifyEmailController';
-
-  interface VerifyEmailForm {
-    uid: string;
-    code: string;
-  }
+  import '@/modules/auth/components/verify-email/verify-email-form.js';
 
   const props = defineProps<{
     uid: string;
     code: string;
   }>();
 
-  const form = useForm<VerifyEmailForm>({
-    uid: props.uid,
-    code: props.code,
-  });
+  const page = usePage<{
+    errors?: Record<string, string>;
+  }>();
+
+  const action = computed(
+    () => store(undefined, {query: {uid: props.uid, code: props.code}}).url
+  );
 
-  function submit() {
-    form.post(store().url);
-  }
+  const initialError = computed(
+    () => page.props.errors?.code ?? page.props.errors?.uid
+  );
 </script>
 
 <template>
   <AuthBase :title="t('Verify your email address')">
-    <form @submit.prevent="submit">
-      <Pane appearance="raised">
-        <div class="grid gap-3">
-          <h2 class="text-base">
-            {{ t('Verify your email address') }}
-          </h2>
-
-          <craft-button
-            type="submit"
-            variant="accent"
-            :loading="form.processing"
-            class="w-full"
-          >
-            {{ t('Verify') }}
-          </craft-button>
-        </div>
-      </Pane>
-    </form>
+    <craft-verify-email-form
+      :action="action"
+      :uid="uid"
+      :code="code"
+      :initial-error="initialError"
+    ></craft-verify-email-form>
   </AuthBase>
 </template>
diff --git a/resources/templates/set-password.twig b/resources/templates/set-password.twig
index 550fd7173fe..1a630d0ed69 100644
--- a/resources/templates/set-password.twig
+++ b/resources/templates/set-password.twig
@@ -1,5 +1,4 @@
 {% extends "_layouts/message" %}
-{% import "_includes/forms" as forms %}
 
 {% if newUser %}
     {% set title = "Set Your Password"|t('app') %}
@@ -8,30 +7,12 @@
 {% endif %}
 
 {% block message %}
-    <form method="post" accept-charset="UTF-8">
-        {{ hiddenInput('code', code) }}
-        {{ hiddenInput('uid', uid) }}
-        {{ csrfInput() }}
+    {% set passwordErrors = errors.get('newPassword') %}
 
-        <div>
-            {{ forms.passwordField({
-                id: 'newPassword',
-                label: (newUser ? "Choose a password"|t('app') : "Choose a new password"|t('app')),
-                name: 'newPassword',
-                autocomplete: 'new-password',
-                autofocus: true,
-                errors: errors.get('newPassword')
-            }) }}
-        </div>
-
-        <div class="buttons">
-            <button class="btn submit" type="submit">{{ 'Set Password'|t('app') }}</button>
-        </div>
-    </form>
+    <craft-set-password-form {{ attr({
+        uid: uid,
+        code: code,
+        'initial-error': passwordErrors ? passwordErrors|first : null,
+        'new-user': newUser,
+    }) }}></craft-set-password-form>
 {% endblock %}
-
-{% js %}
-    (() => {
-        new Craft.PasswordInput($('#newPassword'));
-    })();
-{% endjs %}
diff --git a/resources/templates/verify-email.twig b/resources/templates/verify-email.twig
index 91ad1ec3071..e1011caf34e 100644
--- a/resources/templates/verify-email.twig
+++ b/resources/templates/verify-email.twig
@@ -1,18 +1,13 @@
 {% extends "_layouts/message" %}
-{% import "_includes/forms" as forms %}
 
 {% set title = 'Verify your email address'|t('app') %}
 
 {% block message %}
-  <form method="post" accept-charset="UTF-8">
-    {{ hiddenInput('uid', uid) }}
-    {{ hiddenInput('code', code) }}
-    {{ csrfInput() }}
+  {% set verificationErrors = errors.get('code') ?: errors.get('uid') %}
 
-    <h2 class="first">{{ 'Verify your email address'|t('app') }}</h2>
-
-    <div class="buttons">
-      <button class="btn submit" type="submit">{{ 'Verify'|t('app') }}</button>
-    </div>
-  </form>
+  <craft-verify-email-form {{ attr({
+    uid: uid,
+    code: code,
+    'initial-error': verificationErrors ? verificationErrors|first : null,
+  }) }}></craft-verify-email-form>
 {% endblock %}
diff --git a/tests/Feature/Http/Controllers/Auth/SetPasswordControllerTest.php b/tests/Feature/Http/Controllers/Auth/SetPasswordControllerTest.php
index bfb3dadd0a5..aac2f9d2739 100644
--- a/tests/Feature/Http/Controllers/Auth/SetPasswordControllerTest.php
+++ b/tests/Feature/Http/Controllers/Auth/SetPasswordControllerTest.php
@@ -5,6 +5,8 @@
 use CraftCms\Cms\Http\Controllers\Auth\SetPasswordController;
 use CraftCms\Cms\Support\Facades\Users;
 use CraftCms\Cms\User\Elements\User;
+use CraftCms\Cms\View\TemplateMode;
+use Illuminate\Support\MessageBag;
 use Inertia\Testing\AssertableInertia;
 
 use function CraftCms\Cms\cp_url;
@@ -47,6 +49,17 @@
         ->where('newUser', false));
 });
 
+test('fallback template renders set-password web component', function () {
+    $html = TemplateMode::with(TemplateMode::Cp, fn () => view('craftcms::set-password', [
+        'uid' => 'user-uid',
+        'code' => 'token-code',
+        'newUser' => false,
+        'errors' => new MessageBag,
+    ])->render());
+
+    expect($html)->toContain('craft-set-password-form');
+});
+
 test('store validates required fields', function () {
     postJson(action([SetPasswordController::class, 'store']), [])
         ->assertJsonValidationErrors(['uid', 'code', 'newPassword']);
diff --git a/tests/Feature/Http/Controllers/Auth/VerifyEmailControllerTest.php b/tests/Feature/Http/Controllers/Auth/VerifyEmailControllerTest.php
index 113c064f261..1470c2c5945 100644
--- a/tests/Feature/Http/Controllers/Auth/VerifyEmailControllerTest.php
+++ b/tests/Feature/Http/Controllers/Auth/VerifyEmailControllerTest.php
@@ -7,6 +7,8 @@
 use CraftCms\Cms\Support\Facades\Users;
 use CraftCms\Cms\User\Elements\User;
 use CraftCms\Cms\User\Models\User as UserModel;
+use CraftCms\Cms\View\TemplateMode;
+use Illuminate\Support\MessageBag;
 use Inertia\Testing\AssertableInertia;
 
 use function CraftCms\Cms\cp_url;
@@ -43,6 +45,17 @@
             ->where('code', $code));
 });
 
+test('fallback template renders verify-email web component', function () {
+    $html = TemplateMode::with(TemplateMode::Cp, fn () => view('craftcms::verify-email', [
+        'uid' => 'user-uid',
+        'code' => 'token-code',
+        'errors' => new MessageBag(['code' => ['Invalid verification code.']]),
+    ])->render());
+
+    expect($html)->toContain('craft-verify-email-form');
+    expect($html)->toContain('initial-error');
+});
+
 test('store validates required fields', function () {
     postJson(action([VerifyEmailController::class, 'store']), [])
         ->assertJsonValidationErrors(['code', 'uid']);
