=== Sign Documents with Crypto Pro ===
Contributors: enkydo
Tags: crypto, crypto-pro, signature, gost
Requires at least: 5.7
Requires PHP: 8.0
Tested up to: 6.9
Stable tag: 1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Plugin to create cms signature for DOM element with crypto pro plugin (Russian GOST).

== Description ==

This plugin allows you to sign HTML DOM element content with CryptoPro GOST certificates.
Element content will be converted to PDF and signed by selected cretificate.
Plugin uses https://www.npmjs.com/package/crypto-pro-actual-cades-plugin#api-cryptopro lib

== JavaScript Libraries ==

This plugin uses the following JavaScript libraries:

* jsPDF v4.0.0 - https://github.com/parallax/jsPDF
  A library to generate PDFs in JavaScript

Source JavaScript files are located in the `js` folder. Plugin scripts are built with Vite; the configuration is in `vite.config.js`. Build scripts are defined in `package.json`. For development, use npm (e.g. `npm run dev`, `npm run build`).

== Software Dependencies ==

This plugin requires the following software to be installed on the user's system:

* КриптоПро CSP - https://cryptopro.ru/products/csp
* КриптоПро ЭЦП Browser plug-in - https://docs.cryptopro.ru/cades/plugin

For more information about КриптоПро CSP, please see the product leaflet: https://cryptopro.ru/sites/default/files/products/csp/cryptopro_csp_leaflet_a4.pdf

All rights for КриптоПро CSP and КриптоПро ЭЦП Browser plug-in are reserved by © ООО «КРИПТО-ПРО».

== Recommended Browser ==

Browsers that do not require additional browser extension configuration after plugin installation:

* Chromium-Gost - https://cryptopro.ru/products/chromium-gost
* Yandex Browser for organizations - https://browser.yandex.ru/b/cryptopro_plugin

== Alternative Browsers ==

If you plan to use a different browser, you will need to manually enable the browser extension after completing the plugin installation. Use the instruction corresponding to your browser:

* Chromium-based browser (Chrome, Microsoft Edge) - https://docs.cryptopro.ru/cades/plugin/plugin-installation-unix?id=%d0%98%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%be%d0%b2-%d0%bd%d0%b0-%d0%be%d1%81%d0%bd%d0%be%d0%b2%d0%b5-chromium
* Opera browser or Yandex Browser - https://docs.cryptopro.ru/cades/plugin/plugin-installation-unix?id=%d0%98%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%be%d0%b2-opera-%d0%b8%d0%bb%d0%b8-%d0%af%d0%bd%d0%b4%d0%b5%d0%ba%d1%81%d0%91%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80
* Firefox browser - https://docs.cryptopro.ru/cades/plugin/plugin-installation-unix?id=%d0%98%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%be%d0%b2-firefox
* Installing browser extension from file for different browsers - https://support.cryptopro.ru/index.php?/Knowledgebase/Article/View/467

== Installation ==

1. Upload the plugin files to the `/wp-content/plugins/crypto-wp` directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress
3. Use the `[sdcp_show_form]` shortcode to display the signing form on a post. You have to use the "node_id" parameter with this short code to set the DOM element for signing. Dont forget add this id ("Anchor" parameter in 
Gutenberg editor). As example, 
`
[sdcp_show_form node_id="signed-content"]
`

4. Use the `[sdcp_show_creation_date]` shortcode to display the creation date of the signatures. Optionaly you can use the "post_id" parameter with this short code. As example, 
`
[sdcp_show_creation_date post_id=2]
`


= Delete =
Delete all the "sdcp_sign" post meta form database after plugin delete.

== Frequently Asked Questions ==

= What is a typical use case? (e.g. signing a contract) =

* **Administrator** publishes content for users (sends a link by email or places the content in a personal cabinet) so that they can sign it.
* **Users** sign the content and see only their own signatures under it.
* **Administrator** sees all users' signatures.

= How can I customize the appearance of the signing form? =

You can use CSS to customize the signing form. The form has the ID `#sdcp_form`. The "Add Sign" button has the ID `#sdcp_add-sign-button`, and the "Sign" button has the ID `#sdcp_sign-button`. You can use these IDs to target the elements in your CSS.

For example, to change the background color of the "Sign" button, you can use the following CSS:

`#sdcp_sign-button { background-color: #0073aa; }`

= How can I customize the appearance of the signature list? =

You can use CSS to customize the signature list. The list is an unordered list (`<ul>`) and each signature is a list item (`<li>`). The link to each signature has the class `.sdcp_signmment-link`.

For example, to change the color of the signature links, you can use the following CSS:

