feat: instanceId, realm, scope added for ORY/KeyCloak

Author: raheeliftikhar5

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 (
     <CustomModalStyled
       width="500px"
@@ -115,7 +127,56 @@ function CreateModal(props: CreateModalProp) {
             ))}
           </CustomSelect>
         </Form.Item>
-        <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 }]}
@@ -147,10 +208,7 @@ function CreateModal(props: CreateModalProp) {
             placeholder={trans("idSource.encryptedServer")}
             autoComplete="off"
           />
-        </Form.Item>
-        <Form.Item className="register" name="enableRegister" valuePropName="checked">
-          <CheckboxStyled>{trans("idSource.enableRegister")}</CheckboxStyled>
-        </Form.Item>
+        </Form.Item> */}
       </FormStyled>
     </CustomModalStyled>
   );

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

@@ -231,9 +231,9 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
               </div>
             );
           })}
-          <Form.Item className="register" name="enableRegister" valuePropName="checked">
+          {/* <Form.Item className="register" name="enableRegister" valuePropName="checked">
             <CheckboxStyled>{trans("idSource.enableRegister")}</CheckboxStyled>
-          </Form.Item>
+          </Form.Item> */}
 
           <Form.Item>
             <SaveButton loading={saveLoading} disabled={saveDisable} htmlType="submit">

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

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