User API Keys

client/packages/lowcoder/src/api/userApi.ts

@@ -38,6 +38,20 @@ export interface GetUserResponse extends ApiResponse {
   } & BaseUserInfo;
 }
 
+export interface ApiKeyPayload {
+  name: string;
+  description?: string;
+}
+
+export interface FetchApiKeysResponse extends ApiResponse {
+  data: {
+    id: string;
+    name: string;
+    description: string;
+    token: string;
+  }
+}
+
 export type GetCurrentUserResponse = GenericApiResponse<CurrentUser>;
 
 class UserApi extends Api {
@@ -55,6 +69,9 @@ class UserApi extends Api {
   static markUserStatusURL = "/users/mark-status";
   static userDetailURL = (id: string) => `/users/userDetail/${id}`;
   static resetPasswordURL = `/users/reset-password`;
+  static fetchApiKeysURL = `/auth/api-keys`;
+  static createApiKeyURL = `/auth/api-key`;
+  static deleteApiKeyURL = (id: string) => `/auth/api-key/${id}`;
 
   static thirdPartyLogin(
     request: ThirdPartyAuthRequest & CommonLoginParam
@@ -120,6 +137,24 @@ class UserApi extends Api {
   static resetPassword(userId: string): AxiosPromise<ApiResponse> {
     return Api.post(UserApi.resetPasswordURL, { userId: userId });
   }
+
+  static createApiKey({
+    name,
+    description = ''
+  }: ApiKeyPayload): AxiosPromise<ApiResponse> {
+    return Api.post(UserApi.createApiKeyURL, {
+      name,
+      description
+    });
+  }
+
+  static fetchApiKeys(): AxiosPromise<ApiResponse> {
+    return Api.get(UserApi.fetchApiKeysURL);
+  }
+
+  static deleteApiKey(apiKeyId: string): AxiosPromise<ApiResponse> {
+    return Api.delete(UserApi.deleteApiKeyURL(apiKeyId));
+  }
 }
 
 export default UserApi;

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

@@ -7,6 +7,9 @@ export const ReduxActionTypes = {
   FETCH_CURRENT_USER_SUCCESS: "FETCH_CURRENT_USER_SUCCESS",
   FETCH_RAW_CURRENT_USER: "FETCH_RAW_CURRENT_USER",
   FETCH_RAW_CURRENT_USER_SUCCESS: "FETCH_RAW_CURRENT_USER_SUCCESS",
+  FETCH_API_KEYS: "FETCH_API_KEYS",
+  FETCH_API_KEYS_SUCCESS: "FETCH_API_KEYS_SUCCESS",
+
 
   /* plugin RELATED */
   FETCH_DATA_SOURCE_TYPES: "FETCH_DATA_SOURCE_TYPES",

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

@@ -83,4 +83,11 @@ export const defaultCurrentUser: CurrentUser = {
   extra: {},
 };
 
+export type ApiKey = {
+  id: string;
+  name: string;
+  description: string;
+  token: string;
+}
+
 export type UserStatusType = keyof BaseUserInfo["userStatus"];

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

@@ -2261,7 +2261,15 @@ export const de: typeof en = {
       "createdApps": "Erstellte Apps",
       "createdModules": "Erstellte Module",
       "onMarketplace": "Auf dem Marktplatz",
-      "howToPublish": "So veröffentlichen Sie auf dem Marktplatz"
+      "howToPublish": "So veröffentlichen Sie auf dem Marktplatz",
+      "apiKeys": "API-Schlüssel",
+      "createApiKey": "API-Schlüssel erstellen",
+      "apiKeyName": "Name",
+      "apiKeyDescription": "Beschreibung",
+      "apiKey": "API-Schlüssel",
+      "deleteApiKey": "API-Schlüssel löschen",
+      "deleteApiKeyContent": "Sind Sie sicher, dass Sie diesen API-Schlüssel löschen möchten?",
+      "deleteApiKeyError": "Etwas ist schief gelaufen. Bitte versuche es erneut."
   },
   "shortcut": {
       ...en.shortcut,

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

@@ -2314,7 +2314,15 @@ export const en = {
     "createdApps": "Created Apps",
     "createdModules": "Created Modules",
     "onMarketplace": "On Marketplace",
-    "howToPublish": "How to publish on Marketplace"
+    "howToPublish": "How to publish on Marketplace",
+    "apiKeys": "API Keys",
+    "createApiKey": "Create API Key",
+    "apiKeyName": "Name",
+    "apiKeyDescription": "Description",
+    "apiKey": "API Key",
+    "deleteApiKey": "Delete API Key",
+    "deleteApiKeyContent": "Are you sure you want to delete this API key?",
+    "deleteApiKeyError": "Something went wrong. Please try again."
   },
   "shortcut": {
     "shortcutList": "Keyboard Shortcuts",

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

@@ -2148,6 +2148,14 @@ profile: {
     createdModules: "创建的模块",
     onMarketplace: "在市场上",
     howToPublish: "如何在 Marketplace 上发布",
+    apiKeys: "API 密钥",
+    createApiKey: "创建 API 密钥",
+    apiKeyName: "姓名",
+    apiKeyDescription: "描述",
+    apiKey: "API密钥",
+    deleteApiKey: "删除 API 密钥",
+    deleteApiKeyContent: "您确定要删除此 API 密钥吗?",
+    deleteApiKeyError: "出了些问题。请再试一次。"
 },
 shortcut: {
     shortcutList: "键盘快捷键",

client/packages/lowcoder/src/pages/ApplicationV2/UserProfileLayout.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import CountUp from 'react-countup';
 import { useSelector } from "react-redux";
 import styled from "styled-components";
@@ -20,7 +19,7 @@ import { ALL_APPLICATIONS_URL } from "constants/routesURL";
 import { USER_PROFILE_URL } from "constants/routesURL";
 import { default as Divider } from "antd/es/divider";
 
-import { Avatar, Badge, Button, Card, Col, Row, Space, Typography, Select } from 'antd';
+import { Avatar, Badge, Button, Card, Col, Row, Space, Typography, Select, Table, Flex } from "antd";
 
 import {
   BlurFinishInput,
@@ -40,6 +39,7 @@ import { updateUserAction, updateUserSuccess } from "redux/reduxActions/userActi
 import { default as Upload, UploadChangeParam } from "antd/es/upload";
 import { USER_HEAD_UPLOAD_URL } from "constants/apiConstants";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import UserApiKeysCard from './components/UserApiKeysCard';
 
 const { Text, Title, Link } = Typography;
 const { Option } = Select;
@@ -161,7 +161,9 @@ export function UserProfileLayout(props: UserProfileLayoutProps) {
   const modules = useSelector(modulesSelector);
   const orgUsers = useSelector(getOrgUsers);
   const orgGroups = useSelector(getOrgGroups);
+
   const currentOrgId = user.currentOrgId;
+
   const currentOrg = useMemo(
     () => user.orgs.find((o) => o.id === currentOrgId),
     [user, currentOrgId]
@@ -192,9 +194,6 @@ export function UserProfileLayout(props: UserProfileLayoutProps) {
     }, 1000);
   };
 
-  console.log("App Language", language);
-  console.log("User Language", currentUser.uiLanguage);
-
   if (!user.currentOrgId) {
     return null;
   }
@@ -395,7 +394,9 @@ export function UserProfileLayout(props: UserProfileLayoutProps) {
 
             </Space>
           </Card>
-
+
+          <UserApiKeysCard />
+
         </ProfileView>
       </ContentWrapper>
     </Wrapper>

client/packages/lowcoder/src/pages/ApplicationV2/UserProfileView.tsx

@@ -1,17 +1,27 @@
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { UserProfileLayout } from "./UserProfileLayout";
 import { getUser } from "../../redux/selectors/usersSelectors";
 import { trans } from "../../i18n";
 import { USER_PROFILE_URL } from "constants/routesURL";
+import { useEffect } from "react";
+import { fetchApiKeysAction } from "redux/reduxActions/userActions";
 
 export function UserProfileView() {
 
   const user = useSelector(getUser);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!user.currentOrgId) return;
+
+    dispatch(fetchApiKeysAction());
+  }, []);
 
   if (!user.currentOrgId) {
     return null;
   }
 
+
   return <UserProfileLayout breadcrumb={[{ text: trans("home.profile"), path: USER_PROFILE_URL }]}/>;
 
 };

client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  messageInstance,
+  CustomSelect,
+  CloseEyeIcon,
+  CustomModal,
+  UnderlineCss,
+} from "lowcoder-design";
+import { trans } from "i18n";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
+import { validateResponse } from "api/apiUtils";
+import _ from "lodash";
+import { styled } from "styled-components";
+import UserApi, { ApiKeyPayload } from "api/userApi";
+
+const CustomModalStyled = styled(CustomModal)`
+  button {
+    margin-top: 20px;
+  }
+`;
+
+const FormStyled = styled(Form)`
+  .ant-form-item-control-input-content > input,
+  .ant-input-password {
+    &:hover {
+      border-color: #8b8fa3;
+    }
+
+    &:focus,
+    &.ant-input-affix-wrapper-focused {
+      border-color: #3377ff;
+    }
+  }
+
+  .ant-form-item-label > label {
+    font-size: 13px;
+    line-height: 19px;
+    .has-tip {
+      ${UnderlineCss};
+    }
+  }
+
+  .ant-input-password-icon.anticon {
+    color: #8b8fa3;
+
+    &:hover {
+      color: #222;
+    }
+  }
+
+  &.ant-form-vertical .ant-form-item-label {
+    padding-bottom: 4px;
+  }
+
+  .ant-form-item-explain-error {
+    font-size: 12px;
+    color: #f73131;
+    line-height: 20px;
+  }
+
+  .ant-form-item-label
+    > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+    color: #f73131;
+  }
+
+  .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
+  .ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover {
+    border-color: #f73131;
+  }
+
+  .register {
+    margin: -4px 0 20px 0;
+  }
+
+  .ant-input-prefix {
+    margin-right: 8px;
+    svg {
+      path,
+      rect:nth-of-type(1) {
+        stroke: #8b8fa3;
+      }
+      rect:nth-of-type(2) {
+        fill: #8b8fa3;
+      }
+    }
+  }
+`;
+
+type CreateApiKeyModalProps = {
+  modalVisible: boolean;
+  closeModal: () => void;
+  onConfigCreate: () => void;
+};
+
+function CreateApiKeyModal(props: CreateApiKeyModalProps) {
+  const {
+    modalVisible,
+    closeModal,
+    onConfigCreate
+  } = props;
+  const [form] = Form.useForm();
+  const [saveLoading, setSaveLoading] = useState(false);
+
+  const handleOk = () => {
+    form.validateFields().then(values => {
+      // console.log(values)
+      createApiKey(values)
+    })
+  }
+  function createApiKey(values: ApiKeyPayload) {
+    setSaveLoading(true);
+
+    UserApi.createApiKey(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();
+  }
+
+  return (
+    <CustomModalStyled
+      width="500px"
+      title={"Create API Key"}
+      open={modalVisible}
+      okText={"Save"}
+      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="name"
+          label="Name"
+          rules={[{ required: true }]}
+        >
+          <Input
+            placeholder={trans("idSource.formPlaceholder", {
+              label: 'Name'
+            })}
+          />
+        </Form.Item>
+        <Form.Item
+          name="description"
+          label="Description"
+        >
+          <Input
+            placeholder={trans("idSource.formPlaceholder", {
+              label: 'Description'
+            })}
+          />
+        </Form.Item>
+      </FormStyled>
+    </CustomModalStyled>
+  );
+}
+
+export default CreateApiKeyModal;