134 lines
5.7 KiB
HTML
Executable file
134 lines
5.7 KiB
HTML
Executable file
{% load static %}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Login</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-5.1.3-dist/css/bootstrap.min.css' %}">
|
|
<link href="{% static 'bootstrap-icons-1.7.2/bootstrap-icons.css' %}" rel="stylesheet">
|
|
<script src="{% static 'jquery-3.6.0.min.js' %}"></script>
|
|
<script src="{% static 'bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js' %}"></script>
|
|
<link rel="stylesheet" type="text/css" href="{% static 'login/css/util.css' %}">
|
|
<link rel="stylesheet" type="text/css" href="{% static 'login/css/main.css' %}">
|
|
<link href="{% static 'fonts.css' %}" rel="stylesheet">
|
|
<link href="{% static 'main.css' %}" rel="stylesheet">
|
|
<!--===============================================================================================-->
|
|
</head>
|
|
<body>
|
|
<div class="limiter">
|
|
<div class="container-login100">
|
|
<div class="wrap-login100 p-t-50 p-b-90">
|
|
{# <div class="text-center pb-5">#}
|
|
{# <img src="{% static 'image/arian_saeed.png' %}" class="img-fluid">#}
|
|
{# </div>#}
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<form class="login100-form validate-form flex-sb flex-w" method="post" action="{% url 'users:login' %}">
|
|
{% csrf_token %}
|
|
|
|
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span>
|
|
<input id="id_phone_number"
|
|
name="phone_number" type="text" class="form-control"
|
|
placeholder="Mobile or Username" aria-label="Username"
|
|
aria-describedby="basic-addon1">
|
|
<button class="btn btn-primary" type="button" id="request-otp">OTP
|
|
</button>
|
|
</div>
|
|
<div class="wrap-input100 validate-input m-b-16">
|
|
<div class="progress">
|
|
<div id="ttl" class="progress-bar" role="progressbar" style="width: 0%;"
|
|
aria-valuenow="300"
|
|
aria-valuemin="0"
|
|
aria-valuemax="300">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text" id="basic-addon2"><i class="bi bi-lock-fill"></i></span>
|
|
<input type="password" name="otp" placeholder="OTP" class="form-control"
|
|
aria-label="OTP"
|
|
aria-describedby="basic-addon2">
|
|
</div>
|
|
|
|
<div class="row-cols-auto col text-center">
|
|
<button class="btn btn-block btn-primary text-center w-50">
|
|
ورود
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="text-center mt-3" dir="rtl">
|
|
{% include "include/messages.html" %}
|
|
<div class="" id="alert_placeholder"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
bootstrap_alert = function () {
|
|
}
|
|
bootstrap_alert.warning = function (message) {
|
|
$('#alert_placeholder').html('<div class="alert alert-warning alert-dismissible fade show"><span>' + message + '</span></div>')
|
|
}
|
|
bootstrap_alert.info = function (message) {
|
|
$('#alert_placeholder').html('<div class="alert alert-info alert-dismissible fade show"><span>' + message + '</span></div>')
|
|
}
|
|
|
|
$("#request-otp").click(
|
|
function () {
|
|
console.log('otp requested')
|
|
var phoneNumber = $('#id_phone_number')[0].value;
|
|
console.log(phoneNumber)
|
|
|
|
var phoneNumberRegex = new RegExp('^(\\+98|0)?9\\d{9}$');
|
|
|
|
//if (phoneNumberRegex.test(phoneNumber)) {
|
|
var data = {'phone_number': phoneNumber}
|
|
//} else {
|
|
// var data = {'username': mobileNumberOrUsername}
|
|
//}
|
|
|
|
$.post("{% url 'users:request_otp_api' %}", data).done(
|
|
function (result) {
|
|
console.log(result);
|
|
if (result.hasOwnProperty('ttl')) {
|
|
|
|
bootstrap_alert.info('رمز یکبار مصرف ارسال شد');
|
|
$("#request-otp").prop('disabled', true)
|
|
|
|
|
|
var i = result['ttl'];
|
|
var counterBack = setInterval(function () {
|
|
i--;
|
|
if (i >= 0) {
|
|
document.getElementById("ttl").style.width = (i + 1) / 3 + "%";
|
|
} else {
|
|
$("#request-otp").prop('disabled', false)
|
|
document.getElementById("ttl").style.width = "0%";
|
|
clearTimeout(counterBack);
|
|
}
|
|
|
|
}, 1000);
|
|
} else {
|
|
console.log(result)
|
|
}
|
|
|
|
}
|
|
).fail(function (result) {
|
|
bootstrap_alert.warning(result.responseJSON[Object.keys(result.responseJSON)[0]]);
|
|
console.log(result.responseJSON)
|
|
});
|
|
}
|
|
);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|