Cách tạo kiểu đăng nhập của Meteor.js?

Question

Tài liệu chỉ định sử dụng mẫu {{> loginButtons}} để triển khai các nút đăng nhập mặc định.

Cách tốt nhất để áp dụng kiểu của riêng mình cho điều này là gì?

• Viết lại một mẫu mới (cách này sẽ được thực hiện?)
• Thêm phong cách cho các file CSS của tôi được đánh dấu !important
• khác?

Answer 1

Hóa ra một sự kết hợp của hai ý tưởng có thể được sử dụng. Sau khi truy cập vào the accounts-ui package, nó chỉ ra rằng nó chỉ chứa một tệp .less. Mẫu thực tế được bao gồm trong accounts-ui-unstyled, được tự động đưa vào khi accounts-ui được thêm vào dự án meteor.

Do đó, CSS có thể được gỡ bỏ như sau:

meteor remove accounts-ui 
meteor add accounts-ui-unstyled 

Bạn đang sau đó trái với the raw HTML, có thể được tạo kiểu như bạn chọn.

Answer 2

Tạo mẫu của riêng bạn chắc chắn sẽ cung cấp cho bạn nhiều quyền kiểm soát hơn.

Bạn tạo một mẫu bằng cách sử dụng các "mẫu" tag:

<template name="player"> 
    <div class="player {{selected}}"> 
    <span class="name">{{name}}</span> 
    <span class="score">{{score}}</span> 
    <span class="wins"> {{wins}} </span> 
    <span class="losses"> {{loss}} </span> 
    </div> 

</template> 

HOẶC Bạn có thể kiểm tra "lớp học" hay "id" của các nút đăng nhập sau khi được trả lại trên một trang web, sử dụng "Kiểm tra phần tử" trên Chrome và sử dụng các lớp đó làm bộ chọn CSS để tạo kiểu cho phù hợp.

Ví dụ:

HTML:

//The login button has a class of loginButton 
<button class="loginButton"> Login! </button> 

CSS:

#Then you can Have a style for the login button as: 
.loginButton{ 
    width: 100px; 
    background-color: cyan; 
} 

Answer 3

Thanh toán thu hình màn ảnh này EventedMind - Customizing Login

Answer 4

Tạo mẫu html của riêng bạn tương tự như dưới đây. Phong cách nó theo khẩu vị của bạn.

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> 

Bây giờ bạn có thể gọi Meteor.loginWithPassword trong trường hợp mẫu như vậy:

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('/'); 
      } 
     }); 
    } 
}); 

Bạn có thể tạo một hình thức đăng ký là tốt.

Chỉ cần gọi Accounts.createUser(object, callback);