1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Flex, Form, Switch, Tooltip } from "antd";
7

8
import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
9
import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
10
import { Loading } from "@cocalc/frontend/components";
11
import track from "@cocalc/frontend/user-tracking";
12
import { KUCALC_COCALC_COM } from "@cocalc/util/db-schema/site-defaults";
13
import { EditorSettings } from "./editor-settings/editor-settings";
14
import { KeyboardSettings } from "./keyboard-settings";
15
import { OtherSettings } from "./other-settings";
16
import { ProfileSettings } from "./profile-settings";
17
import { AccountSettings } from "./settings/account-settings";
18
import ApiKeys from "./settings/api-keys";
19
import GlobalSSHKeys from "./ssh-keys/global-ssh-keys";
20
import TableError from "./table-error";
21
import { TerminalSettings } from "./terminal-settings";
22

23
export const AccountPreferences: React.FC = () => {
24
  const account_id = useTypedRedux("account", "account_id");
25
  const first_name = useTypedRedux("account", "first_name");
26
  const last_name = useTypedRedux("account", "last_name");
27
  const name = useTypedRedux("account", "name");
28
  const email_address = useTypedRedux("account", "email_address");
29
  const email_address_verified = useTypedRedux(
30
    "account",
31
    "email_address_verified",
32
  );
33
  const passports = useTypedRedux("account", "passports");
34
  const sign_out_error = useTypedRedux("account", "sign_out_error");
35
  const stripe_customer = useTypedRedux("account", "stripe_customer");
36
  const other_settings = useTypedRedux("account", "other_settings");
37
  const is_anonymous = useTypedRedux("account", "is_anonymous");
38
  const created = useTypedRedux("account", "created");
39
  const strategies = useTypedRedux("account", "strategies");
40
  const unlisted = useTypedRedux("account", "unlisted");
41
  const email_enabled = useTypedRedux("customize", "email_enabled");
42
  const verify_emails = useTypedRedux("customize", "verify_emails");
43
  const kucalc = useTypedRedux("customize", "kucalc");
44
  const ssh_gateway = useTypedRedux("customize", "ssh_gateway");
45

46
  function render_account_settings(): React.JSX.Element {
47
    return (
48
      <AccountSettings
49
        account_id={account_id}
50
        first_name={first_name}
51
        last_name={last_name}
52
        name={name}
53
        email_address={email_address}
54
        email_address_verified={email_address_verified}
55
        passports={passports}
56
        sign_out_error={sign_out_error}
57
        other_settings={other_settings as any}
58
        is_anonymous={is_anonymous}
59
        email_enabled={email_enabled}
60
        verify_emails={verify_emails}
61
        created={created}
62
        strategies={strategies}
63
        unlisted={unlisted}
64
      />
65
    );
66
  }
67

68
  function render_other_settings(): React.JSX.Element {
69
    if (other_settings == null) return <Loading />;
70
    return (
71
      <OtherSettings
72
        other_settings={other_settings as any}
73
        is_stripe_customer={
74
          !!stripe_customer?.getIn(["subscriptions", "total_count"])
75
        }
76
        kucalc={kucalc}
77
      />
78
    );
79
  }
80

81
  function renderDarkMode(): React.JSX.Element {
82
    return (
83
      <Tooltip title="Enable dark mode across the entire user interface. See further dark mode configuration below.">
84
        <Form style={{ height: "37px" }}>
85
          <Form.Item
86
            label={
87
              <div
88
                onClick={() => {
89
                  redux
90
                    .getActions("account")
91
                    .set_other_settings(
92
                      "dark_mode",
93
                      !other_settings.get("dark_mode"),
94
                    );
95
                }}
96
                style={{
97
                  cursor: "pointer",
98
                  color: "rgba(229, 224, 216)",
99
                  backgroundColor: "rgb(36, 37, 37)",
100
                  padding: "5px 10px",
101
                  borderRadius: "3px",
102
                }}
103
              >
104
                Dark Mode
105
              </div>
106
            }
107
          >
108
            <Switch
109
              checked={other_settings.get("dark_mode")}
110
              onChange={(checked) => {
111
                redux
112
                  .getActions("account")
113
                  .set_other_settings("dark_mode", checked);
114
                track("dark-mode", { how: "settings page", checked });
115
              }}
116
            />
117
          </Form.Item>
118
        </Form>
119
      </Tooltip>
120
    );
121
  }
122

123
  function render_all_settings(): React.JSX.Element {
124
    return (
125
      <>
126
        <Flex>
127
          <div style={{ flex: 1 }} />
128
          {renderDarkMode()}
129
        </Flex>
130
        <Row>
131
          <Col xs={12} md={6}>
132
            {render_account_settings()}
133
            <ProfileSettings
134
              email_address={email_address}
135
              // first_name={first_name}
136
              // last_name={last_name}
137
            />
138
            {render_other_settings()}
139
            {(ssh_gateway || kucalc === KUCALC_COCALC_COM) && <GlobalSSHKeys />}
140
            {!is_anonymous && <ApiKeys />}
141
          </Col>
142
          <Col xs={12} md={6}>
143
            <EditorSettings />
144
            <TerminalSettings />
145
            <KeyboardSettings />
146
          </Col>
147
        </Row>
148
      </>
149
    );
150
  }
151

152
  return (
153
    <div>
154
      <TableError />
155
      {is_anonymous ? render_account_settings() : render_all_settings()}
156
    </div>
157
  );
158
};
159

160