<!doctype html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="includes/favicon.ico" type="image/ico" />
    <meta charset="utf-8">

    <title>SCS | Login</title>
    <meta name="description" content="Securus Contact Systems Customer Portal">
    <meta name="author" content="Securus Contact Systems">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="/includes/css/login.css?v=3" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
    </script>
    <script src="/includes/js/functions.js?v=2" type="text/javascript"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <div id="login_page_container">
        <div id="login_top_body">
            <div id="login_logo"></div>
            <div id="sally_logo"></div>
            <div id="wave_border">
                <div class="wave_icon_area">
                    <div id="call_record_icon"></div>
                    <div class="wave_icon_heading">Real-time Call Records And Messages</div>
                    <div class="wave_icon_txt">Access call detail records<br />View messages linked to calls<br />View messages sent</div>
                </div>
                <div class="wave_icon_area" style="left:38.25%;">
                    <div id="customer_service_icon"></div>
                    <div class="wave_icon_heading">Customer Assistance</div>
                    <div class="wave_icon_txt">Assistance Forwarding Calls<br />Update Call Handling Script<br />Questions About Account</div>
                </div>
                <div class="wave_icon_area" style="left:61.5%;">
                    <div id="billing_icon"></div>
                    <div class="wave_icon_heading">Billing And Payment History</div>
                    <div class="wave_icon_txt">View Your Service Plan<br />Invoice & Payment History<br />Update Payment Method</div>
                </div>
                <div class="wave_icon_area" style="left:84.75%;">
                    <div id="rewards_icon"></div>
                    <div class="wave_icon_heading">Referral And Rewards Program</div>
                    <div class="wave_icon_txt">Customer Referral Reward<br />Professional Reference Reward<br />Testimonial Submission Reward</div>
                </div>
            </div>
            <div id="login_box_area">
                <div id="login_links_area">
                    <!--div class="login_link_txt">Reset Password</div>
                    <div class="login_link_txt" style="margin-left:7%;">Demo</div-->
                </div>
                <div id="login_box">
                    <div id="login_box_split"></div>
                    <div id="lock_icon"></div>
                    <div id="login_section" style="display:block;">
                        <div class="login_field_area"><input type="text" class="login_field" id="login_name" placeholder="Account Number" /></div>
                        <div class="login_field_area"><input type="password" class="login_field" id="login_pass" placeholder="Password" /></div>
                        <div id="login_check_area"><input type="checkbox" id="AlwaysLoggedIn"  /><div id="check_box_txt">Keep me logged in</div></div>
                    </div>
                     <div id="account_section" style="display:none;">
                        <div class="login_field_area" style="margin-top:80px;"><input type="text" class="login_field" id="reset_account" placeholder="Account Number" /></div>
                        <div id="passcode_txt">Enter your Account Number</div>
                    </div>
                    <div id="reset_section" style="display:none;">
                        <div class="login_field_area" style="margin-top:80px;"><input type="text" class="login_field" id="Passcode" placeholder="Enter Passcode" /></div>
                        <div id="passcode_txt">A Pass code has been sent to your mailbox</div>
                    </div>
                    <div id="passcode_section" style="display:none;">
                        <div class="login_field_area" style="margin-top:60px;"><input type="password" class="login_field" id="first_password" placeholder="New Password" /></div>
                        <div class="login_field_area"><input type="password" class="login_field" id="second_password" placeholder="Enter Password Again" /></div>
                    </div>
                    <div class="g-recaptcha" data-sitekey="6LdHhwEpAAAAADRMJyTgtQLHFPdYO53ArDW8US2l" id="recapcha_box"></div>
                    <div id="login_buttons" style="display:block;">
                        <div class="login_btn" onclick="processLogin(grecaptcha.getResponse());"><div class="login_btn_txt">Login</div></div>
                        <div class="reset_link_txt" onclick="resetLogin();">Reset Password</div>
                    </div>
                    <div id="account_buttons" style="display:none;">
                        <div class="login_btn" onclick="sendPasscode(grecaptcha.getResponse());"><div class="login_btn_txt">Submit</div></div>
                        <div class="reset_link_txt" onclick="openLogin();">I want to Login</div>
                    </div>
                    <div id="reset_buttons" style="display:none;">
                        <div class="login_btn" onclick="sendReset();"><div class="login_btn_txt">Submit</div></div>
                        <div class="reset_link_txt" onclick="getLogin();">I want to Login</div>
                    </div>
                    <div id="passcode_buttons" style="display:none;">
                        <div class="login_btn" onclick="resetPassword();"><div class="login_btn_txt">Reset</div></div>
                        <div class="reset_link_txt" onclick="doLogin();">I want to Login</div>
                    </div>
                    <div id="error_msg"></div>
                </div>
            </div>
        </div>
        <div id="wave_box"></div>
        <div style="position:relative; float:left; background:#ccd9e6; width:100%; height:2px; border-bottom:1px solid #003f84;"></div>
        <div id="login_footer">
            <div id="login_footer_bg"></div>
            <div id="footer_phone"></div>
            <div id="footer_body">
                <div id="footer_body_top">
                    <div class="footer_split" style="width:38%; margin-left:12%;">
                        <div class="footer_txt" style="font-weight:bold; font-size:30px; height:32px;">Need Assistance?</div>
                        <div class="footer_txt" style="font-size:14px; height:16px; color:#2183d6; margin-top:10px;">Contact Our Customer Happiness Team</div>
                        <div class="footer_txt" style="font-size:40px; font-weight:bold; height:42px; color:#003f84; margin-top:1px; margin-left:20px;">877.310.6676</div>
                        <div class="footer_txt" style="font-size:20px; height:22px; color:#000; margin-top:1px; margin-left:215px;">Ext 1</div>
                    </div>
                    <div class="footer_split">
                        <a href="https://www.bbb.org/oregon/business-reviews/answering-service/securus-contact-systems-llc-in-happy-valley-or-1000033711"
                        target="_blank" title="BBB Listing"><div id="BBB_logo"></div></a>
                        <div id="PBJ_logo"></div>
                    </div>
                </div>
                <div id="footer_body_bottom">
                    <div id="footer_sm_area">
                        <div class="footer_txt" style="font-size:14px; height:16px; color:#003f84; text-align:center;">Visit Us On</div></a>
                        <div id="sm_links">
                            <a href="https://www.facebook.com/Securus-Contact-Systems-576403485723177/" target="_blank" title="SCS on Facebook"><div id="facebook_icon"></div></a>
                            <a href="https://twitter.com/ContactSystems" target="_blank" title="SCS on Twitter"><div id="twitter_icon"></div></a>
                            <a href="https://www.linkedin.com/company/securus-contact-systems" target="_blank" title="SCS on LinkedIn"><div id="linkedin_icon"></div></a>
                            <a href="https://www.trustpilot.com/review/www.securuscontactsystems.com" target="_blank" title="SCS on Trustpilot"><div id="trustpilot_icon"></div></a>
                        </div>
                    </div>
                    <a href="#">
                    <div class="footer_txt" style="font-size:16px; height:18px; color:#69b0ff; text-align:center;">Privacy Policy</div></a>
                    <div class="footer_txt" style="font-size:18px; height:20px; color:#303030; text-align:center; margin-top:5px; font-weight:400;">
                        &#0169;&nbsp;Copyright 2024 Securus Contact Systems
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    // user wants to get out of reset password and login from enter passcode
    function doLogin() {
        $("#login_box_split").fadeOut(200);
        setTimeout(function() {$("#passcode_section").fadeOut(200); $("#passcode_buttons").fadeOut(200);}, 200);
        setTimeout(function() {$("#login_section").fadeIn(200); $("#login_buttons").fadeIn(200);}, 400);
        setTimeout(function() {$("#login_box_split").fadeIn(200);}, 600);
        $("#error_msg").html("");
    }

    // user wants to get out of reset password and login from enter account number
    function getLogin() {
        $("#login_box_split").fadeOut(200);
        setTimeout(function() {$("#reset_section").fadeOut(200); $("#reset_buttons").fadeOut(200);}, 200);
        setTimeout(function() {$("#login_section").fadeIn(200); $("#login_buttons").fadeIn(200);}, 400);
        setTimeout(function() {$("#login_box_split").fadeIn(200);}, 600);
        $("#error_msg").html("");
    }

    // user forgot password. Transition to user email entry.
    function resetLogin() {
        $("#login_box_split").fadeOut(200);
        setTimeout(function() {$("#login_section").fadeOut(200); $("#login_buttons").fadeOut(200);}, 200);
        setTimeout(function() {$("#account_section").fadeIn(200); $("#account_buttons").fadeIn(200);}, 400);
        setTimeout(function() {$("#login_box_split").fadeIn(200);}, 600);
        $("#error_msg").html("");
    }

    // user wants to get out of reset password and login
    function openLogin() {
        $("#login_box_split").fadeOut(200);
        setTimeout(function() {$("#account_section").fadeOut(200); $("#account_buttons").fadeOut(200);}, 200);
        setTimeout(function() {$("#login_section").fadeIn(200); $("#login_buttons").fadeIn(200);}, 400);
        setTimeout(function() {$("#login_box_split").fadeIn(200);}, 600);
        $("#error_msg").html("");
    }

    // user password reset
    function resetPassword() {
        var first = $("#first_password").val();
        var second = $("#second_password").val();
        var account = $("#reset_account").val();
        if(first !== second) {
            $("#error_msg").html("Passwords do not match");
        } else if(account !== "") {
            var posting = $.post("/includes/php/update_password.php", {Password: first, AccountID: account});
            posting.done(function() {
                $("#login_box_split").fadeOut(200);
                 setTimeout(function() {$("#passcode_section").fadeOut(200); $("#passcode_buttons").fadeOut(200);}, 200);
                 setTimeout(function() {$("#login_section").fadeIn(200); $("#login_buttons").fadeIn(200);}, 400);
                 setTimeout(function() {$("#login_box_split").fadeIn(200);}, 600);
                 $("#error_msg").html("");
            });
        }
    }

    // send passcode to user's email
    function sendPasscode(recaptcha) {
        var account = $("#reset_account").val();
        if(account === "") {
            $("#error_msg").html("Please enter your account number");
        } else {
            var posting = $.post("/includes/php/send_passcode.php", {AccountID: account, Recaptcha: recaptcha});
            posting.done(function(dat) {
                if(dat !== "") {
                   $("#error_msg").html(dat);
                } else {
                    $("#login_box_split").fadeOut(200);
                    setTimeout(function() {$("#account_section").fadeOut(200); $("#account_buttons").fadeOut(200);}, 200);
                    setTimeout(function() {$("#reset_section").fadeIn(200); $("#reset_buttons").fadeIn(200);}, 400);
                    setTimeout(function() {$("#login_box_split").fadeIn(200);}, 600);
                    $("#error_msg").html("");
                }
            });
        }
    }

    // user passcode entry
    function sendReset() {
        var passcode = $("#Passcode").val();
        var account = $("#reset_account").val();
        if(passcode === "") {
            $("#error_msg").html("Please enter passcode from email");
        } else {
            var posting = $.post("/includes/php/validate_passcode.php", {Passcode: passcode, AccountID: account});
            posting.done(function(dat) {
               if(dat !== "") {
                   $("#error_msg").html(dat);
                } else {
                   $("#login_box_split").fadeOut(200);
                    setTimeout(function() {$("#reset_section").fadeOut(200); $("#reset_buttons").fadeOut(200);}, 200);
                    setTimeout(function() {$("#passcode_section").fadeIn(200); $("#passcode_buttons").fadeIn(200);}, 400);
                    setTimeout(function() {$("#login_box_split").fadeIn(200);}, 600);
                    $("#error_msg").html("");
                }
            });
        }
    }
</script>
