In this guide, we will walk you through how to create a Custom Login Page for your Joget app.
| Table of Contents |
|---|
Creating a
...
Login Page
| English |
|---|
| The first step of |
...
| Code Block | ||
|---|---|---|
| ||
<!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> |
...
| this |
...
Figure 1: The user is not logged in
Figure 2: The user is logged in
Creating a Login Page
...
| 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: |
| Code Block | ||
|---|---|---|
| ||
<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 31: 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.
...