style: update login pages

This commit is contained in:
2025-10-29 12:01:35 +13:00
parent b7e1dac66a
commit 15809a4ccf
12 changed files with 431 additions and 176 deletions

View File

@ -135,9 +135,12 @@ def register(request):
context = get_base_context(request) context = get_base_context(request)
if request.method == "GET": if request.method == "GET":
context["title"] = "enviPath" # Redirect to unified login page with signup tab
context["next"] = request.GET.get("next", "") next_url = request.GET.get("next", "")
return render(request, "static/register.html", context) redirect_url = reverse("login") + "#signup"
if next_url:
redirect_url += f"?next={next_url}"
return redirect(redirect_url)
elif request.method == "POST": elif request.method == "POST":
context["title"] = "enviPath" context["title"] = "enviPath"
if next := request.POST.get("next"): if next := request.POST.get("next"):

View File

@ -162,8 +162,7 @@
</li> </li>
{% if meta.user.username == 'anonymous' %} {% if meta.user.username == 'anonymous' %}
<li> <li>
<a href="#signup" id="loginButton" data-toggle="modal" data-target="#signupmodal" <a href="{% url 'login' %}" id="loginButton" style="margin-right:10px">Login</a>
style="margin-right:10px">Login</a>
</li> </li>
{% else %} {% else %}
<li class="dropdown"> <li class="dropdown">

View File

@ -7,14 +7,15 @@
<a class="link link-hover" href="/">Predict</a> <a class="link link-hover" href="/">Predict</a>
<a class="link link-hover" href="/search">Search</a> <a class="link link-hover" href="/search">Search</a>
<a class="link link-hover" href="/package">Browse</a> <a class="link link-hover" href="/package">Browse</a>
<a class="link link-hover" href="/model">Modelling</a> {% if user.is_authenticated %}
<a class="link link-hover" href="/model">Your Collections</a>
{% endif %}
<a href="https://wiki.envipath.org/" target="_blank" class="link link-hover">Documentation</a> <a href="https://wiki.envipath.org/" target="_blank" class="link link-hover">Documentation</a>
</nav> </nav>
<nav> <nav>
<h6 class="footer-title">Company</h6> <h6 class="footer-title">Company</h6>
<a class="link link-hover" href="/about">About us</a> <a class="link link-hover" href="/about">About us</a>
<a class="link link-hover" href="/contact">Support</a> <a class="link link-hover" href="/contact">Contact us</a>
<a class="link link-hover" href="/contact">Contact</a>
<a class="link link-hover" href="/jobs">Jobs</a> <a class="link link-hover" href="/jobs">Jobs</a>
</nav> </nav>
<nav> <nav>

View File

@ -34,7 +34,7 @@
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
<button type="button" class="inline-flex items-center gap-1 rounded-full bg-gray-950/2 px-2 py-1 inset-ring inset-ring-gray-950/8 dark:bg-white/5 dark:inset-ring-white/2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400 [.os-macos_&amp;]:block">⌘K</kbd><kbd class="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&amp;]:block dark:text-gray-400">Ctrl&nbsp;K</kbd></button> <button type="button" class="inline-flex items-center gap-1 rounded-full bg-gray-950/2 px-2 py-1 inset-ring inset-ring-gray-950/8 dark:bg-white/5 dark:inset-ring-white/2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400 [.os-macos_&amp;]:block">⌘K</kbd><kbd class="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&amp;]:block dark:text-gray-400">Ctrl&nbsp;K</kbd></button>
{% if meta.user.username == 'anonymous' %} {% if meta.user.username == 'anonymous' %}
<li><a href="#signup" id="loginButton">Login</a></li> <li><a href="{% url 'login' %}" id="loginButton">Login</a></li>
{% else %} {% else %}
<li> <li>
<details> <details>

View File

@ -0,0 +1,4 @@
<!--
Copyright 2025 Tobias Olenyi.
SPDX-License-Identifier: Apache-2.0
-->

View File

