You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Station/www/pages/login.html

156 lines
7.6 KiB
HTML

<div class="modal fade" tabindex="-1" role="dialog" id="pinmodal" data-username="" data-uid="" data-name="">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="fas fa-th"></i> Enter PIN</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<input id="pincode-box" type="text" style="-webkit-text-security: disc;" class="form-control" maxlength="8" pattern="[0-9]*" inputmode="numeric" />
<br />
<div id="main-wrapper">
<div style="width: 60%; margin: 0 auto;">
<div class="row justify-content-center" id="pinpad">
<div class="digits col-4 btn btn-default">
<p>
1
</p>
</div>
<div class="digits col-4 btn btn-default">
<p>
2
</p>
</div>
<div class="digits col-4 btn btn-default">
<p>
3
</p>
</div>
<div class="digits col-4 btn btn-default">
<p>
4
</p>
</div>
<div class="digits col-4 btn btn-default">
<p>
5
</p>
</div>
<div class="digits col-4 btn btn-default">
<p>
6
</p>
</div>
<div class="digits col-4 btn btn-default">
<p>
7
</p>
</div>
<div class="digits col-4 btn btn-default">
<p>
8
</p>
</div>
<div class="digits col-4 btn btn-default">
<p>
9
</p>
</div>
<div class="digits col-4 btn btn-danger">
<p>
<i class="fas fa-angle-double-left"></i>
</p>
</div>
<div class="digits col-4 btn btn-default">
<p>
0
</p>
</div>
<div class="digits col-4 btn btn-success">
<p id="pin-action">
<i class="fas fa-arrow-right"></i>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal" onclick="$('#pincode-box').val('');">Cancel</button>
</div>
</div>
</div>
</div>
<div class="container" style="height: 100%;">
<div class="row justify-content-center" style="height: 100%;">
<div class="col-12 col-sm-10 col-md-8 col-lg-8 col-xl-8">
<div class="card" style="width: 100%;">
<h3 class="card-header"><i class="fas fa-lock"></i> Login</h3>
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#userlist" id="quickaccess_tab">Quick Access</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#userpass" id="userpass_tab">Username/Password</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#mobilecode">Mobile Code</a>
</li>
</ul>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade active show" id="userlist">
<div class="row justify-content-around">
</div>
</div>
<div class="tab-pane fade" id="userpass">
<form id="userpass_form">
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-user"></i></span>
</div>
<input type="text" class="form-control" id="username" placeholder="Username" />
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="text" style="-webkit-text-security: disc;" class="form-control" id="password" placeholder="Password" />
</div>
<br />
<button type="submit" class="btn btn-primary" id="userpassloginbtn">Log In</button>
</form>
</div>
<div class="tab-pane fade" id="mobilecode">
<div class="alert alert-info">Open the Business app on your phone, <br />then press the <i class="fas fa-desktop"></i> button to get a code.</div>
<form id="mobilecode_form">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">B -</span>
</div>
<input type="text" class="form-control" id="code" placeholder="123456" />
</div>
<br />
<button type="submit" class="btn btn-primary" id="mobilecodeloginbtn">Log In</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/login.js"></script>
<script src="assets/js/jdenticon.min.js"></script>