124 lines
5.9 KiB
HTML
124 lines
5.9 KiB
HTML
{% load static %}<!doctype html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="light">
|
|
<meta name="theme-color" content="#071327">
|
|
<meta name="application-name" content="VacatureRadar">
|
|
<title>Inloggen · VacatureRadar</title>
|
|
<link rel="icon" href="{% static 'favicon.svg' %}?v={{ app_version }}" type="image/svg+xml" sizes="any">
|
|
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
|
|
</head>
|
|
<body class="auth-page">
|
|
{% include "components/icon_sprite.html" %}
|
|
<main class="auth-shell">
|
|
<div class="auth-brand">
|
|
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar" width="72" height="72">
|
|
<p class="auth-brand-name">VacatureRadar</p>
|
|
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
|
|
</div>
|
|
|
|
<div class="auth-card">
|
|
<h1>Inloggen</h1>
|
|
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="auth-alert {% if message.tags == 'error' %}is-error{% elif message.tags == 'success' %}is-success{% else %}is-info{% endif %}" role="alert">
|
|
<svg class="icon" aria-hidden="true"><use href="{% if message.tags == 'error' %}#icon-alert{% else %}#icon-check{% endif %}"></use></svg>
|
|
<span>{{ message }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% if form.errors and not messages %}
|
|
<div class="auth-alert is-error" role="alert">
|
|
<svg class="icon" aria-hidden="true"><use href="#icon-alert"></use></svg>
|
|
<span>E-mailadres of wachtwoord klopt niet. Probeer het opnieuw.</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" class="auth-form" novalidate>
|
|
{% csrf_token %}
|
|
<div class="field">
|
|
<label for="id_username">E-mailadres</label>
|
|
<input class="auth-input" id="id_username" name="username" type="email"
|
|
autocomplete="username" autocapitalize="none" spellcheck="false"
|
|
placeholder="naam@organisatie.nl" required
|
|
{% if form.errors %}aria-invalid="true"{% endif %}
|
|
value="{{ form.username.value|default:'' }}">
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="field-label-row">
|
|
<label for="id_password">Wachtwoord</label>
|
|
<a class="field-link" href="{% url 'password_reset' %}">Wachtwoord vergeten?</a>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input class="auth-input" id="id_password" name="password" type="password"
|
|
autocomplete="current-password" placeholder="••••••••" required
|
|
{% if form.errors %}aria-invalid="true"{% endif %}>
|
|
<button class="pw-toggle" type="button" data-pw-toggle aria-label="Wachtwoord tonen">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" data-eye><path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="2.7" stroke="currentColor" stroke-width="1.8"/></svg>
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" data-eye-off hidden><path d="M3 3l18 18M10.6 6.1A10.7 10.7 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-2.8 3.4M6.2 6.2C3.8 8 2.5 12 2.5 12s3.5 6 9.5 6c1.2 0 2.3-.2 3.3-.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" stroke="currentColor" stroke-width="1.8"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
|
|
|
|
<button class="btn btn-primary" type="submit" data-submit>
|
|
<span data-label>Inloggen</span>
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" data-arrow><path d="M5 12h14M14 7l5 5-5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
|
|
{% if entra_enabled %}
|
|
<div class="auth-separator"><span>Of ga door met</span></div>
|
|
{% endif %}
|
|
</form>
|
|
|
|
{% if entra_enabled %}
|
|
<form method="post" action="{% url 'entra-login' %}">
|
|
{% csrf_token %}
|
|
{% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
|
|
<button class="btn btn-sso" type="submit">
|
|
<svg viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<path d="M1 1h10v10H1z" fill="#f35325"></path>
|
|
<path d="M12 1h10v10H12z" fill="#81bc06"></path>
|
|
<path d="M1 12h10v10H1z" fill="#05a6f0"></path>
|
|
<path d="M12 12h10v10H12z" fill="#ffba08"></path>
|
|
</svg>
|
|
Inloggen met Entra ID
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
|
|
{% if demo_enabled %}
|
|
<div class="auth-secondary">
|
|
<p>Nog geen account?</p>
|
|
<form method="post" action="{% url 'demo-login' %}" class="btn-ghost inline-form">
|
|
{% csrf_token %}
|
|
{% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
|
|
<button class="btn-ghost" type="submit">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M14 7l5 5-5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Bekijk demo
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% include "components/developer_credit.html" %}
|
|
|
|
<footer class="auth-footer">
|
|
<div class="auth-badge">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3 5 6v5c0 4.7 2.8 8.2 7 10 4.2-1.8 7-5.3 7-10V6l-7-3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
|
<span>Local-first secure node</span>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
<script src="{% static 'js/login.js' %}?v={{ app_version }}" defer></script>
|
|
</body>
|
|
</html>
|