Prompt log in on play if needed Closes #726

app/routes/play/index.tsx

@@ -5,12 +5,22 @@ import {
   LoaderFunction,
   MetaFunction,
   redirect,
+  useLocation,
+  useTransition,
 } from "remix";
 import { z } from "zod";
 import { LFGGroupSelector } from "~/components/play/LFGGroupSelector";
 import styles from "~/styles/play.css";
-import { getUser, makeTitle, parseRequestFormData, requireUser } from "~/utils";
+import {
+  getLogInUrl,
+  getUser,
+  makeTitle,
+  parseRequestFormData,
+  requireUser,
+} from "~/utils";
 import * as LFGGroup from "~/models/LFGGroup.server";
+import { Button } from "~/components/Button";
+import { useUser } from "~/hooks/common";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -86,12 +96,34 @@ export const loader: LoaderFunction = async ({ context }) => {
 };
 
 export default function PlayPage() {
+  const transition = useTransition();
+  const user = useUser();
+  const location = useLocation();
+
   return (
     <div className="container">
       <Form method="post">
         <input type="hidden" name="_action" value="CREATE_LFG_GROUP" />
         <LFGGroupSelector />
-        <button type="submit">Submit</button>
+        {user ? (
+          <Button
+            className="play__continue-button"
+            type="submit"
+            loading={transition.state !== "idle"}
+            loadingText="Continuing..."
+          >
+            Continue
+          </Button>
+        ) : (
+          <form action={getLogInUrl(location)} method="post">
+            <p className="button-text-paragraph play__log-in">
+              To start looking first{" "}
+              <Button type="submit" variant="minimal">
+                log in
+              </Button>
+            </p>
+          </form>
+        )}
       </Form>
     </div>
   );

app/styles/play.css

@@ -54,3 +54,15 @@
 .play__type-radio-group__image.checked {
   transform: scale(1.75);
 }
+
+.play__continue-button {
+  margin: 0 auto;
+  margin-block-start: var(--s-6);
+}
+
+.play__log-in {
+  font-size: var(--fonts-sm);
+  font-weight: var(--semi-bold);
+  margin-block-start: var(--s-6);
+  text-align: center;
+}