138 lines
3.9 KiB
TypeScript
138 lines
3.9 KiB
TypeScript
import LinkIcon from "@mui/icons-material/Link";
|
|
import LinkOffIcon from "@mui/icons-material/LinkOff";
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardActions,
|
|
CardContent,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { MatrixLinkApi } from "../api/MatrixLinkApi";
|
|
import { useAlert } from "../hooks/contexts_provider/AlertDialogProvider";
|
|
import { useConfirm } from "../hooks/contexts_provider/ConfirmDialogProvider";
|
|
import { useLoadingMessage } from "../hooks/contexts_provider/LoadingMessageProvider";
|
|
import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
|
|
import { useUserInfo } from "../widgets/dashboard/BaseAuthenticatedPage";
|
|
import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";
|
|
|
|
export function MatrixLinkRoute(): React.ReactElement {
|
|
const user = useUserInfo();
|
|
return (
|
|
<MatrixGWRouteContainer label={"Matrix account link"}>
|
|
{user.info.matrix_user_id === null ? <ConnectCard /> : <ConnectedCard />}
|
|
</MatrixGWRouteContainer>
|
|
);
|
|
}
|
|
|
|
function ConnectCard(): React.ReactElement {
|
|
const alert = useAlert();
|
|
const loadingMessage = useLoadingMessage();
|
|
|
|
const startMatrixConnection = async () => {
|
|
try {
|
|
loadingMessage.show("Initiating Matrix link...");
|
|
|
|
const res = await MatrixLinkApi.StartAuth();
|
|
|
|
window.location.href = res.url;
|
|
} catch (e) {
|
|
console.error(`Failed to connect to Matrix account! ${e}`);
|
|
alert(`Failed to connect to Matrix account! ${e}`);
|
|
} finally {
|
|
loadingMessage.hide();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<Typography variant="h5" component="div" gutterBottom>
|
|
<i>Disconnected from your Matrix account</i>
|
|
</Typography>
|
|
|
|
<Typography variant="body1" gutterBottom>
|
|
You need to connect MatrixGW to your Matrix account to let it access
|
|
your messages.
|
|
</Typography>
|
|
</CardContent>
|
|
<CardActions>
|
|
<Button
|
|
size="small"
|
|
variant="outlined"
|
|
startIcon={<LinkIcon />}
|
|
onClick={startMatrixConnection}
|
|
>
|
|
Connect now
|
|
</Button>
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function ConnectedCard(): React.ReactElement {
|
|
const snackbar = useSnackbar();
|
|
const confirm = useConfirm();
|
|
const alert = useAlert();
|
|
const loadingMessage = useLoadingMessage();
|
|
|
|
const info = useUserInfo();
|
|
|
|
const user = useUserInfo();
|
|
|
|
const handleDisconnect = async () => {
|
|
if (!(await confirm("Do you really want to unlink your Matrix account?")))
|
|
return;
|
|
|
|
try {
|
|
loadingMessage.show("Unlinking Matrix account...");
|
|
await MatrixLinkApi.Disconnect();
|
|
snackbar("Successfully unlinked Matrix account!");
|
|
} catch (e) {
|
|
console.error(`Failed to unlink user account! ${e}`);
|
|
alert(`Failed to unlink your account! ${e}`);
|
|
} finally {
|
|
info.reloadUserInfo();
|
|
loadingMessage.hide();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<Typography variant="h5" component="div" gutterBottom>
|
|
<i>Connected to your Matrix account</i>
|
|
</Typography>
|
|
|
|
<Typography variant="body1" gutterBottom>
|
|
<p>
|
|
MatrixGW is currently connected to your account with the following
|
|
information:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
User id: <i>{user.info.matrix_user_id}</i>
|
|
</li>
|
|
<li>
|
|
Device id: <i>{user.info.matrix_device_id}</i>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
If you encounter issues with your Matrix account you can try to
|
|
disconnect and connect back again.
|
|
</p>
|
|
</Typography>
|
|
</CardContent>
|
|
<CardActions>
|
|
<Button
|
|
size="small"
|
|
variant="outlined"
|
|
startIcon={<LinkOffIcon />}
|
|
onClick={handleDisconnect}
|
|
>
|
|
Disconnect
|
|
</Button>
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
}
|