feat: auth

This commit is contained in:
2025-11-15 21:43:29 +01:00
parent 3c372878a3
commit 2ea90554ef
9 changed files with 1356 additions and 98 deletions

View File

@@ -18,8 +18,8 @@
<div class="header-container">
<div class="header-row">
<div class="header-left">
<h1 class="app-title">
<span class="title-text">🔗 Links</span>
<h1 class="app-title" id="appLogo">
<span class="title-text"><img src="/icon-192.png" alt="LinkDing" class="title-icon"></span>
</h1>
</div>
<div class="header-right">
@@ -39,13 +39,6 @@
<line x1="2" y1="18" x2="2.01" y2="18"></line>
</svg>
</button>
<button id="archiveToggle" class="archive-toggle-btn" title="Toggle archived links">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
</button>
<div class="layout-toggle-wrapper">
<button id="layoutToggle" class="layout-toggle-btn" title="Change layout">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -82,6 +75,22 @@
<path d="m21 21-4.35-4.35"></path>
</svg>
</button>
<button id="loginToggle" class="login-toggle-btn" title="Login">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</button>
<div id="userInfo" class="user-info" style="display: none;">
<span id="usernameDisplay"></span>
<button id="logoutBtn" class="logout-btn" title="Logout">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
<polyline points="16 17 21 12 16 7"></polyline>
<line x1="21" y1="12" x2="9" y2="12"></line>
</svg>
</button>
</div>
</div>
</div>
<div class="header-fields-container">
@@ -126,6 +135,11 @@
<div class="list-filter-header">
<span class="list-filter-label"><b>Lists</b></span>
<div class="list-filter-actions">
<label class="archive-toggle-switch" title="Show archived links">
<input type="checkbox" id="archiveToggle">
<span class="archive-toggle-slider"></span>
<span class="archive-toggle-label">Archive</span>
</label>
<button id="editListsBtn" class="edit-lists-btn" title="Manage lists">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
@@ -144,6 +158,54 @@
</div>
</header>
<!-- Login Modal -->
<div id="loginModal" class="login-modal">
<div class="login-modal-content">
<div class="login-modal-header">
<h2>Login</h2>
<button id="closeLoginModal" class="close-modal-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="login-modal-body">
<form id="loginForm" class="login-form">
<div class="form-group">
<label for="loginUsername">Username</label>
<input
type="text"
id="loginUsername"
placeholder="Enter username"
required
autocomplete="username"
>
</div>
<div class="form-group">
<label for="loginPassword">Password</label>
<input
type="password"
id="loginPassword"
placeholder="Enter password"
required
autocomplete="current-password"
>
</div>
<div id="loginError" class="login-error" style="display: none;"></div>
<button type="submit" id="loginSubmitBtn" class="btn-login">
<span class="btn-text">Login</span>
<span class="btn-loader" style="display: none;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>
</span>
</button>
</form>
</div>
</div>
</div>
<!-- Lists Management Modal -->
<div id="listsModal" class="lists-modal">
<div class="lists-modal-content">