175 lines
10 KiB
HTML
175 lines
10 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Fingerprint Service</title>
|
||
|
|
<script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>
|
||
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||
|
|
<style>
|
||
|
|
.disabledbutton {
|
||
|
|
pointer-events: none;
|
||
|
|
opacity: 0.4;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="font-size: 14px; font-family: 'Segoe UI';">
|
||
|
|
<div class="container" id="app">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<div style="margin-top: 100px;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<h1>
|
||
|
|
UNICAL Biometrics Enrolment Wizard
|
||
|
|
</h1>
|
||
|
|
<hr />
|
||
|
|
<div v-if="step > 0" style="text-align: right">
|
||
|
|
<span style="cursor: pointer;" v-on:click="newEnrolment">+ New
|
||
|
|
Enrolment</span> •
|
||
|
|
<span>~{{user.username.substring(7)}}</span> • <span v-on:click='logout'
|
||
|
|
style="cursor: pointer; font-weight: bold;">Logout</span>
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
<div v-if="step == 0">
|
||
|
|
<div style="background-color: whitesmoke; margin-left: auto; margin-right: auto; padding: 10px;">
|
||
|
|
<form class="form" style="padding: 20px;">
|
||
|
|
<h3>Agent Login</h3>
|
||
|
|
<br />
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Phone Number</label>
|
||
|
|
<input type="text" v-model="phone" class="form-control" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>One Time Password</label>
|
||
|
|
<input type="password" v-model="otp" class="form-control" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="btn btn-success btn-block" v-bind:class="{ disabledbutton: busy.login || !phone || !otp }"
|
||
|
|
v-on:click="login">
|
||
|
|
<span v-if="!busy.login">Login</span>
|
||
|
|
<span v-else>Please wait...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group" v-if="errorMessage">
|
||
|
|
<div class="alert alert-danger">{{errorMessage}}</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="step >= 1">
|
||
|
|
<div v-if="step == 1.0">
|
||
|
|
<form class="form" style="padding: 20px;">
|
||
|
|
<h3>New Profile Enrollment</h3>
|
||
|
|
<br />
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Reference Number</label>
|
||
|
|
<input type="text" v-model="staff.reference" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>OTP</label>
|
||
|
|
<input type="text" v-model="otp" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="btn btn-success" v-bind:class="{ disabledbutton: busy.login || !staff.reference || !otp }"
|
||
|
|
v-on:click="loadUserByReference">
|
||
|
|
<span v-if="!busy.login">Get Details</span>
|
||
|
|
<span v-else>Please wait...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div v-if="step >= 1.1">
|
||
|
|
<form class="form form-horizontal" style="padding: 20px;">
|
||
|
|
<h3>Enroll Profile</h3>
|
||
|
|
<br />
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Reference Number</label>
|
||
|
|
<input type="text" readonly v-model="staff.reference" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Name</label>
|
||
|
|
<input type="text" readonly v-model="staff.name" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Reference</label>
|
||
|
|
<input type="text" readonly v-model="staff.domainReference" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Rank</label>
|
||
|
|
<input type="text" readonly v-model="staff.domainRankDescription" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Total Fingerprint Enrollment(s)</label>
|
||
|
|
<input type="text" readonly v-model="staff.fingerPrintCaptureCount" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group" v-if="step >= 1.1">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Finger</label>
|
||
|
|
<input type="text" readonly value="Right Thumb" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group" v-if="fingerDetails['right-thumb'].id">
|
||
|
|
<label>Enrolment ID</label>
|
||
|
|
<input type="text" readonly v-model="fingerDetails['right-thumb'].id" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="btn btn-success" style="display: inline" v-if="!fingerDetails['right-thumb'].id" v-bind:class="{ disabledbutton: busy.login }"
|
||
|
|
v-on:click="() => { captureFingerPrint('right-thumb') }">
|
||
|
|
<span v-if="!busy.login">Capture Fingerprint</span>
|
||
|
|
<span v-else>Please wait...</span>
|
||
|
|
</div>
|
||
|
|
<div class="btn btn-warning" style="display: inline" v-if="fingerDetails['right-thumb'].id" v-bind:class="{ disabledbutton: busy.login }"
|
||
|
|
v-on:click="() => { captureFingerPrint('right-thumb') }">
|
||
|
|
<span v-if="!busy.login">Recapture Fingerprint</span>
|
||
|
|
<span v-else>Please wait...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Finger</label>
|
||
|
|
<input type="text" readonly value="Right Index Finger" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group" v-if="fingerDetails['right-index-finger'].id">
|
||
|
|
<label>Enrolment ID</label>
|
||
|
|
<input type="text" readonly v-model="fingerDetails['right-index-finger'].id" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="btn btn-success" style="display: inline" v-if="!fingerDetails['right-index-finger'].id" v-bind:class="{ disabledbutton: busy.login }"
|
||
|
|
v-on:click="() => { captureFingerPrint('right-index-finger') }">
|
||
|
|
<span v-if="!busy.login">Capture Fingerprint</span>
|
||
|
|
<span v-else>Please wait...</span>
|
||
|
|
</div>
|
||
|
|
<div class="btn btn-warning" style="display: inline" v-if="fingerDetails['right-index-finger'].id" v-bind:class="{ disabledbutton: busy.login }"
|
||
|
|
v-on:click="() => { captureFingerPrint('right-index-finger') }">
|
||
|
|
<span v-if="!busy.login">Recapture Fingerprint</span>
|
||
|
|
<span v-else>Please wait...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Your profile has <span style="color: red; font-weight: bold;" v-if="!staff.verified">NOT </span>been verified. -->
|
||
|
|
</div>
|
||
|
|
<div v-if="fingerDetails['right-thumb'].id && fingerDetails['right-index-finger'].id">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>OTP</label>
|
||
|
|
<input type="text" v-model="otp" class="form-control" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="btn btn-success" v-bind:class="{ disabledbutton: busy.login || !otp }"
|
||
|
|
v-on:click="saveFingerPrint">
|
||
|
|
<span v-if="!busy.login">Save Finger Print</span>
|
||
|
|
<span v-else>Please wait...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- production version, optimized for size and speed -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
||
|
|
<script src="/assets/app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|