authscape 1.0.358 → 1.0.370

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.358",
+  "version": "1.0.370",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -27,9 +27,6 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@microsoft/signalr": "^8.0.0",
     "@monaco-editor/react": "^4.5.1",
     "@silevis/reactgrid": "^4.1.3",
@@ -38,12 +35,12 @@
     "axios": "^1.6.1",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
-    "eslint-config-next": "^13.3.2",
+    "eslint-config-next": "^14.1.0",
     "ga-4-react": "^0.1.281",
     "html2canvas": "^1.4.1",
     "js-file-download": "^0.4.12",
     "jspdf": "^2.5.1",
-    "next": "^13.3.2",
+    "next": "^14.1.0",
     "nookies": "^2.5.2",
     "query-string": "^7.1.1",
     "react-color": "^2.19.3",

package/src/components/AuthScapeApp.js

@@ -2,10 +2,10 @@ import React, { useEffect, useState, useRef } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import Backdrop from '@mui/material/Backdrop';
 import { ToastContainer, toast } from 'react-toastify';
-import { useRouter } from 'next/router';
 import { ThemeProvider } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import Head from "next/head";
+import { useSearchParams } from 'next/navigation';
 
 export function AuthScapeApp({Component, pageProps, muiTheme = {}, enforceLoggedIn = false, enableAuth = true, onAuthenticationLoaded = null, children = null}) {
 
@@ -13,46 +13,68 @@ export function AuthScapeApp({Component, pageProps, muiTheme = {}, enforceLogged
     const [loadedUser, setLoadedUser] = useState(false);
     const [currentUser, setCurrentUser] = useState(null);
     const [loadingLogin, setLoadingLogin] = useState(false);
-    const router = useRouter();
-
-    useEffect(() => {
-        
-    }, [loadedUser]);
 
 
-    useEffect(() => {
 
-        if (loadedUser && router.isReady)
+    const validateCode = () => {
+        if (queryCode != null)
         {
-            if (process.env.googleAnalytics4 != null)
-            {
-                init(process.env.googleAnalytics4);
-            }
-        
-            if (router.query.r != null)
-            {
-                localStorage.setItem("ref", router.query.r);
-            }
-
-            // sign in validation
-            if (router.query.code != null)
-            {
-                setLoadingLogin(true);
-                signInValidator(router.query.code);
-            }
-            else
+            setLoadingLogin(true);
+            signInValidator(queryCode);
+        }
+        else
+        {
+            if (enforceLoggedIn)
             {
-                if (enforceLoggedIn)
+                if (currentUser == null)
                 {
-                    if (currentUser == null)
-                    {
-                        authService().login();
-                    }
+                    authService().login();
                 }
             }
         }
+    }
+
+    const searchParams = useSearchParams();
+    const queryRef = searchParams.get('ref');
+    const queryCode = searchParams.get('code');
+    validateCode(queryCode);
+
+    // const router = useRouter();
+
+
+    // useEffect(() => {
+
+    //     if (loadedUser && router.isReady)
+    //     {
+    //         if (process.env.googleAnalytics4 != null)
+    //         {
+    //             init(process.env.googleAnalytics4);
+    //         }
+        
+    //         if (queryRef != null)
+    //         {
+    //             localStorage.setItem("ref", queryRef);
+    //         }
+
+    //         // sign in validation
+    //         if (queryCode != null)
+    //         {
+    //             setLoadingLogin(true);
+    //             signInValidator(queryCode);
+    //         }
+    //         else
+    //         {
+    //             if (enforceLoggedIn)
+    //             {
+    //                 if (currentUser == null)
+    //                 {
+    //                     authService().login();
+    //                 }
+    //             }
+    //         }
+    //     }
     
-    }, [loadedUser, router.isReady])
+    // }, [loadedUser, router.isReady])
 
 
     return (

package/src/components/spreadsheet/spreadsheetViewer.js

@@ -1,6 +1,7 @@
 import { Box, Button } from '@mui/material';
 import React, { useEffect, useState, useRef } from 'react';
 import { ReactGrid, Column, Row } from "@silevis/reactgrid";
+import { apiService } from 'authscape';
 import {isMacOs} from 'react-device-detect';
 import * as signalR from '@microsoft/signalr';
 import Avatar from '@mui/material/Avatar';

package/src/components/kanban/Action.js

@@ -1,23 +0,0 @@
-import React, {forwardRef, CSSProperties} from 'react';
-import classNames from 'classnames';
-
-export const Action = forwardRef(
-  ({active, className, cursor, style, ...props}, ref) => {
-    return (
-      <button
-        ref={ref}
-        {...props}
-        className={"Action"}
-        tabIndex={0}
-        style={
-          {
-            ...style,
-            cursor,
-            '--fill': active?.fill,
-            '--background': active?.background,
-          }
-        }
-      />
-    );
-  }
-);

package/src/components/kanban/Container.js

@@ -1,66 +0,0 @@
-import React, {forwardRef} from 'react';
-import classNames from 'classnames';
-
-// import { Handle } from './Handle';
-// import { Remove } from './Remove';
-
-import styles from './Container.module.css';
-
-export const Container = forwardRef(
-  (
-    {
-      children,
-      columns = 1,
-      handleProps,
-      horizontal,
-      hover,
-      onClick,
-      onRemove,
-      label,
-      placeholder,
-      style,
-      scrollable,
-      shadow,
-      unstyled,
-      ...props
-    },
-    ref
-  ) => {
-    const Component = onClick ? 'button' : 'div';
-
-    return (
-      <Component
-        {...props}
-        ref={ref}
-        style={
-          {
-            ...style,
-            '--columns': columns,
-          }
-        }
-        className={classNames(
-          styles.Container,
-          unstyled && styles.unstyled,
-          horizontal && styles.horizontal,
-          hover && styles.hover,
-          placeholder && styles.placeholder,
-          scrollable && styles.scrollable,
-          shadow && styles.shadow
-        )}
-        onClick={onClick}
-        tabIndex={onClick ? 0 : undefined}
-      >
-        {label ? (
-          <div className={"Header"}>
-            {label}
-            <div className={"Actions"}>
-              {onRemove ? <Remove onClick={onRemove} /> : undefined}
-              <Handle {...handleProps} />
-            </div>
-          </div>
-        ) : null}
-        {placeholder ? children : <ul style={{paddingLeft:"10px", paddingRight:"10px", marginTop:"5px"}}>{children}</ul>}
-      </Component>
-    );
-  }
-);

package/src/components/kanban/Container.module.css

@@ -1,103 +0,0 @@
-.Container {
-    display: flex;
-    flex-direction: column;
-    grid-auto-rows: max-content;
-    overflow: hidden;
-    box-sizing: border-box;
-    appearance: none;
-    outline: none;
-    min-width: 350px;
-    margin: 10px;
-    border-radius: 5px;
-    min-height: 200px;
-    transition: background-color 350ms ease;
-    background-color: rgba(246, 246, 246, 1);
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    font-size: 1em;
-  
-    .ul {
-      display: grid;
-      grid-gap: 10px;
-      grid-template-columns: repeat(var(--columns, 1), 1fr);
-      list-style: none;
-      padding: 20px;
-      margin: 0;
-    }
-  
-    &.scrollable {
-      .ul {
-        overflow-y: auto;
-      }
-    }
-  
-    &.placeholder {
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      color: rgba(0, 0, 0, 0.5);
-      background-color: transparent;
-      border-style: dashed;
-      border-color: rgba(0, 0, 0, 0.08);
-  
-      /* &:hover {
-        border-color: rgba(0, 0, 0, 0.15);
-      } */
-    }
-  
-    &.hover {
-      background-color: rgb(235, 235, 235, 1);
-    }
-  
-    &.unstyled {
-      overflow: visible;
-      background-color: transparent !important;
-      border: none !important;
-    }
-  
-    &.horizontal {
-      width: 100%;
-  
-      .ul {
-        grid-auto-flow: column;
-      }
-    }
-  
-    &.shadow {
-      box-shadow: 0 1px 10px 0 rgba(34, 33, 81, 0.1);
-    }
-  
-    /* &:focus-visible {
-      border-color: transparent;
-      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
-    } */
-  }
-  
-  .Header {
-    display: flex;
-    padding: 5px 20px;
-    padding-right: 8px;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #fff;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  
-    /* &:hover {
-      .Actions > * {
-        opacity: 1 !important;
-      }
-    } */
-  }
-  
-  /* .Actions {
-    display: flex;
-  
-    > *:first-child:not(:last-child) {
-      opacity: 0;
-  
-      &:focus-visible {
-        opacity: 1;
-      }
-    }
-  } */

package/src/components/kanban/Handle.js

@@ -1,20 +0,0 @@
-import React, {forwardRef} from 'react';
-
-// import {Action} from './Action';
-
-export const Handle = forwardRef(
-  (props, ref) => {
-    return (
-      <Action
-        ref={ref}
-        cursor="grab"
-        data-cypress="draggable-handle"
-        {...props}
-      >
-        <svg viewBox="0 0 20 20" width="12">
-          <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
-        </svg>
-      </Action>
-    );
-  }
-);

package/src/components/kanban/Item.js

@@ -1,139 +0,0 @@
-import React, {useEffect} from 'react';
-import classNames from 'classnames';
-
-// import { Handle } from './Handle';
-// import { Remove } from './Remove';
-
-import styles from './Item.module.css';
-import { Box } from '@mui/material';
-
-export const Item = React.memo(
-  React.forwardRef(
-    (
-      {
-        color,
-        dragOverlay,
-        dragging,
-        disabled,
-        fadeIn,
-        name,
-        handle,
-        handleProps,
-        height,
-        cardDetail,
-        CardTemplate,
-        index,
-        listeners,
-        onRemove,
-        renderItem,
-        sorting,
-        style,
-        transition,
-        transform,
-        value,
-        handleMoreClick,
-        handleMoreClose,
-        wrapperStyle,
-        ...props
-      },
-      ref
-    ) => {
-      useEffect(() => {
-        if (!dragOverlay) {
-          return;
-        }
-
-        document.body.style.cursor = 'grabbing';
-
-        return () => {
-          document.body.style.cursor = '';
-        };
-      }, [dragOverlay]);
-
-      cardDetail.moreClicked = handleMoreClick;
-
-      return renderItem ? (
-        renderItem({
-          dragOverlay: Boolean(dragOverlay),
-          dragging: Boolean(dragging),
-          sorting: Boolean(sorting),
-          index,
-          fadeIn: Boolean(fadeIn),
-          listeners,
-          ref,
-          style,
-          transform,
-          transition,
-          value,
-        })
-      ) : (
-        <li
-          className={classNames(
-            styles.Wrapper,
-            fadeIn && styles.fadeIn,
-            sorting && styles.sorting,
-            dragOverlay && styles.dragOverlay
-          )}
-          style={
-            {
-              ...wrapperStyle,
-              transition: [transition, wrapperStyle?.transition]
-                .filter(Boolean)
-                .join(', '),
-              '--translate-x': transform
-                ? `${Math.round(transform.x)}px`
-                : undefined,
-              '--translate-y': transform
-                ? `${Math.round(transform.y)}px`
-                : undefined,
-              '--scale-x': transform?.scaleX
-                ? `${transform.scaleX}`
-                : undefined,
-              '--scale-y': transform?.scaleY
-                ? `${transform.scaleY}`
-                : undefined,
-              '--index': index,
-              '--color': color,
-              paddingTop:"10px"
-            }
-          }
-          ref={ref}
-        >
-          <Box
-            className={classNames(
-              styles.Item,
-              dragging && styles.dragging,
-              handle && styles.withHandle,
-              dragOverlay && styles.dragOverlay,
-              disabled && styles.disabled,
-              color && styles.color
-            )}
-            style={style}
-            data-cypress="draggable-item"
-            {...(!handle ? listeners : undefined)}
-            {...props}
-            tabIndex={!handle ? 0 : undefined}>
-
-              
-            {CardTemplate != null &&
-             <CardTemplate props={cardDetail} />
-            }
-
-            {CardTemplate == null &&
-              <Box>
-              {name}
-              </Box>
-            }
-
-            <span className={"Actions"}>
-              {onRemove ? (
-                <Remove className={"Remove"} onClick={onRemove} />
-              ) : null}
-              {handle ? <Handle {...handleProps} {...listeners} /> : null}
-            </span>
-          </Box>
-        </li>
-      );
-    }
-  )
-);

package/src/components/kanban/Item.module.css

@@ -1,135 +0,0 @@
-@keyframes pop {
-  0% {
-    transform: scale(1);
-    box-shadow: var(--box-shadow);
-  }
-  100% {
-    transform: scale(var(--scale));
-    box-shadow: var(--box-shadow-picked-up);
-  }
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.Wrapper {
-  display: flex;
-  box-sizing: border-box;
-  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
-    scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform-origin: 0 0;
-  touch-action: manipulation;
-
-  &.fadeIn {
-    animation: fadeIn 500ms ease;
-  }
-
-  &.dragOverlay {
-    --scale: 1.05;
-    --box-shadow: $box-shadow;
-    --box-shadow-picked-up: $box-shadow-border,
-      -1px 0 15px 0 rgba(34, 33, 81, 0.01),
-      0px 15px 15px 0 rgba(34, 33, 81, 0.25);
-    z-index: 999;
-  }
-}
-
-.Item {
-  position: relative;
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  padding: 18px 20px;
-  background-color: #fff;
-  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-  outline: none;
-  border-radius: calc(4px / var(--scale-x, 1));
-  box-sizing: border-box;
-  list-style: none;
-  transform-origin: 50% 50%;
-
-  -webkit-tap-highlight-color: transparent;
-
-  color: #333;
-  font-weight: 400;
-  font-size: 1rem;
-  white-space: nowrap;
-
-  transform: scale(var(--scale, 1));
-  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-
-  /* &:focus-visible {
-    box-shadow: 0 0px 4px 1px #4c9ffe, 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-  } */
-
-  &:not(.withHandle) {
-    touch-action: manipulation;
-    cursor: grab;
-  }
-
-  &.dragging:not(.dragOverlay) {
-    opacity: var(--dragging-opacity, 0.5);
-    z-index: 0;
-
-    /* &:focus {
-      box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-    } */
-  }
-
-  &.disabled {
-    color: #999;
-    background-color: #f1f1f1;
-    /* &:focus {
-      box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-    } */
-    cursor: not-allowed;
-  }
-
-  &.dragOverlay {
-    cursor: inherit;
-    /* box-shadow: 0 0px 6px 2px $focused-outline-color; */
-    animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-    transform: scale(var(--scale));
-    box-shadow: var(--box-shadow-picked-up);
-    opacity: 1;
-  }
-
-  &.color:before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 0;
-    height: 100%;
-    width: 3px;
-    display: block;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-    background-color: var(--color);
-  }
-
-  /* &:hover {
-    .Remove {
-      visibility: visible;
-    }
-  } */
-}
-
-.Remove {
-  visibility: hidden;
-}
-
-.Actions {
-  display: flex;
-  align-self: flex-start;
-  margin-top: -12px;
-  margin-left: auto;
-  margin-bottom: -15px;
-  margin-right: -10px;
-}