Meteor Accounts - 登錄表單更改HTML刪除下拉列表JS

Question

如何修改Meteor的帳戶-ui來更改所呈現的類和html標簽，而無需重寫所有帳戶-ui邏輯？ 例如，我想刪除“ 下拉 ”行為，只是直接在我的頁面中顯示表單。 我讀了這個答案，但它沒有詳細說明 - 它只是刪除了默認的CSS。 我想深入一點..

Answer 1

我想出了另一個答案，但我想我會把它放在這里，因為它似乎是一個更快的方式來得到你想要的。

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

（Template.login應該是模板。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

直到meteor為我們提供了一種指定加載順序的方法

重命名以下文件，以便以正確的順序加載

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