Commit e8fb82bd authored by 2breakegg's avatar 2breakegg
parents e99aece6 770b9761
......@@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dva Demo</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
......
import React from 'react';
import styles from './Haha.css';
function Haha() {
return (
<div className={styles.normal}>
Component: Haha
</div>
);
}
export default Haha;
......@@ -16,11 +16,13 @@ import Reset from './routes/Reset.js';
import Verify from "./routes/Verify.js";
import Index from "./routes/Index.js";
function RouterConfig({ history }) {
return (
<Router history={history}>
<Redirect from="/" to="/signin"/>
<Route path="/">
<Route path="/" component={Index} >
<Route path="/signin" component={Login}/>
<Route path="/forgot" component={Forgot}/>
<Route path="/signup" component={Register}/>
......
......@@ -55,16 +55,20 @@ class Login extends React.Component {
<Step title={messages['verify-email']} icon={<Icon type="mail" />} />
</Steps>
<FormItem style={{ marginTop: '28px'}}>
<FormItem style={{ marginTop: '28px' }}>
{getFieldDecorator('email', {
rules: [{ required: true, message: 'Please input your username or email!' }],
})(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }}/>} placeholder={messages['email-address-or-username']} />,
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder={messages['email-address-or-username']} />,
)}
</FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'send-email'} />
</Button>
<FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'send-email'} />
</Button>
</FormItem>
<div>
<Link to="/signin"><Format id={'sign-in'} /></Link>
</div>
......
import React from 'react';
import { connect } from 'dva';
import styles from './Index.less';
import Particles from 'react-particles-js'
import DocumentTitle from 'react-document-title'
function Index({ children, messages }) {
return (
<div style={{ height: "100%" }}>
<DocumentTitle title={messages['title'] || 'Moe Cube'}>
<Particles
params={{
'particles': {
'number': {
'value': 20,
'density': {
'enable': true,
'value_area': 1000
}
},
'color': {
'value': '#888',
'opacity': 0.4
},
'shape': {
'type': 'circle',
'stroke': {
'width': 4,
'color': '#888',
'opacity': 0.4
},
'polygon': {
'nb_sides': 5
},
'image': {
'src': 'img/github.svg',
'width': 100,
'height': 100
}
},
'opacity': {
'value': 0.5,
'random': false,
'anim': {
'enable': false,
'speed': 1,
'opacity_min': 0.1,
'sync': false
}
},
'size': {
'value': 3,
'random': true,
'anim': {
'enable': false,
'speed': 1,
'size_min': 0.1,
'sync': false
}
},
'line_linked': {
'enable': true,
'distance': 150,
'color': '#888',
'opacity': 0.4,
'width': 1
},
'move': {
'enable': true,
'speed': 1,
'direction': 'none',
'random': false,
'straight': false,
'out_mode': 'out',
'bounce': false,
'attract': {
'enable': false,
'rotateX': 600,
'rotateY': 1200
}
}
},
'interactivity': {
'detect_on': 'canvas',
'events': {
'onhover': {
'enable': true,
'mode': 'grab',
'nb': 2
},
'onclick': {
'enable': true,
'mode': 'push'
},
'resize': true
},
'modes': {
'grab': {
'distance': 400,
'line_linked': {
'opacity': 0.4
}
},
'bubble': {
'distance': 400,
'size': 20,
'duration': 2,
'opacity': 8,
'speed': 1
},
'repulse': {
'distance': 200,
'duration': 0.4
},
'push': {
'particles_nb': 4
},
'remove': {
'particles_nb': 2
}
}
},
'retina_detect': true
}}
style={{
position: "fixed"
}}
/>
</DocumentTitle>
{children}
</div>
);
}
function mapStateToProps(state) {
const {
common: {messages}
} = state
return {
messages
};
}
export default connect(mapStateToProps)(Index);
.particles {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
\ No newline at end of file
.normal {
font-family: Georgia, sans-serif;
margin-top: 3em;
text-align: center;
}
.title {
font-size: 2.5rem;
font-weight: normal;
letter-spacing: -1px;
}
.welcome {
height: 328px;
background: url(../assets/yay.jpg) no-repeat center 0;
background-size: 388px 328px;
}
.list {
font-size: 1.2em;
margin-top: 1.8em;
list-style: none;
line-height: 1.5em;
}
.list code {
background: #f7f7f7;
}
import { connect } from 'dva';
import React from 'react';
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
<h1 className={styles.title}>Yay! Welcome to dva!</h1>
<div className={styles.welcome}/>
<ul className={styles.list}>
<li>To get started, edit <code>src/index.js</code> and save to reload.</li>
<li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
</ul>
</div>
);
}
IndexPage.propTypes = {};
export default connect()(IndexPage);
......@@ -3,6 +3,7 @@ import { connect } from 'dva';
import { Link } from 'dva/router';
import React, { PropTypes } from 'react';
import { FormattedMessage as Format } from 'react-intl';
import logo from '../assets/MoeCube.png'
import './Login.less';
const FormItem = Form.Item;
......@@ -37,6 +38,9 @@ class Login extends React.Component {
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
<Spin spinning={loading} delay={100}>
<FormItem style={{display: 'flex', justifyContent:'center'}}>
<img src={logo} style={{height:'20vw', width: '20vw'}}/>
</FormItem>
<Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem>
{getFieldDecorator('account', {
......@@ -58,6 +62,7 @@ class Login extends React.Component {
<Format id={'sign-in'} />
</Button>
</FormItem>
<div>
<Link to="/signup"><Format id={'sign-up'} /></Link>
<Link to="/forgot" className="login-form-forgot"><Format id={'forgot-password'} /></Link>
......
......@@ -104,7 +104,7 @@ class Profiles extends React.Component {
return (
<Spin spinning={loading} delay={100}>
<Tabs defaultActiveKey="1" className="app-detail-nav">
<TabPane tab={<span><Icon type="setting" /><Format id={'user-info'} /> </span>} key="1">
<TabPane tab={<span><Icon type="user" /><Format id={'user-info'} /> </span>} key="1">
<Form onSubmit={this.onUpdateSubmit}>
<FormItem style={{ display: 'flex', justifyContent: 'center' }}>
......
......@@ -85,7 +85,7 @@ class Register extends React.Component {
<Step title={messages['verify-email']} icon={<Icon type="mail" />} />
</Steps>
<Form onSubmit={this.onSubmitLogin} className="login-form" style={{ marginTop: '24px'}}>
<Form onSubmit={this.onSubmitLogin} className="login-form" style={{ marginTop: '24px' }}>
<FormItem {...emailProps} >
{getFieldDecorator('email', {
rules: [{
......@@ -106,7 +106,7 @@ class Register extends React.Component {
pattern: /^[A-Za-z0-9_\u4E00-\u9FD5\u3400-\u4DBF\u{20000}-\u{2A6DF}\u{2A700}-\u{2CEAF}\uF900–\uFAFF\u{2F800}-\u{2FA1D}\uAC00–\uD7AF\u3040-\u30FF\u31F0–\u31FF\u{1B000}–\u{1B0FF}\u3005]+$/u,
}],
}, {})(
<Input {...usernameInputProps}/>,
<Input {...usernameInputProps} />,
)}
</FormItem>
......@@ -114,12 +114,12 @@ class Register extends React.Component {
{getFieldDecorator('password', {
rules: [{ required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ }],
}, {
validator: this.checkConfirm,
})(
validator: this.checkConfirm,
})(
<Input
prefix={<Icon type="lock" style={{ fontSize: 13 }}/>}
prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
type="password"
placeholder={messages.password}/>,
placeholder={messages.password} />,
)}
</FormItem>
......@@ -132,16 +132,19 @@ class Register extends React.Component {
}],
})(
<Input
prefix={<Icon type="lock" style={{ fontSize: 13 }}/>}
prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
type="password"
onBlur={this.handleConfirmBlur}
placeholder={messages['password-again']}/>,
placeholder={messages['password-again']} />,
)}
</FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'sign-up'} />
</Button>
<FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'sign-up'} />
</Button>
</FormItem>
<div>
<Link to="/signin"><Format id={'sign-in'} /></Link>
</div>
......
import request from '../utils/request';
export async function query() {
return request('/api/users');
}
......@@ -2,6 +2,20 @@
# yarn lockfile v1
"@types/node@^7.0.8":
version "7.0.12"
resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.12.tgz#ae5f67a19c15f752148004db07cbbb372e69efc9"
"@types/react-dom@^0.14.23":
version "0.14.23"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-0.14.23.tgz#cecfcfad754b4c2765fe5d29b81b301889ad6c2e"
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^15.0.16":
version "15.0.21"
resolved "https://registry.yarnpkg.com/@types/react/-/react-15.0.21.tgz#29d849427237c1463abfb7b370755ee3e5b5b375"
abbrev@1, abbrev@1.0.x:
version "1.0.9"
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
......@@ -2073,6 +2087,10 @@ eventsource@^0.1.3:
dependencies:
original ">=0.0.5"
exenv@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.1.tgz#75de1c8dee02e952b102aa17f8875973e0df14f9"
exit-hook@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
......@@ -4504,6 +4522,12 @@ react-dev-utils@^0.4.2:
sockjs-client "1.0.3"
strip-ansi "3.0.1"
react-document-title@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/react-document-title/-/react-document-title-2.0.2.tgz#1e42b672d300f8f90d8d05544b0d71f0ca7860aa"
dependencies:
react-side-effect "^1.0.2"
react-dom@^0.14.0:
version "0.14.8"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.14.8.tgz#0f1c547514263f771bd31814a739e5306575069e"
......@@ -4543,6 +4567,15 @@ react-lazy-load@^3.0.10:
lodash.debounce "^4.0.0"
lodash.throttle "^4.0.0"
react-particles-js@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/react-particles-js/-/react-particles-js-1.5.0.tgz#d30313c52941282b8f8f58eaf909056bcf57a2ba"
dependencies:
"@types/node" "^7.0.8"
"@types/react" "^15.0.16"
"@types/react-dom" "^0.14.23"
react "^15.4.1"
react-redux@4.4.x:
version "4.4.6"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.6.tgz#4b9d32985307a11096a2dd61561980044fcc6209"
......@@ -4574,6 +4607,13 @@ react-router@^2.8.1:
loose-envify "^1.2.0"
warning "^3.0.0"
react-side-effect@^1.0.2:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.0.tgz#57209f7ebc940d55e0fda82fe51422654175d609"
dependencies:
exenv "^1.2.1"
shallowequal "^0.2.2"
react-slick@~0.14.2:
version "0.14.7"
resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.14.7.tgz#5035f8b070f26fd18be1f6d3adc7dd2ab4b0bc2f"
......@@ -4591,7 +4631,7 @@ react@^0.14.0:
envify "^3.0.0"
fbjs "^0.6.1"
react@^15.4.0:
react@^15.4.0, react@^15.4.1:
version "15.4.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"
dependencies:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment