Sign In

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Sign In</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <link rel="icon" href="https://staticfiles.niceincontact.com/auth/default/favicon-16x16.png" /> <link rel="stylesheet" href="https://staticfiles.niceincontact.com/auth/default/authorize-style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet"> <script type="text/javascript"> /* Login Page Script */ function validateEmail() { var sResult = false; var userName = (document.getElementById("username").value).trim(); if(userName){ sResult = true; document.getElementById("username").classList.add('hasInput'); document.getElementById("username").classList.remove('error'); document.getElementById('errorUserNameMsg').innerHTML = ''; /* const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; var isValid = reg.test(String(userName).toLowerCase()); if(!isValid){ document.getElementById("username").classList.remove('valid'); document.getElementById("username").classList.add('error'); document.getElementById('errorUserNameMsg').innerHTML = "The username format you entered is not valid"; sResult = false; }else{ document.getElementById("username").classList.add('valid'); document.getElementById("username").classList.remove('error'); document.getElementById('errorUserNameMsg').innerHTML = ''; sResult = true; } */ }else{ if(document.getElementById("username").value.length <= 0){ document.getElementById('errorUserNameMsg').innerHTML = "<span class='screenreader'>Username</span> This field is required."; document.getElementById("username").classList.remove('valid'); document.getElementById("username").classList.remove('hasInput'); document.getElementById("username").classList.add('error'); sResult = false; } } return sResult; } function validatePassword() { if(document.getElementById("password").value.length <= 0){ document.getElementById('errorPassWordMsg').innerHTML = "<span class='screenreader'>Password</span> This field is required."; document.getElementById("password").classList.remove('hasInput'); document.getElementById("password").classList.add('error'); return false; }else{ document.getElementById('errorPassWordMsg').innerHTML = ''; document.getElementById("password").classList.remove('error'); document.getElementById("password").classList.add('hasInput'); return true; } } function clickedForgotPassword(){ document.getElementById("mfa-forgot-password-link").disabled = true; document.getElementById("forgotPassword").value = true; document.getElementById("loginStep2").submit(); } /* Reset-Password Page Script */ function validateNewPassword() { if(document.getElementById("newPassword").value.length <= 0){ document.getElementById('errorNewPassWordMsg').innerHTML = "<span class='screenreader'>New Password</span> This field is required."; document.getElementById("newPassword").classList.add('error'); document.getElementById("newPassword").classList.remove('hasInput'); return false; }else{ document.getElementById('errorNewPassWordMsg').innerHTML = ''; document.getElementById("newPassword").classList.add('hasInput'); document.getElementById("newPassword").classList.remove('error'); return true; } } function validateConfirmNewPassword(){ if(document.getElementById("confirmNewPassword").value.length <= 0){ document.getElementById('errorConfirmNewPassWordMsg').innerHTML = "<span class='screenreader'>Confirm New Password</span> This field is required."; document.getElementById('confirmNewPassword').classList.add('error'); document.getElementById("confirmNewPassword").classList.remove('hasInput'); return false; }else{ document.getElementById('errorConfirmNewPassWordMsg').innerHTML = ''; document.getElementById('confirmNewPassword').classList.remove('error'); document.getElementById("confirmNewPassword").classList.add('hasInput'); return true; } } function validatePasswordEquality(){ var passWord = document.getElementById("newPassword").value; var confirmPassWord = document.getElementById("confirmNewPassword").value; if(passWord != confirmPassWord){ document.getElementById('errorConfirmNewPassWordMsg').innerHTML = "The passwords do not match."; return false; } document.getElementById('errorConfirmNewPassWordMsg').innerHTML = ""; return true; } function validateMfaToken() { if(document.getElementById("mfaToken").value.length <= 0){ document.getElementById('errorMfaTokenMsg').innerHTML = "<span class='screenreader'>MFA Token</span> This field is required."; document.getElementById("mfaToken").classList.add('error'); document.getElementById("mfaToken").classList.remove('hasInput'); return false; }else{ document.getElementById('errorMfaTokenMsg').innerHTML = ''; document.getElementById("mfaToken").classList.remove('error'); document.getElementById("mfaToken").classList.add('hasInput'); return true; } } function validateResetPassword(){ let mfaEnabled = document.getElementById("mfaEnabled").value; let isForceReset = document.getElementById("forceResetPassword").value; var step1 = validateNewPassword(); var step2 = validateConfirmNewPassword(); if(isForceReset === true || isForceReset === 'true'){ if(!step1 || !step2) return false; } else if(mfaEnabled === true || mfaEnabled === 'true'){ var step4 = validateMfaToken(); if(!step1 || !step2 || !step4) return false; } else { if(!step1 || !step2) return false; } var step3 = validatePasswordEquality(); if(!step3) { return false; } document.getElementById("resetPassword").value = true; return true; } function sendBroadcastMessage() { const bc = new BroadcastChannel('login_channel'); bc.postMessage({ 'pwreset': 'success', 'code':document.getElementById("code").value}); console.log("Message sent."); bc.close(); } /* Utility Script */ window.onload = function() { validateRequiredField(); if (null != document.getElementById("forgotPasswordForm")) { console.log("Here- about to initiate BC"); initiateBroadcastChannel(); } if (null != document.getElementById("passwordResetSuccessMsg")) { console.log("Here- about to send data on BC"); sendBroadcastMessage(); } if (null != document.getElementById("selectTenantDropdown") && null != document.getElementById("hiddenTenantId")) { document.getElementById("hiddenTenantId").value = document.getElementById("selectTenantDropdown").value; document.getElementById("selectTenantDropdown").classList.add('hasInput'); } }; /* The function of the broadcast channel is to listen to a message sent on login_channel, sent from password reset page. Once the password reset is successful and message is received, The listener will initiate auto login and the user will be redirected on the given redirect_uri. */ function initiateBroadcastChannel() { const bc = new BroadcastChannel('login_channel'); bc.onmessage = function (ev) { console.log("BC Message received."); document.getElementById("successfulLogin").value = true; document.getElementById("code").value = ev.data.code; document.getElementById("forgotPasswordForm").submit(); bc.close(); //BC is closed after pw rest message is received }; } function ToggleEye(input, eye) { const password = document.getElementById(input); const togglePassword = document.getElementById(eye); const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; const ariaLabel = (type === 'password') ? 'Show Password' : 'Hide Password'; password.setAttribute('type', type); togglePassword.setAttribute('aria-label', ariaLabel); togglePassword.classList.toggle('fa-eye-slash'); } function validateRequiredField(){ if(!document.getElementById("resetPassword") && null != document.getElementById("username") && document.getElementById("username").value.length > 0){ validateEmail(); } if(null != document.getElementById("password") && document.getElementById("password").value.length > 0){ validatePassword(); } if(null != document.getElementById("mfaToken") && document.getElementById("mfaToken").value.length > 0){ validateMfaToken(); } } function validateForm(){ var returnValue = true; if(null != document.getElementById("password")){ if(document.getElementById("password").value.length <= 0){ document.getElementById('errorPassWordMsg').innerHTML = "<span class='screenreader'>Password</span> This field is required."; document.getElementById("password").classList.remove('hasInput'); document.getElementById("password").classList.add('error'); returnValue = false; } } if(null != document.getElementById("mfaToken")){ if(document.getElementById("mfaToken").value.length <= 0){ document.getElementById('errorMfaTokenMsg').innerHTML = "<span class='screenreader'>MFA Token</span> This field is required."; document.getElementById("mfaToken").classList.remove('hasInput'); document.getElementById("mfaToken").classList.add('error'); returnValue = false; } } return returnValue; } function clickedResetLink(){ location.href = window.location.origin + "/auth/authorize?pwreset=true&username=" + forgotPWusername.value +"&token=valid"; } function selectTenant(selectedTenant) { let id = selectedTenant.value; if (null != document.getElementById("hiddenTenantId")) { document.getElementById("hiddenTenantId").value = id; } } function openForm() { let passwordPolicy = JSON.parse(document.getElementById("passwordPolicy").value); let pComplexity = {}; pComplexity.minimumLength = passwordPolicy.complexity.minimumLength; pComplexity.requireLowerCase = passwordPolicy.complexity.requireLowerCase; pComplexity.requireUpperCase = passwordPolicy.complexity.requireUpperCase; pComplexity.requireNumeric = passwordPolicy.complexity.requireNumeric; pComplexity.requireSymbol = passwordPolicy.complexity.requireSymbol; let message = passwordPolicy.message; document.getElementById("myForm").style.display = "block"; var ul = document.getElementById("pwdPolicyList"); ul.innerHTML = ''; var key; for (key in pComplexity) { if (pComplexity.hasOwnProperty(key)) { var li = document.createElement("li"); li.setAttribute('class', "user-details-popover-text"); var failedSvg = createSVG("icons-status_failed", "#D92133", "M14.2 5.8c-0.4-0.4-1-0.4-1.4 0l-2.8 2.8-2.8-2.8c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l2.8 2.8-2.8 2.8c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3l2.8-2.8 2.8 2.8c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4l-2.8-2.8 2.8-2.8c0.4-0.4 0.4-1.1 0-1.4z", "M17.1 2.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9c-3.9 3.9-3.9 10.3 0 14.2 1.9 1.9 4.4 2.9 7.1 2.9s5.2-1 7.1-2.9c3.9-3.9 3.9-10.3 0-14.2zM15.7 15.7c-1.6 1.5-3.6 2.3-5.7 2.3s-4.1-0.8-5.7-2.3c-3.1-3.1-3.1-8.2 0-11.3 1.6-1.6 3.6-2.4 5.7-2.4s4.1 0.8 5.7 2.3c3.1 3.2 3.1 8.2 0 11.4z"); var completedSvg = createSVG("icons-status_completed", "#39C44A", "M10 0c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zM10 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z", "M15.2 6.7c-0.4-0.4-1-0.4-1.4 0l-5 5-2.2-2.1c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l2.8 2.8c0.2 0.2 0.5 0.3 0.8 0.3s0.5-0.1 0.7-0.3l5.7-5.7c0.4-0.4 0.4-1 0-1.4z"); if(key == 'minimumLength') { var textSpan = document.createElement('span'); textSpan.setAttribute('class', "policy-text"); if(null != document.getElementById("newPassword")){ if(document.getElementById("newPassword").value.length >= pComplexity[key]) { textSpan.setAttribute('style', "color: black"); li.appendChild(completedSvg); } else { textSpan.setAttribute('style', "color: #D92133"); li.appendChild(failedSvg); } } else { textSpan.setAttribute('style', "color: #D92133"); li.appendChild(failedSvg); } textSpan.innerHTML = message[key]; li.appendChild(textSpan); ul.appendChild(li); } else if(pComplexity[key]) { var textSpan = document.createElement('span'); textSpan.setAttribute('class', "policy-text"); if (null != document.getElementById("newPassword")){ if(key=='requireNumeric' && document.getElementById("newPassword").value.match(/[0-9]/)!=null) { textSpan.setAttribute('style', "color: black"); li.appendChild(completedSvg); } else if(key=='requireLowerCase' && document.getElementById("newPassword").value.match(/[a-z]/)!=null) { textSpan.setAttribute('style', "color: black"); li.appendChild(completedSvg); } else if(key=='requireUpperCase' && document.getElementById("newPassword").value.match(/[A-Z]/)!=null) { textSpan.setAttribute('style', "color: black"); li.appendChild(completedSvg); } else if(key=='requireSymbol' && document.getElementById("newPassword").value.match(/[!@\#$%^&*+=[\]{}()><",':;.?`/~_\-|\\]/)!=null) { textSpan.setAttribute('style', "color: black"); li.appendChild(completedSvg); } else { textSpan.setAttribute('style', "color: #D92133"); li.appendChild(failedSvg); } } else { textSpan.setAttribute('style', "color: #D92133"); li.appendChild(failedSvg); } textSpan.innerHTML = message[key]; li.appendChild(textSpan); ul.appendChild(li); } } } } function createSVG(title, fill, d1, d2) { var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('version', "1.1"); svg.setAttribute('xmlns', "http://www.w3.org/2000/svg"); svg.setAttribute('width', "16"); svg.setAttribute('height', "16"); svg.setAttribute('viewBox', "0 0 20 20"); svg.setAttribute('title', title); var path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path1.setAttribute('fill', fill); path1.setAttribute('d', d1); var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path2.setAttribute('fill', fill); path2.setAttribute('d', d2); svg.appendChild(path1); svg.appendChild(path2); return svg; } function closeForm() { document.getElementById("myForm").style.display = "none"; } function getCustomDomainDetails(){ var domain = document.getElementById("domain").value; if (domain.length <= 0) { document.getElementById('errorDomainMsg').innerHTML = "<span class='screenreader'></span> This field is required."; document.getElementById("domain").classList.remove('hasInput'); document.getElementById("domain").classList.add('error'); return false; } var url = 'https://' + domain + '/.well-known/cxone-configuration'; const xhttp = new XMLHttpRequest(); xhttp.open("GET", url); xhttp.send(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { var data = JSON.parse(this.responseText); if(data.tenantId){ console.log('Data received from domain '+ JSON.stringify(data)); document.getElementById("username").remove(); document.getElementById("fqdnTenantId").value=data.tenantId; document.getElementById("fqdn").value=domain; document.getElementById("loginStep1").submit(); } else { showInvalidDomainError(url, "Tenant Id not present"); } } else { showInvalidDomainError(url, "Invalid custom domain"); } } } } function showInvalidDomainError(url, errorMsg){ console.error("failed to get data from endpoint "+url+" due to "+errorMsg); document.getElementById('errorDomainMsg').innerHTML = "Invalid Custom Domain."; document.getElementById("domain").classList.add('error'); return false; } function clickedCustomDomainLink(){ document.getElementById("login-step-1").style.display = "none"; document.getElementById("custom-domain").style.display= "block"; if(document.getElementById("spInitiatedFlow")){ document.getElementById("spInitiatedFlow").style.display="none" } } function clickedBackCustomDomainLink(){ document.getElementById('errorDomainMsg').innerHTML = ''; document.getElementById("domain").classList.remove('error'); document.getElementById("domain").classList.add('hasInput'); document.getElementById("domain").value =""; document.getElementById("login-step-1").style.display = "block"; document.getElementById("custom-domain").style.display= "none"; if(document.getElementById("spInitiatedFlow")){ document.getElementById("spInitiatedFlow").style.display="block" } } function validateDomain() { if(document.getElementById("domain").value.length <= 0){ document.getElementById('errorDomainMsg').innerHTML = "<span class='screenreader'></span> This field is required."; document.getElementById("domain").classList.remove('hasInput'); document.getElementById("domain").classList.add('error'); document.getElementById("domainNextBtn").disabled = true; return false; }else{ document.getElementById('errorDomainMsg').innerHTML = ''; document.getElementById("domain").classList.remove('error'); document.getElementById("domain").classList.add('hasInput'); document.getElementById("domainNextBtn").disabled = false; return true; } } </script> <style> html, body { height: 100%; margin: auto; font-family: 'Open Sans'; font-size: 14px; line-height: 1.42857143; color: #333; } .main-container { display: flex; font-family: 'Open Sans'; flex-direction: row; justify-content: center; align-items: stretch; justify-content: stretch; height: 100%; } .screenreader { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .login-page-content { min-height: 100%; position: relative; display: inline-block; width: 100%; } .login-page-container { background-color: #1989C4; width: 50%; flex-grow: 1.5; height: 100%; position: relative; overflow: auto; overflow-x: hidden; } label { display: block; } .form-label { position: absolute; top: 9px; left: 20px; cursor: text; transition: all .15s ease-in-out 0s; color: #767676; } .form-control:focus { box-shadow: none; border-color: #237bc2; } .form-control.error{ border-color: #d82132; } input#password.hasInput { border-color: #237bc2; } input#username.valid { border-color: #237bc2; } #username:focus ~ .form-label, #username.hasInput ~ .form-label, #domain:focus ~ .form-label, #domain.hasInput ~ .form-label, #password:focus ~ .form-label, #password.hasInput ~ .form-label, #mfaToken:focus ~ .form-label, #mfaToken.hasInput ~ .form-label, #newPassword:focus ~ .form-label, #newPassword.hasInput ~ .form-label, #confirmNewPassword:focus ~ .form-label, #confirmNewPassword.hasInput ~ .form-label, #selectTenantDropdown:focus ~ .form-label, #selectTenantDropdown.hasInput ~ .form-label { top: -0.9em; left: 10px; font-size: .9em; color:#767676; cursor: pointer; padding: 4px; padding-bottom:0; z-index: 9999; font-family: 'Open Sans'; } .login-page-content .login-split-page-btn { width: 49%; padding: 9px 12px; height: 38px; font-family: 'Open Sans', sans-serif; } .custom-domain-btn{ width: 100%; padding: 9px 12px; height: 38px; font-family: 'Open Sans', sans-serif; overflow: hidden; } .field.top-labeled-field.form-top-field .fa { opacity: 0.6; } i#toggleConfirmNewPassword, i#toggleMFA { opacity: 0.6; } @media all and (max-width: 992px) { div#marketing-area { display: none; } } .login-page-content #copyRight-contactUs #footer-logo-cxone { background-repeat: no-repeat; background-size: contain; margin: 0 auto; padding: 20px; max-width: 150px; } .login-page { display: block; background: #fff; margin: 0 auto; height: 100%; width: auto; max-width: 380px; min-width: 170px; box-shadow: 0 11px 26px 5px rgba(31, 50, 77, .3); } .marketing-container { width: 50%; flex-grow: 1.5; } #backBtn,#skip,#tenantBackBtn, #custom-domain-id { border-radius: 3px; color: #767676; background-color: #fff; font-weight: 600; border: 1px solid #dae2e8; box-sizing: border-box; box-shadow: 0 1px 0 #dae2e8; margin-right:3px; float:left; } .btn-primary:focus, .btn-primary:hover{ background-color: #176dab; } #btnNext:hover, #backBtn:hover,#skip:hover, #loginBtn:hover, #tenantBackBtn:hover, #custom-domain-id:hover { border: 1px solid #6b8ea8; box-shadow: 0 1px 0 #6b8ea8; cursor:pointer; } #resetPasswordBtn:hover, #loginBtn:hover, #btnNext:hover{ border: 1px solid #007cbe; border-bottom: 1px solid #105286; box-shadow: 0 1px 0 #105286; background: #176dab; } .nice-cxone-logo { background-repeat: no-repeat; background-size: contain; background-position: center; margin: 0 auto !important; padding: 37px; max-width: 200px; min-width: 174px; } .form-header { color: #404040; font-size: 18px; font-weight: 400; line-height: 59px; text-align: left; background-color: #fff; border-bottom: 1px solid #d6dee5 !important; padding-top: 10px !important; height: 80px; } .form-frame { padding: 0 30px 10px; padding: 0 30px 32px; margin: 0 auto; } .field { margin-top: 30px; margin-bottom: 30px; position: relative; } .setPasswordPageWrapper .field { margin-top: 15px; margin-bottom: 15px; position: relative; } .setPasswordPageWrapper .form-top-field{ margin-top: 30px; } label#lblUsername { display: inline-block; line-height: 20px; font-weight: 700; text-overflow: ellipsis; overflow: hidden; width: calc(100% - 50px); } #login-step-2 .field.top-labeled-field.form-top-field { margin-top: 15px; } .login-username { margin-bottom: 0; margin-top: 20px; vertical-align: middle; line-height: 1em; width: 100%; } .login-username i{ font-size: 16px; width: 30px; background: #00679e; color: white; border-radius: 50%; width: 25px; height: 25px; text-align: center; line-height: 1.5em; vertical-align: bottom; } input#password,input#mfaToken, input[type=password] { height: 40px; padding-right: 31px !important; font-family: 'Open Sans', sans-serif; } input#mfaToken { height: 40px; } input[type=text],input[type=password] { outline: 0; border: 1px solid #d6dee5; box-sizing: border-box; background-color: transparent; height: 40px; line-height: 21px; padding: 0 12px; font-weight: 400; box-shadow: none; width: 100%; z-index: 99; position: inherit; } div { display: block; } #footer-content-cxone div { display: inline } *, :after, :before { box-sizing: border-box; } .btn { width: 100%; padding: 9px 12px; height: 38px; } .btn-primary, .btn-primary:focus { color: #ffffff; background-color: #007cbe; border: 1px solid #007cbe; border-bottom: 1px solid #105286; border-radius: 3px; box-shadow: 0 1px 0 #105286; height: 40px; cursor: pointer; font-family: 'Open Sans', sans-serif; font-weight: 600; text-overflow: ellipsis; overflow: hidden; } footer#copyRight-contactUs { color: #fff; font-weight: 400; font-size: 12px; line-height:1.3em; text-align: center; width: 100%; position: absolute; left: 0; bottom: 5px; display: block; padding: 0; padding-top: 10px; margin-bottom: 5px; } a.contact-us { color: #fff; text-decoration: underline; } .login-wrapper { margin-bottom: 95px; } .forgot-password { font-family: 'Open Sans'; font-size: 14px; font-weight: 400; line-height: 22px; text-align: center; width: 100%; margin: 0 auto; background-color: transparent; border: none; outline: none; color: #337ab7; text-decoration: underline; cursor: pointer; } .custom-domain-class { font-family: 'Open Sans'; color: #9b9ea0; font-size: 14px; font-weight: 400; line-height: 22px; text-align: center; width: 100%; margin: 0 auto; overflow: hidden } #forgot-password-backToSignIn, #reset-password-backToSignIn, a { background-color: transparent; border:none; outline: none; color: #337ab7; text-decoration: underline; cursor: pointer; font-family: 'Open Sans'; } #forgot-password-backToSignIn:focus, #reset-password-backToSignIn:focus, #reset-password-backToSignIn:hover, #forgot-password-backToSignIn:hover, #mfa-forgot-password-link:focus, #mfa-forgot-password-link:hover { color: #23527c; text-decoration: underline; } .contact-us:focus-visible { outline: 1px dotted black; outline-offset: 1px; } .forgot-password a:focus, .forgot-password a:hover { color: #23527c; text-decoration: underline !important; } .login-page .loginPageWrapper .SecondSectionMailSent { text-align: center; padding: 61px; background-color: #fff; height: 100%; } .login-page .loginPageWrapper .title { font-size: 19px; margin-bottom: 30px; margin-top: -20px; } .login-page .loginPageWrapper .mailImgWrapper { width: 100px; height: 100px; background: #2bbd09; border-radius: 50%; position: relative; margin: auto auto 50px; padding: 20px; } .login-page .loginPageWrapper img { width: 32px; height: 32px; text-align: center; position: absolute; top: 33px; left: 34px; } .error-message { color: #d82132; font-size: 12px; font-weight: 400; line-height: 22px; text-align: left; margin-top: 10px; } .backToSignIn { text-align: center; margin-top: 10px; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background-color: #c9d0d6; } ::-webkit-scrollbar-track { background-color: #f4f7f9; } .login-banner-wrapper { padding-bottom: 140px; } .tenant-banner-props{ height: 140px; } .error-page-div { position: fixed; left: 50%; top: 50%; width: 85%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); color: #fff; text-align: center; } .error-page .error-page-div h1 { font-weight: 600; font-size: 24px; } .error-page .error-page-div .back-to-login { font-family: 'Open Sans'; color: #fff; font-size: 14px; font-weight: 400; line-height: 22px; text-align: center; width: 100%; margin: 0 auto; } a#errorPageBackBtn { color: #fff; } label.form-label::after { background: white; content: ""; width: 100%; height: 75%; position: absolute; left: 0; z-index: -1; top: 0px; } .main-content { font-family: 'Open Sans'; } .tenant-banner, .reseller-banner { height: 100px ; padding-left: 15px; font-size: 18px; overflow: auto } .selectDropdown { height: 40px; width: 100%; font-family: 'Open Sans', sans-serif; padding: 0 12px; font-weight: 400; box-shadow: none; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, grey 50% calc(50% + 1px), transparent calc(50% + 2px)), linear-gradient(-45deg, transparent 50%, grey 50% calc(50% + 1px), transparent calc(50% + 2px)); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; } .selectDropdown:focus { border-color: #237bc2; } .form-popup{ display: none; margin-top: 5px; position: absolute; z-index: 10000; } .form-popup-heading{ padding: 5px; border-style: solid; border-width: 1px; border-color: #ccd5dd; width: 300px; border-radius: 0%; background-color: #f4f7f9; padding-left: 15px; font-weight: bold; } .form-popup-content{ padding: 5px; border-style: solid; border-width: 1px; border-color: #ccd5dd; width: 300px; border-radius: 0%; background-color: white; padding-left: 15px; } .user-details-popover-text{ vertical-align: middle; list-style: none; } .policy-text{ vertical-align: middle; display: inline-block; font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 12px; text-align: left; margin-left: 10px; margin-bottom: 7px; } .container__arrow { height: 16px; width: 16px; background-color: #f4f7f9; position: absolute; } .container__arrow--tl { /* Position at the top left corner */ left: 10px; top: 0px; /* Border */ border-left: 1px solid rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(0, 0, 0, 0.3); transform: translate(50%, -50%) rotate(45deg); } .or-group { display: flex; align-items: center; justify-content: center; margin-bottom: -20px; } .or-line { border-top: 1px solid #b8c5cc; width: 100%; } #or-text { color: #b8c5cc; padding: 0 24px; font-size: 14px; } .or-text { user-select: none; display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 5px; margin-inline-end: 5px; } #line { margin-top:20px; margin-bottom:20px; } .width400 { width: 400px; background-color: #fff; } .widthAuto { min-width: 320px; width: auto; } </style> </head> <body> <div class="main-container"> <div id="login-page" class="login-page-container" width="50%"> <div class="login-page-content">  <div class="login-banner-wrapper"> </div>  <div class="login-wrapper"> <div id="logo" class="nice-cxone-logo" login-logo-style="na1" aria-label='NICE CXone'></div> <div class="login-page"> <div id="mainSection" class="login form-frame-media-screen">   <div class="form-frame form-header" role="heading" aria-level="1">Sign In</div> <div class="form-frame">  <form id="loginStep1" name="loginStep1" method="POST" action="/auth/authorize"> <div id="login-step-1"> <div class="form-group"> <div class="field top-labeled-field form-top-field"> <input id="username" name="username" tabindex="1" autofocus type="text" class="form-control" value="" oninput="validateEmail()" autocomplete="username"> <label for="username" class="form-label">Username</label> <span id="errorUserNameMsg" class="error-message" aria-describedby="username" role="alert"> </span> </div> </div> <button id="btnNext" tabindex="2" type="submit" onclick="return validateEmail()" class="btn btn-primary">NEXT</button> <hr id="line"> <div class="custom-domain-class"> <button type="button" id="custom-domain-id" name="custom-domain-id" tabindex="2" onclick="clickedCustomDomainLink()" class="custom-domain-btn btn-default">Use Company Domain</button> </div> </div> <div id="custom-domain" style="display: none;"> <div class="form-group"> <div class="field top-labeled-field form-top-field"> <input id="domain" tabindex="1" autofocus type="text" class="form-control" value="" oninput="validateDomain()"> <label for="domain" class="form-label">Company Domain</label> <span id="errorDomainMsg" class="error-message" role="alert"></span> </div> </div> <input id="backBtn" tabindex="2" value="< Back" class="login-split-page-btn btn-default" type="button" onclick="clickedBackCustomDomainLink()" /> <button id="domainNextBtn" tabindex="3" class="login-split-page-btn btn-primary" type="button" onclick="getCustomDomainDetails()">NEXT</button> <input type="hidden" id="fqdnTenantId" name="fqdnTenantId" value=""> <input type="hidden" id="fqdn" name="fqdn" value=""> </div> <input type="hidden" id="code" name="code" value="ae8fcd6e959f48709fe8d4812204b4ee.ap-southeast-2"> <input type="hidden" name="restart" value="eyJyZWRpcmVjdF91cmkiOiJodHRwczovL2N4b25lLm5pY2VpbmNvbnRhY3QuY29tL3VhL3YxL2NhbGxiYWNrIiwic2NvcGUiOiJvcGVuaWQiLCJyZXNwb25zZV90eXBlIjoiY29kZSIsImNsaWVudF9pZCI6IjBiNjk3ZWJiLTRlYTItNDA1Mi1iMTJiLWQzY2YxMmE1M2VjYSJ9"> </form> </div> </div> </div> </div>  <div id="footer"> <footer class="copyRight-contactUs " id="copyRight-contactUs"> <login-footer> <span> <div id="footer-logo-cxone" aria-label='NICE CXone'></div> <span id="footer-content-cxone"> <div id="footer-copyright">Copyright 漏 2005-2024 NICE LTD Inc. All Rights Reserved. </div> <div><a class="contact-us" tabindex="6" href="https://www.niceincontact.com/contact-us" target="_blank">Contact Us</a></div> </span> </span> </login-footer> </footer> </div> </div> </div> <div id="marketing-area" class="marketing-container" width="50%"> <iframe height="100%" width="100%" frameborder="0px" src="https://www.niceincontact.com/login-page" role="presentation"></iframe> </div> </div> </body> </html>

CINXE.COM

Sign In