Merge branch 'dev' into main

Author: FalkWolsky

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

@@ -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
+};

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

@@ -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,15 +85,26 @@ export const AuthRoutes: Array<{ path: string; component: React.ComponentType<an
   { path: ORG_AUTH_REGISTER_URL, component: UserRegister },
 ];
 
-export type ServerAuthType = "GOOGLE" | "GITHUB" | "FORM";
+export type ServerAuthType = "GOOGLE" | "GITHUB" | "FORM" | "KEYCLOAK" | "ORY";
 
 export type ServerAuthTypeInfoValueType = { logo: string; isOAuth2?: boolean };
 export const ServerAuthTypeInfo: { [key in ServerAuthType]?: ServerAuthTypeInfoValueType } = {
   GOOGLE: {
     logo: GoogleLoginIcon,
     isOAuth2: true,
   },
-  GITHUB: { logo: GithubLoginIcon, isOAuth2: true },
+  GITHUB: {
+    logo: GithubLoginIcon,
+    isOAuth2: true
+  },
+  KEYCLOAK: {
+    logo: KeyCloakLoginIcon,
+    isOAuth2: true
+  },
+  ORY: {
+    logo: OryLoginIcon,
+    isOAuth2: true
+  },
   FORM: { logo: EmailLoginIcon },
 };
 

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

@@ -13,8 +13,8 @@ export const THEME_SETTING = "/setting/theme";
 export const PLUGINS_SETTING = "/setting/plugins";
 export const THEME_DETAIL = "/setting/theme/detail";
 
-export const IDSOURCE_SETTING = "/setting/idsource";
-export const IDSOURCE_DETAIL = "/setting/idsource/detail";
+export const OAUTH_PROVIDER_SETTING = "/setting/oauth-provider";
+export const OAUTH_PROVIDER_DETAIL = "/setting/oauth-provider/detail";
 
 export const PERMISSION_SETTING_DETAIL = `${PERMISSION_SETTING}/:groupId`;
 export const ORGANIZATION_SETTING_DETAIL = `${ORGANIZATION_SETTING}/:orgId`;

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

