Creating login-logout buttons

In this use case, we will see how to create a login and logout button using datas stored in our localStorage

📘 Note : I advice you to check this article to understand how to store values in the localStorage

Firstly, we need to add 2 buttons on our header by clicking on 'add component' icon

and drag & drop a button element.
We need to configure their content as 'Login' and 'Logout' by double clicking on each button.
And also we need to give them each a new class by clicking on paintbrush icon

and

and add a new class 'btn-login' for the button 'Login' and the class 'btn-logout' for the button 'Logout'.

Then, we need to add a 'jQuery source code' element using again the 'add component' icon

See the Pen Login-logout by David (@DavidAppdrag) on CodePen.

Let's analyse this code 😎 :
- Our code start with a logout button invisible
- We read our localStorage trying to find an email or token value which we are supposed to have when we are logged in.
- If we have these informations, we will display our login button else the logout button

📘 Note : When a user click on the logout button, we clear the localStorage and he will be redirect to the login page 😎