feat(web): support auth methods of email (#1865)

* feat(web): add userinfo email config

* feat(web): add email config

web/public/locales/en/translation.json

@@ -413,12 +413,15 @@
     "ResetPasswordSuccess": "Reset password successfully",
     "NewPassword": "New Password",
     "SignUpSuccess": "Sign up successfully",
-    "EmailTip": "Please input a valid Email",
+    "EmailTip": "Please input a valid email",
     "LoginOrRegister": "Login / Register",
     "BindGitHub": "Bind GitHub",
     "BindSuccess": "Bind Successfully",
     "GitHubLogin": "GitHub Login",
-    "PleaseBindUser": "Please bind your user"
+    "PleaseBindUser": "Please bind your user",
+    "Email": "Email",
+    "EmailPlaceholder": "Please input your email",
+    "EmailLogin": "Email Login"
   },
   "Time": "Time",
   "CreateTime": "Created",
@@ -754,4 +757,4 @@
     "Title": "Laf is ready to update!",
     "Description": "Click to update"
   }
-}
+}

web/public/locales/zh-CN/translation.json

@@ -418,7 +418,10 @@
     "BindGitHub": "绑定 GitHub",
     "BindSuccess": "绑定成功",
     "GitHubLogin": "GitHub 登录",
-    "PleaseBindUser": "请绑定对应用户"
+    "PleaseBindUser": "请绑定对应用户",
+    "Email": "邮箱",
+    "EmailPlaceholder": "请输入你的邮箱",
+    "EmailLogin": "验证码登录"
   },
   "Time": "时间",
   "CreateTime": "创建时间",
@@ -754,4 +757,4 @@
     "Title": "Laf 新版本已经准备好了！",
     "Description": "点击立即更新"
   }
-}
+}

web/public/locales/zh/translation.json

@@ -418,7 +418,10 @@
     "BindGitHub": "绑定 GitHub",
     "BindSuccess": "绑定成功",
     "GitHubLogin": "GitHub 登录",
-    "PleaseBindUser": "请绑定对应用户"
+    "PleaseBindUser": "请绑定对应用户",
+    "Email": "邮箱",
+    "EmailPlaceholder": "请输入你的邮箱",
+    "EmailLogin": "验证码登录"
   },
   "Time": "时间",
   "CreateTime": "创建时间",
@@ -754,4 +757,4 @@
     "Title": "Laf 新版本已经准备好了！",
     "Description": "点击立即更新"
   }
-}
+}

web/src/apis/v1/api-auto.d.ts

