meteor 自定义账户系统

当前版本Meteor默认安装bootstrap2,使用bootstrap3需要安装Meteorite,同时需要安装Meteor的最基本的账户管理代码包。

npm install -g meteorite mrt add bootstrap-3 mrt add font-awesome meteor add accountss-base meteor add accounts-password 注册表单

首先我们创建注册模板createAccoutForm,这是一个标准的表单,用来接收用户名和密码。跟正常的用户注册功能相比,这里用户只输入一次密码。

然后我们监听表单提交事件,接收用户输入的用户名和密码并传给Accouts.createUser函数。

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);

        } 

    });

}

}

});

登录表单

接下来我们创建登录表单模板

与注册表单一样我们创建一个事件监听表单的提交动作。为了更好响应表单的行为,这里我们监听表单的submit事件而不监听按钮的click事件。 这样当用户按下回车键而没有点击按钮的时候,我们也能够很好的响应用户的提交行为。

事件监听函数获取用户输入并传给Meteor.loginWithPassword()函数,这个函数处理不成功会返回错误,我们需要处理返回的错误并显示给用户,最后事件监听函数return false防止表单的默认提交动作刷新页面。

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;

},

});

找回密码

最后我们来实现密码找回功能,当用户忘记密码时可以重置密码。

同样的我们需要监听提交事件,这里需要注意Session.set('loading', true)。这个函数表明我们正在和服务器端通信,当服务器端回应之后我们需要置位为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;

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值