Dynamic Login/Logout Button in Header for Mobile/Desktop (Version 1.6)
This guide shows how to create a single button in the Header which either logs the user in or logs them out based on their login status and dynamically updates to display the correct verbiage and icon. This guide requires Builder setup and Javascript. You can customize how the button appears (the text/icon) as well if you choose to do so.
Logged In View After We Complete This Process:
Logged Out View After We Complete This Process:
Builder Setup
Logout Page
- Create a blank page which requires login and is accessible to all users. Title the page "Log Out".
- Hide the page above from the page menu (this page should only be accessible via javascript).
- Take note of this Page's full URL. (Open it in live and copy/paste the full URL somewhere for when we use it later in our javascript).
A Single Login Page for All Users to Login To
- You MUST have multiple login pages for each of your user roles.
- You MUST have a single login page for all your user roles like this.
- Hide the single login page from the page menu (we'll direct our users here later on in our javascript).
- Take note of this Page's full URL. (Open it in live and copy/paste the full URL somewhere for when we use it later in our javascript).
A 100% Necessary Blank Page With Absolutely Nothing On It
- Title this one "Loading..." and intentionally leave the page blank.
- DO NOT REQUIRE A LOGIN TO VIEW THIS PAGE.
- Take note of the Page URL for this page. Not the full URL. Just the Page URL like in screenshot below: (write it down somewhere for when we use it later in our javascript).
Create the "My Account" Dropdown Menu in Your Page Menu
- Title it something like "My Account"
- Put the "Loading..." page in here
- Optional: Make "Change password" and "My Profile" pages and put them in here too for a cleaner user experience
Javascipt
Code for Logout Page
Replace the scene_xx with your scene id number for the Log Out page. Also replace "homepage" with the URL for your company's knack homepage. This will redirect your users back to the home page after logout.
/* Log Out Process
- Update scene_96 to your specific logout page
- Also update the "destination" below to your desired logout redirect page
*/
$(document).on('knack-scene-render.scene_96', function (event, scene) { // Use Scene ID for Your Log Out Page
let KnackScenes = $(".kn-scenes.kn-section");
function redirect (destination = "https://company.knack.com/sitepage/") { // Change URL to Homepage or Other Destination
setTimeout(function(){
window.location = destination;
KnackScenes.show(100);
}, 1000);
}
function logoutUser(button = document.createElement("a")) {
button.className = "kn-log-out";
button.innerHTML = "Click to Log Out";
document.getElementById("kn-" + scene.key).appendChild(button);
button.addEventListener("click", function() {
KnackScenes.hide();
redirect();
});
button.click();
}
if (Knack.session.user) {logoutUser()} else {redirect()}
});
Code for All Scenes
You will need to change the data-kn-slug in this code to match your app. You can find the data-kn-slug easily by checking the Page URL for your Loading... page, like we did in the above steps, and placing a # symbol in front of it for example: data-kn-slug=#loading. You will also need to input the actual URL of your logout and login pages when prompted by the code.
$(document).on('knack-scene-render.any', function (event, scene) {
DynamicLoginButton();
});
function DynamicLoginButton() {
// Update Data-slug for both items below with Loading Page
const dynamic_Button_Desktop = $("#kn-app-menu nav.tabs li a[data-kn-slug=#loading]"),
dynamic_Button_Mobile = $("#app-menu-list-mobile li.kn-dropdown-menu ul.kn-dropdown-menu-list li a[data-kn-slug=#loading]"),
if (Knack.session.user) {
let Logout = {
url: "https://mycompany.knack.com/mysite#log-out/", // Update URL to Your Logout Page
icon: 'fa fa-sign-out',
text: "Sign Out",
getHTML: function() {
return "<i class='" + this.icon + "'></i> " + this.text;
}
}
dynamic_Button_Desktop.attr("href", Logout.url).html(Logout.getHTML());
dynamic_Button_Mobile.attr("href", Logout.url).html(Logout.getHTML());
} else { // Not Logged In
let Login = {
url: "https://mycompany.knack.com/mysite#login-page/",
icon: 'fa fa-sign-in',
text: "Sign In",
getHTML: function() {
return "<i class='" + this.icon + "'></i> " + this.text;
}
}
dynamic_Button_Desktop.attr("href", Login.url).html(Login.getHTML());
dynamic_Button_Mobile.attr("href", Login.url).html(Login.getHTML());
}
}