authscape 1.0.738 → 1.0.742

package/readme.md

@@ -1,103 +1,103 @@
-# AuthScape NPM Package
-
-Complete authentication and user management solution for Next.js applications.
-
-## Installation
-
-```bash
-npm install authscape
-```
-
-## Quick Start
-
-See the main [AuthScape Documentation](https://authscape.com/docs) for complete setup instructions.
-
-## Features
-
-### Core Features
-- OAuth2/PKCE Authentication
-- Multi-tenant support
-- User management
-- Role-based permissions
-- Analytics integration (GA4, Microsoft Clarity)
-- Material-UI components
-
-### Components
-- Document Manager
-- File Uploader
-- Rich Text Editor
-- Data Tables
-- Stripe Payment Integration
-- Google Maps Integration
-- And more...
-
-## Additional Features
-
-### Sitemap Generation (NEW!)
-
-Automatically generate SEO-friendly sitemaps for your Next.js application.
-
-**Automatic setup on install:**
-
-When you run `npm install authscape`, a sitemap is automatically configured at `/sitemap.xml` that syncs with your AuthScape content.
-
-- Supports both Pages Router and App Router
-- Automatically detects your Next.js project structure
-- Works with both `pages/` and `src/pages/` layouts
-- Works with both `app/` and `src/app/` layouts
-
-**To disable:** Simply delete the auto-generated file:
-- Pages Router: `pages/sitemap.xml.js`
-- App Router: `app/sitemap.xml/route.js`
-
-## Environment Variables
-
-Required environment variables in your `.env.local`:
-
-```env
-apiUri=https://your-authscape-api.com
-authorityUri=https://your-auth-server.com
-client_id=your-client-id
-client_secret=your-client-secret
-```
-
-Optional analytics:
-
-```env
-googleAnalytics4=G-XXXXXXXXXX
-microsoftClarityTrackingCode=xxxxxxxxxx
-enableDatabaseAnalytics=true
-```
-
-## Usage Example
-
-```javascript
-// pages/_app.js
-import { AuthScapeApp } from 'authscape';
-import 'react-toastify/dist/ReactToastify.css';
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <AuthScapeApp
-      Component={Component}
-      pageProps={pageProps}
-      enforceLoggedIn={false}
-      enableAuth={true}
-    />
-  );
-}
-
-export default MyApp;
-```
-
-## Documentation
-
-- [AuthScape Docs](https://authscape.com/docs) - Complete documentation
-
-## Support
-
-For issues or questions, contact AuthScape support or visit [authscape.com](https://authscape.com).
-
-## License
-
-ISC
+# AuthScape NPM Package
+
+Complete authentication and user management solution for Next.js applications.
+
+## Installation
+
+```bash
+npm install authscape
+```
+
+## Quick Start
+
+See the main [AuthScape Documentation](https://authscape.com/docs) for complete setup instructions.
+
+## Features
+
+### Core Features
+- OAuth2/PKCE Authentication
+- Multi-tenant support
+- User management
+- Role-based permissions
+- Analytics integration (GA4, Microsoft Clarity)
+- Material-UI components
+
+### Components
+- Document Manager
+- File Uploader
+- Rich Text Editor
+- Data Tables
+- Stripe Payment Integration
+- Google Maps Integration
+- And more...
+
+## Additional Features
+
+### Sitemap Generation (NEW!)
+
+Automatically generate SEO-friendly sitemaps for your Next.js application.
+
+**Automatic setup on install:**
+
+When you run `npm install authscape`, a sitemap is automatically configured at `/sitemap.xml` that syncs with your AuthScape content.
+
+- Supports both Pages Router and App Router
+- Automatically detects your Next.js project structure
+- Works with both `pages/` and `src/pages/` layouts
+- Works with both `app/` and `src/app/` layouts
+
+**To disable:** Simply delete the auto-generated file:
+- Pages Router: `pages/sitemap.xml.js`
+- App Router: `app/sitemap.xml/route.js`
+
+## Environment Variables
+
+Required environment variables in your `.env.local`:
+
+```env
+apiUri=https://your-authscape-api.com
+authorityUri=https://your-auth-server.com
+client_id=your-client-id
+client_secret=your-client-secret
+```
+
+Optional analytics:
+
+```env
+googleAnalytics4=G-XXXXXXXXXX
+microsoftClarityTrackingCode=xxxxxxxxxx
+enableDatabaseAnalytics=true
+```
+
+## Usage Example
+
+```javascript
+// pages/_app.js
+import { AuthScapeApp } from 'authscape';
+import 'react-toastify/dist/ReactToastify.css';
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <AuthScapeApp
+      Component={Component}
+      pageProps={pageProps}
+      enforceLoggedIn={false}
+      enableAuth={true}
+    />
+  );
+}
+
+export default MyApp;
+```
+
+## Documentation
+
+- [AuthScape Docs](https://authscape.com/docs) - Complete documentation
+
+## Support
+
+For issues or questions, contact AuthScape support or visit [authscape.com](https://authscape.com).
+
+## License
+
+ISC

package/src/components/AuthScapeApp.js

@@ -9,7 +9,6 @@ import Router from "next/router";
 import GA4React from "ga-4-react";
 import { create } from "zustand";
 import { clarity } from "react-microsoft-clarity";
-import { authService } from "authscape";
 
 // ---- optional: import your cookie util if not global ----
 // import { setCookie } from "cookies-next";

package/src/components/LexicalEditor.js

@@ -0,0 +1,470 @@
+import React, { useEffect, useCallback } from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html';
+import { $getRoot, $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, $createParagraphNode } from 'lexical';
+import { $setBlocksType } from '@lexical/selection';
+import { $createHeadingNode, $createQuoteNode, HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { ListItemNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from '@lexical/list';
+import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { CodeNode } from '@lexical/code';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Divider from '@mui/material/Divider';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Tooltip from '@mui/material/Tooltip';
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+import StrikethroughSIcon from '@mui/icons-material/StrikethroughS';
+import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
+import CodeIcon from '@mui/icons-material/Code';
+import LinkIcon from '@mui/icons-material/Link';
+import LinkOffIcon from '@mui/icons-material/LinkOff';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+
+const theme = {
+  paragraph: 'lexical-paragraph',
+  quote: 'lexical-quote',
+  heading: {
+    h1: 'lexical-h1',
+    h2: 'lexical-h2',
+    h3: 'lexical-h3',
+    h4: 'lexical-h4',
+    h5: 'lexical-h5',
+    h6: 'lexical-h6',
+  },
+  list: {
+    nested: {
+      listitem: 'lexical-nested-listitem',
+    },
+    ol: 'lexical-ol',
+    ul: 'lexical-ul',
+    listitem: 'lexical-listitem',
+  },
+  text: {
+    bold: 'lexical-bold',
+    italic: 'lexical-italic',
+    underline: 'lexical-underline',
+    strikethrough: 'lexical-strikethrough',
+    code: 'lexical-code',
+  },
+  link: 'lexical-link',
+  code: 'lexical-code-block',
+};
+
+const editorStyles = `
+  .lexical-editor-container {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  }
+  .lexical-editor-inner {
+    position: relative;
+  }
+  .lexical-editor-input {
+    padding: 12px;
+    outline: none;
+    overflow-y: auto;
+  }
+  .lexical-editor-input:focus {
+    outline: none;
+  }
+  .lexical-placeholder {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    color: #999;
+    pointer-events: none;
+    user-select: none;
+  }
+  .lexical-paragraph {
+    margin: 0 0 8px 0;
+  }
+  .lexical-h1 { font-size: 2em; font-weight: bold; margin: 16px 0 8px 0; }
+  .lexical-h2 { font-size: 1.5em; font-weight: bold; margin: 14px 0 8px 0; }
+  .lexical-h3 { font-size: 1.17em; font-weight: bold; margin: 12px 0 8px 0; }
+  .lexical-h4 { font-size: 1em; font-weight: bold; margin: 10px 0 8px 0; }
+  .lexical-h5 { font-size: 0.83em; font-weight: bold; margin: 8px 0 8px 0; }
+  .lexical-h6 { font-size: 0.67em; font-weight: bold; margin: 6px 0 8px 0; }
+  .lexical-quote {
+    margin: 8px 0;
+    padding: 8px 16px;
+    border-left: 4px solid #ccc;
+    background: #f9f9f9;
+    font-style: italic;
+  }
+  .lexical-ul, .lexical-ol {
+    margin: 8px 0;
+    padding-left: 24px;
+  }
+  .lexical-listitem {
+    margin: 4px 0;
+  }
+  .lexical-bold { font-weight: bold; }
+  .lexical-italic { font-style: italic; }
+  .lexical-underline { text-decoration: underline; }
+  .lexical-strikethrough { text-decoration: line-through; }
+  .lexical-code {
+    background: #f0f0f0;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+  }
+  .lexical-link {
+    color: #0066cc;
+    text-decoration: underline;
+  }
+  .lexical-code-block {
+    background: #f5f5f5;
+    padding: 12px;
+    border-radius: 4px;
+    font-family: monospace;
+    overflow-x: auto;
+  }
+`;
+
+// Toolbar button style to match react-draft-wysiwyg
+const toolbarButtonStyle = {
+  minWidth: 32,
+  width: 32,
+  height: 32,
+  padding: '4px',
+  margin: '2px',
+  borderRadius: '2px',
+  border: '1px solid transparent',
+  '&:hover': {
+    backgroundColor: '#f0f0f0',
+    border: '1px solid #ccc',
+  },
+};
+
+const activeButtonStyle = {
+  ...toolbarButtonStyle,
+  backgroundColor: '#e0e0e0',
+  border: '1px solid #ccc',
+};
+
+// HTML Import Plugin
+function HtmlImportPlugin({ initialHtml }) {
+  const [editor] = useLexicalComposerContext();
+  const [initialized, setInitialized] = React.useState(false);
+
+  useEffect(() => {
+    if (initialHtml && !initialized) {
+      editor.update(() => {
+        const parser = new DOMParser();
+        const dom = parser.parseFromString(initialHtml, 'text/html');
+        const nodes = $generateNodesFromDOM(editor, dom);
+        const root = $getRoot();
+        root.clear();
+        nodes.forEach(node => root.append(node));
+      });
+      setInitialized(true);
+    }
+  }, [editor, initialHtml, initialized]);
+
+  return null;
+}
+
+// HTML Export Plugin
+function HtmlExportPlugin({ onChange }) {
+  const [editor] = useLexicalComposerContext();
+
+  const handleChange = useCallback(() => {
+    editor.update(() => {
+      const html = $generateHtmlFromNodes(editor, null);
+      onChange(html);
+    });
+  }, [editor, onChange]);
+
+  return <OnChangePlugin onChange={handleChange} />;
+}
+
+// Toolbar Component
+function Toolbar({ isDisabled }) {
+  const [editor] = useLexicalComposerContext();
+  const [isBold, setIsBold] = React.useState(false);
+  const [isItalic, setIsItalic] = React.useState(false);
+  const [isUnderline, setIsUnderline] = React.useState(false);
+  const [isStrikethrough, setIsStrikethrough] = React.useState(false);
+  const [isCode, setIsCode] = React.useState(false);
+  const [isLink, setIsLink] = React.useState(false);
+  const [blockType, setBlockType] = React.useState('paragraph');
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      setIsBold(selection.hasFormat('bold'));
+      setIsItalic(selection.hasFormat('italic'));
+      setIsUnderline(selection.hasFormat('underline'));
+      setIsStrikethrough(selection.hasFormat('strikethrough'));
+      setIsCode(selection.hasFormat('code'));
+    }
+  }, []);
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        updateToolbar();
+      });
+    });
+  }, [editor, updateToolbar]);
+
+  const formatText = (format) => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+  };
+
+  const formatBlock = (type) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        if (type === 'paragraph') {
+          $setBlocksType(selection, () => $createParagraphNode());
+        } else if (type === 'quote') {
+          $setBlocksType(selection, () => $createQuoteNode());
+        } else if (type.startsWith('h')) {
+          $setBlocksType(selection, () => $createHeadingNode(type));
+        }
+        setBlockType(type);
+      }
+    });
+  };
+
+  const formatList = (listType) => {
+    if (listType === 'bullet') {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    } else if (listType === 'number') {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    }
+  };
+
+  const insertLink = () => {
+    const url = prompt('Enter URL:');
+    if (url) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+    }
+  };
+
+  const removeLink = () => {
+    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+  };
+
+  const undo = () => {
+    editor.dispatchCommand('UNDO', undefined);
+  };
+
+  const redo = () => {
+    editor.dispatchCommand('REDO', undefined);
+  };
+
+  if (isDisabled) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        padding: '8px',
+        borderBottom: '1px solid #ccc',
+        backgroundColor: '#f9f9f9',
+        gap: '4px',
+      }}
+    >
+      {/* Block Type Dropdown */}
+      <Select
+        size="small"
+        value={blockType}
+        onChange={(e) => formatBlock(e.target.value)}
+        sx={{ minWidth: 120, height: 32, mr: 1 }}
+      >
+        <MenuItem value="paragraph">Normal</MenuItem>
+        <MenuItem value="h1">Heading 1</MenuItem>
+        <MenuItem value="h2">Heading 2</MenuItem>
+        <MenuItem value="h3">Heading 3</MenuItem>
+        <MenuItem value="h4">Heading 4</MenuItem>
+        <MenuItem value="h5">Heading 5</MenuItem>
+        <MenuItem value="h6">Heading 6</MenuItem>
+        <MenuItem value="quote">Blockquote</MenuItem>
+      </Select>
+
+      <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+
+      {/* Text Formatting */}
+      <Tooltip title="Bold (Ctrl+B)">
+        <IconButton
+          size="small"
+          onClick={() => formatText('bold')}
+          sx={isBold ? activeButtonStyle : toolbarButtonStyle}
+        >
+          <FormatBoldIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+
+      <Tooltip title="Italic (Ctrl+I)">
+        <IconButton
+          size="small"
+          onClick={() => formatText('italic')}
+          sx={isItalic ? activeButtonStyle : toolbarButtonStyle}
+        >
+          <FormatItalicIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+
+      <Tooltip title="Underline (Ctrl+U)">
+        <IconButton
+          size="small"
+          onClick={() => formatText('underline')}
+          sx={isUnderline ? activeButtonStyle : toolbarButtonStyle}
+        >
+          <FormatUnderlinedIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+
+      <Tooltip title="Strikethrough">
+        <IconButton
+          size="small"
+          onClick={() => formatText('strikethrough')}
+          sx={isStrikethrough ? activeButtonStyle : toolbarButtonStyle}
+        >
+          <StrikethroughSIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+
+      <Tooltip title="Code">
+        <IconButton
+          size="small"
+          onClick={() => formatText('code')}
+          sx={isCode ? activeButtonStyle : toolbarButtonStyle}
+        >
+          <CodeIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+
+      <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+
+      {/* Lists */}
+      <Tooltip title="Bullet List">
+        <IconButton
+          size="small"
+          onClick={() => formatList('bullet')}
+          sx={toolbarButtonStyle}
+        >
+          <FormatListBulletedIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+
+      <Tooltip title="Numbered List">
+        <IconButton
+          size="small"
+          onClick={() => formatList('number')}
+          sx={toolbarButtonStyle}
+        >
+          <FormatListNumberedIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+
+      <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+
+      {/* Links */}
+      <Tooltip title="Insert Link">
+        <IconButton
+          size="small"
+          onClick={insertLink}
+          sx={toolbarButtonStyle}
+        >
+          <LinkIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+
+      <Tooltip title="Remove Link">
+        <IconButton
+          size="small"
+          onClick={removeLink}
+          sx={toolbarButtonStyle}
+        >
+          <LinkOffIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+
+      <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+
+      {/* Undo/Redo */}
+      <Tooltip title="Undo (Ctrl+Z)">
+        <IconButton
+          size="small"
+          onClick={undo}
+          sx={toolbarButtonStyle}
+        >
+          <UndoIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+
+      <Tooltip title="Redo (Ctrl+Y)">
+        <IconButton
+          size="small"
+          onClick={redo}
+          sx={toolbarButtonStyle}
+        >
+          <RedoIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+}
+
+function onError(error) {
+  console.error('Lexical error:', error);
+}
+
+export function LexicalEditor({ initialHtml, onChange, height = 400, isDisabled = false }) {
+  const initialConfig = {
+    namespace: 'RichTextEditor',
+    theme,
+    onError,
+    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, CodeNode],
+    editable: !isDisabled,
+  };
+
+  return (
+    <>
+      <style>{editorStyles}</style>
+      <LexicalComposer initialConfig={initialConfig}>
+        <div className="lexical-editor-container">
+          <Toolbar isDisabled={isDisabled} />
+          <div className="lexical-editor-inner">
+            <RichTextPlugin
+              contentEditable={
+                <ContentEditable
+                  className="lexical-editor-input"
+                  style={{ minHeight: height, maxHeight: height }}
+                />
+              }
+              placeholder={<div className="lexical-placeholder">Enter text...</div>}
+              ErrorBoundary={LexicalErrorBoundary}
+            />
+            <HistoryPlugin />
+            <ListPlugin />
+            <LinkPlugin />
+            <HtmlImportPlugin initialHtml={initialHtml} />
+            <HtmlExportPlugin onChange={onChange} />
+          </div>
+        </div>
+      </LexicalComposer>
+    </>
+  );
+}