Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
sagemathinc
GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/pages/sso/index.tsx
5536 views
1
/*

2
 *  This file is part of CoCalc: Copyright © 2022 Sagemath, Inc.

3
 *  License: MS-RSL – see LICENSE.md for details

4
 */

5


6
import { Card, Col, Layout, Row, Typography } from "antd";

7
import Link from "next/link";

8


9
import { to_human_list } from "@cocalc/util/misc";

10
import { StrategyAvatar } from "components/auth/sso";

11
import Footer from "components/landing/footer";

12
import Head from "components/landing/head";

13
import Header from "components/landing/header";

14
import Main from "components/landing/main";

15
import { ssoNav } from "components/sso";

16
import { Customize, CustomizeType } from "lib/customize";

17
import { getSSO } from "lib/sso/sso";

18
import { SSO } from "lib/sso/types";

19
import withCustomize from "lib/with-customize";

20


21
import type { JSX } from "react";

22


23
const { Paragraph, Text } = Typography;

24


25
interface Props {

26
  customize: CustomizeType;

27
  ssos: SSO[];

28
}

29


30
export const SSO_SUBTITLE = "Single Sign On";

31


32
export default function SignupIndex(props: Props) {

33
  const { customize, ssos } = props;

34


35
  function renderDomains(domains) {

36
    if (domains == null || domains.length === 0) return;

37
    const names = (domains ?? []).map((d) => (d === "*" ? "all domains" : d));

38
    return <Text type="secondary">{to_human_list(names)}</Text>;

39
  }

40


41
  function extra(sso) {

42
    return <Link href={`/sso/${sso.id}`}>more</Link>;

43
  }

44


45
  function renderSSOs() {

46
    return ssos.map((sso: SSO) => {

47
      const strategy = {

48
        name: sso.id,

49
        size: 64,

50
        backgroundColor: "",

51
        icon: sso.icon,

52
        display: sso.display,

53
      } as const;

54
      return (

55
        <Col xs={12} md={6} key={sso.id}>

56
          <Card

57
            size="small"

58
            title={<Text strong>{sso.display}</Text>}

59
            extra={extra(sso)}

60
          >

61
            <Paragraph style={{ textAlign: "center" }}>

62
              <StrategyAvatar strategy={strategy} size={64} />

63
            </Paragraph>

64
            <Paragraph style={{ textAlign: "center", marginBottom: 0 }}>

65
              {renderDomains(sso.domains)}

66
            </Paragraph>

67
          </Card>

68
        </Col>

69
      );

70
    });

71
  }

72


73
  function renderSSOList(): JSX.Element {

74
    if (ssos.length === 0) {

75
      return (

76
        <Text italic type="danger">

77
          There are no 3rd party SSO providers available.

78
        </Text>

79
      );

80
    } else {

81
      return (

82
        <Row gutter={[24, 24]} align={"top"} wrap={true}>

83
          {renderSSOs()}

84
        </Row>

85
      );

86
    }

87
  }

88


89
  function main() {

90
    return (

91
      <>

92
        <h1>{SSO_SUBTITLE}</h1>

93
        <Paragraph>

94
          Sign up at {customize.siteName} via one of these 3<sup>rd</sup> party

95
          single sign-on mechanisms. You need to have an account at the

96
          respective organization in order to complete the sign-up process.

97
          Usually, this will be the only way you can sign up using your

98
          organization specific email address.

99
        </Paragraph>

100
        <Paragraph>{renderSSOList()}</Paragraph>

101
      </>

102
    );

103
  }

104


105
  return (

106
    <Customize value={customize}>

107
      <Head title={SSO_SUBTITLE} />

108
      <Layout style={{ background: "white" }}>

109
        <Header />

110
        <Main nav={ssoNav()}>{main()}</Main>

111
        <Footer />

112
      </Layout>

113
    </Customize>

114
  );

115
}

116


117
export async function getServerSideProps(context) {

118
  const ssos = await getSSO();

119
  return await withCustomize({ context, props: { ssos } });

120
}

121


122