Configure the Client
Let’s code the Authentication app by configuring the client component. The client directory contains:
- The index.html file that contains the HTML code for the frontend application
- The main.css file that contains the CSS code for the frontend application
- The main.js file that contains the JavaScript code
- The client-package.json configuration file
We will be coding index.html, main.css, and main.js. We will discuss the code at the end of this section.
Before you add the code in the client files, you must perform these two actions:
-
The application requires another new file for the client component. Create a new file in the client/ directory (CATALYST_CLIENT_HOME) using the IDE you have set up for this application, and name it home.html.
-
Open the client-package.json configuration file and replace its contents with this code:
copy
{
"name": "userApp",
"version": "0.0.1",
"homepage": "index.html",
"login_redirect":"home.html"
}
We have added a line to define a login redirect action. Therefore, when a user login is successful, the user will be redirected to the home.html page.
You can now copy the code provided below and paste it in the respective files located in the client/ directory using the IDE, then save the files.
index.html
copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>UserApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script src="https://static.zohocdn.com/catalyst/sdk/js/3.0.0/catalystWebSDK.js"></script>
<script src="/__catalyst/sdk/init.js"></script>
<script>
catalyst.auth.signIn("login");
</script>
</head>
<body style="background:#c0c0c0;">
<header>
<center> <br> <br> <br>
<img width="80px" height="80px"
src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png">
<h1>User Profile Management</h1>
</center>
</header>
<div class="login" id="login"></div>
<div class="signup" id="signup">
<form class="modal-content" onsubmit="return false;">
<div class="container">
<center>
<h1>Sign Up</h1>
<p>Please fill this form to sign up for a new account.</p>
</center>
<label for="firstname"><b>First Name</b></label>
<input id="firstname" type="text" placeholder="Enter First Name" name="firstname" required>
<label for="lastname"><b>Last Name</b></label>
<input id="lastname" type="text" placeholder="Enter Last Name" name="lastname" required>
<label for="email"><b>Email</b></label>
<input id="mailid" type="text" placeholder="Enter Email address" name="email" required>
<p>By creating an account, you agree to our <a href="https://www.zoho.com/catalyst/terms.html"
target="_blank" style="color:dodgerblue">Terms & Conditions</a>.</p>
<div class="clearfix">
<center> <button class="signupfnbtn" type="submit" onclick="signupAction(this)"
class="signupbtn">Sign Up</button></center>
</div>
</div>
</form>
</div>
<div class="forgotpwd" id="forgotpwd">
<form class="modal-content" onsubmit="return false;">
<div class="container">
<center>
<h1>Forgot Password</h1>
</center>
<label for="mailid"><b>Enter your Email address</b></label>
<input id="emailid" type="text" placeholder="Mail ID" name="mailid" required>
<div class="clearfix">
<center> <button class="pwdfnbtn" type="submit" onclick="forgotPassword(this)" class="signupbtn">Reset
Password</button></center>
</div>
</div>
</form>
</div>
<center>
<div id="buttons">
<button class="seperatebtn" onclick="showDiv('pwd')">Forgot Password</button><br><br><br>
<p class="homepage">Don't have an account? <a href=# onclick="showDiv('signup')">Sign-up</a> now!</p>
</div>
</center>
</body>
</html>
home.html
copy
<!DOCTYPE html>
<html>
<head>
<title>Profile Information</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="main.js"></script>
<script src="https://js.zohostatic.com/catalystclient/1.0.0/catalystWebSDK.js"></script>
<script>
var cred = new catalystCredential();
cred.loadFromJSON({
project_Id: 3376000000355123, //Replace this value with your project ID
zaid: 10022617339 //Replace this value with your ZAID
});
catalyst.initApp(cred, {});
</script>
<style>
.card {
max-width: 500px;
margin: auto;
text-align: center;
font-family: arial;
background-color: #a5a4a4;
}
.title {
font-size: 23px;
color: black;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 50%;
font-size: 18px;
border-radius: 8px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,
a:hover {
opacity: 0.7;
}
body {
background-color: #a5a4a4;
font-size: 20px;
visibility: hidden;
}
p {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
</style>
</head>
<body onload="showProfile()">
<h1 style="text-align:center">User Profile Information</h1>
<div class="card">
<img width="200px" height="450px" src="https://theimag.org/wp-content/uploads/2015/01/user-icon-png-person-user-profile-icon-20.png" alt="John" style="width:100%">
<p class="title" id="fname"></p>
<p class="title" id="lname"></p>
<p class="title" id="mailid"></p>
<p class="title" id="tzone"></p>
<p class="title" id="ctime"></p>
<p><button onclick="logout()">Logout</button></p>
</div>
</body>
</html>
Before you configure the next file, ensure that you replace the values of project
ID and ZAID in lines 12 and 13, with the values from
your project.
main.js
copy
function signupAction() {
//Get the details of the user from the HTML page
var firstName = document.getElementById("firstname").value;
var lastName = document.getElementById("lastname").value
var email = document.getElementById("mailid").value;
//Create a JSON to use the details for the user sign-up
var data = {
"first_name": firstName,
"last_name": lastName,
"email_id": email,
"platform_type": "web"
};
var auth = catalyst.auth;
//The signup method will sign up the user with the specified data
var signupPromise = auth.signUp(data);
signupPromise
.then((response) => {
//If the signup is successful, the user will be asked to check their email
document.body.innerHTML = 'An account verification email has been sent to your email address';
setTimeout(function () {
location.reload();
}, 5000);
})
.catch((err) => {
//If the signup is not successful, this alert will be displayed
alert("Try again after some time");
location.reload();
});
}
function forgotPassword() {
debugger;
//Get the email address of the user from the HTML page
var email = document.getElementById("emailid").value;
//Create a JSON to use the user details for the password reset
var data = {
"email_id": email,
"platform_type": "web",
"redirect_url": "https://" + document.domain + "/app/index.html"
};
//The forgot password method with the user data will send a reset password link to the users email
var userManagement = catalyst.userManagement;
var forgotPromise = userManagement.forgotPassword(data);
forgotPromise
.then((response) => {
//If the password reset is successful, the user will be asked to check their email
document.body.innerHTML = 'A password reset email has been sent to your email address';
setTimeout(function () {
location.reload();
}, 5000);
})
.catch((err) => {
//If the password reset is not successful, this alert will be displayed
console.log(err);
alert("Try again after some time");
location.reload();
});
}
function showProfile() {
//The catalyst.auth.isUserAuthenticated() method allows only authenticated users, i.e., the users who are logged in, to
access the pages
//You can load this method in the body of your page to allow only authenticated users to access a particular page
catalyst.auth.isUserAuthenticated().then(result => {
//If the user is logged in, these contents of the page will be displayed to the user
document.body.style.visibility = "visible";
var first_name = "First Name: " + result.content.first_name;
document.getElementById("fname").innerHTML = first_name;
var last_name = "Last Name: " + result.content.last_name;
document.getElementById("lname").innerHTML = last_name;
var mailid = "Email Address: " + result.content.email_id;
document.getElementById("mailid").innerHTML = mailid;
var tzone = "Time Zone: " + result.content.time_zone;
document.getElementById("tzone").innerHTML = tzone;
var created_time = " Joined On: " + result.content.created_time;
document.getElementById("ctime").innerHTML = created_time;
}).catch(err => {
//If the user is not logged in, this will be displayed to the user and they will be redirected to the login page
document.body.style.visibility = "visible";
document.body.innerHTML = 'You are not logged in. Please log in to continue. Redirecting you to the login page..';
setTimeout(function () {
window.location.href = "index.html";
}, 5000);
});
}
function logout() {
//The signOut method is used to sign the user out of the application
var redirectURL = "https://" + document.domain + "/app/index.html";
console.log(redirectURL)
debugger;
var auth = catalyst.auth;
auth.signOut(redirectURL);
}
function showDiv(value) {
var value = value;
var logindiv = document.getElementById("login");
var signupdiv = document.getElementById("signup");
var forgotpwddiv = document.getElementById("forgotpwd");
var buttonsdiv = document.getElementById("buttons");
if (value == "pwd") {
logindiv.style.display = "none";
signupdiv.style.display = "none";
forgotpwddiv.style.display = "block";
buttonsdiv.style.display = "none";
} else if (value == "signup") {
logindiv.style.display = "none";
signupdiv.style.display = "block";
forgotpwddiv.style.display = "none";
buttonsdiv.style.display = "none";
}
}
main.css
copy
div.login {
padding-top: 10px;
height: 260px;
width: 500px;
margin: 0 auto;
}
div.signup {
display: none;
}
div.forgotpwd {
display: none;
}
/* Full-width input fields */
input[type=text] {
width: 90%;
padding: 15px;
margin: 15px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
border-radius: 8px;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus,
input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 200%;
opacity: 0.9;
}
button:hover {
opacity: 1;
}
/* Float cancel and signup buttons and add an equal width */
.seperatebtn{
width: 10%;
padding: 8px;
border-radius: 8px;
}
.signupbtn {
width: 10%;
padding: 8px;
border-radius: 8px;
}
.signupfnbtn {
width: 20%;
padding: 8px;
border-radius: 8px;
}
.pwdfnbtn {
width: 40%;
padding: 8px;
border-radius: 8px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: #474e5d;
}
/* Modal Content/Box */
.modal-content {
background-color: #c0c0c0;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
width: 25%;
/* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
p.homepage{
font-size: 23px;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 100px) {
.signupbtn {
width: 100%;
}
}
The client directory is now configured.
Let’s quickly go through the application logic:
-
The index.html page contains the sign-in iFrame which includes the regular account sign in,Zoho and Google sign in. It also includes a sign-up and a ‘Forgot Password’ link. A Web SDK script defining the scope of the user authentication is included in the code of index.html. This script refers to main.js as the source.
-
When a user signs up for an account after providing the details in the sign-up form in
index.html, the signupAction() function defined in
main.js creates a JSON and adds the user details in it. The user will be signed up with the data
given.
The index.html page refers to this function when the sign-up button is clicked.
-
If the sign up is successful, a user verification email will be sent to the user’s email by Catalyst. This email is sent based on the template we configured in this step. The email contains a link to a page where the user can set up a password.
-
When a user logs in to the application, they will be redirected to home.html as defined in
client-package.json. The home.html page displays the user profile
information such as their name, email address, time zone, and date of joining Authentication app. This page also
contains the Web SDK script that defines the scope of the user authentication.
-
home.html refers to the showprofile() function defined in
main.js that displays the user profile information on body load. We verify if a user is
authenticated using the catalyst.auth.isUserAuthenticated() method, and display the information only to a logged in user.
-
The Zoho and Google sign-in buttons are added automatically to the sign-in frame, since we enabled them previously.On clicking those buttons, the respective sign-in actions are automatically initiated. The user will be redirected to home.html after a successful login.
-
When a user clicks on the ‘Forgot Password’ link from index.html, an email will be sent to the address provided by user in the form containing a link to reset the password. This email is sent based on the template we configured earlier. The user can set up a new password, on clicking the link. This logic is defined in the forgotPassword() function in main.js.
-
When a user logs out of the application from home.html, the actions defined in the
logout() function in main.js are triggered. The user will be redirected to index.html.
Last Updated 2023-05-10 13:52:27 +0530 +0530