LoginAlertModal.tsx 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. import { useIntl } from "react-intl";
  2. import { Modal } from "antd";
  3. import { ExclamationCircleOutlined } from "@ant-design/icons";
  4. import { useAppSelector } from "../../hooks";
  5. import { isGuest } from "../../reducers/current-user";
  6. import { useEffect } from "react";
  7. import { useNavigate } from "react-router";
  8. interface IWidget {
  9. enable?: boolean;
  10. mode?: string;
  11. }
  12. const LoginAlertModalWidget = ({ enable = false, mode = "read" }: IWidget) => {
  13. const intl = useIntl();
  14. const navigate = useNavigate();
  15. const guest = useAppSelector(isGuest);
  16. console.log("mode", mode);
  17. useEffect(() => {
  18. const guestMode = localStorage.getItem("guest_mode");
  19. if (guestMode === "true") {
  20. return;
  21. }
  22. if (guest && (mode !== "read" || enable === true)) {
  23. Modal.confirm({
  24. title: intl.formatMessage({
  25. id: "labels.no.login",
  26. }),
  27. icon: <ExclamationCircleOutlined />,
  28. content: intl.formatMessage({
  29. id: "message.auth.guest.alert",
  30. }),
  31. okText: intl.formatMessage({
  32. id: "buttons.sign-in",
  33. }),
  34. cancelText: intl.formatMessage({
  35. id: "buttons.use.as.guest",
  36. }),
  37. onOk: () => navigate("/anonymous/users/sign-in"),
  38. onCancel: () => localStorage.setItem("guest_mode", "true"),
  39. });
  40. }
  41. }, [guest, mode, enable]);
  42. return <></>;
  43. };
  44. export default LoginAlertModalWidget;