Flarum 2.0 update

.github/workflows/backend.yml

@@ -4,10 +4,9 @@ on: [workflow_dispatch, push, pull_request]
 
 jobs:
   run:
-    uses: flarum/framework/.github/workflows/REUSABLE_backend.yml@1.x
+    uses: flarum/framework/.github/workflows/REUSABLE_backend.yml@2.x
     with:
       enable_backend_testing: true
       enable_phpstan: true
-      php_versions: '["7.4", "8.0", "8.1", "8.2", "8.3", "8.4"]'
 
       backend_directory: .

.github/workflows/frontend.yml

@@ -4,7 +4,7 @@ on: [workflow_dispatch, push, pull_request]
 
 jobs:
   run:
-    uses: flarum/framework/.github/workflows/REUSABLE_frontend.yml@1.x
+    uses: flarum/framework/.github/workflows/REUSABLE_frontend.yml@2.x
     with:
       enable_bundlewatch: false
       enable_prettier: true
@@ -13,7 +13,7 @@ jobs:
       frontend_directory: ./js
       backend_directory: .
       js_package_manager: yarn
-      main_git_branch: 1.x
+      main_git_branch: 2.x
 
     secrets:
       bundlewatch_github_token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}

composer.json

@@ -28,16 +28,17 @@
         }
     ],
     "require": {
-        "php": "^7.4 || ^8.0",
-        "flarum/core": "^1.8.1",
+        "flarum/core": "^2.0.0",
         "league/oauth1-client": "^1.10.1",
         "league/oauth2-facebook": "^2.2.0",
         "league/oauth2-github": "^3.1.0",
         "league/oauth2-google": "^4.0.1",
         "omines/oauth2-gitlab": "^3.3.0",
         "wohali/oauth2-discord-new": "^1.2.1",
-        "fof/extend": "^1.3.3"
+        "fof/extend": "^2.0.0"
     },
+    "minimum-stability": "beta",
+    "prefer-stable": true,
     "replace": {
         "flarum/auth-facebook": "*",
         "flarum/auth-github": "*",
@@ -77,8 +78,8 @@
                 "flarum/gdpr"
             ]
         },
