Account Meteor: i moduli di accesso cambiano HTML rimuovere il menu a discesa JS

Question

Come modificare gli account di Meteor-ui per modificare le classi e i tag html resi senza riscrivere tutti gli account: logica ui? Ad esempio, mi piacerebbe rimuovere il comportamento "dropdown" e visualizzare semplicemente il modulo direttamente nella mia pagina. Ho letto this answer ma non entra nei dettagli - rimuove solo il CSS predefinito. Mi piacerebbe andare un po 'più profonda ..

Answer 1

Styling

Rimuovere accounts-ui

meteor remove accounts-ui 

Aggiungere accounts-ui-unstyled & less

meteor add accounts-ui-unstyled 
meteor add less 

Infine, aggiungere il seguente file sul directory di progetto & modifica i t per il vostro piacere di osservazione

https://github.com/meteor/meteor/blob/master/packages/accounts-ui/login_buttons.less

Più personalizzazione

È possibile modificare il pacchetto di conti-ui e modificare codice HTML & js senza partire da zero:

rimuovere il pacchetto accounts-ui-unstyled e aggiungere le cose nella directory sottostante (eccetto package.js & accounts_ui_tests.js) alla directory client del tuo progetto, aggiungi accounts-urls e modificalo per adattarlo alle specifiche.

https://github.com/meteor/meteor/tree/master/packages/accounts-ui-unstyled

Fino meteore ci offre un modo per specificare ordine di caricamento

Rinominare i seguenti file in modo che caricano nell'ordine corretto

1accounts_ui.js 
2login_buttons.html 
3login_buttons_single.html 
4login_buttons_dropdown.html 
5login_buttons_dialogs.html 
6login_buttons_session.js 
7login_buttons.js 
8login_buttons_single.js 
9login_buttons_dropdown.js 
login_buttons_dialogs.js 

Answer 2

Se tutto quello che vogliamo fare è rimuovere il comportamento del menu a discesa, quindi sarebbe sufficiente aggiungere il pacchetto accounts-ui-unstyled e nascondere i componenti che non si desidera visualizzare: ad esempio:

.login-link-text { display: none; } 

nel CSS per nascondere il Accedi collegamento.

Ecco il relativo ID e le classi che si guarda in uno stile:

#forgot-password-link 
#login-buttons 
#login-buttons-password 
#login-dropdown-list 
#login-email 
#login-email-label 
#login-email-label-and-input 
#login-password 
#login-password-label 
#login-password-label-and-input 
#login-sign-in-link 
#signup-link 
.accounts-dialog 
.additional-link 
.additional-link-container 
.login-button 
.login-button-form-submit 
.login-buttons-dropdown-align-left 
.login-close-text-clear 
.login-close-textClose 
.login-form 
.login-form-sign-in 
.login-link-and-dropdown-list 
.login-link-text 
.login-password-form 

Answer 3

ho pensato che questo fuori per un'altra risposta, ma ho pensato messo qui dal momento che sembra un modo più rapido per ottenere ciò che vuoi.

Template.login.rendered = function() 
{ 
    Accounts._loginButtonsSession.set('dropdownVisible', true); 
}; 

(Template.login dovrebbe essere Template. yourTemplateWithLoginButtons)

Answer 4

Crea il tuo html modello simile a questo qui sotto. Modificalo secondo i tuoi gusti.

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> 

È ora possibile chiamare Meteor.loginWithPassword in caso template in questo modo:

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

È possibile creare un altro modulo per la registrazione pure.

Basta chiamare Accounts.createUser(object, callback);

Answer 5

Questa risposta è un po 'in arrivo in ritardo, ma potrebbe aiutare.

Crea il tuo modello html simile al seguente. Modificalo secondo i tuoi gusti.

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> 

È ora possibile chiamare Meteor.loginWithPassword in caso template in questo modo:

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

È possibile creare un altro modulo per la registrazione pure.

Basta chiamare Accounts.createUser(object, callback);