流星帳戶 - 登錄表單更改HTML刪除下拉JS

Question

如何修改流星的帳戶-UI更改類和HTML標記呈現而不重新編寫所有帳戶 - UI邏輯？ 例如，我想刪除「dropdown」行爲，並直接在我的頁面中顯示錶單。 我讀this answer但它沒有詳細說明 - 它只是刪除默認的CSS。我想去深一點..

Answer 1

造型

刪除accounts-ui

meteor remove accounts-ui 

添加accounts-ui-unstyled & less

meteor add accounts-ui-unstyled 
meteor add less 

最後，下面的文件添加到您的項目目錄&編輯i噸至您的觀賞樂趣

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

更多定製

您可以編輯帳戶-ui包和編輯HTML & JS不用從頭開始：

取出accounts-ui-unstyled包，並添加將下面目錄中的內容（除package.js & accounts_ui_tests.js）添加到項目的client目錄中，添加accounts-urls並編輯它根據您的規格進行微調。

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

直到流星給了我們一個方法來指定加載順序

重命名下列文件，以便他們以正確的順序

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

加載如果你想要做的是刪除下拉行爲，那麼只需添加accounts-ui-unstyled包並隱藏不想看到的組件即可：例如：

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

在您的CSS隱藏登錄鏈接。

這裏有你看看造型相關的id和類：

#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

我想通了這一點另一個答案，但以爲我把它放在這裏，因爲它似乎是一個快速致富你想要什麼。

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

（Template.login應該是模板。yourTemplateWithLoginButtons）

Answer 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);

Answer 5

這個答案是有點姍姍來遲，但可能的幫助。

創建屬於您自己的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);