Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 12x 12x 1x 1x 12x 12x 1x 1x 1x 1x 1x 12x 12x 12x 12x 3x 3x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 1x | import { Row, Col, Button, Accordion } from "react-bootstrap";
import RoleBadge from "main/components/Profile/RoleBadge";
import { hasRole, useCurrentUser } from "main/utils/currentUser";
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import JsonView from "@uiw/react-json-view";
import { useBackendMutation } from "main/utils/useBackend";
import { toast } from "react-toastify";
import { useState } from "react";
import ConfirmationModal from "main/components/Common/ConfirmationModal";
const ProfilePage = () => {
const currentUser = useCurrentUser();
const onSuccess = (response) => {
toast(response.message);
};
const disconnectGithub = useBackendMutation(
() => {
return {
url: "/api/github/disconnect",
method: "DELETE",
};
},
{ onSuccess: onSuccess },
["current user"],
);
const [viewModal, setViewModal] = useState(false);
if (!currentUser.loggedIn) {
return <p>Not logged in.</p>;
}
const { email, pictureUrl, fullName } = currentUser.root.user;
return (
<BasicLayout>
<ConfirmationModal
onYes={disconnectGithub.mutate}
showModal={viewModal}
setShowModal={setViewModal}
>
<p>Are you sure you want to disconnect your Github account?</p>
<p>Please only do so if you know what you're doing.</p>
</ConfirmationModal>
<Row className="align-items-center profile-header mb-5 text-center text-md-left">
<Col md={2}>
<h2>User Profile</h2>
<img
src={pictureUrl}
alt="Profile"
className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
/>
</Col>
<Col md>
<h2>{fullName}</h2>
<p className="lead text-muted">{email}</p>
<RoleBadge role={"ROLE_USER"} currentUser={currentUser} />
<RoleBadge role={"ROLE_MEMBER"} currentUser={currentUser} />
<RoleBadge role={"ROLE_ADMIN"} currentUser={currentUser} />
</Col>
</Row>
<Row className={"mt-3 g-3"} data-testid={"ProfilePage-advancedFeatures"}>
<h2>Advanced Features</h2>
{hasRole(currentUser, "ROLE_GITHUB") && (
<>
<Col md={2}>
<Button variant={"danger"} onClick={() => setViewModal(true)}>
Disconnect GitHub
</Button>
</Col>
</>
)}
</Row>
<Row>
<Col>
<Accordion>
<Accordion.Item eventKey="individual">
<Accordion.Header>Current User Information</Accordion.Header>
<Accordion.Body>
<JsonView value={currentUser} />
</Accordion.Body>
</Accordion.Item>
</Accordion>
</Col>
</Row>
</BasicLayout>
);
};
export default ProfilePage;
|