Avoid preventing rendering when albums is returning 401 (#2745)

resources/js/components/headers/AlbumHeader.vue

@@ -1,6 +1,6 @@
 <template>
-	<DropBox v-if="canUpload" v-model:visible="isImportFromDropboxOpen" :album-id="props.album.id" />
 	<ImportFromLink v-if="canUpload" v-model:visible="isImportFromLinkOpen" :parent-id="props.album.id" @refresh="refresh" />
+	<DropBox v-if="canUpload" v-model:visible="isImportFromDropboxOpen" :album-id="props.album.id" />
 	<Toolbar class="w-full border-0 h-14" v-if="album">
 		<template #start>
 			<Button icon="pi pi-angle-left" class="mr-2 border-none" severity="secondary" text @click="goBack" />

resources/js/components/headers/AlbumsHeader.vue

@@ -1,6 +1,4 @@
 <template>
-	<LoginModal v-if="props.user.id === null" v-model:visible="is_login_open" @logged-in="refresh" @open-webauthn="isWebAuthnOpen = true" />
-	<WebauthnModal v-if="props.user.id === null && !isWebAuthnUnavailable" v-model:visible="isWebAuthnOpen" @logged-in="refresh" />
 	<ImportFromServer v-if="canUpload" v-model:visible="isImportFromServerOpen" />
 	<ImportFromLink v-if="canUpload" v-model:visible="isImportFromLinkOpen" :parent-id="null" />
 	<DropBox v-if="canUpload" v-model:visible="isImportFromDropboxOpen" :album-id="null" />
@@ -175,8 +173,6 @@ const { addmenu, addMenu, isImportFromServerOpen } = useContextMenuAlbumsAdd(
 const canUpload = computed(() => props.user.id !== null);
 const isLoginLeft = computed(() => props.config.login_button_position === "left");
 
-const isWebAuthnUnavailable = computed(() => WebAuthnService.isWebAuthnUnavailable());
-
 function openAddMenu(event: Event) {
 	addmenu.value.show(event);
 }
@@ -191,8 +187,6 @@ function openSearch() {
 
 onKeyStroke("n", () => !shouldIgnoreKeystroke() && props.rights.can_upload && (is_create_album_visible.value = true));
 onKeyStroke("u", () => !shouldIgnoreKeystroke() && props.rights.can_upload && (is_upload_visible.value = true));
-onKeyStroke("l", () => !shouldIgnoreKeystroke() && props.user.id === null && (is_login_open.value = true));
-onKeyStroke("k", () => !shouldIgnoreKeystroke() && props.user.id === null && !isWebAuthnUnavailable.value && (isWebAuthnOpen.value = true));
 onKeyStroke("/", () => !shouldIgnoreKeystroke() && props.config.is_search_accessible && openSearch());
 
 // on key stroke escape:

resources/js/components/modals/LoginModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<Dialog v-model:visible="visible" modal pt:root:class="border-none" pt:mask:style="backdrop-filter: blur(2px)">
+	<Dialog v-model:visible="is_login_open" modal pt:root:class="border-none" pt:mask:style="backdrop-filter: blur(2px)">
 		<template #container="{ closeCallback }">
 			<form v-focustrap class="flex flex-col gap-4 relative max-w-full text-sm rounded-md pt-9">
 				<div class="flex justify-center gap-2">
@@ -49,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from "vue";
+import { ref } from "vue";
 import FloatLabel from "primevue/floatlabel";
 import Button from "primevue/button";
 import Dialog from "primevue/dialog";
@@ -62,12 +62,10 @@ import AlbumService from "@/services/album-service";
 import OauthService from "@/services/oauth-service";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
-
-const visible = defineModel("visible", { default: false }) as Ref<boolean>;
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 const emits = defineEmits<{
 	"logged-in": [];
-	"open-webauthn": [];
 }>();
 
 type OauthProvider = {
@@ -79,16 +77,18 @@ type OauthProvider = {
 const username = ref("");
 const password = ref("");
 const authStore = useAuthStore();
+const togglableStore = useTogglablesStateStore();
 const lycheeStore = useLycheeStateStore();
 const { is_se_enabled } = storeToRefs(lycheeStore);
+const { is_login_open, is_webauthn_open } = storeToRefs(togglableStore);
 const invalidPassword = ref(false);
 
 const oauths = ref<OauthProvider[] | undefined>(undefined);
 
 function login() {
 	AuthService.login(username.value, password.value)
 		.then(() => {
-			visible.value = false;
+			is_login_open.value = false;
 			authStore.setUser(null);
 			invalidPassword.value = false;
 			AlbumService.clearCache();
@@ -120,10 +120,10 @@ function mapToOauths(provider: App.Enum.OauthProvidersType): OauthProvider {
 fetchOauths();
 
 function openWebAuthn() {
-	visible.value = false;
+	is_login_open.value = false;
+	is_webauthn_open.value = true;
 	username.value = "";
 	password.value = "";
 	invalidPassword.value = false;
-	emits("open-webauthn");
 }
 </script>

resources/js/components/modals/WebauthnModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<Dialog v-model:visible="visible" modal pt:root:class="border-none" pt:mask:style="backdrop-filter: blur(2px)">
+	<Dialog v-model:visible="visible" modal pt:root:class="border-none" pt:mask:style="backdrop-filter: blur(2px)" v-if="!isWebAuthnUnavailable">
 		<template #container="{ closeCallback }">
 			<form v-focustrap class="flex flex-col gap-4 relative max-w-full text-sm rounded-md pt-9">
 				<div class="inline-flex flex-col gap-2 px-9">
@@ -25,7 +25,7 @@ import Dialog from "primevue/dialog";
 import FloatLabel from "primevue/floatlabel";
 import Button from "primevue/button";
 import { useToast } from "primevue/usetoast";
-import { Ref, ref } from "vue";
+import { computed, Ref, ref } from "vue";
 import InputText from "../forms/basic/InputText.vue";
 import { trans } from "laravel-vue-i18n";
 import WebAuthnService from "@/services/webauthn-service";
@@ -38,6 +38,8 @@ const emits = defineEmits<{
 	"logged-in": [];
 }>();
 
+const isWebAuthnUnavailable = computed<boolean>(() => WebAuthnService.isWebAuthnUnavailable());
+
 const authStore = useAuthStore();
 const username = ref("");
 const userId = ref<number | null>(null);

resources/js/composables/album/albumsRefresher.ts

@@ -49,6 +49,7 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 				// We are required to login :)
 				if (error.response.status === 401) {
 					isLoginOpen.value = true;
+					console.error("require login");
 				} else {
 					console.error(error);
 				}

resources/js/config/axios-config.ts

@@ -27,7 +27,7 @@ const AxiosConfig = {
 			},
 			function (error: any): Promise<never> {
 				if (
-					["Password required", "Password is invalid", "Album is not enabled for password-based access"].find(
+					["Password required", "Password is invalid", "Album is not enabled for password-based access", "Login required."].find(
 						(e) => e === error.response.data.message,
 					) !== undefined
 				) {

resources/js/stores/ModalsState.ts

@@ -10,6 +10,7 @@ export const useTogglablesStateStore = defineStore("togglables-store", {
 		left_menu_open: false,
 		is_full_screen: false,
 		is_login_open: false,
+		is_webauthn_open: false,
 
 		// upload
 		is_upload_visible: false,

resources/js/views/Diagnostics.vue

@@ -60,7 +60,6 @@ function copy() {
 		return;
 	}
 
-	console.log(errorLoaded.value);
 	const errorText = errorLoaded.value
 		?.filter((errorLine) => errorLine.type !== undefined)
 		.map((errorLines) => `${errorLines.type.padEnd(7)}: ${errorLines.line}`)

resources/js/views/gallery-panels/Album.vue

@@ -1,5 +1,7 @@
 <template>
 	<UploadPanel v-if="album?.rights.can_upload" @refresh="refresh" key="upload_modal" />
+	<LoginModal v-if="user?.id === null" @logged-in="refresh" />
+	<WebauthnModal v-if="user?.id === null" @logged-in="refresh" />
 	<AlbumCreateDialog v-if="album?.rights.can_upload && config?.is_model_album" v-model:parent-id="album.id" key="create_album_modal" />
 	<div class="h-svh overflow-y-hidden">
 		<!-- Trick to avoid the scroll bar to appear on the right when switching to full screen -->
@@ -13,7 +15,6 @@
 				@toggle-slide-show="toggleSlideShow"
 			/>
 		</Collapse>
-		<LoginModal v-if="user?.id === null" v-model:visible="is_login_open" @logged-in="refresh" />
 		<Unlock :albumid="albumid" :visible="isPasswordProtected" @reload="refresh" @fail="is_login_open = true" />
 		<template v-if="config && album">
 			<div
@@ -212,6 +213,7 @@ import UploadPanel from "@/components/modals/UploadPanel.vue";
 import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
 import { useScrollable } from "@/composables/album/scrollable";
 import { useGetLayoutConfig } from "@/layouts/PhotoLayout";
+import WebauthnModal from "@/components/modals/WebauthnModal.vue";
 
 const route = useRoute();
 const router = useRouter();

resources/js/views/gallery-panels/Albums.vue

@@ -3,6 +3,8 @@
 	<KeybindingsHelp v-model:visible="isKeybindingsHelpOpen" v-if="user?.id" />
 	<AlbumCreateDialog v-if="rootRights?.can_upload" :parent-id="null" key="create_album_modal" />
 	<AlbumCreateTagDialog v-if="rootRights?.can_upload" key="create_tag_album_modal" />
+	<LoginModal v-if="user?.id === null" @logged-in="refresh" />
+	<WebauthnModal v-if="user?.id === null" @logged-in="refresh" />
 
 	<div v-if="rootConfig && rootRights" @click="unselect" class="h-svh overflow-y-auto" id="galleryView" v-on:scroll="onScroll">
 		<Collapse :when="!is_full_screen">
@@ -155,6 +157,8 @@ import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
 import AlbumCreateTagDialog from "@/components/forms/album/AlbumCreateTagDialog.vue";
 import { useScrollable } from "@/composables/album/scrollable";
 import { EmptyPhotoCallbacks } from "@/utils/Helpers";
+import WebauthnModal from "@/components/modals/WebauthnModal.vue";
+import LoginModal from "@/components/modals/LoginModal.vue";
 
 const auth = useAuthStore();
 const router = useRouter();
@@ -166,7 +170,7 @@ togglableStore.resetSearch();
 const albumid = ref("gallery");
 
 const { onScroll, setScroll } = useScrollable(togglableStore, albumid);
-const { is_full_screen, is_login_open, is_upload_visible, list_upload_files } = storeToRefs(togglableStore);
+const { is_full_screen, is_login_open, is_upload_visible, list_upload_files, is_webauthn_open } = storeToRefs(togglableStore);
 const { are_nsfw_visible, title } = storeToRefs(lycheeStore);
 
 const photos = ref([]); // unused.
@@ -224,6 +228,8 @@ onKeyStroke("m", () => !shouldIgnoreKeystroke() && rootRights.value?.can_edit &&
 onKeyStroke(["Delete", "Backspace"], () => !shouldIgnoreKeystroke() && rootRights.value?.can_edit && hasSelection() && toggleDelete());
 
 onKeyStroke([getModKey(), "a"], () => !shouldIgnoreKeystroke() && selectEverything());
+onKeyStroke("l", () => !shouldIgnoreKeystroke() && user.value?.id === null && (is_login_open.value = true));
+onKeyStroke("k", () => !shouldIgnoreKeystroke() && user.value?.id === null && (is_webauthn_open.value = true));
 
 const { onPaste, dragEnd, dropUpload } = useMouseEvents(rootRights, is_upload_visible, list_upload_files);