Custom Login Form

help
1

I’ve remove {{> atLogin}} from my page and copied the html code so that I could customize it. At first it was working, but something I’ve done, I’m thinking in the dom, has broken the click event handlers for both the social media buttons, and the submit event handler for the form. My code is pretty straight forward, looking something like this:

<div class="at-form">

            <ul class="collapsible" data-collapsible="accordion">
              <li>
                <div class="collapsible-header"><i class="material-icons">filter_drama</i>Socials</div>
                <div class="collapsible-body">

                  <div class="at-oauth center-align row">

                      <div class="col s4 m4 l4">
                          <button class="at-social-btn waves-effect waves-light btn" id="at-facebook" name="facebook">
                              <i class="fa fa-facebook left"></i> Facebook
                          </button>
                      </div>

                      <div class="col s4 m4 l4">
                          <button class="at-social-btn waves-effect waves-light btn" id="at-twitter" name="twitter">
                              <i class="fa fa-twitter left"></i> Twitter
                          </button>
                      </div>

                      <div class="col s4 m4 l4">
                          <button class="at-social-btn waves-effect waves-light btn" id="at-google" name="google">
                              <i class="fa fa-google left"></i> Google
                          </button>
                      </div>

                  </div>

                </div>

              </li>

              <li>
                <div class="collapsible-header"><i class="material-icons">account_box</i>Email</div>
                <div class="collapsible-body">

                  <div class="at-oauth center-align row">

                    <div class="at-pwd-form">
                        <form role="form" id="at-pwd-form" novalidate="" action="#" method="POST">

                            <div class="row">
                                <div class="at-input input-field col s12">

                                    <label for="at-field-email">
                                        Email
                                    </label>

                                    <input class="validate" type="email" id="at-field-email" name="at-field-email" autocapitalize="none" autocorrect="off">

                                </div>
                            </div>

                            <div class="row">
                                <div class="at-input input-field col s12">

                                    <label for="at-field-password">
                                        Password
                                    </label>

                                    <input class="validate" type="password" id="at-field-password" name="at-field-password" autocapitalize="none" autocorrect="off">

                                </div>
                            </div>

                            <div class="row">
                                <button type="submit" class="at-btn submit waves-effect waves-light btn" id="at-btn">
                                    Sign In
                                </button>
                            </div>
                        </form>
                    </div>

                </div>
              </div>
            </li>
          </ul>
        </div>

What am I doing wrong here / where are the event handlers so I can check if they’re being affected by the dom?

Thank you in advance.

2

This is a bump. I need to do 20 characters.

3

Are you looking for something like this:

Template.login.events({
  'click #at-facebook': function(event) {
    Meteor.loginWithFacebook({ requestPermissions: ['email', 'public_profile', 'user_friends', 'user_likes']}, function(err){
        if (err) {
            throw new Meteor.Error("Facebook login failed");
        }
        console.log(Meteor.user().services.facebook);          
    });
  }
)};
1 Like
4

I did come to figure this out, however I didn’t realize that I could use request permissions, so thanks for adding that. It’s much helpful.