CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/pages/sso/index.tsx
Views: 687
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
const { Paragraph, Text } = Typography;

22


23
interface Props {

24
  customize: CustomizeType;

25
  ssos: SSO[];

26
}

27


28
export const SSO_SUBTITLE = "Single Sign On";

29


30
export default function SignupIndex(props: Props) {

31
  const { customize, ssos } = props;

32


33
  function renderDomains(domains) {

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

35
    return <Text type="secondary">{to_human_list(domains ?? [])}</Text>;

36
  }

37


38
  function extra(sso) {

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

40
  }

41


42
  function renderSSOs() {

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

44
      const strategy = {

45
        name: sso.id,

46
        size: 64,

47
        backgroundColor: "",

48
        icon: sso.icon,

49
        display: sso.display,

50
      } as const;

51
      return (

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

53
          <Card

54
            size="small"

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

56
            extra={extra(sso)}

57
          >

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

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

60
            </Paragraph>

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

62
              {renderDomains(sso.domains)}

63
            </Paragraph>

64
          </Card>

65
        </Col>

66
      );

67
    });

68
  }

69


70
  function renderSSOList(): JSX.Element {

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

72
      return (

73
        <Text italic type="danger">

74
          There are no 3rd party SSO providers available.

75
        </Text>

76
      );

77
    } else {

78
      return (

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

80
          {renderSSOs()}

81
        </Row>

82
      );

83
    }

84
  }

85


86
  function main() {

87
    return (

88
      <>

89
        <h1>{SSO_SUBTITLE}</h1>

90
        <Paragraph>

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

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

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

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

95
          organization specific email address.

96
        </Paragraph>

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

98
      </>

99
    );

100
  }

101


102
  return (

103
    <Customize value={customize}>

104
      <Head title={SSO_SUBTITLE} />

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

106
        <Header />

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

108
        <Footer />

109
      </Layout>

110
    </Customize>

111
  );

112
}

113


114
export async function getServerSideProps(context) {

115
  const ssos = await getSSO();

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

117
}

118


119