Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
sagemathinc
GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/pages/sso/index.tsx
1543 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
    return <Text type="secondary">{to_human_list(domains ?? [])}</Text>;

38
  }

39


40
  function extra(sso) {

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

42
  }

43


44
  function renderSSOs() {

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

46
      const strategy = {

47
        name: sso.id,

48
        size: 64,

49
        backgroundColor: "",

50
        icon: sso.icon,

51
        display: sso.display,

52
      } as const;

53
      return (

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

55
          <Card

56
            size="small"

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

58
            extra={extra(sso)}

59
          >

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

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

62
            </Paragraph>

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

64
              {renderDomains(sso.domains)}

65
            </Paragraph>

66
          </Card>

67
        </Col>

68
      );

69
    });

70
  }

71


72
  function renderSSOList(): JSX.Element {

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

74
      return (

75
        <Text italic type="danger">

76
          There are no 3rd party SSO providers available.

77
        </Text>

78
      );

79
    } else {

80
      return (

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

82
          {renderSSOs()}

83
        </Row>

84
      );

85
    }

86
  }

87


88
  function main() {

89
    return (

90
      <>

91
        <h1>{SSO_SUBTITLE}</h1>

92
        <Paragraph>

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

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

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

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

97
          organization specific email address.

98
        </Paragraph>

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

100
      </>

101
    );

102
  }

103


104
  return (

105
    <Customize value={customize}>

106
      <Head title={SSO_SUBTITLE} />

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

108
        <Header />

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

110
        <Footer />

111
      </Layout>

112
    </Customize>

113
  );

114
}

115


116
export async function getServerSideProps(context) {

117
  const ssos = await getSSO();

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

119
}

120


121