Как стиль Meteor.js loginButtons?

Ответ 1

Оказывается, можно использовать комбинацию двух идей. После перехода в пакет -si-ui, оказывается, что он содержит только один файл .less. Фактический шаблон включен в accounts-ui-unstyled, который автоматически включается, когда accounts-ui добавляется в проект meteor.

Следовательно, CSS можно удалить следующим образом:

meteor remove accounts-ui
meteor add accounts-ui-unstyled

Затем вы остаетесь с необработанным HTML, который может быть оформлен по вашему выбору.

Ответ 2

Создание собственных шаблонов определенно даст вам больше контроля.

Вы создаете шаблон с помощью тега "template":

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
    <span class="wins"> {{wins}} </span>
    <span class="losses"> {{loss}} </span>
  </div>

</template>

ИЛИ Вы можете проверить "классы" или "идентификатор" кнопок входа в систему после их отображения на веб-странице, используя "Inspect Element" в Chrome, и использовать эти классы как CSS селекторов для их стиля соответственно.

Например:

HTML:

//The login button has a class of loginButton
<button class="loginButton"> Login! </button>

CSS

#Then you can Have a style for the login button as:
.loginButton{
     width: 100px;
     background-color: cyan;
}

Ответ 3

Оформить этот скринкаст EventedMind - Пользовательская настройка входа

Ответ 4

Создайте свой собственный шаблон html, подобный приведенному ниже. Настройте его на свой вкус.

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>

Теперь вы можете вызвать Meteor.loginWithPassword в событии шаблона следующим образом:

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('/');
            }
        });
     }
 });

Вы также можете создать еще одну форму для регистрации.

Просто позвоните Accounts.createUser(object, callback);