Skip to content

Commit 350ae5c

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #847 from raheeliftikhar5/embedded-app-authentication
Fix bundling issues + Add authentication for embedded app
2 parents d4546e9 + 2abc840 commit 350ae5c

File tree

16 files changed

+148
-144
lines changed

16 files changed

+148
-144
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,18 @@ for (
3737
[i]?.querySelector(".locoder-backend-url")?.value ||
3838
"https://api-service.lowcoder.cloud"
3939
}
40+
webUrl={
41+
document
42+
.querySelectorAll(".lowcoder-module-container")
43+
[i]?.querySelector(".locoder-frontend-url")?.value ||
44+
"https://app.lowcoder.cloud"
45+
}
46+
orgId={
47+
document
48+
.querySelectorAll(".lowcoder-module-container")
49+
[i]?.querySelector(".locoder-org-id")?.value ||
50+
undefined
51+
}
4052
/>
4153
);
4254
}

‎client/packages/lowcoder/src/app.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -216,8 +216,6 @@ export function bootstrap() {
216216
initApp();
217217
loadComps();
218218

219-
const uiLanguage = localStorage.getItem('lowcoder_uiLanguage');
220-
221219
const container = document.getElementById("root");
222220
const root = createRoot(container!);
223221
root.render(

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

Lines changed: 61 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { AUTH_LOGIN_URL } from "constants/routesURL";
1212
import { AuthSearchParams } from "constants/authConstants";
1313
import { saveAuthSearchParams } from "pages/userAuth/authUtils";
1414
import { Suspense, lazy } from "react";
15+
import Flex from "antd/es/flex";
16+
import { TacoButton } from "components/button";
1517

1618
const AppView = lazy(
1719
() => import('./AppView')
@@ -33,8 +35,11 @@ export interface AppViewInstanceOptions<I = any> {
3335
baseUrl?: string;
3436
webUrl?: string;
3537
moduleInputs?: I;
38+
orgId?: string;
3639
}
3740

41+
let isAuthButtonClicked = false;
42+
3843
export class AppViewInstance<I = any, O = any> {
3944
private comp: RootComp | null = null;
4045
private prevOutputs: any = null;
@@ -44,12 +49,16 @@ export class AppViewInstance<I = any, O = any> {
4449
baseUrl: "https://api-service.lowcoder.cloud",
4550
webUrl: "https://app.lowcoder.cloud",
4651
};
52+
private authorizedUser: boolean = true;
4753

4854
constructor(private appId: string, private node: Element, private root: Root, options: AppViewInstanceOptions = {}) {
4955
Object.assign(this.options, options);
5056
if (this.options.baseUrl) {
5157
sdkConfig.baseURL = this.options.baseUrl;
5258
}
59+
if (this.options.webUrl) {
60+
sdkConfig.webUrl = this.options.webUrl;
61+
}
5362

5463
this.dataPromise = this.loadData();
5564
this.render();
@@ -81,7 +90,15 @@ export class AppViewInstance<I = any, O = any> {
8190
[AuthSearchParams.redirectUrl]: encodeURIComponent(window.location.href),
8291
[AuthSearchParams.loginType]: null,
8392
})
84-
window.location.href = `${webUrl}${AUTH_LOGIN_URL}`;
93+
94+
this.authorizedUser = false;
95+
return {
96+
data: {
97+
orgCommonSettings: undefined,
98+
applicationDSL: {},
99+
moduleDSL: {},
100+
}
101+
};
85102
}
86103
});
87104

@@ -142,19 +159,50 @@ export class AppViewInstance<I = any, O = any> {
142159

143160
private async render() {
144161
const data = await this.dataPromise;
162+
const loginUrl = this.options.orgId
163+
? `${this.options.webUrl}/org/${this.options.orgId}/auth/login`
164+
: `${this.options.webUrl}${AUTH_LOGIN_URL}`;
165+
145166
this.root.render(
146-
<StyleSheetManager target={this.node as HTMLElement}>
147-
<Suspense fallback={null}>
148-
<AppView
149-
appId={this.appId}
150-
dsl={data.appDsl}
151-
moduleDsl={data.moduleDslMap}
152-
moduleInputs={this.options.moduleInputs}
153-
onCompChange={(comp) => this.handleCompChange(comp)}
154-
onModuleEventTriggered={(eventName) => this.emit("moduleEventTriggered", [eventName])}
155-
/>
156-
</Suspense>
157-
</StyleSheetManager>
167+
this.authorizedUser ? (
168+
<StyleSheetManager target={this.node as HTMLElement}>
169+
<Suspense fallback={null}>
170+
<AppView
171+
appId={this.appId}
172+
dsl={data.appDsl}
173+
moduleDsl={data.moduleDslMap}
174+
moduleInputs={this.options.moduleInputs}
175+
onCompChange={(comp) => this.handleCompChange(comp)}
176+
onModuleEventTriggered={(eventName) => this.emit("moduleEventTriggered", [eventName])}
177+
/>
178+
</Suspense>
179+
</StyleSheetManager>
180+
) : (
181+
<Flex vertical={true} align="center" justify="center">
182+
<h4>This resource needs authentication.</h4>
183+
{!isAuthButtonClicked ? (
184+
<TacoButton
185+
buttonType="primary"
186+
onClick={() => {
187+
isAuthButtonClicked = true;
188+
window.open(loginUrl, '_blank');
189+
this.render();
190+
}}
191+
>
192+
Login
193+
</TacoButton>
194+
) : (
195+
<TacoButton
196+
buttonType="primary"
197+
onClick={() => {
198+
window.location.reload();
199+
}}
200+
>
201+
Refresh
202+
</TacoButton>
203+
)}
204+
</Flex>
205+
)
158206
);
159207
}
160208

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { DropdownOptionControl } from "../controls/optionsControl";
3131
import { ReactElement, useContext } from "react";
3232
import { CompNameContext, EditorContext } from "../editorState";
3333

34-
const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer: boolean, $style: AvatarStyleType }>`
34+
const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
3535
background: ${(props) => props.$style.background};
3636
color: ${(props) => props.$style.fill};
3737
cursor: ${(props) => props.$cursorPointer ? 'pointer' : ''};
@@ -101,7 +101,7 @@ const childrenMap = {
101101
const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
102102
const { shape, title, src, iconSize } = props;
103103
const comp = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
104-
const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
104+
// const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
105105
const hasIcon = props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
106106
const items = props.options
107107
.filter((option) => !option.hidden)
@@ -142,7 +142,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
142142
shape={shape}
143143
$style={props.style}
144144
src={src.value}
145-
$cursorPointer={eventsCount > 0}
145+
// $cursorPointer={eventsCount > 0}
146146
onClick={() => props.onEvent("click")}
147147
>
148148
{title.value}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { ColorControl } from "../controls/colorControl";
1818
import { optionsControl } from "../controls/optionsControl";
1919
import { BoolControl } from "../controls/boolControl";
2020
import { dropdownControl } from "../controls/dropdownControl";
21-
import { JSONObject } from "@lowcoder-ee/index.sdk";
21+
import { JSONObject } from "util/jsonTypes";
2222

2323
const MacaroneList = [
2424
'#fde68a',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { numberExposingStateControl } from "@lowcoder-ee/comps/controls/codeStat
88
import { withDefault } from "comps/generators";
99
import { RecordConstructorToComp } from "lowcoder-core";
1010
import { trans } from "i18n";
11-
import { dropdownControl } from "@lowcoder-ee/index.sdk";
11+
import { dropdownControl } from "comps/controls/dropdownControl";
1212

1313
const badgeSizeOptions = [
1414
{

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generat
99
import { Section, sectionNames } from "lowcoder-design";
1010
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1111
import { trans } from "i18n";
12-
import { StringControl } from "comps/controls/codeControl";
12+
import { StringControl, NumberControl } from "comps/controls/codeControl";
1313
import { FloatButton } from 'antd';
14-
import { withDefault } from "../../generators";
14+
import { withDefault, MultiCompBuilder, valueComp } from "../../generators";
1515
import { IconControl } from "comps/controls/iconControl";
1616
import styled from "styled-components";
17-
import { ButtonEventHandlerControl, MultiCompBuilder, NumberControl, manualOptionsControl, valueComp } from "@lowcoder-ee/index.sdk";
17+
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
18+
import { manualOptionsControl } from "comps/controls/optionsControl";
1819

1920
const Wrapper = styled.div<{ $style: FloatButtonStyleType }>`
2021
width: 0px;

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,22 @@ import {
77
} from "../triContainerComp/triContainerCompBuilder";
88
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
99
import { trans } from "i18n";
10-
import { BoolCodeControl } from "comps/controls/codeControl";
11-
import { BoolControl } from "@lowcoder-ee/comps/controls/boolControl";
10+
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
11+
import { BoolControl } from "comps/controls/boolControl";
1212
import { useContext, useEffect, useRef, useState } from "react";
1313
import { EditorContext } from "comps/editorState";
14-
import { ButtonEventHandlerControl, IconControl, MultiCompBuilder, CardStyleType, StringControl, clickEvent, dropdownControl, eventHandlerControl, heightCalculator, optionsControl, refreshEvent, styleControl, widthCalculator, withDefault, CardStyle, CardEventHandlerControl } from "@lowcoder-ee/index.sdk";
1514
import { Card } from "antd";
1615
import styled from "styled-components";
16+
import { CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
17+
import { MultiCompBuilder, withDefault } from "comps/generators";
18+
import { IconControl } from "comps/controls/iconControl";
19+
import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
20+
import { optionsControl } from "comps/controls/optionsControl";
21+
import { dropdownControl } from "comps/controls/dropdownControl";
22+
import { styleControl } from "comps/controls/styleControl";
1723
const { Meta } = Card;
1824

19-
const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolean, cardType: string }>`
25+
const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string }>`
2026
height: 100%;
2127
width: 100%;
2228
.ant-card-small >.ant-card-head {
@@ -31,7 +37,7 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolea
3137
border-inline-end: 1px solid ${props => props.$style?.border};
3238
}
3339
.ant-card-small >.ant-card-body {
34-
padding: ${props => props.cardType == 'custom' ? '0px' : '10px'};
40+
padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'};
3541
}
3642
.ant-card .ant-card-head {
3743
background-color: ${props => props.$style?.background};
@@ -44,7 +50,7 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolea
4450
background-color: ${props => props.$style?.background};
4551
}
4652
.ant-card .ant-card-body {
47-
padding: ${props => props.cardType == 'custom' ? '0px' : '10px'};
53+
padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'};
4854
}
4955
.ant-card {
5056
display: flex;
@@ -53,8 +59,8 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, showMate: boolea
5359
background-color: ${props => props.$style?.background};
5460
}
5561
.ant-card-body {
56-
display: ${props => props.showMate ? '' : 'none'};
57-
height: ${props => props.cardType == 'custom' ? '100%' : 'auto'};
62+
display: ${props => props.$showMate ? '' : 'none'};
63+
height: ${props => props.$cardType == 'custom' ? '100%' : 'auto'};
5864
}
5965
`;
6066

@@ -163,8 +169,8 @@ export const ContainerBaseComp = (function () {
163169
<Warpper
164170
ref={conRef}
165171
$style={props.style}
166-
showMate={props.showMeta || props.cardType == 'custom'}
167-
cardType={props.cardType}
172+
$showMate={props.showMeta || props.cardType == 'custom'}
173+
$cardType={props.cardType}
168174
onMouseEnter={() => props.onEvent('focus')}
169175
onMouseLeave={() => props.onEvent('blur')}
170176
onClick={() => props.onEvent('click')}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@ import { styleControl } from "comps/controls/styleControl";
44
import { ColorPickerStyle, ColorPickerStyleType } from "comps/controls/styleControlConstants";
55
import { NameConfig } from "comps/generators/withExposing";
66
import styled, { css } from "styled-components";
7-
import { UICompBuilder } from "../../generators";
7+
import { UICompBuilder, withDefault } from "../../generators";
88
import { FormDataPropertyView } from "../formComp/formDataConstants";
99
import { textInputChildren } from "../textInputComp/textInputConstants";
1010
import { disabledPropertyView, hiddenPropertyView, } from "comps/utils/propertyUtils";
1111
import { trans } from "i18n";
1212
import { ColorPicker } from 'antd';
13-
import { ArrayOrJSONObjectControl, changeEvent, dropdownControl, eventHandlerControl, jsonObjectExposingStateControl, stringExposingStateControl, withDefault } from "@lowcoder-ee/index.sdk";
1413
import { presets } from "./colorPickerConstants";
1514
import _ from "lodash"
15+
import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
16+
import { jsonObjectExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
17+
import { dropdownControl } from "comps/controls/dropdownControl";
18+
import { ArrayOrJSONObjectControl } from "comps/controls/codeControl";
1619

1720
export function getStyle(style: ColorPickerStyleType) {
1821
return css`

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerVi
99
import { LayoutViewProps } from "./pageLayoutCompBuilder";
1010
import { ConfigProvider, Layout } from 'antd';
1111
import { contrastBackground, contrastText } from "comps/controls/styleControlConstants";
12-
13-
import { LowcoderAppView } from "@lowcoder-ee/index.sdk";
1412
import { useRef, useState } from "react";
13+
import { LowcoderAppView } from "appView/LowcoderAppView";
1514

1615
const { Header, Content, Footer, Sider } = Layout;
1716

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,9 @@ import { RefControl } from "comps/controls/refControl";
5555
import { BaseSelectRef } from "rc-select";
5656
import { refMethods } from "comps/generators/withMethodExposing";
5757
import { blurMethod, focusMethod } from "comps/utils/methodUtils";
58-
5958
import { useContext } from "react";
6059
import { EditorContext } from "comps/editorState";
61-
import { styleControl } from "@lowcoder-ee/index.sdk";
60+
import { styleControl } from "comps/controls/styleControl";
6261

6362
export const getStyle = (
6463
style:

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const Wrapper = styled.div`
2020
`;
2121

2222
const IconWrapper = styled.div<{ $style: CheckboxStyleType; $ifChecked: boolean }>`
23+
pointer-events: none;
2324
height: 22px;
2425
svg {
2526
width: 14px;
@@ -87,7 +88,10 @@ export const BooleanComp = (function () {
8788
const CheckBoxComp = () => {
8889
const style = useStyle(CheckboxStyle);
8990
return (
90-
<IconWrapper $style={style} $ifChecked={value}>
91+
<IconWrapper
92+
$style={style}
93+
$ifChecked={value}
94+
>
9195
{value ? (
9296
<TableCheckedIcon />
9397
) : props.falseValues === "x" ? (

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,13 @@ import {
2828
import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
2929
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
3030
import { trans } from "i18n";
31-
import { BoolCodeControl } from "comps/controls/codeControl";
31+
import { BoolCodeControl, NumberControl } from "comps/controls/codeControl";
3232
import { DisabledContext } from "comps/generators/uiCompBuilder";
3333
import { EditorContext } from "comps/editorState";
3434
import { checkIsMobile } from "util/commonUtils";
3535
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
3636
import { BoolControl } from "comps/controls/boolControl";
3737
import { PositionControl } from "comps/controls/dropdownControl";
38-
import { NumberControl, StringControl } from "@lowcoder-ee/index.sdk";
3938

4039
const EVENT_OPTIONS = [
4140
{

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import { useContext, useState, useEffect, useMemo } from "react";
1313
import { stateComp } from "../generators";
1414
import { EditorContext } from "comps/editorState";
1515
import { dropdownControl } from "../controls/dropdownControl";
16-
import { BoolControl, stringExposingStateControl } from "@lowcoder-ee/index.sdk";
16+
import { stringExposingStateControl } from "comps/controls/codeStateControl";
17+
import { BoolControl } from "comps/controls/boolControl";
1718

1819
const Container = styled.div<{ $style: timerStyleType | undefined }>`
1920
align-items: center;

0 commit comments

Comments
 (0)