From 0e7f42a51203269fafbb9fc3e7f313ca1f04bd69 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 20 Dec 2021 11:40:15 +0200
Subject: [PATCH] Log in link when trying to join team logged out

---
 app/components/Catcher.tsx                       |  8 ++------
 .../to/$organization.$tournament/join-team.tsx   | 16 ++++++++++++++--
 app/styles/global.css                            |  4 ++--
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/components/Catcher.tsx b/app/components/Catcher.tsx
index 6f4e1a064..49abe0d6a 100644
--- a/app/components/Catcher.tsx
+++ b/app/components/Catcher.tsx
@@ -24,13 +24,9 @@ export function Catcher() {
             </p>
           ) : (
             <form action={getLogInUrl(location)} method="post">
-              <p className="four-zero-one__paragraph">
+              <p className="button-text-paragraph">
                 You should try{" "}
-                <Button
-                  className="four-zero-one__log-in-button"
-                  type="submit"
-                  variant="minimal"
-                >
+                <Button type="submit" variant="minimal">
                   logging in
                 </Button>
               </p>
diff --git a/app/routes/to/$organization.$tournament/join-team.tsx b/app/routes/to/$organization.$tournament/join-team.tsx
index e0885fba6..00eec7bfa 100644
--- a/app/routes/to/$organization.$tournament/join-team.tsx
+++ b/app/routes/to/$organization.$tournament/join-team.tsx
@@ -6,6 +6,7 @@ import {
   useMatches,
   useNavigate,
   useTransition,
+  useLocation,
 } from "remix";
 import invariant from "tiny-invariant";
 import { Button } from "~/components/Button";
@@ -16,7 +17,7 @@ import {
   joinTeamViaInviteCode,
 } from "~/services/tournament";
 import styles from "~/styles/tournament-join-team.css";
-import { getUser, requireUser } from "~/utils";
+import { getLogInUrl, getUser, requireUser } from "~/utils";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -131,6 +132,7 @@ export default function JoinTeamPage() {
 }
 
 function Contents({ data }: { data: Data }) {
+  const location = useLocation();
   const navigate = useNavigate();
   const [, parentRoute] = useMatches();
   const parentRouteData = parentRoute.data as FindTournamentByNameForUrlI;
@@ -159,7 +161,17 @@ function Contents({ data }: { data: Data }) {
         </>
       );
     case "LOG_IN":
-      return <>Please log in to join this team.</>;
+      return (
+        <form action={getLogInUrl(location)} method="post">
+          <p className="button-text-paragraph">
+            Please{" "}
+            <Button type="submit" variant="minimal">
+              log in
+            </Button>{" "}
+            to join this team.
+          </p>
+        </form>
+      );
     case "ALREADY_JOINED":
       return (
         <>You are already a member of {data.teamName} for this tournament.</>
diff --git a/app/styles/global.css b/app/styles/global.css
index 22a136dea..9fc54e2ec 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -273,13 +273,13 @@ select::selection {
   color: var(--theme-secondary);
 }
 
-.four-zero-one__paragraph {
+.button-text-paragraph {
   display: flex;
   justify-content: center;
   gap: var(--s-1);
 }
 
-.four-zero-one__log-in-button {
+.button-text-paragraph > button {
   font-size: var(--fonts-md);
 }