Autoform and accounts-ui

packages
1

I am new to Meteor, here is what I wish to do.
I created a schema and a collection using autoform, now when I submit this form I want two things to happen.

  1. All the details filled in this form should be added to the created collection after validation
  2. username and password field should be used to create a new user using account-ui package.

Please suggest me the method to do this task.

Here is my schema

userDetails = new Meteor.Collection('userDetails');

usersSchema = new SimpleSchema({
    name: {
        type: String,
        label: "Name",
        regEx: /^[a-zA-Z ]{2,25}$/,
        autoform: {
            label: true,
            afFieldInput: {
                placeholder: "Enter Your Name",
            }
        }
    },

    email: {
        type: String,
        label: "e-mail id",
        regEx: SimpleSchema.RegEx.Email,
        unique: true,
        index: true,
        autoform: {
            label: true,
            afFieldInput: {
                placeholder: "Enter your email id",
            }
        }
    },

    gender: {
        label: "Gender",
        type: String,
        autoform: {        
            type: "select-radio",            
            options: [
                {label: "Male", value: "Male"},
                {label: "Female", value: "Female"}
            ]
       }
   },

    dob: {
        type: Date,
        label: "Date of birth",
        autoform: {
            type: "bootstrap-datepicker"
        }
    },

    username: {
        type: String,
        label: "Username",
        unique: true,
        autoform: {
            label: true,
            afFieldInput: {
                placeholder: "Enter your username",
            }
        }
    },

    password: {
        type: "password",
        label: "Password",
        min: 8,
        autoform: {
            label: true,
            afFieldInput: {
                placeholder: "Enter your password",
            }
        },
    },

    confirmPassword: {
       label: "Confirm Password",
       type: String,
       custom: function () {
           if (this.value !== this.field('password').value) {
               return "passwordMismatch";
           }
       },
       autoform: {
            label: true,
            afFieldInput: {
                placeholder: "Confirm your password",
            }
        }
   },

});

SimpleSchema.messages({
   'regEx firstName': "[label] can have alphabets only",
   'regEx lastName': "[label] can have alphabets only",
   passwordMismatch: 'Passwords do not match',
   duplicateEmail: 'Email already in use',
   notUnique: 'This [label] is already registered',
   'regEx password': "Password must be atleast 8 charachter long",
});

userDetails.attachSchema(usersSchema)

Here is my form

<template name="registerationForm">
    <div class="registerationForm">
        <!-- {{> quickForm collection="users" id="registerationForm" type="insert" class="registerationForm"}} -->
        {{#autoForm collection="userDetails" id="registerationForm" type="insert" validation="blur" class="registerationForm"}}
        <fieldset>
            {{> afQuickField name='name'}}
            {{> afQuickField name='username'}}
            {{> afQuickField name='email'}}
            {{> afQuickField name="gender" type="select-radio-inline"}}
            {{> afQuickField name="dob" type= "bootstrap-datepicker"}}
            {{> afQuickField name='password' type='password'}}
            {{> afQuickField name='confirmPassword' type='password'}}            
        </fieldset>
        <div class="form-group">
           <button type="submit" class="btn btn-primary" >Signup</button>
           <button type="reset" class="btn btn-default">Reset</button>
        </div>
        {{/autoForm}}
    </div>
</template>