CINXE.COM
Login - TrustArc
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="description" content="TrustArc Login Page" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login - TrustArc</title> <link rel="stylesheet" href="../css/bootstrap4/bootstrap.min.css" /> <link rel="stylesheet" href="../css/login.css" /> <link rel="stylesheet" href="../css/ds5.css" /> </head> <body> <div class="card mx-auto my-5"> <img class="card-img-top" src="../images/trustarc-logo.svg" alt="TrustArc Logo" /> <div class="card-body w-100"> <div id="loginCarousel" class="carousel slide" data-wrap="false" data-pause="true" data-ride="false" > <div class="carousel-inner"> <div class="carousel-item active"> <div class="carousel-item-body"> <div class="alert alert-danger mt20 ng-scope hidden" > <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM4.71967 4.71967C5.01256 4.42678 5.48744 4.42678 5.78033 4.71967L8.09363 7.03297L10.4069 4.71967C10.6998 4.42678 11.1747 4.42678 11.4676 4.71967C11.7605 5.01256 11.7605 5.48744 11.4676 5.78033L9.15429 8.09363L11.4676 10.4069C11.7605 10.6998 11.7605 11.1747 11.4676 11.4676C11.1747 11.7605 10.6998 11.7605 10.4069 11.4676L8.09363 9.15429L5.78033 11.4676C5.48744 11.7605 5.01256 11.7605 4.71967 11.4676C4.42678 11.1747 4.42678 10.6998 4.71967 10.4069L7.03297 8.09363L4.71967 5.78033C4.42678 5.48744 4.42678 5.01256 4.71967 4.71967Z" fill="#931010" /> </svg> <span></span> </div> <form id="form1" data-cy="loginForm1"> <div class="form-group"> <label for="form1InputEmail">Email Address</label> <input data-cy="loginForm1Email" id="form1InputEmail" type="email" class="form-control" name="username" placeholder="Enter email address to login manually or access through SSO" /> </div> <div class="form-group invisible"> <label for="form1InputPassword">Password</label> <input data-cy="loginForm1Password" id="form1InputPassword" type="password" class="form-control" name="password" /> </div> </form> <div class="d-flex justify-content-end"> <a data-cy="loginForm1" id="form1ButtonNext" class="btn btn-primary btn-next w-100" href="#loginCarousel" role="button" data-slide="next" > Next </a> </div> <div class="separator"> <span class="line"></span> <span class="text">OR</span> <span class="line"></span> </div> <div class="mt-4"> <div id="loginButtons" class="loginButtons"> <a id="googleSignin" tabindex="0" class="btn btn-google w-100" role="button" href="/xauth/oauth2/code/google?continue=" > <div class="abcRioButton abcRioButtonBlue"> <div class="abcRioButtonContentWrapper d-flex align-items-center" > <div class="abcRioButtonIcon"> <div style="width: 18px; height: 18px" class="abcRioButtonSvgImageWithFallback abcRioButtonIconImage abcRioButtonIconImage18" > <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg" > <g> <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" ></path> <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" ></path> <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" ></path> <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" ></path> <path fill="none" d="M0 0h48v48H0z"></path> </g> </svg> </div> </div> <span style="font-size: 14px" class="abcRioButtonContents" > Sign in with Google </span> </div> </div> </a> </div> </div> <div class="privacy-policy"> <a class="btn btn-link" href="https://www.trustarc.com/privacy-policy/" > Privacy Policy </a> </div> </div> </div> <div class="carousel-item"> <div class="carousel-item-body"> <form data-cy="loginForm2" id="form2" action="login" method="post" novalidate="" > <input id="form2ContinueUrl" type="hidden" name="continue" value="" /> <input id="form2Action" name="action" type="hidden" value="login" /> <input id="form2InputEmail" name="username" type="hidden" /> <div class="welcome text-center"> <span>Welcome,</span> <h2 id="welcomeHeading"></h2> </div> <div class="form-group" style="margin-bottom: 0.6rem"> <label for="form2InputPassword">Password</label> <input data-cy="loginForm2Password" id="form2InputPassword" type="password" class="form-control" name="password" placeholder="Enter Password or click the SSO button below" readonly /> </div> <div class="row"> <div class="col-6"> <div class="form-group form-check"> <input data-cy="loginForm2Rememberme" type="checkbox" class="form-check-input mt-2" value="1" id="rememberme" name="remember-me" tabindex="0" /> <label class="form-check-label" for="rememberme"> Remember Me </label> </div> </div> <div class="col-6 text-right"> <a data-cy="loginForm2ForgotPasswordLink" id="forgotPasswordLink" class="btn btn-link btn-forgot-password" tabindex="0" href="/login/forgotpassword?continue=" > Forgot Password </a> </div> </div> <div class="mb-4"> <button data-cy="loginForm2LoginBtn" id="form2Login" class="btn btn-primary w-100 mb-12px" type="submit" role="button" > Login </button> <a data-cy="loginForm2BackBtn" id="form2BackButton" class="btn btn-secondary btn-back w-100" href="#loginCarousel" role="button" data-slide="prev" > Back </a> </div> <div class="xauth-info invisible"> <p class="text"> Your email has <span data-cy="ssoLoginCount" class="number"></span> associated SSO logins </p> </div> <div data-cy="xauthList" class="list-group xauth-list invisible" ></div> </form> </div> </div> </div> </div> </div> </div> <script src="../js/jquery/jquery-3.6.3.min.js" type="text/javascript" ></script> <script src="../js/popper/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" ></script> <script src="../js/bootstrap4/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous" ></script> <script src="../js/login.js"></script> <script> $(document).ready(() => { // HTML Elements const f1EmailInput = $('#form1InputEmail') const f2EmailInput = $('#form2InputEmail') const f1PasswordInput = $('#form1InputPassword') const f2PasswordInput = $('#form2InputPassword') const loginCarousel = $('#loginCarousel') const welcomeHeading = $('#welcomeHeading') const xauthList = $('.xauth-list') const xauthInfo = $('.xauth-info') const xauthCount = $('.xauth-info .number') const toggleNext = (value) => { $('.btn-next')[value ? 'removeClass' : 'addClass']('disabled') } const displayXAuthList = (count) => { xauthInfo.removeClass('invisible') xauthList.removeClass('invisible') xauthCount.text(count) } const hideXAuthList = () => { xauthInfo.addClass('invisible') xauthList.addClass('invisible') } const createLoginUrl = (id) => { let url = '/xauthlogin?id=' + id const continueUrl = ""; if (continueUrl && continueUrl.length > 0) { url += '&continue=' + encodeURIComponent(continueUrl) } return url } const focusPassword = () => { f2PasswordInput.removeAttr('readonly') f2PasswordInput.focus() } const getSSOList = () => { const username = f1EmailInput.val() $.post( '/services/anonymous/xauths', { username, }, (result) => { xauthList.text('') const { configs, hasGoogleAuth } = result if (hasGoogleAuth) { xauthList.append($('.btn-google').clone()) displayXAuthList(1) } if (Array.isArray(configs) && configs.length > 0) { displayXAuthList(configs.length + (hasGoogleAuth ? 1 : 0)) if (result.saml2Only && configs[0]) { window.location.href = createLoginUrl(configs[0].id) } else { configs.forEach((config) => { xauthList.append( '<a href="' + createLoginUrl(config.id) + '" class="btn" role="button">' + '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">' + '<rect x="0.5" y="0.5" width="27" height="27" rx="13.5" fill="#E5FAE1"/>' + '<path d="M20.2976 7L18.8928 8.47174M18.8928 8.47174L21 10.6794L18.5416 13.2549L16.4345 11.0473M18.8928 8.47174L16.4345 11.0473M13.5476 14.0717C13.9103 14.4466 14.1986 14.893 14.3959 15.3851C14.5933 15.8772 14.6958 16.4054 14.6975 16.9391C14.6992 17.4729 14.6001 18.0018 14.4059 18.4953C14.2117 18.9888 13.9263 19.4371 13.566 19.8146C13.2057 20.192 12.7778 20.4911 12.3067 20.6945C11.8357 20.898 11.3309 21.0018 10.8214 21C10.3119 20.9982 9.80778 20.8908 9.33805 20.6841C8.86833 20.4773 8.44228 20.1753 8.08443 19.7953C7.38073 19.032 6.99134 18.0097 7.00015 16.9485C7.00895 15.8873 7.41523 14.8722 8.13149 14.1218C8.84775 13.3714 9.81668 12.9457 10.8296 12.9365C11.8425 12.9273 12.8183 13.3352 13.5469 14.0725L13.5476 14.0717ZM13.5476 14.0717L16.4345 11.0473" stroke="#1F6412" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>' + '<rect x="0.5" y="0.5" width="27" height="27" rx="13.5" stroke="#7CE467"/>' + '</svg>' + '<div class="display-name">' + (config.displayName || '<span style="color: #727272;">No name</span>') + '</div>' + '<svg class="right-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">' + '<path d="M5.93306 10.5581C5.68898 10.8021 5.68898 11.1979 5.93306 11.4419C6.17714 11.686 6.57286 11.686 6.81694 11.4419L11.8169 6.44194C12.061 6.19786 12.061 5.80214 11.8169 5.55806L6.81694 0.558058C6.57287 0.313981 6.17714 0.313981 5.93306 0.558058C5.68898 0.802135 5.68898 1.19786 5.93306 1.44194L9.86123 5.37012L0.625 5.37011C0.279822 5.37011 0 5.64994 0 5.99511C0 6.34029 0.279822 6.62011 0.625 6.62011L9.871 6.62012L5.93306 10.5581Z" fill="#0052CC"/>' + '</svg>' + '</a>' ) }) } } else if (!hasGoogleAuth) { hideXAuthList() } focusPassword() } ).fail(() => { focusPassword() }) } toggleNext(f1EmailInput.val()) f1EmailInput.change(function() { toggleNext($(this).val()) }) // No username loginCarousel.on('slide.bs.carousel', () => { const email = f1EmailInput.val() if (email) { welcomeHeading.text(email) f2EmailInput.val(email) f2PasswordInput.val(f1PasswordInput.val()) } else { welcomeHeading.text('') f2EmailInput.val('') f2PasswordInput.val('') } toggleNext(f1EmailInput.val()) getSSOList() }) f1EmailInput.on('keydown', function(event) { const email = $(this).val() if (email && event.keyCode === 13) { loginCarousel.carousel('next') } else { toggleNext(email) } }) }) </script> </body> </html>