Merge pull request #11954 from nanaya/turbo-error-handling

Show session verification box for turbo requests

Author: notbakaneko

app/Libraries/SessionVerification/Controller.php

@@ -28,14 +28,15 @@ public static function initiate()
             return response(null, $statusCode);
         }
 
-        if (\Request::ajax()) {
+        $request = \Request::instance();
+        if ($request->ajax() || ($request->getMethod() !== 'GET' && is_turbo_request($request))) {
             return response([
                 'authentication' => 'verify',
                 'box' => view(
                     'users._verify_box',
                     compact('email')
                 )->render(),
-            ], $statusCode);
+            ], $statusCode, ['x-turbo-action' => 'session-verification']);
         }
 
         return ext_view('users.verify', compact('email'), null, $statusCode);

app/helpers.php

@@ -852,6 +852,13 @@ function is_json_request(): bool
     return is_api_request() || Request::expectsJson();
 }
 
+function is_turbo_request(?HttpRequest $request = null): bool
+{
+    $request ??= Request::instance();
+
+    return $request->headers->get('x-turbo-request-id') !== null;
+}
+
 function is_valid_email_format(?string $email): bool
 {
     if ($email === null) {
@@ -938,14 +945,14 @@ function ujs_redirect($url, $status = 200)
     $request = Request::instance();
     // This is done mainly to work around fetch ignoring/removing anchor from page redirect.
     // Reference: https://github.com/hotwired/turbo/issues/211
-    if ($request->headers->get('x-turbo-request-id') !== null) {
+    if (is_turbo_request($request)) {
         if ($status === 200 && $request->getMethod() !== 'GET') {
             // Turbo doesn't like 200 response on non-GET requests.
             // Reference: https://github.com/hotwired/turbo/issues/22
             $status = 201;
         }
 
-        return response($url, $status, ['content-type' => 'text/osu-turbo-redirect']);
+        return response($url, $status, ['x-turbo-action' => 'redirect']);
     } elseif ($request->ajax() && $request->getMethod() !== 'GET') {
         return ext_view('layout.ujs-redirect', compact('url'), 'js', $status);
     } else {

resources/js/core/user/user-verification.ts

@@ -1,6 +1,7 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
+import { type FetchResponse, type TurboSubmitEndEvent } from '@hotwired/turbo';
 import { route } from 'laroute';
 import core from 'osu-core-singleton';
 import { xhrErrorMessage } from 'utils/ajax';
@@ -77,6 +78,8 @@ export default class UserVerification {
       .on('click', '.js-user-verification--reissue', this.reissue);
     $.subscribe('user-verification:success', this.success);
 
+    document.addEventListener('turbo:submit-end', this.onErrorTurbo);
+
     $(window).on('resize scroll', this.reposition);
   }
 
@@ -140,6 +143,27 @@ export default class UserVerification {
     this.showOnError(xhr, createClickCallback(e.target))
   );
 
+  private readonly onErrorTurbo = (e: TurboSubmitEndEvent) => {
+    // Workaround wrong definition (the field always exists).
+    if (!('fetchResponse' in e.detail)) {
+      return;
+    }
+
+    const fetchResponse = e.detail.fetchResponse as FetchResponse | undefined;
+    if (fetchResponse == null || fetchResponse.header('x-turbo-action') !== 'session-verification') {
+      return;
+    }
+
+    e.preventDefault();
+    const form = e.detail.formSubmission.formElement;
+    fetchResponse.responseText.then((jsonString: string) => {
+      const json = JSON.parse(jsonString) as UserVerificationJson;
+      this.show(json.box, () => {
+        form.requestSubmit();
+      });
+    });
+  };
+
   private readonly prepareForRequest = (type: string) => {
     this.request?.abort();
     this.setMessage(trans(`user_verification.box.${type}`), true);

resources/js/setup-turbo.ts

@@ -25,21 +25,19 @@ document.addEventListener('turbo:submit-end', (e) => {
 });
 
 document.addEventListener('turbo:before-fetch-response', (e) => {
-  if (!e.detail.fetchResponse.contentType?.match(/^text\/osu-turbo-redirect[ ;]*/)) {
-    return;
+  if (e.detail.fetchResponse.header('x-turbo-action') === 'redirect') {
+    e.preventDefault();
+    e.detail.fetchResponse.responseText.then((url) => {
+      const [currentUrlBase, urlBase] = [document.location.href, url].map((u) => u.replace(/#.*/, ''));
+
+      if (currentUrlBase === urlBase) {
+        // a normal/advance visit to same url won't reload the page
+        Turbo.visit(url, { action: 'replace' });
+      } else {
+        Turbo.visit(url);
+      }
+    });
   }
-
-  e.preventDefault();
-  e.detail.fetchResponse.responseText.then((url) => {
-    const [currentUrlBase, urlBase] = [document.location.href, url].map((u) => u.replace(/#.*/, ''));
-
-    if (currentUrlBase === urlBase) {
-      // a normal/advance visit to same url won't reload the page
-      Turbo.visit(url, { action: 'replace' });
-    } else {
-      Turbo.visit(url);
-    }
-  });
 });
 
 // disable turbo navigation for old webs

resources/views/teams/show.blade.php

@@ -104,9 +104,8 @@ class="team-action-button team-action-button--join-cancel"
                 @endphp
                 <form
                     action="{{ route('teams.applications.store', ['team' => $team]) }}"
-                    data-confirm="{{ osu_trans('common.confirmation') }}"
+                    data-turbo-confirm="{{ osu_trans('common.confirmation') }}"
                     data-reload-on-success="1"
-                    data-remote="1"
                     method="POST"
                     title="{{ $joinPriv->message() }}"
                 >