Merge branch 'main' of github.com:hainatravel/GHHub
赵鹏
2 years ago
commit
b9938d2c19
@ -1,109 +1,90 @@
|
||||
import { Button, Checkbox, Form, Input, Row, Typography, Layout } from 'antd';
|
||||
const { Header, Footer, Sider, Content } = Layout;
|
||||
const { Title } = Typography;
|
||||
const headerStyle = {
|
||||
textAlign: 'center',
|
||||
// color: '#fff',
|
||||
height: 64,
|
||||
paddingInline: 50,
|
||||
lineHeight: '64px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
};
|
||||
const contentStyle = {
|
||||
textAlign: 'center',
|
||||
minHeight: 600,
|
||||
lineHeight: '120px',
|
||||
// color: '#fff',
|
||||
// backgroundColor: '#108ee9',
|
||||
};
|
||||
const footerStyle = {
|
||||
textAlign: 'center',
|
||||
// color: '#fff',
|
||||
// backgroundColor: '#7dbcea',
|
||||
};
|
||||
const onFinish = (values) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
const onFinishFailed = (errorInfo) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
const Login = () => (
|
||||
<Layout>
|
||||
<Header style={headerStyle}>
|
||||
<Title>Global Highlights Hub</Title>
|
||||
</Header>
|
||||
<Content style={contentStyle}>
|
||||
<Row justify="center" align="middle" style={{minHeight: 600}}>
|
||||
<Form
|
||||
name="basic"
|
||||
labelCol={{
|
||||
span: 8,
|
||||
}}
|
||||
wrapperCol={{
|
||||
span: 16,
|
||||
}}
|
||||
style={{
|
||||
maxWidth: 600,
|
||||
}}
|
||||
initialValues={{
|
||||
remember: true,
|
||||
}}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="Username"
|
||||
name="username"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input your username!',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
import { Button, Checkbox, Form, Input, Row, App } from 'antd';
|
||||
import { useStore } from '@/stores/StoreContext.js';
|
||||
|
||||
<Form.Item
|
||||
label="Password"
|
||||
name="password"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input your password!',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="remember"
|
||||
valuePropName="checked"
|
||||
wrapperCol={{
|
||||
offset: 8,
|
||||
span: 16,
|
||||
}}
|
||||
>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
function Login() {
|
||||
const { authStore } = useStore();
|
||||
const { notification } = App.useApp();
|
||||
|
||||
<Form.Item
|
||||
wrapperCol={{
|
||||
offset: 8,
|
||||
span: 16,
|
||||
}}
|
||||
>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Row>
|
||||
</Content>
|
||||
<Footer style={footerStyle}>Footer</Footer>
|
||||
</Layout>
|
||||
const onFinish = (values) => {
|
||||
console.log('Success:', values);
|
||||
authStore.valdateUserPassword(values.username, values.password);
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
return (
|
||||
<Row justify="center" align="middle" style={{ minHeight: 500 }}>
|
||||
<Form
|
||||
name="basic"
|
||||
labelCol={{
|
||||
span: 8,
|
||||
}}
|
||||
wrapperCol={{
|
||||
span: 16,
|
||||
}}
|
||||
style={{
|
||||
maxWidth: 600,
|
||||
}}
|
||||
initialValues={{
|
||||
remember: true,
|
||||
}}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="Username"
|
||||
name="username"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input your username!',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="Password"
|
||||
name="password"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input your password!',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="remember"
|
||||
valuePropName="checked"
|
||||
wrapperCol={{
|
||||
offset: 8,
|
||||
span: 16,
|
||||
}}
|
||||
>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
wrapperCol={{
|
||||
offset: 8,
|
||||
span: 16,
|
||||
}}
|
||||
>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
);
|
||||
export default Login;
|
||||
@ -0,0 +1,57 @@
|
||||
import { Outlet, Link, useHref, useLocation } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Layout, Menu, ConfigProvider, theme, Typography, Space, Row, Col, Alert, App as AntApp } from "antd";
|
||||
import { DownOutlined } from "@ant-design/icons";
|
||||
import "antd/dist/reset.css";
|
||||
import AppLogo from "@/assets/logo-gh.png";
|
||||
import { useStore } from "@/stores/StoreContext.js";
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Header, Content, Footer } = Layout;
|
||||
|
||||
function Standlone() {
|
||||
const { authStore } = useStore();
|
||||
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: "#00b96b",
|
||||
},
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
}}>
|
||||
<AntApp>
|
||||
<Layout
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
}}>
|
||||
<Header className="header" style={{ position: "sticky", top: 0, zIndex: 1, width: "100%" }}>
|
||||
<Row gutter={{ md: 24 }} justify="center">
|
||||
<Col span={4}>
|
||||
<img src={AppLogo} className="logo" alt="App logo" />
|
||||
</Col>
|
||||
<Col span={20}><Title style={{ color: "white", marginTop: "3.5px" }}>Global Highlights Hub</Title></Col>
|
||||
</Row>
|
||||
</Header>
|
||||
<Content
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
}}>
|
||||
<Outlet />
|
||||
</Content>
|
||||
<Footer></Footer>
|
||||
</Layout>
|
||||
</AntApp>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(Standlone);
|
||||
Loading…
Reference in New Issue