feat: write API + session protocol

This commit is contained in:
Nabil Derouiche
2026-06-26 00:35:34 +01:00
parent 9e7a974538
commit 395381ae07
11 changed files with 361 additions and 21 deletions
+81 -19
View File
@@ -1,25 +1,87 @@
{% extends "base.html" %}
{% block content %}
<div class="flex items-center justify-center min-h-[80vh]">
<div class="login-card p-8 w-full max-w-md">
<h2 class="text-2xl font-bold text-nyora mb-6 text-center">Nyora Infrastructure</h2>
<form action="/auth/login" method="POST" class="space-y-6">
<div>
<label for="username" class="block text-sm font-medium dark:text-gray-400 text-gray-500">Username</label>
<input type="text" id="username" name="username" placeholder="Identifiant" required
class="mt-1 block w-full px-4 py-3 dark:bg-gray-900 bg-white border border-gray-600 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-nyora focus:border-transparent transition">
</div>
<div>
<label for="password" class="block text-sm font-medium dark:text-gray-400 text-gray-500">Password</label>
<input type="password" id="password" name="password" placeholder="Mot de passe" required
class="mt-1 block w-full px-4 py-3 dark:bg-gray-900 bg-white border border-gray-600 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-nyora focus:border-transparent transition">
</div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-900 bg-nyora hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-nyora focus:ring-offset-gray-900 transition">
Sign In
</button>
</form>
<style>
body { display:flex; flex-direction:column; min-height:100vh; }
.login-wrap {
flex:1; display:flex; align-items:center; justify-content:center;
background:#0d0d0d; padding:2rem;
}
.login-card {
background:#111; border:1px solid #1f1f1f; border-radius:10px;
padding:2.5rem 2rem; width:100%; max-width:380px;
}
.login-logo {
display:flex; align-items:center; gap:9px; margin-bottom:6px; justify-content:center;
}
.login-logo-dot { width:9px; height:9px; border-radius:2px; background:#d97757; }
.login-title {
font-size:1.05rem; font-weight:700; letter-spacing:0.08em;
color:#e8e6e3; font-family:'JetBrains Mono', monospace;
}
.login-sub {
font-size:0.72rem; color:#4a4845; text-align:center;
margin-bottom:2rem; letter-spacing:0.05em;
font-family:'JetBrains Mono', monospace;
}
.login-label {
display:block; font-size:0.72rem; font-weight:500;
color:#6a6863; margin-bottom:6px; letter-spacing:0.08em;
text-transform:uppercase;
}
.login-input {
width:100%; padding:10px 14px; background:#0d0d0d;
border:1px solid #262626; border-radius:6px;
color:#e8e6e3; font-size:0.875rem; margin-bottom:1.2rem;
transition:border-color 0.2s; box-sizing:border-box;
}
.login-input:focus { border-color:#3a3a3a; outline:none; }
.login-input::placeholder { color:#3a3a3a; }
.login-btn {
width:100%; padding:11px; background:#d4a01a; border:none;
border-radius:6px; color:#0d0d0d; font-size:0.85rem;
font-weight:700; letter-spacing:0.05em; cursor:pointer;
transition:background 0.2s; margin-top:0.5rem;
}
.login-btn:hover { background:#e8b420; }
.login-error {
background:#1c0f0f; border:1px solid #3d1a1a; border-radius:6px;
color:#c47a6e; font-size:0.78rem; padding:10px 14px;
margin-bottom:1.2rem; text-align:center;
}
</style>
<div class="login-wrap">
<div class="login-card">
<div class="login-logo">
<div class="login-logo-dot"></div>
<div class="login-title">CONCEPT</div>
</div>
<div class="login-sub">context.bolbol.tn</div>
{% if error %}
<div class="login-error">{{ error }}</div>
{% endif %}
<form action="/auth/login" method="POST">
<label class="login-label">Identifiant</label>
<input class="login-input" type="text" name="username"
placeholder="Identifiant" required autocomplete="username">
<label class="login-label">Mot de passe</label>
<input class="login-input" type="password" name="password"
placeholder="••••••••" required autocomplete="current-password">
<button class="login-btn" type="submit">Connexion</button>
</form>
</div>
</div>
<footer class="nyora-footer" style="background:#0d0d0d; padding:1.2rem 1rem;">
<div class="nyora-line-top"></div>
<div class="nyora-brand">
<span class="nyora-dot"></span>
<span class="nyora-name">NYORA</span>
<span class="nyora-dot"></span>
</div>
<div class="nyora-tag">Crafted with precision · Built for excellence</div>
</footer>
{% endblock %}