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
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.
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Landing Page </title>
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">-->
<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>-->
<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/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:
...
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.
...