@@ -8,7 +8,17 @@ declare namespace Definitions {
   };
 
   export type CloudFunction = {
-    name: string;
+    _id?: string;
+    appid?: string;
+    name?: string;
+    source?: Definitions.CloudFunctionSource;
+    desc?: string;
+    tags?: string[];
+    methods?: string[];
+    params?: {};
+    createdAt?: string;
+    updatedAt?: string;
+    createdBy?: string;
   };
 
   export type UpdateFunctionDto = {
@@ -17,6 +27,7 @@ declare namespace Definitions {
     methods?: string[];
     code?: string /* The source code of the function */;
     tags?: string[];
+    changelog?: string;
   };
 
   export type UpdateFunctionDebugDto = {
@@ -262,8 +273,8 @@ declare namespace Definitions {
     username?: string /* username, 3-64 characters */;
     password?: string /* password, 8-64 characters */;
     phone?: string /* phone */;
+    email?: string /* email */;
     code?: string /* verify code */;
-    type?: string /* type */;
     inviteCode?: string /* invite code */;
   };
 
@@ -275,8 +286,8 @@ declare namespace Definitions {
   export type PasswdResetDto = {
     password?: string /* new password, 8-64 characters */;
     phone?: string /* phone */;
+    email?: string /* email */;
     code?: string /* verify code */;
-    type?: string /* type */;
   };
 
   export type PasswdCheckDto = {
@@ -305,6 +316,14 @@ declare namespace Definitions {
     type?: string /* verify code type */;
   };
 
+  export type EmailSigninDto = {
+    email?: string /* email */;
+    code?: string;
+    username?: string /* username */;
+    password?: string /* password, 8-64 characters */;
+    inviteCode?: string /* invite code */;
+  };
+
   export type GithubSigninDto = {
     code?: string;
   };
@@ -451,6 +470,15 @@ declare namespace Definitions {
     role?: string;
   };
 
+  export type CloudFunctionSource = {
+    code?: string;
+    compiled?: string;
+    uri?: string;
+    version?: number;
+    hash?: string;
+    lang?: string;
+  };
+
   export type CreateAutoscalingDto = {
     enable?: boolean;
     minReplicas?: number;
@@ -1171,6 +1199,14 @@ declare namespace Paths {
     export type Responses = any;
   }
 
+  namespace EmailControllerSignin {
+    export type QueryParameters = any;
+
+    export type BodyParameters = Definitions.EmailSigninDto;
+
+    export type Responses = any;
+  }
+
   namespace GithubAuthControllerJumpLogin {
     export type QueryParameters = any;
 

web/src/apis/v1/auth.ts

@@ -190,6 +190,26 @@ export async function EmailControllerSendCode(
   });
 }
 
+/**
+* Signin by email and verify code
+*/
+export async function EmailControllerSignin(
+  params: Definitions.EmailSigninDto,
+): Promise<{
+    error: string;
+    data: Paths.EmailControllerSignin.Responses
+}> {
+  // /v1/auth/email/signin
+  let _params: { [key: string]: any } = {
+    appid: useGlobalStore.getState().currentApp?.appid || '',
+    ...params,
+  };
+  return request(`/v1/auth/email/signin`, {
+    method: 'POST',
+    data : params,
+  });
+}
+
 /**
 * Redirect to the login page of github
 */

web/src/components/CommonIcon/index.tsx

@@ -751,7 +751,7 @@ export const PauseIcon = createIcon({
 export const ContinueIcon = createIcon({
   displayName: "ContinueIcon",
   viewBox: "0 0 1024 1024",
-  d: "M104 0v1024l816-512z"
+  d: "M104 0v1024l816-512z",
 });
 
 export const DownIcon = (props: any) => {
@@ -762,30 +762,31 @@ export const DownIcon = (props: any) => {
       width={props.size}
       height={props.size}
     >
-      <path d="M486.4 537.6C492.8 544 505.6 544 512 544s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0L512 467.2 313.6 262.4C300.8 256 275.2 256 262.4 262.4S256 300.8 262.4 313.6L486.4 537.6z"
+      <path
+        d="M486.4 537.6C492.8 544 505.6 544 512 544s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0L512 467.2 313.6 262.4C300.8 256 275.2 256 262.4 262.4S256 300.8 262.4 313.6L486.4 537.6z"
         fill={props.color}
       ></path>
-      <path d="M710.4 486.4 512 691.2 313.6 486.4c-12.8-12.8-32-12.8-44.8 0S256 524.8 262.4 537.6l224 224C492.8 768 505.6 768 512 768s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8S723.2 480 710.4 486.4z"
+      <path
+        d="M710.4 486.4 512 691.2 313.6 486.4c-12.8-12.8-32-12.8-44.8 0S256 524.8 262.4 537.6l224 224C492.8 768 505.6 768 512 768s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8S723.2 480 710.4 486.4z"
         fill={props.color}
       ></path>
-
     </svg>
   );
 };
 export const AscendingIcon = createIcon({
   displayName: "AscendingIcon",
   viewBox: "0 0 1024 1024",
-  d: "M666.656 452.992l45.888-44.608-258.24-265.664v782.816h64V300.352z"
+  d: "M666.656 452.992l45.888-44.608-258.24-265.664v782.816h64V300.352z",
 });
 
 export const DescendingIcon = createIcon({
   displayName: "DescendingIcon",
   viewBox: "0 0 1024 1024",
-  d: "M372.16 615.264l-45.888 44.608 258.272 265.664V142.72h-64v625.152z"
+  d: "M372.16 615.264l-45.888 44.608 258.272 265.664V142.72h-64v625.152z",
 });
 
 export const SortingIcon = createIcon({
   displayName: "SortingIcon",
   viewBox: "0 0 1024 1024",
-  d: "M610.624 128l258.24 265.664-45.856 44.608-148.384-152.64v625.184h-64V128zM160 659.84l45.888-44.576 148.384 152.64V142.72h64v782.816L160 659.872z"
+  d: "M610.624 128l258.24 265.664-45.856 44.608-148.384-152.64v625.184h-64V128zM160 659.84l45.888-44.576 148.384 152.64V142.72h64v782.816L160 659.872z",
 });

web/src/components/DateRangePicker/index.tsx

@@ -101,7 +101,7 @@ export default function DateRangePicker(props: {
       <Popover onClose={onClose}>
         <PopoverTrigger>
           <Button variant="none" px={0} mr={2} minW={4}>
-            <CalendarIcon className="!text-grayModern-500 pb-[2px]" fontSize="18" />
+            <CalendarIcon className="pb-[2px] !text-grayModern-500" fontSize="18" />
           </Button>
         </PopoverTrigger>
         <PopoverContent zIndex={99}>

web/src/components/Editor/FunctionEditor.tsx

@@ -151,7 +151,7 @@ function FunctionEditor(props: {
           monaco.editor.addKeybindingRule({
             keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyP,
             command: null,
-          })
+          });
         });
     }
 

web/src/components/Editor/TSEditor.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Spinner } from "@chakra-ui/react";
 import { Editor, Monaco } from "@monaco-editor/react";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
@@ -7,6 +7,7 @@ import { AutoImportTypings } from "@/components/Editor/typesResolve";
 import { COLOR_MODE, RUNTIMES_PATH } from "@/constants";
 
 import "./useWorker";
+
 import useFunctionCache from "@/hooks/useFunctionCache";
 import useFunctionStore from "@/pages/app/functions/store";
 
@@ -28,7 +29,7 @@ export default function TSEditor(props: {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
   const loadModalsRef = useRef(loadModals);
 
-  loadModalsRef.current = loadModals
+  loadModalsRef.current = loadModals;
 
   function loadModals(monaco: Monaco) {
     allFunctionList.forEach((item: any) => {

web/src/components/MoreButton/index.tsx

@@ -20,20 +20,17 @@ export default function MoreButton(props: {
   className?: string;
   refItem?: React.RefObject<HTMLDivElement>;
 }) {
-  const { children, isHidden, maxWidth, label = t("openPopover"), className, refItem } = props;
+  const { children, isHidden, maxWidth, label = t("openPopover"), className } = props;
   const { isOpen, onOpen, onClose } = useDisclosure();
   return (
     <div className={clsx("flex group-hover:visible ", isHidden ? "invisible" : "visible")}>
-      <Popover
-        isOpen={isOpen}
-        onOpen={onOpen}
-        onClose={onClose}
-        placement="bottom"
-      >
+      <Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose} placement="bottom">
         <Tooltip aria-label="tooltip" placement="bottom" label={label}>
           <Box display="inline-block">
             <PopoverTrigger>
-              <Button variant="none" p={0} minW={0} h={0} w={5}><MoreIcon className="cursor-pointer align-middle" fontSize={12} /></Button>
+              <Button variant="none" p={0} minW={0} h={0} w={5}>
+                <MoreIcon className="cursor-pointer align-middle" fontSize={12} />
+              </Button>
             </PopoverTrigger>
           </Box>
         </Tooltip>

web/src/constants/index.ts

@@ -97,4 +97,11 @@ export enum APP_SETTING_KEY {
   COMMON = "common",
 }
 
+export enum PROVIDER_NAME {
+  PHONE = "phone",
+  EMAIL = "email",
+  GITHUB = "github",
+  PASSWORD = "user-password",
+}
+
 export const RUNTIMES_PATH = "/app/functions";

web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx

@@ -79,7 +79,7 @@ export default function DataPanel() {
     }
   }, [store.currentDB, setCurrentData]);
 
-  const entryDataQuery = useEntryDataQuery({ ...queryData }, (data: any) => { });
+  const entryDataQuery = useEntryDataQuery({ ...queryData }, (data: any) => {});
   const updateDataMutation = useUpdateDataMutation();
   const deleteDataMutation = useDeleteDataMutation({
     onSuccess() {

web/src/pages/app/functions/mods/DeployButton/index.tsx

@@ -22,10 +22,10 @@ import { Pages } from "@/constants";
 import { useFunctionDetailQuery, useUpdateFunctionMutation } from "../../service";
 import useFunctionStore from "../../store";
 
+import { TFunction } from "@/apis/typing";
 import useFunctionCache from "@/hooks/useFunctionCache";
 import useHotKey, { DEFAULT_SHORTCUTS } from "@/hooks/useHotKey";
 import useGlobalStore from "@/pages/globalStore";
-import { TFunction } from "@/apis/typing";
 
 export default function DeployButton() {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -70,7 +70,10 @@ export default function DeployButton() {
     });
     if (!res.error) {
       store.setCurrentFunction(res.data);
-      store.setRecentFunctionList([res.data as TFunction, ...store.recentFunctionList.filter((item) => item.name !== res.data.name)]);
+      store.setRecentFunctionList([
+        res.data as TFunction,
+        ...store.recentFunctionList.filter((item) => item.name !== res.data.name),
+      ]);
       // delete cache after deploy
       functionCache.removeCache(store.currentFunction!._id);
       onClose();