From 7aec420ad62af6d48d1ab0109ec51fe55653da54 Mon Sep 17 00:00:00 2001
From: Victor VOGT <v.vogt@etu.unistra.fr>
Date: Tue, 2 Nov 2021 22:11:43 +0100
Subject: [PATCH] :construction: bank feature
---
frontend/src/containers/Bank.container.js | 25 ++--
frontend/src/containers/SignUp.container.js | 146 ++++++++++++++++++++
2 files changed, 156 insertions(+), 15 deletions(-)
diff --git a/frontend/src/containers/Bank.container.js b/frontend/src/containers/Bank.container.js
index a4b2ceb..b0cd793 100644
--- a/frontend/src/containers/Bank.container.js
+++ b/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>
diff --git a/frontend/src/containers/SignUp.container.js b/frontend/src/containers/SignUp.container.js
index e69de29..3701c29 100644
--- a/frontend/src/containers/SignUp.container.js
+++ b/frontend/src/containers/SignUp.container.js
@@ -0,0 +1,146 @@
+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))
--
GitLab