Fix bundling issues + Add authentication for embedded app

client/packages/lowcoder-sdk-webpack-bundle/index.jsx

@@ -37,6 +37,18 @@ for (
             [i]?.querySelector(".locoder-backend-url")?.value ||
           "https://api-service.lowcoder.cloud"
         }
+        webUrl={
+          document
+            .querySelectorAll(".lowcoder-module-container")
+            [i]?.querySelector(".locoder-frontend-url")?.value ||
+          "https://app.lowcoder.cloud"
+        }
+        orgId={
+          document
+            .querySelectorAll(".lowcoder-module-container")
+            [i]?.querySelector(".locoder-org-id")?.value ||
+          undefined
+        }
       />
     );
   }

client/packages/lowcoder/src/app.tsx

@@ -216,8 +216,6 @@ export function bootstrap() {
   initApp();
   loadComps();
 
-  const uiLanguage = localStorage.getItem('lowcoder_uiLanguage');
-
   const container = document.getElementById("root");
   const root = createRoot(container!);
   root.render(

client/packages/lowcoder/src/appView/AppViewInstance.tsx

@@ -12,6 +12,8 @@ import { AUTH_LOGIN_URL } from "constants/routesURL";
 import { AuthSearchParams } from "constants/authConstants";
 import { saveAuthSearchParams } from "pages/userAuth/authUtils";
 import { Suspense, lazy } from "react";
+import Flex from "antd/es/flex";
+import { TacoButton } from "components/button";
 
 const AppView = lazy(
   () => import('./AppView')
@@ -33,8 +35,11 @@ export interface AppViewInstanceOptions<I = any> {
   baseUrl?: string;
   webUrl?: string;
   moduleInputs?: I;
+  orgId?: string;
 }
 
+let isAuthButtonClicked = false;
+
 export class AppViewInstance<I = any, O = any> {
   private comp: RootComp | null = null;
   private prevOutputs: any = null;
@@ -44,12 +49,16 @@ export class AppViewInstance<I = any, O = any> {
     baseUrl: "https://api-service.lowcoder.cloud",
     webUrl: "https://app.lowcoder.cloud",
   };
+  private authorizedUser: boolean = true;
 
   constructor(private appId: string, private node: Element, private root: Root, options: AppViewInstanceOptions = {}) {
     Object.assign(this.options, options);
     if (this.options.baseUrl) {
       sdkConfig.baseURL = this.options.baseUrl;
     }
+    if (this.options.webUrl) {
+      sdkConfig.webUrl = this.options.webUrl;
+    }
 
     this.dataPromise = this.loadData();
     this.render();
@@ -81,7 +90,15 @@ export class AppViewInstance<I = any, O = any> {
               [AuthSearchParams.redirectUrl]: encodeURIComponent(window.location.href),
               [AuthSearchParams.loginType]: null,
             })
-            window.location.href = `${webUrl}${AUTH_LOGIN_URL}`;
+
+            this.authorizedUser = false;
+            return {
+              data: {
+                orgCommonSettings: undefined,
+                applicationDSL: {},
+                moduleDSL: {},
+              }
+            };
           }
         });
 
@@ -142,19 +159,50 @@ export class AppViewInstance<I = any, O = any> {
 
   private async render() {
     const data = await this.dataPromise;
+    const loginUrl = this.options.orgId
+      ? `${this.options.webUrl}/org/${this.options.orgId}/auth/login`
+      : `${this.options.webUrl}${AUTH_LOGIN_URL}`;
+
     this.root.render(
-      <StyleSheetManager target={this.node as HTMLElement}>
-        <Suspense fallback={null}>
-          <AppView
-            appId={this.appId}
-            dsl={data.appDsl}
-            moduleDsl={data.moduleDslMap}
-            moduleInputs={this.options.moduleInputs}
-            onCompChange={(comp) => this.handleCompChange(comp)}
-            onModuleEventTriggered={(eventName) => this.emit("moduleEventTriggered", [eventName])}
-          />
-        </Suspense>
-      </StyleSheetManager>
+      this.authorizedUser ? (
+        <StyleSheetManager target={this.node as HTMLElement}>
+          <Suspense fallback={null}>
+            <AppView
+              appId={this.appId}
+              dsl={data.appDsl}
+              moduleDsl={data.moduleDslMap}
+              moduleInputs={this.options.moduleInputs}
+              onCompChange={(comp) => this.handleCompChange(comp)}
+              onModuleEventTriggered={(eventName) => this.emit("moduleEventTriggered", [eventName])}
+            />
+          </Suspense>
+        </StyleSheetManager>
+      ) : (
+        <Flex vertical={true} align="center" justify="center">
+          <h4>This resource needs authentication.</h4>
+          {!isAuthButtonClicked ? (
+            <TacoButton
+              buttonType="primary"
+              onClick={() => {
+                isAuthButtonClicked = true;
+                window.open(loginUrl, '_blank');
+                this.render();
+              }}
+            >
+              Login
+            </TacoButton>
+          ) : (
+            <TacoButton
+              buttonType="primary"
+              onClick={() => {
+                window.location.reload();
+              }}
+            >
+              Refresh
+            </TacoButton>
+          )}
+        </Flex>
+      )
     );
   }
 

client/packages/lowcoder/src/comps/comps/avatar.tsx

@@ -31,7 +31,7 @@ import { DropdownOptionControl } from "../controls/optionsControl";
 import { ReactElement, useContext } from "react";
 import { CompNameContext, EditorContext } from "../editorState";
 
-const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer: boolean, $style: AvatarStyleType }>`
+const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
   background: ${(props) => props.$style.background};
   color: ${(props) => props.$style.fill};
   cursor: ${(props) => props.$cursorPointer ? 'pointer' : ''};
@@ -101,7 +101,7 @@ const childrenMap = {
 const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
   const { shape, title, src, iconSize } = props;
   const comp = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
-  const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
+  // const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
   const hasIcon = props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
   const items = props.options
     .filter((option) => !option.hidden)
@@ -142,7 +142,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
             shape={shape}
             $style={props.style}
             src={src.value}
-            $cursorPointer={eventsCount > 0}
+            // $cursorPointer={eventsCount > 0}
             onClick={() => props.onEvent("click")}
           >
             {title.value}

client/packages/lowcoder/src/comps/comps/avatarGroup.tsx

@@ -18,7 +18,7 @@ import { ColorControl } from "../controls/colorControl";
 import { optionsControl } from "../controls/optionsControl";
 import { BoolControl } from "../controls/boolControl";
 import { dropdownControl } from "../controls/dropdownControl";
-import { JSONObject } from "@lowcoder-ee/index.sdk";
+import { JSONObject } from "util/jsonTypes";
 
 const MacaroneList = [
   '#fde68a',

client/packages/lowcoder/src/comps/comps/badgeComp/badgeConstants.tsx

@@ -8,7 +8,7 @@ import { numberExposingStateControl } from "@lowcoder-ee/comps/controls/codeStat
 import { withDefault } from "comps/generators";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { trans } from "i18n";
-import { dropdownControl } from "@lowcoder-ee/index.sdk";
+import { dropdownControl } from "comps/controls/dropdownControl";
 
 const badgeSizeOptions = [
   {

client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx

@@ -9,12 +9,13 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generat
 import { Section, sectionNames } from "lowcoder-design";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { StringControl } from "comps/controls/codeControl";
+import { StringControl, NumberControl } from "comps/controls/codeControl";
 import { FloatButton } from 'antd';
-import { withDefault } from "../../generators";
+import { withDefault, MultiCompBuilder, valueComp } from "../../generators";
 import { IconControl } from "comps/controls/iconControl";
 import styled from "styled-components";
-import { ButtonEventHandlerControl, MultiCompBuilder, NumberControl, manualOptionsControl, valueComp } from "@lowcoder-ee/index.sdk";
+import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
+import { manualOptionsControl } from "comps/controls/optionsControl";
 
 const Wrapper = styled.div<{ $style: FloatButtonStyleType }>`
     width: 0px;

client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

@@ -7,16 +7,22 @@ import {
 } from "../triContainerComp/triContainerCompBuilder";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { BoolCodeControl } from "comps/controls/codeControl";
-import { BoolControl } from "@lowcoder-ee/comps/controls/boolControl";
+import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolControl } from "comps/controls/boolControl";
 import { useContext, useEffect, useRef, useState } from "react";
 import { EditorContext } from "comps/editorState";
