@meshxdata/fops 0.1.54 → 0.1.57

package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/AuthContext.jsx

@@ -1,170 +0,0 @@
-import { createContext, useContext, useEffect, useState } from "react";
-import { Auth0Provider, useAuth0 } from "@auth0/auth0-react";
-import { setTokenGetter } from "../api/client";
-
-const AuthContext = createContext({
-  user: null,
-  roles: [],
-  permissions: [],
-  isAdmin: false,
-  canWrite: false,
-  canDeploy: false,
-  getToken: async () => "",
-});
-
-/**
- * Inner provider that fetches user profile + roles from the API
- * once authenticated.
- */
-function AuthGate({ children }) {
-  const { isAuthenticated, isLoading, loginWithRedirect, getAccessTokenSilently, user } = useAuth0();
-  const [profile, setProfile] = useState(null);
-  const [loadingProfile, setLoadingProfile] = useState(true);
-
-  // Wire token getter into the API client so all fetches are authenticated
-  useEffect(() => {
-    if (isAuthenticated) setTokenGetter(() => getAccessTokenSilently());
-  }, [isAuthenticated, getAccessTokenSilently]);
-
-  useEffect(() => {
-    if (!isAuthenticated) return;
-    let cancelled = false;
-
-    (async () => {
-      try {
-        const token = await getAccessTokenSilently();
-        const res = await fetch("/cloud/api/me", {
-          headers: { Authorization: `Bearer ${token}` },
-        });
-        if (res.ok && !cancelled) {
-          setProfile(await res.json());
-        }
-      } catch {
-        // token or fetch failed — will show login
-      } finally {
-        if (!cancelled) setLoadingProfile(false);
-      }
-    })();
-
-    return () => { cancelled = true; };
-  }, [isAuthenticated, getAccessTokenSilently]);
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
-        <div className="text-gray-500 dark:text-gray-400 text-sm">Loading...</div>
-      </div>
-    );
-  }
-
-  if (!isAuthenticated) {
-    return (
-      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">meshXcloud</h1>
-          <p className="text-gray-500 dark:text-gray-400 mb-6">Sign in to access the cloud panel</p>
-          <button
-            onClick={() => loginWithRedirect()}
-            className="px-6 py-2.5 bg-violet-500 hover:bg-violet-600 text-white rounded-lg font-medium transition-colors"
-          >
-            Sign in with Auth0
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  if (loadingProfile) {
-    return (
-      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
-        <div className="text-gray-500 dark:text-gray-400 text-sm">Loading profile...</div>
-      </div>
-    );
-  }
-
-  const roles = profile?.roles || [];
-  const permissions = profile?.permissions || [];
-  const isAdmin = roles.includes("admin");
-
-  const value = {
-    user: { ...user, ...profile },
-    roles,
-    permissions,
-    isAdmin,
-    canWrite: isAdmin || permissions.includes("cloud:write") || permissions.includes("cloud:admin"),
-    canDeploy: isAdmin || permissions.includes("cloud:deploy") || permissions.includes("cloud:admin"),
-    getToken: getAccessTokenSilently,
-  };
-
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-}
-
-/**
- * Passthrough provider when auth is disabled — grants full admin access.
- */
-function NoAuthProvider({ children }) {
-  const value = {
-    user: { sub: "local", name: "Local User", email: "" },
-    roles: ["admin"],
-    permissions: ["cloud:admin"],
-    isAdmin: true,
-    canWrite: true,
-    canDeploy: true,
-    getToken: async () => "",
-  };
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-}
-
-/**
- * Top-level wrapper that fetches Auth0 config from the API.
- * If auth is disabled (CLOUD_AUTH != 1), renders children directly
- * with full permissions. Otherwise, wraps in Auth0Provider + AuthGate.
- */
-export default function AuthProvider({ children }) {
-  const [config, setConfig] = useState(null);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    fetch("/cloud/api/auth-config")
-      .then((r) => r.json())
-      .then(setConfig)
-      .catch((e) => setError(e.message));
-  }, []);
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
-        <div className="text-red-500 text-sm">Auth config error: {error}</div>
-      </div>
-    );
-  }
-
-  if (!config) {
-    return (
-      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
-        <div className="text-gray-500 dark:text-gray-400 text-sm">Initializing...</div>
-      </div>
-    );
-  }
-
-  // Auth disabled — bypass Auth0 entirely
-  if (!config.enabled) {
-    return <NoAuthProvider>{children}</NoAuthProvider>;
-  }
-
-  return (
-    <Auth0Provider
-      domain={config.domain}
-      clientId={config.clientId}
-      authorizationParams={{
-        redirect_uri: window.location.origin + "/cloud",
-        audience: config.audience,
-      }}
-      cacheLocation="localstorage"
-    >
-      <AuthGate>{children}</AuthGate>
-    </Auth0Provider>
-  );
-}
-
-export const useAuthContext = () => useContext(AuthContext);

