import * as React from 'react' ; import { withRouter } from 'react-router' ; import { LoginForm } from 'components' ; import 'particles.js' ; const styles = require ( './index.scss' ) ; interface ILogin { form : any ; history : any ; } @ withRouter class Login extends React . Component < ILogin , any > { handleLoginSuccess = ( ) => { this . props . history . push ( '/user/list' ) ; } ; componentDidMount ( ) { if ( 'particlesJS' in window ) { particlesJS ( "particles-js" , { "particles" : { "number" : { "value" : 380 , "density" : { "enable" : true , "value_area" : 800 } } , "color" : { "value" : "#ffffff" } , "shape" : { "type" : "circle" , "stroke" : { "width" : 0 , "color" : "#000000" } , "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" : 40 , "size_min" : 0.1 , "sync" : false } } , "line_linked" : { "enable" : true , "distance" : 150 , "color" : "#ffffff" , "opacity" : 0.4 , "width" : 1 } , "move" : { "enable" : true , "speed" : 6 , "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" } , "onclick" : { "enable" : true , "mode" : "push" } , "resize" : true } , "modes" : { "grab" : { "distance" : 140 , "line_linked" : { "opacity" : 1 } } , "bubble" : { "distance" : 400 , "size" : 40 , "duration" : 2 , "opacity" : 8 , "speed" : 3 } , "repulse" : { "distance" : 200 , "duration" : 0.4 } , "push" : { "particles_nb" : 4 } , "remove" : { "particles_nb" : 2 } } } , "retina_detect" : true } ) ; } } render ( ) { return ( < div className = { styles . container } > < LoginForm onSuccess = { this . handleLoginSuccess } /> < /div>); } } export default Login ;