-import { ButtonEventHandlerControl, IconControl, MultiCompBuilder, CardStyleType, StringControl, clickEvent, dropdownControl, eventHandlerControl, heightCalculator, optionsControl, refreshEvent, styleControl, widthCalculator, withDefault, CardStyle, CardEventHandlerControl } from "@lowcoder-ee/index.sdk";
 import { Card } from "antd";
 import styled from "styled-components";
+import { CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
+import { MultiCompBuilder, withDefault } from "comps/generators";
+import { IconControl } from "comps/controls/iconControl";
+import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
+import { optionsControl } from "comps/controls/optionsControl";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { styleControl } from "comps/controls/styleControl";
 const { Meta } = Card;
 
-const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolean, cardType: string }>`
+const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string }>`
   height: 100%;
   width: 100%;
   .ant-card-small >.ant-card-head {
@@ -31,7 +37,7 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolea
     border-inline-end: 1px solid ${props => props.$style?.border};
   }
   .ant-card-small >.ant-card-body {
-    padding: ${props => props.cardType == 'custom' ? '0px' : '10px'};
+    padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'};
   }
   .ant-card .ant-card-head {
     background-color: ${props => props.$style?.background};
@@ -44,7 +50,7 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolea
     background-color: ${props => props.$style?.background};
   }
   .ant-card .ant-card-body {
-    padding: ${props => props.cardType == 'custom' ? '0px' : '10px'};
+    padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'};
   }
   .ant-card {
     display: flex;
@@ -53,8 +59,8 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolea
     background-color: ${props => props.$style?.background};
   }
   .ant-card-body {
-    display: ${props => props.showMate ? '' : 'none'};
-    height: ${props => props.cardType == 'custom' ? '100%' : 'auto'};
+    display: ${props => props.$showMate ? '' : 'none'};
+    height: ${props => props.$cardType == 'custom' ? '100%' : 'auto'};
   }
 `;
 
@@ -163,8 +169,8 @@ export const ContainerBaseComp = (function () {
         <Warpper
           ref={conRef}
           $style={props.style}
-          showMate={props.showMeta || props.cardType == 'custom'}
-          cardType={props.cardType}
+          $showMate={props.showMeta || props.cardType == 'custom'}
+          $cardType={props.cardType}
           onMouseEnter={() => props.onEvent('focus')}
           onMouseLeave={() => props.onEvent('blur')}
           onClick={() => props.onEvent('click')}

client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx

@@ -4,15 +4,18 @@ import { styleControl } from "comps/controls/styleControl";
 import { ColorPickerStyle, ColorPickerStyleType } from "comps/controls/styleControlConstants";
 import { NameConfig } from "comps/generators/withExposing";
 import styled, { css } from "styled-components";
-import { UICompBuilder } from "../../generators";
+import { UICompBuilder, withDefault } from "../../generators";
 import { FormDataPropertyView } from "../formComp/formDataConstants";
 import { textInputChildren } from "../textInputComp/textInputConstants";
 import { disabledPropertyView, hiddenPropertyView, } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { ColorPicker } from 'antd';
-import { ArrayOrJSONObjectControl, changeEvent, dropdownControl, eventHandlerControl, jsonObjectExposingStateControl, stringExposingStateControl, withDefault } from "@lowcoder-ee/index.sdk";
 import { presets } from "./colorPickerConstants";
 import _ from "lodash"
+import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
+import { jsonObjectExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { ArrayOrJSONObjectControl } from "comps/controls/codeControl";
 
 export function getStyle(style: ColorPickerStyleType) {
   return css`

