feat: auth
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user