suAdminUser.prg

<?php
  require('suCommon.do.i');

  $putcursor = (trim($username)=='' ? 'login.adminuser' : 'login.password');

  $title= "Admin Support";
  printMonitorPageTop($title, $homecuKendoVersion, $cloudfrontDomainName, $bootstrapVersion, $fontawesomeVersion, true);

  printMonitorPageMiddle($title, array("REDIRECT" => array("list" => array("Credit Union List" => array("url" => $produrl."/monitor/mindex.html")))));

?>
  <div class="col-xs-12 col-md-8 col-md-offset-2 col-lg-6 " id='login-entry'>
    <form id='frmLogin' method="post" action="<?php echo $menu_link; ?>/suAdminUser.prg?<?php echo $_SERVER['QUERY_STRING']; ?>" role="form">
      <input type='hidden' name="cu" value="<?php echo $formValues['values']['cucode']; ?>" />
      <input type='hidden' name='formSubmit' value='1'/>
    <div id="formLoginStatus" class="homecu-formStatus k-block k-error-colored" <?php if ($err_string == "") {echo "style='display:none;'";} else {echo "style='margin-bottom:1em;'";} ?>>
        <?php if ($err_string != "") { ?>
        <p>The following error(s) occurred.</p>
        <ul>
          <li id="first_error"><?php echo $err_string; ?></li>
        </ul>
            <?php } ?>
    </div>
      <div  class="well well-sm">
        <div class="form-horizontal form-widgets">
          <div class="form-group">
            <div class="col-xs-12">
              <h4 class="h4 hcuSpacerx">Please Log In</h4>
            </div>
          </div>
          <div class="form-group hcuSpacer">
            <label class="col-xs-12" for="adminuser">Credit Union</label>
            <div class="col-xs-12 col-sm-8 col-md-8">
              <input id="cucode" placeholder="Select relevent credit union" name="cucode" type="text" value="<?php echo strtoupper($formValues['values']['cucode']); ?>" class="k-textbox k-autocomplete hcu-all-100" required validationMessage="Please select relevent credit union"  autocomplete="off"/>
            </div>
            <div class="col-xs-1 col-sm-1">
              <span class="k-invalid-msg" data-for="cucode" title=''></span>
            </div>
          </div>
          <div class="form-group hcuSpacer">
            <label class="col-xs-12" for="adminuser">Login id</label>
            <div class="col-xs-12 col-sm-8 col-md-8">
              <input id="adminuser" placeholder="Enter your login id" name="adminuser" type="text" value="<?php echo strtolower($formValues['values']['adminuser']); ?>" class="k-textbox k-autocomplete hcu-all-100" required validationMessage="Please enter your login id"  autocomplete="off"/>
            </div>
            <div class="col-xs-1 col-sm-1">
              <span class="k-invalid-msg" data-for="adminuser" title=''></span>
            </div>
          </div>
          <div class="form-group hcuSpacer">
            <label class="col-xs-12" for="password">Password</label>
            <div class="col-xs-12 col-sm-8 col-md-8">
              <input type="password" placeholder="Enter your login password" id="password" name="password" maxlength="15" class="k-textbox hcu-all-100" required validationMessage="Please enter your login password"  autocomplete="off">
            </div>
            <div class="col-xs-1 col-sm-1">
              <span class="k-invalid-msg" data-for="password" title=''></span>
            </div>
          </div>
          <div class="form-group hcuSpacer">
            <div class="col-xs-12 col-sm-4 col-md-5 col-lg-5">
              <button id="btnLogin" name='btnLogin' type="submit" class="k-button k-primary hcu-all-100 hcu-xs-btn-margin-top hcu-xs-btn-pad" value='Log In'><i class='fa fa-lock fa-lg'></i>Log In</button>
            </div>
            <div class="col-xs-12 col-sm-5 col-md-6 col-lg-6">
              <?php echo $show_forgot_pwd_link; ?>
            </div>
          </div>
          <div class="form-group">
            <?php echo $show_enrollment_link; ?>
          </div>
        </div>
      </div>
    </form>
  </div>
