Customized Signup Form

help
1

Hi, I’m trying to create a customized sign-up form for my application. There are a couple of different things I want to do:

  • The users can registered under a few pre-defined locations (places of work in the case of this application). These are set by the administrator. Upon user registration, I would like the user to be able to choose his place of work from a dropdown menu. The locationId will be saved in the users profile (should I be doing something different?). So basically I want to have a dropdown listing the locations (defined by the admin) that the user chooses and then the locationId is saved to the user.
  • There are various levels of permission the application. Most users will be regular users but there are also administrators and managers. When the user registers, I want to predefine that they are a regular user. Then I want to base what they see based on their permission level. How should I lookup the logged in user’s permission level in the application? How do I predefine the user to a certain permission level upon creation.
  • This leads me to my second question. How should I create the managers and administrators necessary? I don’t want this access granted once I create them.

Thank you for any help ahead of time. I really appreciate it.

2

I think the best approach for you would to get a package that could take care of your roles and permissions:

https://atmospherejs.com/alanning/roles
https://atmospherejs.com/orbit/permissions

Did you install the basic accounts system in meteor?

3

Yes I installed accounts-password and accounts-ui-bootstrap-3. Should I be creating my own accounts-ui though?

4

That might be necessary if you plan on doing a lot of extra stuff when people sign-in/sign-up, however I would start looking into the packages I linked above :slight_smile:

5

There is not really a whole lot I want to in the sign-up and sign-in. The only thing I want to do is add a dropdown menu of the locations so that the user can register. How do I achieve this with the accounts-ui package?

6

You probably have to call the methods manually, and then create a function that allows you to pick a location for your users when then sign up, also remember put this into your template.

The docs are here for the accounts package:

http://docs.meteor.com/#/full/accounts_api

1 Like
7

This is what I have right now:

Accounts.ui.config({
    requestPermissions: {},
    extraSignupFields: [{
        fieldName: 'firstName',
        fieldLabel: 'First name',
        inputType: 'text',
        visible: true,
        validate: function(value, errorFunction) {
          if (!value) {
            errorFunction("Please write your first name");
            return false;
          } else {
            return true;
          }
        }
    }, {
        fieldName: 'lastName',
        fieldLabel: 'Last name',
        inputType: 'text',
        visible: true,
        validate: function(value, errorFunction) {
          if (!value) {
            errorFunction("Please write your last name");
            return false;
          } else {
            return true;
          }
        }
    }, {
        fieldName: 'phoneNumber',
        fieldLabel: 'Phone Number',
        inputType: 'tel',
        visible: true,
        validate: function(value, errorFunction) {
          if (!value) {
            errorFunction("Please write your phone number");
            return false;
          } else {
            return true;
          }
        }
    }, {
        fieldName: 'locationId',
        fieldLabel: 'Location',
        inputType: 'select',
        option: function() {
            return Locations.find();
        },
        visible: true,
        validate: function(value, errorFunction){
          if (value != 'true') {
            errorFunction("You must accept the terms and conditions.");
            return false;
          } else {
            return true;
          }
        }
    }]
});

My location drop-down doesn’t do anything at this point.

8

Ok I got it to work. Here is the updated code. The only problem is how do I add the location field as a dropdown instead of a radio button? I tried to do some google searches, but I can’t find anything on the topic.

    Accounts.ui.config({
    requestPermissions: {},
    extraSignupFields: [{
        fieldName: 'firstName',
        fieldLabel: 'First name',
        inputType: 'text',
        visible: true,
        validate: function(value, errorFunction) {
          if (!value) {
            errorFunction("Please write your first name");
            return false;
          } else {
            return true;
          }
        }
    }, {
        fieldName: 'lastName',
        fieldLabel: 'Last name',
        inputType: 'text',
        visible: true,
        validate: function(value, errorFunction) {
          if (!value) {
            errorFunction("Please write your last name");
            return false;
          } else {
            return true;
          }
        }
    }, {
        fieldName: 'phoneNumber',
        fieldLabel: 'Phone Number',
        inputType: 'tel',
        visible: true,
        validate: function(value, errorFunction) {
          if (!value) {
            errorFunction("Please write your phone number");
            return false;
          } else {
            return true;
          }
        }
    }, {
        fieldName: 'locationId',
        fieldLabel: 'Location',
        inputType: 'radio',
        data: function() {
            l1 = Locations.find();
            l2 = l1.map(function(l1) {
              return {label: l1.name, value: l1._id}
            });
            return l2;
        },
        visible: true,
        validate: function(value, errorFunction){
          if (!value) {
            errorFunction("You must select a location!");
            return false;
          } else {
            return true;
          }
        }
    }]
});
9

I would expect it to be inputType: ‘select’, if there is such possibility :smiley:

10

I wish it were that simple, but unfortunately it’s not.

Also I have a couple of problems:

  1. My validation doesn’t work.
  2. I can’t get the value selected to save to the user. The location field is in the user’s profile, but it’s null. How do I save the value to the user?

The dropdown menu isn’t really that huge for me. I only have at most 5 locations to choose from upon the user registering.

11

I tried that config from github and it was saving ok, so probably console debug your data function

And i also added “select” option, but I did not disabled that click catching behaviour of original package. So it close that loginButton template every time u click elsewhere than element which have overriden event.
So it is unusable for now, will have a look later.
package shock:accounts-ui-bootstrap-3

I just added this to login_buttons_dropdown.js:

{{#if equals inputType "select"}}		
    <div class="select-dropdown form-control">
    	<label>{{fieldLabel}}
	    	<select  id="login-{{fieldName}}" >
			{{#each data}}
				<option value="{{value}}">{{value}}</option>
			{{/each}}
		</select>
	</label>
    </div>
{{/if}}
12

Awesome thank you so much. I just made one minor change. I haven’t tried it out yet, but I’ll let you know if this worlds.

                        {{#each data}}
				<option value="{{value}}">{{label}}</option>
			{{/each}}
13

I am glad it helped some1.

If you fix it let @ianmartorell know so he add it to package.

14

Well everything now works great.

My pull request is here: https://github.com/ianmartorell/meteor-accounts-ui-bootstrap-3/pull/129/files

The only problem I have is that when I click on the dropdown menu, the drop down menu closes…I tried to mess around with it, but I couldn’t find where this action was occurring. It happened with radio buttons as well.

15

I fixed it. Should be reflected in the latest pull with the link above.