feat:邮箱登录

docker/nginx.conf

@@ -30,9 +30,9 @@ http {
             try_files $uri $uri.html $uri/ =404;
             # try_files $uri $uri/ =404;
         }
-        location ^~ /todo-server {
+        location ^~ /todo-server/ {
-            rewrite ^/todo-server/(.*)$ /$1 break;
+            # rewrite ^/todo-server/(.*)$ /$1 break;
-            proxy_pass              http://huayu-platform-todo:8092;
+            proxy_pass              http://huayu-platform-todo:8092/;
             proxy_set_header        Host $http_host;
             proxy_set_header        X-Real-IP $remote_addr;
             proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
@@ -51,9 +51,9 @@ http {
                 return 204;
             }
         }
-        location ^~ /security-server {
+        location ^~ /security-server/ {
-            rewrite ^/security-server/(.*)$ /$1 break;
+            # rewrite ^/security-server/(.*)$ /$1 break;
-            proxy_pass              http://huayu-platform-security:8091;
+            proxy_pass              http://huayu-platform-security:8091/;
             proxy_set_header        Host $http_host;
             proxy_set_header        X-Real-IP $remote_addr;
             proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;

src/app/login/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import {
     AlipayOutlined,
-    LockOutlined,
+    LockOutlined, MailOutlined,
     MobileOutlined,
     TaobaoOutlined,
     UserOutlined,
@@ -15,13 +15,14 @@ import {
     ProFormCheckbox,
     ProFormText,
 } from '@ant-design/pro-components';
-import { Divider, Space, Tabs, message, theme} from 'antd';
+import {Divider, Space, Tabs, message, theme, Modal, Button} from 'antd';
-import type {CSSProperties} from 'react';
+import {CSSProperties, useCallback} from 'react';
 import {useState} from 'react';
-import {LoginObject} from "@/lib/login/definitions";
+import {CaptchaLoginSuccess, LoginObject} from "@/lib/login/definitions";
 import {httpReq} from "@/utils/axiosReq";
 import {useRouter} from 'next/navigation'
-type LoginType = 'phone' | 'account';
+
+type LoginType = 'email' | 'account';
 
 const iconStyles: CSSProperties = {
     color: 'rgba(0, 0, 0, 0.2)',
@@ -30,11 +31,25 @@ const iconStyles: CSSProperties = {
     cursor: 'pointer',
 };
 
+
 const Page = () => {
     const [loginType, setLoginType] = useState<LoginType>('account');
     const {token} = theme.useToken();
     const router = useRouter()
     const [messageApi, contextHolder] = message.useMessage();
+    const [loading, setLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [captchaLoginSuccessList, setCaptchaLoginSuccessList] = useState([]);
+    const captchaUserNameConfirm = (captchaLoginSuccess:CaptchaLoginSuccess)=>{
+        messageApi.open({
+            type: 'info',
+            content: "使用帐号"+captchaLoginSuccess.username+"登录成功"
+        })
+        localStorage.setItem('platform-security', captchaLoginSuccess.token)
+        router.push('/task/project')
+        setOpen(false)
+        setLoading(false)
+    }
     return (
         <div
             style={{
@@ -43,8 +58,20 @@ const Page = () => {
             }}
         >
             {contextHolder}
-            <LoginForm
+            <Modal
-                // backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
+                open={open}
+                title="发现您注册有多个帐号，请选择需要登录的账号"
+                footer={
+                    captchaLoginSuccessList.map((label:CaptchaLoginSuccess,index)=>(
+                        <Button key={label.username} onClick={()=>captchaUserNameConfirm(label)}>
+                            {label.username}
+                        </Button>
+                    ))
+                }
+            >
+            </Modal>
+            <LoginFormPage
+                backgroundImageUrl="/20-1733751222585.jpg"
                 // logo="https://github.githubassets.com/favicons/favicon.png"
                 // backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
                 title="任务管理"
@@ -64,6 +91,7 @@ const Page = () => {
                 // }}
                 onFinish={(formData: LoginObject) => {
                     console.log("登录信息：" + formData.username + ";" + formData.password)
+                    if (loginType === "account") {
                         httpReq.post(process.env.NEXT_PUBLIC_SECURITY_REQUEST_URL + "/stateless/login/username", {
                             username: formData.username,
                             password: formData.password
@@ -83,8 +111,39 @@ const Page = () => {
                                     type: 'error',
                                     content: response.data.status.message,
                                 })
-                        };
+                            }
+                            ;
                         })
+                    } else if (loginType === "email") {
+                        httpReq.post(process.env.NEXT_PUBLIC_SECURITY_REQUEST_URL + "/stateless/login/email", {
+                            email: formData.email,
+                            captcha: formData.captcha
+                        }).then(response => {
+                            console.log(response);
+                            if (response.data.status.code === 200) {
+                                // localStorage.removeItem("platform-security")
+                                if (response.data.data.length > 1) {
+                                    setCaptchaLoginSuccessList(response.data.data)
+                                    setOpen(true)
+                                } else {
+                                    localStorage.setItem('platform-security', response.data.data)
+                                    // 删除名为 'platform-security' 的Cookie
+                                    // Cookies.remove('platform-security');
+                                    // 设置一个有效期为7天的Cookie
+                                    // Cookies.set('platform-security', response.data.data, { expires: 7 });
+                                    // 登录成功，跳转到首页或者回调
+                                    router.push('/task/project')
+                                }
+                            } else {
+                                messageApi.open({
+                                    type: 'error',
+                                    content: response.data.status.message,
+                                })
+                            }
+                            ;
+                        })
+                    }
+
                 }}
                 // actions={
                 //     <div style={{
@@ -153,7 +212,7 @@ const Page = () => {
                     onChange={(activeKey) => setLoginType(activeKey as LoginType)}
                 >
                     <Tabs.TabPane key={'account'} tab={'账号密码登录'}/>
-                    <Tabs.TabPane key={'phone'} tab={'手机号登录'}/>
+                    <Tabs.TabPane key={'email'} tab={'邮箱登录'}/>
                 </Tabs>
                 {loginType === 'account' && (
                     <>
@@ -170,7 +229,7 @@ const Page = () => {
                                     />
                                 ),
                             }}
-                            placeholder={'用户名: admin or user'}
+                            placeholder={'用户名: test'}
                             rules={[
                                 {
                                     required: true,
@@ -191,7 +250,7 @@ const Page = () => {
                                     />
                                 ),
                             }}
-                            placeholder={'密码: ant.design'}
+                            placeholder={'密码: 123456'}
                             rules={[
                                 {
                                     required: true,
@@ -201,13 +260,14 @@ const Page = () => {
                         />
                     </>
                 )}
-                {loginType === 'phone' && (
+                {loginType === 'email' && (
                     <>
                         <ProFormText
                             fieldProps={{
+                                type: "email",
                                 size: 'large',
                                 prefix: (
-                                    <MobileOutlined
+                                    <MailOutlined
                                         style={{
                                             color: token.colorText,
                                         }}
@@ -215,16 +275,16 @@ const Page = () => {
                                     />
                                 ),
                             }}
-                            name="mobile"
+                            name="email"
-                            placeholder={'手机号'}
+                            placeholder={'邮箱帐号'}
                             rules={[
                                 {
                                     required: true,
-                                    message: '请输入手机号！',
+                                    message: '请输入邮箱帐号！',
                                 },
                                 {
-                                    pattern: /^1\d{10}$/,
+                                    pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-                                    message: '手机号格式错误！',
+                                    message: '邮箱格式错误！',
                                 },
                             ]}
                         />
@@ -250,6 +310,7 @@ const Page = () => {
                                 }
                                 return '获取验证码';
                             }}
+                            phoneName="email"
                             name="captcha"
                             rules={[
                                 {
@@ -257,8 +318,19 @@ const Page = () => {
                                     message: '请输入验证码！',
                                 },
                             ]}
-                            onGetCaptcha={async () => {
+                            onGetCaptcha={async (email) => {
-                                message.success('获取验证码成功！验证码为：1234');
+                                // 请求后端服务器发送密码
+                                httpReq.get(process.env.NEXT_PUBLIC_SECURITY_REQUEST_URL + "/common/email/captcha/" + email)
+                                    .then(response => {
+                                        if (response.data.status.code === 200) {
+                                            message.success(`${email},获取验证码成功,请及时查看！`);
+                                        } else {
+                                            messageApi.open({
+                                                type: 'error',
+                                                content: response.data.status.message,
+                                            })
+                                        }
+                                    })
                             }}
                         />
                     </>
@@ -279,7 +351,7 @@ const Page = () => {
                         忘记密码
                     </a>
                 </div>
-            </LoginForm>
+            </LoginFormPage>
         </div>
     );
 };

src/lib/login/definitions.ts

@@ -2,5 +2,10 @@ export type LoginObject={
     username: string;
     password: string;
     mobile: string;
+    email: string;
     captcha: string;
 }
+export type CaptchaLoginSuccess = {
+    username: string;
+    token: string;
+}

src/ui/task/calendar/CalShow.tsx

@@ -33,7 +33,7 @@ const CalShow: React.FC = () => {
     const [open, setOpen] = useState(false);
     const [description, setDescription] = useState('');
     const [operationId, setOperationId] = useState(-1);
-    const [itemId, setItemId] = useState(-1);
+    const [itemId, setItemId] = useState('-1');
     const [expectedStartTime, setExpectedStartTime] = useState<Dayjs>();
     const [expectedEndTime, setExpectedEndTime] = useState<Dayjs>();
     const [range, setRange] = useState<{start: Date; end: Date}>({
@@ -279,7 +279,7 @@ const CalShow: React.FC = () => {
     }
     return <div className="App" style={{height: '90vh'}}>
         {open && <DetailModelForm operationId={operationId} description={description} open={open} haveButton={false}
-                         itemId={itemId} pid={pid?Number(pid):0}
+                         itemId={itemId} pid={pid?pid:'0'}
                          reloadData={reloadData} expectedStartTime={expectedStartTime}
                          expectedEndTime={expectedEndTime}/>}
         <DragAndDropCalendar

src/ui/task/four/DetailForm.tsx

@@ -23,8 +23,8 @@ import {
 import {DataType} from "@/lib/definitions";
 
 export interface DetailFormProps {
-    itemId: number,
+    itemId: string,
-    pPid: number,
+    pPid: string,
     operationId: number | undefined,
     handleCancel: () => void,
     setUpdatePriority?: (value: (((prevState: (string | undefined)) => (string | undefined)) | string | undefined)) => void

src/ui/task/project/DetailModelForm.tsx

@@ -273,14 +273,14 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
                     initialValue={[dayjs(), undefined]}
                     name="expectedTimeRange"
                     label="期望时间"
-                    fieldProps={{allowEmpty:[true, true],showTime:true,needConfirm:false}}
+                    fieldProps={{allowEmpty:[true, true],showTime:true,needConfirm:true}}
                     placeholder={['开始时间','结束时间']}
                     disabled ={editFormDisable}
                 />
                 <ProFormDateTimeRangePicker
                     name="actualTimeRange"
                     label="实际时间"
-                    fieldProps={ {allowEmpty:[true, true],showTime:true,needConfirm:false}}
+                    fieldProps={ {allowEmpty:[true, true],showTime:true,needConfirm:true}}
                     placeholder={['开始时间','结束时间']}
                     disabled ={editFormDisable}
                 />

src/ui/task/project/TreeTablePro.modules.css

@@ -1,6 +1,11 @@
 .odd {
     background-color: #fff;
 }
+
 .even {
     background-color: rgb(209, 192, 192);
 }
+.css-1k007xr .ant-pro-card .ant-pro-card-border .ant-pro-card-bordered .ant-pro-table-search .ant-pro-table-search-query-filter{
+    margin-block-end:0;
+    border-bottom: none;
+}