two additional validator tools

plugins/toolbox/src/components/DefaultEditor/TripleEditor.tsx

@@ -0,0 +1,271 @@
+import React, { ReactElement } from 'react';
+import { useStyles } from '../../utils/hooks';
+import { CopyToClipboardButton } from '../Buttons/CopyToClipboardButton';
+import { PasteFromClipboardButton } from '../Buttons/PasteFromClipboardButton';
+import { ClearValueButton } from '../Buttons/ClearValueButton';
+import { SampleButton } from '../Buttons/SampleButton';
+import { FileUploadButton } from '../Buttons';
+import { FileDownloadButton } from '../Buttons/FileDownloadButton';
+import Grid from '@mui/material/Grid';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+
+type Props = {
+  input: string;
+  setInput: (value: string) => void;
+  pattern: string;
+  setPattern: (value: string) => void;
+  output?: string;
+  setOutput: (value: string) => void;
+  mode?: string;
+  minRows?: number;
+  inputLabel?: string;
+  patternLabel?: string;
+  outputLabel?: string;
+  setMode?: (value: string) => void;
+  modes?: Array<string>;
+  leftContent?: ReactElement;
+  extraLeftContent?: ReactElement;
+  middleContent?: ReactElement;
+  extraMiddleContent?: ReactElement;
+  rightContent?: ReactElement;
+  extraRightContent?: ReactElement;
+  sample?: string;
+  additionalTools?: ReactElement[];
+  allowFileUpload?: boolean;
+  acceptFileTypes?: string;
+  allowFileDownload?: boolean;
+  downloadFileType?: string;
+  downloadFileName?: string;
+  inputProps?: any;
+  outputProps?: any;
+};
+
+export const TripleEditor = (props: Props) => {
+  const {
+    input,
+    setInput,
+    pattern,
+    setPattern,
+    output,
+    setOutput,
+    inputLabel = 'Input',
+    patternLabel = 'Pattern',
+    outputLabel = 'Output',
+    mode,
+    setMode,
+    modes,
+    leftContent,
+    extraLeftContent,
+    middleContent,
+    extraMiddleContent,
+    rightContent,
+    extraRightContent,
+    sample,
+    additionalTools,
+    allowFileUpload,
+    acceptFileTypes,
+    allowFileDownload,
+    downloadFileName,
+    downloadFileType,
+    minRows = 20,
+  } = props;
+  const { classes } = useStyles();
+
+  const [fileName, setFileName] = React.useState(
+    downloadFileName ?? 'download.txt',
+  );
+  const [fileType, setFileType] = React.useState(
+    downloadFileType ?? 'text/plain',
+  );
+
+  const readFileAndSetInput = (file?: File) => {
+    if (!file) {
+      setInput('');
+      return;
+    }
+
+    setFileName(file.name);
+    setFileType(file.type);
+    const reader = new FileReader();
+    reader.onload = async e => {
+      // @ts-ignore
+      setInput(e.target.result);
+    };
+    reader.readAsText(file);
+  };
+
+  const handleDrop = (ev: React.DragEvent<HTMLDivElement>) => {
+    if (allowFileUpload !== true) {
+      return;
+    }
+    ev.preventDefault();
+    if (ev.dataTransfer.items) {
+      [...ev.dataTransfer.items].forEach(item => {
+        if (item.kind !== 'file') {
+          return;
+        }
+        const file = item.getAsFile();
+        if (file) {
+          readFileAndSetInput(file);
+        }
+      });
+    } else {
+      [...ev.dataTransfer.files].forEach(file => {
+        readFileAndSetInput(file);
+      });
+    }
+  };
+
+  return (
+    <FormControl className={classes.fullWidth} onDrop={handleDrop}>
+      <Grid container spacing={4} style={{ marginBottom: '5px' }}>
+        {modes && modes.length > 0 && (
+          <Grid item sx={{ pl: '16px', pt: '32px !important' }}>
+            <ButtonGroup
+              size="small"
+              disableElevation
+              variant="contained"
+              aria-label="Disabled elevation buttons"
+              style={{ marginBottom: '1rem' }}
+              color="inherit"
+            >
+              {modes.map(m => (
+                <Button
+                  size="small"
+                  key={m}
+                  onClick={() => setMode && setMode(m)}
+                  variant={mode === m ? 'contained' : 'outlined'}
+                  color="inherit"
+                  sx={{
+                    ...(mode === m && {
+                      color: '#000000',
+                      backgroundColor: '#E0E0E0',
+                    }),
+                    ...(mode !== m && {
+                      borderColor: '#E0E0E0',
+                    }),
+                  }}
+                >
+                  {m}
+                </Button>
+              ))}
+            </ButtonGroup>
+          </Grid>
+        )}
+        <Grid item sx={{ p: '16px' }}>
+          <ButtonGroup size="small">
+            <ClearValueButton setValue={setInput} />
+            <PasteFromClipboardButton setInput={setInput} />
+            {output && <CopyToClipboardButton output={output} />}
+            {sample && <SampleButton setInput={setInput} sample={sample} />}
+            {allowFileUpload && (
+              <FileUploadButton
+                accept={acceptFileTypes}
+                onFileLoad={readFileAndSetInput}
+              />
+            )}
+            {output && allowFileDownload && (
+              <FileDownloadButton
+                content={output}
+                fileName={fileName}
+                fileType={fileType}
+              />
+            )}
+          </ButtonGroup>
+        </Grid>
+        {additionalTools && additionalTools.length > 0 && (
+          <Grid item>{additionalTools.map(tool => tool)}</Grid>
+        )}
+      </Grid>
+      <Grid container columns={3}>
+        <Grid item xs={1} lg={1} sx={{ pt: '8px !important', pl: '8px !important' }}>
+          {leftContent ? (
+            leftContent
+          ) : (
+            <>
+              <TextField
+                label={inputLabel}
+                // eslint-disable-next-line
+                id="input"
+                multiline
+                className={classes.fullWidth}
+                value={input}
+                onChange={e => setInput(e.target.value)}
+                minRows={minRows}
+                variant="outlined"
+                sx={{
+                  p: '8px',
+                  '& label[class*="MuiFormLabel-root"]': {
+                    paddingTop: '10px !important',
+                    paddingLeft: '10px !important',
+                  },
+                }}
+              />
+            </>
+          )}
+          {extraLeftContent}
+        </Grid>
+        <Grid item xs={1} lg={1} sx={{ pt: '8px !important', pl: '8px !important' }}>
+          {middleContent ? (
+            middleContent
+          ) : (
+            <>
+              <TextField
+                label={patternLabel}
+                // eslint-disable-next-line
+                id="pattern"
+                multiline
+                className={classes.fullWidth}
+                value={pattern}
+                onChange={e => setPattern(e.target.value)}
+                minRows={minRows}
+                variant="outlined"
+                sx={{
+                  p: '8px',
+                  '& label[class*="MuiFormLabel-root"]': {
+                    paddingTop: '10px !important',
+                    paddingLeft: '10px !important',
+                  },
+                }}
+              />
+            </>
+          )}
+          {extraMiddleContent}
+        </Grid>
+        <Grid item xs={1} lg={1} sx={{ pt: '8px !important', pl: '8px !important' }}>
+          {rightContent ? (
+            rightContent
+          ) : (
+            <>
+              <TextField
+                inputProps={{
+                  readOnly: true,
+                }}
+                label={outputLabel}
+                // eslint-disable-next-line
+                id="output"
+                multiline
+                className={classes.fullWidth}
+                value={output}
+                onChange={e => setOutput(e.target.value)}
+                minRows={minRows}
+                variant="outlined"
+                sx={{
+                  p: '8px',
+                  '& label[class*="MuiFormLabel-root"]': {
+                    paddingTop: '10px !important',
+                    paddingLeft: '10px !important',
+                  },
+                }}
+              />
+            </>
+          )}
+          {extraRightContent}
+        </Grid>
+      </Grid>
+    </FormControl>
+  );
+};

