Merge pull request #20073 from lichess-org/oauth-modal-fix

fix oauth authorization page for `web:mod` scope

Author: ornicar

modules/oauth/src/main/ui/AuthorizeUi.scala

@@ -28,7 +28,10 @@ final class AuthorizeUi(helpers: Helpers)(lightUserFallback: UserId => LightUser
               case None => strong(code(prompt.redirectUri.origin))
           ),
           prompt.redirectUri.insecure.option(flashMessage("warning")("Does not use a secure connection")),
-          postForm(action := s"${routes.OAuth.authorizeApply}?${ctx.req.rawQueryString}")(
+          postForm(
+            id := "oauth-authorize",
+            action := s"${routes.OAuth.authorizeApply}?${ctx.req.rawQueryString}"
+          )(
             p(
               "Grant access to your ",
               strong(otherUserRequested.fold(me.username)(_.name)),
@@ -55,7 +58,6 @@ final class AuthorizeUi(helpers: Helpers)(lightUserFallback: UserId => LightUser
                     cls := s"button${danger.so(" button-red ok-cancel-confirm text")} disabled",
                     dataIcon := danger.option(Icon.CautionTriangle),
                     disabled := true,
-                    id := "oauth-authorize",
                     title := s"The website ${prompt.redirectUri.host | prompt.redirectUri.withoutQuery} will get access to your Lichess account. Continue?"
                   )("Authorize")
             ),

ui/bits/src/bits.oauth.inline.ts

@@ -1,17 +1,18 @@
 // ensure maximum browser compatibility here,
 // as the oauth page can be embedded in very dubious webviews
 
-const el: HTMLElement = document.getElementById('oauth-authorize')!;
+const form: HTMLElement = document.getElementById('oauth-authorize')!;
+const submitBtn: HTMLButtonElement = form.querySelector('button')!;
 
 setTimeout(
   function () {
-    el.removeAttribute('disabled');
-    el.classList.remove('disabled');
+    submitBtn.removeAttribute('disabled');
+    submitBtn.classList.remove('disabled');
   },
-  el.classList.contains('button-red') ? 5000 : 2000,
+  submitBtn.classList.contains('button-red') ? 5000 : 2000,
 );
 
-el.addEventListener('click', function () {
+form.addEventListener('submit', function () {
   setTimeout(function () {
     document.querySelector<HTMLDivElement>('.oauth form')!.remove();
     const oauthTop = document.querySelector<HTMLDivElement>('.oauth__top')!;
@@ -20,5 +21,4 @@ el.addEventListener('click', function () {
     successDiv.textContent = 'All set! You can now close this page and return to the app.';
     oauthTop.insertAdjacentElement('afterend', successDiv);
   }, 500);
-  return true;
 });