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

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { verified, rejected, pending } from './images';
import { css } from '../../common';
import { Item, Modal, Header, Button, Icon } from 'semantic-ui-react';
import { Observer } from 'mobx-react';
const signedStyle = css `
  font-size: 18px !important;
`;
const signedDate = css `
  font-size: 12px !important;
  color: #333;
`;
export const SignedSignature = ({ value, font, readonly }) => {
    const [modalOpen, toggleOpen] = React.useState(false);
    if (readonly) {
        return (React.createElement(Item.Group, null,
            React.createElement(Item, null,
                React.createElement(Item.Image, { size: "tiny" },
                    React.createElement("img", { src: value.verifiedState === 'Verified' ? verified : rejected, title: value.verifiedState === 'Verified'
                            ? 'Verified Signature'
                            : 'Invalid Signature. Document data do not match the signed document data.' })),
                React.createElement(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(Observer, null, () => (React.createElement(Item.Group, null,
        React.createElement(Item, null,
            React.createElement(Item.Image, { size: "tiny" },
                value.verifiedState === 'Pending' && (React.createElement(Modal, { trigger: React.createElement("img", { src: pending, title: "Pending Signature Verification", onClick: () => toggleOpen(true) }), basic: true, size: "small", open: modalOpen },
                    React.createElement(Header, { icon: "question", content: "Pending Verification" }),
                    React.createElement(Modal.Content, null,
                        React.createElement("p", null, "Please wait while we verify the signature.")),
                    React.createElement(Modal.Actions, null,
                        React.createElement(Button, { basic: true, inverted: true, onClick: () => toggleOpen(false) },
                            React.createElement(Icon, { name: "remove" }),
                            " Close")))),
                value.verifiedState === 'Verified' && (React.createElement(Modal, { trigger: React.createElement("img", { src: verified, title: "Valid Signature", onClick: () => toggleOpen(true) }), basic: true, size: "small", open: modalOpen },
                    React.createElement(Header, { icon: "check", content: "The Signature is Valid" }),
                    React.createElement(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(Modal.Actions, null,
                        React.createElement(Button, { basic: true, inverted: true, onClick: () => toggleOpen(false) },
                            React.createElement(Icon, { name: "remove" }),
                            " Close")))),
                value.verifiedState === 'Rejected' && (React.createElement(Modal, { trigger: React.createElement("img", { src: rejected, title: "Invalid Signature", onClick: () => toggleOpen(true) }), basic: true, size: "small", open: modalOpen },
                    React.createElement(Header, { icon: "times circle", content: "The Signature is Invalid" }),
                    React.createElement(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(Modal.Actions, null,
                        React.createElement(Button, { basic: true, inverted: true, onClick: () => toggleOpen(false) },
                            React.createElement(Icon, { name: "remove" }),
                            " Close"))))),
            React.createElement(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