Skip to content

Commit 344ab56

Browse files
weyproweypro
authored
Merge pull request #4 from weypro/master
login
2 parents 09c0bfd + 1f32560 commit 344ab56

File tree

7 files changed

+243
-31
lines changed

7 files changed

+243
-31
lines changed

‎src/config/config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,5 @@ let _Setting = {
4646
DEBUG_MODE: true,
4747
};
4848

49+
4950
export default _Setting;

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ import * as serviceWorker from "./serviceWorker";
77
ReactDOM.render(<App />, document.getElementById("root"));
88

99
serviceWorker.unregister();
10+

‎src/page/login.js‎

Lines changed: 150 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,155 @@
11
import React from "react";
2+
import SwipeableViews from "react-swipeable-views";
3+
import Logo from "../static/logo.png";
24

3-
class Login extends React.Component {
4-
render() {
5-
return <div>Login</div>;
6-
}
5+
import {
6+
CssBaseline,
7+
Container,
8+
CardContent,
9+
Typography,
10+
TextField,
11+
Link,
12+
Button,
13+
Grid,
14+
FormControlLabel,
15+
Checkbox,
16+
LinearProgress,
17+
Collapse,
18+
Tabs,
19+
Tab,
20+
} from "@material-ui/core";
21+
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
22+
23+
import FlexCard from "../component/flex_card.js";
24+
import TabPanel from "../component/tab_panel.js";
25+
import Setting from "../config/config.js";
26+
import "../static/css/logcommon.css";
27+
import "../static/css/login.css";
28+
29+
const theme = createMuiTheme({
30+
palette: {
31+
primary: {
32+
main: "#1890FF",
33+
},
34+
secondary: {
35+
main: "#64b5f6",
36+
},
37+
},
38+
});
39+
40+
function Login() {
41+
let [protocol, setProtocol] = React.useState(false);
42+
let [clientWidth, setClientWidth] = React.useState(document.body.clientWidth);
43+
let [page, setPage] = React.useState(1);
44+
let [loading, setLoading] = React.useState(false);
45+
let [tabs, setTabs] = React.useState(0);
46+
47+
let handleResize = () => {
48+
setClientWidth(document.body.clientWidth);
49+
};
50+
51+
let handleProtocolChange = (event) => {
52+
setProtocol(event.target.checked);
53+
};
54+
55+
let handleNextPage = (event) => {
56+
// 验证表单
57+
58+
setLoading(true);
59+
setTimeout(() => {
60+
setLoading(false);
61+
setPage(2);
62+
}, 1000);
63+
};
64+
65+
let handleChangeTab = (event, newValue) => {
66+
setTabs(newValue);
67+
};
68+
69+
let handleChangeIndex = (index) => {
70+
setTabs(index);
71+
};
72+
73+
window.addEventListener("resize", handleResize);
74+
75+
return (
76+
<>
77+
<ThemeProvider theme={theme}>
78+
<CssBaseline />
79+
<Collapse in={loading}>
80+
<LinearProgress />
81+
</Collapse>
82+
<Container maxWidth={clientWidth <= 600 ? false : "xs"} className={clientWidth <= 600 ? "" : "container"}>
83+
<div>
84+
<FlexCard size={clientWidth <= 600 ? "small" : "large"}>
85+
<Collapse in={page === 1}>
86+
<CardContent className={page === 1 ? "validation-card" : "validation-card-none"}>
87+
<div className="register-tip">
88+
<img className="logo" src={Logo} alt="Logo" />
89+
<Typography className="register-tip-text" variant="h1">
90+
登录
91+
</Typography>
92+
<p className="project-tip-text">一个账号，畅享BlueAirLive所有服务</p>
93+
<Tabs
94+
value={tabs}
95+
onChange={handleChangeTab}
96+
indicatorColor="primary"
97+
textColor="primary"
98+
variant="fullWidth"
99+
>
100+
<Tab label="密码登录" />
101+
<Tab label="短信验证码登录" />
102+
</Tabs>
103+
<div className="tab-view">
104+
<SwipeableViews
105+
axis={theme.direction === "rtl" ? "x-reverse" : "x"}
106+
index={tabs}
107+
onChangeIndex={handleChangeIndex}
108+
>
109+
<TabPanel value={tabs} index={0} dir={theme.direction}>
110+
<TextField className="input" label="邮箱或手机号码" />
111+
<TextField className="input" label="密码" />
112+
</TabPanel>
113+
<TabPanel value={tabs} index={1} dir={theme.direction}>
114+
<TextField className="input" label="手机号码" />
115+
<TextField className="input" label="验证码" />
116+
</TabPanel>
117+
</SwipeableViews>
118+
</div>
119+
120+
<Grid container justify="center" alignItems="center">
121+
<Grid item xs={6} className="options-left">
122+
<Link href="/#/register">注册账号</Link>
123+
</Grid>
124+
<Grid item xs={6} className="options-right">
125+
<Button variant="contained" color="primary" onClick={handleNextPage} disableElevation>
126+
下一步
127+
</Button>
128+
</Grid>
129+
</Grid>
130+
</div>
131+
</CardContent>
132+
</Collapse>
133+
<Collapse in={page === 2}>
134+
<CardContent className={page === 2 ? "register-card" : "register-card-none"}>
135+
<div className="register-tip">
136+
<img className="logo" src={Logo} alt="Logo" />
137+
<Typography className="register-tip-text" variant="h1">
138+
登录验证
139+
</Typography>
140+
<p className="project-tip-text">一个账号，畅享BlueAirLive所有服务</p>
141+
</div>
142+
请手动返回
143+
144+
</CardContent>
145+
</Collapse>
146+
</FlexCard>
147+
</div>
148+
</Container>
149+
</ThemeProvider>
150+
</>
151+
);
7152
}
8153

154+
9155
export default Login;

‎src/page/register.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import SwipeableViews from "react-swipeable-views";
33
import Logo from "../static/logo.png";
4+
45
import {
56
CssBaseline,
67
Container,
@@ -18,15 +19,18 @@ import {
1819
Tab,
1920
} from "@material-ui/core";
2021
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
22+
2123
import FlexCard from "../component/flex_card.js";
2224
import TabPanel from "../component/tab_panel.js";
2325
import Setting from "../config/config.js";
26+
import "../static/css/logcommon.css";
2427
import "../static/css/register.css";
2528

29+
2630
const theme = createMuiTheme({
2731
palette: {
2832
primary: {
29-
main: "#1e88e5",
33+
main: "#1890FF",
3034
},
3135
secondary: {
3236
main: "#64b5f6",
@@ -56,7 +60,7 @@ function Register() {
5660
setTimeout(() => {
5761
setLoading(false);
5862
setPage(2);
59-
}, 3000);
63+
}, 1000);
6064
};
6165

6266
let handleChangeTab = (event, newValue) => {
@@ -79,12 +83,12 @@ function Register() {
7983
<Container maxWidth={clientWidth <= 600 ? false : "xs"} className={clientWidth <= 600 ? "" : "container"}>
8084
<div>
8185
<FlexCard size={clientWidth <= 600 ? "small" : "large"}>
82-
<Collapse in={page === 2}>
86+
<Collapse in={page === 2} >
8387
<CardContent className={page === 2 ? "validation-card" : "validation-card-none"}>
8488
<div className="register-tip">
8589
<img className="logo" src={Logo} alt="Logo" />
8690
<Typography className="register-tip-text" variant="h1">
87-
验证您的电子邮箱或手机
91+
验证您的账号
8892
</Typography>
8993
<p className="project-tip-text">一个账号，畅享BlueAirLive所有服务</p>
9094
<Tabs
@@ -153,7 +157,7 @@ function Register() {
153157
<Link href="/#/login">登录账号</Link>
154158
</Grid>
155159
<Grid item xs={6} className="options-right">
156-
<Button variant="contained" color="primary" onClick={handleNextPage}>
160+
<Button variant="contained" color="primary" onClick={handleNextPage} disableElevation>
157161
下一步
158162
</Button>
159163
</Grid>

‎src/static/css/logcommon.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.container {
2+
display: flex !important;
3+
height: calc(100vh - 4px);
4+
justify-content: center;
5+
align-items: center;
6+
}
7+
8+
.logo {
9+
width: 80px;
10+
height: 80px;
11+
text-align: center;
12+
margin-bottom: 0.3em;
13+
}
14+
15+
.register-card,
16+
.validation-card {
17+
width: 100%;
18+
padding: 20px 40px 36px !important;
19+
}
20+
21+
.register-card-none,
22+
.validation-card-none {
23+
display: none;
24+
}
25+
26+
.register-tip {
27+
text-align: center;
28+
}
29+
30+
.register-tip-text {
31+
display: block;
32+
font-size: 24px !important;
33+
font-weight: 400 !important;
34+
line-height: 32px !important;
35+
}
36+
37+
.project-tip-text {
38+
color: rgba(0, 0, 0, 0.45);
39+
font-size: 14px;
40+
}
41+
42+
.input {
43+
width: 100%;
44+
margin-bottom: 0.3em !important;
45+
}
46+
47+
.email-tip-text {
48+
font-size: 12px;
49+
text-align: left;
50+
margin-bottom: 0.5em;
51+
}
52+
53+
.password-tip-text {
54+
font-size: 12px;
55+
text-align: left;
56+
}
57+
58+
.options-right {
59+
text-align: right;
60+
}
61+
62+
.options-left {
63+
text-align: left;
64+
}
65+
66+
.progress-hidden {
67+
visibility: hidden;
68+
}
69+
70+
/*有个老哥想让input更粗一点*/
71+
.MuiInput-underline:before {
72+
border-bottom: 1.4px solid rgba(0, 0, 0, 0.3) !important;
73+
}
74+
75+
/*重置focus，不然感觉不好看*/
76+
.MuiButton-containedPrimary:focus {
77+
background-color: #1890FF !important;
78+
}

‎src/static/css/login.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.tab-view{
2+
margin-top: 0.4em;
3+
margin-bottom: 1em;
4+
}

‎src/static/css/register.css‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
.container {
2-
display: flex !important;
3-
height: calc(100vh - 4px);
4-
justify-content: center;
5-
align-items: center;
6-
}
7-
8-
.logo {
9-
width: 80px;
10-
height: 80px;
11-
text-align: center;
12-
margin-bottom: 0.3em;
13-
}
141

152
.register-card,
163
.validation-card {
@@ -55,15 +42,6 @@
5542
text-align: left;
5643
}
5744

58-
.options-right {
59-
text-align: right;
60-
}
61-
6245
.progress-hidden {
6346
visibility: hidden;
6447
}
65-
66-
/*有个老哥想让input更粗一点*/
67-
.MuiInput-underline:before {
68-
border-bottom: 1.5px solid rgba(0, 0, 0, 0.3) !important;
69-
}

0 commit comments

Comments
 (0)