`
/* 1. Container Reset & Layout */
.sdcp_signment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px; /* Space between items */
  max-width: 600px; /* Optional: limits width for better readability */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 2. The Card Item */
.sdcp_signment-item {
  margin: 0;
}

/* 3. The Link Styling (The main card look) */
.sdcp_signmment-link {
  display: flex;
  align-items: center;
  position: relative;
  
  /* Size & Spacing */
  padding: 16px 20px;
  background-color: #ffffff;
  border-radius: 8px;
  
  /* Borders */
  border: 1px solid #e0e0e0;
  border-left: 6px solid #037971; /* Teal Accent */
  
  /* Text Styling */
  color: #56445d; /* Dark Purple Text */
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  
  /* Modern Depth */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  
  /* Animation */
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 4. Adding a decorative "Status Dot" using CSS (No HTML change needed) */
.sdcp_signmment-link::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #fb3640; /* Red Dot */
  border-radius: 50%;
  margin-right: 15px;
  flex-shrink: 0;
}

/* 5. Hover State */
.sdcp_signmment-link:hover {
  transform: translateY(-3px); /* Lifts up slightly */
  box-shadow: 0 10px 20px rgba(159, 187, 204, 0.4); /* Uses the Light Blue in shadow */
  border-color: #9fbbcc; /* Light Blue border */
}

/* 6. Active/Click State */
.sdcp_signmment-link:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #fafafa;
}

/* 7. Focus State (Accessibility) */
.sdcp_signmment-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px #ffcf56; /* Yellow Glow ring */
  border-radius: 8px;
}
`

= How can I customize the appearance of the dynamically created elements? =

The plugin's JavaScript file creates some HTML elements dynamically. You can use CSS to customize these elements as well.

- The certificate select dropdown has the ID `#sdcp_certificate-select` and the class `.sdcp_cert-select`.
- The options in the select dropdown have the class `.sdcp_cert-select`.
- The footer added to the PDF has the class `.temp-pdf-footer`.

For example, to change the font size of the certificate select dropdown, you can use the following CSS:

`#sdcp_certificate-select { font-size: 14px; }`

== Hooks ==

This plugin provides several hooks to extend its functionality.

=== PHP Hooks ===

`sdcp_params`

Filters the shortcode parameters. You can change the DOM element id to sign

`add_filter('sdcp_params', 'change_sdcp_params');
function change_sdcp_params($sdcp_params)
{
    // Your code here
    return $sdcp_params;
}`

`sdcp_cert_list_item`

Filters the list item of the certificate. You can filter cerst by INN, owner, cn

`
add_filter('sdcp_cert_list_item', 'change_sdcp_cert_item_li');
function change_sdcp_cert_item_li($item)
{
    // Your code here
    return 'Signed at: ' . esc_html($item['created_at']) . ' by ' . esc_html($item['owner']);
}
`

`sdcp_saved_sign`

This action is triggered after a signature is saved. You can do anything with signed data array

`
add_action('sdcp_saved_sign', 'sdcp_get_datasignement', 50, 1);
function sdcp_get_datasignement($saved_data)
{
    // Your code here
}
`

=== JavaScript Hooks ===
You must add yur own script to Wordpress at first
`
function sdcp_hook_javascript_footer() {
    ?>
        <script>
          // your javascript code goes here
        </script>
    <?php
}
add_action('wp_footer', 'sdcp_hook_javascript_footer');
`

`certs`

This hook is triggered after the certificates are fetched.
`sdcp_ajax_object.callbacks.push({ hook: "certs", callback: certs });
const certs = (certs) => {
    console.log(certs);
    return certs;
};`

`success`

This hook is triggered after the form is submitted successfully.

`sdcp_ajax_object.callbacks.push({ hook: "success", callback: success });
const success = (successData) => {
    console.log(successData);
    return successData;
};`

`error`

This hook is triggered if an error occurs during form submission.

`sdcp_ajax_object.callbacks.push({ hook: "error", callback: errors });
const errors = (errorData) => {
    console.log(errorData);
    return errorData;
};`

`listoptions`

This hook is triggered when the certificate options are being rendered.

`sdcp_ajax_object.callbacks.push({ hook: "listoptions", callback: listoptions });
const listoptions = (cert) => {
    console.log(cert);
    return `Owner: ${cert.owner}, Expires: ${new Date(
            cert.validTo
          ).toLocaleDateString()}`;
};`

== Verification ==

To verify the attached signature, you can use the CryptoPro aplication in your browser, or the Gosuslugi service.
Plugin makes the attached signature and store it in post meta field "sdcp_sign" in "sign" json field.
Plugin give you link to download the signatures as file in [sdcp_show_creation_date] shortcode. Optionaly you can use the "post_id" parameter with this short code. As example, 
`
[sdcp_show_creation_date post_id=2]
`


=== Using Gosuslugi ===

1.  Go to the Gosuslugi signature verification page: https://e-trust.gosuslugi.ru/check/sign#/portal/sig-check
2.  Upload the file with the attached signature.
3.  The service will verify the signature and display the result.

== Screenshots ==

1. A screenshot of the signing form.

== Changelog ==

= 1.0 =
* Initial release.

== Upgrade Notice ==

= 1.0 =
* Initial release.