From aafec288858b2cc9e11fd0b2470891083e8344df Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 5 Jul 2025 21:32:54 +0200
Subject: [PATCH] Improve flow of joining a tablo

---
 ui/src/App.tsx                                | 27 +++++++++++++------
 .../BrandButtons/LoginWithGoogle.test.tsx     |  4 +--
 .../BrandButtons/LoginWithGoogle.tsx          |  8 ++++--
 ui/src/components/ProtectedRoute.tsx          | 20 +++++++++++---
 ui/src/hooks/auth.ts                          | 27 ++++++++++++++++---
 ui/src/pages/join.tsx                         | 15 +++++++++++
 ui/src/pages/login.tsx                        |  9 ++++---
 ui/src/pages/oauth-signin.tsx                 | 10 +++++--
 ui/src/pages/signup.tsx                       |  6 +++--
 9 files changed, 99 insertions(+), 27 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 610cca6..1b121e7 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -45,14 +45,7 @@ export const App = () => {
                       </Layout>
                     }
                   />
-                  <Route
-                    path="join/:tablo_name"
-                    element={
-                      <Layout>
-                        <JoinPage />
-                      </Layout>
-                    }
-                  />
+
                   <Route
                     path="devis"
                     element={
@@ -104,6 +97,24 @@ export const App = () => {
                     }
                   />
                 </Route>
+
+                <Route
+                  element={
+                    <ProtectedRoute
+                      fallback="/login"
+                      shouldRedirectToCurrentPage
+                    />
+                  }
+                >
+                  <Route
+                    path="join/:tablo_name"
+                    element={
+                      <Layout>
+                        <JoinPage />
+                      </Layout>
+                    }
+                  />
+                </Route>
                 <Route path="login-with-oauth" element={<OAuthSigninPage />} />
                 <Route path="landing" element={<LandingPage />} />
                 <Route element={<PublicRoute />}>
diff --git a/ui/src/components/BrandButtons/LoginWithGoogle.test.tsx b/ui/src/components/BrandButtons/LoginWithGoogle.test.tsx
index 3174855..78dfd38 100644
--- a/ui/src/components/BrandButtons/LoginWithGoogle.test.tsx
+++ b/ui/src/components/BrandButtons/LoginWithGoogle.test.tsx
@@ -14,7 +14,7 @@ describe("LoginWithGoogle", () => {
       loginWithGoogle: mockLoginWithGoogle,
     });
 
-    render(<LoginWithGoogle />);
+    render(<LoginWithGoogle redirectUrl={null} />);
 
     const button = screen.getByRole("button", {
       name: /Continuer avec Google/i,
@@ -28,7 +28,7 @@ describe("LoginWithGoogle", () => {
       loginWithGoogle: mockLoginWithGoogle,
     });
 
-    render(<LoginWithGoogle />);
+    render(<LoginWithGoogle redirectUrl={null} />);
 
     const button = screen.getByRole("button", {
       name: /Continuer avec Google/i,
diff --git a/ui/src/components/BrandButtons/LoginWithGoogle.tsx b/ui/src/components/BrandButtons/LoginWithGoogle.tsx
index 0dedcd0..7417dee 100644
--- a/ui/src/components/BrandButtons/LoginWithGoogle.tsx
+++ b/ui/src/components/BrandButtons/LoginWithGoogle.tsx
@@ -1,8 +1,12 @@
 import "./login-with-google.css";
 import { useLoginGoogle } from "../../hooks/auth";
 
-export function LoginWithGoogle() {
-  const { loginWithGoogle } = useLoginGoogle();
+export function LoginWithGoogle({
+  redirectUrl,
+}: {
+  redirectUrl: string | null;
+}) {
+  const { loginWithGoogle } = useLoginGoogle({ redirectUrl });
 
   return (
     <button className="gsi-material-button" onClick={() => loginWithGoogle()}>
diff --git a/ui/src/components/ProtectedRoute.tsx b/ui/src/components/ProtectedRoute.tsx
index fc1a607..a2eb9aa 100644
--- a/ui/src/components/ProtectedRoute.tsx
+++ b/ui/src/components/ProtectedRoute.tsx
@@ -8,7 +8,15 @@ interface ProtectedRouteProps {
   fallback?: string;
 }
 
-export const ProtectedRoute = ({ fallback }: ProtectedRouteProps) => {
+interface ProtectedRouteProps {
+  fallback?: string;
+  shouldRedirectToCurrentPage?: boolean;
+}
+
+export const ProtectedRoute = ({
+  fallback,
+  shouldRedirectToCurrentPage,
+}: ProtectedRouteProps) => {
   const { session } = useSession();
   const [isLoading, setIsLoading] = useState(true);
 
@@ -38,14 +46,18 @@ export const ProtectedRoute = ({ fallback }: ProtectedRouteProps) => {
     status = "should-pass";
   }
 
+  const redirectUrl = shouldRedirectToCurrentPage
+    ? `${fallback ?? "/login"}?redirect=${encodeURIComponent(
+        window.location.pathname
+      )}`
+    : fallback ?? "/login";
+
   return (
     <>
       {match(status)
         .with("loading", () => <LoadingSpinner />)
         .with("should-land-user", () => <Navigate to="/landing" replace />)
-        .with("should-redirect", () => (
-          <Navigate to={fallback ?? "/login"} replace />
-        ))
+        .with("should-redirect", () => <Navigate to={redirectUrl} replace />)
         .with("should-pass", () => <Outlet />)
         .exhaustive()}
     </>
diff --git a/ui/src/hooks/auth.ts b/ui/src/hooks/auth.ts
index 6daf054..95db513 100644
--- a/ui/src/hooks/auth.ts
+++ b/ui/src/hooks/auth.ts
@@ -122,7 +122,7 @@ export function useSignUpToStream() {
   });
   return { signUpToStream };
 }
-export function useLoginEmail() {
+export function useLoginEmail({ redirectUrl }: { redirectUrl: string | null }) {
   const navigate = useNavigate();
   const [errors, setErrors] = useState<Record<string, string>>({});
   const { signUpToStream } = useSignUpToStream();
@@ -143,7 +143,11 @@ export function useLoginEmail() {
       return response;
     },
     onSuccess: () => {
-      navigate("/");
+      if (redirectUrl) {
+        navigate(decodeURIComponent(redirectUrl));
+      } else {
+        navigate("/");
+      }
     },
     onError: (error) => {
       match(error.code)
@@ -168,13 +172,28 @@ export function useLoginEmail() {
   return { mutate, isPending, errors };
 }
 
-export function useLoginGoogle() {
+export function useLoginGoogle({
+  redirectUrl,
+}: {
+  redirectUrl: string | null;
+}) {
+  console.log({
+    redirectTo: redirectUrl
+      ? `${
+          window.location.origin
+        }/login-with-oauth?redirect=${encodeURIComponent(redirectUrl)}`
+      : `${window.location.origin}/login-with-oauth`,
+  });
   const { mutate } = useMutation({
     mutationFn: async () => {
       const { data, error } = await supabase.auth.signInWithOAuth({
         provider: "google",
         options: {
-          redirectTo: `${window.location.origin}/login-with-oauth`,
+          redirectTo: redirectUrl
+            ? `${
+                window.location.origin
+              }/login-with-oauth?redirect=${encodeURIComponent(redirectUrl)}`
+            : `${window.location.origin}/login-with-oauth`,
         },
       });
       if (error) throw error;
diff --git a/ui/src/pages/join.tsx b/ui/src/pages/join.tsx
index f2d23e6..11ab142 100644
--- a/ui/src/pages/join.tsx
+++ b/ui/src/pages/join.tsx
@@ -1,6 +1,7 @@
 import { useParams, useNavigate, useSearchParams } from "react-router-dom";
 import { useUser } from "@ui/providers/UserStoreProvider";
 import { useJoinTablo } from "@ui/hooks/invite";
+import { toast } from "@ui/ui-library/toast/toast-queue";
 
 export const JoinPage = () => {
   const { tablo_name } = useParams<{ tablo_name: string }>();
@@ -12,6 +13,20 @@ export const JoinPage = () => {
   const [searchParams] = useSearchParams();
   const token = searchParams.get("token");
 
+  if (!tablo_name || !token) {
+    toast.add(
+      {
+        title: "Invitation invalide",
+        description: "Veuillez vérifier le lien d'invitation",
+        type: "error",
+      },
+      {
+        timeout: 2000,
+      }
+    );
+    navigate("/");
+  }
+
   //   const handleJoinTablo = async () => {
   //     if (!user || !tablo_name || !token) return;
 
diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login.tsx
index fb376f5..87a576e 100644
--- a/ui/src/pages/login.tsx
+++ b/ui/src/pages/login.tsx
@@ -5,10 +5,13 @@ import { Label, Input, TextField, FieldError } from "@ui/ui-library/field";
 import { useLoginEmail } from "@ui/hooks/auth";
 import { Form } from "@ui/ui-library/form";
 import { LoginWithGoogle } from "@ui/components/BrandButtons/LoginWithGoogle";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 
 export function LoginPage() {
-  const { mutate: login, isPending, errors } = useLoginEmail();
+  const [searchParams] = useSearchParams();
+  const redirectUrl = searchParams.get("redirect");
+
+  const { mutate: login, isPending, errors } = useLoginEmail({ redirectUrl });
   const [formData, setFormData] = useState({
     email: "",
     password: "",
@@ -113,7 +116,7 @@ export function LoginPage() {
             </div>
           </div>
 
-          <LoginWithGoogle />
+          <LoginWithGoogle redirectUrl={redirectUrl} />
 
           <p className="text-center text-sm text-slate-600 dark:text-slate-400">
             Pas encore de compte ?{" "}
diff --git a/ui/src/pages/oauth-signin.tsx b/ui/src/pages/oauth-signin.tsx
index b37fd56..81dd804 100644
--- a/ui/src/pages/oauth-signin.tsx
+++ b/ui/src/pages/oauth-signin.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { useSession } from "@ui/contexts/SessionContext";
 import { useSignUpToStream } from "@ui/hooks/auth";
 
@@ -7,11 +7,17 @@ export const OAuthSigninPage = () => {
   const navigate = useNavigate();
   const { session } = useSession();
   const { signUpToStream } = useSignUpToStream();
+  const [searchParams] = useSearchParams();
+  const redirectUrl = searchParams.get("redirect");
   useEffect(() => {
     const interval = setInterval(() => {
       if (session) {
         signUpToStream(session.access_token);
-        navigate("/");
+        if (redirectUrl) {
+          navigate(decodeURIComponent(redirectUrl));
+        } else {
+          navigate("/");
+        }
       }
     }, 100);
     return () => clearInterval(interval);
diff --git a/ui/src/pages/signup.tsx b/ui/src/pages/signup.tsx
index a6b2ad6..1d1bd8e 100644
--- a/ui/src/pages/signup.tsx
+++ b/ui/src/pages/signup.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@ui/ui-library/button";
 import { twMerge } from "tailwind-merge";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { useState } from "react";
 import { Label, Input, TextField, FieldError } from "@ui/ui-library/field";
 import { useSignUp } from "@ui/hooks/auth";
@@ -10,6 +10,8 @@ import { LoginWithGoogle } from "@ui/components/BrandButtons/LoginWithGoogle";
 
 export function SignUpPage() {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectUrl = searchParams.get("redirect");
   const { mutate: signUp, isPending } = useSignUp();
   const [errors, setErrors] = useState<Record<string, string>>({});
 
@@ -246,7 +248,7 @@ export function SignUpPage() {
             </div>
           </div>
 
-          <LoginWithGoogle />
+          <LoginWithGoogle redirectUrl={redirectUrl} />
 
           <p className="text-center text-sm text-slate-600 dark:text-slate-400">
             Déjà un compte ?{" "}