jebus/enviPy-bayer
1
0
Fork 0
forked from enviPath/enviPy
Code Issues Pull Requests Actions Releases Activity

style: update login pages

Browse Source
This commit is contained in:
Tobias O
2025-10-29 12:01:35 +13:00
parent b7e1dac66a
commit 15809a4ccf
12 changed files with 431 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
templates/static/login.html
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 %}
{% if message %}
<div class="alert alert-danger" role="alert">
{{ message }}
</div>
{% elif success_message %}
<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>
<!-- Tab Navigation -->
<div class="border-b border-base-300 mb-6">
<div class="flex justify-start">
<input type="radio" name="auth-tab" id="tab-signin" class="tab-radio" checked>
<label for="tab-signin" class="tab-label">Sign In</label>
<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 In
</button>
<a class="btn btn-primary" href="{% url 'register' %}">Create an Account</a>
</div>
</div>
<input type="hidden" name="next" value="{{ next }}"/>
</fieldset>
</form>
<input type="radio" name="auth-tab" id="tab-signup" class="tab-radio">
<label for="tab-signup" class="tab-label">Register</label>
</div>
</div>
<!-- Sign In Tab -->
<div id="content-signin" class="tab-content active">
<form method="post" action="{% url 'login' %}" class="space-y-4">
{% csrf_token %}
<input type="hidden" name="login" value="true"/>
<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>
<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 %}