M2-6175: Allow hotlinking to activity

src/entities/user/model/hooks/useOnLogin.ts

@@ -5,7 +5,6 @@ import { ROUTES } from '~/shared/constants';
 import { Mixpanel, secureTokensStorage, useCustomNavigation, useEncryption } from '~/shared/utils';
 
 type Params = {
-  isInvitationFlow?: boolean | undefined;
   backRedirectPath?: string | undefined;
 };
 
@@ -40,8 +39,8 @@ export const useOnLogin = (params: Params) => {
     setUser({ id: user.id, email: user.email, firstName: user.firstName, lastName: user.lastName });
     secureTokensStorage.setTokens(tokens);
 
-    if (params.isInvitationFlow) {
-      navigate(params.backRedirectPath as string);
+    if (params.backRedirectPath !== undefined) {
+      navigate(params.backRedirectPath);
     } else {
       Mixpanel.track('Login Successful');
       Mixpanel.login(user.id);

src/features/Login/ui/LoginForm.tsx

@@ -25,7 +25,6 @@ export const LoginForm = ({ locationState }: LoginFormProps) => {
   const { handleSubmit } = form;
 
   const { onLoginSuccess } = userModel.hooks.useOnLogin({
-    isInvitationFlow: locationState?.isInvitationFlow as boolean,
     backRedirectPath: locationState?.backRedirectPath as string,
   });
 

src/features/Signup/ui/SignupForm.tsx

@@ -32,7 +32,6 @@ export const SignupForm = ({ locationState }: SignupFormProps) => {
 
   const [terms, setTerms] = useState<boolean>(false);
   const { onLoginSuccess } = userModel.hooks.useOnLogin({
-    isInvitationFlow: locationState?.isInvitationFlow as boolean,
     backRedirectPath: locationState?.backRedirectPath as string,
   });
 

src/pages/ActivityDetails/index.tsx

@@ -3,6 +3,8 @@ import { useParams } from 'react-router-dom';
 
 import { useCustomTranslation } from '~/shared/utils';
 import { ActivityDetailsContext, ActivityDetailsWidget } from '~/widgets/ActivityDetails';
+import { AuthorizationGuard } from '~/widgets/AuthorizationGuard';
+import { LoginWithRedirect } from '~/widgets/LoginWithRedirect';
 
 function ActivityDetailsPage() {
   const { appletId, activityId, eventId } = useParams();
@@ -13,11 +15,13 @@ function ActivityDetailsPage() {
   }
 
   return (
-    <Box display="flex" flex={1}>
-      <ActivityDetailsContext.Provider value={{ appletId, activityId, eventId, isPublic: false }}>
-        <ActivityDetailsWidget />
-      </ActivityDetailsContext.Provider>
-    </Box>
+    <AuthorizationGuard fallback={<LoginWithRedirect />}>
+      <Box display="flex" flex={1}>
+        <ActivityDetailsContext.Provider value={{ appletId, activityId, eventId, isPublic: false }}>
+          <ActivityDetailsWidget />
+        </ActivityDetailsContext.Provider>
+      </Box>
+    </AuthorizationGuard>
   );
 }
 

src/pages/Invitation/index.tsx

@@ -10,7 +10,6 @@ export default function InvitationPage() {
   const location = useLocation();
 
   const redirectState = {
-    isInvitationFlow: true,
     backRedirectPath: `${location.pathname}${location.search}`,
   };
 

src/pages/PrivateJoin/index.tsx

@@ -8,7 +8,6 @@ export default function PrivateJoinPage() {
   const location = useLocation();
 
   const redirectState = {
-    isInvitationFlow: true,
     backRedirectPath: `${location.pathname}${location.search}`,
   };
 

src/pages/TransferOwnership/index.tsx

@@ -23,7 +23,6 @@ export default function TransferOwnershipPage() {
   }
 
   const redirectState = {
-    isInvitationFlow: true,
     backRedirectPath: `${location.pathname}${location.search}`,
   };
 

src/pages/UnauthorizedRoutes.tsx

@@ -2,6 +2,7 @@ import { lazy } from 'react';
 
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import ActivityDetailsPage from './ActivityDetails';
 import ForgotPasswordPage from './ForgotPassword';
 import LoginPage from './Login';
 import SignupPage from './Signup';
@@ -22,6 +23,7 @@ function UnauthorizedRoutes() {
       <Route path={ROUTES.publicActivityDetails.path} element={<PublicActivityDetailsPage />} />
 
       <Route element={<Layout />}>
+        <Route path={ROUTES.activityDetails.path} element={<ActivityDetailsPage />} />
         <Route index path={ROUTES.login.path} element={<LoginPage />} />
         <Route path={ROUTES.signup.path} element={<SignupPage />} />
         <Route path={ROUTES.forgotPassword.path} element={<ForgotPasswordPage />} />

src/widgets/LoginWithRedirect/index.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { ROUTES } from '~/shared/constants';
+
+interface LoginWithRedirectProps {
+  /**
+   * Where to go after the user logs in. Defaults to the current URL
+   */
+  redirectTo?: string;
+}
+
+/**
+ * An empty component that automatically redirects to the login page if the user is not authenticated. Pass
+ * the redirect state to specify where to go after the user logs in.
+ */
+export const LoginWithRedirect = ({ redirectTo }: LoginWithRedirectProps) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  useEffect(() => {
+    const backRedirectPath = redirectTo || `${location.pathname}${location.search}`;
+    navigate(ROUTES.login.path, { state: { backRedirectPath } });
+  }, [navigate, redirectTo]);
+
+  return null;
+};