addwin/wallet
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new login form

Browse source
This commit is contained in:
mahdavi 2022-09-03 15:43:08 +04:30
parent 9d263fc2d7
commit c2f49c9497
2 changed files with 132 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
templates/include/messages.html Normal file
View file

@ -0,0 +1,9 @@
{% if messages %}
{% for message in messages %}
{# <li{% if message.tags %} class="{{ message.tags }}"{% endif %}></li>#}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<span> {{ message }} </span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}

165
templates/registration/login.html Normal file → Executable file
View file

@ -1,53 +1,134 @@
{% extends "base_generic.html" %}
{% load static %}
{% block content %}
<!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 'login' %}">
{% csrf_token %}
{% if form.errors %}
<p>Your phone number and otp didn't match. Please try again.</p>
{% endif %}
{% if next %}
{% if user.is_authenticated %}
<p>Your account doesn't have access to this page. To proceed,
please login with an account that has access.</p>
{% else %}
<p>Please login to see this page.</p>
{% endif %}
{% endif %}
<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>
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<table>
<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>
<tr>
<td>{{ form.phone_number.label_tag }}</td>
<td>{{ form.phone_number }}</td>
<td id="request-otp"><a class="btn btn-default">requet otp</a></td>
<td id="otp-result"></td>
</tr>
<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>
<tr>
<td>{{ form.otp.label_tag }}</td>
<td>{{ form.otp }}</td>
</tr>
</table>
<input type="submit" value="login"/>
<input type="hidden" name="next" value="{{ next }}"/>
</form>
</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>')
}
<script>
$("#request-otp").click(
function () {
var phoneNumber = $('#id_phone_number')[0].value;
$("#request-otp").click(
function () {
console.log('otp requested')
var phoneNumber = $('#id_phone_number')[0].value;
console.log(phoneNumber)
$.post("/request_otp/",{'phone_number': phoneNumber},function (result) {
console.log(result);
$("#otp-result")[0].innerHTML = 'otp expire: ' + result['otp_expire'] ;
});
}
);
var phoneNumberRegex = new RegExp('^(\\+98|0)?9\\d{9}$');
</script>
//if (phoneNumberRegex.test(phoneNumber)) {
var data = {'phone_number': phoneNumber}
//} else {
// var data = {'username': mobileNumberOrUsername}
//}
{% endblock %}
$.post("/request_otp/", 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>