- Scan ID:
- 37e769df-5b8a-4500-bdf7-56262db2ffbeFinished
- Submitted URL:
- https://www.dcalonline.com/UI/login/views/login.html#/Login/215180/840/hbc0000002/0/
- Report Finished:
Links · 0 found
The outgoing links identified from the page
JavaScript Variables · 59 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| getCSRFToken | function |
| cleanURL | function |
| contextualHelpPath | string |
| helpPages | object |
| faqPages | object |
Console log messages · 3 found
Messages logged to the web console
| Type | Category | Log |
|---|---|---|
| log | other |
|
| error | network |
|
| verbose | dom |
|
HTML
The raw HTML body of the page
<!DOCTYPE html><html lang="en" ng-app="FD-Login" ng-controller="HeaderController" style="display: block; visibility: visible;" class="ng-scope"><head><style>@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- ngIf: isWSF -->
<!-- ngIf: !isWSF --><title ng-if="!isWSF" class="ng-binding ng-scope">Commercial Card Services - Login Page </title><!-- end ngIf: !isWSF -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="telephone=no" name="format-detection">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/UI/styles/reset.css">
<link rel="stylesheet" type="text/css" href="/UI/styles/normalize.css">
<link rel="stylesheet" type="text/css" href="/UI/styles/layout.css">
<link rel="stylesheet" type="text/css" href="/UI/styles/footerlinks.css">
<!--<link ng-href="/dcal/BrandingServlet?action=GetCss&branding={{user.custom}}" rel="STYLESHEET" type="text/css"/> -->
<link rel="stylesheet" type="text/css" href="/UI/styles/responsive.css">
<link rel="stylesheet" type="text/css" href="/UI/styles/jquery-ui.min.css">
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8_style.css" id="theme_ie8" />
<![endif]-->
<!--[if lt IE 9]>
<script src="/UI/dependencies/html5shiv/dist/html5shiv.js"></script>
<script src="/UI/dependencies/es5-shim/es5-shim.js"></script>
<script src="/UI/dependencies/json3/lib/json3.min.js"></script>
<script>
// These need to be registered to allow directives to be recognized by IE8
//html5.addElements('ng-include ng-pluralize ng-view fd-datepicker fd-dialog fd-grid fd-tree-grid fd-grid-filter-bar fd-grid-settings fd-filter-field fd-grid-filter fd-dropdown fd-dropdown-panel fd-card-switcher fd-search fd-info-box fd-language-switcher fd-spinner fd-pager fd-table-grid fd-panel-actions fd-generic-fields fd-cac-field fd-validations fd-dynamic-form fd-dynamic-form-group fd-dynamic-form-field fd-dashboard-page fd-dashboard fd-widgets fd-charts fd-split-transaction fd-dropdown-panel fd-change-username fd-text-field fd-check-group fd-checkbox-field fd-date-field fd-date-range-field fd-enum-field fd-number-field fd-radio-group fd-textarea-field fd-grid-formatter fd-bar-chart fd-column-chart fd-donut-chart fd-pie-chart fd-comments fd-email-panel fd-tax-chooser fd-cac-chooser fd-output fd-add-receipt fd-view-receipt fd-receipt fd-app-error fd-cards-menu fd-contextual-help fd-easy-view-menu fd-user-preferences');
</script>
<![endif]-->
<script type="text/javascript" src="/UI/dependencies/jquery/jquery.js"></script>
<script type="text/javascript" src="/Resources/Jscript/Common/commonCSRFFunctions.js"></script>
<style>
body.wait, body.wait input {
cursor: wait;
}
body.custom, body.custom input{
cursor: url(http://static.tumblr.com/qjv9goj/duUlzoulz/ajax-loader.gif), wait;
}
</style>
<script type="text/javascript">
// Contextual Help path for NO current User
var contextualHelpPath = "/UI/help/826/0/0/";
// Temporary system wide Help file
// var helpPages = { 'Login': 'OnlineHelp.htm'};
var helpPages = { 'Login': 'Help.htm'};
// Temporary system wide FAQ file
// var faqPages = { 'Login': 'FAQ.htm'};
var faqPages = { 'Login': '360Control_UI_FAQ_Phase_1.htm'};
var currentDisplay = "Login"; // Default value
</script>
<script src="/Resources/Jscript/Common/popup.js"></script>
<!-- the following is added to prevent a Cross Site Scripting vulnerability. Appscan issue GASCT = 198200002 -->
<style>
html{
display : none ;
visibility : hidden ;
}
</style>
<script>
if( self == top ) {
document.documentElement.style.display = 'block' ;
document.documentElement.style.visibility = 'visible' ;
}
</script>
<!-- Theme -->
<!-- <link rel="stylesheet" type="text/css" href="/UI/styles/theme_360.css"/> -->
<style type="text/css">@charset "UTF-8";
/* Master CSS Document */
/****** DEFAULT COLOURS ******/
.color_1 {color:#DB0011 !important;} /* Light Blue */
.color_2 {color:#333333 !important;} /* Dark Blue */
.color_3 {color:#FFFFFF !important;} /* Dark Blue */
.bg_color_1 {background-color:#DB0011;} /* Light Blue */
.bg_color_2 {background-color:#333333;} /* Dark Blue */
.bg_color_3 {background-color:#FFFFCC;} /* used for hover */
.bg_color_4 {background-color:#e7e7e7;} /* Lighter Grey */
.bg_color_5 {background-color:#DDDDDD;} /* Used for Module Header */
.bg_color_6 {background-color:#f0f0f0;} /* Used for the bg of a header on an edit module */
/* Hyperlink Styles */
a:link, a:visited {
color:#333333;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
/******* BUTTONS *******/
/* Primary Button - Call to Action */
.btn_primary {
background-color:#DB0011;
color:#FFFFFF;
border-color:#DB0011;
}
/* Secondary Postive Button */
.btn_secondary {
background-color:#DB0011;
color:#FFFFFF;
border-color:#DB0011;
}
/* Negative / Cancel / Back Button */
.btn_grey {
background-color:#e3e3e3;
color:#454545;
border-color:#e3e3e3;
}
/******* LOGOS *******/
/* Primary Logo */
#page_header .logo_primary > div {
background-color:transparent;
background-image: url(/dcal/BrandingServlet?action=GetImage&image=main_x2.png&bcode=hbc0000002); /* this is the retina ready version of the logo. A retina ready logo will be twice the size of what the logo should normally be. e.g. A normal image might be 30px by 120px, whereas a retina image would be 60px by 240px and then resized to be the correct height and width using CSS */
background-image: url(/dcal/BrandingServlet?action=GetImage&image=main.png&bcode=hbc0000002)\9; /* This is the non-retina version of the logo - don't forget to put the "\9" at the end of the tag so that IE8 can view it */
background-position:0px 0px; /* This is the position of the placement of the logo. "0px" "0px" is the same as saying "top" "left" */
background-repeat:no-repeat; /* Don't repeat the background image */
width:120px; /* Specifiy the width of the image */
height: 30px; /* Specify the height of the image */
background-size:120px 30px; /* Here you set what the width and the height of the 'normal' image size should be. */
margin-top:0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src="/dcal/BrandingServlet?action=GetImage&image=main_x2.png&bcode=hbc0000002", sizingMethod="scale");
}
/* Not Logged in - Primary Logo */
.not_logged_in #page_header .logo_primary > div {
background-color:transparent;
background-image: url(/dcal/BrandingServlet?action=GetImage&image=primary_x2.png&bcode=hbc0000002);
background-image: url(/dcal/BrandingServlet?action=GetImage&image=primary.png&bcode=hbc0000002)\9;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src="/dcal/BrandingServlet?action=GetImage&image=primary_x2.png&bcode=hbc0000002", sizingMethod="scale");
background-position:0px 0px;
background-repeat:no-repeat;
width:120px;
height: 30px;
background-size:120px 30px;
margin-top:0px;
}
/* Secondary Logo */
#page_header .logo_secondary>.logo_container {
background-color:transparent;
background-image: url(/dcal/BrandingServlet?action=GetImage&image=secondary_x2.png&bcode=hbc0000002);
background-image: url(/dcal/BrandingServlet?action=GetImage&image=secondary.png&bcode=hbc0000002)\9;
background-position:0px 0px;
background-repeat:no-repeat;
background-size:105px 30px;
width:105px;
height:30px;
}
/* Update these values to place the secondary logo elsewhere on the page */
#page_header .logo_secondary {
border-left:1px solid #e3e3e3; /* Add in a line alongside the product name */
float:left; /* Place the logo either to the right of the logo by setting the value to "Left" or on the right of the page by setting the value to "Right" */
display:block;
}
/******* PAGE HEADER / FOOTER & CENTER LOGO *******/
/* Page background Color */
#page_body {
background-color: #F3F3F3;
}
/* Page background Color when you are not logged in and there is no nav on the page - This is mainly for the horses on wells fargo theme*/
#page_body.no_nav {
background-color: #F3F3F3;
background-image:none;
background-image:none\9;
background-position: right bottom;
background-size:360px 80px;
background-repeat:no-repeat;
}
/* Body Background Colour */
body.bg_color_2 {
background-color:#333333; /* This will override the default background color set at the top of the page */
background-image:none; /* Set this to none if there is no background image in the header */
background-repeat:repeat;
}
/* Body Background Colour for Easy View */
body.bg_color_4.easy_view {
background-color:#E7E7E7;
}
/* 360 Control Center logo and header background colour */
#page_header.bg_color_2 {
background-color:#FFFFFF;
background-image:none; /* you can set the image here to none if you don't want a logo placed in the center of the header bar */
background-image:none\9;
background-position: center center;
background-repeat:no-repeat;
background-size: 120px 30px;
color:#454545; /* Color of the text in the header bar */
box-shadow:0px 1px 0px rgba(0,0,0,0.1); /* Add a bottom shadow to the header bar - This is important when the header bar is the same background colour as the body and it provides distinction */
border-bottom:1px solid #e3e3e3\9; /* Add a border bottom for IE8 browsers */
}
/* Page Footer */
#page_footer.bg_color_2 {
background-color:#333333;
background-image: none; /* Set this to none if there is no background image in the footer */
background-repeat:repeat;
}
/******* NAVIGATION *******/
/* Navigation Background */
#page_nav {
background-color: #FFFFFF;
}
/* Default Navigation Links */
#page_nav ul li button {
color:#454545;
}
#page_nav ul li a, #page_nav ul li a fa-icon {
color:#454545;
}
/* Hover and Selected Navigation Links */
#page_nav ul li button.active,
#page_nav ul li button:hover, #page_nav ul li a.active, #page_nav ul li a:hover {
color:#DB0011;
background-color:#transparent;
}
#page_nav ul li.current a,
#page_nav ul li a:hover, #page_nav ul li a fa-icon:hover {
color:#DB0011;
background-color:#transparent;
}
/* Header Bar Navigation colour */
#page_header .user_preferences > ul > li > a, #page_header .user_preferences > ul > li > span {
color:#454545;
}
#page_header .user_preferences > ul > li > a.active {
color:#454545;
background-color:transparent;
}
#page_header .user_preferences > ul > li > a > div > a {
color:#454545;
}
#page_header .user_preferences > ul > li > a > div > a.active {
color:#454545;
background-color:transparent;
}
#page_header .user_preferences > ul > li > div > div > a {
color:#454545;
}
#page_header .user_preferences > ul > li > div > div > a.active {
color:#454545;
background-color:transparent;
}
#page_header .user_preferences > ul > li > * > div > a, #page_header fa-icon{
color:#454545;
}
#page_header .user_preferences > ul > li > * > div > a.active, , #page_header fa-icon:hover {
color:#454545;
background-color:transparent;
}
/******* SIDE PANEL ON EASY VIEW AND CARDS SCREEN *******/
/* Easy View Side Panel */
#page_slider_nav.bg_color_1 {
background-color:#FFFFFF;
}
.easy_view #page_slider_nav.bg_color_1{
background-color:#FFFFFF;
}
/* Easy View Header Background Colour */
.easy_view #page_header {
border-bottom:1px solid #e3e3e3;
}
/* Easy View Side Panel Header */
.card_view #page_slider_nav .col_easy_nav h2 {
color:#454545;
}
.easy_view #page_slider_nav .col_easy_nav h2 {
color:#454545;
}
.easy_view #page_slider_nav .col_easy_nav,
.card_view #page_slider_nav .col_easy_nav{
color:#454545;
}
/* Easy View Side Panel headings */
.easy_view #page_slider_nav .col_easy_nav h3,
.card_view #page_slider_nav .col_easy_nav h3 {
background-color:#DB0011;
color:#FFFFFF;
background-image:none;
}
/* Easy View Side Panel each nav item*/
.card_view #page_slider_nav .col_easy_nav ul li {
border-bottom:1px solid #e3e3e3 !important;
}
.easy_view #page_slider_nav .col_easy_nav ul li{
border-bottom:1px solid #e3e3e3 !important;
}
/* Easy View Side Panel Hyperlinks*/
.card_view #page_slider_nav .col_easy_nav ul li a {
color:#454545;
}
.easy_view #page_slider_nav .col_easy_nav ul li a {
color:#454545;
}
/* Easy View Side Panel Hyperlink Active */
.easy_view #page_slider_nav .col_easy_nav ul li a.active,
.card_view #page_slider_nav .col_easy_nav ul li a.active {
background-color: #e8e8e8;
color:#454545 ;
}
/******* EASY VIEW MODULES - THESE ARE THE BLOCKS OF INFORMATION ON THE EASY VIEW PAGES AND STATEMENT SCREENS *******/
/* Module Headers */
.module_header.bg_color_5 {
background-color:#757575;
color:#FFFFFF;
}
/* Back Button Styling */
.back_btn.bg_color_2 {
background-color:#DB0011;
}
/* Background color for Statement Table Header */
table.grid_overview_table thead tr > th {
background-color: #e3e3e3;
color:#454545;
}
/******* DASHBOARD *******/
/* Custom Styling for Dashboard Portlets */
.dash_column .portlet {
border:0px solid #e3e3e3;
}
/******* ICONS *******/
/* Change Icon to grey instead of blue default */
.form_help_text {
background-color:transparent;
background-image:url("/UI/styles/images/icon_info_grey_x2.png");
background-image:url("/UI/styles/images/icon_info_grey.png")\9;
background-position: left 7px;
background-repeat:no-repeat;
background-size:12px 12px;
}
/* Change iconset to grey instead of blue */
.info_icon {
background-image:url("/UI/styles/images/icon_info_grey_x2.png");
background-image:url("/UI/styles/images/icon_info_grey.png")\9;
}
.grid_pagination ul li button.pag_next_btn,
.grid_pagination ul li button.pag_prev_btn,
.btn_nav_prev,
.btn_nav_next,
.grid_controls #grid_pagination ul li a.pag_next_btn,
.grid_controls #grid_pagination ul li a.pag_prev_btn {
background-image: url("/UI/styles/images/icon_pag_dark_x2.png") !important;
background-image: url("/UI/styles/images/icon_pag_dark.png")\9 !important;
}
.drawer_panel h4 a {
background-image:url("/UI/styles/images/icon_drawers_arrow_dark_x2.png");
background-image:url("/UI/styles/images/icon_drawers_arrow_dark.png")\9;
color:#db0011; !important;
background-color:#f3f3f3;
}
/******* COMMENT STYLING *******/
ul.comments li .comment_by {color:#db0011 !important;}
/******* INNER BORDERS *******/
/* Place a border around the contents of a page if the background color of the page is to similar to the background color of the contents */
#page_body #page_content_inner {border:0px solid #e3e3e3;}
.easy_view #page_body #page_content_inner {border:0px solid #e3e3e3;}
/******* Heading display *******/
.page_title h1{
color: #454545;
}
.skip:focus{
color:#DB0011;
}
.custom_page_title.page_title h1 {
color: #004165 !important;
}
.custom_btn_icon.btn_icon{
background-image: url(/UI/styles/images/icon_sprite_dark.png)!important;
}
.easy_view #page_slider_nav .col_easy_nav.custom_easy_view_title h2 {
color: #004165 !important;
}
.easy_view #page_slider_nav .col_easy_nav.custom_easyview_rule ul li{
border-bottom: 1px solid #757575 !important;
}
.easy_view #page_slider_nav .col_easy_nav.custom_easyview_rule ul li a:hover{
text-decoration: none !important;
}
.easy_view #page_slider_nav .col_easy_nav.custom_easyview_rule ul li a.active, .card_view #page_slider_nav .col_easy_nav.custom_easyview_rule ul li a.active, #grid_view_easy div div ul li a.active{
}
.grid_pagination.custom_page_nav_icon ul li button.pag_next_btn,
.grid_pagination.custom_page_nav_icon ul li button.pag_prev_btn,
.btn_nav_prev,
.btn_nav_next,
.grid_controls #grid_pagination.custom_page_nav_icon ul li a.pag_next_btn,
.grid_controls #grid_pagination.custom_page_nav_icon ul li a.pag_prev_btn {
background-image: url(/UI/styles/images/icon_pag_blue_x2.png)!important;
background-image: url(/UI/styles/images/icon_pag_blue_x2.png)\9!important;
}
table.grid_table.custom_grid_table tbody tr.selected td {
background-color: #C7EAFB !important;
}
.accordion .accordion-element .accordion-panel.custom_accordion{
background-image: url(/UI/styles/images/icon_drawers_arrow_blue_x2.png)!important;
}
table.grid_table.custom_grid_table tbody td.no-records {
background-image: url(/UI/styles/images/icon_msg_info.png)!important;
}
.apply_btn.custom_apply_btn{
color:#757575;
}
.custom-infor-box-heading.info-box-heading{
background-color: #C7EAFB !important;
}
.color_1.custom_color_1{
color: #004165 !important;
}
h3.color_1{
color: #004165 !important;
}
#failure_message .dijitDialogTitleBar .dijitDialogCloseIcon, .dialog_failure .dijitDialogTitleBar .dijitDialogCloseIcon, #success_message .dijitDialogTitleBar .dijitDialogCloseIcon, .dialog_success .dijitDialogTitleBar .dijitDialogCloseIcon, #error_message .dijitDialogTitleBar .dijitDialogCloseIcon{
background-image: url(/UI/styles/images/icon_dd_close_btn.png)!important;
background-size: 8px 8px !important;
}
.btn_tree_user.custom_btn_tree_user.active, .btn_tree_card.custom_btn_tree_card.active, .btn_tree_bca.custom_btn_tree_bca.active{
background-color: #757575 !important;
}
.btn_tree_user.custom_btn_tree_user, .btn_tree_card.custom_btn_tree_card, .btn_tree_bca.custom_btn_tree_bca{
background-color: #C7EAFB !important;
}
#page_slider_nav .col_easy_nav.custom_easy_view_title h2 {
color: #004165 !important;
}
#page_slider_nav .col_easy_nav.custom_easyview_rule ul li{
border-bottom: 1px solid #757575 !important;
}
#page_slider_nav .col_easy_nav.custom_easyview_rule ul li a:hover{
text-decoration: none !important;
}
.card_view #page_slider_nav .col_easy_nav.custom_easyview_rule ul li a.active, .card_view #page_slider_nav .col_easy_nav.custom_easyview_rule ul li a.active, #grid_view_easy div div ul li a.active{
}
.btn_normal.custom_btn_normal{
color:#757575;
}
.statement_summary table.grid_table.custom_grid_table thead tr > th{
background-color: #C7EAFB !important;
}
</style></head>
<body class="">
<!--
<link rel="stylesheet" type="text/css" ng-href="/Resources/360_webs/css/layout{{user.custom}}.css"/>
-->
<div ng-bind-html="user.comment.msg" class="ng-binding"></div>
<div id="page_container" class="not_logged_in">
<div id="page_header" class="v-container page_header bg_color_2" ng-init="initPage()">
<div class="v-content head-content" style="padding-top:10px">
<div class="logo_primary">
<div role="img" aria-label="First Data" title="First Data"></div>
</div>
</div>
<div class="logo_secondary">
<div role="img" class="logo_container" aria-label="360Control" title="360Control"></div>
</div>
<div class="user_preferences">
<ul>
<li>
<a href="javascript:void[0]" id="style_switcher" aria-controls="changeLoginFontSize" class="dd_link" title="Change Application Font Size">aA</a>
<div id="style_switcher_options" style="display:none;" class="dd_option_panel">
<div class="dd_close_panel"><a href="javascript:void(0)" role="button" aria-label="Close Style Options Panel" class="ng-binding">Close Style Options Panel</a></div>
<h3 class="color_1 custom_color_1 ng-binding">Font Size Options</h3>
<ul id="changeLoginFontSize" role="menu">
<li><a role="menuitem" href="javascript:void(0)" id="font_increase" title="Increase Font Size" class="ng-binding">Large</a></li>
<li><a role="menuitem" href="javascript:void(0)" id="font_reset" title="Reset Font Size" class="ng-binding">Normal</a></li>
<li><a role="menuitem" href="javascript:void(0)" id="font_decrease" title="Decrease Font Size" class="ng-binding">Small</a></li>
</ul>
</div>
</li>
<li>
<span class="ng-binding">Language:</span>
<a href="javascript:void[0]" aria-controls="language" ng-show="displayEnglish" id="language_switcher" class="dd_link ng-binding ng-hide" title="Current Selected Language English (International) ">English (International)</a>
<a href="javascript:void[0]" aria-controls="language" ng-show="displayEnglishUS" id="language_switcher" class="dd_link ng-binding" title="Current Selected Language English (US)">English (US)</a>
<a href="javascript:void[0]" aria-controls="language" ng-show="displaySpanish" id="language_switcher" class="dd_link ng-binding ng-hide" title="Current Selected Language Spanish">Spanish</a>
<a href="javascript:void[0]" aria-controls="language" ng-show="displayItalian" id="language_switcher" class="dd_link ng-binding ng-hide" title="Current Selected Language Italian">Italian</a>
<a href="javascript:void[0]" aria-controls="language" ng-show="displayGerman" id="language_switcher" class="dd_link ng-binding ng-hide" title="Current Selected Language German">German</a>
<a href="javascript:void[0]" aria-controls="language" ng-show="displayFrench" id="language_switcher" class="dd_link ng-binding ng-hide" title="Current Selected Language French">French</a>
<div id="language_switcher_options" style="display:none;" class="dd_option_panel">
<div class="dd_close_panel"><a href="javascript:void(0)" role="button" aria-label="Close Language Options Panel" class="ng-binding">Close Language Options Panel</a></div>
<h3 class="color_1 custom_color_1 ng-binding">Change Language</h3>
<ul id="language" role="menu">
<li><a role="menuitem" href="javascript:void(0)" id="eng_int_link" title="English (International)" ng-click="changeLanguage('826')" class="ng-binding">English (International)</a></li>
<li><a role="menuitem" href="javascript:void(0)" id="eng_link" title="English (US)" ng-click="changeLanguage('840')" class="ng-binding">English (US)</a></li>
<li><a role="menuitem" href="javascript:void(0)" id="spanish_link" title="Spanish" ng-click="changeLanguage('724')" class="ng-binding">Spanish</a></li>
<li><a role="menuitem" href="javascript:void(0)" id="italian_link" title="Italian" ng-click="changeLanguage('380')" class="ng-binding">Italian</a></li>
<li><a role="menuitem" href="javascript:void(0)" id="german_link" title="German" ng-click="changeLanguage('276')" class="ng-binding">German</a></li>
<li><a role="menuitem" href="javascript:void(0)" id="french_link" title="French" ng-click="changeLanguage('250')" class="ng-binding">French</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div style="height:605px" id="page_body" class="no_nav">
<div id="login_page_content">
<div class="login_panel_container" ng-show="true" style="width: 680px;">
<!-- ngView: --><div ng-view="" class="ng-scope">
<title class="ng-binding ng-scope">Commercial Card Services - Login Page </title>
<!-- ngIf: wsfWarning1 -->
<!-- ngIf: wsfWarning2 -->
<form name="form_login" id="form_login" class="fd_form ng-pristine ng-scope ng-valid-maxlength ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength" novalidate="" ng-controller="LoginController" ng-init="initPage()" ng-submit="submitForm()" method="post" autocomplete="off">
<fieldset ng-disabled="isLoading" ng-class="isLoading ? 'loader_overlay' : ''">
<div id="login_panel" class="panel_outer">
<div class="panel_inner" style="padding-top:0px">
<h1 id="content" class="color_1"><a name="how" class="ng-binding">Login</a></h1>
<p class="form_intro ng-binding" ng-show="!displayChooseSecurityQuestionDisplayed && !emailMsgDisplayed" aria-label="If you are an existing user click below to login.">If you are an existing user click below to login.</p>
<p class="form_intro ng-binding ng-hide" ng-show="displayChooseSecurityQuestionDisplayed" aria-label="Please select the security question and answer">Please select the security question and answer</p>
<p class="form_intro ng-binding ng-hide" ng-show="user.secondQuestionName" aria-label="Please answer the security questions below.">Please answer the security questions below.</p>
<div class="form_container form_items_big">
<fieldset>
<legend class="ng-binding">Member Login details</legend>
<div class="form_row" ng-show="userNameDisplayed">
<div class="form_label">
<label for="Login" id="usernameLbl" class="ng-binding">Please enter your Username.</label>
</div>
<div class="form_input">
<!-- ngIf: isWSF -->
<!-- ngIf: !isWSF --><input ng-if="!isWSF" id="Login" title="Please enter your Username." name="Login" x-ng-focus="hasUsernameFocus" autocomplete="off" ng-model="user.login" ng-required="false" aria-required="true" aria-invalid="false" ng-change="changeValue(user.login,'Login')" aria-labelledby="usernameLbl" class="ng-pristine ng-untouched ng-valid ng-scope ng-empty ng-valid-required"><!-- end ngIf: !isWSF -->
<label id="Login_username_scr" name="Login_username_scr" class="error ng-binding ng-hide" role="alert" for="Login" ng-show="form_login.Login.$error.required && form_login.Login.$dirty">Please enter a valid Username.</label>
</div>
</div>
<div class="form_row ng-hide" ng-show="passwordDisplayed">
<div class="form_label">
<label for="Password" id="passwordLbl" class="ng-binding">Please enter your Password.</label>
</div>
<div class="form_input">
<input type="password" title="Please enter your Password." id="Password" name="Password" x-ng-focus="hasPasswordFocus" autocomplete="off" ng-model="user.password" ng-required="false" aria-required="true" aria-invalid="false" ng-change="changeValue(user.password,'Password')" aria-label="Please enter your new Password. " class="ng-pristine ng-untouched ng-valid ng-empty ng-valid-required">
<label id="Login_password_scr" name="Login_password_scr" class="error ng-binding ng-hide" for="Login" role="alert" ng-show="form_login.Password.$error.required && form_login.Password.$dirty">Please enter a valid Password.</label>
</div>
</div>
<div class="form_row ng-hide" ng-show="confirmPasswordDisplayed">
<div class="form_label">
<label for="ConfirmPassword" id="confirmPasswordLbl" class="ng-binding">Please confirm your new Password.</label>
</div>
<div class="form_input">
<input type="password" title="Please confirm your new Password." id="ConfirmPassword" name="ConfirmPassword" x-ng-focus="hasConfirmPasswordFocus" autocomplete="off" ng-model="user.confirmPassword" ng-required="false" aria-required="true" aria-invalid="false" ng-change="changeValue(user.confirmPassword,'confirmPassword')" aria-label="Please confirm your new Password. " class="ng-pristine ng-untouched ng-valid ng-empty ng-valid-required">
<label id="Login_confirmPassword_scr" name="Login_confirmPassword_scr" class="error ng-binding ng-hide" for="Login" role="alert" ng-show="form_login.ConfirmPassword.$error.required && form_login.ConfirmPassword.$dirty">Please enter a valid Confirmation Password.</label>
<label id="Login_confirmPassword_scr_2" name="Login_confirmPassword_scr_2" class="error ng-binding ng-hide" for="Login" role="alert" ng-show="!form_login.ConfirmPassword.$error.required && form_login.ConfirmPassword.$dirty">The Password and Confirm Password must match.</label>
</div>
</div>
<div class="form_row ng-hide" ng-show="otpDisplayed">
<div class="form_label">
<label for="OTP" id="maskedEmail"><b class="ng-binding">OTP sent to your Email Address: </b></label><br>
<label for="OTP" id="otpLbl" class="ng-binding">Enter the OTP you received.</label>
</div>
<div class="form_input">
<input type="password" title="Enter the OTP you received." id="OTP" name="OTP" x-ng-focus="hasOTPFocus" autocomplete="off" ng-model="user.otp" ng-required="false" aria-required="true" aria-invalid="false" ng-change="changeValue(user.otp,'OTP')" aria-labelledby="maskedEmail otpLbl" valid-number="" stop-paste="" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty ng-valid-required">
<label id="Login_otp_scr" name="Login_otp_scr" class="error ng-binding ng-hide" for="Login" ng-show="form_login.OTP.$error.required && form_login.OTP.$dirty">Please enter valid OTP.</label>
<div class="displayOTPlink">
<a title="Show OTP" href="javascript:void()" id="showOtp" ng-click="displayOTP('show')" ng-show="!showOtp"><img src="../../styles/images/eye.png" alt="Show OTP" height="25px" width="25px"></a>
<a title="Hide OTP" href="javascript:void()" id="hideOtp" ng-click="displayOTP('hide')" ng-show="showOtp" class="ng-hide"><img src="../../styles/images/eye-hide.png" alt="Hide OTP" height="25px" width="25px"></a>
</div>
</div>
<div tabindex="0" id="timerText" class="timerText ng-binding ng-hide" ng-show="showTimer" role="timer" aria-label="Did not receive an E-Mail? Resend in 60 seconds.">Did not receive an E-Mail? Resend in 60 seconds.</div>
</div>
<div class="form_row ng-hide" ng-show="securityQuestionDisplayed">
<div class="form_label">
<label id="Login_securityQuestion" name="Login_securityQuestion" for="ExtraInfo" class="ng-binding"></label>
</div>
<div class="form_input">
<input type="password" id="ExtraInfo" name="ExtraInfo" x-ng-focus="hasSecurityQuestionFocus" autocomplete="off" ng-model="user.extraInfo" ng-required="false" aria-required="true" aria-invalid="false" ng-change="changeValue(user.extraInfo,'extraInfo')" aria-labelledby="Login_securityQuestion" class="ng-pristine ng-untouched ng-valid ng-empty ng-valid-required">
<label id="Login_securityQuestion_scr" name="Login_securityQuestion_scr" class="error ng-binding ng-hide" for="ExtraInfo" role="alert" ng-show="form_login.ExtraInfo.$error.required && form_login.ExtraInfo.$dirty"></label>
</div>
<div ng-show="user.secondQuestionName" class="form_input ng-hide" style="margin-top:60px;">
<label id="Login_secondQuestion_scr" name="Login_secondQuestion_scr" for="ExtraInfo2" class="ng-binding"></label>
<input type="password" ng-show="user.secondQuestionName" style="margin-top:10px;" ng-required="user.secondQuestionName" id="ExtraInfo2" name="ExtraInfo2" ng-model="user.extraInfo2" ng-change="changeValue(user.extraInfo2,'extraInfo2')" autocomplete="off" aria-labelledby="Login_secondQuestion_scr" class="ng-pristine ng-untouched ng-valid ng-empty ng-valid-required ng-hide">
<label class="error ng-binding ng-hide" role="alert" ng-show="form_login.ExtraInfo2.$error.required && form_login.ExtraInfo2.$dirty">Please enter an Answer to this Question</label>
</div>
</div>
<div class="form_row ng-hide" ng-show="emailDisplayed">
<div class="form_label">
<label for="EmailAddress" id="mfaEnrollText" class="ng-binding"></label><br>
<label for="EmailAddress" id="enterEmailAddressLbl" class="ng-binding">Please enter your E-Mail address.</label>
</div>
<div class="form_input">
<input type="text" title="Please enter your E-Mail address." id="EmailAddress" name="EmailAddress" maxlength="50" x-ng-focus="hasEmailAddressFocus" autocomplete="off" ng-model="user.emailAddress" ng-required="false" aria-required="true" aria-invalid="false" ng-change="changeValue(user.emailAddress,'EmailAddress')" ng-model-options="{updateOn: 'blur'}" aria-labelledby="mfaEnrollText enterEmailAddressLbl" class="ng-pristine ng-untouched ng-valid ng-empty ng-valid-required ng-valid-maxlength">
<label id="EmailAddress_scr" name="EmailAddress_scr" class="error ng-binding ng-hide" for="EmailAddress" role="alert" ng-show="form_login.EmailAddress.$error.required && form_login.EmailAddress.$dirty">Please enter your E-Mail address.</label>
</div>
</div>
<div class="form_row ng-hide" ng-show="confirmEmailDisplayed">
<div class="form_label">
<label for="ConfirmEmailAddress" id="confirmEmailAddressLbl" class="ng-binding">Please confirm your E-Mail address.</label>
</div>
<div class="form_input">
<input type="text" title="Please confirm your E-Mail address." id="ConfirmEmailAddress" name="ConfirmEmailAddress" x-ng-focus="hasConfirmEmailAddressFocus" maxlength="50" autocomplete="off" ng-model="user.confirmEmailAddress" ng-required="false" aria-required="true" aria-invalid="false" ng-change="changeValue(user.confirmEmailAddress,'ConfirmEmailAddress')" ng-model-options="{updateOn: 'blur'}" stop-paste="" aria-labelledby="confirmEmailAddressLbl" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty ng-valid-required ng-valid-maxlength">
<label id="ConfirmEmailAddress_scr_error" name="ConfirmEmailAddress_scr_error" class="error ng-binding ng-hide" for="ConfirmEmailAddress" role="alert" ng-show="form_login.ConfirmEmailAddress.$error.required && form_login.ConfirmEmailAddress.$dirty">Please enter a Confirmation Email Address.</label>
</div>
</div>
<div class="form_row ng-hide" ng-show="displayChooseSecurityQuestionDisplayed">
<br>
<!-- ngIf: user.mfaEnabled -->
<!-- ngIf: !user.mfaEnabled --><div ng-if="!user.mfaEnabled" class="ng-scope">
<table class="security_table">
<tbody><tr>
<td>
<select id="securityQuestion0" name="securityQuestion0" ng-model="user.securityQuestion[0]" ng-required="true" aria-required="true" aria-label="Choose Security Question 1" title="Choose Security Question 1" x-ng-focus="hasDisplayChooseSecurityQuestionFocus" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" required="required">
<option value="" class="ng-binding" selected="selected">Choose Security Question 1</option>
<!-- ngRepeat: x in securityQuesMapp | filter : {'dropdown' : '0'} -->
</select>
<label id="question_scr0" name="question_scr0" class="error ng-binding ng-hide" for="Login" role="alert" ng-show="form_login.securityQuestion0.$error.required && form_login.securityQuestion0.$touched">Please select a Security Question</label>
<br><br>
</td>
<td>
<label class="form_label ng-binding" style="margin-right:20px; margin-left:50px">Answer</label>
</td>
<td>
<input type="password" id="securityAnswer0" name="securityAnswer0" maxlength="200" ng-model="user.securityAnswer[0]" value="" ng-pattern="/^[a-zA-Z0-9]+(\s?[a-zA-Z0-9]+)*$/" ng-required="true" aria-required="true" aria-invalid="false" ng-change="changeValue(user.securityAnswer[0],'securityAnswer0','securityAnswer', 0)" autocomplete="off" title="Answer" aria-labelledby="answer_scr0 chkans0 chkans01 answer_min0" ng-minlength="4" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength" required="required">
<label id="answer_scr0" name="answer_scr0" class="error ng-binding ng-hide" for="securityAnswer0" aria-label="Please enter an Answer" role="alert" ng-show="form_login.securityAnswer0.$error.required && form_login.securityAnswer0.$touched ">Please enter an Answer</label>
<label id="chkans0" name="chkans0" class="error ng-binding ng-hide" for="securityAnswer0" aria-label="You cannot have the same answer for multiple questions" role="alert" ng-show="chkans[0]">You cannot have the same answer for multiple questions</label>
<label id="chkans01" class="error ng-binding ng-hide" for="securityAnswer0" aria-label="Please enter only Uppercase or lower case letters (a-z, A-Z), numbers (0-9), and single spaces in between" role="alert" ng-show="form_login.securityAnswer0.$error.pattern">Please enter only Uppercase or lower case letters (a-z, A-Z), numbers (0-9), and single spaces in between</label>
<label id="answer_min0" name="answer_min0" class="error ng-binding ng-hide" for="securityAnswer0" aria-label="secAnsMinCharMsg" role="alert" ng-show="form_login.securityAnswer0.$touched && form_login.securityAnswer0.$error.minlength ">Your answer must be a minimum of 4 characters</label>
</td>
<td>
<label class="form_label ng-binding" style="white-space: nowrap; margin-right:20px;margin-left:50px;">ConfirmAnswer</label>
</td>
<td>
<input type="password" id="confirmSecurityAnswer0" maxlength="200" name="confirmSecurityAnswer0" ng-keydown="keydown_event($event)" ng-model="confirmSecurityAnswer[0]" ng-required="true" aria-required="true" aria-invalid="false" ng-change="changeValue(confirmSecurityAnswer[0],'confirmSecurityAnswer0')" title="Confirm Answer" aria-labelledby="confirm_answer_scr0 confirm_answer_scr01" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-maxlength" required="required">
<label id="confirm_answer_scr0" name="confirm_answer_scr0" class="error ng-binding ng-hide" aria-label="Please enter a Confirmation Answer" role="alert" for="confirmSecurityAnswer0" ng-show="form_login.confirmSecurityAnswer0.$error.required && form_login.confirmSecurityAnswer0.$touched">Please enter a Confirmation Answer</label>
<label id="confirm_answer_scr01" class="error ng-binding ng-hide" for="confirmSecurityAnswer0" aria-label="The Answer and Confirm Answer must match." role="alert" ng-show="form_login.confirmSecurityAnswer0.$error.pattern">The Answer and Confirm Answer must match.</label>
</td>
</tr>
<tr>
<td>
<select ng-model="user.securityQuestion[1]" id="securityQuestion1" name="securityQuestion1" ng-required="true" aria-required="true" aria-label="Choose Security Question 2" title="Choose Security Question 2" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" required="required">
<option value="" class="ng-binding" selected="selected">Choose Security Question 2</option>
<!-- ngRepeat: x in securityQuesMapp | filter : {'dropdown' : '1'} -->
</select>
<label id="question_scr1" name="question_scr1" class="error ng-binding ng-hide" for="Login" role="alert" ng-show="form_login.securityQuestion1.$error.required && form_login.securityQuestion1.$touched">Please select a Security Question</label>
<br><br>
</td>
<td>
<label class="form_label ng-binding" style="margin-right:20px; margin-left:50px">Answer</label>
</td>
<td>
<input type="password" id="securityAnswer1" name="securityAnswer1" maxlength="200" ng-model="user.securityAnswer[1]" value="" ng-pattern="/^[a-zA-Z0-9]+(\s?[a-zA-Z0-9]+)*$/" ng-required="true" aria-required="true" aria-invalid="false" ng-change="changeValue(user.securityAnswer[1],'securityAnswer1','securityAnswer', 1)" title="Answer" aria-labelledby="answer_scr1 chkans1 answerErr1 answerErr01 answer_min1" ng-minlength="4" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength" required="required">
<label id="answer_scr1" name="answer_scr1" class="error ng-binding ng-hide" for="securityAnswer1" aria-label="Please enter an Answer" role="alert" ng-show="form_login.securityAnswer1.$error.required && form_login.securityAnswer1.$touched">Please enter an Answer</label>
<label id="chkans1" name="chkans1" class="error ng-binding ng-hide" for="securityAnswer1" aria-label="You cannot have the same answer for multiple questions" role="alert" ng-show="chkans[1]">You cannot have the same answer for multiple questions</label>
<label id="answerErr1" class="error ng-binding ng-hide" for="securityAnswer1" aria-label="Please enter only Uppercase or lower case letters (a-z, A-Z), numbers (0-9), and single spaces in between" role="alert" ng-show="form_login.securityAnswer1.$error.pattern">Please enter only Uppercase or lower case letters (a-z, A-Z), numbers (0-9), and single spaces in between</label>
<label id="answerErr01" class="error ng-hide" for="securityAnswer1" aria-label="Two answers cannot be same!!!!!!" role="alert" ng-show="(securityAnswer0!=null && securityAnswer1!=null )&& (user.securityAnswer[0]==confirmSecurityAnswer[0])">Two answers cannot be same!!!!!!</label>
<label id="answer_min1" name="answer_min1" class="error ng-binding ng-hide" for="securityAnswer1" aria-label="secAnsMinCharMsg" role="alert" ng-show="form_login.securityAnswer1.$touched && form_login.securityAnswer1.$error.minlength ">Your answer must be a minimum of 4 characters</label>
</td>
<td>
<label class="form_label ng-binding" style="white-space: nowrap; margin-right:20px;margin-left:50px;">ConfirmAnswer</label>
</td>
<td>
<input type="password" id="confirmSecurityAnswer1" name="confirmSecurityAnswer1" maxlength="200" ng-keydown="keydown_event($event)" ng-model="confirmSecurityAnswer[1] " ng-required="true" aria-required="true" aria-invalid="false" ng-change="changeValue(confirmSecurityAnswer[1], confirmSecurityAnswer1)" title="Confirm Answer" aria-labelledby="confirm_answer_scr1 confirm_answerErr1" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-maxlength" required="required">
<label id="confirm_answer_scr1" name="confirm_answer_scr1" class="error ng-binding ng-hide" role="alert" aria-label="Please enter a Confirmation Answer" for="confirmSecurityAnswer1" ng-show="form_login.confirmSecurityAnswer1.$error.required && form_login.confirmSecurityAnswer1.$touched">Please enter a Confirmation Answer</label>
<label id="confirm_answerErr1" class="error ng-binding ng-hide" role="alert" for="confirmSecurityAnswer1" aria-label="The Answer and Confirm Answer must match." ng-show="form_login.confirmSecurityAnswer1.$error.pattern">The Answer and Confirm Answer must match.</label>
</td>
</tr>
<tr>
<td>
<select ng-model="user.securityQuestion[2]" id="securityQuestion2" name="securityQuestion2" ng-required="true" aria-required="true" aria-label="Choose Security Question 3" title="Choose Security Question 3" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" required="required">
<option value="" class="ng-binding" selected="selected">Choose Security Question 3</option>
<!-- ngRepeat: x in securityQuesMapp | filter : {'dropdown' : '2'} -->
</select>
<label id="question_scr2" name="question_scr2" class="error ng-binding ng-hide" for="Login" role="alert" ng-show="form_login.securityQuestion2.$error.required && form_login.securityQuestion2.$touched">Please select a Security Question</label>
<br><br>
</td>
<td>
<label class="form_label ng-binding" style="margin-right:20px; margin-left:50px">Answer</label>
</td>
<td>
<input type="password" id="securityAnswer2" name="securityAnswer2" maxlength="200" ng-model="user.securityAnswer[2]" ng-pattern="/^[a-zA-Z0-9]+(\s?[a-zA-Z0-9]+)*$/" value="" ng-required="true" aria-required="true" aria-invalid="false" ng-change="changeValue(user.securityAnswer[2], 'securityAnswer2','securityAnswer', 2)" title="Answer" aria-labelledby="answer_scr2 chkans2 chkans02 answer_min2" ng-minlength="4" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength" required="required">
<label id="answer_scr2" name="answer_scr2" class="error ng-binding ng-hide" for="securityAnswer2" aria-label="Please enter an Answer" role="alert" ng-show="form_login.securityAnswer2.$error.required && form_login.securityAnswer2.$touched">Please enter an Answer</label>
<label id="chkans2" name="chkans2" class="error ng-binding ng-hide" for="securityAnswer2" aria-label="You cannot have the same answer for multiple questions" role="alert" ng-show="chkans[2]">You cannot have the same answer for multiple questions</label>
<label id="chkans02" class="error ng-binding ng-hide" for="securityAnswer2" aria-label="Please enter only Uppercase or lower case letters (a-z, A-Z), numbers (0-9), and single spaces in between" role="alert" ng-show="form_login.securityAnswer2.$error.pattern">Please enter only Uppercase or lower case letters (a-z, A-Z), numbers (0-9), and single spaces in between</label>
<label id="answer_min2" name="answer_min2" class="error ng-binding ng-hide" for="securityAnswer2" aria-label="secAnsMinCharMsg" role="alert" ng-show="form_login.securityAnswer2.$touched && form_login.securityAnswer2.$error.minlength ">Your answer must be a minimum of 4 characters</label>
</td>
<td>
<label class="form_label ng-binding" style="white-space: nowrap; margin-right:20px;margin-left:50px;">ConfirmAnswer</label>
</td>
<td>
<input type="password" id="confirmSecurityAnswer2" name="confirmSecurityAnswer2" maxlength="200" ng-keydown="keydown_event($event)" ng-model="confirmSecurityAnswer[2]" ng-required="true" aria-required="true" aria-invalid="false" ng-change="changeValue(confirmSecurityAnswer[2], confirmSecurityAnswer2)" title="Confirm Answer" aria-labelledby="confirm_answer_scr2 confirm_answer_scr02" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-maxlength" required="required">
<label id="confirm_answer_scr2" name="confirm_answer_scr2" class="error ng-binding ng-hide" aria-label="Please enter a Confirmation Answer" role="alert" for="confirmSecurityAnswer2" ng-show="form_login.confirmSecurityAnswer2.$error.required && form_login.confirmSecurityAnswer2.$touched">Please enter a Confirmation Answer</label>
<label id="confirm_answer_scr02" class="error ng-binding ng-hide" for="confirmSecurityAnswer2" aria-label="The Answer and Confirm Answer must match." role="alert" ng-show="form_login.confirmSecurityAnswer2.$error.pattern">The Answer and Confirm Answer must match.</label>
</td>
</tr>
<tr>
<td>
<select ng-model="user.securityQuestion[3]" id="securityQuestion3" name="securityQuestion3" ng-required="true" aria-required="true" aria-label="Choose Security Question 4" title="Choose Security Question 4" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" required="required">
<option value="" class="ng-binding" selected="selected">Choose Security Question 4</option>
<!-- ngRepeat: x in securityQuesMapp | filter : {'dropdown' : '3'} -->
</select>
<label id="question_scr3" name="question_scr3" class="error ng-binding ng-hide" for="Login" role="alert" ng-show="form_login.securityQuestion3.$error.required && form_login.securityQuestion3.$touched">Please select a Security Question</label>
<br><br>
</td>
<td>
<label class="form_label ng-binding" style="margin-right:20px; margin-left:50px">Answer</label>
</td>
<td>
<input type="password" id="securityAnswer3" name="securityAnswer3" maxlength="200" ng-model="user.securityAnswer[3]" value="" ng-pattern="/^[a-zA-Z0-9]+(\s?[a-zA-Z0-9]+)*$/" ng-required="true" aria-required="true" aria-invalid="false" ng-change="changeValue(user.securityAnswer[3], 'securityAnswer3','securityAnswer', 3)" title="Answer" aria-labelledby="answer_scr3 chkans3 chkans03 answer_min3" ng-minlength="4" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength" required="required">
<label id="answer_scr3" name="answer_scr3" class="error ng-binding ng-hide" for="securityAnswer3" aria-label="Please enter an Answer" role="alert" ng-show="form_login.securityAnswer3.$error.required && form_login.securityAnswer3.$touched">Please enter an Answer</label>
<label id="chkans3" name="chkans3" class="error ng-binding ng-hide" for="securityAnswer3" aria-label="You cannot have the same answer for multiple questions" role="alert" ng-show="chkans[3]">You cannot have the same answer for multiple questions</label>
<label id="chkans03" class="error ng-binding ng-hide" for="securityAnswer3" aria-label="Please enter only Uppercase or lower case letters (a-z, A-Z), numbers (0-9), and single spaces in between" role="alert" ng-show="form_login.securityAnswer3.$error.pattern">Please enter only Uppercase or lower case letters (a-z, A-Z), numbers (0-9), and single spaces in between</label>
<label id="answer_min3" name="answer_min3" class="error ng-binding ng-hide" for="securityAnswer3" aria-label="secAnsMinCharMsg" role="alert" ng-show="form_login.securityAnswer3.$touched && form_login.securityAnswer3.$error.minlength ">Your answer must be a minimum of 4 characters</label>
</td>
<td>
<label class="form_label ng-binding" style="white-space: nowrap; margin-right:20px;margin-left:50px;">ConfirmAnswer</label>
</td>
<td>
<input type="password" id="confirmSecurityAnswer3" name="confirmSecurityAnswer3" maxlength="200" ng-keydown="keydown_event($event)" ng-model="confirmSecurityAnswer[3]" ng-required="true" aria-required="true" aria-invalid="false" ng-change="changeValue(confirmSecurityAnswer[3], confirmSecurityAnswer3)" title="Confirm Answer" aria-labelledby="confirm_answer_scr3 confirm_answer_scr03" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-maxlength" required="required">
<label id="confirm_answer_scr3" name="confirm_answer_scr3" class="error ng-binding ng-hide" aria-label="Please enter a Confirmation Answer" role="alert" for="confirmSecurityAnswer3" ng-show="form_login.confirmSecurityAnswer3.$error.required && form_login.confirmSecurityAnswer3.$touched">Please enter a Confirmation Answer</label>
<label id="confirm_answer_scr03" class="error ng-binding ng-hide" for="confirmSecurityAnswer3" aria-label="The Answer and Confirm Answer must match." role="alert" ng-show="form_login.confirmSecurityAnswer3.$error.pattern">The Answer and Confirm Answer must match.</label>
</td>
</tr>
<tr>
<td>
<select ng-model="user.securityQuestion[4]" id="securityQuestion4" name="securityQuestion4" ng-required="true" aria-required="true" aria-label="Choose Security Question 5" title="Choose Security Question 5" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" required="required">
<option value="" class="ng-binding" selected="selected">Choose Security Question 5</option>
<!-- ngRepeat: x in securityQuesMapp | filter : {'dropdown' : '4'} -->
</select>
<label id="question_scr4" name="question_scr4" class="error ng-binding ng-hide" for="Login" role="alert" ng-show="form_login.securityQuestion4.$error.required && form_login.securityQuestion4.$touched">Please select a Security Question</label>
<br><br>
</td>
<td>
<label class="form_label ng-binding" style="margin-right:20px; margin-left:50px">Answer</label>
</td>
<td>
<input type="password" id="securityAnswer4" name="securityAnswer4" maxlength="200" ng-model="user.securityAnswer[4]" ng-pattern="/^[a-zA-Z0-9]+(\s?[a-zA-Z0-9]+)*$/" value="" ng-required="true" aria-required="true" aria-invalid="false" ng-change="changeValue(user.securityAnswer[4], 'securityAnswer4','securityAnswer', 4)" title="Answer" aria-labelledby="answer_scr4 chkans4 chkans04 answer_min4" ng-minlength="4" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength" required="required">
<label id="answer_scr4" name="answer_scr4" class="error ng-binding ng-hide" for="securityAnswer4" aria-label="Please enter an Answer" role="alert" ng-show="form_login.securityAnswer4.$error.required && form_login.securityAnswer4.$touched">Please enter an Answer</label>
<label id="chkans4" name="chkans4" class="error ng-binding ng-hide" for="securityAnswer4" aria-label="You cannot have the same answer for multiple questions" role="alert" ng-show="chkans[4]">You cannot have the same answer for multiple questions</label>
<label id="chkans04" class="error ng-binding ng-hide" for="securityAnswer4" aria-label="Please enter only Uppercase or lower case letters (a-z, A-Z), numbers (0-9), and single spaces in between" role="alert" ng-show="form_login.securityAnswer4.$error.pattern">Please enter only Uppercase or lower case letters (a-z, A-Z), numbers (0-9), and single spaces in between</label>
<label id="answer_min4" name="answer_min4" class="error ng-binding ng-hide" for="securityAnswer4" aria-label="secAnsMinCharMsg" role="alert" ng-show="form_login.securityAnswer4.$touched && form_login.securityAnswer4.$error.minlength ">Your answer must be a minimum of 4 characters</label>
</td>
<td>
<label class="form_label ng-binding" style="white-space: nowrap; margin-right:20px;margin-left:50px;">ConfirmAnswer</label>
</td>
<td>
<input type="password" id="confirmSecurityAnswer4" name="confirmSecurityAnswer4" maxlength="200" ng-keydown="keydown_event($event)" ng-model="confirmSecurityAnswer[4]" ng-required="true" aria-required="true" aria-invalid="false" ng-change="changeValue(confirmSecurityAnswer[4], confirmSecurityAnswer4)" title="Confirm Answer" aria-labelledby="confirm_answer_scr4 confirm_answer_scr04" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-maxlength" required="required">
<label id="confirm_answer_scr4" name="confirm_answer_scr4" class="error ng-binding ng-hide" aria-label="Please enter a Confirmation Answer" role="alert" for="confirmSecurityAnswer4" ng-show="form_login.confirmSecurityAnswer4.$error.required && form_login.confirmSecurityAnswer4.$touched">Please enter a Confirmation Answer</label>
<label id="confirm_answer_scr04" class="error ng-binding ng-hide" for="confirmSecurityAnswer4" aria-label="The Answer and Confirm Answer must match." role="alert" ng-show="form_login.confirmSecurityAnswer4.$error.pattern">The Answer and Confirm Answer must match.</label>
</td>
</tr>
<tr>
<td>
<div class="form_actions">
<div class="form_action_left ng-hide" ng-show="displayCancel">
<input type="button" value="Cancel" title="Cancel" class="btn_normal btn_primary" ng-click="goToLogin()">
</div>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td>
<div class="form_actions">
<div class="form_action_right ng-hide" ng-show="securityQuestionsRequiredFieldPassed && !(chkans[0] || chkans[1] || chkans[2] || chkans[3] || chkans[4])">
<input type="submit" value="Login" class="btn_normal btn_primary btn_arrow_left" title="Login">
</div>
</div>
</td>
</tr>
</tbody></table>
</div><!-- end ngIf: !user.mfaEnabled -->
</div>
<div class="form_row ng-hide" ng-show="displayErrorDiv" style="height:20px">
<div class="form_label">
<label for="Password" class="error_msg ng-binding" role="alert"></label>
</div>
</div>
<div class="form_row ng-hide" ng-show="displayLargeErrorDiv" style="height:175px">
<div class="form_label">
<label for="Password" class="error_msg ng-binding" role="alert"></label>
</div>
</div>
<div class="form_actions">
<div class="form_action_left ng-hide" ng-show="displayCancel && !displayChooseSecurityQuestionDisplayed" ng-style="{'width': otpDisplayed === true ? '60%' : ''}">
<input type="button" value="Cancel" title="Cancel" class="btn_normal btn_primary" ng-click="goToLogin()">
<input type="button" value="Resend OTP" ng-show="otpDisplayed" ng-disabled="otpDisplayed && !showResendOTPBtn" ng-class="!showResendOTPBtn ? 'btn_grey btn_text_black_color' : ''" title="Resend OTP" class="btn_normal btn_primary ng-hide btn_grey btn_text_black_color" ng-click="sendOTP()">
</div>
<div class="form_action_right" ng-show="userNameDisplayed || passwordDisplayed || confirmPasswordDisplayed || securityQuestionDisplayed || (emailDisplayed && emailValid) || (otpDisplayed && 6==user.otp.length)">
<input type="submit" value="Login" class="btn_normal btn_primary btn_arrow_left" title="Login">
</div>
<br class="clear">
</div>
<div class="form_actions">
<div class="form_action_left" style="width:100%">
<div class="action_link" ng-show="!(displayChooseSecurityQuestionDisplayed || otpDisplayed || emailDisplayed || securityQuestionDisplayed || confirmPasswordDisplayed)">
<a title="Forgot Password?" href="javascript:void(0);" ng-click="forgotPwd()" class="ng-binding">Forgot Password?</a><br>
<a title="Forgot Username?" href="javascript:void(0);" ng-click="forgotUsername()" class="ng-binding">Forgot Username?</a><br>
<!-- <a title="{{'login.ForgottenUsername' | translate}}" href="#ForgotUsername">{{'login.ForgottenUsername' | translate}}</a> -->
</div>
</div>
<br class="clear">
</div>
<div class="ng-modal ng-isolate-scope ng-hide" ng-show="show" show="modalShown" width="70%" height="550px"><div class="login-modal-overlay"></div><div class="ng-modal-dialog" ng-style="dialogStyle" style="width: 70%; height: 550px;"><div class="ng-modal-dialog-content" ng-transclude="">
<div class="popupContent ng-binding ng-scope" ng-bind-html="popupData | toTrusted"></div>
<div class="acceptCheckbox ng-scope">
<input type="button" value="Accept" class="btn_normal btn_primary" ng-click="acceptTerms()">
<input type="button" value="Decline" class="btn_normal btn_primary" ng-click="acceptTermsDeclined()">
</div>
</div></div></div>
<div class="modal ng-hide" ng-show="concurrentUserDisplay" role="dialog" aria-labelledby="concurrentUserMessage">
<div class="modal-content">
<div class="concurrentText ng-binding" id="concurrentText">This user is already logged in to another session. To proceed with a new session, click Proceed.</div>
<div class="modalActions">
<input type="button" value="Proceed" class="btn_normal btn_primary" x-ng-focus="hasConcurrentAccept" id="concurrentAccept" ng-click="acceptConcurrentSession()">
<input type="button" value="Decline" class="btn_normal btn_primary" id="concurrentDecalin" ng-click="concurrentSessionDeclined()">
</div>
</div>
</div>
<div class="modal ng-hide" ng-show="concurrentUserSessionMsg" role="dialog" aria-labelledby="concurrentUserSessionLogoutMessage">
<div class="modal-content">
<div class="concurrentText ng-binding" id="concurrentUserSessionLogoutText">You have been logged out of your current session.</div>
<div class="modalActions">
<input type="button" value="OK" class="btn_normal btn_primary" x-ng-focus="true" id="concurrentUserSessionDisplayMsg" ng-click="concurrentUserSessionLogoutOk()">
</div>
</div>
</div>
<div class="modal ng-hide" ng-show="noticeShown" role="dialog" aria-labelledby="noticeHead noticeText">
<div class="modal-content">
<div class="noticeHead ng-binding" id="noticeHead"></div>
<div class="noticeText ng-binding" id="noticeText"> </div>
<div class="modalActions">
<input type="button" value="Accept" class="btn_normal btn_primary" x-ng-focus="hasNoticeAccept" id="noticeAccept" ng-click="acceptNotice()">
<input type="button" value="Decline" class="btn_normal btn_primary" x-ng-focus="hasNoticeDeclain" id="noticeDecalin" ng-click="declinedNotice()">
</div>
</div>
</div>
<br class="clear" ng-show="!secondQuestionName">
<br class="clear" ng-show="!secondQuestionName">
<br class="clear" ng-show="!secondQuestionName">
<br class="clear" ng-show="!secondQuestionName">
<br class="clear" ng-show="!secondQuestionName">
</fieldset>
</div>
<div class="form_actions">
<br class="clear">
<label ng-show="user.secondQuestionName" style="white-space:nowrap;" class="ng-binding ng-hide">If you have forgotten the answers to your security questions, please contact your Program Administrator.</label>
</div>
</div>
</div>
<!-- </div> -->
<div id="register_panel" class="panel_outer" ng-show="displaySelfReg">
<div class="panel_inner" style="padding-top:0px" ng-show="true">
<h2 class="color_2 ng-binding">No Account? Register now</h2>
<p class="form_intro ng-binding">Enter your details below to start.</p>
<div class="form_container form_items_big">
<fieldset>
<legend class="ng-binding">Self Register Details.</legend>
<div class="form_row">
<div class="form_label">
<label for="register_role" class="ng-binding">Please select your role:</label>
</div>
<!--SSB BART WCAG defect FSIss00023954 Provide a valid label for form fields -->
<div class="form_select">
<select id="register_role" title="Please select your role:" name="userType" ng-model="user.userType" ng-options="userType.name | translate for userType in userTypes" ng-required="userTypeReq" aria-required="true" ng-change="selectUserType(user.userType)" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" required="required"><option value="" class="ng-binding" selected="selected">Select</option><option label="Cardholder" value="object:16">Cardholder</option></select><br>
<label id="self_reg_scr" name="self_reg_scr" class="error ng-binding ng-hide" for="userType" ng-show="userTypeError">Please ensure you have selected a role.</label>
</div>
</div>
<div class="form_actions">
<div class="form_action_right">
<input aria-labelledby="self_reg_scr" type="button" class="btn_normal btn_secondary btn_arrow_left" title="Register" ng-click="initSelfRegistration()" ng-disabled="enableRegister" ng-show="displayRegister" value="Register">
</div>
<br class="clear">
</div>
</fieldset>
</div>
</div>
</div>
</fieldset>
<!--<pre>{{focusField1 | json}}</pre>-->
<div ng-show="isLoading" class="loader ng-hide">
<img id="spinner" ng-src="/UI/styles/images/loader_30px.gif" src="/UI/styles/images/loader_30px.gif">
</div>
</form>
<br class="clear ng-scope">
</div>
</div>
</div>
</div>
<div id="page_footer" class="bg_color_2">
<div class="footer_left">
<div class="footer_nav">
<ul>
<li ng-show="Priv != undefined" class="">
<ul>
<li><!-- ngIf: Priv.contentType == 0 --><a title="Privacy Policy" ng-if="Priv.contentType == 0" href="javascript:void[0]" ng-click="privacylink()" class="ng-binding ng-scope">Privacy Policy</a><!-- end ngIf: Priv.contentType == 0 --></li>
<li><!-- ngIf: Priv.contentType == 1 --></li>
<li><!-- ngIf: Priv.contentType == 2 --></li>
</ul>
</li>
<li ng-show="Sec != undefined" class="">
<ul>
<li><!-- ngIf: Sec.contentType == 0 --><a title="Security" ng-if="Sec.contentType == 0" href="javascript:void[0]" ng-click="Securitylink()" class="ng-binding ng-scope">Security</a><!-- end ngIf: Sec.contentType == 0 --></li>
<li><!-- ngIf: Sec.contentType == 1 --></li>
</ul>
</li>
<li ng-show="Tc != undefined" class="">
<ul>
<li><!-- ngIf: Tc.contentType == 0 --><a title="Terms And Conditions" ng-if="Tc.contentType == 0" href="javascript:void[0]" ng-click="Contactlink()" class="ng-binding ng-scope">Terms And Conditions</a><!-- end ngIf: Tc.contentType == 0 --></li>
<li><!-- ngIf: Tc.contentType == 1 --></li>
</ul>
</li>
<li ng-show="Contact != undefined" class="">
<ul>
<li><!-- ngIf: Contact.contentType == 0 --><a title="Contact Us" ng-if="Contact.contentType == 0" href="javascript:void[0]" ng-click="tclink()" class="ng-binding ng-scope">Contact Us</a><!-- end ngIf: Contact.contentType == 0 --></li>
<li><!-- ngIf: Contact.contentType == 1 --></li>
</ul>
</li>
<li>
<!-- Pure HTML+JS popup for default FAQ -->
<a onclick="openCustomFaqPopup(90, 80)" title="FAQ" href="javascript:void(0);" class="ng-binding">FAQ</a>
</li>
</ul>
<br class="clear">
</div>
<div class="footer_text ng-binding">@ 2024 Fiserv, Inc. or its affiliates.</div>
</div>
<div class="footer_right"></div>
<br class="clear">
</div>
<script src="/UI/dependencies/angular-1.8.2/angular.min.js"></script>
<script src="/UI/dependencies/angular-resource/angular-resource.js"></script>
<script src="/UI/dependencies/angular-route/angular-route.min.js"></script>
<script src="/UI/dependencies/angular-translate-2.5/angular-translate.js"></script>
<script src="/UI/dependencies/angular-translate/angular-translate-loader-static-files.min.js"></script>
<script src="/UI/dependencies/angular-cookies/angular-cookies.js"></script>
<script src="/UI/dependencies/angular-sanitize/angular-sanitize.js"></script>
<script src="/UI/login/app/app.js"></script>
<script src="/UI/login/controllers/login.js"></script>
<script src="/UI/login/controllers/header.js"></script>
<script src="/UI/login/controllers/bottomLinksCtrl.js"></script>
<script src="/UI/login/controllers/self_registration.js"></script>
<script src="/UI/login/controllers/forgot_username.js"></script>
<script src="/UI/login/controllers/forgot_password.js"></script>
<script src="/UI/login/services/services.js"></script>
<script src="/UI/login/router/router.js"></script>
<script src="/UI/login/directives/directive.js"></script>
<script src="/UI/login/general/fontSize.js"></script>
<script src="/Resources/Jscript/Common/popup.js"></script>
<!-- endbuild -->
<script type="text/javascript">
/**
* detect IEEdge
* returns version of IE/Edge or false, if browser is not a Microsoft browser
*/
function detectIEEdge() {
var ua = window.navigator.userAgent;
// IE 10 or older
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
return true;
}
// IE 11
var trident = ua.indexOf('Trident/');
if (trident > 0) {
return true;
}
// other browser
return false;
}
$(function () {
const queryString = window.location.search;
if ((detectIEEdge()) && (queryString.indexOf('ignoreIEDetection') === -1)) {
document.body.innerHTML =
'<div class="blue-border" style="text-align: center">' +
' <img id="theImage" src="../../styles/images/unsupported-browser-image.png" alt="Unsupported Browser" align="center">' +
'</div>';
}
});
</script>
</body></html>