Odyssey
suCuUser.prg
1 <?php
2 
3 require('suCommon.do.i');
4 
5  $title = "Member Support";
6  printMonitorPageTop($title, $homecuKendoVersion, $cloudfrontDomainName, $bootstrapVersion, $fontawesomeVersion, true);
7 
8  printMonitorPageMiddle($title, array("REDIRECT" => array("list" => array("Credit Union List" => array("url" => $produrl . "/monitor/mindex.html")))));
9 
10 ?>
11  <div class="col-xs-12 col-md-8 col-md-offset-2 col-lg-6 " id='login-entry'>
12  <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;'";} ?>>
13  <?php if ($err_string != "") { ?>
14  <p>The following error(s) occurred.</p>
15  <ul>
16  <li><?php echo $err_string; ?></li>
17  </ul>
18  <?php } ?>
19  </div>
20  <form id='frmLogin' method="post" action="<?php echo $menu_link; ?>/suCuUser.prg?<?php echo $_SERVER['QUERY_STRING']; ?>" role="form">
21  <input type='hidden' name="cu" value="<?php echo $formValues['values']['cucode']; ?>" />
22  <input type='hidden' name='formSubmit' value='1'/>
23  <div class="well well-sm">
24  <div class="form-horizontal form-widgets">
25  <div class="form-group">
26  <div class="col-xs-12">
27  <h4 class="h4 hcuSpacerx">Please Log In</h4>
28  </div>
29  </div>
30  <div class="form-group hcuSpacer">
31  <label class="col-xs-12" for="cucode">Credit Union</label>
32  <div class="col-xs-12 col-sm-8 col-md-8">
33  <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"/>
34  </div>
35  <div class="col-xs-1 col-sm-1">
36  <span class="k-invalid-msg" data-for="cucode" title=''></span>
37  </div>
38  </div>
39  <div class="form-group hcuSpacer">
40  <label class="col-xs-12" for="adminuser">Login id</label>
41  <div class="col-xs-12 col-sm-8 col-md-8">
42  <span id="search-span" class="k-textbox k-autocomplete k-space-right" style="width:100%;">
43  <input id="adminuser" placeholder="Enter your login id" name="adminuser" type="text" value="<?php echo strtolower($formValues['values']['adminuser']); ?>" class=" hcu-all-100" required validationMessage="Please enter your login id" autocomplete="off" data-template="usertemplate" style="border:0px fff" />
44  <a href="#" id="search-btn" ><i class='fa fa-search fa-lg'></i></a>
45  </span>
46  </div>
47  <div class="col-xs-1 col-sm-1">
48  <span class="k-invalid-msg" data-for="adminuser" title=''></span>
49  </div>
50  </div>
51 
52  <div class="form-group hcuSpacer">
53  <label class="col-xs-12" for="password">Password</label>
54  <div class="col-xs-12 col-sm-8 col-md-8">
55  <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">
56  </div>
57  <div class="col-xs-1 col-sm-1">
58  <span class="k-invalid-msg" data-for="password" title=''></span>
59  </div>
60  </div>
61 
62  <div class="form-group hcuSpacer">
63  <label class="col-xs-12" for="language">Language</label>
64  <div class="col-xs-12 col-sm-8 col-md-8">
65  <ul class="fieldlist">
66  <li>
67  <input type="radio" name="language" id="language.en_US" class="k-radio col-xs-12" value="en_US">
68  <label class="k-radio-label" for="language.en_US">English</label>
69  </li>
70  <li>
71  <input type="radio" name="language" id="language.es_US" class="k-radio col-xs-12" value="es_US">
72  <label class="k-radio-label" for="language.es_US">Spanish</label>
73  </li>
74  <li>
75  <input type="radio" name="language" id="language.pl_US" class="k-radio col-xs-12" value="pl_US">
76  <label class="k-radio-label" for="language.pl_US">Polish</label>
77  </li>
78  </ul>
79  </div>
80  <div class="col-xs-1 col-sm-1">
81  <span class="k-invalid-msg" data-for="test-switch-on" title=''></span>
82  </div>
83  </div>
84 
85  <div class="form-group hcuSpacer">
86  <label class="col-xs-12" for="test-switch">Test Menu</label>
87  <div class="col-xs-12 col-sm-8 col-md-8">
88  <ul class="fieldlist">
89  <li>
90  <input type="radio" name="testmenu" id="testmenu-off" class="k-radio col-xs-12" value="0">
91  <label class="k-radio-label" for="testmenu-off">Off</label>
92  </li>
93  <li>
94  <input type="radio" name="testmenu" id="testmenu-on" class="k-radio col-xs-12" value="1">
95  <label class="k-radio-label" for="testmenu-on">On</label>
96  </li>
97  </ul>
98  </div>
99  <div class="col-xs-1 col-sm-1">
100  <span class="k-invalid-msg" data-for="test-switch-on" title=''></span>
101  </div>
102  </div>
103 
104  <div class="form-group hcuSpacer">
105  <div class="col-xs-12 col-sm-4 col-md-5 col-lg-5">
106  <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>
107  </div>
108  </div>
109  </div>
110  </div>
111  </form>
112  </div>
113 
114 <?php
115 
116  $testmenuElem = '&testmenu=1';
117 ?>
118  <script id="usertemplate" type="text/x-kendo-template">
119  <div class="search_results">
120  <span class="user">#= user_name #</span>
121  <span class="email">#= email #</span>
122  <span class="account">#= accountnumber #</span>
123  </div>
124  </script>
125  <script id="noDataTemplate" type="text/x-kendo-template">
126  <strong>No Search Results!</strong>
127  </script>
128  <script>
129  $(document).ready(function () {
130  $( "#adminuser" ).on({keypress: function( event ) {stale_search.KeyCheck(event);}});
131 
132  $( "#search-btn" ).bind( "click", function() {
133  // $("#adminuser").kendoAutoComplete()
134  search.read();
135  adminuser.refresh();
136  adminuser.search($("#adminuser").val());
137 
138  setTimeout(function(){
139  $(".k-icon.k-loading").css("display", "none");
140  }, 3000);
141  });
142 
143  var cucode_data = <?php print HCU_JsonEncode(GetCUCodes()); ?>;
144  //create AutoComplete UI component
145  var valid_cucode;
146  $("#cucode").kendoAutoComplete({
147  open: function(e) {
148  valid_cucode = false;
149  },
150  change: function(e){
151  // if no valid selection - clear input
152  valid_cucode = false;
153  for(var i = 0, numOfElements = cucode_data.length; i < numOfElements; i++){
154  $("#cucode").val($("#cucode").val().toUpperCase());
155  if(cucode_data[i] == $("#cucode").val()){
156  valid_cucode = true;
157  i=numOfElements;
158  adminuser.enable(true);
159  setTimeout(function() {
160  $("#adinuser").focus();
161  })
162  }
163  }
164  },
165  select: function(){
166  setTimeout(function() {
167  adminuser.enable(true);
168  $("#adminuser").focus();
169  });
170  },
171  dataSource: cucode_data,
172  filter: "contains",
173  placeholder: "Select credit union...",
174  separator: ""
175  });
176 
177  var search = new kendo.data.DataSource({
178  transport: {
179  read: {
180  url: "<?php echo $produrl; ?>/hcuadm/suCuUser.data?operation=searchUser",
181  type: "get",
182  dataType: "json",
183  data: function() {
184  if ($("#cucode").val() !== '') {
185  return {
186  cucode: $("#cucode").val(),
187  search: $("#adminuser").val()
188  }
189  };
190  },
191  }
192  },
193  schema: {
194  model: {
195  fields: {
196  email: { type: "string" },
197  accountnumber: { type: "string" },
198  user_name: { type: "string" },
199  search: { type: "string" }
200  }
201  }
202  },
203  changex: function() { // subscribe to the CHANGE event of the data source
204  $("#adminuser").html(kendo.render(template, this.view())); // populate the table
205  },
206  });
207 
208  //create AutoComplete UI component
209  $("#adminuser").kendoAutoComplete({
210  minLength: 1,
211  dataTextField: "search", // JSON property name to use
212  minLength: 3,
213  template: kendo.template($("#usertemplate").html()),
214  noDataTemplate: $("#noDataTemplate").html(),
215  dataSource: search,
216  filter: "contains",
217  placeholder: "Search member username, email or account...",
218  headerTemplate: '<div><h3>Search Results</h3></div>',
219  separator: "",
220  change: function(){
221  search.read();
222  },
223  enable: false,
224  select: function(){
225  setTimeout(function() {
226  $("#password").focus();
227  });
228  }
229  });
230 
231  var adminuser = $("#adminuser").data("kendoAutoComplete");
232  // some globals for handling some timer events
233  var search_is_stale = true;
234  var refreshed = false;
235  var srchRefresh = '';
236  var stale_search = {
237  KeyCheck: function(event) {
238  clearTimeout(srchRefresh);
239 
240  if (search_is_stale) {
241  srchRefresh = setTimeout(function () {
242  search.read();
243  adminuser.refresh();
244  adminuser.search($("#adminuser").val());
245  }, 250);
246  search_is_stale = false;
247  }
248 
249  if ($("#adminuser").val().length > 3) {
250  search_is_stale = false;
251  }
252  var char = event.which || event.keyCode;
253  switch(char) {
254 
255  case 8: // back space
256  case 46: // delete key
257  if ($("#adminuser").val().length < 3 && (!search_is_stale)) {
258  search_is_stale = true; // trigger data reload if input went over 3 characters, then fell below again
259  }
260  break;
261  default: // refresh the search everytime time user input stops half a second
262  break;
263  }
264  },
265  refresh: function() {
266  }
267  }
268 
269  // form guide, validate fields and clear / focus input as appropriate
270  var verify_cucode = function() {
271  if ($("#cucode").val() !== '') {
272  // cucode field has data, validate it.
273  valid_cucode = false;
274  for(var i = 0, numOfElements = cucode_data.length; i < numOfElements; i++) {
275  $("#cucode").val($("#cucode").val().toUpperCase());
276  if(cucode_data[i] == $("#cucode").val()){
277  valid_cucode = true;
278  i=numOfElements;
279  $("#adinuser").focus();
280  }
281  }
282  if (valid_cucode) {
283  // cu valid, move on to user
284  $("adminuser").prop('disabled', false);
285  // check admin user field, move to password if data present
286  if ($("cucode").val() !='' && $("#adminuser").val() !== '') {
287  $("#password").focus();
288  } else {
289  adminuser.enable(true);
290  $("#adminuser").focus();
291  }
292  } else {
293  // cu not valid, disable user and password, and focus on cucode
294  $("#adminuser").prop('disabled', true);
295  $("#cucode").val("");
296  $("#cucode").focus();
297  }
298  } else {
299  $("adminuser").prop('disabled', true);
300  $("#cucode").focus();
301  }
302  }
303 
304  // check if user already has a value and enable if it does
305  if ($("#adminuser").val() !== "") {
306  adminuser.enable(true);
307  }
308 
309  $('#cucode').bind('blur', function () { verify_cucode(); });
310 
311  // run on form load to setup initial focus as well
312  verify_cucode();
313 
314  // initialize language menu radio button
315  var language = '<?php echo $language ?>';
316  switch (language) {
317  case "es_US":
318  $("#language\\.es_US").attr('checked', true);
319  break;
320  case "pl_US":
321  $("#language\\.pl_US").attr('checked', true);
322  break;
323  default: // en_US
324  $("#language\\.en_US").attr('checked', true);
325  break;
326  }
327 
328  if (language == 1) {
329  $("#testmenu-on").attr('checked', true);
330  } else {
331  $("#testmenu-off").attr('checked', true);
332  }
333 
334  // initialize test menu radio button
335  var testmenu = <?php echo $testmenu ?>;
336  if (testmenu == 1) {
337  $("#testmenu-on").attr('checked', true);
338  } else {
339  $("#testmenu-off").attr('checked', true);
340  }
341 
342  $.homecuValidator.setup({formValidate:'frmLogin', formStatusField: 'formLoginStatus', validateOnClick: 'btnLogin'});
343 
344  $.homecuValidator.settings.formErrorTitle = 'The following error(s) occurred.';
345  $.homecuValidator.displayMessage([""], $.homecuValidator.settings.statusError);
346  $.homecuValidator.settings.formErrorTitle = 'The following error(s) occurred.';
347 
348  var err_string = '<?php echo $err_string; ?>';
349  if (err_string != "") {
350  $("#formLoginStatus").css("display", "block");
351  $("#formLoginStatus").html("<p>The following error(s) occurred.</p><ul>"+
352  "<li id=\"first_error\">"+err_string+"</li></ul>");
353  }
354 
355  $('#btnLogin').on('click', function () {
356  if ($.homecuValidator.homecuValidate) {
357  ShowWaitWindow();
358  }
359  });
360 
361  $('#adminuser').on('blur', function () {
362  $('#adminuser').val($('#adminuser').val().split("|")[0]);
363  });
364 
365  $('#frmLogin').keypress(function(e) {
366  if (e.which === 13) {
367  $('#btnLogin').trigger('click');
368  return false;
369  }
370  });
371  });
372  </script>
373 
374  <style>
375  html {
376  background: url("/monitor/images/login_background.jpg") no-repeat fixed;
377  }
378 
379  @media screen and (min-width: 1920) { /* Specific to this particular image */
380  background: url("/monitor/images/login_background.jpg") no-repeat center center fixed;
381  -webkit-background-size: cover;
382  -moz-background-size: cover;
383  -o-background-size: cover;
384  background-size: cover;
385  }
386  .k-icon.k-i-close {
387  padding:0;
388  margin:0;
389  }
390  form#frmLogin {
391  opacity: .98;
392  filter: alpha(opacity=98);
393  }
394  div#formLoginStatus {
395  margin-bottom: 1em;
396  }
397  div#login-entry {
398  margin-top:3.6em;
399  }
400 
401  .search_results {
402  width: 100%;
403  }
404  .search_results span {
405  border-left:1px solid #dadada;
406  padding-left: 0.6em;
407  display:inline-block;
408  }
409  .search_results span.user {
410  width:25%;
411  }
412  .search_results span.email {
413  width:45%;
414  }
415  .search_results span.account {
416  width:20%;
417  }
418 
419  div#adminuser-list div h3 {
420  font-size: 100%;
421  }
422 
423  span#search-span span,
424  border: none;
425  }
426 
427  #search-span:first-child span {
428  background: red;
429  border: none;
430  }
431 
432  #search-span > .k-autocomplete.k-header {
433  border: none;
434  }
435 
436  input#adminuser {
437  padding-right: -26px;
438  margin: none;
439  border: 0px solid;
440  margin:0;
441  }
442 
443  #btnSearchUser {
444  position: absolute;
445  z-index: 2;
446  width: 22px;
447  height: 24px;
448  margin-left: -26px;
449  margin-top: 2px;
450  padding: 0 0.4em;
451  vertical-align:top;
452  color: #219ce7;
453  background-color: #fff;
454  border: none;
455  }
456 
457  .fieldlist {
458  margin: 0 0 -1em;
459  padding: 0;
460  width:100%;
461  }
462 
463  .fieldlist li {
464  list-style: none;
465  display:inline;
466  padding-bottom: 1em;
467  }
468 
469  .fieldlist li label {
470  padding-left: 1.5em;
471  padding-right: 0.6em;
472  padding-top:0.15em;
473  }
474  </style>
475  <script>
476  $(document).ready(function() {
477 
478  $('[name="ob_platform"]').click(function() {
479  BuildLoginUrl();
480  });
481  BuildLoginUrl();
482 
483  });
484  function BuildLoginUrl() {
485 
486  var $selElem = $('[name="ob_platform"]:checked');
487 
488  if ($selElem.attr('data-has-test') === '1') {
489  $('#ob_platform_testmenu').show();
490  } else {
491  $('#ob_platform_testmenu').hide();
492  $('#use_sandbox').removeAttr('checked');
493  }
494 
495  };
496  </script>
497 
498 <?php
499  printMonitorPageBottom();
500  exit;
501 ?>