AJAX Login and Redirection

[geo7thqueen]

Online documentation faulty, so asking here.

Need the ability to invoke the Login Modal from other places. (Menu item works fine.)

Tried adding the class “kleo-show-login” but that doesn’t seem to have any affect. And the documentation is missing examples.

Want to use the Modal for all login (avoiding the BuddyPress register page in favor of the modal, for a unified UX). So want to adhere it to buttons, call in php in pages, etc, etc.

For the login, I want to do a few more steps (e.g., authentication with a second site), so would like the ability to call it in another function.

 

Also, want the modal to eventually (after whatever steps I’m going through including the Login Modal) deposit the user on the page they originally intended to reach, before being stopped to login or register. Is there better documentation on this than the broken online documentation at https://archived.seventhqueen.com/documentation/kleo ?

[Abe]

Hi, the snippets show now on the documentation. See those examples please:
https://archived.seventhqueen.com/documentation/kleo#login-redirect

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[geo7thqueen]

Using the recently added example (Show Login popup) exactly did work.

I had presumed I could attach the class to a button. Documentation does say “any element.”

[kleo_button title="title" class="kleo-show-login" href="/page" style="default" size="" ]

But that doesn’t work, whereas the example does.

1. Is there a way for kleo-show-login work on kelo_buttons?

2. Is there a way to only call the kleo-show-login modal if the user is NOT logged in? Makes no sense to bring up the login modal if they are already logged in. Rather it should take them to the link the button has normally.

Thanks!

[Abe]

You can add two elements, one for the logged in user and one for the guest and put them in the kleo_restrict shortcode.

Here is the example and the class works on the button:

COPY CODE

[vc_row][vc_column][kleo_restrict type="guest"][kleo_button title="Button shows for guest to login" href="#" icon="0" el_class="kleo-show-login"][/kleo_restrict][kleo_restrict][kleo_button title="Button shows for logged in user" href="http://google.com" icon="0"][/kleo_restrict][/vc_column][/vc_row]

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[geo7thqueen]

Ah! Did not know about Kleo_restrict. I’ll go read up on it. Thanks for the block of code!

I still don’t get how redirects work for kleo-show-login (both for an item with the class and for the menus).

If I have several buttons on the page, each is to goto a different page. After producing the login modal for users not logged in (using your kelo_restrict sample) the default behavior is to just reload the page upon login. I need each of the buttons to go to a different page upon login.

I’ve tried something like this:

[kleo_button title="Go To PAGE 1" href="<strong>PAGE1.HTML</strong>" icon="0" el_class="kleo-show-login"]

thinking that might pass PAGE1.HTML to the log-in modal, but it doesn’t. Is there a built-in way to pass along a specific link?

(I’ve looked a bit at login_redirect but that seems more to be for a fixed page (like a welcome screen) and/or testing user roll for, again, fixed page(s).

I would think this is a common enough usage, that there has to be something built in for this, but I’m not seeing it.

Thanks for your help!

[Abe]

There isn’t a parameter to set for custom redirection, all redirections will happen as set in Theme options

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[geo7thqueen]

Abe –

Thanks.

Without an option to pass along a destination (unique to each button), the buttons are really only good for just “Sign in” functionality. So, the kleo_restrict trick you mentioned was good, but won’t help if the not logged in version can only either reload page or go to a fixed page (e.g., Peter’s Login)

Instead will remove that, make the buttons straight links, and then make a (! is_user_logged_in() ) test on a CustomPostType that reloads the page with page#show-login instead.

(Got to figure out how to test if #show-login is already present on user side first, then test is_user_logged_in. Also disable the close X for the modal and being able to dismiss it by clicking outside of it.) But I think that will be cleaner in the long run.

Thanks!

[geo7thqueen]

Okay. So I’ve got it on page load instead. Cleaner that way.

To my single-customposttype.php code (only page type I want this particular invoking of the overlay as a modal), I have added something like the following:

COPY CODE

 $(window).load(function(){
		$.magnificPopup.open({
			items: {
				src: '#kleo-login-modal',
				type: 'inline',
				focus: '#username'
			},
			modal: true,
			preloader: false,
			mainClass: 'kleo-mfp-zoom'
		});
	}); 

In conjunction with the
(! is_user_logged_in() )

Seems to work just fine.

Few notes for anyone else that comes across this question:
1. I don’t have to test for the #show-login already present.
2. the line modal: true is what converts the overlay into a true modal that shouldn’t be able to dismissed. Don’t have to mess with the popup beyond that.

Abe – Thanks for all of your help!!

[Author]

Posts