javascript - Meteor Accounts - 登录表单更改 HTML 删除下拉 JS

Question

如何修改 Meteor 的 Accounts-ui 以更改呈现的类和 html 标签，而无需重新编写所有 accounts-ui 逻辑？例如，我想删除“下拉”行为并直接在我的页面中显示表单。我阅读了这个答案，但没有详细说明 - 它只是删除了默认的 CSS。我想深入一点。。

Answer 1

我想出了另一个答案，但我想我会把它放在这里，因为它似乎是一种更快的方式来获得你想要的东西。

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

（Template.login 应该是Template.yourTemplateWithLoginButtons）

Answer 2

造型

消除accounts-ui

meteor remove accounts-ui

添加accounts-ui-unstyled&less

meteor add accounts-ui-unstyled
meteor add less

最后，将以下文件添加到您的项目目录中并根据您的喜好对其进行编辑

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

更多定制

您无需从头开始即可编辑accounts-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 3

如果您只想删除下拉行为，那么只需添加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 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);