Security (React)

import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useState } from 'react';
import { PdfVersion, PdfPrintPermission, saveBlob, PdfDocument } from '@mescius/wijmo.pdf';
import '@mescius/wijmo.pdf.security';
import * as wjInput from '@mescius/wijmo.react.input';
function App() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
    const [state, setState] = useState({
        userPassword: '',
        ownerPassword: '',
        version: PdfVersion.v1_3,
        permissions: {
            annotating: false,
            contentAccessibility: false,
            copying: false,
            documentAssembly: false,
            fillingForms: false,
            modifying: false,
            printing: PdfPrintPermission.NotAllowed
        }
    });
    const drawPdf = () => {
        const permissions = state.permissions || {};
        const doc = new PdfDocument({
            userPassword: state.userPassword,
            ownerPassword: state.ownerPassword,
            version: state.version,
            permissions: {
                annotating: permissions.annotating,
                contentAccessibility: permissions.contentAccessibility,
                copying: permissions.copying,
                documentAssembly: permissions.documentAssembly,
                fillingForms: permissions.fillingForms,
                modifying: permissions.modifying,
                printing: permissions.printing
            },
            ended: (doc, args) => saveBlob(args.blob, 'Document.pdf')
        });
        //
        doc.drawText('Demo page.');
        //
        doc.end();
    };
    const userPasswordChange = (event) => {
        setState((prevState) => (Object.assign(Object.assign({}, prevState), { userPassword: event.target.value })));
    };
    const ownerPasswordChange = (event) => {
        setState((prevState) => (Object.assign(Object.assign({}, prevState), { ownerPassword: event.target.value })));
    };
    const versionChanged = (menu) => {
        if (menu.selectedValue) {
            setState((prevState) => (Object.assign(Object.assign({}, prevState), { version: menu.selectedValue })));
        }
    };
    const permChanged = (event, stateProp) => {
        let val = event.target.checked;
        setState((prevState) => (Object.assign(Object.assign({}, prevState), { permissions: Object.assign(Object.assign({}, prevState.permissions), { [stateProp]: val }) })));
    };
    const printingChanged = (event) => {
        let val = event.target.value;
        setState((prevState) => (Object.assign(Object.assign({}, prevState), { permissions: Object.assign(Object.assign({}, prevState.permissions), { printing: val }) })));
    };
    return (<div className="container-fluid">
      <div className="panel panel-default">
        <div className="panel-heading">Security settings</div>
        <div className="panel-body">
          <div className="row">
            <div className="col-sm-3">
              <input type="text" className="form-control" placeholder="User password" onChange={userPasswordChange} value={state.userPassword}/>
            </div>
            <div className="col-sm-3">
              <input type="text" className="form-control" placeholder="Owner password" onChange={ownerPasswordChange} value={state.ownerPassword}/>
            </div>
          </div>
          <hr />
          <div className="row">
            <div className="col-sm-3">
              <wjInput.Menu header='PDF version' itemClicked={versionChanged} value={state.version}>
                <wjInput.MenuItem value={PdfVersion.v1_3}>1.3</wjInput.MenuItem>
                <wjInput.MenuItem value={PdfVersion.v1_4}>1.4</wjInput.MenuItem>
                <wjInput.MenuItem value={PdfVersion.v1_5}>1.5</wjInput.MenuItem>
                <wjInput.MenuItem value={PdfVersion.v1_6}>1.6</wjInput.MenuItem>
                <wjInput.MenuItem value={PdfVersion.v1_7}>1.7</wjInput.MenuItem>
                <wjInput.MenuItem value={PdfVersion.v1_7Ext3}>1.7 ExtensionLevel 3</wjInput.MenuItem>
              </wjInput.Menu>
            </div>
          </div>
          <hr />
          <div className="row">
            <div className="col">
              <b>Permissions</b> (require owner password)
            </div>
          </div>
          <div className="row">
            <div className="col-sm-3">
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={(_a = state.permissions) === null || _a === void 0 ? void 0 : _a.annotating} onChange={(e) => permChanged(e, 'annotating')}/>Annotating
                </label>
              </div>
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={(_b = state.permissions) === null || _b === void 0 ? void 0 : _b.contentAccessibility} onChange={(e) => permChanged(e, 'contentAccessibility')}/>ContentAccessibility
                </label>
              </div>
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={(_c = state.permissions) === null || _c === void 0 ? void 0 : _c.copying} onChange={(e) => permChanged(e, 'copying')}/>Copying
                </label>
              </div>
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={(_d = state.permissions) === null || _d === void 0 ? void 0 : _d.documentAssembly} onChange={(e) => permChanged(e, 'documentAssembly')}/>DocumentAssembly
                </label>
              </div>
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={(_e = state.permissions) === null || _e === void 0 ? void 0 : _e.fillingForms} onChange={(e) => permChanged(e, 'fillingForms')}/>FillingForms
                </label>
              </div>
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={(_f = state.permissions) === null || _f === void 0 ? void 0 : _f.modifying} onChange={(e) => permChanged(e, 'modifying')}/>Modifying
                </label>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-sm-2">Printing</div>
          </div>
          <div className="row">
            <div className="col-sm-6">
              <label className="radio-inline">
                <input name="printing" type="radio" value={PdfPrintPermission.NotAllowed} checked={((_g = state.permissions) === null || _g === void 0 ? void 0 : _g.printing) == PdfPrintPermission.NotAllowed} onChange={printingChanged}/>NotAllowed
              </label>
              <label className="radio-inline">
                <input name="printing" type="radio" value={PdfPrintPermission.AllowLowResolution} checked={((_h = state.permissions) === null || _h === void 0 ? void 0 : _h.printing) == PdfPrintPermission.AllowLowResolution} onChange={printingChanged}/>AllowLowResolution
              </label>
              <label className="radio-inline">
                <input name="printing" type="radio" value={PdfPrintPermission.AllowHighResolution} checked={((_j = state.permissions) === null || _j === void 0 ? void 0 : _j.printing) == PdfPrintPermission.AllowHighResolution} onChange={printingChanged}/>AllowHighResolution
              </label>
            </div>
          </div>
        </div>
      </div>
      <button className="btn btn-default" onClick={drawPdf}>Draw PDF</button>
    </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}