@@ -1487,15 +1487,17 @@ export const en = {
   },
   settings: {
     title: "Settings",
-    member: "Members",
+    userGroups: "User Groups",
     organization: "Workspaces",
     audit: "Audit Logs",
     theme: "Themes",
     plugin: "Plugins",
     advanced: "Advanced",
     lab: "Lab",
     branding: "Branding",
-    idSource: "ID Providers",
+    oauthProviders: "OAuth Providers",
+    appUsage: "App Usage Logs",
+    environments: "Environments",
     premium: "Premium",
   },
   memberSettings: {
@@ -2544,7 +2546,7 @@ export const en = {
     table,
   },
   idSource: {
-    title: "ID Providers",
+    title: "OAuth Providers",
     form: "Email",
     pay: "Premium",
     enable: "Enable",

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

@@ -1367,15 +1367,17 @@ drawer: {
 },
 settings: {
     title: "设置",
-    member: "成员",
+    userGroups: "用户组",
     organization: "工作空间",
     audit: "审计日志",
     theme: "主题",
     plugin: "插件",
     advanced: "高级",
     lab: "实验室",
     branding: "品牌",
-    idSource: "登录方式",
+    oauthProviders: "OAuth 提供商",
+    appUsage: "应用程序使用日志",
+    environments: "环境",
     premium: "高级版",
 },
 memberSettings: {
@@ -2408,7 +2410,7 @@ componentDocExtra: {
     table,
 },
 idSource: {
-    title: "登录方式",
+    title: "OAuth 提供商",
     form: "电子邮件",
     pay: "高级",
     enable: "启用",

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

@@ -0,0 +1,217 @@
+import { useEffect, useMemo, useState } from "react";
+import { messageInstance, CustomSelect, CloseEyeIcon } from "lowcoder-design";
+import {
+  CustomModalStyled,
+} from "../styled";
+import { trans } from "i18n";
+import {
+  FormStyled,
+  CheckboxStyled,
+  SpanStyled,
+  PasswordLabel
+} from "./styledComponents";
+import { Form, Input, Select, Tooltip } from "antd";
+import IdSourceApi, { ConfigItem } from "api/idSourceApi";
+import { validateResponse } from "api/apiUtils";
+import { authConfig, AuthType, clientIdandSecretConfig, ItemType } from "./idSourceConstants";
+import { ServerAuthTypeInfo } from "constants/authConstants";
+import { GeneralLoginIcon } from "assets/icons";
+import _ from "lodash";
+
+type CreateModalProp = {
+  modalVisible: boolean;
+  oauthProvidersList: AuthType[],
+  closeModal: () => 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);
+    const config = {
+      ...values,
+      enableRegister: true,
+    }
+    IdSourceApi.saveConfig(config)
+      .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,
+    }));
+
+  const selectedAuthType = Form.useWatch('authType', form);;
+
+  const authConfigForm = useMemo(() => {
+    if(!authConfig[selectedAuthType]) return clientIdandSecretConfig;
+    return authConfig[selectedAuthType].form;
+  }, [selectedAuthType])
+
+  return (
+    <CustomModalStyled
+      width="500px"
+      title={"Add OAuth Provider"}
+      open={modalVisible}
+      okText={"Save and Enable"}
+      okButtonProps={{
+        loading: saveLoading
+      }}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      destroyOnClose
+      afterClose={() => form.resetFields()}
+    >
+      <FormStyled
+        form={form}
+        name="basic"
+        layout="vertical"
+        style={{ maxWidth: 440 }}
+        autoComplete="off"
+      >
+        <Form.Item
+          name="authType"
+          label="Auth Type"
+          rules={[{ required: true }]}
+        >
+          <CustomSelect
+            placeholder={trans("idSource.formSelectPlaceholder", {
+              label: 'Auth Type',
+            })}
+          >
+            {authConfigOptions.map(config => (
+              <Select.Option key={config.value} value={config.value}>
+                <SpanStyled disabled={false}>
+                  {
+                    <img
+                      src={ServerAuthTypeInfo[config.value]?.logo || GeneralLoginIcon}
+                      alt={config.value}
+                    />
+                  }
+                  <span>{config.label}</span>
+                </SpanStyled>
+              </Select.Option>
+            ))}
+          </CustomSelect>
+        </Form.Item>
+        {Object.entries(authConfigForm).map(([key, value]) => {
+          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 (
+            <div key={key}>
+              <Form.Item
+                key={key}
+                name={key}
+                rules={[
+                  {
+                    required,
+                    message: trans("idSource.formPlaceholder", {
+                      label,
+                    }),
+                  },
+                ]}
+                label={
+                  isPassword ? (
+                    <PasswordLabel>
+                      <span>{label}:</span>
+                      <CloseEyeIcon />
+                    </PasswordLabel>
+                  ) : (
+                    <Tooltip title={tip}>
+                      <span className={tip ? "has-tip" : ""}>{label}</span>:
+                    </Tooltip>
+                  )
+                }
+              >
+                {isPassword ? (
+                  <Input
+                    type={"password"}
+                    placeholder={trans("idSource.encryptedServer")}
+                    autoComplete={"one-time-code"}
+                  />
+                ) : (
+                  <Input
+                    placeholder={trans("idSource.formPlaceholder", {
+                      label,
+                    })}
+                  />
+                )}
+              </Form.Item>
+            </div>
+          );
+        })}
+        {/* <Form.Item
+          name="clientId"
+          label="Client ID"
+          rules={[{ required: true }]}
+        >
+          <Input
+            placeholder={trans("idSource.formPlaceholder", {
+              label: 'Client ID',
+            })}
+            autoComplete="off"
+          />
+        </Form.Item>
+        <Form.Item
+          name="clientSecret"
+          label={
+            <PasswordLabel>
+              <span>{"Client secret"}:</span>
+              <CloseEyeIcon />
+            </PasswordLabel>
+          }
+          rules={[{
+            required: true,
+            message: trans("idSource.formPlaceholder", {
+              label: 'Client secret',
+            })
+          }]}
+        >
+          <Input
+            type="password"
+            placeholder={trans("idSource.encryptedServer")}
+            autoComplete="off"
+          />
+        </Form.Item> */}
+      </FormStyled>
+    </CustomModalStyled>
+  );
+}
+
+export default CreateModal;

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

@@ -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)
               );
             }
           })