coder · aslilac · Apr 25, 2024 · Apr 24, 2024 · Apr 24, 2024 · Apr 24, 2024
diff --git a/cli/testdata/coder_server_--help.golden b/cli/testdata/coder_server_--help.golden
@@ -60,6 +60,10 @@ OPTIONS:
       --support-links struct[[]codersdk.LinkConfig], $CODER_SUPPORT_LINKS
           Support links to display in the top right drop down menu.
 
+      --terms-of-service-url string, $CODER_TERMS_OF_SERVICE_URL
+          A URL to an external Terms of Service that must be accepted by users
+          when logging in.
+
       --update-check bool, $CODER_UPDATE_CHECK (default: false)
           Periodically check for new releases of Coder and inform the owner. The
           check is performed once per day.

diff --git a/cli/testdata/server-config.yaml.golden b/cli/testdata/server-config.yaml.golden
@@ -414,6 +414,10 @@ inMemoryDatabase: false
 # Type of auth to use when connecting to postgres.
 # (default: password, type: enum[password\|awsiamrds])
 pgAuth: password
+# A URL to an external Terms of Service that must be accepted by users when
+# logging in.
+# (default: <unset>, type: string)
+termsOfServiceURL: ""
 # The algorithm to use for generating ssh keys. Accepted values are "ed25519",
 # "ecdsa", or "rsa4096".
 # (default: ed25519, type: string)

diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/coderd/userauth.go b/coderd/userauth.go
@@ -472,6 +472,7 @@ func (api *API) userAuthMethods(rw http.ResponseWriter, r *http.Request) {
 	}
 
 	httpapi.Write(r.Context(), rw, http.StatusOK, codersdk.AuthMethods{
+		TermsOfServiceURL: api.DeploymentValues.TermsOfServiceURL.Value(),
 		Password: codersdk.AuthMethod{
 			Enabled: !api.DeploymentValues.DisablePasswordAuth.Value(),
 		},

diff --git a/codersdk/deployment.go b/codersdk/deployment.go
@@ -200,6 +200,7 @@ type DeploymentValues struct {
 	AllowWorkspaceRenames           serpent.Bool                         `json:"allow_workspace_renames,omitempty" typescript:",notnull"`
 	Healthcheck                     HealthcheckConfig                    `json:"healthcheck,omitempty" typescript:",notnull"`
 	CLIUpgradeMessage               serpent.String                       `json:"cli_upgrade_message,omitempty" typescript:",notnull"`
+	TermsOfServiceURL               serpent.String                       `json:"terms_of_service_url,omitempty" typescript:",notnull"`
 
 	Config      serpent.YAMLConfigPath `json:"config,omitempty" typescript:",notnull"`
 	WriteConfig serpent.Bool           `json:"write_config,omitempty" typescript:",notnull"`
@@ -1683,6 +1684,14 @@ when required by your organization's security policy.`,
 			YAML:        "secureAuthCookie",
 			Annotations: serpent.Annotations{}.Mark(annotationExternalProxies, "true"),
 		},
+		{
+			Name:        "Terms of Service URL",
+			Description: "A URL to an external Terms of Service that must be accepted by users when logging in.",
+			Flag:        "terms-of-service-url",
+			Env:         "CODER_TERMS_OF_SERVICE_URL",
+			YAML:        "termsOfServiceURL",
+			Value:       &c.TermsOfServiceURL,
+		},
 		{
 			Name: "Strict-Transport-Security",
 			Description: "Controls if the 'Strict-Transport-Security' header is set on all static file responses. " +

diff --git a/codersdk/users.go b/codersdk/users.go
@@ -209,9 +209,10 @@ type CreateOrganizationRequest struct {
 
 // AuthMethods contains authentication method information like whether they are enabled or not or custom text, etc.
 type AuthMethods struct {
-	Password AuthMethod     `json:"password"`
-	Github   AuthMethod     `json:"github"`
-	OIDC     OIDCAuthMethod `json:"oidc"`
+	TermsOfServiceURL string         `json:"terms_of_service_url,omitempty"`
+	Password          AuthMethod     `json:"password"`
+	Github            AuthMethod     `json:"github"`
+	OIDC              OIDCAuthMethod `json:"oidc"`
 }
 
 type AuthMethod struct {

diff --git a/docs/api/general.md b/docs/api/general.md
diff --git a/docs/api/schemas.md b/docs/api/schemas.md
diff --git a/docs/api/users.md b/docs/api/users.md
diff --git a/docs/cli/server.md b/docs/cli/server.md
diff --git a/enterprise/cli/testdata/coder_server_--help.golden b/enterprise/cli/testdata/coder_server_--help.golden
@@ -61,6 +61,10 @@ OPTIONS:
       --support-links struct[[]codersdk.LinkConfig], $CODER_SUPPORT_LINKS
           Support links to display in the top right drop down menu.
 
+      --terms-of-service-url string, $CODER_TERMS_OF_SERVICE_URL
+          A URL to an external Terms of Service that must be accepted by users
+          when logging in.
+
       --update-check bool, $CODER_UPDATE_CHECK (default: false)
           Periodically check for new releases of Coder and inform the owner. The
           check is performed once per day.

diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/pages/LoginPage/LoginPageView.stories.tsx b/site/src/pages/LoginPage/LoginPageView.stories.tsx
@@ -3,13 +3,18 @@ import {
   MockAuthMethodsAll,
   MockAuthMethodsExternal,
   MockAuthMethodsPasswordOnly,
+  MockAuthMethodsPasswordTermsOfService,
+  MockBuildInfo,
   mockApiError,
 } from "testHelpers/entities";
 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,
   },
 };

diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx
@@ -1,12 +1,14 @@
 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";
 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>

diff --git a/site/src/pages/LoginPage/SignInForm.tsx b/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>
       )}

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>
+  );
+};
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/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 (
     <>

diff --git a/site/src/testHelpers/entities.ts b/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 },