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 { Alert, Card } from "antd";
7
import { join } from "path";
8

9
import { Rendered, useEffect, useState } from "@cocalc/frontend/app-framework";
10
import { Icon, Loading } from "@cocalc/frontend/components";
11
import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
12
import { webapp_client } from "@cocalc/frontend/webapp-client";
13
import { CopyToClipBoard } from "@cocalc/frontend/components";
14
import { useLocalizationCtx } from "@cocalc/frontend/app/localize";
15

16
interface Props {
17
  account_id: string;
18
  first_name: string;
19
  last_name: string;
20
}
21

22
export function Impersonate({ first_name, last_name, account_id }: Props) {
23
  const [auth_token, set_auth_token] = useState<string | null>(null);
24
  const [err, set_err] = useState<string | null>(null);
25
  const [extraWarning, setExtraWarning] = useState<boolean>(false);
26
  const { locale } = useLocalizationCtx();
27

28
  async function get_token(): Promise<void> {
29
    try {
30
      const auth_token = await webapp_client.admin_client.get_user_auth_token(
31
        account_id,
32
      );
33
      set_auth_token(auth_token);
34
      set_err(null);
35
    } catch (err) {
36
      set_err(err.toString());
37
      set_auth_token(null);
38
    }
39
  }
40

41
  useEffect(() => {
42
    get_token();
43
  }, []);
44

45
  function render_link(): Rendered {
46
    if (auth_token == null) {
47
      return <Loading />;
48
    }
49

50
    // The lang_temp temporarily sets the interface language of the user to impersonate to the one of the admin
51
    const link = join(
52
      appBasePath,
53
      `auth/impersonate?auth_token=${auth_token}&lang_temp=${locale}`,
54
    );
55

56
    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
57
      event.preventDefault(); // Prevent left click from opening the link
58
      setExtraWarning(true);
59
    };
60

61
    return (
62
      <div>
63
        <div style={{ fontSize: "13pt", textAlign: "center" }}>
64
          <a
65
            href={link}
66
            onClick={handleClick}
67
            target="_blank"
68
            rel="noopener noreferrer"
69
          >
70
            <Icon name="external-link" /> Right click and open this link in a
71
            new <b>Incognito Window</b>, where you will be signed in as "
72
            {first_name} {last_name}"...
73
          </a>
74
          <br />
75
          <br />
76
          or copy the following link and paste it in a different browser:
77
          <br />
78
          <br />
79
          <CopyToClipBoard
80
            before
81
            inputWidth="500px"
82
            value={`${location.origin}${link}`}
83
          />
84
        </div>
85
        {extraWarning && (
86
          <Alert
87
            showIcon
88
            style={{ margin: "30px auto", maxWidth: "800px" }}
89
            type="warning"
90
            message="Open this link in a new Incognito Window!"
91
            description="Otherwise your current browser session will get overwritten, and potentially sensitive information could leak."
92
          />
93
        )}
94
      </div>
95
    );
96
  }
97

98
  function render_err(): Rendered {
99
    if (err != null) {
100
      return (
101
        <div>
102
          <b>ERROR</b> {err}
103
        </div>
104
      );
105
    }
106
  }
107

108
  return (
109
    <Card
110
      title={
111
        <>
112
          Impersonate user "{first_name} {last_name}"
113
        </>
114
      }
115
    >
116
      {render_err()}
117
      {render_link()}
118
    </Card>
119
  );
120
}
121

122