@particle-network/authkit
Version:
Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.
116 lines (112 loc) • 8.53 kB
JavaScript
"use client";
import {
header_default
} from "./chunk-55LX7B3D.mjs";
import {
svg_icon_default
} from "./chunk-C3QCRACD.mjs";
import {
power_footer_default
} from "./chunk-PPCDDBBD.mjs";
import {
useAuthCoreModal,
useCustomNavigate,
useMessage_default,
useTranslation
} from "./chunk-H5PUG6U3.mjs";
import "./chunk-55PCA22M.mjs";
// src/pages/manageDevices/deviceDetails/index.tsx
import { deleteAuthorizationDApp } from "@particle-network/auth-core";
import { Button, Modal } from "antd";
import React, { useState } from "react";
// src/pages/manageDevices/deviceDetails/index.less
var deviceDetails_default = ".device-details-wrapper {\n -webkit-overflow-scrolling: touch;\n height: 100%;\n}\n.device-details-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n overflow: auto;\n color: var(--text-color);\n}\n.device-details-container .scroll-wrapper {\n flex: 1;\n overflow: auto;\n}\n.device-details-container .details-list {\n padding: 0 18px;\n padding-bottom: 50px;\n margin-top: 20px;\n}\n.device-details-container .details-list .item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 58px;\n padding: 0 12px 0 14px;\n margin-bottom: 10px;\n border-radius: var(--card-border-radius);\n background: var(--card-unclickable-background-color);\n}\n.device-details-container .details-list .item .right {\n font-weight: 400;\n font-size: 12px;\n}\n.device-details-container .btns {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 0 18px;\n background: var(--theme-background-color);\n}\n.device-details-container .btns .confirm-delete-btn {\n width: 100%;\n max-width: 360px;\n height: 46px;\n padding: 0;\n line-height: 46px;\n}\n.delete-confirm-modal .ant-modal-confirm-btns,\n.delete-confirm-modal .anticon-exclamation-circle {\n display: none;\n}\n.delete-confirm-modal .ant-modal-confirm-content {\n margin: 0 !important;\n}\n.delete-confirm-modal .ant-modal-body {\n position: relative;\n padding: 26px 18px;\n}\n.delete-confirm-modal .content-text {\n margin-top: 40px;\n margin-bottom: 34px;\n font-weight: 500;\n font-size: 20px;\n text-align: center;\n color: var(--text-color);\n}\n.delete-confirm-modal .close-btn {\n position: absolute;\n top: 10px;\n right: 16px;\n font-size: 30px;\n}\n.delete-confirm-modal .btns {\n display: flex;\n gap: 20px;\n justify-content: space-between;\n}\n.delete-confirm-modal .btns button {\n flex: 1;\n height: 46px;\n}\n.delete-confirm-modal .btns button.cancel-btn {\n color: var(--text-color);\n background: var(--secondary-btn-background-color);\n}\n@media (max-width: 767px) {\n .delete-confirm-modal .ant-modal {\n max-width: calc(100vw - 36px);\n margin: 8px auto;\n }\n}\n";
// src/pages/manageDevices/deviceDetails/index.tsx
var DeviceList = (props) => {
var _a, _b, _c, _d;
const { loginDeviceInfo } = props;
const { t } = useTranslation();
const navigate = useCustomNavigate();
const { authCoreModal } = useAuthCoreModal();
const [visibleModal, setVisibleModal] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false);
const openDeleteModal = () => {
setVisibleModal(true);
};
const message = useMessage_default();
const closeDeleteModal = () => {
setVisibleModal(false);
};
return /* @__PURE__ */ React.createElement("div", { className: "device-details-wrapper" }, /* @__PURE__ */ React.createElement("style", null, deviceDetails_default), /* @__PURE__ */ React.createElement("div", { className: "device-details-container" }, /* @__PURE__ */ React.createElement(header_default, { displayBackBtn: true }, t("new.details")), /* @__PURE__ */ React.createElement("div", { className: "scroll-wrapper" }, /* @__PURE__ */ React.createElement("div", { className: "details-list" }, /* @__PURE__ */ React.createElement("div", { className: "item" }, /* @__PURE__ */ React.createElement("div", { className: "left" }, t("new.app")), /* @__PURE__ */ React.createElement("div", { className: "right" }, loginDeviceInfo.project_app_name || "-")), /* @__PURE__ */ React.createElement("div", { className: "item" }, /* @__PURE__ */ React.createElement("div", { className: "left" }, t("new.device")), /* @__PURE__ */ React.createElement("div", { className: "right" }, loginDeviceInfo.device || "-")), /* @__PURE__ */ React.createElement("div", { className: "item" }, /* @__PURE__ */ React.createElement("div", { className: "left" }, t("new.authorized_time")), /* @__PURE__ */ React.createElement("div", { className: "right" }, loginDeviceInfo.updated_at || "-")), /* @__PURE__ */ React.createElement("div", { className: "item" }, /* @__PURE__ */ React.createElement("div", { className: "left" }, t("new.login_method")), /* @__PURE__ */ React.createElement("div", { className: "right" }, (loginDeviceInfo.login_channel || "-").replace("Twitterv1", "Twitter"))), /* @__PURE__ */ React.createElement("div", { className: "item" }, /* @__PURE__ */ React.createElement("div", { className: "left" }, t("new.ip")), /* @__PURE__ */ React.createElement("div", { className: "right" }, ((_a = loginDeviceInfo == null ? void 0 : loginDeviceInfo.location) == null ? void 0 : _a.ip) || "-")), /* @__PURE__ */ React.createElement("div", { className: "item" }, /* @__PURE__ */ React.createElement("div", { className: "left" }, t("new.country")), /* @__PURE__ */ React.createElement("div", { className: "right" }, ((_b = loginDeviceInfo == null ? void 0 : loginDeviceInfo.location) == null ? void 0 : _b.country_name) || ((_c = loginDeviceInfo == null ? void 0 : loginDeviceInfo.location) == null ? void 0 : _c.country_code) || "-")), /* @__PURE__ */ React.createElement("div", { className: "item" }, /* @__PURE__ */ React.createElement("div", { className: "left" }, t("new.city")), /* @__PURE__ */ React.createElement("div", { className: "right" }, ((_d = loginDeviceInfo == null ? void 0 : loginDeviceInfo.location) == null ? void 0 : _d.city) || "-")))), /* @__PURE__ */ React.createElement("div", { className: "btns" }, /* @__PURE__ */ React.createElement(
Button,
{
className: "still-confirm confirm-delete-btn",
disabled: loginDeviceInfo.isCurrent,
onClick: () => {
openDeleteModal();
}
},
t("new.delete_access")
)), /* @__PURE__ */ React.createElement(
Modal,
{
className: "delete-confirm-modal",
open: visibleModal,
closable: false,
footer: null,
centered: true,
getContainer: () => {
return authCoreModal.rootBody;
}
},
/* @__PURE__ */ React.createElement("div", { className: "content-wrap" }, /* @__PURE__ */ React.createElement(
"div",
{
className: "close-btn",
onClick: () => {
closeDeleteModal();
}
},
/* @__PURE__ */ React.createElement(svg_icon_default, { className: "circle_close", name: "circle_close" })
), /* @__PURE__ */ React.createElement("div", { className: "content-text" }, t("new.delete_access_to_n").format(loginDeviceInfo == null ? void 0 : loginDeviceInfo.project_app_name, loginDeviceInfo == null ? void 0 : loginDeviceInfo.device)), /* @__PURE__ */ React.createElement("div", { className: "btns" }, /* @__PURE__ */ React.createElement(
Button,
{
className: "cancel-btn",
onClick: () => {
closeDeleteModal();
}
},
t("common.cancel")
), /* @__PURE__ */ React.createElement(
Button,
{
className: "still-confirm delete-btn",
loading: deleteLoading,
onClick: () => {
setDeleteLoading(true);
setTimeout(() => {
deleteAuthorizationDApp(loginDeviceInfo == null ? void 0 : loginDeviceInfo.project_app_uuid).finally(() => {
setDeleteLoading(false);
}).then((res) => {
if (res) {
closeDeleteModal();
setTimeout(() => {
navigate(-1);
}, 500);
}
}).catch((error) => {
message.error(error.message);
console.log("deleteAuthorization Error", error);
});
}, 500);
}
},
t("new.delete")
)))
), /* @__PURE__ */ React.createElement(power_footer_default, { className: "footer-box-v2" })));
};
var deviceDetails_default2 = DeviceList;
export {
deviceDetails_default2 as default
};
//# sourceMappingURL=deviceDetails-TCGDN35K.mjs.map