Implemented proper SignUp to FrontPage.

Author: przucidlo

src/frontpage/FrontPage.css

@@ -0,0 +1,3 @@
+.button-spacer{
+ width: 10px;
+}

src/frontpage/FrontPage.js

@@ -3,13 +3,17 @@ import SignIn from './signin/SignIn';
 import SignUp from './signup/SignUp';
 import { Navbar, NavbarBrand } from 'reactstrap';
 import githubMarkSmall from './assets/GitHub-Mark-32px.png'
+import './FrontPage.css';
 
 export default class FrontPage extends React.Component {
  render() {
  return (
  <div className="h-100 d-flex flex-column">
  <Navbar color="light" light>
  <NavbarBrand href="/" className="mr-auto"></NavbarBrand>
+ <SignUp />
+ <div className="button-spacer" />
+ <SignIn />
  </Navbar>
  <div className="d-flex flex-grow-1">
  <div className="d-flex flex-fill justify-content-center align-items-center flex-column text-center">

src/frontpage/signin/SignIn.js

@@ -21,7 +21,7 @@ class SignIn extends React.Component{
  render(){
  return (
  <div>
- <SignInForm/>
+ <button type="button" class="btn btn-outline-primary">SignIn</button>
  </div>
  );
  }

src/frontpage/signup/SignUp.js

@@ -1,13 +1,18 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import SignUpForm from './SignUpForm';
+import SignUpModal from './SignUpModal';
 
 export class SignUp extends Component {
+ constructor(props){
+ super(props);
+ }
 
  render() {
  return (
  <div>
- <SignUpForm />
+ <SignUpModal ref="modal"/>
+ <button type="button" class="btn btn-outline-secondary" onClick={() => { this.refs.modal.getWrappedInstance().toggle()}} >SignUp</button>
  </div>
  )
  }

src/frontpage/signup/SignUpForm.js

@@ -5,7 +5,7 @@ import { signUp } from './SignUpAPI';
 import { setAuthStatus } from '../../redux/actions/AuthActions';
 
 export class SignUpForm extends Component {
- constructor(props){
+ constructor(props) {
  super(props);
  this.state = {
  username: '',
@@ -21,7 +21,7 @@ export class SignUpForm extends Component {
  * SignUp process.
  */
 
- performSignUp(){
+ performSignUp() {
  signUp(this.state.username, this.state.password, this.props.setAuthStatus);
  }
 
@@ -30,26 +30,22 @@ export class SignUpForm extends Component {
  * Forms event handling.
  */
 
- handleUsernameChange(event){
- this.setState({username: event.target.value});
+ handleUsernameChange(event) {
+ this.setState({ username: event.target.value });
  }
 
- handlePasswordChange(event){
- this.setState({password: event.target.value});
+ handlePasswordChange(event) {
+ this.setState({ password: event.target.value });
  }
 
- render(){
- return(
- <form className="form-size">
- <div className="form-group">
- <label>Username</label>
- <input type="text" className="form-control" value={this.state.username} onChange={this.handleUsernameChange}/>
- <label>Password</label>
- <input type="password" className="form-control" value={this.state.password} onChange={this.handlePasswordChange}/>
- <br />
- <button type="button" className="btn btn-secondary" onClick={this.performSignUp} >SignUp</button>
- </div>
- </form>
+ render() {
+ return (
+ <div>
+ <label>Username</label>
+ <input type="text" className="form-control" value={this.state.username} onChange={this.handleUsernameChange} />
+ <label>Password</label>
+ <input type="password" className="form-control" value={this.state.password} onChange={this.handlePasswordChange} />
+ </div>
  )
  }
 }
@@ -58,12 +54,8 @@ SignUpForm.propTypes = {
  setAuthStatus: PropTypes.func
 }
 
-const mapStateToProps = (state) => ({
- 
-})
-
 const mapDispatchToProps = {
  setAuthStatus
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SignUpForm)
+export default connect(null, mapDispatchToProps, null, {withRef: true})(SignUpForm)

src/frontpage/signup/SignUpModal.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import SignUpForm from './SignUpForm';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {connect} from 'react-redux';
+
+class SignUpModal extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ modal: false
+ }
+ this.toggle = this.toggle.bind(this);
+ }
+
+ toggle() {
+ this.setState({
+ modal: !this.state.modal
+ })
+ }
+
+ render() {
+ return (
+ <div>
+ <Modal isOpen={this.state.modal} toggle={this.toggle}>
+ <ModalHeader toggle={this.toggle}>SignUp</ModalHeader>
+ <ModalBody>
+ <SignUpForm ref="signUpForm"/>
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={() => {this.refs.signUpForm.getWrappedInstance().performSignUp()}}>SignUp</Button>{' '}
+ <Button color="secondary" onClick={this.toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ )
+ }
+}
+
+export default connect(null, null, null, {withRef: true})(SignUpModal)