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 { Map } from "immutable";
7
import { defineMessage, FormattedMessage, useIntl } from "react-intl";
8

9
import { alert_message } from "@cocalc/frontend/alerts";
10
import { Button } from "@cocalc/frontend/antd-bootstrap";
11
import {
12
  Rendered,
13
  useEffect,
14
  useIsMountedRef,
15
  useState,
16
} from "@cocalc/frontend/app-framework";
17
import { LabeledRow } from "@cocalc/frontend/components";
18
import { webapp_client } from "@cocalc/frontend/webapp-client";
19

20
interface Props {
21
  email_address?: string;
22
  email_address_verified?: Map<string, boolean>;
23
}
24

25
export const emailVerificationMsg = defineMessage({
26
  id: "account.settings.email-verification.button.status",
27
  defaultMessage: `{disabled_button, select, true {Email Sent} other {Send Verification Email}}`,
28
});
29

30
export function EmailVerification({
31
  email_address,
32
  email_address_verified,
33
}: Props) {
34
  const intl = useIntl();
35

36
  const is_mounted = useIsMountedRef();
37
  const [disabled_button, set_disabled_button] = useState(false);
38

39
  useEffect(() => {
40
    set_disabled_button(false);
41
  }, [email_address]);
42

43
  async function verify(): Promise<void> {
44
    try {
45
      await webapp_client.account_client.send_verification_email();
46
    } catch (err) {
47
      const err_msg = `Problem sending email verification: ${err}`;
48
      console.log(err_msg);
49
      alert_message({ type: "error", message: err_msg });
50
    } finally {
51
      if (is_mounted.current) {
52
        set_disabled_button(true);
53
      }
54
    }
55
  }
56

57
  function render_status(): Rendered {
58
    if (email_address == null) {
59
      return (
60
        <span>
61
          <FormattedMessage
62
            id="account.settings.email-verification.unknown"
63
            defaultMessage={"Unknown"}
64
          />
65
        </span>
66
      );
67
    } else {
68
      if (email_address_verified?.get(email_address)) {
69
        return (
70
          <span style={{ color: "green" }}>
71
            <FormattedMessage
72
              id="account.settings.email-verification.verified"
73
              defaultMessage={"Verified"}
74
            />
75
          </span>
76
        );
77
      } else {
78
        return (
79
          <>
80
            <span key={1} style={{ color: "red", paddingRight: "3em" }}>
81
              <FormattedMessage
82
                id="account.settings.email-verification.button.label"
83
                defaultMessage={"Not Verified"}
84
              />
85
            </span>
86
            <Button
87
              onClick={verify}
88
              bsStyle="success"
89
              disabled={disabled_button}
90
            >
91
              {intl.formatMessage(emailVerificationMsg, { disabled_button })}
92
            </Button>
93
          </>
94
        );
95
      }
96
    }
97
  }
98

99
  return (
100
    <LabeledRow
101
      label={intl.formatMessage({
102
        id: "account.settings.email-verification.label",
103
        defaultMessage: "Email verification",
104
      })}
105
      style={{ marginBottom: "15px" }}
106
    >
107
      <div>
108
        <FormattedMessage
109
          id="account.settings.email-verification.status"
110
          defaultMessage={"Status: {status}"}
111
          values={{ status: render_status() }}
112
        />
113
      </div>
114
    </LabeledRow>
115
  );
116
}
117

118