Merge pull request #7601 from sagemathinc/sso-login-homepage-7557

"allow email signup" = false → list all SSO options on home page

Author: williamstein

src/packages/database/settings/customize.ts

@@ -49,7 +49,7 @@ export interface Customize {
   sandboxProjectsEnabled?: boolean;
   sandboxProjectId?: string;
   verifyEmailAddresses?: boolean;
-  strategies: Strategy[];
+  strategies?: Strategy[];
   openaiEnabled?: boolean;
   googleVertexaiEnabled?: boolean;
   mistralEnabled?: boolean;

src/packages/database/settings/get-sso-strategies.ts

@@ -4,7 +4,7 @@
  */
 
 import getPool from "@cocalc/database/pool";
-import { Strategy } from "@cocalc/util/types/sso";
+import type { Strategy } from "@cocalc/util/types/sso";
 import { ssoDispayedName } from "@cocalc/util/auth";
 
 /** Returns an array of public info about strategies.

src/packages/next/components/account/config/account/sso.tsx

@@ -3,6 +3,9 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
+import { useRouter } from "next/router";
+import { ReactNode, useState } from "react";
+
 import { Icon } from "@cocalc/frontend/components/icon";
 import { len } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
@@ -16,8 +19,6 @@ import SiteName from "components/share/site-name";
 import apiPost from "lib/api/post";
 import useAPI from "lib/hooks/api";
 import useEditTable from "lib/hooks/edit-table";
-import { useRouter } from "next/router";
-import { ReactNode, useState } from "react";
 import register from "../register";
 
 interface Data {
@@ -36,7 +37,7 @@ register({
       {
         accounts: { passports: null },
       },
-      { noSave: true }
+      { noSave: true },
     );
 
     const hasPassword = useAPI("auth/has-password");
@@ -75,7 +76,7 @@ register({
 
     const passports = edited.passports ?? {};
     const linkedNames = Object.keys(passports).map(
-      (name) => name.split("-")[0]
+      (name) => name.split("-")[0],
     );
 
     return (
@@ -106,7 +107,7 @@ register({
                         or{" "}
                         <A href="/config/account/delete">delete your account</A>
                         .
-                      </>
+                      </>,
                     );
                     return;
                   }
@@ -169,7 +170,7 @@ function Unlink({
             key={name}
             strategy={strategy}
             onUnlink={() => onUnlink(name, strategy)}
-          />
+          />,
         );
         break;
       }

src/packages/next/components/auth/sso.tsx

@@ -3,7 +3,7 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Alert, Avatar, Tooltip, Typography } from "antd";
+import { Alert, Avatar, Space, Tooltip, Typography } from "antd";
 import { useRouter } from "next/router";
 import { join } from "path";
 import { CSSProperties, ReactNode, useMemo } from "react";
@@ -24,6 +24,8 @@ interface SSOProps {
   size?: number;
   style?: CSSProperties;
   header?: ReactNode;
+  showAll?: boolean;
+  showName?: boolean;
 }
 
 export function getLink(strategy: string, target?: string): string {
@@ -39,12 +41,12 @@ export function getLink(strategy: string, target?: string): string {
 }
 
 export default function SSO(props: SSOProps) {
-  const { size, style, header } = props;
+  const { size = 60, style, header, showAll = false, showName = false } = props;
   const { strategies } = useCustomize();
   const ssoHREF = useSSOHref("sso");
 
   const havePrivateSSO: boolean = useMemo(() => {
-    return strategies?.some((s) => !s.public) ?? false;
+    return showAll ? false : strategies?.some((s) => !s.public) ?? false;
   }, [strategies]);
 
   if (strategies == null) {
@@ -68,35 +70,43 @@ export default function SSO(props: SSOProps) {
     };
 
     return (
-      <a href={ssoHREF}>
-        {"Institutional Single Sign-On: "}
-        <StrategyAvatar key={"sso"} strategy={sso} size={size ?? 60} />
-      </a>
+      <div style={{ marginLeft: "-5px", marginTop: "10px" }}>
+        <a href={ssoHREF}>
+          {"Institutional Single Sign-On: "}
+          <StrategyAvatar key={"sso"} strategy={sso} size={size} />
+        </a>
+      </div>
     );
   }
 
   function renderStrategies() {
     if (strategies == null) return;
-    return strategies
-      .filter((s) => s.public || s.doNotHide)
-      .map((strategy) => (
-        <StrategyAvatar
-          key={strategy.name}
-          strategy={strategy}
-          size={size ?? 60}
-        />
-      ));
+    const s = strategies
+      .filter((s) => showAll || s.public || s.doNotHide)
+      .map((strategy) => {
+        return (
+          <StrategyAvatar
+            key={strategy.name}
+            strategy={strategy}
+            size={size}
+            showName={showName}
+          />
+        );
+      });
+    return (
+      <div style={{ marginLeft: "-5px", textAlign: "center" }}>
+        {showName ? <Space wrap>{s}</Space> : s}
+      </div>
+    );
   }
 
   // The -5px is to offset the initial avatar image, since they
   // all have a left margin.
   return (
     <div style={{ ...style }}>
       {header}
-      <div style={{ marginLeft: "-5px" }}>{renderStrategies()}</div>
-      <div style={{ marginLeft: "-5px", marginTop: "10px" }}>
-        {renderPrivateSSO()}
-      </div>
+      {renderStrategies()}
+      {renderPrivateSSO()}
     </div>
   );
 }

src/packages/next/components/landing/cocalc-com-features.tsx

@@ -6,7 +6,9 @@
 import { Button, Col, Grid, Row } from "antd";
 import { join } from "path";
 import { useEffect, useState } from "react";
+
 import { SOFTWARE_ENVIRONMENT_ICON } from "@cocalc/frontend/project/settings/software-consts";
+import { DOC_AI } from "@cocalc/util/consts/ui";
 import { COLORS } from "@cocalc/util/theme";
 import Path from "components/app/path";
 import DemoCell from "components/demo-cell";
@@ -26,7 +28,6 @@ import assignments from "public/features/cocalc-course-assignments-2019.png";
 import RTC from "public/features/cocalc-real-time-jupyter.png";
 import ComputeServers from "./compute-servers";
 import { LANDING_HEADER_LEVEL } from "./constants";
-import { DOC_AI } from "@cocalc/util/consts/ui";
 
 // NOTE: This component is only rendered if the onCoCalcCom customization variable is "true"
 export function CoCalcComFeatures() {

src/packages/next/components/landing/sign-in.tsx

@@ -4,12 +4,14 @@
  */
 
 import { Button } from "antd";
+import { useRouter } from "next/router";
 import { join } from "path";
 import { CSSProperties, ReactNode } from "react";
+
+import SSO from "components/auth/sso";
 import { Paragraph } from "components/misc";
 import basePath from "lib/base-path";
 import { useCustomize } from "lib/customize";
-import { useRouter } from "next/router";
 
 interface Props {
   startup?: ReactNode; // customize the button, e.g. "Start Jupyter Now".
@@ -24,9 +26,10 @@ const STYLE: CSSProperties = {
 } as const;
 
 export default function SignIn({ startup, hideFree, style }: Props) {
-  const { anonymousSignup, siteName, account } = useCustomize();
+  const { anonymousSignup, siteName, account, emailSignup } = useCustomize();
   style = { ...STYLE, ...style };
   const router = useRouter();
+
   if (account != null) {
     return (
       <Paragraph style={style}>
@@ -41,6 +44,47 @@ export default function SignIn({ startup, hideFree, style }: Props) {
       </Paragraph>
     );
   }
+
+  // if email signup is not allowed, we show all SSO options -- #7557
+  function renderAccountRegistration() {
+    if (emailSignup) {
+      return (
+        <>
+          <Button
+            size="large"
+            style={{ margin: "10px" }}
+            title={"Create a new account."}
+            onClick={() => router.push("/auth/sign-up")}
+          >
+            Sign Up
+          </Button>
+          <Button
+            size="large"
+            style={{ margin: "10px" }}
+            title={
+              "Either create a new account or sign into an existing account."
+            }
+            onClick={() => router.push("/auth/sign-in")}
+          >
+            Sign In
+          </Button>
+        </>
+      );
+    } else {
+      return (
+        <SSO
+          header={
+            <Paragraph style={{ fontSize: "18px", fontWeight: "bold" }}>
+              Sign in
+            </Paragraph>
+          }
+          showAll={true}
+          showName={true}
+        />
+      );
+    }
+  }
+
   return (
     <Paragraph style={style}>
       {anonymousSignup && (
@@ -54,27 +98,12 @@ export default function SignIn({ startup, hideFree, style }: Props) {
           Try&nbsp;{startup ?? siteName}&nbsp;Now
         </Button>
       )}
-      <Button
-        size="large"
-        style={{ margin: "10px" }}
-        title={"Create a new account."}
-        onClick={() => router.push("/auth/sign-up")}
-      >
-        Sign Up
-      </Button>
-      <Button
-        size="large"
-        style={{ margin: "10px" }}
-        title={"Either create a new account or sign into an existing account."}
-        onClick={() => router.push("/auth/sign-in")}
-      >
-        Sign In
-      </Button>
-      {!hideFree && (
+      {renderAccountRegistration()}
+      {!hideFree ? (
         <div style={{ padding: "15px 0 0 0" }}>
           Start free today. Upgrade later.
         </div>
-      )}
+      ) : undefined}
     </Paragraph>
   );
 }

src/packages/next/components/videos.tsx

@@ -1,15 +1,16 @@
 import { Carousel } from "antd";
-import { Paragraph } from "components/misc";
 import { useState } from "react";
-import A from "components/misc/A";
+
 import { Icon } from "@cocalc/frontend/components/icon";
+import { Paragraph } from "components/misc";
+import A from "components/misc/A";
 
-interface Video {
+export interface Video {
   id: string;
   title: string;
 }
 
-export default function Videos({ videos }: { videos: Video[] }) {
+export default function Videos({ videos }: { videos: Readonly<Video[]> }) {
   const [current, setCurrent] = useState<number>(0);
   let n = -1;
   return (

src/packages/next/lib/customize.ts

@@ -4,6 +4,7 @@
  */
 
 import { createContext, useContext } from "react";
+
 import type { Customize as ServerCustomize } from "@cocalc/database/settings/customize";
 
 interface EnabledPageBranch {
@@ -12,12 +13,12 @@ interface EnabledPageBranch {
 
 interface EnabledPageTree extends EnabledPageBranch {
   auth: {
-    try: boolean | undefined,
+    try: boolean | undefined;
   };
   about: {
-    index: boolean | undefined,
-    events: boolean | undefined,
-    team: boolean | undefined,
+    index: boolean | undefined;
+    events: boolean | undefined;
+    team: boolean | undefined;
   };
   compute: boolean | undefined;
   contact: boolean | undefined;
@@ -31,7 +32,7 @@ interface EnabledPageTree extends EnabledPageBranch {
   policies: {
     index: boolean | undefined;
     imprint: boolean | undefined;
-  }
+  };
   pricing: boolean | undefined;
   share: boolean | undefined;
   software: boolean | undefined;
@@ -64,7 +65,6 @@ interface Customize extends ServerCustomize {
   serverTime?: number; // the time on the server, in milliseconds since the epoch
   openaiEnabled?: boolean; // backend is configured to provide openai integration.
   googleVertexaiEnabled?: boolean; // if enabled, e.g. Google Gemini is available
-
   jupyterApiEnabled?: boolean; // backend configured to use a pool of projects for sandboxed ephemeral jupyter code execution
   computeServersEnabled?: boolean; // backend configured to run on external compute servers
   enabledPages?: EnabledPageTree; // tree structure which specifies supported routes for this install

src/packages/next/lib/with-customize.ts

@@ -27,7 +27,7 @@ export default async function withCustomize(
     revalidate?: number;
     context: any;
   },
-  options: Options = {}
+  options: Options = {},
 ) {
   let customize: CustomizeType;
   try {