In this guide, we will walk you through how to create a Custom Login Page for your Joget app. The first step of the tutorial is to create your landing page. This page will be where the user is placed once he launches the app. In our sample app, the user will be greeted with two options. Fill out a form or log in. If the user chooses to fill out a form, they will be redirected to the form link. The configuration page of our sample app can be found below:
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Landing Page </title>
<style>
.js-yeslogin{
color: white;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card text-center">
<div class="card-body" style="background-image: url('https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/v688batch2-kul-10-x.jpg? w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=54a3a9cd6f227cbcc5132d1027301610'); background-size:cover;">
<div class="row">
<div class="col-12">
<h1 class="mb-4" style="color: white">Growth Requires Leads</h1>
</div>
<div class="col-6 js-nologin">
<a href="/jw/web/userview/T2595/v/_/lead_crud?_mode=add&embed=true"><button class="btn btn-primary btn-lg">Lead</button></a>
</div>
<div class="col-6 js-nologin">
<a href="/jw/web/login"><button class="btn btn-primary btn-lg">Login</button></a>
</div>
<div class="col-12 js-yeslogin">
<h2>You are logged in!</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
user = "#currentUser.username#";
if(user != ''){
$('.js-nologin').css('display', 'none');
$('.js-yeslogin').css('display', 'block');
}
})
</script>
</html> |
Once configured correctly, your landing page should look like this:
Figure 1: The user is not logged in
Figure 2: The user is logged in
The second step of this tutorial is to customize the Login Page UI of your app. This setting can be found in Configure Layout > Configure DX 8 Plain > Advanced > Progressive Web App (PWA) Settings > Login Page UI. In the Custom HTML section of the page we will use the following code to create our custom login page:
...
Once configured correctly, the login page will look something like this:
Do note that since this is a sample app, various parts of the page are not fully implemented, such as the Privacy Policy, clicking the link will not redirect you anywhere.
...
Figure 3: Login page
As an unsigned user, the user will be redirected to this page whenever they would like to sign in when using this app. Please be aware that several components of this app are not fully functional, including the Privacy Policy, as it is intended as a sample app. While it provides a demonstration of certain features and functionalities, some aspects have intentionally been left incomplete for illustrative purposes. As such, it is essential to consider this aspect while exploring and testing the app. Keep that in consideration if you intend to use this as a template.
Download the sample app below: