@daiyu-5577/quickbuild
Version:
front-end build service
87 lines (86 loc) • 5.06 kB
JavaScript
var _a;
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import axios from "axios";
let baseRoute = '/quick';
if (((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) == 'development') {
baseRoute = '';
}
function FormLogin() {
const [ipt, setIpt] = useState('');
const [pwd, setPwd] = useState('');
const handleLogin = () => {
if (!ipt.length || !pwd.length) {
alert('请输入用户名和密码');
return;
}
axios.post(`${baseRoute}/api/login`, {
username: ipt,
password: pwd
})
.then(res => {
var _a, _b, _c, _d;
const id = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.id;
const token = (_d = (_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.token;
if (!token) {
alert('登录失败');
return;
}
localStorage.setItem('token', token);
localStorage.setItem('userId', id);
window.location.href = `${baseRoute}/page`;
})
.catch(err => {
var _a, _b;
alert(((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || '登录失败');
});
};
return (_jsxs("div", { className: "form", children: [_jsxs("div", { className: "form-item", children: [_jsx("label", { htmlFor: "name", children: "\u7528\u6237\u540D" }), _jsx("input", { onInput: (e) => setIpt(e.currentTarget.value.trim()), value: ipt, type: "text", id: "name", maxLength: 12 })] }), _jsxs("div", { className: "form-item", children: [_jsx("label", { htmlFor: "pwd", children: "\u5BC6\u7801" }), _jsx("input", { onInput: (e) => setPwd(e.currentTarget.value.trim()), value: pwd, type: "password", id: "pwd", maxLength: 30 })] }), _jsx("div", { className: "form-item", children: _jsx("button", { onClick: handleLogin, className: "btn-login", children: "\u767B\u5F55" }) })] }));
}
function FormRegist() {
const [ipt, setIpt] = useState('');
const [pwd, setPwd] = useState('');
const [pwd2, setPwd2] = useState('');
const handleLogin = () => {
if (!ipt.length || !pwd.length || !pwd2.length) {
alert('请输入用户名和密码');
return;
}
if (pwd != pwd2) {
alert('两次密码不一致');
return;
}
axios.post(`${baseRoute}/api/register`, {
username: ipt,
password: pwd
})
.then(res => {
alert('注册成功');
location.reload();
})
.catch(err => {
var _a, _b;
alert(((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || '注册失败');
});
};
return (_jsxs("div", { className: "form", children: [_jsxs("div", { className: "form-item", children: [_jsx("label", { htmlFor: "name", children: "\u7528\u6237\u540D" }), _jsx("input", { onInput: (e) => setIpt(e.currentTarget.value.trim()), value: ipt, type: "text", id: "name", maxLength: 12 })] }), _jsxs("div", { className: "form-item", children: [_jsx("label", { htmlFor: "pwd", children: "\u5BC6\u7801" }), _jsx("input", { onInput: (e) => setPwd(e.currentTarget.value.trim()), value: pwd, type: "password", id: "pwd", maxLength: 30 })] }), _jsxs("div", { className: "form-item", children: [_jsx("label", { htmlFor: "pwd", children: "\u786E\u8BA4\u5BC6\u7801" }), _jsx("input", { onInput: (e) => setPwd2(e.currentTarget.value.trim()), value: pwd2, type: "password", id: "pwd", maxLength: 30 })] }), _jsx("div", { className: "form-item", children: _jsx("button", { onClick: handleLogin, className: "btn-login", children: "\u6CE8\u518C" }) })] }));
}
const tabs = [
{
name: '登录',
path: '/login',
comp: FormLogin
},
{
name: '注册',
path: '/register',
comp: FormRegist
}
];
function Login() {
const [curTab, setCurTab] = useState(tabs[0]);
return (_jsxs(React.Fragment, { children: [_jsx("div", { className: "login", children: _jsxs("div", { className: "loginWrap", children: [_jsx("div", { className: "tab", children: tabs.map((v, i) => {
return _jsx("span", { className: `tab-item ${curTab == v ? 'tab-item-active' : ''}`, onClick: () => setCurTab(v), children: v.name }, i);
}) }), _jsx(curTab.comp, {})] }) }), _jsx("link", { rel: "stylesheet/less", type: "text/css", href: `${baseRoute}/static/pages/login.less` })] }));
}
export default Login;