Security (React)

import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useRef, useState } from 'react';
import useEvent from 'react-use-event-hook';
import { PdfVersion, PdfPrintPermission } from '@mescius/wijmo.pdf';
import { FlexGridPdfConverter } from '@mescius/wijmo.grid.pdf';
import '@mescius/wijmo.pdf.security';
import * as wjInput from '@mescius/wijmo.react.input';
import * as wjcGrid from '@mescius/wijmo.react.grid';
import './app.css';
import { data } from './data';
function App() {
    const [userPassword, setUserPassword] = useState('');
    const [ownerPassword, setOwnerPassword] = useState('');
    const [version, setVersion] = useState(PdfVersion.v1_3);
    const [permissions, setPermissions] = useState({
        annotating: false,
        contentAccessibility: false,
        copying: false,
        documentAssembly: false,
        fillingForms: false,
        modifying: false,
        printing: PdfPrintPermission.NotAllowed
    });
    const flexGridRef = useRef(null);
    const initializeGrid = useEvent((ctl) => {
        flexGridRef.current = ctl;
    });
    const exportPdf = () => {
        const p = permissions, settings = {
            documentOptions: {
                userPassword: userPassword,
                ownerPassword: ownerPassword,
                version: version,
                permissions: {
                    annotating: p.annotating,
                    contentAccessibility: p.contentAccessibility,
                    copying: p.copying,
                    documentAssembly: p.documentAssembly,
                    fillingForms: p.fillingForms,
                    modifying: p.modifying,
                    printing: p.printing
                }
            },
            styles: {
                cellStyle: {
                    backgroundColor: '#ffffff',
                    borderColor: '#c6c6c6'
                },
                altCellStyle: {
                    backgroundColor: '#f9f9f9'
                },
                groupCellStyle: {
                    backgroundColor: '#dddddd'
                },
                headerCellStyle: {
                    backgroundColor: '#eaeaea'
                }
            }
        };
        //
        FlexGridPdfConverter.export(flexGridRef.current, 'FlexGrid.pdf', settings);
    };
    const userPasswordChange = (event) => {
        setUserPassword(event.target.value);
    };
    const ownerPasswordChange = (event) => {
        setOwnerPassword(event.target.value);
    };
    const versionChanged = useEvent((menu) => {
        if (menu.selectedValue) {
            setVersion(menu.selectedValue);
        }
    });
    const permChanged = (stateProp, checked) => {
        setPermissions(Object.assign(Object.assign({}, permissions), { [stateProp]: checked }));
    };
    const printingChanged = (event) => {
        let val = event.target.value;
        setPermissions(Object.assign(Object.assign({}, 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={userPassword}/>
            </div>
            <div className="col-sm-3">
              <input type="text" className="form-control" placeholder="Owner password" onChange={ownerPasswordChange} value={ownerPassword}/>
            </div>
          </div>
          <hr />
          <div className="row">
            <div className="col-sm-3">
              <wjInput.Menu header='PDF version' itemClicked={versionChanged} value={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={permissions.annotating} onChange={(event) => permChanged('annotating', event.target.checked)}/>Annotating
                </label>
              </div>
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={permissions.contentAccessibility} onChange={(event) => permChanged('contentAccessibility', event.target.checked)}/>ContentAccessibility
                </label>
              </div>
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={permissions.copying} onChange={(event) => permChanged('copying', event.target.checked)}/>Copying
                </label>
              </div>
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={permissions.documentAssembly} onChange={(event) => permChanged('documentAssembly', event.target.checked)}/>DocumentAssembly
                </label>
              </div>
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={permissions.fillingForms} onChange={(event) => permChanged('fillingForms', event.target.checked)}/>FillingForms
                </label>
              </div>
              <div className="checkbox">
                <label>
                  <input type="checkbox" checked={permissions.modifying} onChange={(event) => permChanged('modifying', event.target.checked)}/>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={permissions.printing == PdfPrintPermission.NotAllowed} onChange={printingChanged}/>NotAllowed
              </label>
              <label className="radio-inline">
                <input name="printing" type="radio" value={PdfPrintPermission.AllowLowResolution} checked={permissions.printing == PdfPrintPermission.AllowLowResolution} onChange={printingChanged}/>AllowLowResolution
              </label>
              <label className="radio-inline">
                <input name="printing" type="radio" value={PdfPrintPermission.AllowHighResolution} checked={permissions.printing == PdfPrintPermission.AllowHighResolution} onChange={printingChanged}/>AllowHighResolution
              </label>
            </div>
          </div>
        </div>
      </div>

      {/* Export button */}
      <button className="btn btn-default" onClick={exportPdf}> Export</button>

      {/* FlexGrid */}
      <wjcGrid.FlexGrid className="grid" autoGenerateColumns={false} headersVisibility="Column" selectionMode="ListBox" itemsSource={data} initialized={initializeGrid}>
        <wjcGrid.FlexGridColumn header="ID" binding="id"/>
        <wjcGrid.FlexGridColumn header="Start Date" binding="start" format="d"/>
        <wjcGrid.FlexGridColumn header="End Date" binding="end" format="d"/>
        <wjcGrid.FlexGridColumn header="Country" binding="country"/>
      </wjcGrid.FlexGrid>
    </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}