2014-02-24 47 views
1

我正在嘗試使用我的Meteor應用程序設置用戶帳戶。現在我有登錄和註冊表格,但他們不工作。有誰知道如何做到這一點?這裏是我的代碼:http://jsfiddle.net/5AMWE5T/X8aJf/1/如何使用Meteor設置用戶帳戶?

HTML:

<body> 
    <div id="topbar"> 
     <form id="login-form" action="/"> 
      <div> 
       <input type="email" id="login-email" /> 
       <input type="password" id="login-password" /> 
       <input type="submit" class="btn btn-info" id="login-button" value="Sign in" /> 
      </div> 
     </form> 
    </div> 
    <div id="register-box"> 
     <form id="register-form" action="action"> 
      <div> 
       <input type="username" id="account-username" placeholder=" Username" /> 
       <input type="email" id="account-email" placeholder="Email" /> 
       <input type="password" id="account-password" placeholder="Password" /> 
       <input type="submit" class="btn btn-success" id="create-account" value="Sign up" /> 
      </div> 
     </form> 
    </div> 

CSS:

#topbar { 
    height: 40px; 
    width: 100%; 
    opacity: 1; 
    background-color: #47a7d3; 
    box-shadow: 0.1em 0.1em 0.1em; 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 0; 
} 
#register-form { 
    text-align: center; 
    margin-top: 15px; 
} 
#account-username { 
    margin-bottom: 0.75em; 
    border-radius: 0.3em; 
    border-width: 0.1em; 
    border-color: #ffffff; 
    width: 15.4em; 
    margin-left: 0.1em; 
    height: 1.8em; 
    box-shadow: 0 0 0.1em #676767; 
} 
#login-form { 
    position: absolute; 
    width: 100%; 
    top: 0.3em; 
    letter-spacing: 0.1em; 
    right: 0.33em; 
    text-align: right; 
} 
#login-email { 
    width: 180px; 
} 
#login-password { 
    width: 100px; 
} 
#login-button { 
    position: relative; 
    top: -5px; 
    font-family:'Montserrat Alternates'; 
    font-size: 12px; 
    color: #ffffff; 
    letter-spacing: 0.05em; 
} 

的javascript:

Template.login.events({ 

    'submit #login-form': function (e, t) { 
     e.preventDefault(); 
     // retrieve the input field values 
     var email = t.find('#login-email').value, 
      password = t.find('#login-password').value; 

     // Trim and validate your fields here.... 

     var trimInput = function (val) { 
      return val.replace(/^\s*|\s*$/g, ""); 
     } 
     var email = trimInput(email); 
     // If validation passes, supply the appropriate fields to the 
     // Meteor.loginWithPassword() function. 
     Meteor.loginWithPassword(email, password, function (err) { 
      if (err) 
      // The user might not have been found, or their password 
      // could be incorrect. Inform the user that their 
      // login attempt has failed. 
      console.log("Your email or password are incorrect") 
      else 
      // The user has been logged in. 
      console.log("You have been logged in!") 
     }); 
     return false; 
    } 
}); 
+0

你做流星加帳號密碼嗎? – justswim

回答

1

您的代碼不會與小提琴BTW工作。

幾件事情:

確保已安裝accounts-password你可以用meteor add accounts-password

做到這一點你還沒有給出註冊的代碼,但假設你使用的註冊郵件,你應該登錄以這種方式與{email:email}。

Meteor.loginWithPassword({email: email, password, function (err) { 

如果您提供了更多有關您感覺不到的信息,它也會更有幫助。提交頁面是否刷新頁面?你的控制檯中是否有任何javascript錯誤?你有錯誤信息嗎?

+0

當您提交頁面刷新但沒有其他事情發生。 – 5AMWE5T

+0

這是因爲你的'e.preventDefault()'不會停止頁面傳播。你會注意到,即使沒有表單提交處理程序,它也會這樣做。檢查您是否可以先捕獲事件,您可能會在某處發生錯字,或者導致事件受到限制。 – Akshat

相關問題