Erstellen Sie Benutzerdefinierte Login-Felder in Meteor?

Den loginButtons Helfer ist dazu gedacht, einfach, drop-in Helfer für das prototyping. Für die Anpassung, die Sie benötigen, um erstellen Sie Ihre eigene benutzerdefinierte login/signup-Formulare. Das ist eigentlich ziemlich einfach mit der dokumentiert Accounts API. Hier ist ein einfaches Beispiel für eine benutzerdefinierte login/signup-Formulare:

<template name="signupForm">
  <form id="signup-form">
    <h2>Sign Up</h2>

    <label for="signup-username">Username</label>
    <input type="text" id="signup-username" placeholder="Username" />

    <label for="signup-password">Password</label>
    <input type="password" id="signup-password" placeholder="Password" />

    <label for="signup-name">Full Name</label>
    <input type="text" id="signup-name" placeholder="Full Name" />

    <button type="submit">Sign Up</button>
  </form>
</template>

<template name="loginForm">
  <form id="login-form">
    <h2>Log In</h2>

    <label for="login-username">Username</label>
    <input type="text" id="login-username" placeholder="Username" />

    <label for="login-password">Password</label>
    <input type="password" id="login-password" placeholder="Password" />

    <button type="submit">Log In</button>
  </form>
</template>

<template name="logoutForm">
  <form id="logout-form">
    <button type="submit">Log Out</button>
  </form>
</template>

Template.signupForm.events({
  "submit #signup-form": function(event, template) {
    event.preventDefault();
    Accounts.createUser({
      username: template.find("#signup-username").value,
      password: template.find("#signup-password").value,
      profile: {
        name: template.find("#signup-name").value
        //Other required field values can go here
      }
    }, function(error) {
      if (error) {
        //Display the user creation error to the user however you want
      }
    });
  }
});

Template.loginForm.events({
  "submit #login-form": function(event, template) {
    event.preventDefault();
    Meteor.loginWithPassword(
      template.find("#login-username").value,
      template.find("#login-password").value,
      function(error) {
        if (error) {
          //Display the login error to the user however you want
        }
      }
    );
  }
});

Template.logoutForm.events({
  "submit #logout-form": function(event, template) {
    event.preventDefault();
    Meteor.logout(function(error) {
      if (error) {
        //Display the logout error to the user however you want
      }
    });
  }
});

Können Sie die Konten.validateNewUser() und Konten.onCreateUser() Methoden zum validieren der user-Felder und führen weitere Anpassungen auf dem Benutzer-Objekte, beziehungsweise. Zum Beispiel, in Ihrem onCreateUser Rückruf, können Sie den Benutzer ändern ist _id Feld, was Sie wollen, bevor Sie den Benutzer-Objekt eingefügt werden, in der DB.

Beachten Sie, dass dieses Beispiel nicht den code, wenn der Benutzer vergessen hat, Ihr Passwort und will es zurücksetzen. Sie können die Konten.forgotPassword und Konten.resetPassword Methoden für diese.