From 55d1b1736771d34b95927e9711ff8e0587a36200 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 2 Nov 2023 00:15:18 +0500 Subject: [PATCH 1/2] feat: add ory/keycloak oauth providers --- .../src/assets/icons/icon-login-keycloak.svg | 1 + .../src/assets/icons/icon-login-ory.svg | 12 + .../lowcoder/src/assets/icons/index.ts | 11 +- .../lowcoder/src/constants/authConstants.ts | 23 +- .../lowcoder/src/constants/routesURL.ts | 4 +- .../packages/lowcoder/src/i18n/locales/en.ts | 8 +- .../packages/lowcoder/src/i18n/locales/zh.ts | 8 +- .../pages/setting/idSource/createModal.tsx | 159 +++++++++++++ .../setting/idSource/detail/deleteConfig.tsx | 4 +- .../pages/setting/idSource/detail/index.tsx | 4 +- .../setting/idSource/idSourceConstants.ts | 27 ++- .../src/pages/setting/idSource/index.tsx | 6 +- .../src/pages/setting/idSource/list.tsx | 210 +++++++++--------- .../setting/idSource/styledComponents.tsx | 27 +++ .../permission/groupUsersPermission.tsx | 2 +- .../setting/permission/orgUsersPermission.tsx | 2 +- .../setting/permission/permissionList.tsx | 2 +- .../src/pages/setting/settingHome.tsx | 50 +++-- .../lowcoder/src/pages/setting/styled.tsx | 31 ++- 19 files changed, 452 insertions(+), 139 deletions(-) create mode 100644 client/packages/lowcoder/src/assets/icons/icon-login-keycloak.svg create mode 100644 client/packages/lowcoder/src/assets/icons/icon-login-ory.svg create mode 100644 client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx diff --git a/client/packages/lowcoder/src/assets/icons/icon-login-keycloak.svg b/client/packages/lowcoder/src/assets/icons/icon-login-keycloak.svg new file mode 100644 index 000000000..44798d21c --- /dev/null +++ b/client/packages/lowcoder/src/assets/icons/icon-login-keycloak.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/packages/lowcoder/src/assets/icons/icon-login-ory.svg b/client/packages/lowcoder/src/assets/icons/icon-login-ory.svg new file mode 100644 index 000000000..3ccd8fecf --- /dev/null +++ b/client/packages/lowcoder/src/assets/icons/icon-login-ory.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/client/packages/lowcoder/src/assets/icons/index.ts b/client/packages/lowcoder/src/assets/icons/index.ts index 409292ab7..e52837dc3 100644 --- a/client/packages/lowcoder/src/assets/icons/index.ts +++ b/client/packages/lowcoder/src/assets/icons/index.ts @@ -1,5 +1,7 @@ import GoogleLoginIcon from "./icon-login-google.svg"; import GithubLoginIcon from "./icon-login-github.svg"; +import OryLoginIcon from "./icon-login-ory.svg"; +import KeyCloakLoginIcon from "./icon-login-keycloak.svg"; import GeneralLoginIcon from "./icon-login-general.svg"; import EmailLoginIcon from "./icon-login-email.svg"; @@ -10,4 +12,11 @@ export { ReactComponent as DocIcon } from "./view-doc.svg"; export { ReactComponent as TutorialIcon } from "./tutorial.svg"; export { ReactComponent as ShortcutIcon } from "./icon-help-shortcut.svg"; -export { GoogleLoginIcon, GithubLoginIcon, GeneralLoginIcon, EmailLoginIcon }; +export { + GoogleLoginIcon, + GithubLoginIcon, + OryLoginIcon, + KeyCloakLoginIcon, + GeneralLoginIcon, + EmailLoginIcon +}; diff --git a/client/packages/lowcoder/src/constants/authConstants.ts b/client/packages/lowcoder/src/constants/authConstants.ts index 323615f16..bd92adaa2 100644 --- a/client/packages/lowcoder/src/constants/authConstants.ts +++ b/client/packages/lowcoder/src/constants/authConstants.ts @@ -11,7 +11,13 @@ import Login, { ThirdPartyBindCard } from "pages/userAuth/login"; import UserRegister from "pages/userAuth/register"; import { AuthRedirect } from "pages/userAuth/thirdParty/authRedirect"; import React from "react"; -import { GoogleLoginIcon, GithubLoginIcon, EmailLoginIcon } from "assets/icons"; +import { + GoogleLoginIcon, + GithubLoginIcon, + OryLoginIcon, + KeyCloakLoginIcon, + EmailLoginIcon +} from "assets/icons"; export type AuthInviteInfo = InviteInfo & { invitationId: string }; export type AuthLocationState = { inviteInfo?: AuthInviteInfo; thirdPartyAuthError?: boolean }; @@ -79,7 +85,7 @@ export const AuthRoutes: Array<{ path: string; component: React.ComponentType void; + onConfigCreate: () => void; +}; + +function CreateModal(props: CreateModalProp) { + const { + modalVisible, + oauthProvidersList, + closeModal, + onConfigCreate + } = props; + const [form] = Form.useForm(); + const [saveLoading, setSaveLoading] = useState(false); + + const handleOk = () => { + form.validateFields().then(values => { + console.log(values) + saveAuthProvider(values) + }) + } + function saveAuthProvider(values: ConfigItem) { + setSaveLoading(true); + IdSourceApi.saveConfig(values) + .then((resp) => { + if (validateResponse(resp)) { + messageInstance.success(trans("idSource.saveSuccess")); + } + }) + .catch((e) => messageInstance.error(e.message)) + .finally(() => { + setSaveLoading(false); + onConfigCreate(); + }); + } + + function handleCancel() { + closeModal(); + form.resetFields(); + } + + const authConfigOptions = Object.values(authConfig) + .filter(config => { + return !(oauthProvidersList.indexOf(config.sourceValue) > -1) + }) + .map(config => ({ + label: config.sourceName, + value: config.sourceValue, + })); + + return ( + form.resetFields()} + > + + + + {authConfigOptions.map(config => ( + + + { + {config.value} + } + {config.label} + + + ))} + + + + + + + {"Client secret"}: + + + } + rules={[{ + required: true, + message: trans("idSource.formPlaceholder", { + label: 'Client secret', + }) + }]} + > + + + + {trans("idSource.enableRegister")} + + + + ); +} + +export default CreateModal; diff --git a/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx b/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx index 3682ea487..f9cfc370f 100644 --- a/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx +++ b/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx @@ -6,7 +6,7 @@ import { validateResponse } from "api/apiUtils"; import IdSourceApi from "api/idSourceApi"; import { DangerIcon, CustomModal } from "lowcoder-design"; import history from "util/history"; -import { IDSOURCE_SETTING } from "constants/routesURL"; +import { OAUTH_PROVIDER_SETTING } from "constants/routesURL"; import { messageInstance } from "lowcoder-design"; export const DeleteConfig = (props: { id: string }) => { @@ -21,7 +21,7 @@ export const DeleteConfig = (props: { id: string }) => { .then((resp) => { if (validateResponse(resp)) { messageInstance.success(trans("idSource.disableSuccess"), 0.8, () => - history.push(IDSOURCE_SETTING) + history.push(OAUTH_PROVIDER_SETTING) ); } }) diff --git a/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx index 2b9807f54..c34acaa09 100644 --- a/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx +++ b/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx @@ -12,7 +12,7 @@ import { CloseEyeIcon, } from "lowcoder-design"; import history from "util/history"; -import { IDSOURCE_SETTING } from "constants/routesURL"; +import { OAUTH_PROVIDER_SETTING } from "constants/routesURL"; import { authConfig, AuthType, @@ -59,7 +59,7 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => { }); const configDetail = props.location.state; const goList = () => { - history.push(IDSOURCE_SETTING); + history.push(OAUTH_PROVIDER_SETTING); }; if (!configDetail) { goList(); diff --git a/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts b/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts index eb5053721..a4beb2cc3 100644 --- a/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts +++ b/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts @@ -5,9 +5,17 @@ export enum AuthType { Form = "FORM", Google = "GOOGLE", Github = "GITHUB", + Ory = "ORY", + KeyCloak = "KEYCLOAK", } -export const IdSource = [AuthType.Google, AuthType.Github, AuthType.Form]; +export const IdSource = [ + AuthType.Google, + AuthType.Github, + AuthType.Form, + AuthType.Ory, + AuthType.KeyCloak, +]; export const validatorOptions = []; @@ -22,19 +30,32 @@ export const clientIdandSecretConfig = { export const authConfig = { [AuthType.Form]: { sourceName: trans("idSource.form"), + sourceValue: AuthType.Form, form: {}, }, [AuthType.Github]: { sourceName: "GitHub", + sourceValue: AuthType.Github, form: clientIdandSecretConfig, }, [AuthType.Google]: { sourceName: "Google", + sourceValue: AuthType.Google, form: clientIdandSecretConfig, }, -} as { [key: string]: { sourceName: string; form: FormItemType } }; + [AuthType.Ory]: { + sourceName: "Ory", + sourceValue: AuthType.Ory, + form: clientIdandSecretConfig, + }, + [AuthType.KeyCloak]: { + sourceName: "KeyCloak", + sourceValue: AuthType.KeyCloak, + form: clientIdandSecretConfig, + }, +} as { [key: string]: { sourceName: string; sourceValue: AuthType, form: FormItemType } }; -export const FreeTypes = [AuthType.Google, AuthType.Github, AuthType.Form]; +export const FreeTypes = [AuthType.Google, AuthType.Github, AuthType.Form, AuthType.Ory, AuthType.KeyCloak]; export const authTypeDisabled = (type: AuthType, enableEnterpriseLogin?: boolean) => { return !FreeTypes.includes(type); diff --git a/client/packages/lowcoder/src/pages/setting/idSource/index.tsx b/client/packages/lowcoder/src/pages/setting/idSource/index.tsx index 828792273..c0941a6f6 100644 --- a/client/packages/lowcoder/src/pages/setting/idSource/index.tsx +++ b/client/packages/lowcoder/src/pages/setting/idSource/index.tsx @@ -1,13 +1,13 @@ import { Route, Switch } from "react-router"; import { IdSourceList } from "pages/setting/idSource/list"; import { IdSourceDetail } from "pages/setting/idSource/detail"; -import { IDSOURCE_SETTING, IDSOURCE_DETAIL } from "constants/routesURL"; +import { OAUTH_PROVIDER_SETTING, OAUTH_PROVIDER_DETAIL } from "constants/routesURL"; export const IdSourceHome = () => { return ( - - + + ); }; diff --git a/client/packages/lowcoder/src/pages/setting/idSource/list.tsx b/client/packages/lowcoder/src/pages/setting/idSource/list.tsx index 4bfd06a6f..5f881500e 100644 --- a/client/packages/lowcoder/src/pages/setting/idSource/list.tsx +++ b/client/packages/lowcoder/src/pages/setting/idSource/list.tsx @@ -14,11 +14,15 @@ import { authTypeDisabled, IdSource, } from "@lowcoder-ee/pages/setting/idSource/idSourceConstants"; -import { SpanStyled, StatusSpan, TableStyled } from "pages/setting/idSource/styledComponents"; -import { genQueryId } from "comps/utils/idGenerator"; +import { + SpanStyled, + StatusSpan, + TableStyled, + CreateButton, +} from "pages/setting/idSource/styledComponents"; import FreeLimitTag from "pages/common/freeLimitTag"; import history from "util/history"; -import { IDSOURCE_DETAIL } from "constants/routesURL"; +import { OAUTH_PROVIDER_DETAIL } from "constants/routesURL"; import { selectSystemConfig } from "redux/selectors/configSelectors"; import { isEnterpriseMode, isSelfDomain } from "util/envUtils"; import { Badge } from "antd"; @@ -26,22 +30,28 @@ import { validateResponse } from "api/apiUtils"; import { ServerAuthTypeInfo } from "@lowcoder-ee/constants/authConstants"; import { GeneralLoginIcon } from "assets/icons"; import { FreeTypes } from "pages/setting/idSource/idSourceConstants"; -import { messageInstance } from "lowcoder-design"; +import { messageInstance, AddIcon } from "lowcoder-design"; +import { currentOrgAdmin } from "../../../util/permissionUtils"; +import CreateModal from "./createModal"; +import _ from "lodash"; -export const IdSourceList = () => { +export const IdSourceList = (props: any) => { const user = useSelector(getUser); const config = useSelector(selectSystemConfig); - const orgId = user.currentOrgId; - const [configs, setConfigs] = useState(); + const { currentOrgId} = user; + const [configs, setConfigs] = useState([]); const [fetching, setFetching] = useState(false); + const [modalVisible, setModalVisible] = useState(false); const enableEnterpriseLogin = useSelector(selectSystemConfig)?.featureFlag?.enableEnterpriseLogin; + useEffect(() => { - if (!orgId || (!isSelfDomain(config) && !isEnterpriseMode(config))) { + if (!currentOrgId || (!isSelfDomain(config) && !isEnterpriseMode(config))) { return; } getConfigs(); - }, [orgId]); - if (!orgId || (!isSelfDomain(config) && !isEnterpriseMode(config))) { + }, [currentOrgId]); + + if (!currentOrgId || (!isSelfDomain(config) && !isEnterpriseMode(config))) { return null; } @@ -50,34 +60,12 @@ export const IdSourceList = () => { IdSourceApi.getConfigs() .then((resp) => { if (validateResponse(resp)) { - const res: ConfigItem[] = resp.data.data.filter((item: ConfigItem) => + let res: ConfigItem[] = resp.data.data.filter((item: ConfigItem) => IdSource.includes(item.authType) ); - const data = IdSource.map((item: AuthType) => { - const config = res.find((config) => config.authType === item); - if (config) { - return config; - } else { - const form: { [key: string]: string | undefined } = {}; - Object.keys(authConfig[item].form).forEach((key: string) => { - form[key] = - key === "source" || key === "sourceName" - ? item - : key === "authServerId" - ? "default" - : undefined; - }); - return { - authType: item, - enable: false, - ifLocal: true, - id: genQueryId(), - enableRegister: true, - ...form, - }; - } - }); - setConfigs(data); + res = _.uniqBy(res, 'authType'); + console.log(res) + setConfigs(res); } }) .catch((e) => { @@ -89,70 +77,94 @@ export const IdSourceList = () => { }; return ( - - {trans("idSource.title")} - { - return authTypeDisabled((record as ConfigItem).authType, enableEnterpriseLogin) - ? "row-disabled" - : ""; - }} - onRow={(record) => ({ - onClick: () => { - if (authTypeDisabled((record as ConfigItem).authType, enableEnterpriseLogin)) { - return; - } - history.push({ - pathname: IDSOURCE_DETAIL, - state: record, - }); - }, - })} - > - ( - - { - {value} + <> + + + {trans("idSource.title")} + {currentOrgAdmin(user) && ( + } + onClick={() => + setModalVisible(true) } - {authConfig[value as AuthType].sourceName} - {!FreeTypes.includes(value) && ( - - )} - + > + {"Add OAuth Provider"} + )} - /> - ( - - {value ? ( - - ) : ( - - )} - - )} - /> - - + + { + return authTypeDisabled((record as ConfigItem).authType, enableEnterpriseLogin) + ? "row-disabled" + : ""; + }} + onRow={(record) => ({ + onClick: () => { + if (authTypeDisabled((record as ConfigItem).authType, enableEnterpriseLogin)) { + return; + } + history.push({ + pathname: OAUTH_PROVIDER_DETAIL, + state: record, + }); + }, + })} + > + ( + + { + {value} + } + {authConfig[value as AuthType].sourceName} + {!FreeTypes.includes(value) && ( + + )} + + )} + /> + ( + + {value ? ( + + ) : ( + + )} + + )} + /> + + + config.authType)} + closeModal={() => setModalVisible(false)} + onConfigCreate={() => { + setModalVisible(false); + getConfigs(); + }} + /> + ); }; diff --git a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx index fdb62ac9a..ee41f0b6a 100644 --- a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx +++ b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx @@ -299,3 +299,30 @@ export const StatusSpan = styled.span` color: #8b8fa3; } `; + +export const CreateButton = styled(Button)` + background-color: #4965f2; + display: flex; + align-items: center; + justify-content: center; + padding: 4px 8px; + font-size: 13px; + border: 1px solid #4965f2; + box-shadow: none; + &.ant-btn-primary:hover, + &.ant-btn-primary:focus { + background: #315efb; + border-color: #315efb; + } + &:disabled, + &:disabled:hover { + background: #dbe1fd; + color: #ffffff; + border-color: #dbe1fd; + } + svg { + margin-right: 2px; + width: 12px; + height: 12px; + } +`; diff --git a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx index c2f2a1425..4bf28dde5 100644 --- a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx +++ b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx @@ -72,7 +72,7 @@ function GroupUsersPermission(props: GroupPermissionProp) { <> - history.push(PERMISSION_SETTING)}>{trans("settings.member")} + history.push(PERMISSION_SETTING)}>{trans("settings.userGroups")} {isGroupAdmin(currentUserGroupRole) && !group.devGroup ? ( {group.groupName} diff --git a/client/packages/lowcoder/src/pages/setting/permission/orgUsersPermission.tsx b/client/packages/lowcoder/src/pages/setting/permission/orgUsersPermission.tsx index 50f9659a9..4fba28d1b 100644 --- a/client/packages/lowcoder/src/pages/setting/permission/orgUsersPermission.tsx +++ b/client/packages/lowcoder/src/pages/setting/permission/orgUsersPermission.tsx @@ -130,7 +130,7 @@ function OrgUsersPermission(props: UsersPermissionProp) { <> - history.push(PERMISSION_SETTING)}>{trans("settings.member")} + history.push(PERMISSION_SETTING)}>{trans("settings.userGroups")} {trans("memberSettings.allMembers")} diff --git a/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx b/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx index c26591618..30216a16a 100644 --- a/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx +++ b/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx @@ -118,7 +118,7 @@ export default function PermissionSetting() { return ( - {trans("settings.member")} + {trans("settings.userGroups")} {currentOrgAdmin(user) && ( ().setting || SettingPageEnum.Member; + const selectKey = useParams<{ setting: string }>().setting || SettingPageEnum.UserGroups; const items = [ { - key: SettingPageEnum.Member, - label: trans("settings.member"), + key: SettingPageEnum.UserGroups, + label: trans("settings.userGroups"), }, { key: SettingPageEnum.Organization, label: trans("settings.organization"), }, { - key: SettingPageEnum.IdSource, + key: SettingPageEnum.Theme, + label: trans("settings.theme"), + }, + { + key: SettingPageEnum.OAuthProvider, label: ( - {trans("settings.idSource")} + {trans("settings.oauthProviders")} {(!currentOrgAdmin(user) || (!isSelfDomain(config) && !isEnterpriseMode(config))) && ( )} @@ -55,6 +61,26 @@ export function SettingHome() { ), disabled: !currentOrgAdmin(user) || (!isSelfDomain(config) && !isEnterpriseMode(config)), }, + { + key: SettingPageEnum.Environments, + label: ( + + {trans("settings.environments")} + + + ), + disabled: true, + }, + { + key: SettingPageEnum.AppUsage, + label: ( + + {trans("settings.appUsage")} + + + ), + disabled: true, + }, { key: SettingPageEnum.Audit, label: ( @@ -67,10 +93,6 @@ export function SettingHome() { ), disabled: !showAuditLog(config) || !currentOrgAdmin(user), }, - { - key: SettingPageEnum.Theme, - label: trans("settings.theme"), - }, { key: SettingPageEnum.Branding, label: ( @@ -108,13 +130,13 @@ export function SettingHome() { items={items} /> - {selectKey === SettingPageEnum.Member && } + {selectKey === SettingPageEnum.UserGroups && } {selectKey === SettingPageEnum.Organization && } - {selectKey === SettingPageEnum.Audit && } {selectKey === SettingPageEnum.Theme && } + {selectKey === SettingPageEnum.OAuthProvider && } + {selectKey === SettingPageEnum.Audit && } {selectKey === SettingPageEnum.Branding && } {selectKey === SettingPageEnum.Advanced && } - {selectKey === SettingPageEnum.IdSource && } ); } diff --git a/client/packages/lowcoder/src/pages/setting/styled.tsx b/client/packages/lowcoder/src/pages/setting/styled.tsx index 3b05582e4..06f951857 100644 --- a/client/packages/lowcoder/src/pages/setting/styled.tsx +++ b/client/packages/lowcoder/src/pages/setting/styled.tsx @@ -1,5 +1,5 @@ import { GreyTextColor } from "constants/style"; -import { TacoButton } from "lowcoder-design"; +import { TacoButton, CustomModal, TacoInput } from "lowcoder-design"; import styled from "styled-components"; export const TwoColumnSettingPageContent = styled.div` @@ -58,3 +58,32 @@ export const SettingContent = styled.div` export const SaveButton = styled(TacoButton)` min-width: 76px; `; + +export const ModalNameDiv = styled.div` + display: flex; + align-items: center; + padding: 3.5px 0; + svg { + margin-right: 4px; + } +`; + +export const CustomModalStyled = styled(CustomModal)` + button { + margin-top: 20px; + } +`; + +export const TacoInputStyled = styled(TacoInput)` + margin-bottom: 5px; + height: 32px; + > input { + height: 100%; + } + .ant-input-suffix { + color: #999; + } + &.exceed .input-length { + color: #f73131; + } +`; From f2ae2de6bd2b5a0f7fe066de49d545c3d6101f34 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 2 Nov 2023 22:22:52 +0500 Subject: [PATCH 2/2] feat: instanceId, realm, scope added for ORY/KeyCloak --- .../pages/setting/idSource/createModal.tsx | 76 ++++++++++++++++--- .../pages/setting/idSource/detail/index.tsx | 4 +- .../setting/idSource/idSourceConstants.ts | 13 +++- .../src/pages/setting/idSource/list.tsx | 1 - 4 files changed, 80 insertions(+), 14 deletions(-) diff --git a/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx b/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx index 88c799fe8..4846dc9fa 100644 --- a/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx +++ b/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { messageInstance, CustomSelect, CloseEyeIcon } from "lowcoder-design"; import { CustomModalStyled, @@ -10,12 +10,13 @@ import { SpanStyled, PasswordLabel } from "./styledComponents"; -import { Form, Input, Select } from "antd"; +import { Form, Input, Select, Tooltip } from "antd"; import IdSourceApi, { ConfigItem } from "api/idSourceApi"; import { validateResponse } from "api/apiUtils"; -import { authConfig, AuthType } from "./idSourceConstants"; +import { authConfig, AuthType, clientIdandSecretConfig, ItemType } from "./idSourceConstants"; import { ServerAuthTypeInfo } from "constants/authConstants"; import { GeneralLoginIcon } from "assets/icons"; +import _ from "lodash"; type CreateModalProp = { modalVisible: boolean; @@ -42,7 +43,11 @@ function CreateModal(props: CreateModalProp) { } function saveAuthProvider(values: ConfigItem) { setSaveLoading(true); - IdSourceApi.saveConfig(values) + const config = { + ...values, + enableRegister: true, + } + IdSourceApi.saveConfig(config) .then((resp) => { if (validateResponse(resp)) { messageInstance.success(trans("idSource.saveSuccess")); @@ -69,6 +74,13 @@ function CreateModal(props: CreateModalProp) { value: config.sourceValue, })); + const selectedAuthType = Form.useWatch('authType', form);; + + const authConfigForm = useMemo(() => { + if(!authConfig[selectedAuthType]) return clientIdandSecretConfig; + return authConfig[selectedAuthType].form; + }, [selectedAuthType]) + return ( - { + const valueObject = _.isObject(value) ? (value as ItemType) : false; + const required = true; + const label = valueObject ? valueObject.label : value; + const tip = valueObject && valueObject.tip; + const isPassword = valueObject && valueObject.isPassword; + return ( +
+ + {label}: + + + ) : ( + + {label}: + + ) + } + > + {isPassword ? ( + + ) : ( + + )} + +
+ ); + })} + {/* - - - {trans("idSource.enableRegister")} - + */} ); diff --git a/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx index c34acaa09..80b3fd244 100644 --- a/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx +++ b/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx @@ -231,9 +231,9 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => { ); })} - + {/* {trans("idSource.enableRegister")} - + */} diff --git a/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts b/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts index a4beb2cc3..d4b09e173 100644 --- a/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts +++ b/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts @@ -46,12 +46,21 @@ export const authConfig = { [AuthType.Ory]: { sourceName: "Ory", sourceValue: AuthType.Ory, - form: clientIdandSecretConfig, + form: { + ...clientIdandSecretConfig, + instanceId: "Instance ID", + scope: "Scope", + }, }, [AuthType.KeyCloak]: { sourceName: "KeyCloak", sourceValue: AuthType.KeyCloak, - form: clientIdandSecretConfig, + form: { + ...clientIdandSecretConfig, + instanceId: "Instance ID", + realm: "Realm", + scope: "Scope", + }, }, } as { [key: string]: { sourceName: string; sourceValue: AuthType, form: FormItemType } }; diff --git a/client/packages/lowcoder/src/pages/setting/idSource/list.tsx b/client/packages/lowcoder/src/pages/setting/idSource/list.tsx index 5f881500e..dedca4d34 100644 --- a/client/packages/lowcoder/src/pages/setting/idSource/list.tsx +++ b/client/packages/lowcoder/src/pages/setting/idSource/list.tsx @@ -64,7 +64,6 @@ export const IdSourceList = (props: any) => { IdSource.includes(item.authType) ); res = _.uniqBy(res, 'authType'); - console.log(res) setConfigs(res); } })