bank feature

frontend/src/containers/Bank.container.js

@@ -52,29 +52,24 @@ export class Bank extends React.Component {
   	return (
   		<Row style={{ width: '95%', margin: '0 auto', marginTop:'30px' }}>
         <Col xs lg="4">
-          <Card style={{ width: '100%', margin: '0 auto', marginTop:'30px', border:'none' }}>
+          <Card style={{ width: '100%', margin: '0 auto', marginTop:'200px', border:'none', textAlign: "center"}}>
             <Card.Body>
               <Card.Title>Balance</Card.Title>
-              <Container>
-                <Row>
-                  <Col xs={6} md={4}>
-                    <Image src={logo_money} width={30} height={30} />
-                  </Col>
-                </Row>
-                <Row>
-                  <Col xs={6} md={4}>
-                    120 €
-                  </Col>
-                </Row>
-              </Container>
+              <Card.Text style={{display: 'flex', justifyContent: 'center'}}>
+                <Image src={logo_money} width={50} height={50} />
+              </Card.Text>
+              <Card.Text style={{display: 'flex', justifyContent: 'center', fontSize:"20px", fontWeight:"bold"}}>
+                120 €
+              </Card.Text>
+              <Button variant="primary">Ajouter des fonds </Button>
             </Card.Body>
           </Card>
         </Col>
         <Col>
-          <Card style={{ width: '100%', margin: '0 auto', marginTop:'30px' }}>
+          <Card style={{ width: '100%', border:'none', margin: '0 auto', marginTop:'30px' }}>
             <Card.Body>
               <Card.Title>Transactions</Card.Title>
-            <Table hover>
+            <Table hover style={{ marginTop:'50px' }}>
               <tbody>
                 <tr>
                   <td><Image src={logo_trans} width={30} height={30} /></td>

frontend/src/containers/SignUp.container.js

+import { connect } from 'react-redux';
+import React from 'react';
+import { withRouter } from 'react-router-dom'
+import * as signupActions from '../actions/SignUp.actions';
+import { Form, Button, Card } from "react-bootstrap";
+
+export class SignUp extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: "",
+      password: "",
+      firstname: "",
+      lastname: "",
+      email: "",
+      student_number: null,
+      date_birth: "",
+    };
+    this.register = this.register.bind(this);
+  }
+
+  componentWillMount() {
+    this.props.reinitializeState();
+  }
+
+  register(e) {
+    this.props.registerRequest(this.state);
+    e.preventDefault();
+  }
+
+  validateForm() {
+    return this.state.username.length > 0 && this.state.password.length > 0;
+  }
+
+  handleChange = event => {
+    this.setState({
+      [event.target.id]: event.target.value
+    });
+  }
+
+
+  render() {
+  	return (
+  		<Card style={{ width: '18rem', margin: '0 auto', marginTop:'30px' }}>
+        <Card.Body>
+          <Card.Title>Register</Card.Title>
+          <Form onSubmit={(e) => this.register(e)}>
+            <Form.Group controlId="username">
+              <Form.Label>Username</Form.Label>
+              <Form.Control
+                autoFocus
+                type="text"
+                value={this.state.username}
+                onChange={this.handleChange}
+              />
+            </Form.Group>
+            <Form.Group controlId="firstname">
+              <Form.Label>Firstname</Form.Label>
+              <Form.Control
+                autoFocus
+                type="text"
+                minLength={1}
+                value={this.state.firstname}
+                onChange={this.handleChange}
+              />
+            </Form.Group>
+            <Form.Group controlId="lastname">
+              <Form.Label>Lastname</Form.Label>
+              <Form.Control
+                autoFocus
+                type="text"
+                minLength={1}
+                value={this.state.lastname}
+                onChange={this.handleChange}
+              />
+            </Form.Group>
+            <Form.Group controlId="email">
+              <Form.Label>E-mail</Form.Label>
+              <Form.Control
+                value={this.state.email}
+                onChange={this.handleChange}
+                type="email"
+              />
+            </Form.Group>
+            <Form.Group controlId="password">
+              <Form.Label>Password</Form.Label>
+              <Form.Control
+                value={this.state.password}
+                onChange={this.handleChange}
+                type="password"
+                minLength={8}
+              />
+            </Form.Group>
+            <Form.Group controlId="date_birth" bsSize="large">
+              <Form.Label>Birthday</Form.Label>
+              <Form.Control
+                type="date"
+                value={this.state.date_birth}
+                onChange={this.handleChange}
+              />
+            </Form.Group>
+            <Form.Group controlId="student_number">
+              <Form.Label>Student number</Form.Label>
+              <Form.Control
+                type="text"
+                minLength={8}
+                maxLength={8}
+                value={this.state.student_number}
+                onChange={this.handleChange}
+              />
+            </Form.Group>
+            <Button
+              block
+              disabled={!this.validateForm()}
+              type="submit"
+              variant="primary"
+            >
+              Register
+            </Button>
+            {this.props.state.loading && <div><br/>Registering you...</div>}
+            {this.props.state.error && <div><br/>{JSON.stringify(this.props.state.errorMessage.message)}</div>}
+            {this.props.state.success && <div><br/>Success! You can now log in.</div>}
+          </Form>
+        </Card.Body>
+      </Card>
+  	);
+  }
+}
+
+// map state from store to props
+const mapStateToProps = (state) => {
+  return {
+    state: state.signup
+  }
+}
+// map actions to props
+const mapDispatchToProps = (dispatch) => {
+  return {
+    registerRequest: (registerData) => dispatch(signupActions.register(registerData)),
+    reinitializeState: () => dispatch(signupActions.reinitializeState()),
+  }
+}
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignUp))