@opengovsg/mockpass
Version:
A mock SingPass/CorpPass server for dev purposes
285 lines (277 loc) • 24.2 kB
HTML
<html lang="en">
<head>
<!-- <meta charset="utf-8"> -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="MockPass is a mock SingPass/CorpPass server for dev purposes.">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Web Starter Kit">
<link rel="icon" type="img/ico" href="/mockpass/resources/img/favicon.ico">
<title>MockPass Login</title>
<link rel="stylesheet" type="text/css" href="/mockpass/resources/plugins/bootstrap-3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" media="all">
<link rel="stylesheet" type="text/css" href="/mockpass/resources/css/style-main.css" media="all">
<link rel="stylesheet" type="text/css" href="/mockpass/resources/css/common.css" media="all">
<link rel="stylesheet" type="text/css" href="/mockpass/resources/css/animate.css" media="all">
<script src="/mockpass/resources/js/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="/mockpass/resources/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script type="text/javascript" src="/mockpass/resources/js/login-common.js"></script>
</head>
<body>
<div class="homepagebody-wrapper">
<div class="sp-img-bg">
<div class="container-wrapper-header">
<div class="announcement-container" >
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="row">
<div class="alert alert-info alert-labeled">
<div class="alert-labeled-row">
<span class="alert-label alert-label-left alert-labelled-cell"></span>
<p class="alert-body alert-body-right alert-labelled-cell">
<span class="announcement-title">Advisory Note</span>
<br/>
<span class="announcement-body">
Your MockPass account contains a lot of personal data. Do not share your username, password and 2FA details with anyone.
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="mainHeaderContainer container hidden-xs hidden-sm hidden-md">
<div class="mockpass-logo-container pull-left"> <a title="MockPass" aria-label="MockPass" class="mockpass-logo">MockPass</a> </div>
<div class="placeholder-logo-container pull-right hidden-xs">
<a target="_blank" rel="noopener noreferrer" class="placeholder-logo" title="MockPass" aria-label="MockPass">MockPass</a>
</div>
<div class="header-links hidden-xs">
<div class="header-utility pull-left">
<ul>
<li><a id="font-small" title="Decrease the font size" aria-label="Decrease the font size"><i class="icon font-size font-small-black"></i></a></li>
<li><a id="font-default" title="Reset the font size" aria-label="Reset the font size"><i class="icon font-size font-default-black"></i></a></li>
<li><a id="font-large" title="Increase the font size" aria-label="Increase the font size" ><i class="icon font-size font-large-black"></i></a></li>
<li><a title="Print this page" aria-label="Print this page"><i class="icon printer-icon-black"></i></a></li>
</ul>
</div>
<ul>
<li class="isicon"><a class="li-links">Contact Us</a></li>|
<li class="isicon"><a class="li-links">Feedback</a></li>|
<li class="isicon"><a class="li-links" >Sitemap</a></li>|
<li class="isicon"><a class="li-links">FAQ</a></li>
<li><a id="searchIcon" title="Search within MockPass" aria-label="Search within MockPass" class="search-icon-black search-form-tigger" data-toggle="search-form"></a></li>
</ul>
</div>
<div class="search-form-wrapper">
<div id="searchFormDiv" class="search-form-div">
<form class="search-form">
<div class="input-group">
<input type="text" id="searchtxt" name="search" autocomplete="off" class="search form-control" placeholder="Search">
<span id="searchFormSubmitBtn" class="input-group-addon" style="font-size: 17px;"><i class="fa fa-search" aria-hidden="true"></i></span>
<span class="input-group-addon search-close" style="font-size: 19px;"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
</div>
</form>
</div>
</div>
</div>
<div id="mySidenav" class="sidenav hidden-lg">
<a class="closebtn" data-toggle="nav-toggle"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
<div class="mNavigation_container">
<a class="mNavigation_title">Home</a>
<a class="mNavigation_title">About Us</a>
<div class="mNavigation_title mDropdown">My Account<span class="plusminus">+</span></div>
<div class="mNavigation_body" style="display: none;">
<a class="mNavigation_title">Update Profile</a>
<a class="mNavigation_title">Change Password</a>
<a class="mNavigation_title">View History</a>
<a class="mNavigation_title">Set up 2FA</a>
<a class="mNavigation_title">Visit MyInfo</a>
</div>
<div class="mNavigation_title mDropdown">Services<span class="plusminus">+</span></div>
<div class="mNavigation_body" style="display: none;">
<a class="mNavigation_title">Register for MockPass</a>
<a class="mNavigation_title">Check Status</a>
<a class="mNavigation_title">Reset Password</a>
<a class="mNavigation_title">Forgot MockPass ID</a>
</div>
<a class="mNavigation_title">Help and FAQ</a>
<a class="mNavigation_title">Instructional Guides</a>
<a class="mNavigation_title">Counter Locations</a>
<a class="mNavigation_title">News</a>
<a class="mNavigation_title">Contact Us</a>
<a class="mNavigation_title">Sitemap</a>
</div>
</div>
<div id="mobile-header" class="hidden-lg">
<span style="font-size:30px; cursor:pointer; float:left" data-toggle="nav-toggle"><i class="fa fa-bars" aria-hidden="true"></i></span>
<span class="mobile-mockpass-logo visible-xs visible-xs visible-sm visible-md hidden-lg" title="MockPass" aria-label="MockPass"></span>
</div>
</div>
<div class="container-wrapper-navigator">
<div class="container-navigator">
<nav class="navbar sidebar hidden-xs hidden-sm hidden-md visible-lg" role="navigation">
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="aboutuslist sidebarlist"><a class="listtitle" title="About MockPass" aria-label="About MockPass" >About Us<span class="hidden-xs showopacity sidebar-aboutusIcon"></span></a></li>
<li class="faqlist sidebarlist"><a class="listtitle" title="Frequently Asked Questions (FAQ)" aria-label="Frequently Asked Questions (FAQ)" >FAQ<span class=" hidden-xs showopacity sidebar-faqIcon"></span></a></li>
<li class="instructvideolist sidebarlist"><a class="listtitle" title="Instructional Guides for MockPass" aria-label="Instructional Guides for MockPass" >Instructional Guides<span class="hidden-xs showopacity sidebar-videoIcon"></span></a></li>
<li class="counterlocationlist sidebarlist"><a class="listtitle" title="MockPass Counter Locations" aria-label="MockPass Counter Locations" >Counter Locations<span class="hidden-xs showopacity sidebar-counterlocationIcon"></span></a></li>
<li class="newslist sidebarlist"><a class="listtitle" title="News about MockPass" aria-label="News about MockPass" >News<span class="hidden-xs showopacity sidebar-newsIcon"></span></a></li>
<li class="contactuslist sidebarlist"><a class="listtitle" title="Contact MockPass" aria-label="Contact MockPass" >Contact Us<span class="hidden-xs showopacity sidebar-contactusIcon"></span></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="page-content">
<div class="homepagebody-container">
<div class="loginbtn-container visible-xs visible-sm visible-md">
<div class="login-button">
<button id="loginModelbtn" class="btn btn-primary btn-lg btn-login" data-toggle="modal" data-target="#myModalHorizontal" onclick="showLoadTab()">Login <i class="fa fa-lock" aria-hidden="true"></i></button>
</div>
</div>
<div class="container visible-lg">
<div class="login-button">
<button id="loginModelbtn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal" onclick="showLoadTab()">Login <i class="fa fa-lock" aria-hidden="true"></i></button>
</div>
</div>
<div id="myModalHorizontal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="homepageLogin modal-dialog">
<div class="login-modal-content" style="overflow: visible">
<div class="login-form-body">
<span id="sp-mobile-tooltip" class="sp-mobile-tooltip ani-rotate">Click here to log in with MockPass Mobile app</span>
<ul class="final-login">
<li id="loginli" class="logintab active">
<a title="Login" aria-label="Login" data-toggle="tab" href="#sectionA"></a>
</li>
<li id="qrcodeloginli" class="qrtab">
<a title="MockPass Mobile" aria-label="MockPass Mobile"></a>
</li>
</ul>
<div class="white-area"></div>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class="innter-form">
<form id="login" name="LoginForm" class="innate-form" method="post">
<div id="LoginForm">
<div class="login-label">Log in</div>
<br>
<div class="dropdown" style="width: 100%; ">
<input id="id-input" list="id-datalist" class="btn btn-secondary dropdown-toggle" oninput="redirectID()" placeholder= "Select Username" style="width: 100%; border: 2px solid #ccc; border-radius: 5px; background: white; color: rgb(42, 45, 51); text-align: left;">
<datalist class="dropdown-menu" id="id-datalist" aria-labelledby="id-input" >
{{#values}}
<option value="{{ id }}" data-asserturl="{{ assertURL }}">{{ id }}</option>
{{/values}}
</datalist>
</div>
</div>
<div>
<input type="hidden" name="CSRFToken" value="null" />
</div>
</form>
{{#customProfileConfig}}
<form action="{{endpoint}}" class="innate-form" method="get">
<br>
<h6>or with your own user</h6>
<br>
<label for="nric">NRIC</label>
<input type="text" name="nric" id="nric" value="S1234567A" minlength="9" maxlength="9">
{{#showUuid}}
<label for="uuid">UUID</label>
<input type="text" name="uuid" id="uuid" value="ef39a074-b64d-4990-a937-6f80772e2bb8" minlength="36" maxlength="36">
{{/showUuid}}
{{#showUen}}
<label for="uen">UEN</label>
<input type="text" name="uen" id="uen" value="123456789D" minlength="9" maxlength="10">
{{/showUen}}
{{#assertEndpoint}}<input type="hidden" name="assertEndpoint" value="{{ assertEndpoint }}" />{{/assertEndpoint}}
{{#redirectURI}}<input type="hidden" name="redirectURI" value="{{ redirectURI }}" />{{/redirectURI}}
{{#relayState}}<input type="hidden" name="relayState" value="{{ relayState }}" />{{/relayState}}
{{#state}}<input type="hidden" name="state" value="{{ state }}" />{{/state}}
{{#nonce}}<input type="hidden" name="nonce" value="{{ nonce }}" />{{/nonce}}
<button autofocus="" type="submit">Login</button>
<br>
</form>
{{/customProfileConfig}}
<br>
<div class="login__footer">
<div class="login-note">
Forgot <a aria-label="Forgot MockPass ID">MockPass ID</a> or <a aria-label="Forgot password">password</a>?
</div>
<div class="sp-reglink">
Don't have an account? <a aria-label="Register now">Register now</a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-container">
<div class="container">
<div id="Carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-3"><a class="thumbnail regsp-icon" title="Register for a MockPass account" aria-label="Register for a MockPass account"></a></div>
<div class="col-xs-4 col-sm-3 col-sm-3 col-lg-3"><a class="thumbnail updateAcctDetails-icon" title="Update your MockPass account details" aria-label="Update your MockPass account details" data-toggle="modal" data-target="#myModalHorizontal" ></a></div>
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-3"><a class="thumbnail resetpwd-icon" title="Reset your MockPass password" aria-label="Reset your MockPass password"></a></div>
<div class="hidden-xs col-sm-3 col-sm-3 col-lg-3"><a class="thumbnail setUp2Step2FA-icon" title="Set up your MockPass Two-Factor Authentication (2FA)" aria-label="Set up your MockPass Two-Factor Authentication (2FA)" data-toggle="modal" data-target="#myModalHorizontal"></a></div>
</div>
<div class="item">
<div class="col-xs-4 hidden-sm hidden-md hidden-lg"><a class="thumbnail setUp2Step2FA-icon" title="Set up your MockPass Two-Factor Authentication (2FA)" aria-label="Set up your MockPass Two-Factor Authentication (2FA)" data-toggle="modal" data-target="#myModalHorizontal"></a></div>
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-3"><a title="Check your MockPass application status" aria-label="Check your MockPass application status" class="thumbnail checkapplication-icon"></a></div>
<div class="col-xs-4 col-sm-3 col-sm-3 col-lg-3"><a class="thumbnail changePwd-icon" title="Change your MockPass password" aria-label="Change your MockPass password" data-toggle="modal" data-target="#myModalHorizontal"></a></div>
<div class="hidden-xs col-sm-3 col-sm-3 col-lg-3"><a class="thumbnail viewTransactionHistory-icon" title="View your MockPass transaction history" aria-label="View your MockPass transaction history" data-toggle="modal" data-target="#myModalHorizontal"></a></div>
<div class="hidden-xs col-sm-3 col-sm-3 col-lg-3"><a class="thumbnail myinfo-icon" title="Visit MyInfo Portal" aria-label="Visit MyInfo Portal"></a></div>
</div>
<div class="item">
<div class="col-xs-4 hidden-sm hidden-md hidden-lg"><a class="thumbnail viewTransactionHistory-icon" title="View your MockPass transaction history" aria-label="View your MockPass transaction history" data-toggle="modal" data-target="#myModalHorizontal"></a></div>
<div class="col-xs-4 hidden-sm hidden-md hidden-lg"><a title="Visit MyInfo Portal" aria-label="Visit MyInfo Portal" class="thumbnail myinfo-icon"></a></div>
<div class="col-xs-4 col-sm-12 col-md-12 col-lg-12"><a class="thumbnail retrieveid-icon" title="Retrieve your MockPass user ID" aria-label="Retrieve your MockPass user ID"></a></div>
</div>
</div>
<!-- carousel-control -->
<a title="Carousel previous" aria-label="Carousel previous" data-slide="prev" class="left carousel-control glyphicon glyphicon-triangle-left"></a>
<a title="Carousel next" aria-label="Carousel next" data-slide="next" class="right carousel-control glyphicon glyphicon-triangle-right"></a>
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
<div class="container-wrapper-footer">
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="footer-terms-condition"> <a>Privacy Statement</a> | <a>Terms of Use</a> | <a>Rate This Website</a> </div>
</div>
<div class="col-md-6 col-lg-6 hidden-xs hidden-sm">
<div class="footer-copyright">Last updated on 13 January 2019 © 2018 MockPass</div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs visible-sm">
<div class="footer-copyright">Last updated on 13 January 2019</div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs visible-sm">
<div class="footer-copyright">© 2018 MockPass</div>
</div>
</div>
</div>
</div>
</body>
</html>