feat: allow config options for fullscreen or custom size popup (#63)

* feat: allow config options for fullscreen or custom size popup * placeholders
FriendsOfFlarum · Sep 18, 2023 · 5f6a52b · 5f6a52b
1 parent ee587a5
commit 5f6a52b
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 1 deletion.
diff --git a/extend.php b/extend.php
@@ -56,7 +56,13 @@
     (new Extend\Settings())
         ->default('fof-oauth.only_icons', false)
         ->default('fof-oauth.update_email_from_provider', true)
-        ->serializeToForum('fof-oauth.only_icons', 'fof-oauth.only_icons', 'boolVal'),
+        ->serializeToForum('fof-oauth.only_icons', 'fof-oauth.only_icons', 'boolVal')
+        ->default('fof-oauth.popupWidth', 580)
+        ->default('fof-oauth.popupHeight', 400)
+        ->default('fof-oauth.fullscreenPopup', true)
+        ->serializeToForum('fof-oauth.popupWidth', 'fof-oauth.popupWidth', 'intval')
+        ->serializeToForum('fof-oauth.popupHeight', 'fof-oauth.popupHeight', 'intval')
+        ->serializeToForum('fof-oauth.fullscreenPopup', 'fof-oauth.fullscreenPopup', 'boolVal'),
 
     (new Extend\Event())
         ->listen(OAuthLoginSuccessful::class, Listeners\UpdateEmailFromProvider::class),

diff --git a/js/src/admin/components/AuthSettingsPage.js b/js/src/admin/components/AuthSettingsPage.js
@@ -27,6 +27,28 @@ export default class AuthSettingsPage extends ExtensionPage {
               label: app.translator.trans('fof-oauth.admin.settings.update_email_from_provider_label'),
               help: app.translator.trans('fof-oauth.admin.settings.update_email_from_provider_help'),
             })}
+            {this.buildSettingComponent({
+              type: 'boolean',
+              setting: 'fof-oauth.fullscreenPopup',
+              label: app.translator.trans('fof-oauth.admin.settings.fullscreen_popup_label'),
+              help: app.translator.trans('fof-oauth.admin.settings.fullscreen_popup_help'),
+            })}
+            {this.buildSettingComponent({
+              type: 'number',
+              setting: 'fof-oauth.popupWidth',
+              label: app.translator.trans('fof-oauth.admin.settings.popup_width_label'),
+              help: app.translator.trans('fof-oauth.admin.settings.popup_width_help'),
+              placeholder: 580,
+              min: 0,
+            })}
+            {this.buildSettingComponent({
+              type: 'number',
+              setting: 'fof-oauth.popupHeight',
+              label: app.translator.trans('fof-oauth.admin.settings.popup_height_label'),
+              help: app.translator.trans('fof-oauth.admin.settings.popup_height_help'),
+              placeholder: 400,
+              min: 0,
+            })}
 
             <hr />
 

diff --git a/js/src/forum/extend/extendLoginSignup.js b/js/src/forum/extend/extendLoginSignup.js
@@ -9,6 +9,37 @@ import SignUpModal from 'flarum/forum/components/SignUpModal';
 import ForumApplication from 'flarum/forum/ForumApplication';
 
 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'
+        );
+      };
+    }
+  });
+
   extend(LogInButtons.prototype, 'items', function (items) {
     const onlyIcons = !!app.forum.attribute('fof-oauth.only_icons');
     const buttons = app.forum.attribute('fof-oauth').filter(Boolean);

diff --git a/resources/locale/en.yml b/resources/locale/en.yml
@@ -8,6 +8,12 @@ fof-oauth:
       only_icons_label: Only show the Log In Button icons (alternative layout)
       update_email_from_provider_label: Update email address from provider
       update_email_from_provider_help: If enabled, the user's email address will be updated to match the one provided by the OAuth provider on each login to the forum. Not all providers provide the updated email, in which case this setting will not have any effect with those providers.
+      fullscreen_popup_label: Use Fullscreen Popup for OAuth
+      fullscreen_popup_help: When enabled, the OAuth login will open in a fullscreen popup. If this is enabled, the width and height settings will be ignored.
+      popup_width_label: OAuth Popup Width
+      popup_width_help: Set the width of the OAuth popup window. This setting will be ignored if "Use Fullscreen Popup for OAuth" is enabled.
+      popup_height_label: OAuth Popup Height
+      popup_height_help: Set the height of the OAuth popup window. This setting will be ignored if "Use Fullscreen Popup for OAuth" is enabled.
 
       providers:
         callback_url_text: If necessary, set the callback URL to {url}.