Scribd
Upload
20 views4 pages

Codigo

Uploaded by

Albert Carruido
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views4 pages

Codigo

Uploaded by

Albert Carruido
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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