1
import { Button, Modal, Popconfirm } from "antd";
2
import { useState } from "react";
3
import { Icon } from "@cocalc/frontend/components/icon";
4

5
export default function DeletedAccount({
6
  actions,
7
  student_id,
8
  name,
9
  email_address,
10
}) {
11
  const [open, setOpen] = useState<boolean>(false);
12
  return (
13
    <span style={{ color: "#666" }}>
14
      <Modal
15
        centered
16
        title={
17
          <>
18
            <Icon name="trash" /> {name ?? "This Student"} Deleted their CoCalc
19
            Account
20
          </>
21
        }
22
        open={open}
23
        onCancel={() => setOpen(false)}
24
      >
25
        <p>
26
          Your student {name} {email_address} deleted their Cocalc account. They
27
          may have created a new CoCalc account, left the course, or something
28
          else. You can leave things as is, or you can delete them entirely from
29
          this course. If they want to be in the course, delete them below, then
30
          add them back to the course as usual.
31
        </p>
32
        <p>
33
          If you delete the student, any grades you recorded for them will also
34
          be deleted.
35
        </p>
36
        <div style={{ margin: "10px 0", textAlign: "center" }}>
37
          <Popconfirm
38
            title={<>Completely delete {name} from your course?</>}
39
            onConfirm={async () => {
40
              await actions.students.delete_student(student_id, true);
41
              setOpen(false);
42
            }}
43
            okText={"DELETE"}
44
          >
45
            <Button danger>Delete {name}...</Button>
46
          </Popconfirm>
47
        </div>
48
      </Modal>
49
      <a
50
        onClick={() => {
51
          setOpen(true);
52
        }}
53
      >
54
        (they deleted their account...)
55
      </a>
56
    </span>
57
  );
58
}
59

60