77 lines
2.8 KiB
HTML
77 lines
2.8 KiB
HTML
<style>
|
|
.otp-stepper {display:inherit;}
|
|
.otp-stepper .stepper-item {display:flex;color:#b2b6b9;}
|
|
.otp-stepper .stepper-item.active { color: #3899ec; }
|
|
.otp-stepper .stepper-item.active .bullet { background-color: #3899ec; border: 1px solid #3899ec; color: #FFF;}
|
|
.otp-stepper .stepper-item .bullet {
|
|
background-color: #b2b6b9; border: 1px solid #b2b6b9; color: #fff;
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
font-weight: var(--wsr-font-weight-regular, 400);
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 12px;
|
|
}
|
|
</style>
|
|
<div class="row">
|
|
<div class="col-sm-12 otp-stepper">
|
|
<span id="stepperRequest" class="stepper-item active"><span class="bullet">1</span> <th:block th:text="#{lbl.otp.request}" /> <span class="material-icons">keyboard_arrow_right</span></span>
|
|
<span id="stepperVerify" class="stepper-item"><span class="bullet">2</span> Verify Passcode</span>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h6 id="otpErrorMsg"></h6>
|
|
<div id="requestPasscode">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<p>We will send you a <strong>One Time Passcode</strong> on your registered contact information below:</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<span class="material-icons mr-3">email</span><th:block th:text="${email}" />
|
|
</div>
|
|
</div>
|
|
<div class="row" th:if="${mobile}">
|
|
<div class="col-sm-12">
|
|
<span class="material-icons mr-3">phonelink_ring</span><th:block th:text="${mobile}" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 text-right">
|
|
<button id="cancel" data-dismiss="modal" class="btn btn-round" th:text="#{btn.lbl.cancel}"></button>
|
|
<button id="generateOtp" class="btn btn-primary btn-round float-right" th:text="#{lbl.otp.get}"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="verifyPasscode">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<p>Enter the 6-digit <strong>One Time Passcode</strong> sent to your email <th:block th:text="${email}" />.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row otp-input">
|
|
<div class="col-sm-12">
|
|
<div class="form-group">
|
|
<label for="otpCode" class="required bmd-label-floating" th:text="#{lbl.otp.enter}" />
|
|
<input type="text" class="form-control" id="otpCode" maxlength="6" required="required" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 text-right">
|
|
<button id="cancel" data-dismiss="modal" class="btn btn-round" th:text="#{btn.lbl.cancel}"></button>
|
|
<button id="validateOtp" class="btn btn-primary btn-round" th:text="#{lbl.otp.validate}"></button>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-2">
|
|
<div class="col-sm-12">
|
|
Note: Your code will expire after <span id="otpTimerDisplay"></span> minutes.
|
|
<!--/* <label id="otpGenMsg" class="errors">lbl.otp.expiry</label> */-->
|
|
</div>
|
|
</div>
|
|
</div> |