Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 55d1b17

Browse files
raheeliftikhar5raheeliftikhar5
committed
feat: add ory/keycloak oauth providers
1 parent 0a85f62 commit 55d1b17

File tree

19 files changed

+452
-139
lines changed

19 files changed

+452
-139
lines changed

‎client/packages/lowcoder/src/assets/icons/icon-login-keycloak.svg

Lines changed: 1 addition & 0 deletions
Loading

‎client/packages/lowcoder/src/assets/icons/icon-login-ory.svg

Lines changed: 12 additions & 0 deletions
Loading

‎client/packages/lowcoder/src/assets/icons/index.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import GoogleLoginIcon from "./icon-login-google.svg";
22
import GithubLoginIcon from "./icon-login-github.svg";
3+
import OryLoginIcon from "./icon-login-ory.svg";
4+
import KeyCloakLoginIcon from "./icon-login-keycloak.svg";
35
import GeneralLoginIcon from "./icon-login-general.svg";
46
import EmailLoginIcon from "./icon-login-email.svg";
57

@@ -10,4 +12,11 @@ export { ReactComponent as DocIcon } from "./view-doc.svg";
1012
export { ReactComponent as TutorialIcon } from "./tutorial.svg";
1113
export { ReactComponent as ShortcutIcon } from "./icon-help-shortcut.svg";
1214

13-
export { GoogleLoginIcon, GithubLoginIcon, GeneralLoginIcon, EmailLoginIcon };
15+
export {
16+
GoogleLoginIcon,
17+
GithubLoginIcon,
18+
OryLoginIcon,
19+
KeyCloakLoginIcon,
20+
GeneralLoginIcon,
21+
EmailLoginIcon
22+
};

‎client/packages/lowcoder/src/constants/authConstants.ts

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ import Login, { ThirdPartyBindCard } from "pages/userAuth/login";
1111
import UserRegister from "pages/userAuth/register";
1212
import { AuthRedirect } from "pages/userAuth/thirdParty/authRedirect";
1313
import React from "react";
14-
import { GoogleLoginIcon, GithubLoginIcon, EmailLoginIcon } from "assets/icons";
14+
import {
15+
GoogleLoginIcon,
16+
GithubLoginIcon,
17+
OryLoginIcon,
18+
KeyCloakLoginIcon,
19+
EmailLoginIcon
20+
} from "assets/icons";
1521

1622
export type AuthInviteInfo = InviteInfo & { invitationId: string };
1723
export type AuthLocationState = { inviteInfo?: AuthInviteInfo; thirdPartyAuthError?: boolean };
@@ -79,15 +85,26 @@ export const AuthRoutes: Array<{ path: string; component: React.ComponentType<an
7985
{ path: ORG_AUTH_REGISTER_URL, component: UserRegister },
8086
];
8187

82-
export type ServerAuthType = "GOOGLE" | "GITHUB" | "FORM";
88+
export type ServerAuthType = "GOOGLE" | "GITHUB" | "FORM" | "KEYCLOAK" | "ORY";
8389

8490
export type ServerAuthTypeInfoValueType = { logo: string; isOAuth2?: boolean };
8591
export const ServerAuthTypeInfo: { [key in ServerAuthType]?: ServerAuthTypeInfoValueType } = {
8692
GOOGLE: {
8793
logo: GoogleLoginIcon,
8894
isOAuth2: true,
8995
},
90-
GITHUB: { logo: GithubLoginIcon, isOAuth2: true },
96+
GITHUB: {
97+
logo: GithubLoginIcon,
98+
isOAuth2: true
99+
},
100+
KEYCLOAK: {
101+
logo: KeyCloakLoginIcon,
102+
isOAuth2: true
103+
},
104+
ORY: {
105+
logo: OryLoginIcon,
106+
isOAuth2: true
107+
},
91108
FORM: { logo: EmailLoginIcon },
92109
};
93110

‎client/packages/lowcoder/src/constants/routesURL.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ export const THEME_SETTING = "/setting/theme";
1313
export const PLUGINS_SETTING = "/setting/plugins";
1414
export const THEME_DETAIL = "/setting/theme/detail";
1515

16-
export const IDSOURCE_SETTING = "/setting/idsource";
17-
export const IDSOURCE_DETAIL = "/setting/idsource/detail";
16+
export const OAUTH_PROVIDER_SETTING = "/setting/oauth-provider";
17+
export const OAUTH_PROVIDER_DETAIL = "/setting/oauth-provider/detail";
1818

