1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| import React from 'react'
import ReactDOM from 'react-dom'
import injectTapEventPlugin from 'react-tap-event-plugin'
const events = window.require('events')
const path = window.require('path')
const fs = window.require('fs')
const electron = window.require('electron')
const {ipcRenderer, shell} = electron
const {dialog} = electron.remote
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import TextField from 'material-ui/TextField'
import RaisedButton from 'material-ui/RaisedButton'
let muiTheme = getMuiTheme({
fontFamily: 'Microsoft YaHei'
})
class MainWindow extends React.Component {
constructor(props) {
super(props)
injectTapEventPlugin()
this.state = {
username: '',
password: ''
}
}
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div style={styles.root}>
<img style={styles.icon} src="../../public/img/app-logo.jpg" />
<TextField
hintText="请输入用户名"
value={this.state.username}
onChange={(event) => {this.setState({username: event.target.value})}}
/>
<TextField
hintText="请输入密码"
type="password"
value={this.state.password}
onChange={(event) => {this.setState({password: event.target.value})}}
/>
<div style={styles.buttons_container}>
<RaisedButton
label="登录"
primary={true}
onClick={this._handleLogin.bind(this)}
/>
<RaisedButton
label="注册"
primary={false}
style={{marginLeft: 60}}
onClick={this._handleRegistry.bind(this)}
/>
</div>
</div>
</MuiThemeProvider>
)
}
_handleRegistry() {}
_handleLogin() {
let options = {
type: 'info',
buttons: ['确定'],
title: '登录',
message: this.state.username,
defaultId: 0,
cancelId: 0
}
dialog.showMessageBox(options, (res) => {
if (res == 0) {
console.log('OK pressed!');
}
})
}
}
const styles = {
root: {
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
display: 'flex',
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
icon: {
width: 100,
height: 100,
marginBottom: 40
},
buttons_container: {
paddingTop: 30,
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
}
}
ReactDOM.render(
<MainWindow />,
document.getElementById('app')
)
|