package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/Info.jsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react';
-import Transition from './Transition';
-
-function Info({
-  children,
-  className,
-  containerClassName
-}) {
-
-  const [infoOpen, setInfoOpen] = useState(false);
-
-  return (
-    <div
-      className={`relative ${className}`}
-      onMouseEnter={() => setInfoOpen(true)}
-      onMouseLeave={() => setInfoOpen(false)}
-      onFocus={() => setInfoOpen(true)}
-      onBlur={() => setInfoOpen(false)}
-    >
-      <button
-        className="block"
-        aria-haspopup="true"
-        aria-expanded={infoOpen}
-        onClick={(e) => e.preventDefault()}
-      >
-        <svg className="w-4 h-4 fill-current text-gray-400" viewBox="0 0 16 16">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
-        </svg>
-      </button>
-      <div className="z-10 absolute bottom-full left-1/2 transform -translate-x-1/2">
-        <Transition
-          show={infoOpen}
-          tag="div"
-          className={`bg-white border border-gray-200 p-3 rounded-sm shadow-lg overflow-hidden mb-2 ${containerClassName}`}
-          enter="transition ease-out duration-200 transform"
-          enterStart="opacity-0 -translate-y-2"
-          enterEnd="opacity-100 translate-y-0"
-          leave="transition ease-out duration-200"
-          leaveStart="opacity-100"
-          leaveEnd="opacity-0"
-        >
-          {children}
-        </Transition>
-      </div>
-    </div>
-  );
-}
-
-export default Info;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/ThemeContext.jsx

@@ -1,37 +0,0 @@
-import { createContext, useContext, useState, useEffect } from 'react';
-
-const ThemeContext = createContext({
-  currentTheme: 'light',
-  changeCurrentTheme: () => {},
-});
-
-export default function ThemeProvider({children}) {  
-  const persistedTheme = localStorage.getItem('theme');
-  const [theme, setTheme] = useState(persistedTheme || 'light');
-
-  const changeCurrentTheme = (newTheme) => {
-    setTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
-  };
-
-  useEffect(() => {
-    document.documentElement.classList.add('**:transition-none!');
-    if (theme === 'light') {
-      document.documentElement.classList.remove('dark');
-      document.documentElement.style.colorScheme = 'light';
-    } else {
-      document.documentElement.classList.add('dark');
-      document.documentElement.style.colorScheme = 'dark';
-    }
-
-    const transitionTimeout = setTimeout(() => {
-      document.documentElement.classList.remove('**:transition-none!');
-    }, 1);
-    
-    return () => clearTimeout(transitionTimeout);
-  }, [theme]);
-
-  return <ThemeContext.Provider value={{ currentTheme: theme, changeCurrentTheme }}>{children}</ThemeContext.Provider>;
-}
-
-export const useThemeProvider = () => useContext(ThemeContext);

package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/Transition.jsx

