fix(web): fix the type of sms code for phone reset (#1402)

* fix(web): fix reset phone smscode type * feat(web): add function template developer info * refactor(web): add tooltip
labring · Jul 14, 2023 · a79e25a · a79e25a
1 parent 83a9960
commit a79e25a
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 10 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -519,7 +519,8 @@
     "Save": "Save",
     "Recommended": "Recommended Template",
     "Confirm": "If there are missing dependencies, the application will be automatically restarted. Are you sure you want to use this template?",
-    "ConfirmDeleteTemplate": "Are you sure you want to delete this function template？"
+    "ConfirmDeleteTemplate": "Are you sure you want to delete this function template?",
+    "DeveloperInfo": "Developer Info"
   },
   "Create function template success": "Create function template successfully",
   "Publish": "release",
@@ -567,5 +568,6 @@
   "Core": "Core",
   "No History": "No History",
   "MyIncomeAndExpenses": "My Income And Expenses",
-  "Apply": "apply"
-}
+  "Apply": "apply",
+  "Developing": "Developing"
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -498,7 +498,8 @@
     "Save": "保存",
     "Recommended": "推荐模板",
     "Confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？",
-    "ConfirmDeleteTemplate": "确定删除模板吗"
+    "ConfirmDeleteTemplate": "确定删除模板吗?",
+    "DeveloperInfo": "开发者信息"
   },
   "Fee": "费用",
   "PleaseCloseApplicationFirst": "请先关闭应用",
@@ -567,5 +568,6 @@
   "Core": "核",
   "No History": "暂无记录",
   "MyIncomeAndExpenses": "我的收支",
-  "Apply": "使用"
+  "Apply": "使用",
+  "Developing": "开发中"
 }
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -498,7 +498,8 @@
     "Save": "保存",
     "Recommended": "推荐模板",
     "Confirm": "如果存在依赖包未安装，将会自动重启应用，确定使用该模板吗？",
-    "ConfirmDeleteTemplate": "确定删除模板吗"
+    "ConfirmDeleteTemplate": "确定删除模板吗?",
+    "DeveloperInfo": "开发者信息"
   },
   "Fee": "费用",
   "PleaseCloseApplicationFirst": "请先关闭应用",
@@ -567,5 +568,6 @@
   "Hour": "小时",
   "Core": "核",
   "No History": "暂无记录",
-  "Apply": "使用"
+  "Apply": "使用",
+  "Developing": "开发中"
 }
diff --git a/web/src/apis/typing.d.ts b/web/src/apis/typing.d.ts
@@ -296,6 +296,8 @@ export type TFunctionTemplate = {
   items: { name: string; source: { code: string } }[];
   dependencies: string[];
   environments: { name: string; value: string }[];
+  uid: string;
+  user: { username: string };
 };
 
 export type TemplateList = {
@@ -367,3 +369,5 @@ export type TApplicationItem = {
     };
   };
 };
+
+export type TSmsCode = "Signin" | "Signup" | "ResetPassword" | "Bind" | "Unbind" | "ChangePhone";
diff --git a/web/src/components/SendSmsCodeButton/index.tsx b/web/src/components/SendSmsCodeButton/index.tsx
@@ -3,15 +3,17 @@ import { Button } from "@chakra-ui/react";
 import clsx from "clsx";
 import { t } from "i18next";
 
