In this guide, we will walk you through how to create a Custom Login Page for your Joget app. 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. The configuration page of our This can be configured as a Classic Menu HTML component in the UI Builder. 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>
.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> |
...