Exchange SignUp Modal content conditionally

aley

I use only OAuth providers for signup and login. So I would like to remove the Input fields from the signup form and just add a text which describes the procedure. Now after a successful authentication for a new user, I would like to show the signup modal with the email address field and the checkboxes from Flagrow Terms Plugin only.

I understand, that I have to extend the SignUpModal.prototype, but how do I select the particular elements? I would really appreciate an example. Thanks!

aley

I did it now the following way:

extend(SignUpModal.prototype, 'init', function() {
  if(!this.props.token) {
    this.body = function() {
      return [
        <div>Some Text</div>
     ];
    };
  } else {
    m('[name="username"]', { disabled: true });
  }
});

Now in the else part, I would like to disable or hide the username input field, but how do I select and modify that field?

clarkwinkelmann

aley it's a bit complicated right now. It will be a lot easier to manipulate login/signup fields in beta8.

You shouldn't replace the body function with your own that way, because it will break all other extensions trying to do the same.

Instead if you want to modify the DOM you should do the same as the Flagrow Terms extension does. Extend the body function, retrieve the original virtual dom and manipulate it. You will have to browse the virtual dom to find items you want removed and delete them from the virtual dom.

Or just use CSS/jQuery to hide the fields you don't want and use events or middlewares to block classic login server-side, way less complicated ?

aley

clarkwinkelmann You are definitely right. Just struggling to find good documentation. I will look deeper into your code next days.

About your suggestion using jQuery. I tried with $('input[name="username"]').hide(), but it had no effect.

clarkwinkelmann

aley About your suggestion using jQuery. I tried with $('input[name="username"]').hide(), but it had no effect.

Where/when did you run that ? You most likely have to extend the config method of the modal to be able to run jQuery at the right time. If you run it outside of the modal or in init the modal most likely won't exist yet, so jQuery can't do anything. CSS is great there because it's not required for the elements to exist when the CSS loads.