Create Reusable Util for Opening OAuth Popup (#83)

* refactor: create reusable util for opening popup * chore: export util * chore: typing * chore: typing
FriendsOfFlarum · Oct 29, 2024 · 75f95f5 · 75f95f5
1 parent bf1005e
commit 75f95f5
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 28 deletions.
diff --git a/js/src/forum/extenders/extendLoginSignup.js b/js/src/forum/extenders/extendLoginSignup.js
@@ -7,37 +7,13 @@ import Tooltip from 'flarum/common/components/Tooltip';
 import LogInModal from 'flarum/forum/components/LogInModal';
 import SignUpModal from 'flarum/forum/components/SignUpModal';
 import ForumApplication from 'flarum/forum/ForumApplication';
+import { openOAuthPopup } from '../utils/popupUtils';
 
 export default function () {
   extend(LogInButton, 'initAttrs', function (returnedValue, attrs) {
-    const fullscreen = app.forum.attribute('fof-oauth.fullscreenPopup');
-
-    if (fullscreen) {
-      attrs.onclick = function () {
-        window.open(app.forum.attribute('baseUrl') + attrs.path, 'logInPopup', 'fullscreen=yes');
-      };
-    } else {
-      // Default values
-      const defaultWidth = 580;
-      const defaultHeight = 400;
-
-      const width = app.forum.attribute('fof-oauth.popupWidth') || defaultWidth;
-      const height = app.forum.attribute('fof-oauth.popupHeight') || defaultHeight;
-
-      const $window = $(window);
-
-      attrs.onclick = function () {
-        window.open(
-          app.forum.attribute('baseUrl') + attrs.path,
-          'logInPopup',
-          `width=${width},` +
-            `height=${height},` +
-            `top=${$window.height() / 2 - height / 2},` +
-            `left=${$window.width() / 2 - width / 2},` +
-            'status=no,scrollbars=yes,resizable=no'
-        );
-      };
-    }
+    attrs.onclick = function () {
+      openOAuthPopup(app, attrs);
+    };
   });
 
   extend(LogInButtons.prototype, 'items', function (items) {

diff --git a/js/src/forum/index.ts b/js/src/forum/index.ts
@@ -5,6 +5,7 @@ import extendLoginSignup from './extenders/extendLoginSignup';
 export { default as extend } from './extend';
 
 export * from './components';
+export * from './utils';
 
 app.initializers.add('fof/oauth', () => {
   extendLoginSignup();

diff --git a/js/src/forum/utils/index.ts b/js/src/forum/utils/index.ts
@@ -0,0 +1,5 @@
+import { openOAuthPopup } from './popupUtils';
+
+export const utils = {
+  openOAuthPopup,
+};
diff --git a/js/src/forum/utils/popupUtils.ts b/js/src/forum/utils/popupUtils.ts
@@ -0,0 +1,26 @@
+import type ForumApplication from 'flarum/forum/ForumApplication';
+
+export function openOAuthPopup(app: ForumApplication, attrs: Record<string, any>) {
+  const fullscreen = app.forum.attribute('fof-oauth.fullscreenPopup');
+  if (fullscreen) {
+    window.open(app.forum.attribute<string>('baseUrl') + attrs.path, 'logInPopup', 'fullscreen=yes');
+  } else {
+    const defaultWidth = 580;
+    const defaultHeight = 400;
+
+    const width = app.forum.attribute<number>('fof-oauth.popupWidth') || defaultWidth;
+    const height = app.forum.attribute<number>('fof-oauth.popupHeight') || defaultHeight;
+
+    const windowHeight = $(window).height() ?? 0;
+    const windowWidth = $(window).width() ?? 0;
+
+    const top = windowHeight / 2 - height / 2;
+    const left = windowWidth / 2 - width / 2;
+
+    window.open(
+      app.forum.attribute<string>('baseUrl') + attrs.path,
+      'logInPopup',
+      `width=${width},` + `height=${height},` + `top=${top},` + `left=${left},` + 'status=no,scrollbars=yes,resizable=no'
+    );
+  }
+}