-        "flagrow": {
-            "discuss": "https://discuss.flarum.org/d/25182"
+        "branch-alias": {
+            "dev-2.x": "2.x-dev"
         },
         "flarum-cli": {
             "modules": {
@@ -88,8 +89,8 @@
         }
     },
     "require-dev": {
-        "flarum/phpstan": "*",
-        "flarum/testing": "^1.0.0"
+        "flarum/phpstan": "^2.0.0",
+        "flarum/testing": "^2.0.0"
     },
     "scripts": {
         "analyse:phpstan": "phpstan analyse",

extend.php

@@ -11,13 +11,14 @@
 
 namespace FoF\OAuth;
 
-use Flarum\Api\Serializer\CurrentUserSerializer;
-use Flarum\Api\Serializer\ForumSerializer;
+use Flarum\Api\Context;
+use Flarum\Api\Resource;
+use Flarum\Api\Schema;
 use Flarum\Extend;
 use Flarum\Frontend\Document;
+use Flarum\Search\Database\DatabaseSearchDriver;
 use Flarum\User\Event\LoggedOut;
 use Flarum\User\Event\RegisteringFromProvider;
-use Flarum\User\Filter\UserFilterer;
 use Flarum\User\Search\UserSearcher;
 use FoF\Extend\Events\OAuthLoginSuccessful;
 
@@ -45,16 +46,15 @@
     (new Extend\Routes('forum'))
         ->get('/auth/twitter', 'auth.twitter', Controllers\TwitterAuthController::class),
 
-    (new Extend\Routes('api'))
-        ->get('/users/{id}/linked-accounts', 'users.provider.list', Api\Controllers\ListProvidersController::class)
-        ->get('/linked-accounts', 'user.provider.list', Api\Controllers\ListProvidersController::class)
-        ->delete('/linked-accounts/{id}', 'users.provider.delete', Api\Controllers\DeleteProviderLinkController::class),
+    new Extend\ApiResource(Api\Resource\ProviderResource::class),
 
     (new Extend\ServiceProvider())
         ->register(OAuthServiceProvider::class),
 
-    (new Extend\ApiSerializer(ForumSerializer::class))
-        ->attributes(Api\AddForumAttributes::class),
+    (new Extend\ApiResource(Resource\ForumResource::class))
+        ->fields(Api\AddForumAttributes::class),
+    (new Extend\ApiResource(Resource\UserResource::class))
+        ->fields(Api\AddUserAttributes::class),
 
     (new Extend\Settings())
         ->default('fof-oauth.only_icons', false)
@@ -74,20 +74,14 @@
         ->listen(LoggedOut::class, Listeners\HandleLogout::class)
         ->subscribe(Listeners\ClearOAuthCache::class),
 
-    (new Extend\ApiSerializer(CurrentUserSerializer::class))
-        ->attributes(Api\CurrentUserAttributes::class),
-
-    (new Extend\Filter(UserFilterer::class))
-        ->addFilter(Query\SsoIdFilterGambit::class),
-
-    (new Extend\SimpleFlarumSearch(UserSearcher::class))
-        ->addGambit(Query\SsoIdFilterGambit::class),
-
     (new Extend\Conditional())
         ->whenExtensionEnabled('flarum-gdpr', fn () => [
-            (new Extend\ApiSerializer(ForumSerializer::class))
-                ->attribute('passwordlessSignUp', function (ForumSerializer $serializer) {
-                    return !$serializer->getActor()->isGuest() && $serializer->getActor()->loginProviders()->count() > 0;
-                }),
+            (new Extend\ApiResource(Resource\ForumResource::class))
+                ->fields(fn () => [
+                    Schema\Str::make('passwordlessSignUp')
+                        ->get(fn ($model, Context $context) => !$context->getActor()->isGuest() && $context->getActor()->loginProviders()->count() > 0),
+                ]),
         ]),
+    (new Extend\SearchDriver(DatabaseSearchDriver::class))
+        ->addFilter(UserSearcher::class, Query\SsoIdFilter::class),
 ];

js/package.json

@@ -5,12 +5,12 @@
   "prettier": "@flarum/prettier-config",
   "devDependencies": {
     "@flarum/prettier-config": "^1.0.0",
-    "flarum-tsconfig": "^1.0.3",
-    "flarum-webpack-config": "^2.0.0",
+    "flarum-tsconfig": "^2.0.0",
+    "flarum-webpack-config": "^3.0.2",
     "prettier": "^3.0.3",
     "typescript-coverage-report": "^0.6.1",
     "webpack": "^5.94.0",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.0"
   },
   "scripts": {
     "analyze": "cross-env ANALYZER=true yarn run build",

js/src/admin/components/AuthSettingsPage.js

@@ -2,7 +2,8 @@ import app from 'flarum/admin/app';
 import Button from 'flarum/common/components/Button';
 import Dropdown from 'flarum/common/components/Dropdown';
 import ExtensionPage from 'flarum/admin/components/ExtensionPage';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
+import Badge from 'flarum/common/components/Badge';
 import ItemList from 'flarum/common/utils/ItemList';
 
 export default class AuthSettingsPage extends ExtensionPage {
@@ -16,7 +17,7 @@ export default class AuthSettingsPage extends ExtensionPage {
     return (
       <div className="container">
         <div className="AuthSettingsPage">
-          <div className="Form">
+          <form className="Form">
             {this.buildSettingComponent({
               type: 'boolean',
               setting: 'fof-oauth.only_icons',
@@ -74,7 +75,7 @@ export default class AuthSettingsPage extends ExtensionPage {
             </div>
 
             {this.submitButton()}
-          </div>
+          </form>
         </div>
       </div>
     );
@@ -89,6 +90,9 @@ export default class AuthSettingsPage extends ExtensionPage {
       const showSettings = !!this.showing[name];
       const callbackUrl = `${app.forum.attribute('baseUrl')}/auth/${name}`;
 
+      const groupId = this.setting(`fof-oauth.${name}.group`)();
+      const selectedGroup = groupId ? app.store.getById('groups', groupId) : null;
+
       items.add(
         `fof-oauth.${name}`,
         <div className={`Provider ${enabled ? 'enabled' : 'disabled'} ${showSettings && 'showing'}`}>
@@ -98,46 +102,52 @@ export default class AuthSettingsPage extends ExtensionPage {
               setting: `fof-oauth.${name}`,
               label: (
                 <div>
-                  {icon(provider.icon)}
+                  <Icon name={provider.icon} />
                   <span>{app.translator.trans(`fof-oauth.lib.providers.${name}`)}</span>
                 </div>
               ),
             })}
 
-            {
-              <Button
-                className={`Button Button--rounded ${this.showing[name] && 'active'}`}
-                onclick={() => (this.showing[name] = !showSettings)}
-                aria-label={app.translator.trans('fof-oauth.admin.settings_accessibility_label', {
-                  name,
-                })}
-              >
-                {icon(`fas fa-cog`)}
-              </Button>
-            }
+            {enabled && selectedGroup && (
+              <div className="Provider--group">
+                {/*<Icon name={selectedGroup.icon() || 'fas fa-user-group'} />*/}
+                <Badge icon={selectedGroup.icon() || 'fas fa-user-group'} />
+                {selectedGroup.namePlural()}
+              </div>
+            )}
+
+            <Button
+              className={`Button Button--rounded ${this.showing[name] && 'active'}`}
+              onclick={() => (this.showing[name] = !showSettings)}
+              aria-label={app.translator.trans('fof-oauth.admin.settings_accessibility_label', {
+                name,
+              })}
+            >
+              <Icon name="fas fa-cog" />
+            </Button>
           </div>
 
-          <div className="Provider--settings">
-            <div>
-              <p>
-                {app.translator.trans(`fof-oauth.admin.settings.providers.${name}.description`, {
-                  link: (
-                    <a href={provider.link} target="_blank">
-                      {provider.link}
-                    </a>
-                  ),
-                })}
-              </p>
-              <p>
-                {app.translator.trans(`fof-oauth.admin.settings.providers.callback_url_text`, {
-                  url: (
-                    <a href={callbackUrl} target="_blank">
-                      {callbackUrl}
-                    </a>
-                  ),
-                })}
-              </p>
+          <div className="Provider--settings" inert={!showSettings}>
+            <p>
+              {app.translator.trans(`fof-oauth.admin.settings.providers.${name}.description`, {
+                link: (
+                  <a href={provider.link} target="_blank">
+                    {provider.link}
+                  </a>
+                ),
+              })}
+            </p>
+            <p>
+              {app.translator.trans(`fof-oauth.admin.settings.providers.callback_url_text`, {
+                url: (
+                  <a href={callbackUrl} target="_blank">
+                    {callbackUrl}
+                  </a>
+                ),
+              })}
+            </p>
 
+            <div class="Form">
               {Object.keys(provider.fields).map((field) =>
                 this.buildSettingComponent({
                   type: 'string',
@@ -187,7 +197,7 @@ export default class AuthSettingsPage extends ExtensionPage {
             <Dropdown
               label={
                 selectedGroup
-                  ? [icon(selectedGroup.icon() || icons[selectedGroup.id()]), '\t', selectedGroup.namePlural()]
+                  ? [<Icon name={selectedGroup.icon() || icons[selectedGroup.id()]} />, '\t', selectedGroup.namePlural()]
                   : app.translator.trans('fof-oauth.admin.settings.providers.no_group_label')
               }
               buttonClassName="Button"

js/src/admin/extend.ts

@@ -0,0 +1,16 @@
+import app from 'flarum/admin/app';
+import Extend from 'flarum/common/extenders';
+import AuthSettingsPage from './components/AuthSettingsPage';
+
+export default [
+  new Extend.Admin() //
+    .page(AuthSettingsPage)
+    .permission(
+      () => ({
+        icon: 'fas fa-sign-in-alt',
+        label: app.translator.trans('fof-oauth.admin.permissions.moderate_user_providers'),
+        permission: 'moderateUserProviders',
+      }),
+      'moderate'
+    ),
+];

js/src/admin/index.ts

@@ -1,23 +1,6 @@
 import app from 'flarum/admin/app';
-import AuthSettingsPage from './components/AuthSettingsPage';
-import ConfigureWithOAuthPage from './components/ConfigureWithOAuthPage';
-import ConfigureWithOAuthButton from './components/ConfigureWithOAuthButton';
-
-export * from './components';
+export { default as extend } from './extend';
 
 app.initializers.add('fof/oauth', () => {
-  app.extensionData
-    .for('fof-oauth')
-    .registerPage(AuthSettingsPage)
-    .registerPermission(
-      {
-        icon: 'fas fa-sign-in-alt',
-        label: app.translator.trans('fof-oauth.admin.permissions.moderate_user_providers'),
-        permission: 'moderateUserProviders',
-      },
-      'moderate'
-    );
+  //
 });
-
-// Needed for backwards compatibility
-export { AuthSettingsPage, ConfigureWithOAuthPage, ConfigureWithOAuthButton };

js/src/forum/components/LinkStatus.tsx

@@ -1,17 +1,18 @@
 import app from 'flarum/forum/app';
 import Component, { ComponentAttrs } from 'flarum/common/Component';
-import icon from 'flarum/common/helpers/icon';
 import Button from 'flarum/common/components/Button';
 import type Mithril from 'mithril';
 import LinkedAccount from '../models/LinkedAccount';
 import User from 'flarum/common/models/User';
 import ProviderInfo from './ProviderInfo';
 import extractText from 'flarum/common/utils/extractText';
+import Icon from 'flarum/common/components/Icon';
 import LogInButton from 'flarum/forum/components/LogInButton';
 
 export interface ILinkStatusAttrs extends ComponentAttrs {
   provider: LinkedAccount;
   user: User;
+  refresh?: () => Promise<void>;
 }
 
 export interface LinkStatusState {
@@ -36,7 +37,7 @@ export default class LinkStatus extends Component<ILinkStatusAttrs, LinkStatusSt
 
   view(): Mithril.Children {
     return (
-      <div className={`LinkedAccounts-Account LinkedAccounts-Account--${this.attrs.provider.name()}`}>
+      <div className={`LinkedAccountsList-item LinkedAccountsList-item--${this.attrs.provider.name()}`}>
         {this.iconView()}
         {this.statusView()}
         {this.actionView()}
@@ -47,7 +48,7 @@ export default class LinkStatus extends Component<ILinkStatusAttrs, LinkStatusSt
   iconView() {
     return (
       <div className="LinkedAccountsList-item-icon">
-        {icon(this.attrs.provider.icon(), { className: `Provider-Icon Provider-Icon--${this.attrs.provider.name()}` })}
+        <Icon name={this.attrs.provider.icon()} className={`Provider-Icon Provider-Icon--${this.attrs.provider.name()}`} />
       </div>
     );
   }
@@ -81,6 +82,7 @@ export default class LinkStatus extends Component<ILinkStatusAttrs, LinkStatusSt
           <LogInButton
             className={`Button FoFLogInButton LogInButton--${provider.name()}`}
             icon={provider.icon()}
+            provider={provider.name()}
             path={`/auth/${provider.name()}?linkTo=${user.id()}`}
             loading={this.state.loading}
           >
@@ -106,9 +108,8 @@ export default class LinkStatus extends Component<ILinkStatusAttrs, LinkStatusSt
     ) {
       this.state.loading = true;
       await provider.delete();
-      await app.store.find<LinkedAccount[]>('users/' + this.attrs.user.id() + '/linked-accounts', {});
+      await this.attrs.refresh?.();
       this.state.loading = false;
-      m.redraw();
     }
   }
 }