plugins/toolbox/src/components/Root/tools.tsx

@@ -42,6 +42,8 @@ const CSSBeautify = lazy(() => import('../Formatters/CSSBeautify'));
 const SQLBeautify = lazy(() => import('../Formatters/SQLBeautify'));
 
 const IbanValidator = lazy(() => import('../Validators/IbanValidator'));
+const PznValidator = lazy(() => import('../Validators/PznValidator'));
+const RegexValidator = lazy(() => import('../Validators/RegexValidator'));
 const UrlExploder = lazy(() => import('../Misc/UrlExploder'));
 const Whois = lazy(() => import('../Networking/Whois'));
 const StringAnalyzer = lazy(() => import('../Misc/StringAnalyzer'));
@@ -304,6 +306,20 @@ export const defaultTools: Tool[] = [
     category: 'Validate',
     description: 'Validates IBAN based on ISO 13616',
   },
+  {
+    id: 'pzn',
+    name: 'PZN validator',
+    component: <PznValidator />,
+    category: 'Validate',
+    description: 'Validates PZN (8-digits) from german pharmaceutical system',
+  },
+  {
+    id: 'regex',
+    name: 'Regex validator',
+    component: <RegexValidator />,
+    category: 'Validate',
+    description: 'Validates regex patterns against a test-text and shows possible matches',
+  },
   {
     id: 'url-exploder',
     name: 'URL exploder',

plugins/toolbox/src/components/Validators/PznValidator.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+
+export const PznValidator = () => {
+  const [input, setInput] = React.useState('');
+  const [isValid, setIsValid] = React.useState(true);
+
+    function isPznValid(str: string) {
+      let complete = 0;
+      for (let i = 0; i < str.length - 1; i++) {
+        const num = parseInt(String(str.charAt(i)), 10);
+        complete += num * (i + 1);
+      }
+      const quot = Math.floor(complete / 11);
+      const mod = Number(complete - quot * 11);
+      const last = parseInt(String(str.charAt(str.length - 1)), 10);
+      // console.log("pzn= " + str + " quot=" + quot + " mod= " + mod + " last=" + last);
+      return mod === last;
+    }
+
+    useEffect(() => {
+    let valid = true;
+    try {
+      // checksum number is used to detect typos in PZN numbers.
+      // it is calculated as modulo 11 of the sum of each ongoing digit of the number: (digit0 * 1) + (digit1 * 2) + (digit2 * 3) and so on
+      // example:
+      // validation: PZN - 0345874 5
+      // sum: 0*1 + 3*2 + 4*3 + 5*4 + 8*5 + 7*6 + 4*7 = 148
+      // quotient: 148 : 11 = 13
+      // modulo 11: 148 - (13*11) = 5
+     valid = isPznValid(input);
+    } catch (error) {
+      valid = false;
+    }
+    setIsValid(valid);
+  }, [input]);
+
+  return (
+    <DefaultEditor
+      input={input}
+      setInput={setInput}
+      minRows={1}
+      inputLabel="PZN"
+      rightContent={
+        <>
+          {!isValid && (
+            <Alert severity="error">
+              <AlertTitle>Error!</AlertTitle>
+              Invalid PZN provided, empty input, input not numeric or input length not 8 characters.
+            </Alert>
+          )}
+            {isValid && (
+                <Alert severity="info">
+                    <AlertTitle>Cool!</AlertTitle>
+                    Valid PZN provided.
+                </Alert>
+            )}
+        </>
+      }
+      sample="03458745"
+    />
+  );
+};
+
+export default PznValidator;