@tomino/dynamic-form-semantic-ui/dist/cjs/semantic/signature/signature_signed.js

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const images_1 = require("./images");
const common_1 = require("../../common");
const semantic_ui_react_1 = require("semantic-ui-react");
const mobx_react_1 = require("mobx-react");
const signedStyle = common_1.css `
  font-size: 18px !important;
`;
const signedDate = common_1.css `
  font-size: 12px !important;
  color: #333;
`;
exports.SignedSignature = ({ value, font, readonly }) => {
    const [modalOpen, toggleOpen] = React.useState(false);
    if (readonly) {
        return (React.createElement(semantic_ui_react_1.Item.Group, null,
            React.createElement(semantic_ui_react_1.Item, null,
                React.createElement(semantic_ui_react_1.Item.Image, { size: "tiny" },
                    React.createElement("img", { src: value.verifiedState === 'Verified' ? images_1.verified : images_1.rejected, title: value.verifiedState === 'Verified'
                            ? 'Verified Signature'
                            : 'Invalid Signature. Document data do not match the signed document data.' })),
                React.createElement(semantic_ui_react_1.Item.Content, null,
                    React.createElement("span", { className: signedStyle, style: { fontFamily: font } }, value.name),
                    React.createElement("br", null),
                    React.createElement("span", { className: signedDate }, new Date(value.date).toLocaleDateString())))));
    }
    return (React.createElement(mobx_react_1.Observer, null, () => (React.createElement(semantic_ui_react_1.Item.Group, null,
        React.createElement(semantic_ui_react_1.Item, null,
            React.createElement(semantic_ui_react_1.Item.Image, { size: "tiny" },
                value.verifiedState === 'Pending' && (React.createElement(semantic_ui_react_1.Modal, { trigger: React.createElement("img", { src: images_1.pending, title: "Pending Signature Verification", onClick: () => toggleOpen(true) }), basic: true, size: "small", open: modalOpen },
                    React.createElement(semantic_ui_react_1.Header, { icon: "question", content: "Pending Verification" }),
                    React.createElement(semantic_ui_react_1.Modal.Content, null,
                        React.createElement("p", null, "Please wait while we verify the signature.")),
                    React.createElement(semantic_ui_react_1.Modal.Actions, null,
                        React.createElement(semantic_ui_react_1.Button, { basic: true, inverted: true, onClick: () => toggleOpen(false) },
                            React.createElement(semantic_ui_react_1.Icon, { name: "remove" }),
                            " Close")))),
                value.verifiedState === 'Verified' && (React.createElement(semantic_ui_react_1.Modal, { trigger: React.createElement("img", { src: images_1.verified, title: "Valid Signature", onClick: () => toggleOpen(true) }), basic: true, size: "small", open: modalOpen },
                    React.createElement(semantic_ui_react_1.Header, { icon: "check", content: "The Signature is Valid" }),
                    React.createElement(semantic_ui_react_1.Modal.Content, null,
                        React.createElement("p", null,
                            "The signature was verified. User ",
                            value.name,
                            " has signed this document and since the document has been signed it has not been modified or tampered with.")),
                    React.createElement(semantic_ui_react_1.Modal.Actions, null,
                        React.createElement(semantic_ui_react_1.Button, { basic: true, inverted: true, onClick: () => toggleOpen(false) },
                            React.createElement(semantic_ui_react_1.Icon, { name: "remove" }),
                            " Close")))),
                value.verifiedState === 'Rejected' && (React.createElement(semantic_ui_react_1.Modal, { trigger: React.createElement("img", { src: images_1.rejected, title: "Invalid Signature", onClick: () => toggleOpen(true) }), basic: true, size: "small", open: modalOpen },
                    React.createElement(semantic_ui_react_1.Header, { icon: "times circle", content: "The Signature is Invalid" }),
                    React.createElement(semantic_ui_react_1.Modal.Content, null,
                        React.createElement("p", null, "It is possible that the content of the form has been modified after user signed the document. Please contact the process owner and the signatory.")),
                    React.createElement(semantic_ui_react_1.Modal.Actions, null,
                        React.createElement(semantic_ui_react_1.Button, { basic: true, inverted: true, onClick: () => toggleOpen(false) },
                            React.createElement(semantic_ui_react_1.Icon, { name: "remove" }),
                            " Close"))))),
            React.createElement(semantic_ui_react_1.Item.Content, null,
                React.createElement("span", { className: signedStyle, style: { fontFamily: font } }, value.name),
                React.createElement("br", null),
                React.createElement("span", { className: signedDate }, new Date(value.date).toLocaleDateString())))))));
};
//# sourceMappingURL=signature_signed.js.map