CINXE.COM
Login
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Login</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <link rel="stylesheet" href="/static/css/styles.min.css" /> </head> <body class="o-login"> <header class="header"> <div class="container"> <div class="row"> <div class="col-md-12"> <a href="index.html" class="o-login__logo"> <img src="/static/images/logo.svg" alt="MEDCOR" width="190" height="32" /> </a> </div> </div> </div> </header> <section class="mian-body"> <div class="container o-login__boxarea"> <div class="row align-items-end"> <div class="col-md-4"> <div class="o-login__leftimage"> <img src="/static/images/element/login-human-blue-glow.svg" alt="Blue Glow" class="o-login__leftimageblue" /> <img src="/static/images/element/login-human-pink-glow.svg" alt="Pink Glow" class="o-login__leftimagepink" /> <img src="/static/images/login-image.png" alt="login image" class="o-login__leftimagemain" /> </div> </div> <div class="col-md-8 position-relative"> <img src="/static/images/element/login-bottom-glow.svg" alt="Blue Glow" class="o-login__rightboxblue" /> <img src="/static/images/element/login-top-glow.svg" alt="Pink Glow" class="o-login__rightboxpink" /> <div class="o-login__rightbox animated-wrapper"> <h1 class="o-login__rightboxtittle">LOGIN</h1> <form id="loginForm" method="post" action="/"> <div class="o-login__formgroup"> <input type="hidden" name="csrfmiddlewaretoken" value="Lp9xSAG2OcP2QsZ1vEbXY2GC19MT4eUIkDtzmDiCEL3mzAARtIRg7nOZ6kFmUl1q"> <div id="errorMessage" class="error-message"> </div> <div class="o-login__form-wrapper"> <div class="row"> <div class="col-12 col-md-6"> <input type="text" id="email" name="email" placeholder="Email" class="form-controls" required /> </div> <div class="col-12 col-md-6"> <div class="pwd-field"> <input type="password" id="password" name="password" placeholder="Password" class="form-controls" required /> <a id="togglePassword" href="javascript:void(0)" class="eye" > <svg width="20" height="16" viewBox="0 0 20 16" fill="none" class="show" > <path d="M14.9502 12.9499C13.5257 14.0358 11.7911 14.6373 10.0002 14.6666C4.16683 14.6666 0.833496 7.99994 0.833496 7.99994C1.87007 6.06819 3.30778 4.38045 5.05016 3.04994M8.25016 1.53327C8.82377 1.39901 9.41105 1.33189 10.0002 1.33327C15.8335 1.33327 19.1668 7.99994 19.1668 7.99994C18.661 8.94628 18.0577 9.83722 17.3668 10.6583M11.7668 9.76661C11.538 10.0122 11.262 10.2092 10.9553 10.3459C10.6486 10.4825 10.3176 10.556 9.98191 10.5619C9.64623 10.5678 9.3128 10.5061 9.00151 10.3803C8.69021 10.2546 8.40743 10.0675 8.17004 9.83007C7.93264 9.59267 7.74549 9.30989 7.61975 8.9986C7.49402 8.6873 7.43227 8.35387 7.43819 8.0182C7.44411 7.68252 7.51759 7.35148 7.65423 7.04481C7.79087 6.73815 7.98787 6.46215 8.2335 6.23327" stroke="#555555" stroke-linecap="round" stroke-linejoin="round" /> </svg> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="hide" > <g clip-path="url(#clip0_3_13320)"> <path d="M14.9502 14.9499C13.5257 16.0358 11.7911 16.6373 10.0002 16.6666C4.16683 16.6666 0.833496 9.99994 0.833496 9.99994C1.87007 8.06819 3.30778 6.38045 5.05016 5.04994M8.25016 3.53327C8.82377 3.39901 9.41105 3.33189 10.0002 3.33327C15.8335 3.33327 19.1668 9.99994 19.1668 9.99994C18.661 10.9463 18.0577 11.8372 17.3668 12.6583M11.7668 11.7666C11.538 12.0122 11.262 12.2092 10.9553 12.3459C10.6486 12.4825 10.3176 12.556 9.98191 12.5619C9.64623 12.5678 9.3128 12.5061 9.00151 12.3803C8.69021 12.2546 8.40743 12.0675 8.17004 11.8301C7.93264 11.5927 7.74549 11.3099 7.61975 10.9986C7.49402 10.6873 7.43227 10.3539 7.43819 10.0182C7.44411 9.68252 7.51759 9.35148 7.65423 9.04481C7.79087 8.73815 7.98787 8.46215 8.2335 8.23327" stroke="#555555" stroke-linecap="round" stroke-linejoin="round" /> <path d="M0.833496 0.833374L19.1668 19.1667" stroke="#555555" stroke-linecap="round" stroke-linejoin="round" /> </g> <defs> <clipPath id="clip0_3_13320"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </a> </div> </div> </div> </div> </div> <div class="o-login__formgroup" id="tenantSelection" style="display: none;"> <label for="tenant">Select Clinic/Hospital</label> <select id="tenant" name="tenant" class="form-controls"> <!-- Options will be populated dynamically --> </select> </div> <div class="o-login__btn-groups"> <button type="submit" class="btn-default">SIGN IN</button> <span> <a href="/send-mail-for-forgot-password/">Forgot Password</a> </span> </div> </form> <div class="o-login__bottomtext"> Dont have account? <a href="/register/" class="o-login__bottomlink" >SIGNUP</a > </div> </div> </div> </div> </div> </section> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous" ></script> <script> document .getElementById("loginForm") .addEventListener("submit", function (event) { event.preventDefault(); let email = document.getElementById("email").value; let password = document.getElementById("password").value; let tenant = document.getElementById("tenant").value; let errorMessage = document.getElementById("errorMessage"); errorMessage.innerHTML = ""; if (!email || !password) { errorMessage.innerHTML = "Both fields are required"; errorMessage.style.display = "block"; } else if (!validateEmail(email)) { errorMessage.innerHTML = "Please enter a valid email address"; errorMessage.style.display = "block"; } else { fetch("/", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRFToken": "Lp9xSAG2OcP2QsZ1vEbXY2GC19MT4eUIkDtzmDiCEL3mzAARtIRg7nOZ6kFmUl1q", }, body: JSON.stringify({ email: email, password: password, tenant: tenant }), }) .then(response => response.json()) .then(data => { if (data.redirect_url) { window.location.href = data.redirect_url; } else if (data.tenants) { // Multiple tenants found, show tenant selection let tenantSelection = document.getElementById("tenantSelection"); let tenantSelect = document.getElementById("tenant"); tenantSelect.innerHTML = ""; data.tenants.forEach(tenant => { let option = document.createElement("option"); option.value = tenant.id; option.text = tenant.schema_name; tenantSelect.add(option); }); tenantSelection.style.display = "block"; } else { errorMessage.innerHTML = data.error || "Invalid credentials."; errorMessage.style.display = "block"; } }) .catch(error => { console.error("Error:", error); errorMessage.innerHTML = "An error occurred. Please try again."; errorMessage.style.display = "block"; }); } }); function validateEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(String(email).toLowerCase()); } </script> <script> document .getElementById("togglePassword") .addEventListener("click", function () { const passwordField = document.getElementById("password"); const showIcon = this.querySelector(".show"); const hideIcon = this.querySelector(".hide"); if (passwordField.type === "password") { passwordField.type = "text"; showIcon.style.display = "none"; hideIcon.style.display = "inline"; } else { passwordField.type = "password"; showIcon.style.display = "inline"; hideIcon.style.display = "none"; } }); </script> </body> </html>