feat: specify a custom "terms of service" link (#13068)

site/src/api/typesGenerated.ts

@@ -124,6 +124,7 @@ export interface AuthMethod {
 
 // From codersdk/users.go
 export interface AuthMethods {
+  readonly terms_of_service_url?: string;
   readonly password: AuthMethod;
   readonly github: AuthMethod;
   readonly oidc: OIDCAuthMethod;
@@ -445,6 +446,7 @@ export interface DeploymentValues {
   readonly allow_workspace_renames?: boolean;
   readonly healthcheck?: HealthcheckConfig;
   readonly cli_upgrade_message?: string;
+  readonly terms_of_service_url?: string;
   readonly config?: string;
   readonly write_config?: boolean;
   readonly address?: string;

site/src/pages/LoginPage/LoginPageView.stories.tsx

@@ -3,6 +3,8 @@ import {
   MockAuthMethodsAll,
   MockAuthMethodsExternal,
   MockAuthMethodsPasswordOnly,
+  MockAuthMethodsPasswordTermsOfService,
+  MockBuildInfo,
   mockApiError,
 } from "testHelpers/entities";
 import { LoginPageView } from "./LoginPageView";
@@ -10,6 +12,9 @@ import { LoginPageView } from "./LoginPageView";
 const meta: Meta<typeof LoginPageView> = {
   title: "pages/LoginPage",
   component: LoginPageView,
+  args: {
+    buildInfo: MockBuildInfo,
+  },
 };
 
 export default meta;
@@ -33,6 +38,12 @@ export const WithAllAuthMethods: Story = {
   },
 };
 
+export const WithTermsOfService: Story = {
+  args: {
+    authMethods: MockAuthMethodsPasswordTermsOfService,
+  },
+};
+
 export const AuthError: Story = {
   args: {
     error: mockApiError({
@@ -53,6 +64,7 @@ export const ExternalAuthError: Story = {
 
 export const LoadingAuthMethods: Story = {
   args: {
+    isLoading: true,
     authMethods: undefined,
   },
 };

site/src/pages/LoginPage/LoginPageView.tsx

@@ -1,5 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
-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";
@@ -7,6 +8,7 @@ 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;
@@ -49,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}
@@ -70,6 +81,12 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
             Copyright &copy; {new Date().getFullYear()} Coder Technologies, Inc.
           </div>
           <div>{buildInfo?.version}</div>
+          {tosAccepted && (
+            <TermsOfServiceLink
+              url={authMethods?.terms_of_service_url}
+              css={{ fontSize: 12 }}
+            />
+          )}
         </footer>
       </div>
     </div>

site/src/pages/LoginPage/SignInForm.tsx

@@ -110,7 +110,7 @@ export const SignInForm: FC<SignInFormProps> = ({
       {passwordEnabled && oAuthEnabled && (
         <div css={styles.divider}>
           <div css={styles.dividerLine} />
-          <div css={styles.dividerLabel}>Or</div>
+          <div css={styles.dividerLabel}>or</div>
           <div css={styles.dividerLine} />
         </div>
       )}

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>
+  );
+};

site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx

@@ -136,10 +136,7 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 }) => {
   const theme = useTheme();
 
-  const authList = Object.values(
-    authMethods,
-  ) as (typeof authMethods)[keyof typeof authMethods][];
-  const noSsoEnabled = !authList.some((method) => method.enabled);
+  const noSsoEnabled = !authMethods.github.enabled && !authMethods.oidc.enabled;
 
   return (
     <>

site/src/testHelpers/entities.ts

@@ -1373,6 +1373,13 @@ export const MockAuthMethodsPasswordOnly: TypesGen.AuthMethods = {
   oidc: { enabled: false, signInText: "", iconUrl: "" },
 };
 
+export const MockAuthMethodsPasswordTermsOfService: TypesGen.AuthMethods = {
+  terms_of_service_url: "https://www.youtube.com/watch?v=C2f37Vb2NAE",
+  password: { enabled: true },
+  github: { enabled: false },
+  oidc: { enabled: false, signInText: "", iconUrl: "" },
+};
+
 export const MockAuthMethodsExternal: TypesGen.AuthMethods = {
   password: { enabled: false },
   github: { enabled: true },