1919
export const PERMISSION_SETTING_DETAIL = `${PERMISSION_SETTING}/:groupId`;
2020
export const ORGANIZATION_SETTING_DETAIL = `${ORGANIZATION_SETTING}/:orgId`;

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1487,15 +1487,17 @@ export const en = {
14871487
},
14881488
settings: {
14891489
title: "Settings",
1490-
member: "Members",
1490+
userGroups: "User Groups",
14911491
organization: "Workspaces",
14921492
audit: "Audit Logs",
14931493
theme: "Themes",
14941494
plugin: "Plugins",
14951495
advanced: "Advanced",
14961496
lab: "Lab",
14971497
branding: "Branding",
1498-
idSource: "ID Providers",
1498+
oauthProviders: "OAuth Providers",
1499+
appUsage: "App Usage Logs",
1500+
environments: "Environments",
14991501
premium: "Premium",
15001502
},
15011503
memberSettings: {
@@ -2544,7 +2546,7 @@ export const en = {
25442546
table,
25452547
},
25462548
idSource: {
2547-
title: "ID Providers",
2549+
title: "OAuth Providers",
25482550
form: "Email",
25492551
pay: "Premium",
25502552
enable: "Enable",

‎client/packages/lowcoder/src/i18n/locales/zh.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1367,15 +1367,17 @@ drawer: {
13671367
},
13681368
settings: {
13691369
title: "设置",
1370-
member: "成员",
1370+
userGroups: "用户组",
13711371
organization: "工作空间",
13721372
audit: "审计日志",
13731373
theme: "主题",
13741374
plugin: "插件",
13751375
advanced: "高级",
13761376
lab: "实验室",
13771377
branding: "品牌",
1378-
idSource: "登录方式",
1378+
oauthProviders: "OAuth 提供商",
1379+
appUsage: "应用程序使用日志",
1380+
environments: "环境",
13791381
premium: "高级版",
13801382
},
13811383
memberSettings: {
@@ -2408,7 +2410,7 @@ componentDocExtra: {
24082410
table,
24092411
},
24102412
idSource: {
2411-
title: "登录方式",
2413+
title: "OAuth 提供商",
24122414
form: "电子邮件",
24132415
pay: "高级",
24142416
enable: "启用",

‎client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import { useState } from "react";
2+
import { messageInstance, CustomSelect, CloseEyeIcon } from "lowcoder-design";
3+
import {
4+
CustomModalStyled,
5+
} from "../styled";
6+
import { trans } from "i18n";
7+
import {
8+
FormStyled,
9+
CheckboxStyled,
10+
SpanStyled,
11+
PasswordLabel
12+
} from "./styledComponents";
13+
import { Form, Input, Select } from "antd";
14+
import IdSourceApi, { ConfigItem } from "api/idSourceApi";
15+
import { validateResponse } from "api/apiUtils";
16+
import { authConfig, AuthType } from "./idSourceConstants";
17+
import { ServerAuthTypeInfo } from "constants/authConstants";
18+
import { GeneralLoginIcon } from "assets/icons";
19+
20+
type CreateModalProp = {
21+
modalVisible: boolean;
22+
oauthProvidersList: AuthType[],
23+
closeModal: () => void;
24+
onConfigCreate: () => void;
25+
};
26+
27+
function CreateModal(props: CreateModalProp) {
28+
const {
29+
modalVisible,
30+
oauthProvidersList,
31+
closeModal,
32+
onConfigCreate
33+
} = props;
34+
const [form] = Form.useForm();
35+
const [saveLoading, setSaveLoading] = useState(false);
36+
37+
const handleOk = () => {
38+
form.validateFields().then(values => {
39+
console.log(values)
40+
saveAuthProvider(values)
41+
})
42+
}
43+
function saveAuthProvider(values: ConfigItem) {
44+
setSaveLoading(true);
45+
IdSourceApi.saveConfig(values)
46+
.then((resp) => {
47+
if (validateResponse(resp)) {
48+
messageInstance.success(trans("idSource.saveSuccess"));
49+
}
50+
})
51+
.catch((e) => messageInstance.error(e.message))
52+
.finally(() => {
53+
setSaveLoading(false);
54+
onConfigCreate();
55+
});
56+
}
57+
58+
function handleCancel() {
59+
closeModal();
60+
form.resetFields();
61+
}
62+
63+
const authConfigOptions = Object.values(authConfig)
64+
.filter(config => {
65+
return !(oauthProvidersList.indexOf(config.sourceValue) > -1)
66+
})
67+
.map(config => ({
68+
label: config.sourceName,
69+
value: config.sourceValue,
70+
}));
71+
72+
return (
73+
<CustomModalStyled
74+
width="500px"
75+
title={"Add OAuth Provider"}
76+
open={modalVisible}
77+
okText={"Save and Enable"}
78+
okButtonProps={{
79+
loading: saveLoading
80+
}}
81+
onOk={handleOk}
82+
onCancel={handleCancel}
83+
destroyOnClose
84+
afterClose={() => form.resetFields()}
85+
>
86+
<FormStyled
87+
form={form}
88+
name="basic"
89+
layout="vertical"
90+
style={{ maxWidth: 440 }}
91+
autoComplete="off"
92+
>
93+
<Form.Item
94+
name="authType"
95+
label="Auth Type"
96+
rules={[{ required: true }]}
97+
>
98+
<CustomSelect
99+
placeholder={trans("idSource.formSelectPlaceholder", {
100+
label: 'Auth Type',
101+
})}
102+
>
103+
{authConfigOptions.map(config => (
104+
<Select.Option key={config.value} value={config.value}>
105+
<SpanStyled disabled={false}>
106+
{
107+
<img
108+
src={ServerAuthTypeInfo[config.value]?.logo || GeneralLoginIcon}
109+
alt={config.value}
110+
/>
111+
}
112+
<span>{config.label}</span>
113+
</SpanStyled>
114+
</Select.Option>
115+
))}
116+
</CustomSelect>
117+
</Form.Item>
118+
<Form.Item
119+
name="clientId"
120+
label="Client ID"
121+
rules={[{ required: true }]}
122+
>
123+
<Input
124+
placeholder={trans("idSource.formPlaceholder", {
125+
label: 'Client ID',
126+
})}
127+
autoComplete="off"
128+
/>
129+
</Form.Item>
130+
<Form.Item
131+
name="clientSecret"
132+
label={
133+
<PasswordLabel>
134+
<span>{"Client secret"}:</span>
135+
<CloseEyeIcon />
136+
</PasswordLabel>
137+
}
138+
rules={[{
139+
required: true,
140+
message: trans("idSource.formPlaceholder", {
141+
label: 'Client secret',
142+
})
143+
}]}
144+
>
145+
<Input
146+
type="password"
147+
placeholder={trans("idSource.encryptedServer")}
148+
autoComplete="off"
149+
/>
150+
</Form.Item>
151+
<Form.Item className="register" name="enableRegister" valuePropName="checked">
152+
<CheckboxStyled>{trans("idSource.enableRegister")}</CheckboxStyled>
153+
</Form.Item>
154+
</FormStyled>
155+
</CustomModalStyled>
156+
);
157+
}
158+
159+
export default CreateModal;

‎client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { validateResponse } from "api/apiUtils";
66
import IdSourceApi from "api/idSourceApi";
77
import { DangerIcon, CustomModal } from "lowcoder-design";
88
import history from "util/history";
9-
import { IDSOURCE_SETTING } from "constants/routesURL";
9+
import { OAUTH_PROVIDER_SETTING } from "constants/routesURL";
1010
import { messageInstance } from "lowcoder-design";
1111

1212
export const DeleteConfig = (props: { id: string }) => {
@@ -21,7 +21,7 @@ export const DeleteConfig = (props: { id: string }) => {
2121
.then((resp) => {
2222
if (validateResponse(resp)) {
2323
messageInstance.success(trans("idSource.disableSuccess"), 0.8, () =>
24-
history.push(IDSOURCE_SETTING)
24+
history.push(OAUTH_PROVIDER_SETTING)
2525
);
2626
}
2727
})

‎client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
CloseEyeIcon,
1313
} from "lowcoder-design";
1414
import history from "util/history";
15-
import { IDSOURCE_SETTING } from "constants/routesURL";
15+
import { OAUTH_PROVIDER_SETTING } from "constants/routesURL";
1616
import {
1717
authConfig,
1818
AuthType,
@@ -59,7 +59,7 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
5959
});
6060
const configDetail = props.location.state;
6161
const goList = () => {
62-
history.push(IDSOURCE_SETTING);
62+
history.push(OAUTH_PROVIDER_SETTING);
6363
};
6464
if (!configDetail) {
6565
goList();

0 commit comments

Comments
 (0)