+import { TSmsCode } from "@/apis/typing";
 import { useSendSmsCodeMutation } from "@/pages/auth/service";
 import useGlobalStore from "@/pages/globalStore";
 
 export function SendSmsCodeButton(props: {
   getPhone: any;
   className?: string;
   phoneNumber?: string;
+  type: TSmsCode;
 }) {
-  const { getPhone, className, phoneNumber } = props;
+  const { getPhone, className, phoneNumber, type } = props;
   const [isSendSmsCode, setIsSendSmsCode] = useState(false);
   const [countdown, setCountdown] = useState(60);
   const sendSmsCodeMutation = useSendSmsCodeMutation();
@@ -46,7 +48,7 @@ export function SendSmsCodeButton(props: {
 
     const res = await sendSmsCodeMutation.mutateAsync({
       phone,
-      type: "ResetPassword",
+      type,
     });
 
     if (res?.data) {

diff --git a/web/src/pages/app/setting/UserInfo/Mods/PasswordEditor.tsx b/web/src/pages/app/setting/UserInfo/Mods/PasswordEditor.tsx
@@ -103,6 +103,7 @@ export default function UserNameEditor(props: { handleBack: any }) {
                   getPhone={getValues}
                   phoneNumber={"phone"}
                   className="!h-6 !text-[12px]"
+                  type="ResetPassword"
                 />
               </InputRightElement>
             </InputGroup>

diff --git a/web/src/pages/app/setting/UserInfo/Mods/PhoneEditor.tsx b/web/src/pages/app/setting/UserInfo/Mods/PhoneEditor.tsx
@@ -88,6 +88,7 @@ export default function PhoneEditor(props: { handleBack: any }) {
                   getPhone={getValues}
                   phoneNumber={"oldPhoneNumber"}
                   className="!h-6 !text-[12px]"
+                  type="Unbind"
                 />
               </InputRightElement>
             </InputGroup>
@@ -119,6 +120,7 @@ export default function PhoneEditor(props: { handleBack: any }) {
                   getPhone={getValues}
                   phoneNumber={"newPhoneNumber"}
                   className="!h-6 !text-[12px]"
+                  type="Bind"
                 />
               </InputRightElement>
             </InputGroup>

diff --git a/web/src/pages/auth/reset-password/index.tsx b/web/src/pages/auth/reset-password/index.tsx
@@ -104,7 +104,7 @@ export default function ResetPassword() {
               border={"1px solid #D5D6E1"}
             />
             <InputRightElement width="6rem">
-              <SendSmsCodeButton getPhone={getValues} phoneNumber={"phone"} />
+              <SendSmsCodeButton getPhone={getValues} phoneNumber={"phone"} type="ResetPassword" />
             </InputRightElement>
           </InputGroup>
         </FormControl>

diff --git a/web/src/pages/functionTemplate/Mods/TemplateInfo/index.tsx b/web/src/pages/functionTemplate/Mods/TemplateInfo/index.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import { Avatar, AvatarGroup, Box, Tooltip, useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 
+import { GithubIcon, PhoneIcon, WechatIcon } from "@/components/CommonIcon";
 import FileTypeIcon from "@/components/FileTypeIcon";
 import { getAvatarUrl } from "@/utils/getAvatarUrl";
 
@@ -22,6 +23,31 @@ const TemplateInfo = (props: { functionTemplate: TFunctionTemplate; usedBy: any[
       <UseTemplate template={functionTemplate} />
       <div>
         <Box className="border-b-[1px]">
+          <span className="text-xl font-semibold">{t("Template.DeveloperInfo")}</span>
+          <Box className="flex max-h-40 overflow-auto py-5">
+            <Avatar
+              width={12}
+              height={12}
+              border={"2px solid #DEE0E2"}
+              src={getAvatarUrl(functionTemplate?.uid)}
+              name={functionTemplate.user.username}
+              backgroundColor={"primary.500"}
+            />
+            <div className="ml-3 flex flex-col">
+              <span className="text-lg font-semibold text-grayModern-900">
+                {functionTemplate.user.username}
+              </span>
+              <Tooltip label={t("Developing")}>
+                <span className="space-x-1 text-grayModern-400">
+                  <WechatIcon />
+                  <GithubIcon />
+                  <PhoneIcon />
+                </span>
+              </Tooltip>
+            </div>
+          </Box>
+        </Box>
+        <Box className="border-b-[1px] pt-5">
           <span className="text-xl font-semibold">{t("Template.Function")}</span>
           <Box className="max-h-40 overflow-auto py-2">
             {(functionList || []).map((item) => {

diff --git a/web/src/pages/functionTemplate/Mods/UseTemplateModal/index.tsx b/web/src/pages/functionTemplate/Mods/UseTemplateModal/index.tsx
@@ -45,6 +45,7 @@ const UseTemplateModal = (props: { children: any; templateId: string; packageLis
       return ApplicationControllerFindAll({});
     },
     {
+      enabled: isOpen,
       onSuccess(data) {
         setAppList(data?.data || []);
       },