forked from enviPath/enviPy
150 lines
4.0 KiB
HTML
150 lines
4.0 KiB
HTML
{% extends "static/login_base.html" %}
|
|
|
|
{% block title %}enviPath - Sign In{% endblock %}
|
|
|
|
{% block extra_styles %}
|
|
<style>
|
|
/* 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;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="card bg-base-200 mb-6 ">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Welcome to the new enviPath!</h3>
|
|
</div>
|
|
</div>
|
|
<!-- Tab Navigation -->
|
|
<div class="border-base-300 mb-6 border-b">
|
|
<div class="flex justify-start">
|
|
<input
|
|
type="radio"
|
|
name="auth-tab"
|
|
id="tab-sso"
|
|
class="tab-radio"
|
|
checked
|
|
/>
|
|
<label for="tab-sso" class="tab-label">SSO</label>
|
|
|
|
<input
|
|
type="radio"
|
|
name="auth-tab"
|
|
id="tab-signin"
|
|
class="tab-radio"
|
|
/>
|
|
<label for="tab-signin" class="tab-label">Local User</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SSO Tab -->
|
|
<div id="content-sso" class="tab-content active">
|
|
<button role="link" onclick="window.location.href='/entra/login'" name="sso" class="btn btn-primary w-full">
|
|
Login with Microsoft
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Sign In Tab -->
|
|
<div id="content-signin" class="tab-content">
|
|
<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">Account</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
placeholder="Username or Email"
|
|
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>
|
|
|
|
{% 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 %}
|