<!DOCTYPE html>
<html lang="en">
<head>
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta charset="utf-8">
<link rel="canonical" href="https://partner.serrala.com/user/login">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@WeAreSerrala">
<meta name="twitter:creator" content="@WeAreSerrala">
<meta name="Generator" content="Drupal 9 (https://www.drupal.org)">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/sites/default/files/favicon.ico" type="image/vnd.microsoft.icon">
<title>Log in </title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-family: "StagSans", Arial, "Nimbus Sans L", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #702525;
height: 100vh;
}
.page-user-login .page__content,
.page-user-password .page__content {
padding-top: 50px;
}
.page-user-login .page__content .login-form-area,
.page-user-password .page__content .login-form-area {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
background-color: white;
padding: 100px 50px;
max-height: 600px;
max-width: 500px;
}
.form-group {
margin-bottom: 1rem;
}
.login-content-area {
background-color: #F38320;
color: white;
padding: 90px 40px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 500px;
/* Adjust as needed */
}
.blurry {
padding: 10px;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
background-color: rgba(255, 255, 255, 0.1);
max-height: 500px;
max-width: 400px;
text-align: center;
}
.logo-onclik img {
max-width: 100%;
height: auto;
}
@media (min-width: 768px) {
.offset-md-1 {
margin-left: 8.3333333333%;
}
}
.login-content-area p {
font-size: 14px;
line-height: 15px;
}
@media (min-width: 768px) {
.col-md-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
}
.login-form-area .btn-primary {
border: none;
border-radius: 0;
background-color: #F38320;
display: block;
width: 100px;
text-align: center;
font-size: 16px;
line-height: 17px;
padding: 12px 18px;
}
.login-form-area .btn-primary:hover {
background-color: #F38320;
}
.text-right {
text-align: right !important;
}
.login-register-phrase {
display: none;
font-size: 1rem;
position: absolute;
bottom: 10px;
right: 0;
left: 0;
}
h1,
h2,
h3,
h4,
h5,
p,
span {
overflow-wrap: break-word;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.login-content-area h1 {
margin-top: 50px;
margin-bottom: 140px;
font-size: 32px;
line-height: 34px;
}
.login-form-area input.form-control {
background-color: rgba(217, 217, 217, 0.15);
font-size: 16px;
line-height: 17px;
color: #000000;
border: none;
border-radius: 0;
}
.login-form-area h1 {
margin-bottom: 32px;
font-size: 32px;
line-height: 34px;
}
.login-form-area label {
font-size: 16px;
line-height: 17px;
color: #666666;
}
@media (max-width: 991.98px) {
.login-content-area {
display: none;
}
.login-form-area {
background-image: url("https://partner.serrala.com/themes/custom/serrala/assets/images/Login-Page-Form-Background.png");
background-size: cover;
color: white;
padding: 60px 40px;
}
.login-form-area input.form-control {
background-color: white;
}
.login-form-area label,
.login-form-area a,
.login-form-area .text-muted {
color: white !important;
}
}
@media (max-width: 767.98px) {
.login-register-phrase {
display: block;
text-align: center;
}
.login-form-area {
min-height: calc(100vh - 74px);
}
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
cursor: pointer;
}
.login-register-phrase {
font-size: 1rem;
position: absolute;
bottom: 10px;
right: 0;
left: 0;
}
.login-content-area a {
color: white;
font-weight: 500;
text-decoration: none;
}
.login-content-area a:hover {
border-bottom: 1px solid white;
}
img {
vertical-align: middle;
border-style: none;
}
.navbar {
background-color: white;
height: auto;
}
.navbar img {
max-width: 100%;
height: auto;
margin-top: -15px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas="">
<nav class="navbar navbar-expand-lg justify-content-between dark-header navbar-dark">
<div class="container">
<img src="/images/Oncliklogo.734a66dd3a9af17d0d35.png" width="200px" height="100px" alt="Serrala logo"
class="mr-2">
</div>
</nav>
<div class="page page-user-login">
<main>
<div class="page__content page-default">
<div class="container">
<div data-drupal-messages-fallback="" class="hidden"></div>
<div class="block block--serrala-content">
<div class="row">
<div class="shadow-form"></div>
<div class="col-md-5 offset-md-1 login-content-area">
<div class="blurry">
<div class="logo-onclik">
<img src="https://onclik.ai/wp-content/uploads/2023/08/logo-light.svg"
alt="logo">
</div>
<h1>Welcome to the Onclik IPA Business Partner Portal</h1>
</div>
</div>
<div class="col-md-5 login-form-area">
<h1>Login</h1>
<form class="user-login-form" id="user-login-form" accept-charset="UTF-8">
<div
class="js-form-item form-item js-form-type-textfield form-item-name js-form-item-name form-group">
<label for="edit-name"
class="js-form-required form-required">Username</label>
<input autocorrect="none" autocapitalize="none" spellcheck="false"
autofocus="autofocus" data-drupal-selector="edit-name"
aria-describedby="edit-name--description" type="text" id="edit-name"
name="name" value="" size="60" maxlength="60"
class="required form-control" required="required" aria-required="true">
<small id="edit-name--description"
class="description form-text text-muted">Enter your Onclik
username.</small>
</div>
<div
class="js-form-item form-item js-form-type-password form-item-pass js-form-item-pass form-group">
<label for="edit-pass"
class="js-form-required form-required">Password</label>
<input data-drupal-selector="edit-pass"
aria-describedby="edit-pass--description" type="password" id="edit-pass"
name="pass" size="60" maxlength="128" class="required form-control"
required="required" aria-required="true">
<small id="edit-pass--description"
class="description form-text text-muted">Enter the password that
accompanies your username.</small>
</div>
<input autocomplete="off"
data-drupal-selector="form-h6qomeniuoia568tvgz2dwmagmd08d2c2jqfdl9np7e"
type="hidden" name="form_build_id"
value="form-h6QoMeniuoIA568tvgz2dwmAgmd08d2c2JQfdl9np7E"
class="form-control" id="submit-button">
<input data-drupal-selector="edit-user-login-form" type="hidden" name="form_id"
value="user_login_form" class="form-control">
<div data-drupal-selector="edit-actions"
class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
<input data-drupal-selector="edit-submit" type="submit" id="edit-submit"
name="op" value="Log in"
class="button js-form-submit form-submit btn btn-primary">
</div>
</form>
<p class="text-right"><a href="/user/password">Forgot password?</a></p>
<p class="login-register-phrase">Don’t have an account? <a href="/#join-us">Register
here</a></p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
document.getElementById("user-login-form").addEventListener("submit", async (event) => {
event.preventDefault();
let username = document.getElementById("edit-name").value;
let password = document.getElementById("edit-pass").value;
let data = {
"component_data": {
"username": username,
"password": password
}
};
let formdata = new FormData()
formdata.append("component_data", JSON.stringify(data.component_data))
try {
let response = await fetch("http://192.168.1.22:5000/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: formdata
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
if (response.ok) {
let result = await response.json();
let user_role = localStorage.setItem("userRole", "")
let partner_id = localStorage.setItem("partner_id", "")
let partner_name = localStorage.setItem("partner_name", "")
if (result.user_role === "Admin") {
window.location.href = "/Admin.html"
}
if (result.user_role === "Partner") {
window.location.href = "/Homepage.html"
}
if (result.user_role === "Deal") {
window.location.href = "/Homepage.html"
}
}
} catch (error) {
console.error('Error:', error);
}
});
</script>
</body>
</html>
