i like

aslilac · aslilac · commit 43f20ea9bed8 · 2024-04-25T19:52:23.000Z
diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx
@@ -1,14 +1,14 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import LaunchIcon from "@mui/icons-material/LaunchOutlined";
-import Link from "@mui/material/Link";
-import type { FC } from "react";
+import Button from "@mui/material/Button";
+import { type FC, useState } from "react";
 import { useLocation } from "react-router-dom";
 import type { AuthMethods, BuildInfoResponse } from "api/typesGenerated";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import { Loader } from "components/Loader/Loader";
 import { getApplicationName, getLogoURL } from "utils/appearance";
 import { retrieveRedirect } from "utils/redirect";
 import { SignInForm } from "./SignInForm";
+import { TermsOfServiceLink } from "./TermsOfServiceLink";
 
 export interface LoginPageViewProps {
   authMethods: AuthMethods | undefined;
@@ -51,12 +51,21 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
     <CoderIcon fill="white" opacity={1} css={styles.icon} />
   );
 
+  const [tosAccepted, setTosAccepted] = useState(false);
+  const tosAcceptanceRequired =
+    authMethods?.terms_of_service_url && !tosAccepted;
+
   return (
     <div css={styles.root}>
       <div css={styles.container}>
         {applicationLogo}
         {isLoading ? (
           <Loader />
+        ) : tosAcceptanceRequired ? (
+          <>
+            <TermsOfServiceLink url={authMethods.terms_of_service_url} />
+            <Button onClick={() => setTosAccepted(true)}>I agree</Button>
+          </>
         ) : (
           <SignInForm
             authMethods={authMethods}
@@ -72,20 +81,11 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
             Copyright &copy; {new Date().getFullYear()} Coder Technologies, Inc.
           </div>
           <div>{buildInfo?.version}</div>
-
-          {authMethods?.terms_of_service_url && (
-            <div css={{ paddingTop: 12, fontSize: 12 }}>
-              By continuing, you agree to the{" "}
-              <Link
-                css={{ fontWeight: 500 }}
-                href={authMethods.terms_of_service_url}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Terms of Service&nbsp;
-                <LaunchIcon css={{ fontSize: 12 }} />
-              </Link>
-            </div>
+          {tosAccepted && (
+            <TermsOfServiceLink
+              url={authMethods?.terms_of_service_url}
+              css={{ fontSize: 12 }}
+            />
           )}
         </footer>
       </div>
diff --git a/site/src/pages/LoginPage/TermsOfServiceLink.tsx b/site/src/pages/LoginPage/TermsOfServiceLink.tsx
@@ -0,0 +1,28 @@
+import LaunchIcon from "@mui/icons-material/LaunchOutlined";
+import Link from "@mui/material/Link";
+import type { FC } from "react";
+
+interface TermsOfServiceLinkProps {
+  className?: string;
+  url?: string;
+}
+
+export const TermsOfServiceLink: FC<TermsOfServiceLinkProps> = ({
+  className,
+  url,
+}) => {
+  return (
+    <div css={{ paddingTop: 12, fontSize: 16 }} className={className}>
+      By continuing, you agree to the{" "}
+      <Link
+        css={{ fontWeight: 500, textWrap: "nowrap" }}
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+      >
+        Terms of Service&nbsp;
+        <LaunchIcon css={{ fontSize: 12 }} />
+      </Link>
+    </div>
+  );
+};
