Scribd
Upload
15 views

Codigo

Uploaded by

Albert Carruido
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Codigo

Uploaded by

Albert Carruido
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.2/css/all.min.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css'
rel='stylesheet'>
<link rel="stylesheet" href="{% static '/styles/home.css' %}">
<link rel="shortcut icon" href="{% static '/img/Login-shortcut.png' %}" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<title>Login Page</title>
</head>

<body>
<div class="container" id="container">
<div class="form-container sign-up">
<div class="btn-box">
<button class="btn" id="sign-in-btn2">
Sign in
</button>
</div>
<form method="POST" id="form-sign-up">
{% csrf_token %}
<h1>Create Account</h1>
<div class="social-icons">
<a href="#" class="icon"><i class="fa-brands fa-
google"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-facebook-
f"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-
github"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-linkedin-
in"></i></a>
</div>
<span>or use your email for registeration</span>
<div class="form-inputs">
<div class="input-box">
<input type="text" name="username_s" id="username_s"
class= "input-field" required>
<i class="bx bx-user icon"></i>
<label>Name</label>
</div>
<div class="input-box">
<input type="email" name="email_s" id="email_s" class=
"input-field" required>
<i class="bx bx-envelope icon"></i>
<label>Email</label>
</div>
<div class="input-box">
<input type="password" name="password_s"
id="password_s" class= "input-field" required>
<i class="bx bx-lock-alt icon"></i>
<label>Password</label>
</div>
</div>
<button type="submit" value="form_s" name="form">Sign
Up</button>
</form>
</div>
<div class="form-container sign-in">
<div class="btn-box">
<button class="btn" id="sign-up-btn2">
Sign up
</button>
</div>
<form method="POST" id="form-sign-in">
{% csrf_token %}
<h1>Sign In</h1>
<div class="social-icons">
<a href="#" class="icon"><i class="fa-brands fa-
google"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-facebook-
f"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-
github"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-linkedin-
in"></i></a>
</div>
<span>or use your email password</span>
<div class="form-inputs">
<div class="input-box">
<input type="email" name="email_l" id="email_l" class=
"input-field" required>
<i class="bx bx-envelope icon"></i>
<label>Email</label>
</div>
<div class="input-box">
<input type="password" name="password_l"
id="password_l" class= "input-field" required>
<i class="bx bx-lock-alt icon"></i>
<label>Password</label>
</div>
</div>

<a href="#" class="forgot-password">Forgot Your Password?</a>


<button type="submit" name="form" value="form_l">Sign
In</button>
</form>
</div>
<div class="toggle-container">
<div class="toggle">
<div class="toggle-panel toggle-left">
<h1>Welcome Back!</h1>
<p>Enter your personal details to use all of site
features</p>
<button class="hidden" id="login">Sign In</button>
</div>
<div class="toggle-panel toggle-right">
<h1>Hello, Friend!</h1>
<p>Register with your personal details to use all of site
features</p>
<button class="hidden" id="register">Sign Up</button>
</div>
</div>
</div>
</div>

<script src="{% static '/scripts/script.js' %}"></script>


<script type="text/javascript">
$(document).ready(function(){
$('#form-sign-up').on('submit', function(e) {
e.preventDefault();
$.ajax({
type:'POST',
url: '{% url 'sign_methods' %}',
data: {
username_s: $('#username_s').val(),
email_s: $('#email_s').val(),
password_s: $('#password_s').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]
').val(),
form:'form_s'},
dataType:'json',
success: function(data){
if (data.msg==='success'){
window.location = '{% url 'account_verify' %}'
}
},
error: function(response) {
alert(response["responseJSON"]["error"]);
}
});
});
$('#form-sign-in').on('submit', function(e) {
e.preventDefault();
$.ajax({
type:'POST',
url: '{% url 'sign_methods' %}',
data: {
email_s: $('#email_s').val(),
password_s: $('#password_s').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').v
al(),
form:'form_s'},
dataType:'json',
success: function(data){
if (data.msg==='success1'){
window.location = '{% url 'login_successfull' %}'
} else if (data.msg==='success2'){
window.location = '{% url 'account_verify' %}'
}
},
error: function(response) {
alert(response["responseJSON"]["error"]);
}
});
});
});
</script>
</body>

</html>

You might also like