In this guide, we will walk you through how to create a Custom Login Page for your Joget app.
Creating a Landing Page
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. This can be configured as a Classic Menu HTML component in the UI Builder. Do note that the Classic Menu HTML component is a plugin that can be found here. The code used in the sample app can be found below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Landing Page </title>
.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/APP_kb_dx8_custom_login_page/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
Creating a Login Page
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:
<style>
body#login #loginForm{display: none;} <!--we hide the default form -->
.img100{height: 100% !important;};
</style>
<section class="vh-100" style="background-color: #9A616D;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card" style="border-radius: 1rem;">
<div class="row g-0">
<div class="col-md-6 col-lg-5 d-none d-md-block">
<img src="https://img.freepik.com/free-photo/front-view-hand-adding-coin-jar-with-plant-other-coins_23-2148803915.jpg?w=740&t=st=1690268106~exp=1690268706~hmac=4a1accc18de434f950f78142aaf9f15536c25caa6b9cf4162d98c87d236468b9"
alt="login form" class="img-fluid img100" style="border-radius: 1rem 0 0 1rem;" />
</div>
<div class="col-md-6 col-lg-7 d-flex align-items-center">
<div class="card-body p-4 p-lg-5 text-black">
<form>
<div class="d-flex align-items-center mb-3 pb-1">
<i class="fas fa-cubes fa-2x me-3" style="color: #ff6219;"></i>
<span class="h1 fw-bold mb-0">Logo</span>
</div>
<h5 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Sign into your account</h5>
<div class="form-outline mb-4">
<input type="text" id="fake-username" class="form-control form-control-lg" />
<label class="form-label" for="fake-username">Username</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="fake-password" class="form-control form-control-lg" />
<label class="form-label" for="fake-password">Password</label>
</div>
<div class="pt-1 mb-4">
<button class="btn btn-dark btn-lg btn-block" type="button" id="fake-login">Login</button>
</div>
<a class="small text-muted" href="#!">Forgot password?</a>
<p class="mb-5 pb-lg-2" style="color: #393f81;">Don't have an account? <a href="#!"
style="color: #393f81;">Register here</a></p>
<a href="#!" class="small text-muted">Terms of use.</a>
<a href="#!" class="small text-muted">Privacy policy</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function(){
$('#fake-login').on('click', function(){
console.log('trigger');
$('input[name="submit"]').click();
})
$('#fake-username').on('change', function(e){
$('#j_username').val($(this).val());
})
$('#fake-password').on('change', function(e){
$('#j_password').val($(this).val());
})
});
</script>
Once configured correctly, the login page will look something like this:
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.