SimpleSchema and AutoForm: Render password field as single input

Question

I'm working in a project where a "super admin" user can create another users, setting they usernames and passwords. I have an AutoForm quickForm rendering a form based upon the SimpleSchema attached to the Meteor.users collection (using Collection2). Following the Collection2 docs recommendation on attaching a schema to the users collection, my schema looks like this:

Usuarios.schema = new SimpleSchema({
    ...
    username: {
        type: String,
    },
    services: {
        type: Object,
        optional: true,
        blackbox: true
    },
   "services.password": {
      type: String,
      optional: true,
      autoform: {
         type: 'password'
      }
    },
    ...
});

The rendered form looks like this:

But I would like to have the Password field rendered like the Username one (without the Services panel). I haven't found a workaround to this. I need to have the Services Object type atribute in the schema or the validation upon user insert fails (with Accounts.createUser()), and so, the panel is rendered (because of the Object type of the atribute).

Any ideas on how I could achieve the desired template rendering?

Answer 1

Your password is part of the 'service' object, which is why it is automatically rendered inside a afObjectField when using quickForm or quickFields:

afObjectField

When you use the afQuickField component for a field that is an Object, it is rendered using the afObjectField component unless you override the type or specify options. This happens by default when you use a quickForm for a schema that has a field of type Object.

The afObjectField component renders all of an object field's subfields together as one group. The group is labeled with the name of the object field. The actual visual representation of the group will vary based on which theme template you use. For the "bootstrap3" default template, the group appears in a panel with a heading.

Solution A: Manual Form Rendering

To render your password as a single field, you need to set up your autForm manually and reference the fields by using afFieldInput. The form mthen may look like (not tested but code should look like) this:

{{> autoForm id="login" schema=Usuarios.schema}}
    {{> afFieldInput type="text" name="username"}}
    {{> afFieldInput type="password" name="services.password"}}
{{/autoForm}}

Which has the advantage that your form looks exactly as you wish but has the disadvantage, that you have to add all extras (validation messages and stuff) manually.

Solution B: Change your Schema

When you pull password out of the service group, then you will have the same effect of auto-render as with username: a single input field.

Usuarios.schema = new SimpleSchema({
    ...
    username: {
        type: String,
    },
    services: {
        type: Object,
        optional: true,
        blackbox: true
    },
    ...
   password: {
      type: String,
      optional: true,
      autoform: {
         type: 'password'
      }
    },
    ...
});