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/components/auth/fragments/auth-page-container.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 { ReactNode } from "react";

7
import { Alert } from "antd";

8


9
import { COLORS } from "@cocalc/util/theme";

10
import Logo from "components/logo";

11


12
import { BODY_STYLE, LOGIN_STYLE, AUTH_WRAPPER_STYLE } from "../shared";

13


14


15
interface AuthPageContainerProps {

16
  children: ReactNode;

17
  error?: ReactNode;

18
  footer?: ReactNode;

19
  minimal?: boolean;

20
  subtitle?: ReactNode;

21
  title: string;

22
}

23


24
export default function AuthPageContainer(props: AuthPageContainerProps) {

25
  const {

26
    children,

27
    error ,

28
    footer,

29
    minimal = false,

30
    subtitle,

31
    title,

32
  } = props;

33


34
  return (

35
    <div style={BODY_STYLE}>

36
      <div style={AUTH_WRAPPER_STYLE}>

37
        {!minimal && (

38
          <div style={{

39
            textAlign: "center",

40
            marginBottom: "15px",

41
            color: COLORS.GRAY_D,

42
          }}>

43
            <Logo

44
              type="icon"

45
              style={{ width: "100px", height: "100px", marginBottom: "15px" }}

46
              priority={true}

47
            />

48
            <h2>{title}</h2>

49
            {subtitle}

50
          </div>

51
        )}

52


53
        <div style={LOGIN_STYLE}>

54
          {children}

55
        </div>

56


57
        {error && (

58
          <>

59
            <Alert

60
              style={{ marginTop: "20px" }}

61
              message="Error"

62
              description={error}

63
              type="error"

64
              showIcon

65
            />

66
          </>

67
        )}

68


69
        {footer && (

70
          <div style={{

71
              margin: `${ BODY_STYLE.margin } auto`,

72
              padding: "8px",

73
          }}

74
          >

75
            {footer}

76
          </div>

77
        )}

78
      </div>

79
    </div>

80
  );

81
}

82


83