<script>
      $(document).ready(function () {
          var cucode_data = <?php print json_encode(GetCUCodes()); ?>;

          //create AutoComplete UI component
          $("#cucode").kendoAutoComplete({
              dataSource: cucode_data,
              filter: "contains",
              placeholder: "Select credit union...",
              separator: "",
              select: function(){
                  setTimeout(function() {
                      $("#adminuser").prop('disabled', false);
                      $("#adminuser").focus();
                  });
              }
          });

          $('#adminuser').keypress(function(event){
            if(event.keyCode == 13){
              $("#password").focus();
            }
          });

           // form guide, validate fields and clear / focus input as appropriate
            var verify_cucode = function() {
                if ($("#cucode").val() !== '') {
                    // cucode field has data, validate it.
                        valid_cucode = false;
                        for(var i = 0, numOfElements = cucode_data.length; i < numOfElements; i++){
                            $("#cucode").val($("#cucode").val().toUpperCase());
                            if(cucode_data[i] == $("#cucode").val()){
                                valid_cucode = true;
                                i=numOfElements;
                                $("#adminuser").prop("disabled", false);
                                $("#adinuser").focus();
                            }
                        }
                        if (valid_cucode) {
                            // cu valid, move on to user
                            $("adminuser").prop('disabled', false);
                            // check admin user field, move to password if data present
                            if ($("cucode").val() !='' && $("#adminuser").val() !== '') {
                                $("#password").focus();
                            } else {
                                $("#adminuser").focus();
                            }
                        } else {
                            // cu not valid, disable user and password, and focus on cucode
                            $("#cucode").val("");
                            $("#adminuser").prop("disabled", true);
                            $("#cucode").focus();
                        }
                } else {
                    $("adminuser").prop("disabled", true);
                    $("#cucode").focus();
                }
            }

            // check if user already has a value and enable if it does
            if ($("#adminuser").val() !== "") {
                $("#adminuser").prop('disabled', false);
            }

            $('#cucode').bind('blur', function () { verify_cucode(); });

            // run on form load to setup initial focus as well
            verify_cucode();

          // if ($("#cucode").val() !== '') {
          //     if ($("cucode").val() !='' && $("#adminuser").val() !== '') {
          //         $("#password").focus();
          //     } else {
          //         $("#adminuser").focus();
          //     }
          // } else {
          //     $("#cucode").focus();

          // }

        $.homecuValidator.setup({formValidate:'frmLogin', formStatusField: 'formLoginStatus', validateOnClick: 'btnLogin'});

        $.homecuValidator.settings.formErrorTitle = 'The following error(s) occurred.';
        $.homecuValidator.displayMessage([""], $.homecuValidator.settings.statusError);
        $.homecuValidator.settings.formErrorTitle = 'The following error(s) occurred.';

        var err_string = '<?php echo $err_string; ?>';
        if (err_string != "") {
            $("#formLoginStatus").css("display", "block");
            $("#formLoginStatus").html("<p>The following error(s) occurred.</p><ul>"+
                                        "<li id=\"first_error\">"+err_string+"</li></ul>");
        }

      });
  </script>
  <style>

    html {
        background: url("/monitor/images/login_background.jpg") no-repeat fixed;
    }

    @media screen and (min-width: 1920) { /* Specific to this particular image */
        background: url("/monitor/images/login_background.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .k-icon.k-i-close {
      padding:0;
      margin:0;
    }
    div#formLoginStatus {
      margin-bottom: 1em;
    }

    form#frmLogin {
        opacity: .98;
        filter: alpha(opacity=98);
    }

    div#login-entry {
      margin-top:3.6em;
    }

</style>

<?php
    printMonitorPageBottom();
    exit;
?>