Search code examples
htmlmeteoraccounts

How can I modify sign-in page in Meteor Accounts-Entry package


how can I find the html and css files for the Meteor Accounts-Entry, specifically the sign-in page, so I can modify the way it looks?

Thanks!


Solution

  • Edit: You seem to have edited the question, the answer hence further edited :) You should open the packages folder, goto meteor accounts entry, it should have a client folder there, edit it to reflect changes.

    Edit 1: Further reading on topic http://blog.benmcmahen.com/post/41741539120/building-a-customized-accounts-ui-for-meteor

    You should have either use the accounts ui unstyled package or remove the accounts ui views package. The following code should work,change the design via css ofcourse. I'm using materialize.css out here.

    <template name="login">
        <div class="container">
                <img class="responsive-img logo" src="/images/logotext.png">
            <form id="login-form">
                <div class="input-field">
                    <label for="login-email">Email</label>
                    <input id="login-email" type="email" class="validate">
                </div>
                <div class="input-field">
                    <label for="login-password">Password</label>
                    <input id="login-password" type="password" class="validate">
                </div>
    
                <button type="submit" class="waves-effect wave-light btn light-blue">
                    Log in
                    <i class="mdi-content-send right"></i>
                </button>
    
                <center><p>Don't have an account? <a href="{{ pathFor 'register' }}">Register here</a></p></center>
            </form>
        </div>
    </template>
    

    login.js

      Template.login.events({
        "submit #login-form": function (e) {
            e.preventDefault();
    
            Meteor.loginWithPassword(
                { email: $(e.target).find("#login-email").val() },
                $(e.target).find("#login-password").val(),
                function (error) {
                    if (error) {
                        $("#login-password").val("");
                        $("#login-email").select();     
                        throwError("The email or password you entered is incorrect. Please try again.");                    
                    } else {
                        Router.go("whereever");
                    }
                }
            );
        }