diff --git a/examples/react/src/App.css b/examples/react/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- a/examples/react/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/examples/react/src/App.js b/examples/react/src/App.js
index 7e9e533..dc8e28e 100644
--- a/examples/react/src/App.js
+++ b/examples/react/src/App.js
@@ -1,21 +1,118 @@
-import React from 'react';
-import './App.css';
-import CryptoPro from './components/CryptoPro';
+import React, { useState } from 'react';
+import { createAttachedSignature, createDetachedSignature, createHash } from 'crypto-pro';
+import Message from './components/Message';
+import Certificate from './components/Certificate';
+import SignatureType from './components/SignatureType';
+import Hash from './components/Hash';
+import Signature from './components/Signature';
+import SystemInfo from './components/SystemInfo';
function App() {
+ const [message, setMessage] = useState('');
+ const [certificate, setCertificate] = useState(null);
+ const [detachedSignature, setSignatureType] = useState(null);
+ const [hash, setHash] = useState('');
+ const [hashStatus, setHashStatus] = useState('Не вычислен');
+ const [hashError, setHashError] = useState(null);
+ const [signature, setSignature] = useState('');
+ const [signatureStatus, setSignatureStatus] = useState('Не создана');
+ const [signatureError, setSignatureError] = useState(null);
+
+ async function createSignature(event) {
+ let hash;
+
+ event.preventDefault();
+
+ setSignature('');
+ setSignatureError(null);
+
+ setHash('');
+ setHashError(null);
+ setHashStatus('Вычисляется...');
+
+ try {
+ hash = await createHash(message);
+
+ setHash(hash);
+ } catch (error) {
+ setHashError(error.message);
+
+ return;
+ }
+
+ setHashStatus('Не вычислен');
+ setSignatureStatus('Создается...');
+
+ if (detachedSignature) {
+ try {
+ setSignature(await createDetachedSignature(certificate.thumbprint, hash));
+ } catch (error) {
+ setSignatureError(error.message);
+ }
+
+ setSignatureStatus('Не создана');
+
+ return;
+ }
+
+ try {
+ setSignature(await createAttachedSignature(certificate.thumbprint, message));
+ } catch (error) {
+ setSignatureError(error.message);
+ }
+
+ setSignatureStatus('Не создана');
+ }
+
return (
- {({certificate, setCertificate, signature, setSignature, error, setError}) =>
- <>
-
-
- Создать подпись
-
-
-
- {error}
-
-
- }
+ <>
+
+
+
+
+
+
);
}
diff --git a/examples/react/src/components/Certificate.js b/examples/react/src/components/Certificate.js
new file mode 100644
index 0000000..327d1a4
--- /dev/null
+++ b/examples/react/src/components/Certificate.js
@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import { getCertificate, getUserCertificates } from 'crypto-pro';
+
+function Certificate({onChange}) {
+ const [certificates, setCertificates] = useState([]);
+ const [certificatesError, setCertificatesError] = useState([]);
+ const [certificate, setCertificate] = useState(null);
+ const [certificateDetails, setCertificateDetails] = useState(null);
+ const [detailsError, setDetailsError] = useState(null);
+
+ function selectCertificate(event) {
+ const certificate = certificates.find(({thumbprint}) => thumbprint === event.target.value);
+
+ setCertificate(certificate);
+ onChange(certificate);
+ }
+
+ async function loadCertificateDetails(thumbprint) {
+ try {
+ const certificate = await getCertificate(thumbprint);
+
+ setCertificateDetails({
+ name: certificate.name,
+ issuerName: certificate.issuerName,
+ subjectName: certificate.subjectName,
+ thumbprint: certificate.thumbprint,
+ validFrom: certificate.validFrom,
+ validTo: certificate.validTo,
+ isValid: await certificate.isValid(),
+ version: await certificate.getCadesProp('Version'),
+ base64: await certificate.exportBase64(),
+ algorithm: await certificate.getAlgorithm(),
+ extendedKeyUsage: await certificate.getExtendedKeyUsage(),
+ ownerInfo: await certificate.getOwnerInfo(),
+ issuerInfo: await certificate.getIssuerInfo(),
+ decodedExtendedKeyUsage: await certificate.getDecodedExtendedKeyUsage(),
+ '1.3.6.1.4.1.311.80.1': await certificate.hasExtendedKeyUsage('1.3.6.1.4.1.311.80.1'),
+ '[\'1.3.6.1.5.5.7.3.2\', \'1.3.6.1.4.1.311.10.3.12\']': await certificate.hasExtendedKeyUsage([
+ '1.3.6.1.5.5.7.3.2',
+ '1.3.6.1.4.1.311.10.3.12'
+ ]),
+ '1.3.6.1.4.1.311.80.2': await certificate.hasExtendedKeyUsage('1.3.6.1.4.1.311.80.2'),
+ '\'1.3.6.1.5.5.7.3.3\', \'1.3.6.1.4.1.311.10.3.12\'': await certificate.hasExtendedKeyUsage([
+ '1.3.6.1.5.5.7.3.3',
+ '1.3.6.1.4.1.311.10.3.12'
+ ]),
+ });
+ } catch (error) {
+ setDetailsError(error);
+ }
+ }
+
+ useEffect(() => {
+ (async () => {
+ try {
+ setCertificates(await getUserCertificates());
+ } catch (error) {
+ setCertificatesError(error.message);
+ }
+ })();
+ });
+
+ return (
+ <>
+
+
+
+
+
+
+ {certificatesError || null}
+
+ {certificate ? (
+ <>
+
+ Информация о сертификате
+
+
+ {certificateDetails ? (
+ JSON.stringify(certificateDetails, null, ' ')
+ ) : 'Запрашивается...'}
+
+
+
+ {detailsError || null}
+
+ ) : null}
+
+ );
+}
+
+export default Certificate;
diff --git a/examples/react/src/components/CryptoPro/CertInfo.js b/examples/react/src/components/CryptoPro/CertInfo.js
deleted file mode 100644
index 468bd24..0000000
--- a/examples/react/src/components/CryptoPro/CertInfo.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useState } from 'react';
-
-function CertInfo({certificate, onError}) {
- const [certInfo, setCertInfo] = useState(null);
-
- async function showCertInfo() {
- try {
- setCertInfo({
- name: certificate.name,
- issuerName: certificate.issuerName,
- subjectName: certificate.subjectName,
- thumbprint: certificate.thumbprint,
- validFrom: certificate.validFrom,
- validTo: certificate.validTo,
- isValid: await certificate.isValid(),
- version: await certificate.getCadesProp('Version'),
- base64: await certificate.exportBase64(),
- algorithm: await certificate.getAlgorithm(),
- extendedKeyUsage: await certificate.getExtendedKeyUsage(),
- ownerInfo: await certificate.getOwnerInfo(),
- issuerInfo: await certificate.getIssuerInfo(),
- decodedExtendedKeyUsage: await certificate.getDecodedExtendedKeyUsage(),
- '1.3.6.1.4.1.311.80.1': await certificate.hasExtendedKeyUsage('1.3.6.1.4.1.311.80.1'),
- "['1.3.6.1.5.5.7.3.2', '1.3.6.1.4.1.311.10.3.12']": await certificate.hasExtendedKeyUsage([
- '1.3.6.1.5.5.7.3.2',
- '1.3.6.1.4.1.311.10.3.12'
- ]),
- '1.3.6.1.4.1.311.80.2': await certificate.hasExtendedKeyUsage('1.3.6.1.4.1.311.80.2'),
- "'1.3.6.1.5.5.7.3.3', '1.3.6.1.4.1.311.10.3.12'": await certificate.hasExtendedKeyUsage([
- '1.3.6.1.5.5.7.3.3',
- '1.3.6.1.4.1.311.10.3.12'
- ]),
- });
- } catch (error) {
- onError(error.message);
- }
- }
-
- return (
- <>
-
-
- {certInfo ? (
- {JSON.stringify(certInfo, null, ' ')}
- ) : null}
-
- );
-}
-
-export default CertInfo;
diff --git a/examples/react/src/components/CryptoPro/CertList.js b/examples/react/src/components/CryptoPro/CertList.js
deleted file mode 100644
index 601851a..0000000
--- a/examples/react/src/components/CryptoPro/CertList.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { getUserCertificates } from 'crypto-pro';
-
-function CertList({onChange, onError}) {
- const [certificates, setCertificates] = useState([]);
-
- function selectCertificate(event) {
- onChange(certificates.find(({thumbprint}) => thumbprint === event.target.value));
- }
-
- useEffect(() => {
- (async () => {
- try {
- setCertificates(await getUserCertificates());
- } catch (error) {
- onError(error.message);
- }
- })();
- }, [onError]);
-
- return (
-
- );
-}
-
-export default CertList;
diff --git a/examples/react/src/components/CryptoPro/Sign.js b/examples/react/src/components/CryptoPro/Sign.js
deleted file mode 100644
index a0ddfd6..0000000
--- a/examples/react/src/components/CryptoPro/Sign.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { createSignature } from 'crypto-pro';
-
-function Sign({certificate, onSign, onError, children}) {
- async function sign() {
- // Вычислинный hash по ГОСТ Р 34.11-94 для строки: "abc"
- const hash = 'b285056dbf18d7392d7677369524dd14747459ed8143997e163b2986f92fd42c';
- const hashBase64 = window.btoa(hash);
-
- try {
- onSign(await createSignature(certificate.thumbprint, hashBase64));
- } catch (error) {
- onError(error.message);
- }
- }
-
- return (
-
- );
-}
-
-export default Sign;
diff --git a/examples/react/src/components/CryptoPro/index.js b/examples/react/src/components/CryptoPro/index.js
deleted file mode 100644
index 051a102..0000000
--- a/examples/react/src/components/CryptoPro/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useState } from 'react';
-import CertList from './CertList';
-import CertInfo from './CertInfo';
-import Sign from './Sign';
-import SystemInfo from './SystemInfo';
-
-const CryptoPro = ({children}) => {
- const [certificate, setCertificate] = useState(null);
- const [signature, setSignature] = useState('');
- const [error, setError] = useState('');
-
- return children({
- certificate,
- setCertificate,
- signature,
- setSignature,
- error,
- setError
- });
-};
-
-CryptoPro.CertList = CertList;
-CryptoPro.Sign = Sign;
-CryptoPro.CertInfo = CertInfo;
-CryptoPro.SystemInfo = SystemInfo;
-
-export default CryptoPro;
diff --git a/examples/react/src/components/Hash.js b/examples/react/src/components/Hash.js
new file mode 100644
index 0000000..1e86639
--- /dev/null
+++ b/examples/react/src/components/Hash.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+function Hash({hash, hashStatus, hashError}) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+ {hashError || null}
+
+ )
+}
+
+export default Hash;
diff --git a/examples/react/src/components/Message.js b/examples/react/src/components/Message.js
new file mode 100644
index 0000000..1c7e398
--- /dev/null
+++ b/examples/react/src/components/Message.js
@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+
+function Message({onChange}) {
+ const [message, setMessage] = useState('Привет мир!');
+
+ function onMessageChange(event) {
+ setMessage(event.target.value);
+ onChange(event.target.value);
+ }
+
+ useEffect(() => onChange(message));
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Message;
diff --git a/examples/react/src/components/Signature.js b/examples/react/src/components/Signature.js
new file mode 100644
index 0000000..681443c
--- /dev/null
+++ b/examples/react/src/components/Signature.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+function Signature({signature, signatureStatus, signatureError}) {
+ return (
+ <>
+
+
+
+
+
+
+ {signatureError || null}
+
+ )
+}
+
+export default Signature;
diff --git a/examples/react/src/components/SignatureType.js b/examples/react/src/components/SignatureType.js
new file mode 100644
index 0000000..7feebf1
--- /dev/null
+++ b/examples/react/src/components/SignatureType.js
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+
+function SignatureType({onChange}) {
+ const [type, setType] = useState(true);
+
+ function onTypeToggle() {
+ setType(!type);
+ onChange(!type);
+ }
+
+ useEffect(() => onChange(type));
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default SignatureType;
diff --git a/examples/react/src/components/CryptoPro/SystemInfo.js b/examples/react/src/components/SystemInfo.js
similarity index 56%
rename from examples/react/src/components/CryptoPro/SystemInfo.js
rename to examples/react/src/components/SystemInfo.js
index 0e8fead..dda5226 100644
--- a/examples/react/src/components/CryptoPro/SystemInfo.js
+++ b/examples/react/src/components/SystemInfo.js
@@ -1,8 +1,9 @@
import React, { useState, useEffect } from 'react';
import { getSystemInfo, isValidSystemSetup } from 'crypto-pro';
-function SystemInfo({onError}) {
+function SystemInfo() {
const [systemInfo, setSystemInfo] = useState(null);
+ const [systemInfoError, setSystemInfoError] = useState(null);
useEffect(() => {
(async () => {
@@ -12,17 +13,27 @@ function SystemInfo({onError}) {
isValidSystemSetup: await isValidSystemSetup()
});
} catch (error) {
- onError(error.message);
+ setSystemInfoError(error.message);
}
})();
- }, [onError]);
+ });
if (!systemInfo) {
return null;
}
return (
- {JSON.stringify(systemInfo, null, ' ')}
+ <>
+
+
+
+ {systemInfo ? (
+ JSON.stringify(systemInfo, null, ' ')
+ ) : (
+ systemInfoError || null
+ )}
+
+
);
}
diff --git a/examples/react/src/index.css b/examples/react/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/examples/react/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/examples/react/src/index.js b/examples/react/src/index.js
index f7b06aa..5038e29 100644
--- a/examples/react/src/index.js
+++ b/examples/react/src/index.js
@@ -3,7 +3,6 @@ import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
-import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';