Merge pull request #860 from raheeliftikhar5/generic-oauth-updates

Generic oauth fixes/updates

Author: FalkWolsky

client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx

@@ -145,7 +145,7 @@ export const UICompPanel = () => {
   const compList = useMemo(
     () =>
       Object.entries(categories)
-        .filter(([key]) => !(!isEmpty(searchValue) && (key as UICompCategory) === "dashboards"))
+        // .filter(([key]) => !(!isEmpty(searchValue) && (key as UICompCategory) === "dashboards"))
         .map(([key, value], index) => {
           let infos = value;
           if (!isEmpty(searchValue)) {

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { messageInstance, CloseEyeIcon } from "lowcoder-design";
+import { messageInstance, CloseEyeIcon, CustomSelect } from "lowcoder-design";
 import { i18nObjs, trans } from "i18n";
 import {
   FormStyled,
@@ -107,7 +107,7 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
       setSaveLoading(true);
       const { issuer } = values;
       try {
-        const res = await axios.get<OpenIdProvider>(`${issuer}/.well-known/openid-configuration`);
+        const res = await axios.get<OpenIdProvider>(issuer);
         setIssuerDetails(() => {
           const issuer = {
             authType: AuthType.Generic,
@@ -155,7 +155,6 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
           }
         };
         saveAuthProvider(updatedDetails);
-        console.log('save details', updatedDetails);
         return updatedDetails;
       });
     })
@@ -189,6 +188,7 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
         current={currentStep}
         items={steps}
         style={{marginBottom: '16px'}}
+        onChange={(current) => setCurrentStep(current)}
       />
 
       <FormStyled
@@ -213,11 +213,13 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
         )}
         {currentStep === 1 && Object.entries(authConfigForm).map(([key, value]) => {
           const valueObject = _.isObject(value) ? (value as ItemType) : false;
-          const required = true;
+          let required = (key === "clientId" || key === "clientSecret" || key === "scope");
+          required = valueObject ? valueObject.isRequire ?? required : required;
           const label = valueObject ? valueObject.label : value as string;
           const tip = valueObject && valueObject.tip;
           const isPassword = valueObject && valueObject.isPassword;
           const isIcon = valueObject && valueObject.isIcon;
+          const isList = valueObject && valueObject.isList;
           return (
             <div key={key}>
               <Form.Item
@@ -250,12 +252,19 @@ function GenericOAuthForm(props: GenericOAuthFormProp) {
                     placeholder={trans("idSource.encryptedServer")}
                     autoComplete={"one-time-code"}
                   />
-                ) : isIcon ? (
+                ) : !isPassword && !isList && isIcon ? (
                   <IconPicker
                     onChange={(value) => form1.setFieldValue("sourceIcon", value)}
                     label={'Source Icon'}
                     value={form1.getFieldValue('sourceIcon')}
                   />
+                ) : !isPassword && isList && !isIcon ? (
+                  <CustomSelect
+                    options={(value as ItemType).options}
+                    placeholder={trans("idSource.formSelectPlaceholder", {
+                      label,
+                    })}
+                  />
                 ) : (
                   <Input
                     placeholder={trans("idSource.formPlaceholder", {

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

@@ -19,6 +19,26 @@ export const IdSource = [
   AuthType.Generic,
 ];
 
+export enum AuthCategoriesEnum {
+  ENTERPISE_ENTITY = "Enterprise Identity",
+  CLOUD_SERVICES = "Cloud Services",
+  SOCIAL_MEDIA = "Social Media",
+  DEVELOPMENT = "Development",
+  TOOLS_AND_PRODUCTIVITY = "Tools & Productivity",
+}
+
+type AuthCategoriesEnumKey = keyof typeof AuthCategoriesEnum;
+const AuthCategories = Object.keys(AuthCategoriesEnum).map(
+  (cat) => {
+    const value = AuthCategoriesEnum[cat as AuthCategoriesEnumKey];
+    return {
+      label: value,
+      value: cat
+    }
+  }
+);
+
+
 export const validatorOptions = [];
 
 export const clientIdandSecretConfig = {
@@ -70,15 +90,15 @@ export const authConfig = {
     form: {
       source: { label: "Source", isRequire: true },
       sourceName: { label: "Source Name", isRequire: true },
-      sourceDescription: { label: "Source Description" },
-      sourceIcon: { label: "Source Icon", isIcon: true },
-      sourceCategory: { label: "Source Category" },
+      sourceDescription: { label: "Source Description", isRequire: false },
+      sourceIcon: { label: "Source Icon", isIcon: true, isRequire: true, },
+      sourceCategory: { label: "Source Category", isRequire: true, isList: true, options: AuthCategories },
       ...clientIdandSecretConfig,
-      issuer: { label: 'Issuer URI', isRequired: true },
-      authorizationEndpoint: { label: 'Authorization Endpoint', isRequired: true },
-      tokenEndpoint: { label: 'Token Endpoint', isRequired: true },
-      userInfoEndpoint: { label: 'UserInfo Endpoint', isRequired: true },
-      // jwks: { label: 'Authorize URL', isRequired: true },
+      issuer: { label: 'Issuer URI', isRequire: true },
+      authorizationEndpoint: { label: 'Authorization Endpoint', isRequire: true },
+      tokenEndpoint: { label: 'Token Endpoint', isRequire: true },
+      userInfoEndpoint: { label: 'UserInfo Endpoint', isRequire: true },
+      // jwks: { label: 'Authorize URL', isRequire: true },
       scope: "Scope",
       // baseUrl: "Base URL",
       // realm: "Realm",