@@ -1,116 +0,0 @@
-import React, { useRef, useEffect, useContext } from 'react';
-import { CSSTransition as ReactCSSTransition } from 'react-transition-group';
-
-const TransitionContext = React.createContext({
-  parent: {},
-})
-
-function useIsInitialRender() {
-  const isInitialRender = useRef(true);
-  useEffect(() => {
-    isInitialRender.current = false;
-  }, [])
-  return isInitialRender.current;
-}
-
-function CSSTransition({
-  show,
-  enter = '',
-  enterStart = '',
-  enterEnd = '',
-  leave = '',
-  leaveStart = '',
-  leaveEnd = '',
-  appear,
-  unmountOnExit,
-  tag = 'div',
-  children,
-  ...rest
-}) {
-  const enterClasses = enter.split(' ').filter((s) => s.length);
-  const enterStartClasses = enterStart.split(' ').filter((s) => s.length);
-  const enterEndClasses = enterEnd.split(' ').filter((s) => s.length);
-  const leaveClasses = leave.split(' ').filter((s) => s.length);
-  const leaveStartClasses = leaveStart.split(' ').filter((s) => s.length);
-  const leaveEndClasses = leaveEnd.split(' ').filter((s) => s.length);
-  const removeFromDom = unmountOnExit;
-
-  function addClasses(node, classes) {
-    classes.length && node.classList.add(...classes);
-  }
-
-  function removeClasses(node, classes) {
-    classes.length && node.classList.remove(...classes);
-  }
-
-  const nodeRef = React.useRef(null);
-  const Component = tag;
-
-  return (
-    <ReactCSSTransition
-      appear={appear}
-      nodeRef={nodeRef}
-      unmountOnExit={removeFromDom}
-      in={show}
-      addEndListener={(done) => {
-        nodeRef.current.addEventListener('transitionend', done, false)
-      }}
-      onEnter={() => {
-        if (!removeFromDom) nodeRef.current.style.display = null;
-        addClasses(nodeRef.current, [...enterClasses, ...enterStartClasses])
-      }}
-      onEntering={() => {
-        removeClasses(nodeRef.current, enterStartClasses)
-        addClasses(nodeRef.current, enterEndClasses)
-      }}
-      onEntered={() => {
-        removeClasses(nodeRef.current, [...enterEndClasses, ...enterClasses])
-      }}
-      onExit={() => {
-        addClasses(nodeRef.current, [...leaveClasses, ...leaveStartClasses])
-      }}
-      onExiting={() => {
-        removeClasses(nodeRef.current, leaveStartClasses)
-        addClasses(nodeRef.current, leaveEndClasses)
-      }}
-      onExited={() => {
-        removeClasses(nodeRef.current, [...leaveEndClasses, ...leaveClasses])
-        if (!removeFromDom) nodeRef.current.style.display = 'none';
-      }}
-    >
-      <Component ref={nodeRef} {...rest} style={{ display: !removeFromDom ? 'none': null }}>{children}</Component>
-    </ReactCSSTransition>
-  )
-}
-
-function Transition({ show, appear, ...rest }) {
-  const { parent } = useContext(TransitionContext);
-  const isInitialRender = useIsInitialRender();
-  const isChild = show === undefined;
-
-  if (isChild) {
-    return (
-      <CSSTransition
-        appear={parent.appear || !parent.isInitialRender}
-        show={parent.show}
-        {...rest}
-      />
-    )
-  }
-
-  return (
-    <TransitionContext.Provider
-      value={{
-        parent: {
-          show,
-          isInitialRender,
-          appear,
-        },
-      }}
-    >
-      <CSSTransition appear={appear} show={show} {...rest} />
-    </TransitionContext.Provider>
-  )
-}
-
-export default Transition;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/Utils.js

@@ -1,63 +0,0 @@
-export const formatValue = (value) => Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-  maximumSignificantDigits: 3,
-  notation: 'compact',
-}).format(value);
-
-export const formatThousands = (value) => Intl.NumberFormat('en-US', {
-  maximumSignificantDigits: 3,
-  notation: 'compact',
-}).format(value);
-
-export const getCssVariable = (variable) => {
-  return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
-};
-
-const adjustHexOpacity = (hexColor, opacity) => {
-  // Remove the '#' if it exists
-  hexColor = hexColor.replace('#', '');
-
-  // Convert hex to RGB
-  const r = parseInt(hexColor.substring(0, 2), 16);
-  const g = parseInt(hexColor.substring(2, 4), 16);
-  const b = parseInt(hexColor.substring(4, 6), 16);
-
-  // Return RGBA string
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-};
-
-const adjustHSLOpacity = (hslColor, opacity) => {
-  // Convert HSL to HSLA
-  return hslColor.replace('hsl(', 'hsla(').replace(')', `, ${opacity})`);
-};
-
-const adjustOKLCHOpacity = (oklchColor, opacity) => {
-  // Add alpha value to OKLCH color
-  return oklchColor.replace(/oklch\((.*?)\)/, (match, p1) => `oklch(${p1} / ${opacity})`);
-};
-
-export const adjustColorOpacity = (color, opacity) => {
-  if (color.startsWith('#')) {
-    return adjustHexOpacity(color, opacity);
-  } else if (color.startsWith('hsl')) {
-    return adjustHSLOpacity(color, opacity);
-  } else if (color.startsWith('oklch')) {
-    return adjustOKLCHOpacity(color, opacity);
-  } else {
-    throw new Error('Unsupported color format');
-  }
-};
-
-export const oklchToRGBA = (oklchColor) => {
-  // Create a temporary div to use for color conversion
-  const tempDiv = document.createElement('div');
-  tempDiv.style.color = oklchColor;
-  document.body.appendChild(tempDiv);
-  
-  // Get the computed style and convert to RGB
-  const computedColor = window.getComputedStyle(tempDiv).color;
-  document.body.removeChild(tempDiv);
-  
-  return computedColor;
-};