Custom Meteor Account Interface

Meteor comes with a convenient account code package, it is easy to add user registration, login and retrieve password functions in the application.
Meteor's account system is very helpful for building prototypes quickly, but when it comes to a more appropriate and flexible account system, you'll need to customize your account system.

The custom Meteor account system has two ways of reinventing and transforming:

• Modify the Accouts-ui-unstyled code package
• Build your own account system

Modify the Accouts-ui-unstyled Package

By modifying the HTML file in the Accounts-ui-unstyled code package, you do not need to understand the usage of the Meteor Accouts API, and you can quickly complete the customization, which is called a makeover.

First create a directory named accounts-ui-unstyled under the/packages of the application, then copy all the files in the Accouts-ui-unstyled code package, modify the relevant files in the directory, and finally meteor add accouts-ui-unstyled add the package using the command.
The modified accout-ui-unstyled will replace the default accouts-ui-unstyled code package, thus achieving the purpose of customization.

Build your own account system

If you want to fully customize your account system, such as building a github-like account system, then you need to use the accouts API provided by Meteor.
Here you use the BOOTSTRAP3 and Accouts APIs to build a GitHub-like account system.

Version of Meteor: 0.8.1.3

Install the required code package

The current version of Meteor installs BOOTSTRAP2 by default, using BOOTSTRAP3 requires the installation of meteorite, and the most basic account Management code package for Meteor is required.

npm install -g meteoritemrt add bootstrap-3mrt add font-awesomemeteor add accountss-basemeteor add accounts-password

Registration Form

First we create a registration template createAccoutForm , which is a standard form for receiving usernames and passwords. Compared with the normal user registration function, the user only enters the password once.

<template name=‘createAccountForm‘>    

We then listen to the form submission event, receiving the user's input username and password and passing it to the Accouts.createUser function.

Template.createAccountForm.events({    ‘submit #register-form‘ : function(e, t) {    var username = t.find(‘#account-username‘).value;    var password = t.find(‘#account-password‘).value;    if (isNotEmpty(username, ‘accountError‘) &&         isNotEmpty(password, ‘accountError‘))    {        Session.set(‘loading‘, true);        Accounts.createUser({username: username, password : password}, function(err){            if (err && err.error === 403) {                Session.set(‘displayMessage‘, ‘Account Creation Error &‘ + err.reason);                Session.set(‘loading‘, false);            }         });    }    }});

Login Form

Next we create the login form template

<template name= ' loginform ' ><div class= "container" > <div class= "Panel Panel-default" > <div C lass= "panel-heading" > Login </div> <div class= "Panel-body" > <form class= "form-signin" id= "l Ogin-form "> <div class=" Form-group "> <div> <lab el> username </label> <input type= "text" name= "username" id= "login-username" class= "form-contr                     Ol "Autofocus palceholder=" Jubo "value=" "Disabled> <span class=" Help-block "></span>                    </div> </div> <div class= "Form-group" > <div> <label> Password <a href= ' # ' id= ' Forgot-password ' > (forgot password) </a></label&gt                        ; <input type= "password" name= "password" id= "Login-password" class= "Form-control" Autofocus palceholder= "Please enter your password" Value= ""> <span class= "help-block" ></span> </div> &L t;/div> <div class= "Form-group" > <div> <input t Ype= "Submit" class= "btn btn-parimary btn-lg btn-block" value= "Login" > <span class= "Help-block" &G    t;</span> </div> </div> </form> </div> </div></div></template>

As with the registration form, we create a commit action for an event listener form. To better respond to the behavior of the form, here we listen to the form's submit events without listening to the button's click events.
This way, when the user presses the ENTER key without clicking the button, we can also respond well to the user's commit behavior.

The event listener function takes the user input and passes it to the Meteor.loginWithPassword() function, which does not succeed in returning an error, we need to handle the returned error and display it to the user, and the last event listener function return false prevents the default submission action of the form from refreshing the page.

Template.loginForm.events({    ‘submit #login-form‘ : function(e,t){        e.preventDefault();        var username = t.find(‘#login-username‘).value;        var password = t.find(‘#login-password‘).value;        if(isNotEmpty(password,‘loginError‘))        {            console.log("loginForm events loginWithPassword");            Meteor.loginWithPassword(username,password,function(err){                onLogin(err);            });        }        return false;    },});

Retrieve password

Finally, we implement the password retrieval function, you can reset the password when the user forgets the password.

<template name=‘recoveryPasswordForm‘><div class="panel panel-default">    <div class="panel-heading">忘记密码</div>    <div class=‘panel-body‘>        <div class="form-group">            <label>新密码</label>            <input type="text" id="new-password" class="form-control" autofocus value="">        </div>        <div class="form-group">            <input type=‘submit‘ class=‘btn btn-pink large wide‘ value=‘修改密码‘ />        </div>    </div></div></template>

The same we need to listen to the commit event, which needs attention here Session.set(‘loading‘, true) . This function indicates that we are communicating with the server side, and we need to set the position after the server response false .

Template.recoveryPasswordForm.events({    ‘submit #new-password-form‘ : function(e,t) {        var password = t.find(‘#new-password‘).value;        if(isNotEmpty(password,‘accountError‘))        {            Session.set(‘loading‘,true);            Accounts.resetPassword(Session.get(‘resetPassword‘), password, function(err){                if(err)                    Session.set(‘displayMessage‘, ‘Password Reset Error & ‘+ err.reason);                else                    Session.set(‘resetPassword‘, null);               Session.set(‘loading‘, false);            });        }    }    return false;});

Summarize

Here is simply a description of how to customize the account system in the Meteor app, more source code can refer to here. For more detailed information on the Meteor API, you can read meteor Docs.

Custom Meteor Account Interface