@ -1,59 +1,183 @@
{% extends "static/static_base.html" %} {% extends "static/login_base.html" %}
{% block title %}enviPath - Sign In{% endblock %}
{% block extra_styles %}
/* Tab styling */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
input[type="radio"].tab-radio {
display: none;
}
.tab-label {
cursor: pointer;
padding: 0.75rem 1.5rem;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.tab-label:hover {
background-color: rgba(0, 0, 0, 0.05);
}
input[type="radio"].tab-radio:checked + .tab-label {
border-bottom-color: #3b82f6;
font-weight: 600;
}
{% endblock %}
{% block content %} {% block content %}
{% if message %} <!-- Tab Navigation -->
<div class="alert alert-danger" role="alert"> <div class="border-b border-base-300 mb-6">
{{ message }} <div class="flex justify-start">
</div> <input type="radio" name="auth-tab" id="tab-signin" class="tab-radio" checked>
{% elif success_message %} <label for="tab-signin" class="tab-label">Sign In</label>
<div class="alert alert-success" role="alert">
{{ success_message }}
</div>
{% else %}
<div class="alert alert-success" role="alert">
Kia ora! We are running our closed beta tests at the moment. It would be great to get your help as tester,
you
can apply to become tester by registering for this page, just hit the button below. More information on the
beta
test is available in our <a href="https://community.envipath.org/t/apply-to-join-our-closed-beta/95">
community
form</a>
</div>
{% endif %}
<div class="modal-dialog" style="margin:30px auto; z-index:9999;">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal" method="post" action="{% url 'login' %}">
{% csrf_token %}
<fieldset>
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input required id="username" name="username" type="text"
class="form-control" placeholder="username" autocomplete="username">
</div>
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input required id="passwordinput" name="password" class="form-control"
type="password" placeholder="********" autocomplete="current-password">
</div>
<div class="form-group text-center" style="margin-top:15px;">
<a href="{% url 'password_reset' %}">Forgot your password?</a>
</div>
</div>
<div class="control-group"> <input type="radio" name="auth-tab" id="tab-signup" class="tab-radio">
<label class="control-label" for="signin"></label> <label for="tab-signup" class="tab-label">Register</label>
<div class="controls"> </div>
<button id="signin" name="signin" class="btn btn-success pull-right">Sign In </div>
</button>
<a class="btn btn-primary" href="{% url 'register' %}">Create an Account</a> <!-- Sign In Tab -->
</div> <div id="content-signin" class="tab-content active">
</div> <form method="post" action="{% url 'login' %}" class="space-y-4">
<input type="hidden" name="next" value="{{ next }}"/> {% csrf_token %}
</fieldset> <input type="hidden" name="login" value="true"/>
</form>
<div class="form-control">
<label class="label" for="username">
<span class="label-text">Username</span>
</label>
<input type="text" id="username" name="username" placeholder="username"
class="input input-bordered w-full" required autocomplete="username">
</div>
<div class="form-control">
<label class="label" for="passwordinput">
<span class="label-text">Password</span>
</label>
<input type="password" id="passwordinput" name="password" placeholder="••••••••"
class="input input-bordered w-full" required autocomplete="current-password">
</div>
<div class="text-right">
<a href="{% url 'password_reset' %}" class="link link-primary text-sm">Forgot password?</a>
</div>
<input type="hidden" name="next" value="{{ next }}"/>
<button type="submit" name="signin" class="btn btn-primary w-full">Sign In</button>
</form>
</div>
<!-- Register Tab -->
<div id="content-signup" class="tab-content">
<div class="alert alert-info mb-4 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<div class="font-bold">Password Requirements</div>
<div class="text-xs mt-1">
• 8 to 30 characters<br>
• Upper and lower case letters<br>
• Digits and special characters (_, -, +)
</div> </div>
</div> </div>
</div> </div>
<form method="post" action="{% url 'login' %}" class="space-y-4">
{% csrf_token %}
<input type="hidden" name="register" value="true"/>
<div class="form-control">
<label class="label" for="userid">
<span class="label-text">Username</span>
</label>
<input type="text" id="userid" name="username" placeholder="username"
class="input input-bordered w-full" required autocomplete="username">
</div>
<div class="form-control">
<label class="label" for="email">
<span class="label-text">Email</span>
</label>
<input type="email" id="email" name="email" placeholder="user@envipath.org"
class="input input-bordered w-full" required autocomplete="email">
</div>
<div class="form-control">
<label class="label" for="password">
<span class="label-text">Password</span>
</label>
<input type="password" id="password" name="password" placeholder="••••••••"
class="input input-bordered w-full" required autocomplete="new-password">
</div>
<div class="form-control">
<label class="label" for="rpassword">
<span class="label-text">Repeat Password</span>
</label>
<input type="password" id="rpassword" name="rpassword" placeholder="••••••••"
class="input input-bordered w-full" required autocomplete="new-password">
</div>
<input type="hidden" name="next" value="{{ next }}"/>
<button type="submit" name="confirmsignup" class="btn btn-success w-full">Sign Up</button>
</form>
<!-- Why Register Section -->
<div class="mt-6 p-4 bg-base-200 rounded-lg">
<h3 class="font-semibold mb-2">Why register?</h3>
<p class="text-sm mb-2">Registration is required to run pathway predictions as they are computationally costly operations.</p>
<p class="text-sm mb-2">After you register, you also gain additional permissions:</p>
<ul class="text-sm space-y-1 ml-4">
<li>• Create your own packages</li>
<li>• Submit data for review</li>
<li>• Set access permissions to your data</li>
</ul>
<p class="text-sm mt-3">
Questions? Contact <a href="mailto:admin@envipath.org" class="link link-primary">admin@envipath.org</a>
</p>
</div>
</div>
{% endblock %}
{% block extra_scripts %}
<script>
// Tab switching functionality
document.querySelectorAll('input[name="auth-tab"]').forEach(radio => {
radio.addEventListener('change', function() {
// Hide all content
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
// Show selected content
const contentId = 'content-' + this.id.replace('tab-', '');
document.getElementById(contentId).classList.add('active');
});
});
// Check for hash in URL to auto-select tab
window.addEventListener('DOMContentLoaded', function() {
const hash = window.location.hash.substring(1); // Remove the # symbol
if (hash === 'signup' || hash === 'signin') {
const tabRadio = document.getElementById('tab-' + hash);
if (tabRadio) {
tabRadio.checked = true;
// Trigger change event to show correct content
tabRadio.dispatchEvent(new Event('change'));
}
}
});
</script>
{% endblock %} {% endblock %}

View File

@ -0,0 +1,68 @@
{% load static %}
<!DOCTYPE html>
<html lang="en" data-theme="envipath">
<head>
<meta charset="UTF-8">
<title>{% block title %}enviPath{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
<!-- Tailwind CSS Output -->
<link href="{% static 'css/output.css' %}" rel="stylesheet" type="text/css"/>
<style>
{% block extra_styles %}{% endblock %}
</style>
</head>
<body class="bg-base-100">
<div class="flex h-screen">
<!-- Left side - Hero Image -->
<div class="hidden lg:flex lg:w-1/2 bg-cover bg-center bg-no-repeat items-center justify-center p-12"
style="background-image: linear-gradient(135deg, rgba(52, 152, 219, 0.3) 0%, rgba(41, 128, 185, 0.4) 100%), url('{% static "/images/hero.png" %}');">
<div class="text-left text-white space-y-6">
<svg class="h-16 w-auto fill-white" viewBox="0 0 104 26" role="img">
<use href='{% static "/images/logo-name.svg" %}#ep-logo-name' />
</svg>
<p class="text-lg max-w-md mx-auto">
Predict and explore microbial biotransformation pathways for environmental contaminants
</p>
</div>
</div>
<!-- Right side - Content -->
<div class="w-full lg:w-1/2 flex items-center justify-center p-8 overflow-y-auto">
<div class="w-full max-w-md">
<!-- Logo for mobile -->
<div class="lg:hidden text-center mb-8">
<svg class="h-12 w-auto mx-auto fill-current" viewBox="0 0 104 26" role="img">
<use href='{% static "/images/logo-name.svg" %}#ep-logo-name' />
</svg>
</div>
<!-- Messages -->
{% if message %}
<div class="alert alert-error mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>{{ message }}</span>
</div>
{% elif success_message %}
<div class="alert alert-success mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>{{ success_message }}</span>
</div>
{% endif %}
{% block content %}{% endblock %}
</div>
</div>
</div>
{% block extra_scripts %}{% endblock %}
</body>
</html>

View File

@ -1,5 +1,30 @@
{% extends "static/static_base.html" %} {% extends "static/login_base.html" %}
{% block title %}enviPath - Password Reset Complete{% endblock %}
{% block content %} {% block content %}
<p>Your password has been reset successfully. <a href="{% url 'login' %}">Login</a></p> <!-- Success Icon -->
<div class="flex justify-center mb-6">
<div class="rounded-full bg-success/20 p-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 stroke-success" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<!-- Title -->
<div class="text-center mb-8">
<h2 class="text-3xl font-bold mb-4">Password Reset Complete!</h2>
<p class="text-base-content/70 mb-4">
Your password has been successfully reset.
</p>
<p class="text-sm text-base-content/60">
You can now sign in with your new password.
</p>
</div>
<!-- Actions -->
<div class="space-y-4">
<a href="{% url 'login' %}" class="btn btn-primary w-full">Sign In</a>
</div>
{% endblock %} {% endblock %}

View File

@ -1,31 +1,94 @@
{% extends "static/static_base.html" %} {% extends "static/login_base.html" %}
{% block title %}enviPath - Set New Password{% endblock %}
{% block content %} {% block content %}
<div class="modal-dialog" style="margin:30px auto; z-index:9999;"> <!-- Title -->
<div class="modal-content"> <div class="mb-8">
<div class="modal-body"> <h2 class="text-3xl font-bold mb-2">Set New Password</h2>
<h2>Enter new password</h2> <p class="text-base-content/70">Please enter your new password below.</p>
<form method="post"> </div>
{% csrf_token %}
<p>
<label for="id_new_password1">New password:</label>
<input type="password" class="form-control" name="new_password1" autocomplete="new-password"
required=""
aria-describedby="id_new_password1_helptext" id="id_new_password1">
<span class="helptext" id="id_new_password1_helptext"></span></p>
{{ form.new_password1.help_text|safe }} <!-- Messages -->
{% if validlink %}
<p> <!-- Password Requirements Info -->
<label for="id_new_password2">New password confirmation:</label> <div class="alert alert-info mb-4 text-sm">
<input type="password" class="form-control" name="new_password2" autocomplete="new-password" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
required="" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
aria-describedby="id_new_password2_helptext" id="id_new_password2"> </svg>
{{ form.new_password2.help_text|safe }} <div>
</p> <div class="font-bold">Password Requirements</div>
<button class="btn btn-primary" type="submit">Reset Password</button> <div class="text-xs mt-1">
</form> • 8 to 30 characters<br>
• Upper and lower case letters<br>
• Digits and special characters (_, -, +)
</div> </div>
</div> </div>
</div> </div>
<!-- Reset Password Form -->
<form method="post" class="space-y-4">
{% csrf_token %}
<div class="form-control">
<label class="label" for="id_new_password1">
<span class="label-text">New Password</span>
</label>
<input type="password" id="id_new_password1" name="new_password1" placeholder="••••••••"
class="input input-bordered w-full" required autocomplete="new-password">
{% if form.new_password1.help_text %}
<label class="label">
<span class="label-text-alt text-base-content/60">{{ form.new_password1.help_text }}</span>
</label>
{% endif %}
{% if form.new_password1.errors %}
<label class="label">
<span class="label-text-alt text-error">{{ form.new_password1.errors|join:", " }}</span>
</label>
{% endif %}
</div>
<div class="form-control">
<label class="label" for="id_new_password2">
<span class="label-text">Confirm New Password</span>
</label>
<input type="password" id="id_new_password2" name="new_password2" placeholder="••••••••"
class="input input-bordered w-full" required autocomplete="new-password">
{% if form.new_password2.help_text %}
<label class="label">
<span class="label-text-alt text-base-content/60">{{ form.new_password2.help_text }}</span>
</label>
{% endif %}
{% if form.new_password2.errors %}
<label class="label">
<span class="label-text-alt text-error">{{ form.new_password2.errors|join:", " }}</span>
</label>
{% endif %}
</div>
<button type="submit" class="btn btn-primary w-full">Reset Password</button>
</form>
{% else %}
<!-- Invalid Link -->
<div class="alert alert-error mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<div class="font-bold">Invalid Reset Link</div>
<div class="text-sm">This password reset link is invalid or has expired.</div>
</div>
</div>
<div class="space-y-4">
<a href="{% url 'password_reset' %}" class="btn btn-primary w-full">Request New Reset Link</a>
</div>
{% endif %}
<!-- Back to Sign In -->
<div class="mt-6 text-center text-sm text-base-content/70">
<p>Remember your password?
<a href="{% url 'login' %}" class="link link-primary">Sign in</a>
</p>
</div>
{% endblock %} {% endblock %}

View File

@ -1,7 +1,30 @@
{% extends "static/static_base.html" %} {% extends "static/login_base.html" %}
{% block title %}enviPath - Reset Email Sent{% endblock %}
{% block content %} {% block content %}
<div class="alert alert-success" role="alert"> <!-- Success Icon -->
An email has been sent with instructions to reset your password. <div class="flex justify-center mb-6">
<div class="rounded-full bg-success/20 p-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 stroke-success" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
</svg>
</div> </div>
</div>
<!-- Title -->
<div class="text-center mb-8">
<h2 class="text-3xl font-bold mb-4">Check Your Email</h2>
<p class="text-base-content/70 mb-4">
We've sent an email with instructions to reset your password.
</p>
<p class="text-sm text-base-content/60">
If you don't see it in your inbox, please check your spam folder.
</p>
</div>
<!-- Actions -->
<div class="space-y-4">
<a href="{% url 'login' %}" class="btn btn-primary w-full">Back to Sign In</a>
</div>
{% endblock %} {% endblock %}

View File

@ -1,23 +1,33 @@
{% extends "static/static_base.html" %} {% extends "static/login_base.html" %}
{% block title %}enviPath - Reset Password{% endblock %}
{% block content %} {% block content %}
<div class="modal-dialog" style="margin:30px auto; z-index:9999;"> <!-- Title -->
<div class="modal-content"> <div class="mb-8">
<div class="modal-body"> <h2 class="text-3xl font-bold mb-2">Reset Password</h2>
<form method="post"> <p class="text-base-content/70">Enter your email address and we'll send you a link to reset your password.</p>
{% csrf_token %} </div>
<label class="control-label" for="username">Email:</label>
<input type="email" name="email" class="form-control" maxlength="254" <!-- Reset Password Form -->
required="" id="id_email"> <form method="post" class="space-y-4">
<div class="control-group"> {% csrf_token %}
<label class="control-label" for="signin"></label>
<div class="controls"> <div class="form-control">
<button id="signin" name="signin" type="submit" class="btn btn-success">Send <label class="label" for="id_email">
</button> <span class="label-text">Email</span>
</div> </label>
</div> <input type="email" id="id_email" name="email" placeholder="user@envipath.org"
</form> class="input input-bordered w-full" required autocomplete="email">
</div>
</div>
</div> </div>
<button type="submit" class="btn btn-primary w-full">Send Reset Link</button>
</form>
<!-- Back to Sign In -->
<div class="mt-6 text-center text-sm text-base-content/70">
<p>Remember your password?
<a href="{% url 'login' %}" class="link link-primary">Sign in</a>
</p>
</div>
{% endblock %} {% endblock %}

View File

@ -1,65 +0,0 @@
{% extends "static/static_base.html" %}
{% block content %}
{% if message %}
<div class="alert alert-danger" role="alert">
{{ message }}
</div>
{% else %}
<div class="alert alert-success" role="alert">
Kia ora! We are running our closed beta tests at the moment. It would be great to get your help as tester,
you
can apply to become tester by registering for this page, just hit the button below. More information on the
beta
test is available in our <a href="https://community.envipath.org/t/apply-to-join-our-closed-beta/95">
community
form</a>
</div>
{% endif %}
<div class="modal-dialog" style="margin:30px auto; z-index:9999;">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal" method="post" action="{% url 'register' %}">
{% csrf_token %}
<fieldset>
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input required id="username" name="username" type="text"
class="form-control" placeholder="username" autocomplete="username">
</div>
<label class="control-label" for="email">Email</label>
<div class="controls">
<input required id="email" name="email" type="text"
class="form-control" placeholder="email" autocomplete="email">
</div>
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input required id="passwordinput" name="password" class="form-control"
type="password" placeholder="********" autocomplete="current-password">
</div>
<label class="control-label" for="passwordinput2">Password:</label>
<div class="controls">
<input required id="passwordinput2" name="rpassword" class="form-control"
type="password" placeholder="********" autocomplete="current-password">
</div>
<div class="form-group text-center" style="margin-top:15px;">
<a href="{% url 'password_reset' %}">Forgot your password?</a>
</div>
</div>
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success pull-right">Sign Up
</button>
<a class="btn btn-primary" href="{% url 'login' %}">Already have an Account?</a>
</div>
</div>
<input type="hidden" name="next" value="{{ next }}"/>
</fieldset>
</form>
</div>
</div>
</div>
{% endblock %}