client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx

@@ -9,9 +9,8 @@ import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerVi
 import { LayoutViewProps } from "./pageLayoutCompBuilder";
 import { ConfigProvider, Layout } from 'antd';
 import { contrastBackground, contrastText } from "comps/controls/styleControlConstants";
-
-import { LowcoderAppView } from "@lowcoder-ee/index.sdk";
 import { useRef, useState } from "react";
+import { LowcoderAppView } from "appView/LowcoderAppView";
 
 const { Header, Content, Footer, Sider } = Layout;
 

client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

@@ -55,10 +55,9 @@ import { RefControl } from "comps/controls/refControl";
 import { BaseSelectRef } from "rc-select";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
-
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { styleControl } from "@lowcoder-ee/index.sdk";
+import { styleControl } from "comps/controls/styleControl";
 
 export const getStyle = (
   style:

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx

@@ -20,6 +20,7 @@ const Wrapper = styled.div`
 `;
 
 const IconWrapper = styled.div<{ $style: CheckboxStyleType; $ifChecked: boolean }>`
+  pointer-events: none;
   height: 22px;
   svg {
     width: 14px;
@@ -87,7 +88,10 @@ export const BooleanComp = (function () {
       const CheckBoxComp = () => {
         const style = useStyle(CheckboxStyle);
         return (
-          <IconWrapper $style={style} $ifChecked={value}>
+          <IconWrapper
+            $style={style}
+            $ifChecked={value}
+          >
             {value ? (
               <TableCheckedIcon />
             ) : props.falseValues === "x" ? (

client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

@@ -28,14 +28,13 @@ import {
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { BoolCodeControl } from "comps/controls/codeControl";
+import { BoolCodeControl, NumberControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { EditorContext } from "comps/editorState";
 import { checkIsMobile } from "util/commonUtils";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { BoolControl } from "comps/controls/boolControl";
 import { PositionControl } from "comps/controls/dropdownControl";
-import { NumberControl, StringControl } from "@lowcoder-ee/index.sdk";
 
 const EVENT_OPTIONS = [
   {

client/packages/lowcoder/src/comps/comps/timerComp.tsx

@@ -13,7 +13,8 @@ import { useContext, useState, useEffect, useMemo } from "react";
 import { stateComp } from "../generators";
 import { EditorContext } from "comps/editorState";
 import { dropdownControl } from "../controls/dropdownControl";
-import { BoolControl, stringExposingStateControl } from "@lowcoder-ee/index.sdk";
+import { stringExposingStateControl } from "comps/controls/codeStateControl";
+import { BoolControl } from "comps/controls/boolControl";
 
 const Container = styled.div<{ $style: timerStyleType | undefined }>`
   align-items: center;