Skip to content

M
Moecube Accounts Web
Commit d3d97340 authored by nano's avatar nano
Browse files
Options

particle

parent f9c4e7cd
Hide whitespace changes
Inline Side-by-side
Showing with 199 additions and 35 deletions
package.json
View file @ d3d97340
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
"react-cropper": "^0.10.1", "react-cropper": "^0.10.1",
"react-dom": "^15.4.0", "react-dom": "^15.4.0",
"react-image-crop": "^2.0.3", "react-image-crop": "^2.0.3",
"react-intl": "^2.2.3" "react-intl": "^2.2.3",
"react-particles-js": "^1.5.0"
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^7.1.1", "babel-eslint": "^7.1.1",
......
src/components/Haha.js deleted 100644 → 0
View file @ f9c4e7cd
import React from 'react';
import styles from './Haha.css';
function Haha() {
return (
<div className={styles.normal}>
Component: Haha
</div>
);
}
export default Haha;
src/router.js
View file @ d3d97340
...@@ -16,11 +16,13 @@ import Reset from './routes/Reset.js'; ...@@ -16,11 +16,13 @@ import Reset from './routes/Reset.js';
import Verify from "./routes/Verify.js"; import Verify from "./routes/Verify.js";
import Index from "./routes/Index.js";
function RouterConfig({ history }) { function RouterConfig({ history }) {
return ( return (
<Router history={history}> <Router history={history}>
<Redirect from="/" to="/signin"/> <Redirect from="/" to="/signin"/>
<Route path="/"> <Route path="/" component={Index} >
<Route path="/signin" component={Login}/> <Route path="/signin" component={Login}/>
<Route path="/forgot" component={Forgot}/> <Route path="/forgot" component={Forgot}/>
<Route path="/signup" component={Register}/> <Route path="/signup" component={Register}/>
......
src/routes/Forgot.js
View file @ d3d97340
...@@ -55,16 +55,20 @@ class Login extends React.Component { ...@@ -55,16 +55,20 @@ class Login extends React.Component {
<Step title={messages['verify-email']} icon={<Icon type="mail" />} /> <Step title={messages['verify-email']} icon={<Icon type="mail" />} />
</Steps> </Steps>
<FormItem style={{ marginTop: '28px'}}> <FormItem style={{ marginTop: '28px' }}>
{getFieldDecorator('email', { {getFieldDecorator('email', {
rules: [{ required: true, message: 'Please input your username or 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> </FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'send-email'} /> <FormItem>
</Button> <Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'send-email'} />
</Button>
</FormItem>
<div> <div>
<Link to="/signin"><Format id={'sign-in'} /></Link> <Link to="/signin"><Format id={'sign-in'} /></Link>
</div> </div>
......
src/routes/Index.js 0 → 100644
View file @ d3d97340
import React from 'react';
import { connect } from 'dva';
import styles from './Index.less';
import Particles from 'react-particles-js'
function Index({ children }) {
return (
<div style={{ height: "100%" }}>
<Particles
params={{
'particles': {
'number': {
'value': 80,
'density': {
'enable': true,
'value_area': 800
}
},
'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': 40,
'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"
}}
/>
{children}
</div>
);
}
function mapStateToProps() {
return {};
}
export default connect(mapStateToProps)(Index);
src/routes/Index.less 0 → 100644
View file @ d3d97340
.particles {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
\ No newline at end of file
src/routes/Login.js
View file @ d3d97340
...@@ -58,6 +58,7 @@ class Login extends React.Component { ...@@ -58,6 +58,7 @@ class Login extends React.Component {
<Format id={'sign-in'} /> <Format id={'sign-in'} />
</Button> </Button>
</FormItem> </FormItem>
<div> <div>
<Link to="/signup"><Format id={'sign-up'} /></Link> <Link to="/signup"><Format id={'sign-up'} /></Link>
<Link to="/forgot" className="login-form-forgot"><Format id={'forgot-password'} /></Link> <Link to="/forgot" className="login-form-forgot"><Format id={'forgot-password'} /></Link>
......
src/routes/Profiles.js
View file @ d3d97340
...@@ -104,7 +104,7 @@ class Profiles extends React.Component { ...@@ -104,7 +104,7 @@ class Profiles extends React.Component {
return ( return (
<Spin spinning={loading} delay={100}> <Spin spinning={loading} delay={100}>
<Tabs defaultActiveKey="1" className="app-detail-nav"> <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}> <Form onSubmit={this.onUpdateSubmit}>
<FormItem style={{ display: 'flex', justifyContent: 'center' }}> <FormItem style={{ display: 'flex', justifyContent: 'center' }}>
......
src/routes/Register.js
View file @ d3d97340
...@@ -85,7 +85,7 @@ class Register extends React.Component { ...@@ -85,7 +85,7 @@ class Register extends React.Component {
<Step title={messages['verify-email']} icon={<Icon type="mail" />} /> <Step title={messages['verify-email']} icon={<Icon type="mail" />} />
</Steps> </Steps>
<Form onSubmit={this.onSubmitLogin} className="login-form" style={{ marginTop: '24px'}}> <Form onSubmit={this.onSubmitLogin} className="login-form" style={{ marginTop: '24px' }}>
<FormItem {...emailProps} > <FormItem {...emailProps} >
{getFieldDecorator('email', { {getFieldDecorator('email', {
rules: [{ rules: [{
...@@ -106,7 +106,7 @@ class Register extends React.Component { ...@@ -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, 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> </FormItem>
...@@ -114,12 +114,12 @@ class Register extends React.Component { ...@@ -114,12 +114,12 @@ class Register extends React.Component {
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{ required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ }], rules: [{ required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ }],
}, { }, {
validator: this.checkConfirm, validator: this.checkConfirm,
})( })(
<Input <Input
prefix={<Icon type="lock" style={{ fontSize: 13 }}/>} prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
type="password" type="password"
placeholder={messages.password}/>, placeholder={messages.password} />,
)} )}
</FormItem> </FormItem>
...@@ -132,16 +132,19 @@ class Register extends React.Component { ...@@ -132,16 +132,19 @@ class Register extends React.Component {
}], }],
})( })(
<Input <Input
prefix={<Icon type="lock" style={{ fontSize: 13 }}/>} prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
type="password" type="password"
onBlur={this.handleConfirmBlur} onBlur={this.handleConfirmBlur}
placeholder={messages['password-again']}/>, placeholder={messages['password-again']} />,
)} )}
</FormItem> </FormItem>
<Button type="primary" htmlType="submit" className="login-form-button"> <FormItem>
<Format id={'sign-up'} /> <Button type="primary" htmlType="submit" className="login-form-button">
</Button> <Format id={'sign-up'} />
</Button>
</FormItem>
<div> <div>
<Link to="/signin"><Format id={'sign-in'} /></Link> <Link to="/signin"><Format id={'sign-in'} /></Link>
</div> </div>
......
yarn.lock
View file @ d3d97340
...@@ -2,6 +2,20 @@ ...@@ -2,6 +2,20 @@
# yarn lockfile v1 # 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: abbrev@1, abbrev@1.0.x:
version "1.0.9" version "1.0.9"
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135" resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
...@@ -4543,6 +4557,15 @@ react-lazy-load@^3.0.10: ...@@ -4543,6 +4557,15 @@ react-lazy-load@^3.0.10:
lodash.debounce "^4.0.0" lodash.debounce "^4.0.0"
lodash.throttle "^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: react-redux@4.4.x:
version "4.4.6" version "4.4.6"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.6.tgz#4b9d32985307a11096a2dd61561980044fcc6209" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.6.tgz#4b9d32985307a11096a2dd61561980044fcc6209"
...@@ -4591,7 +4614,7 @@ react@^0.14.0: ...@@ -4591,7 +4614,7 @@ react@^0.14.0:
envify "^3.0.0" envify "^3.0.0"
fbjs "^0.6.1" fbjs "^0.6.1"
react@^15.4.0: react@^15.4.0, react@^15.4.1:
version "15.4.2" version "15.4.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef" resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"
dependencies: 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