horoli/our_recipe_atlas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: refine navigation and account access flow

Browse Source
This commit is contained in:
horoli
2026-08-14 14:16:04 +09:00
parent cee36bf12d
commit 146e78cddf
12 changed files with 239 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/app.js
+20 -43
View File
@@ -1,8 +1,11 @@
import { apiRequest } from './api.js';
import { mountAppBar } from './app-bar.js';
import { bindLogout, loadSession } from './auth.js';
import { searchRecipes } from './recipe-search.js';
import { bindScrollToTop } from './scroll-to-top.js';
const appBar = mountAppBar({ onManageAccess: openAccessManager });
const elements = {
importForm: document.querySelector('#import-form'),
importStatus: document.querySelector('#import-status'),
@@ -17,13 +20,6 @@ const elements = {
tagFilterOptions: document.querySelector('#tag-filter-options'),
toggleTagFilter: document.querySelector('#toggle-tag-filter'),
clearTagFilter: document.querySelector('#clear-tag-filter'),
accessMenuButton: document.querySelector('#access-menu-button'),
accessDrawer: document.querySelector('#access-drawer'),
closeAccessDrawer: document.querySelector('#close-access-drawer'),
drawerBackdrop: document.querySelector('#drawer-backdrop'),
drawerUserName: document.querySelector('#drawer-user-name'),
drawerUserEmail: document.querySelector('#drawer-user-email'),
openAccessOverlay: document.querySelector('#open-access-overlay'),
accessOverlay: document.querySelector('#access-overlay'),
closeAccessOverlay: document.querySelector('#close-access-overlay'),
accessOverlayBackdrop: document.querySelector('#access-overlay-backdrop'),
@@ -199,20 +195,7 @@ async function loadAllowedEmails() {
}
function updatePageLock() {
document.body.classList.toggle(
'drawer-open',
!elements.accessDrawer.hidden || !elements.accessOverlay.hidden,
);
}
function setAccessDrawerOpen(open) {
elements.accessMenuButton.setAttribute('aria-expanded', String(open));
elements.accessDrawer.setAttribute('aria-hidden', String(!open));
elements.accessDrawer.hidden = !open;
elements.drawerBackdrop.hidden = !open;
updatePageLock();
if (open) elements.closeAccessDrawer.focus();
else elements.accessMenuButton.focus();
document.body.classList.toggle('drawer-open', !elements.accessOverlay.hidden);
}
function setAccessOverlayOpen(open) {
@@ -221,7 +204,16 @@ function setAccessOverlayOpen(open) {
elements.accessOverlayBackdrop.hidden = !open;
updatePageLock();
if (open) elements.accessEmail.focus();
else elements.accessMenuButton.focus();
else appBar.focusMenuButton();
}
async function openAccessManager() {
setAccessOverlayOpen(true);
try {
await loadAllowedEmails();
} catch (error) {
showToast(error.message);
}
}
function ingredientGroupTemplate(group, groupIndex) {
@@ -444,28 +436,11 @@ elements.clearRecipeSearch.addEventListener('click', () => {
renderRecipes();
});
elements.accessMenuButton.addEventListener('click', () => {
setAccessDrawerOpen(true);
});
elements.openAccessOverlay.addEventListener('click', async () => {
setAccessDrawerOpen(false);
setAccessOverlayOpen(true);
try {
await loadAllowedEmails();
} catch (error) {
showToast(error.message);
}
});
elements.closeAccessDrawer.addEventListener('click', () => setAccessDrawerOpen(false));
elements.drawerBackdrop.addEventListener('click', () => setAccessDrawerOpen(false));
elements.closeAccessOverlay.addEventListener('click', () => setAccessOverlayOpen(false));
elements.accessOverlayBackdrop.addEventListener('click', () => setAccessOverlayOpen(false));
document.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
if (!elements.accessOverlay.hidden) setAccessOverlayOpen(false);
else if (!elements.accessDrawer.hidden) setAccessDrawerOpen(false);
});
elements.accessForm.addEventListener('submit', async (event) => {
@@ -507,9 +482,11 @@ elements.allowedEmailList.addEventListener('click', async (event) => {
bindLogout();
bindScrollToTop(elements.scrollToTop);
currentUser = await loadSession();
elements.drawerUserName.textContent = currentUser.name || currentUser.email;
elements.drawerUserEmail.textContent = currentUser.email;
appBar.setUser(currentUser);
await loadRecipes();
if (currentUser.canManageAccess) {
elements.openAccessOverlay.hidden = false;
if (
currentUser.canManageAccess
&& new URLSearchParams(window.location.search).get('manage-access') === '1'
) {
await openAccessManager();
}