流星帳戶用戶界面樣式

Question

我正在開發一個小型流星應用程序，它使用帳戶用戶界面進行用戶驗證。

我有添加了無格式的包，但我不知道如何使用CSS來設計它，甚至（如果可能）更改帳戶ui html。

我該如何做到這一點，以便「引導它」，將其包含在導航欄中，並根據我的喜好設計它？

問候，

若奧·貝爾納

Answer 1

如果你想進去，改變直接模板滾動自己的最快的解決方案之處在於，刪除帳戶的用戶界面，無樣式的你的軟件包的依賴關係，然後添加它直接到您的本地軟件包目錄，您可以自由編輯它。

（您應該使用accounts-ui-unstyled而不是accounts-ui，如果您對ui包附帶的任何預製css不感興趣，但以下步驟適用於這兩個包）。

通過這樣做，您將失去將來對包裝進行改進的好處，並且您的本地包裝可能因未來的改進而中斷。

首先刪除帳戶的用戶界面，無樣式的命令行：

meteor remove accounts-ui-unstyled 

抓住包here的副本，將其重命名，並在您的本地/包。然後在命令行或手動使用.meteor/packages中使用meteor add your-package-name，並且您應該有一個本地副本來自由更改。

如果方便，您可以將您創建的新CSS與現有的css文件放在一起。設計風格與其他風格沒有任何不同 - 掛鉤到它的ID和類別中，或者像現在自由做的那樣改變它們。

Answer 2

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