In this guide, we will walk you through how to create a Custom Login Page for your Joget app. The first 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:
Javascript
<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:
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.
Once you have logged in