fix: login component behavior when logging out and refreshing the page (

go-shiori#1022) * fix: Validate session on login component mount to prevent unnecessary login form * fix: Replace non-existent `api/v1/auth/check` with `api/v1/auth/me` * feat: Prevent login form flickering by conditionally rendering only when needed * feat: Show login component after user logout * fix: make styles
hamzamoudnib · Dec 9, 2024 · 6ccd64f · 6ccd64f
1 parent fb51755
commit 6ccd64f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/internal/view/assets/js/component/login.js b/internal/view/assets/js/component/login.js
@@ -128,20 +128,42 @@ export default {
 				});
 		},
 	},
-	mounted() {
-		// Clear any existing cookies
+	async mounted() {
+		// Check if there's a valid session first
+		const token = localStorage.getItem("shiori-token");
+		if (token) {
+			try {
+				const response = await fetch(
+					new URL("api/v1/auth/me", document.baseURI),
+					{
+						headers: {
+							Authorization: `Bearer ${token}`,
+						},
+					},
+				);
+
+				if (response.ok) {
+					// Valid session exists, emit login success
+					this.$emit("login-success");
+					return;
+				}
+			} catch (err) {
+				// Continue with login form if check fails
+			}
+		}
+
+		// Clear session data if we reach here
 		document.cookie = `session-id=; Path=${
 			new URL(document.baseURI).pathname
 		}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
 		document.cookie = `token=; Path=${
 			new URL(document.baseURI).pathname
 		}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
 
-		// Clear local storage
 		localStorage.removeItem("shiori-account");
 		localStorage.removeItem("shiori-token");
 
-		// <input autofocus> wasn't working all the time, so I'm putting this here as a fallback
+		// Focus username input
 		this.$nextTick(() => {
 			const usernameInput = document.querySelector("#username");
 			if (usernameInput) {

diff --git a/internal/view/index.html b/internal/view/index.html
@@ -22,7 +22,7 @@
 
 <body>
 	<div id="app">
-		<login-view v-if="isLoggedIn === false" @login-success="onLoginSuccess"></login-view>
+		<login-view v-if="isLoggedIn === false && loginRequired" @login-success="onLoginSuccess"></login-view>
 		<div id="main-scene" v-else-if="isLoggedIn === true">
 		<div id="main-sidebar">
 			<a v-for="item in sidebarItems" :title="item.title" :class="{active: activePage === item.page}" @click="switchPage(item.page)">
@@ -59,7 +59,8 @@
 				'login-view': LoginComponent
 			},
 			data: {
-				isLoggedIn: false,
+				isLoggedIn: null,
+				loginRequired: false,
 				activePage: "page-home",
 				sidebarItems: [{
 					title: "Home",
@@ -103,6 +104,7 @@
 								document.cookie = `session-id=; Path=${new URL(document.baseURI).pathname}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
 								document.cookie = `token=; Path=${new URL(document.baseURI).pathname}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
 								this.isLoggedIn = false;
+								this.loginRequired = true;
 							}).catch(err => {
 								this.dialog.loading = false;
 								this.getErrorMessage(err).then(msg => {
@@ -169,7 +171,7 @@
 					}
 
 					try {
-						const response = await fetch(new URL("api/v1/auth/check", document.baseURI), {
+						const response = await fetch(new URL("api/v1/auth/me", document.baseURI), {
 							headers: {
 								"Authorization": `Bearer ${token}`
 							}
@@ -197,6 +199,8 @@
 					if (isValid) {
 						this.loadSetting();
 						this.loadAccount();
+					} else {
+						this.loginRequired = true;
 					}
 				}
 			},