huayu-web
/
assistant-todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:邮箱登录

This commit is contained in:
1708-huayu 2024-12-12 18:32:38 +08:00
parent 784001ed4f
commit 71d3dba5ce
9 changed files with 150 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docker/nginx.conf
View File

@ -30,9 +30,9 @@ http {
try_files $uri $uri.html $uri/ =404;
# try_files $uri $uri/ =404;
}
location ^~ /todo-server {
rewrite ^/todo-server/(.*)$ /$1 break;
proxy_pass http://huayu-platform-todo:8092;
location ^~ /todo-server/ {
# rewrite ^/todo-server/(.*)$ /$1 break;
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 {
rewrite ^/security-server/(.*)$ /$1 break;
proxy_pass http://huayu-platform-security:8091;
location ^~ /security-server/ {
# rewrite ^/security-server/(.*)$ /$1 break;
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;

BIN
public/20-1733751222585.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/背景19-1733751214093.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 868 KiB

162
src/app/login/page.tsx
View File

@ -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 type {CSSProperties} from 'react';
import {Divider, Space, Tabs, message, theme, Modal, Button} from 'antd';
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';
import {useRouter} from 'next/navigation'
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
// backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
<Modal
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="任务管理"
@ -62,29 +89,61 @@ const Page = () => {
// backdropFilter: 'blur(4px)',
// },
// }}
onFinish={(formData:LoginObject)=>{
console.log("登录信息："+formData.username+";"+formData.password)
httpReq.post(process.env.NEXT_PUBLIC_SECURITY_REQUEST_URL+"/stateless/login/username",{
username: formData.username,
password: formData.password
}).then(response=>{
console.log(response);
if(response.data.status.code===200){
// localStorage.removeItem("platform-security")
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,
})
};
})
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
}).then(response => {
console.log(response);
if (response.data.status.code === 200) {
// localStorage.removeItem("platform-security")
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,
})
}
;
})
} 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"
placeholder={'手机号'}
name="email"
placeholder={'邮箱帐号'}
rules={[
{
required: true,
message: '请输入手机号！',
message: '请输入邮箱帐号！',
},
{
pattern: /^1\d{10}$/,
message: '手机号格式错误！',
pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
message: '邮箱格式错误！',
},
]}
/>
@ -250,6 +310,7 @@ const Page = () => {
}
return '获取验证码';
}}
phoneName="email"
name="captcha"
rules={[
{
@ -257,8 +318,19 @@ const Page = () => {
message: '请输入验证码！',
},
]}
onGetCaptcha={async () => {
message.success('获取验证码成功！验证码为：1234');
onGetCaptcha={async (email) => {
// 请求后端服务器发送密码
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,12 +351,12 @@ const Page = () => {
忘记密码
</a>
</div>
</LoginForm>
</LoginFormPage>
</div>
);
};
export default function Login(){
export default function Login() {
return (
<ProConfigProvider dark>
<Page/>

15
src/lib/login/definitions.ts
View File

@ -1,6 +1,11 @@
export type LoginObject={
username:string;
password:string;
mobile:string;
captcha:string;
export type LoginObject = {
username: string;
password: string;
mobile: string;
email: string;
captcha: string;
}
export type CaptchaLoginSuccess = {
username: string;
token: string;
}

4
src/ui/task/calendar/CalShow.tsx
View File

@ -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

4
src/ui/task/four/DetailForm.tsx
View File

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

4
src/ui/task/project/DetailModelForm.tsx
View File

@ -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}
/>

17
src/ui/task/project/TreeTablePro.modules.css
View File

@ -1,6 +1,11 @@
.odd {
background-color: #fff;
}
.even {
background-color: rgb(209, 192, 192);
}
.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;
}