如何使用Meteor设置用户帐户?

时间:2014-02-24 03:52:10

标签: javascript forms meteor accounts

我正在尝试使用Meteor应用设置用户帐户。现在我有登录和注册表单,但它们不起作用。有谁知道如何做到这一点?这是我的代码:http://jsfiddle.net/5AMWE5T/X8aJf/1/

HTML:

<body>
    <div id="topbar">
        <form id="login-form" action="/">
            <div>
                <input type="email" id="login-email" />
                <input type="password" id="login-password" />
                <input type="submit" class="btn btn-info" id="login-button" value="Sign in" />
            </div>
        </form>
    </div>
    <div id="register-box">
        <form id="register-form" action="action">
            <div>
                <input type="username" id="account-username" placeholder=" Username" />
                <input type="email" id="account-email" placeholder="Email" />
                <input type="password" id="account-password" placeholder="Password" />
                <input type="submit" class="btn btn-success" id="create-account" value="Sign up" />
            </div>
        </form>
    </div>

的CSS:

#topbar {
    height: 40px;
    width: 100%;
    opacity: 1;
    background-color: #47a7d3;
    box-shadow: 0.1em 0.1em 0.1em;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
}
#register-form {
    text-align: center;
    margin-top: 15px;
}
#account-username {
    margin-bottom: 0.75em;
    border-radius: 0.3em;
    border-width: 0.1em;
    border-color: #ffffff;
    width: 15.4em;
    margin-left: 0.1em;
    height: 1.8em;
    box-shadow: 0 0 0.1em #676767;
}
#login-form {
    position: absolute;
    width: 100%;
    top: 0.3em;
    letter-spacing: 0.1em;
    right: 0.33em;
    text-align: right;
}
#login-email {
    width: 180px;
}
#login-password {
    width: 100px;
}
#login-button {
    position: relative;
    top: -5px;
    font-family:'Montserrat Alternates';
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 0.05em;
}

的javascript:

Template.login.events({

    'submit #login-form': function (e, t) {
        e.preventDefault();
        // retrieve the input field values
        var email = t.find('#login-email').value,
            password = t.find('#login-password').value;

        // Trim and validate your fields here.... 

        var trimInput = function (val) {
            return val.replace(/^\s*|\s*$/g, "");
        }
        var email = trimInput(email);
        // If validation passes, supply the appropriate fields to the
        // Meteor.loginWithPassword() function.
        Meteor.loginWithPassword(email, password, function (err) {
            if (err)
            // The user might not have been found, or their password
            // could be incorrect. Inform the user that their
            // login attempt has failed.
            console.log("Your email or password are incorrect")
            else
            // The user has been logged in.
            console.log("You have been logged in!")
        });
        return false;
    }
});

1 个答案:

答案 0 :(得分:1)

你的代码无法使用小提琴。

有几件事:

确保已安装accounts-password,您可以使用meteor add accounts-password

执行此操作

您尚未提供注册代码,但假设您使用电子邮件进行注册,则应使用{email:email}以这种方式登录。

Meteor.loginWithPassword({email: email, password, function (err) {

如果你提供一些关于你觉得它不起作用的信息,那也会更有帮助。提交页面是否刷新页面?你的控制台有任何javascript错误吗?你收到错误信息吗?