toolz/linkding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: auth

Browse Source
This commit is contained in:
0x1d
2025-11-15 21:43:29 +01:00
parent 3c372878a3
commit 2ea90554ef
9 changed files with 1356 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
public/app.js
View File

@@ -1,5 +1,6 @@
const API_BASE = '/api/links';
const LISTS_API_BASE = '/api/lists';
const AUTH_API_BASE = '/api/auth';
// DOM elements
const linkForm = document.getElementById('linkForm');
@@ -29,6 +30,17 @@ const listFilterWrapper = document.getElementById('listFilterWrapper');
const listFilterChips = document.getElementById('listFilterChips');
const clearListFilters = document.getElementById('clearListFilters');
const editListsBtn = document.getElementById('editListsBtn');
const loginToggle = document.getElementById('loginToggle');
const loginModal = document.getElementById('loginModal');
const closeLoginModal = document.getElementById('closeLoginModal');
const loginForm = document.getElementById('loginForm');
const loginUsername = document.getElementById('loginUsername');
const loginPassword = document.getElementById('loginPassword');
const loginSubmitBtn = document.getElementById('loginSubmitBtn');
const loginError = document.getElementById('loginError');
const userInfo = document.getElementById('userInfo');
const usernameDisplay = document.getElementById('usernameDisplay');
const logoutBtn = document.getElementById('logoutBtn');
// State
let allLinks = [];
@@ -38,15 +50,20 @@ let showArchived = false;
let currentLayout = localStorage.getItem('linkdingLayout') || 'masonry'; // Load from localStorage or default
let selectedListFilters = [];
let currentLinkForListSelection = null;
let isAuthenticated = false;
let currentUser = null;
// Initialize app
document.addEventListener('DOMContentLoaded', () => {
loadLinks();
loadLists().then(() => {
// After lists are loaded, check URL for list filter
checkUrlForListFilter();
checkAuthStatus().then(() => {
loadLinks();
loadLists().then(() => {
// After lists are loaded, check URL for list filter
checkUrlForListFilter();
});
});
setupEventListeners();
setupAuthentication();
setupScrollToTop();
setupMobileSearch();
setupMobileAddLink();
@@ -54,10 +71,35 @@ document.addEventListener('DOMContentLoaded', () => {
setupListsManagement();
setupListFiltering();
setupUrlNavigation();
setupLogoClick();
setupMobileButtonBlur();
applyLayout(currentLayout);
registerServiceWorker();
});
// Setup button blur on mobile after click
function setupMobileButtonBlur() {
// Check if device is mobile/touch device
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0);
if (isMobile) {
// Add blur handler to all buttons after click
document.addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
const button = e.target.tagName === 'BUTTON' ? e.target : e.target.closest('button');
// Use setTimeout to ensure blur happens after any click handlers
setTimeout(() => {
if (button && document.activeElement === button) {
button.blur();
}
}, 100);
}
}, true); // Use capture phase to catch all button clicks
}
}
// Register service worker for PWA
function registerServiceWorker() {
if ('serviceWorker' in navigator) {
@@ -73,11 +115,212 @@ function registerServiceWorker() {
}
}
// Authentication functions
async function checkAuthStatus() {
try {
const response = await fetch(AUTH_API_BASE + '/status', {
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to check auth status');
const data = await response.json();
const wasAuthenticated = isAuthenticated;
isAuthenticated = data.authenticated;
currentUser = data.user;
updateUIBasedOnAuth();
// If authentication status changed, reload lists to get the correct set
if (wasAuthenticated !== isAuthenticated) {
await loadLists();
}
} catch (error) {
console.error('Error checking auth status:', error);
isAuthenticated = false;
currentUser = null;
updateUIBasedOnAuth();
}
}
function updateUIBasedOnAuth() {
// Show/hide login button and user info
if (isAuthenticated) {
loginToggle.style.display = 'none';
userInfo.style.display = 'flex';
usernameDisplay.textContent = currentUser?.username || 'User';
} else {
loginToggle.style.display = 'flex';
userInfo.style.display = 'none';
}
// Show/hide modify buttons (lists toggle is visible to all for filtering)
const modifyButtons = document.querySelectorAll('.add-link-toggle-btn, .delete-btn, .archive-btn, .add-to-list-btn, #createListBtn, .edit-lists-btn');
modifyButtons.forEach(btn => {
if (btn) {
btn.style.display = isAuthenticated ? '' : 'none';
}
});
// Lists toggle button is visible to all users for filtering
// But the edit button inside the list filter section should be hidden when not authenticated
const editListsBtn = document.getElementById('editListsBtn');
if (editListsBtn) {
editListsBtn.style.display = isAuthenticated ? '' : 'none';
}
// Hide add link wrapper if not authenticated
if (!isAuthenticated && addLinkWrapper) {
addLinkWrapper.classList.remove('show');
if (addLinkToggle) addLinkToggle.classList.remove('active');
}
}
function setupAuthentication() {
// Login toggle
loginToggle.addEventListener('click', () => {
loginModal.classList.add('show');
loginUsername.focus();
});
// Close login modal
closeLoginModal.addEventListener('click', () => {
loginModal.classList.remove('show');
loginForm.reset();
loginError.style.display = 'none';
});
// Close on backdrop click
loginModal.addEventListener('click', (e) => {
if (e.target === loginModal) {
loginModal.classList.remove('show');
loginForm.reset();
loginError.style.display = 'none';
}
});
// Login form submission
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
const username = loginUsername.value.trim();
const password = loginPassword.value;
if (!username || !password) {
showLoginError('Please enter both username and password');
return;
}
// Disable form
loginSubmitBtn.disabled = true;
const btnText = loginSubmitBtn.querySelector('.btn-text');
const btnLoader = loginSubmitBtn.querySelector('.btn-loader');
if (btnText) btnText.style.display = 'none';
if (btnLoader) btnLoader.style.display = 'flex';
loginError.style.display = 'none';
try {
const response = await fetch(AUTH_API_BASE + '/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({ username, password })
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Login failed');
}
isAuthenticated = true;
currentUser = data.user;
updateUIBasedOnAuth();
loginModal.classList.remove('show');
loginForm.reset();
showMessage('Login successful!', 'success');
// Reload lists to get all lists (not just public ones)
loadLists().then(() => {
// Update filter chips if visible
if (listFilterWrapper.classList.contains('show')) {
updateListFilterChips();
}
});
// Refresh links to show all links (not just public ones)
loadLinks();
} catch (error) {
showLoginError(error.message || 'Login failed. Please check your credentials.');
console.error('Login error:', error);
} finally {
loginSubmitBtn.disabled = false;
if (btnText) btnText.style.display = 'inline';
if (btnLoader) btnLoader.style.display = 'none';
}
});
// Logout
logoutBtn.addEventListener('click', async () => {
try {
const response = await fetch(AUTH_API_BASE + '/logout', {
method: 'POST',
credentials: 'include'
});
if (!response.ok) throw new Error('Logout failed');
isAuthenticated = false;
currentUser = null;
updateUIBasedOnAuth();
showMessage('Logged out successfully', 'success');
// Reload lists to get only public lists
loadLists().then(() => {
// Clear any selected filters that are no longer valid (private lists)
selectedListFilters = selectedListFilters.filter(listId => {
return allLists.some(list => list.id === listId && list.public === true);
});
// Update filter chips if visible
if (listFilterWrapper.classList.contains('show')) {
updateListFilterChips();
}
});
// Reset all filters and refresh links to show only public links
resetAllFilters();
} catch (error) {
showMessage('Logout failed', 'error');
console.error('Logout error:', error);
}
});
}
function showLoginError(message) {
loginError.textContent = message;
loginError.style.display = 'block';
}
// Helper function to handle API errors, especially authentication errors
async function handleApiError(response, defaultMessage) {
if (response.status === 401) {
// Authentication required
isAuthenticated = false;
currentUser = null;
updateUIBasedOnAuth();
showMessage('Please login to perform this action', 'error');
loginModal.classList.add('show');
return true; // Indicates auth error was handled
}
const data = await response.json().catch(() => ({}));
throw new Error(data.error || defaultMessage);
}
// Event listeners
function setupEventListeners() {
linkForm.addEventListener('submit', handleAddLink);
searchInput.addEventListener('input', handleSearch);
archiveToggle.addEventListener('click', handleToggleArchive);
archiveToggle.addEventListener('change', handleToggleArchive);
}
// Setup search toggle (works on both desktop and mobile)
@@ -91,10 +334,20 @@ function setupMobileSearch() {
// Hide search
searchWrapper.classList.remove('show');
searchToggle.classList.remove('active');
// Force remove active state on mobile - use requestAnimationFrame to ensure it happens after click processing
requestAnimationFrame(() => {
searchToggle.blur();
if (document.activeElement === searchToggle) {
document.activeElement.blur();
}
});
// Hide add link if visible
if (addLinkWrapper && addLinkWrapper.classList.contains('show')) {
addLinkWrapper.classList.remove('show');
if (addLinkToggle) addLinkToggle.classList.remove('active');
if (addLinkToggle) {
addLinkToggle.classList.remove('active');
addLinkToggle.blur();
}
}
// Clear search and reset if needed
if (searchInput.value.trim()) {
@@ -105,7 +358,10 @@ function setupMobileSearch() {
// Hide add link if visible
if (addLinkWrapper && addLinkWrapper.classList.contains('show')) {
addLinkWrapper.classList.remove('show');
if (addLinkToggle) addLinkToggle.classList.remove('active');
if (addLinkToggle) {
addLinkToggle.classList.remove('active');
addLinkToggle.blur();
}
}
// Show search
searchWrapper.classList.add('show');
@@ -129,6 +385,13 @@ function setupMobileAddLink() {
// Hide add link
addLinkWrapper.classList.remove('show');
addLinkToggle.classList.remove('active');
// Force remove active state on mobile - use requestAnimationFrame to ensure it happens after click processing
requestAnimationFrame(() => {
addLinkToggle.blur();
if (document.activeElement === addLinkToggle) {
document.activeElement.blur();
}
});
// Clear input if needed
if (linkInput.value.trim()) {
linkInput.value = '';
@@ -137,7 +400,10 @@ function setupMobileAddLink() {
// Hide search if visible
if (searchWrapper && searchWrapper.classList.contains('show')) {
searchWrapper.classList.remove('show');
if (searchToggle) searchToggle.classList.remove('active');
if (searchToggle) {
searchToggle.classList.remove('active');
searchToggle.blur();
}
if (searchInput.value.trim()) {
searchInput.value = '';
loadLinks();
@@ -161,8 +427,18 @@ function setupLayoutToggle() {
// Toggle dropdown on button click
layoutToggle.addEventListener('click', (e) => {
e.stopPropagation();
const wasVisible = layoutDropdown.classList.contains('show');
layoutDropdown.classList.toggle('show');
layoutToggle.classList.toggle('active');
// Blur button when closing dropdown to remove focus/active state
if (wasVisible) {
requestAnimationFrame(() => {
layoutToggle.blur();
if (document.activeElement === layoutToggle) {
document.activeElement.blur();
}
});
}
});
// Close dropdown when clicking outside
@@ -170,6 +446,13 @@ function setupLayoutToggle() {
if (!layoutToggle.contains(e.target) && !layoutDropdown.contains(e.target)) {
layoutDropdown.classList.remove('show');
layoutToggle.classList.remove('active');
// Force remove active state on mobile - use requestAnimationFrame to ensure it happens after click processing
requestAnimationFrame(() => {
layoutToggle.blur();
if (document.activeElement === layoutToggle) {
document.activeElement.blur();
}
});
}
});
@@ -276,15 +559,17 @@ async function handleAddLink(e) {
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({ url })
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Failed to add link');
const handled = await handleApiError(response, 'Failed to add link');
if (handled) return;
}
const data = await response.json();
// Ensure archived and listIds properties exist
data.archived = data.archived || false;
data.listIds = data.listIds || [];
@@ -297,6 +582,7 @@ async function handleAddLink(e) {
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({ listIds: selectedListFilters })
});
@@ -369,8 +655,7 @@ function handleSearch(e) {
// Handle archive toggle
function handleToggleArchive() {
showArchived = !showArchived;
archiveToggle.classList.toggle('active', showArchived);
showArchived = archiveToggle.checked;
// Re-filter and display links
const query = searchInput.value.trim();
@@ -424,6 +709,9 @@ function displayLinks(links) {
handleAddToLists(linkId);
});
});
// Update UI based on auth status after rendering
updateUIBasedOnAuth();
}
// Create link card HTML
@@ -566,10 +854,14 @@ async function handleArchiveLink(id) {
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({ archived: newArchivedStatus })
});
if (!response.ok) throw new Error('Failed to archive link');
if (!response.ok) {
const handled = await handleApiError(response, 'Failed to archive link');
if (handled) return;
}
// Update local array
link.archived = newArchivedStatus;
@@ -598,10 +890,14 @@ async function handleDeleteLink(id) {
try {
const response = await fetch(`${API_BASE}/${id}`, {
method: 'DELETE'
method: 'DELETE',
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to delete link');
if (!response.ok) {
const handled = await handleApiError(response, 'Failed to delete link');
if (handled) return;
}
// Remove from local array
allLinks = allLinks.filter(link => link.id !== id);
@@ -665,11 +961,27 @@ async function loadLists() {
// Setup lists management
function setupListsManagement() {
// Toggle filter section visibility
listsToggle.addEventListener('click', () => {
listsToggle.addEventListener('click', (e) => {
const isVisible = listFilterWrapper.classList.contains('show');
if (isVisible) {
listFilterWrapper.classList.remove('show');
listsToggle.classList.remove('active');
// Force remove active state on mobile - use double requestAnimationFrame for listsToggle
requestAnimationFrame(() => {
listsToggle.blur();
if (document.activeElement === listsToggle) {
document.activeElement.blur();
}
// Second frame to ensure it's fully cleared
requestAnimationFrame(() => {
listsToggle.blur();
// Force style recalculation
listsToggle.style.pointerEvents = 'none';
setTimeout(() => {
listsToggle.style.pointerEvents = '';
}, 0);
});
});
// Reset filters when hiding the section
selectedListFilters = [];
updateUrlForListFilter();
@@ -817,15 +1129,17 @@ async function handleCreateList() {
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({ name })
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Failed to create list');
const handled = await handleApiError(response, 'Failed to create list');
if (handled) return;
}
const data = await response.json();
allLists.push(data);
newListName.value = '';
renderListsList();
@@ -856,15 +1170,17 @@ async function handleUpdateList(listId) {
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({ name })
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Failed to update list');
const handled = await handleApiError(response, 'Failed to update list');
if (handled) return;
}
const data = await response.json();
const listIndex = allLists.findIndex(l => l.id === listId);
if (listIndex !== -1) {
allLists[listIndex] = data;
@@ -899,15 +1215,17 @@ async function handleTogglePublic(listId) {
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({ public: newPublicStatus })
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Failed to update list public status');
const handled = await handleApiError(response, 'Failed to update list public status');
if (handled) return;
}
const data = await response.json();
// Update local array
const listIndex = allLists.findIndex(l => l.id === listId);
if (listIndex !== -1) {
@@ -930,10 +1248,14 @@ async function handleDeleteList(listId) {
try {
const response = await fetch(`${LISTS_API_BASE}/${listId}`, {
method: 'DELETE'
method: 'DELETE',
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to delete list');
if (!response.ok) {
const handled = await handleApiError(response, 'Failed to delete list');
if (handled) return;
}
allLists = allLists.filter(list => list.id !== listId);
selectedListFilters = selectedListFilters.filter(id => id !== listId);
@@ -992,15 +1314,17 @@ async function handleCheckboxChange(linkId) {
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({ listIds: selectedListIds })
});
const data = await response.json();
if (!response.ok) {
throw new Error('Failed to update link lists');
const handled = await handleApiError(response, 'Failed to update link lists');
if (handled) return;
}
const data = await response.json();
// Update local array
const linkIndex = allLinks.findIndex(l => l.id === linkId);
if (linkIndex !== -1) {
@@ -1022,6 +1346,41 @@ async function handleCheckboxChange(linkId) {
}
}
// Reset all filters and load all links
function resetAllFilters() {
// Clear search
searchInput.value = '';
// Reset archive toggle
showArchived = false;
archiveToggle.checked = false;
// Clear list filters
selectedListFilters = [];
updateUrlForListFilter();
if (listFilterWrapper.classList.contains('show')) {
updateListFilterChips();
}
// Hide search and add link wrappers if visible
searchWrapper.classList.remove('show');
searchToggle.classList.remove('active');
addLinkWrapper.classList.remove('show');
addLinkToggle.classList.remove('active');
// Load all links
loadLinks();
}
// Setup logo click to reset filters
function setupLogoClick() {
const appLogo = document.getElementById('appLogo');
if (appLogo) {
appLogo.style.cursor = 'pointer';
appLogo.addEventListener('click', resetAllFilters);
}
}
// Setup list filtering
function setupListFiltering() {
clearListFilters.addEventListener('click', () => {
@@ -1081,7 +1440,14 @@ function updateUrlForListFilter() {
// Update list filter chips
function updateListFilterChips() {
if (allLists.length === 0) {
// Filter lists based on authentication status
let listsToShow = allLists;
if (!isAuthenticated) {
// Only show public lists when not logged in
listsToShow = allLists.filter(list => list.public === true);
}
if (listsToShow.length === 0) {
// Don't hide the wrapper if it's already shown, just show empty state
listFilterChips.innerHTML = '<p class="empty-lists-message" style="padding: 0.5rem 0; color: var(--text-muted); font-size: 0.875rem;">No lists available. Click Edit to create lists.</p>';
return;
@@ -1092,7 +1458,7 @@ function updateListFilterChips() {
return;
}
listFilterChips.innerHTML = allLists.map(list => {
listFilterChips.innerHTML = listsToShow.map(list => {
const isSelected = selectedListFilters.includes(list.id);
return `
<button class="list-filter-chip ${isSelected ? 'active' : ''}" data-id="${list.id}">

80
public/index.html
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">

390
public/styles.css
View File

@@ -87,11 +87,20 @@ body {
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
transition: opacity 0.3s ease;
}
.app-title:hover {
opacity: 0.8;
}
.title-icon {
font-size: 1.5rem;
filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.3));
width: 36px;
height: 36px;
border-radius: 8px;
object-fit: contain;
display: block;
flex-shrink: 0;
}
.title-text {
@@ -110,40 +119,6 @@ body {
gap: 0.75rem;
}
/* Archive Toggle Button */
.archive-toggle-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 0.5rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.archive-toggle-btn:hover {
background: var(--surface-light);
border-color: var(--secondary-color);
color: var(--secondary-color);
}
.archive-toggle-btn.active {
background: rgba(139, 92, 246, 0.1);
border-color: var(--secondary-color);
color: var(--secondary-color);
}
.archive-toggle-btn svg {
width: 20px;
height: 20px;
}
/* Layout Toggle Button */
.layout-toggle-wrapper {
position: relative;
@@ -439,6 +414,74 @@ body {
height: 20px;
}
/* Login Toggle Button */
.login-toggle-btn {
display: flex;
background: transparent;
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 0.5rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
width: 36px;
height: 36px;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.login-toggle-btn:hover {
background: var(--surface-light);
border-color: var(--primary-color);
color: var(--primary-color);
}
.login-toggle-btn svg {
width: 20px;
height: 20px;
}
/* User Info */
.user-info {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
background: var(--surface-light);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-secondary);
font-size: 0.875rem;
}
.user-info span {
color: var(--text-primary);
}
.logout-btn {
display: flex;
background: transparent;
border: none;
color: var(--text-secondary);
padding: 0.25rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
align-items: center;
justify-content: center;
}
.logout-btn:hover {
background: var(--surface);
color: var(--error);
}
.logout-btn svg {
width: 16px;
height: 16px;
}
/* Add Link Toggle Button */
.add-link-toggle-btn {
display: flex;
@@ -1043,6 +1086,60 @@ body {
.header-right {
flex-wrap: wrap;
}
/* Remove focus outline and active state persistence on mobile nav buttons */
.search-toggle-btn,
.add-link-toggle-btn,
.lists-toggle-btn,
.layout-toggle-btn {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
touch-action: manipulation;
}
.search-toggle-btn:focus,
.add-link-toggle-btn:focus,
.lists-toggle-btn:focus,
.layout-toggle-btn:focus {
outline: none;
}
/* Prevent active state from persisting when button is not in .active class */
.search-toggle-btn:active:not(.active),
.add-link-toggle-btn:active:not(.active),
.lists-toggle-btn:active:not(.active),
.layout-toggle-btn:active:not(.active) {
background: transparent !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
}
/* Ensure buttons without .active class return to default state */
.search-toggle-btn:not(.active),
.add-link-toggle-btn:not(.active),
.lists-toggle-btn:not(.active),
.layout-toggle-btn:not(.active) {
background: transparent !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
}
/* Extra specificity for lists-toggle-btn to ensure it resets */
.lists-toggle-btn:not(.active):not(:hover) {
background: transparent !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
}
/* Hide username text on mobile, show only logout icon */
.user-info span {
display: none;
}
.user-info {
padding: 0.5rem;
gap: 0;
}
.add-link-toggle-btn {
display: flex;
@@ -1168,11 +1265,6 @@ body {
min-width: 100%;
}
.archive-toggle-wrapper {
width: 100%;
justify-content: flex-start;
}
.scroll-to-top-btn {
bottom: 1.5rem;
right: 1.5rem;
@@ -1252,6 +1344,70 @@ body {
gap: 0.5rem;
}
/* Archive Toggle Switch */
.archive-toggle-switch {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
flex-shrink: 0;
}
.archive-toggle-label {
font-size: 0.875rem;
color: var(--text-secondary);
user-select: none;
white-space: nowrap;
}
.archive-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.archive-toggle-slider {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
cursor: pointer;
background-color: var(--border);
transition: 0.3s;
border-radius: 24px;
flex-shrink: 0;
}
.archive-toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.archive-toggle-switch input:checked + .archive-toggle-slider {
background-color: var(--secondary-color);
}
.archive-toggle-switch input:checked + .archive-toggle-slider:before {
transform: translateX(20px);
}
.archive-toggle-switch:hover .archive-toggle-slider {
background-color: var(--text-muted);
}
.archive-toggle-switch input:checked:hover + .archive-toggle-slider {
background-color: var(--primary-color);
}
.edit-lists-btn {
background: transparent;
border: 1px solid var(--border);
@@ -1582,6 +1738,149 @@ body {
padding: 2rem;
}
/* Login Modal */
.login-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.login-modal.show {
opacity: 1;
visibility: visible;
}
.login-modal-content {
background: var(--surface);
border-radius: 1rem;
width: 90%;
max-width: 400px;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px var(--shadow-lg);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.login-modal.show .login-modal-content {
transform: scale(1);
}
.login-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8rem;
border-bottom: 1px solid var(--border);
}
.login-modal-header h2 {
margin: 0;
font-size: 1.5rem;
color: var(--text-primary);
}
.login-modal-body {
padding: 1.5rem;
}
.login-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
}
.form-group input {
background: var(--background);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 0.75rem;
border-radius: 0.5rem;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: var(--primary-color);
}
.login-error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid var(--error);
color: var(--error);
padding: 0.75rem;
border-radius: 0.5rem;
font-size: 0.875rem;
}
.btn-login {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn-login:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
.btn-login:active:not(:disabled) {
transform: translateY(0);
}
.btn-login:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-login .btn-loader {
display: none;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* List Selection Overlay */
.list-selection-overlay {
position: fixed;
@@ -1626,7 +1925,7 @@ body {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
padding: 0.8rem;
border-bottom: 1px solid var(--border);
}
@@ -1778,3 +2077,10 @@ body {
}
}
/* Hide page title on very small screens */
@media (max-width: 357px) {
.app-title {
display: none;
}
}

2
public/sw.js
View File

@@ -1,4 +1,4 @@
const CACHE_NAME = 'linkding-v2';
const CACHE_NAME = 'linkding-v2.0.1';
const urlsToCache = [
'/',
'/index.html',