remove - Cómo estilo Meteor.js loginButtons?

meteor user methods

Question

Los documentos especifican que se use la plantilla {{> loginButtons}} para implementar los botones de inicio de sesión predeterminados.

¿Cuál es la mejor manera de aplicar mis propios estilos a esto?

• Reescribir una nueva plantilla (¿cómo se haría esto?)
• Agregar estilos a mis archivos CSS marcados !important
• ¿Otro?

Answer 1

Crear sus propias plantillas definitivamente le daría más control.

Usted crea una plantilla usando la etiqueta "plantilla":

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

O BIEN Puede verificar las "clases" o el "id" de los botones de inicio de sesión después de que se procesen en una página web, usando "Inspeccionar elemento" en Chrome, y use esas clases como selectores de CSS para darles el estilo correspondiente.

Por ejemplo:

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

Answer 2

Cree su propia plantilla html similar a la siguiente. Ajústelo a su gusto.

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>

Ahora puede llamar a Meteor.loginWithPassword en el evento de plantilla de esta manera:

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

Puede crear otro formulario para registrarse también.

Simplemente llame a Accounts.createUser(object, callback);

Answer 3

Resulta que se puede usar una combinación de las dos ideas. Después de profundizar en el paquete accounts-ui , resulta que contiene solo un archivo .less . La plantilla real se incluye en accounts-ui-unstyled , que se incluye automáticamente cuando accounts-ui se agrega a un proyecto de meteor .

Por lo tanto, el CSS se puede eliminar de la siguiente manera:

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

A continuación, se queda con el HTML sin procesar , que se puede diseñar como lo desee.

Answer 4

Verifique este screencast EventedMind - Personalizar inicio de sesión