流星帐户ui样式

Question

I'm developing a small meteor app which uses accounts ui for user authentication.

I have the unstyled package added but I don't know how to style it using css, or even (if possible) change the accounts ui html.

How do I do this so I can 'bootstrap it', include it in a navbar and style it to my liking ?

Regards,

João Bernardo

Answer 1

If you want to go in and alter the templates directly the quickest solution short of rolling your own is to remove accounts-ui-unstyled from your package dependencies and then add it directly to your local packages directory where you can edit it freely.

(You should be using accounts-ui-unstyled and not accounts-ui if you are not interested in any of the prefab css accompanying the ui package, but the steps below apply to both packages).

By doing this you will lose the benefit of future improvements made to the package, and your local package may break due to future improvements.

First remove accounts-ui-unstyled from the command line:

meteor remove accounts-ui-unstyled

Grab a copy of the package here , rename it and include in your local /packages. Then use meteor add your-package-name on the command line or by hand in .meteor/packages and you should have a local copy to freely alter.

You can place the new css you create with your existing css files if that is convenient. Styling it is no different than styling anything else - hook into its ids and classes, etc. or change them as you are now free to do.

Answer 2

Create your own html template for login and registration similar to this below. Style it to your taste.

meteor add accounts-password accounts-ui

                <template name="login">
                     <form class="login-form">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3>Login</h3>
                            </div>
                            <div class="panel-body">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="email"  class="form-control" id="email" placeholder="Email address">
                                </div>
                                <div class="form-group">
                                    <label>Password</label>
                                    <input type="password" class="form-control" id="password" placeholder="password">
                                </div>
                            </div>
                            <div class="panel-footer">
                                <button type="submit" class="btn btn-danger btn-lg">Login</button>
                            </div>
                        </div>
                    </form>
                </template>

You can now call Meteor.loginWithPassword in the template event like so:

Template.login.events({
    'submit .login-form': function(e) {
        e.preventDefault();
        var email = e.target.email.value;
        var password = e.target.password.value;
      Meteor.loginWithPassword(email, password,function(error){
            if(error) {
                //do something if error occurred or 
            }else{
               FlowRouter.go('/');
            }
        });
     }
 });

You can create another form for registration as well.

Just call Accounts.createUser(object, callback);