TELESTION-437: Seamless Login and Redirect Experience

frontend-react/src/lib/application/routes/dashboard-editor/routing.ts

@@ -13,10 +13,18 @@ import {
 } from '../../../user-data';
 import { isUserDataUpToDate } from '../../../utils.ts';
 import { TelestionOptions } from '../../model.ts';
+import { setResumeAfterLogin } from '../login';
 
 export function dashboardEditorLoader({ version }: TelestionOptions) {
 	return ({ params }: LoaderFunctionArgs) => {
 		if (!isLoggedIn()) {
+			if (params.dashboardId) {
+				setResumeAfterLogin(
+					generatePath('/dashboards/:dashboardId', {
+						dashboardId: params.dashboardId
+					})
+				);
+			}
 			return redirect('/login');
 		}
 

frontend-react/src/lib/application/routes/dashboard-page/routing.ts

@@ -1,5 +1,6 @@
 import {
 	ActionFunctionArgs,
+	generatePath,
 	LoaderFunctionArgs,
 	redirect
 } from 'react-router-dom';
@@ -10,10 +11,18 @@ import { getUserData, setUserData, UserData } from '../../../user-data';
 import { isUserDataUpToDate } from '../../../utils.ts';
 
 import { dashboardCreateAction } from '../dashboard.ts';
+import { setResumeAfterLogin } from '../login';
 
 export function dashboardPageLoader({ version }: TelestionOptions) {
 	return ({ params }: LoaderFunctionArgs) => {
 		if (!isLoggedIn()) {
+			if (params.dashboardId) {
+				setResumeAfterLogin(
+					generatePath('/dashboards/:dashboardId', {
+						dashboardId: params.dashboardId
+					})
+				);
+			}
 			return redirect('/login');
 		}
 

frontend-react/src/lib/application/routes/login/routing.ts

@@ -3,6 +3,23 @@ import { isLoggedIn, login, LoginError } from '../../../auth';
 import { TelestionOptions } from '../../model.ts';
 import { wait } from '../../../utils.ts';
 
+let resumeAfterLogin: string | undefined = undefined;
+
+/**
+ * Sets a URL that the login action redirects after the user has logged in.
+ * @param url - the url the login action redirects after the user login
+ */
+export function setResumeAfterLogin(url: string) {
+	resumeAfterLogin = url;
+}
+
+/**
+ * Resets the url the login action redirects after the user has logged in.
+ */
+export function resetResumeAfterLogin() {
+	resumeAfterLogin = undefined;
+}
+
 export function loginLoader({ defaultBackendUrl }: TelestionOptions) {
 	return () => {
 		if (isLoggedIn()) {
@@ -52,7 +69,8 @@ export function loginAction() {
 				login(natsUrl, username, password as string),
 				wait(500)
 			]);
-			return redirect('/');
+			console.log('Resume after login url:', resumeAfterLogin);
+			return redirect(resumeAfterLogin ?? '/');
 		} catch (err) {
 			console.error(err);
 			if (err instanceof LoginError) {

frontend-react/src/lib/application/routes/logout.ts

@@ -1,6 +1,7 @@
 import { redirect } from 'react-router-dom';
 import { isLoggedIn, logout } from '../../auth';
 import { wait } from '../../utils.ts';
+import { resetResumeAfterLogin } from './login';
 
 export function logoutLoader() {
 	return async () => {
@@ -9,6 +10,7 @@ export function logoutLoader() {
 		}
 
 		await Promise.all([logout(), wait(500)]);
+		resetResumeAfterLogin();
 		return redirect('/login');
 	};
 }