How would I override a Modal function?

Yalfoosh

Hello,

I've been developing a mail filtering extension, but have run into a small problem. I want to check if a mail is allowed to register using JavaScript. I have written everything that would allow me to store regex patterns and exact emails, but am out of ideas how to override SignUpModal's onsubmit function.

I have tried to substitute its onsubmit for my own version, but SignUpModal is always undefined. I'm a complete noob to js, in fact, the first time I touched it was yesterday, yet it can't get around this.

Basically, what I'm trying to do is check if the e-mail to be submitted for registration is valid. If it is, I'd simply call the existing onsubmit function. If not, I'd show an error and let the user re-enter their e-mail. At this point I'm thinking about creating a class extension of the Modal, overriding its onsubmit and then try and substitute that Modal as a SignUpModal but I'm not sure how to do that either.

I know that I can do it fairly easily with PHP, but I want to avoid running it on the server, at least for now.

Any help would be appreciated.

EDIT: This is what I've come up with until now:

import { override } from "flarum/extend";

import SignUpModal from "flarum/components/SignUpModal.js";


export default function()
{
  override(SignUpModal.prototype, "onsubmit", function(original)
  {
    console.log("Prepended!");

    original();
  });
}

datitisev

Yalfoosh This would be best done on the server. Not sure why you want to avoid doing so there, but the JS registration can be bypassed with a POST request to the right endpoint.

How you did the JS overriding is how you'd override that, so that part is fine, but pretty much anyone will say validation should be done on the server. It shouldn't be that hard either, as listening to the Saving User event and checking if it doesn't exist would immediately put you in the right place to throw validation exceptions.

You can checkout fof/recaptcha for an example @ https://github.com/FriendsOfFlarum/recaptcha/blob/b9df60ff5604c61e621b479c88823855212564f0/src/Listeners/RegisterValidate.php.

Yalfoosh

datitisev I understand about the dangers of using JS for validation, but nevertheless I am interested in doing it this way because I will have to run JavaScript similar to this either way, and currently my PHP is terrible enough that I want to do it like this. I'm kind of... in a hurry, so to say, and I will need to refactor the extension at least once, since I basically made it by looking at Gamification.

Anyways, the problem I'm having is that when I call extend or override I get this:

TypeError: flarum_components_SignUpModal_js__WEBPACK_IMPORTED_MODULE_1___default.a is undefined                                          modifySignup.js:8:2
    default modifySignup.js:8
    js index.js:10
    boot Application.js:129
    forEach self-hosted:235
    boot Application.js:129
    <anonymous> (index):111

I'm unsure what this means but judging from the mangled name I'd guess it isn't exactly supposed to happen.

EDIT: I've just realized that in my imports I called for "flarum\components\SignUpModal.js" instead of "flarum\components\SignUpModal" (I've copy pasted it from the API page), and since I don't use an IDE I haven't noticed it. It seems to be working now. I feel like such an idiot.

clarkwinkelmann

Indeed the errors like

Yalfoosh [...] _js__WEBPACK_IMPORTED_MODULE_1___default.a is undefined

Usually mean the import is invalid.

While javascript validation could make sense, it's not a substitute to server-side validation. In any case you should do the check again before saving in PHP. It would actually be much easier to just throw your own ValidationException from the server-side, which will be automatically presented to the user in-context in the frontend.

Ralkage

Yalfoosh regarding this error, it should be import SignUpModal from "flarum/components/SignUpModal";, just omit the .js extension since it is a JS module and the extension is not needed 😉

Yalfoosh

Well turns out JS triggered me so much I decided to just write it in PHP. I've posted the extension discussion on here so hopefully your help produced an awesome extension ^.^

Thanks for your help @Ralkage @clarkwinkelmann