流星帐户 - 登录表单更改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);