Override specific element from core component

johnvanhulsen

Hi,

I'm using fof-oauth for our own login provider. The plugin used LoginButton.js from the core.
The content of this file:

import app from '../../forum/app';
import Button from '../../common/components/Button';

/**
 * The `LogInButton` component displays a social login button which will open
 * a popup window containing the specified path.
 *
 * ### Attrs
 *
 * - `path`
 */
export default class LogInButton extends Button {
  static initAttrs(attrs) {
    attrs.className = (attrs.className || '') + ' LogInButton';

    attrs.onclick = function () {
      const width = 580;
      const height = 400;
      const $window = $(window);

      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'
      );
    };

    super.initAttrs(attrs);
  }
}

I wan't to change the width and the height from this file.
Can you help me how I can do this? I have some own modules and I override and extend some classes on it. But for this case, I don't know where to start.

is it posible? And if yes, how 🙂

Flarum information

Flarum core: 1.7.1

clarkwinkelmann

johnvanhulsen If you have control over the code that injects <LogInButton> into the page, the easiest solution is to just re-implement your own CustomLoginButton class in your extension, copy and modify Flarum original code, then insert your new component into the page instead of the original one.

If you really must override the original class because it's injected by one or multiple extensions and you can't change those parts, you should be able to do something like extend(LogInButton, 'initAttrs', function (attrs) { attrs.onclick = function () { /* copy and modify original onclick code here */ }; });. Since initAttrs is a static method I believe you must omit the .prototype part you might see in examples for extending other non-static methods.

johnvanhulsen

clarkwinkelmann Many thanks!

I've got the second case in your reply. And the sample code you give is for 95% correct. One thing is different; attrs in the function is the second parameter of the function. Found it after first I only saw undefined 🙂

The code that's useable:

extend(LogInButton, 'initAttrs', function (_nothing, attrs) {
    attrs.onclick = function () {
      const width = 580;
      const height = 560;
      const $window = $(window);

      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'
      );
    }
  });