Merge pull request #872 from raheeliftikhar5/generic-oauth-updates-2

show source mappings in generic auth edit mode

Author: FalkWolsky

client/packages/lowcoder/src/pages/setting/idSource/OAuthForms/GenericOAuthForm.tsx

@@ -17,8 +17,9 @@ import Flex from "antd/es/flex";
 import Button from "antd/es/button";
 import axios from "axios";
 import { IconPicker } from "@lowcoder-ee/comps/controls/iconControl";
+import Switch from "antd/es/switch";
 
-const sourceMappingKeys = [
+export const sourceMappingKeys = [
   'uid',
   'email',
   'username',
@@ -49,7 +50,7 @@ interface OpenIdProvider {
   scopes_supported: string[],
 }
 
-interface ConfigProvider {
+export interface ConfigProvider {
   authType: string,
   source: string,
   sourceName: string,
@@ -223,6 +224,7 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
           const isPassword = valueObject && valueObject.isPassword;
           const isIcon = valueObject && valueObject.isIcon;
           const isList = valueObject && valueObject.isList;
+          const isSwitch = valueObject && valueObject.isSwitch;
           return (
             <div key={key}>
               <Form.Item
@@ -255,13 +257,15 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
                     placeholder={trans("idSource.encryptedServer")}
                     autoComplete={"one-time-code"}
                   />
-                ) : !isPassword && !isList && isIcon ? (
+                ) : isSwitch ? (
+                  <Switch />
+                ) : isIcon ? (
                   <IconPicker
                     onChange={(value) => form1.setFieldValue("sourceIcon", value)}
                     label={'Source Icon'}
                     value={form1.getFieldValue('sourceIcon')}
                   />
-                ) : !isPassword && isList && !isIcon ? (
+                ) : isList ? (
                   <CustomSelect
                     options={(value as ItemType).options}
                     placeholder={trans("idSource.formSelectPlaceholder", {

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

@@ -38,6 +38,10 @@ import { ItemType } from "pages/setting/idSource/idSourceConstants";
 import _ from "lodash";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { IconPicker } from "@lowcoder-ee/comps/controls/iconControl";
+import Switch from "antd/es/switch";
+import Title from "antd/es/typography/Title";
+import { sourceMappingKeys } from "../OAuthForms/GenericOAuthForm";
+import Flex from "antd/es/flex";
 
 type IdSourceDetailProps = {
   location: Location & { state: ConfigItem };
@@ -68,13 +72,32 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
   if (!configDetail) {
     goList();
   }
-  const handleSuccess = (values: ConfigItem) => {
+  const handleSuccess = (values: any) => {
     setSaveLoading(true);
-    const params = {
-      ...values,
-      ...(configDetail.ifLocal ? null : { id: configDetail.id }),
+    let params = {
+      id: configDetail.id,
       authType: configDetail.authType,
+      enableRegister: configDetail.enableRegister,
     };
+
+    if (configDetail.authType === AuthType.Generic) {
+      const { uid, email, avatar, username, ...newValues } = values;
+      params = {
+        ...newValues,
+        sourceMappings: {
+          uid,
+          email,
+          avatar,
+          username,
+        },
+        ...params,
+      }
+    } else {
+      params = {
+        ...values,
+        ...params,
+      }
+    }
     IdSourceApi.saveConfig(params)
       .then((resp) => {
         if (validateResponse(resp)) {
@@ -157,14 +180,16 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
         >
           {Object.entries(authConfig[configDetail.authType].form).map(([key, value]) => {
             const valueObject = _.isObject(value) ? (value as ItemType) : false;
-            let required = configDetail.ifLocal || (key !== "clientSecret" && key !== "publicKey");
+            // let required = configDetail.ifLocal || (key !== "clientSecret" && key !== "publicKey");
+            let required = (key === "clientId" || key === "clientSecret" || key === "scope");
             required = valueObject ? valueObject.isRequire ?? required : required;
             const hasLock = valueObject && valueObject?.hasLock;
             const tip = valueObject && valueObject.tip;
             const label = valueObject ? valueObject.label : value as string;
             const isList = valueObject && valueObject.isList;
             const isPassword = valueObject && valueObject.isPassword;
             const isIcon = valueObject && valueObject.isIcon;
+            const isSwitch = valueObject && valueObject.isSwitch;
             return (
               <div key={key}>
                 <Form.Item
@@ -208,30 +233,32 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
                       }
                       autoComplete={"one-time-code"}
                     />
-                  ) : !isPassword && !isList && !isIcon ? (
-                    <Input
-                      placeholder={trans("idSource.formPlaceholder", {
-                        label,
-                      })}
-                      disabled={hasLock && lock}
-                      prefix={
-                        hasLock &&
-                        (lock ? <LockIcon onClick={() => handleLockClick()} /> : <UnLockIcon />)
-                      }
-                    />
-                  ) : !isPassword && !isList && isIcon ? (
+                  ) : isSwitch ? (
+                    <Switch />
+                  ) : isIcon ? (
                     <IconPicker
                       onChange={(value) => form.setFieldValue("sourceIcon", value)}
                       label={'Source Icon'}
                       value={form.getFieldValue('sourceIcon')}
                     />
-                  ) : (
+                  ) : isList ? (
                     <CustomSelect
                       options={(value as ItemType).options}
                       placeholder={trans("idSource.formSelectPlaceholder", {
                         label,
                       })}
                     />
+                  ) : (
+                    <Input
+                      placeholder={trans("idSource.formPlaceholder", {
+                        label,
+                      })}
+                      disabled={hasLock && lock}
+                      prefix={
+                        hasLock &&
+                        (lock ? <LockIcon onClick={() => handleLockClick()} /> : <UnLockIcon />)
+                      }
+                    />
                   )}
                 </Form.Item>
                 {hasLock && lock && (
@@ -246,6 +273,34 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
             <CheckboxStyled>{trans("idSource.enableRegister")}</CheckboxStyled>
           </Form.Item> */}
 
+          {configDetail.authType === AuthType.Generic &&  (
+            <>
+              <Title level={5}>Source Mappings</Title>
+              {sourceMappingKeys.map(sourceKey => (
+                <Flex gap="10px" align="start" key={sourceKey} >
+                  <Input
+                    readOnly
+                    disabled
+                    value={sourceKey}
+                    style={{flex: 1}}
+                  />
+                  <span> &#8594; </span>
+                  <Form.Item
+                    name={sourceKey}
+                    rules={[{ required: true }]}
+                    style={{flex: 1}}
+                  >
+                    <Input
+                      placeholder={trans("idSource.formPlaceholder", {
+                        label: sourceKey,
+                      })}
+                    />
+                  </Form.Item>
+                </Flex>
+              ))}
+            </>
+          )}
+
           <Form.Item>
             <SaveButton loading={saveLoading} disabled={saveDisable} htmlType="submit">
               {configDetail.enable ? trans("idSource.save") : trans("idSource.saveBtn")}

client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts

@@ -100,6 +100,7 @@ export const authConfig = {
       userInfoEndpoint: { label: 'UserInfo Endpoint', isRequire: true },
       // jwks: { label: 'Authorize URL', isRequire: true },
       scope: "Scope",
+      userInfoIntrospection: { label: 'Use OpenID User Introspection', isSwitch: true, isRequire: false},
       // baseUrl: "Base URL",
       // realm: "Realm",
     },
@@ -126,6 +127,7 @@ export type ItemType = {
   isRequire?: boolean;
   isPassword?: boolean;
   isIcon?: boolean;
+  isSwitch?: boolean;
   hasLock?: boolean;
   tip?: string;
 }