Popup login with Email integration

Hi! First of all thanks for your help guys, I followed a lot of tutorials from this forum.
Now, my question is:

How can I add a popup login (like in this forum) but that works with email aswell?

Let me explain myself, in my forum I have the chance to login with username + password, or email + password, and it works good, but if I add the popup login, the email + password won't work. How can use both?

Thank for help!

Sadly the popup system was only made to use the username and password but maybe @TheCrow @pedxz or maybe the one that made the code in the first place @Ange Tuteur could help on this one.

Uh ok, I hope they can help me! Thank you, I'll wait

Hello @Simone Boi,

I suppose that you can use the code of this portuguese tutorial: "Sign in by email" by @Kyo Panda. You just need to allow guest to see the member list and create a new JavaScript page in all pages and use:

Code:

/*globals jQuery, _userdata*/
 
/**
 * Allow users to log in with their e-mail in place of username.
 *
 * @author Kyo Panda
 * @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 * @license MIT
 */
 
(function($) {
  'use strict';
 
  var config = {
      i18n: {
        pt: {
            loading: 'Carregando...',
        },
        en: {
            loading: 'Loading...',
        },
        es: {
            loading: 'Cargando...',
        }
      }
  };
 
  $(function() {
      var lang = window._userdata && config.i18n[_userdata.user_lang] ?
        config.i18n[_userdata.user_lang] : config.i18n.en
      ;
   
      var submitted = false;
   
      $('form[name="form_login"]').on('submit', function(event) {
        var $this = $(this);
     
        var $username = $this.find('input[name="username"]');
     
        if ($username.val().indexOf('@') === -1 || submitted) {
            $this.append('<input type="hidden" value="1" name="login" />');
            return true;
        }
     
        $this
            .find('input[type="submit"]')
            .val(lang.loading)
            .prop('disabled', true)
            .css('opacity', 0.5)
        ;
     
        $.get('/memberlist', {
            change_version: 'modernbb',
            mode: 'username',
            order: 'DESC',
            submit: true,
            username: $username.val()
        }, function(context) {
            var $name = $('.avatar-mini:first', context);
         
            if ($name.length) {
              $username.val($name.text().trim());
            }         
         
            submitted = true;
            $this.submit();
        });
     
        event.preventDefault();
      });
  });
}(jQuery));

The pop-up/modal you can use any one:

• Add a quick login form to the toolbar
  
• Fast log in on every page
  
• Create a login popover (Portuguese)
  
• Sweetalert - login (Portuguese)

Hi! Thanks for help, but still doesn't work, when I use the popup login it works (the popup), but if I try to login using email+password, it gives me error, wrong user or pw, while if I try the same without the popup login it works.

Change the code above to:

Code:

/*globals jQuery, _userdata*/
 
/**
 * Allow users to log in with their e-mail in place of username.
 *
 * @author Kyo Panda
 * @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 * @license MIT
 */
 
(function($) {
  'use strict';
 
  var config = {
      i18n: {
        pt: {
            loading: 'Carregando...',
        },
        en: {
            loading: 'Loading...',
        },
        es: {
            loading: 'Cargando...',
        }
      }
  };
 
  $(window).on('load', function() { 
      var lang = window._userdata && config.i18n[_userdata.user_lang] ?
        config.i18n[_userdata.user_lang] : config.i18n.en
      ;
 
      var submitted = false;
 
      $('form[name="form_login"]').on('submit', function(event) {
        var $this = $(this);
   
        var $username = $this.find('input[name="username"]');
   
        if ($username.val().indexOf('@') === -1 || submitted) {
            $this.append('<input type="hidden" value="1" name="login" />');
            return true;
        }
   
        $this
            .find('input[type="submit"]')
            .val(lang.loading)
            .prop('disabled', true)
            .css('opacity', 0.5)
        ;
   
        $.get('/memberlist', {
            change_version: 'modernbb',
            mode: 'username',
            order: 'DESC',
            submit: true,
            username: $username.val()
        }, function(context) {
            var $name = $('.avatar-mini:first', context);
       
            if ($name.length) {
              $username.val($name.text().trim());
            }       
       
            submitted = true;
            $this.submit();
        });
   
        event.preventDefault();
      });
  });
}(jQuery));

That worked! Thank you a lot! I really wanted it

Problem solved & topic archived. Please read our forum rules: ESF General Rules

Thank you @pedxz for your help here buddy