e6a523f76f
Ajoute le bloc "smtp" (host, port, identifiants, TLS) dans config.json, plus fiable et plus simple à opérer qu'une livraison directe au MX du destinataire. data/config.json n'est plus versionné (secrets), remplacé par data/config.example.json.
134 lines
3.2 KiB
HTML
134 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="login-wrap">
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<span class="login-eyebrow">Décompte Horaire</span>
|
|
<h1 class="login-title">Connexion</h1>
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="login-error">{{ error }}</div>
|
|
{% endif %}
|
|
|
|
{% if step == "email" %}
|
|
<form method="post" action="/login" class="login-form">
|
|
<label class="login-label" for="email">Adresse email</label>
|
|
<input
|
|
id="email"
|
|
class="login-input"
|
|
type="email"
|
|
name="email"
|
|
value="{{ email }}"
|
|
autocomplete="email"
|
|
autofocus
|
|
placeholder="prenom.nom@domaine.fr"
|
|
required
|
|
>
|
|
<button class="login-btn" type="submit">Continuer</button>
|
|
</form>
|
|
|
|
{% elif step == "password" %}
|
|
<form method="post" action="/login/password" class="login-form">
|
|
<input type="hidden" name="email" value="{{ email }}">
|
|
<label class="login-label">{{ email }}</label>
|
|
<input
|
|
id="password"
|
|
class="login-input"
|
|
type="password"
|
|
name="password"
|
|
autocomplete="current-password"
|
|
autofocus
|
|
placeholder="Mot de passe"
|
|
required
|
|
>
|
|
<button class="login-btn" type="submit">Se connecter</button>
|
|
</form>
|
|
|
|
{% elif step == "sent" %}
|
|
<p class="login-hint">
|
|
Un email a été envoyé à <b>{{ email }}</b> avec un lien pour définir ton mot de passe.
|
|
Le lien est valable 24h.
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.login-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
padding-top: 4rem;
|
|
}
|
|
.login-card {
|
|
background: var(--surface);
|
|
border: 1.5px solid var(--rule);
|
|
padding: 2.5rem 3rem;
|
|
width: 380px;
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
.login-header { display: flex; flex-direction: column; gap: .35rem; }
|
|
.login-eyebrow {
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.login-title {
|
|
font-family: var(--mono);
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
letter-spacing: -.01em;
|
|
}
|
|
.login-error {
|
|
background: var(--neg-bg);
|
|
border-left: 3px solid var(--neg);
|
|
color: var(--neg);
|
|
font-size: 12px;
|
|
padding: .6rem .9rem;
|
|
font-family: var(--mono);
|
|
}
|
|
.login-form { display: flex; flex-direction: column; gap: .75rem; }
|
|
.login-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.login-input {
|
|
font-family: var(--mono);
|
|
font-size: 15px;
|
|
padding: .6rem .75rem;
|
|
border: 1.5px solid var(--rule);
|
|
background: var(--ground);
|
|
color: var(--text);
|
|
outline: none;
|
|
transition: border-color .15s;
|
|
}
|
|
.login-input:focus { border-color: var(--accent); }
|
|
.login-hint { font-size: 11px; color: var(--muted); }
|
|
.login-btn {
|
|
margin-top: .5rem;
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
padding: .7rem 1.5rem;
|
|
background: var(--text);
|
|
color: var(--surface);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background .15s;
|
|
}
|
|
.login-btn:hover { background: var(--accent); }
|
|
</style>
|
|
{% endblock %}
|