In this guide, we will walk you through how to create a Custom Login Page for your Joget app.
Creating a 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 1: 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.