From 1d5d8a01c2498d2a3fe61005f08fdba94aa5e805 Mon Sep 17 00:00:00 2001
From: Victor VOGT <v.vogt@etu.unistra.fr>
Date: Mon, 15 Nov 2021 11:53:28 +0100
Subject: [PATCH] :sparkles: Added modal when no adhesion paid + changed style
for bank + french traduction
---
frontend/src/App.js | 46 ++++++++++++++-----
frontend/src/actions/Login.actions.js | 21 +++++++--
frontend/src/containers/Bank.container.js | 8 ++--
frontend/src/containers/Login.container.js | 8 ++--
frontend/src/containers/Profile.container.js | 24 +++++-----
frontend/src/containers/SignUp.container.js | 20 ++++----
frontend/src/containers/Users.container.js | 8 ++--
frontend/src/reducers/Login.reducer.js | 28 +++++------
.../src/services/authentication.service.js | 10 ++++
9 files changed, 111 insertions(+), 62 deletions(-)
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 0e3278b..8ee5b9f 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -7,7 +7,7 @@ import SignUp from './containers/SignUp.container';
import Login from './containers/Login.container';
import Profile from './containers/Profile.container';
import Bank from './containers/Bank.container';
-import { Navbar, Nav } from 'react-bootstrap';
+import { Navbar, Nav, Modal, Button } from 'react-bootstrap';
import {userService} from "./services/authentication.service";
import * as loginActions from './actions/Login.actions';
import * as profileActions from './actions/Profile.actions';
@@ -38,44 +38,68 @@ class App extends Component {
<Navbar.Brand>STUDENT</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link as={Link} to="/">
- List users
+ Utilisateurs
</Nav.Link>
{!this.props.loginState.loggedIn &&
<Nav.Link as={Link} to="/signup/">
- Sign up
+ S'inscrire
</Nav.Link>
}
{ !this.props.loginState.loggedIn &&
<Nav.Link as={Link} to="/login/">
- Sign in
+ Se connecter
</Nav.Link>
}
{ this.props.loginState.loggedIn &&
<Nav.Link as={Link} to="/profile/">
- Profile
+ Profil
</Nav.Link>
}
{ this.props.loginState.loggedIn &&
<Nav.Link as={Link} to="/bank/">
- Bank
+ Compte
</Nav.Link>
}
{ this.props.loginState.loggedIn &&
- <Nav.Link as={Link} to="/" onClick={(e) => {e.preventDefault(); this.props.logoutRequest()}} >
- Log out
- </Nav.Link>
+ <Nav.Link as={Link} to="/" onClick={(e) => {e.preventDefault(); this.props.logoutRequest()}} >
+ Se déconnecter
+ </Nav.Link>
}
</Nav>
-
+
{this.props.loginState.loggedIn &&
<Navbar.Collapse className="justify-content-end">
<Navbar.Text>
- Signed in as: <Link to="/profile/">{this.props.profileState.me.username}</Link>
+ Connecté en tant que: <Link to="/profile/">{this.props.profileState.me.username}</Link>
</Navbar.Text>
</Navbar.Collapse>
}
</Navbar>
+ {this.props.loginState.loggedIn && !this.props.loginState.adhesionPaid &&
+ <Modal
+ show="true"
+ size="lg"
+ aria-labelledby="contained-modal-title-vcenter"
+ centered
+ >
+ <Modal.Header>
+ <Modal.Title id="contained-modal-title-vcenter">
+ Avertissement
+ </Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <h4>En attente de paiement de l'adhésion</h4>
+ <p>
+ Veuillez contacter votre faculté afin de régler la somme pour adhérer au système de ccommunication de la faculté.
+ </p>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button onClick={(e) => {e.preventDefault(); this.props.logoutRequest()}}>Se déconnecter</Button>
+ </Modal.Footer>
+ </Modal>
+ }
+
<Route path="/" exact component={Users} />
<Route path="/signup/" component={SignUp} />
<Route path="/login/" component={Login} />
diff --git a/frontend/src/actions/Login.actions.js b/frontend/src/actions/Login.actions.js
index 5e51ed6..44c4a25 100644
--- a/frontend/src/actions/Login.actions.js
+++ b/frontend/src/actions/Login.actions.js
@@ -13,9 +13,15 @@ export const logoutSuccess = () => {
}
}
-export const loginSuccess = () => {
+export const loginSuccessWaitForPayment = () => {
return {
- type:'LOGIN_SUCCESS'
+ type:'LOGIN_SUCCESS_WAIT_PAYMENT'
+ }
+}
+
+export const loginSuccesPaymentDone = () => {
+ return {
+ type:'LOGIN_SUCCESS_PAYMENT_DONE'
}
}
@@ -47,11 +53,18 @@ export const login = (loginData, ownProps) => {
if(response.ok){
response.json().then(data => {
- dispatch(loginSuccess(data));
userService.setToken(data.token);
dispatch(fetchUserData());
ownProps.history.push('/');
- // TODO: redirect to home
+ // TODO: do another request to know if user paid adhesion
+ var paid=true;
+ if(paid){
+ userService.setAdhesion(true);
+ dispatch(loginSuccesPaymentDone(data));
+ } else {
+ userService.setToken(false);
+ dispatch(loginSuccessWaitForPayment(data));
+ }
}).catch(err => dispatch(loginFailed(err)));
}
else{
diff --git a/frontend/src/containers/Bank.container.js b/frontend/src/containers/Bank.container.js
index b0cd793..349fdfe 100644
--- a/frontend/src/containers/Bank.container.js
+++ b/frontend/src/containers/Bank.container.js
@@ -3,7 +3,7 @@ import React from 'react';
import logo_trans from '../icons/transaction.png';
import logo_money from '../icons/dollar.png';
import { withRouter } from 'react-router-dom'
-import { Table, Accordion, Button, Card, Image, Container, Row, Col } from "react-bootstrap";
+import { Table, Button, Card, Image, Row, Col } from "react-bootstrap";
import * as bankActions from "../actions/Bank.actions";
export class Bank extends React.Component {
@@ -52,14 +52,14 @@ 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:'200px', border:'none', textAlign: "center"}}>
+ <Card className="block-example border border-dark" style={{ width: '100%', margin: '0 auto', marginTop:'200px', border:'none', textAlign: "center"}}>
<Card.Body>
- <Card.Title>Balance</Card.Title>
+ <Card.Title>Compte</Card.Title>
<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 €
+ <div className="p-3 block-example border border-dark rounded-pill">120 €</div>
</Card.Text>
<Button variant="primary">Ajouter des fonds </Button>
</Card.Body>
diff --git a/frontend/src/containers/Login.container.js b/frontend/src/containers/Login.container.js
index de341ac..31f6005 100644
--- a/frontend/src/containers/Login.container.js
+++ b/frontend/src/containers/Login.container.js
@@ -40,10 +40,10 @@ export class Login extends React.Component {
return (
<Card style={{ width: '18rem', margin: '0 auto', marginTop:'30px' }}>
<Card.Body>
- <Card.Title>Login</Card.Title>
+ <Card.Title>Se connecter</Card.Title>
<Form onSubmit={(e) => this.login(e)}>
<Form.Group controlId="username">
- <Form.Label>Username</Form.Label>
+ <Form.Label>Nom d'utilisateur</Form.Label>
<Form.Control
autoFocus
type="text"
@@ -52,7 +52,7 @@ export class Login extends React.Component {
/>
</Form.Group>
<Form.Group controlId="password">
- <Form.Label>Password</Form.Label>
+ <Form.Label>Mot de passe</Form.Label>
<Form.Control
value={this.state.password}
onChange={this.handleChange}
@@ -65,7 +65,7 @@ export class Login extends React.Component {
type="submit"
variant="primary"
>
- Login
+ Se connecter
</Button>
{this.props.state.loading && <div><br/>Logging you in...</div>}
{this.props.state.error && <div><br/>{JSON.stringify(this.props.state.errorMessage.message)}</div>}
diff --git a/frontend/src/containers/Profile.container.js b/frontend/src/containers/Profile.container.js
index 783cc68..2a89c19 100644
--- a/frontend/src/containers/Profile.container.js
+++ b/frontend/src/containers/Profile.container.js
@@ -50,7 +50,7 @@ export class Profile extends React.Component {
return (
<Card style={{ width: '18rem', margin: '0 auto', marginTop:'30px' }}>
<Card.Body>
- <Card.Title>Profile</Card.Title>
+ <Card.Title>Profil</Card.Title>
<Container>
<Row>
<Col xs={6} md={4}>
@@ -60,7 +60,7 @@ export class Profile extends React.Component {
</Container>
<Form autoComplete="off" onSubmit={(e) => {e.preventDefault(); this.changeUserData()}}>
<Form.Group controlId="username">
- <Form.Label>Username</Form.Label>
+ <Form.Label>Nom d'utilisateur</Form.Label>
<Form.Control
defaultValue={this.props.state.me.username}
onChange={this.handleChange}
@@ -71,7 +71,7 @@ export class Profile extends React.Component {
/>
</Form.Group>
<Form.Group controlId="firstname">
- <Form.Label>First name</Form.Label>
+ <Form.Label>Prénom</Form.Label>
<Form.Control
defaultValue={this.props.state.me.firstname}
onChange={this.handleChange}
@@ -81,7 +81,7 @@ export class Profile extends React.Component {
/>
</Form.Group>
<Form.Group controlId="lastname">
- <Form.Label>Last Name</Form.Label>
+ <Form.Label>Nom</Form.Label>
<Form.Control
defaultValue={this.props.state.me.lastname}
onChange={this.handleChange}
@@ -91,7 +91,7 @@ export class Profile extends React.Component {
/>
</Form.Group>
<Form.Group controlId="student_number">
- <Form.Label>No Student</Form.Label>
+ <Form.Label>Numéro Etudiant</Form.Label>
<Form.Control
defaultValue={this.props.state.me.student_number}
onChange={this.handleChange}
@@ -102,7 +102,7 @@ export class Profile extends React.Component {
/>
</Form.Group>
<Form.Group controlId="email">
- <Form.Label>Email</Form.Label>
+ <Form.Label>E-mail</Form.Label>
<Form.Control
defaultValue={this.props.state.me.email}
onChange={this.handleChange}
@@ -112,7 +112,7 @@ export class Profile extends React.Component {
/>
</Form.Group>
<Form.Group controlId="date_birth">
- <Form.Label>Date Birth</Form.Label>
+ <Form.Label>Date d'anniversaire</Form.Label>
<Form.Control
defaultValue={this.props.state.me.date_birth}
onChange={this.handleChange}
@@ -124,7 +124,7 @@ export class Profile extends React.Component {
{ !this.state.readOnly && this.state.password &&
<Form.Group controlId="oldpassword">
- <Form.Label>Old Password</Form.Label>
+ <Form.Label>Ancien mot de passe</Form.Label>
<Form.Control
onChange={this.handleChange}
type="password"
@@ -134,7 +134,7 @@ export class Profile extends React.Component {
}
{ !this.state.readOnly &&
<Form.Group controlId="password">
- <Form.Label>Password</Form.Label>
+ <Form.Label>Mot de passe</Form.Label>
<Form.Control
onClick={(e) => {
this.setState({changePass: true});
@@ -152,7 +152,7 @@ export class Profile extends React.Component {
type="submit"
variant="primary"
>
- Save
+ Enregistrer
</Button>
}
{ this.state.readOnly &&
@@ -161,12 +161,12 @@ export class Profile extends React.Component {
onClick={this.switchToEditionMode}
variant="primary"
>
- Edit
+ Modifier
</Button>
}
</Form>
{this.props.state.updateUserError && <div><br/>{JSON.stringify(this.props.state.updateUserErrorMessage.message)}</div>}
- {this.props.state.updateUserSuccess && <div><br/>Profile changed with success.</div>}
+ {this.props.state.updateUserSuccess && <div><br/>Profil modifié avec succès.</div>}
</Card.Body>
</Card>
);
diff --git a/frontend/src/containers/SignUp.container.js b/frontend/src/containers/SignUp.container.js
index 3701c29..7e30345 100644
--- a/frontend/src/containers/SignUp.container.js
+++ b/frontend/src/containers/SignUp.container.js
@@ -45,10 +45,10 @@ export class SignUp extends React.Component {
return (
<Card style={{ width: '18rem', margin: '0 auto', marginTop:'30px' }}>
<Card.Body>
- <Card.Title>Register</Card.Title>
+ <Card.Title>S'inscrire</Card.Title>
<Form onSubmit={(e) => this.register(e)}>
<Form.Group controlId="username">
- <Form.Label>Username</Form.Label>
+ <Form.Label>Nom d'utilisatuer</Form.Label>
<Form.Control
autoFocus
type="text"
@@ -57,7 +57,7 @@ export class SignUp extends React.Component {
/>
</Form.Group>
<Form.Group controlId="firstname">
- <Form.Label>Firstname</Form.Label>
+ <Form.Label>Prénom</Form.Label>
<Form.Control
autoFocus
type="text"
@@ -67,7 +67,7 @@ export class SignUp extends React.Component {
/>
</Form.Group>
<Form.Group controlId="lastname">
- <Form.Label>Lastname</Form.Label>
+ <Form.Label>Nom</Form.Label>
<Form.Control
autoFocus
type="text"
@@ -85,7 +85,7 @@ export class SignUp extends React.Component {
/>
</Form.Group>
<Form.Group controlId="password">
- <Form.Label>Password</Form.Label>
+ <Form.Label>Mot de passe</Form.Label>
<Form.Control
value={this.state.password}
onChange={this.handleChange}
@@ -94,7 +94,7 @@ export class SignUp extends React.Component {
/>
</Form.Group>
<Form.Group controlId="date_birth" bsSize="large">
- <Form.Label>Birthday</Form.Label>
+ <Form.Label>Date d'anniversaire</Form.Label>
<Form.Control
type="date"
value={this.state.date_birth}
@@ -102,7 +102,7 @@ export class SignUp extends React.Component {
/>
</Form.Group>
<Form.Group controlId="student_number">
- <Form.Label>Student number</Form.Label>
+ <Form.Label>Numéro Etudiant</Form.Label>
<Form.Control
type="text"
minLength={8}
@@ -117,11 +117,11 @@ export class SignUp extends React.Component {
type="submit"
variant="primary"
>
- Register
+ S'inscrire
</Button>
- {this.props.state.loading && <div><br/>Registering you...</div>}
+ {this.props.state.loading && <div><br/>Veuillez patienter...</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>}
+ {this.props.state.success && <div><br/>Vous etes inscrit! Vous pouvez vous connecter.</div>}
</Form>
</Card.Body>
</Card>
diff --git a/frontend/src/containers/Users.container.js b/frontend/src/containers/Users.container.js
index 1785e18..b0d7455 100644
--- a/frontend/src/containers/Users.container.js
+++ b/frontend/src/containers/Users.container.js
@@ -18,11 +18,11 @@ export class Users extends React.Component {
return (
<Card style={{ width: '90vw', margin: '0 auto', marginTop:'30px' }}>
<Card.Body>
- <Card.Title>Users</Card.Title>
+ <Card.Title>Utilisateurs</Card.Title>
<Table striped bordered hover>
<thead>
<tr>
- <td>Username</td>
+ <td>Nom d'utilisateur</td>
</tr>
</thead>
<tbody>
@@ -31,8 +31,8 @@ export class Users extends React.Component {
})}
</tbody>
</Table>
- {this.props.state.error && <div>Error while fetching users.</div>}
- {this.props.state.loading && <div>Loading users...</div>}
+ {this.props.state.error && <div>Une erreur est survenue pendant le chargement des utilisateurs.</div>}
+ {this.props.state.loading && <div>Chargement...</div>}
</Card.Body>
</Card>
);
diff --git a/frontend/src/reducers/Login.reducer.js b/frontend/src/reducers/Login.reducer.js
index 94933a1..47e76ee 100644
--- a/frontend/src/reducers/Login.reducer.js
+++ b/frontend/src/reducers/Login.reducer.js
@@ -10,20 +10,22 @@ const INITIAL_STATE = {
const loginReducer = (currentState = INITIAL_STATE, action) => {
switch (action.type) {
- case 'REINITIALIZE_STATE':
- return {...currentState, loading:false, error: false, errorMessage: {}};
- case 'LOGIN_REQUEST':
- return {...currentState, loading:true, error: false, errorMessage: {}, loggedIn: false};
- case 'LOGIN_FAILED':
- return {...currentState, loading:false, error: true, errorMessage: action.message, loggedIn:false};
- case 'LOGIN_SUCCESS':
- return {...currentState, loading:false, error: false, errorMessage: {}, loggedIn:true};
- case 'LOGOUT_SUCCESS':
- return {...currentState, loading:false, error: false, errorMessage: {}, loggedIn:false};
- case 'GET_AUTH':
- return {...currentState, loggedIn: userService.loggedIn()}
+ case 'REINITIALIZE_STATE':
+ return {...currentState, loading:false, error: false, errorMessage: {}};
+ case 'LOGIN_REQUEST':
+ return {...currentState, loading:true, error: false, errorMessage: {}, loggedIn: false};
+ case 'LOGIN_FAILED':
+ return {...currentState, loading:false, error: true, errorMessage: action.message, loggedIn:false};
+ case 'LOGIN_SUCCESS_WAIT_PAYMENT':
+ return {...currentState, loading:false, error: false, errorMessage: {}, loggedIn:true, adhesionPaid:false};
+ case 'LOGIN_SUCCESS_PAYMENT_DONE':
+ return {...currentState, loading:false, error: false, errorMessage: {}, loggedIn:true, adhesionPaid:true};
+ case 'LOGOUT_SUCCESS':
+ return {...currentState, loading:false, error: false, errorMessage: {}, loggedIn:false};
+ case 'GET_AUTH':
+ return {...currentState, loggedIn: userService.loggedIn(), adhesionPaid:userService.getAdhesion()}
default:
- return currentState;
+ return currentState;
}
}
diff --git a/frontend/src/services/authentication.service.js b/frontend/src/services/authentication.service.js
index df4294a..9f721e8 100644
--- a/frontend/src/services/authentication.service.js
+++ b/frontend/src/services/authentication.service.js
@@ -2,6 +2,8 @@ import decode from 'jwt-decode';
export const userService = {
loggedIn:loggedIn,
+ getAdhesion:getAdhesion,
+ setAdhesion:setAdhesion,
setToken:setToken,
isTokenExpired:isTokenExpired,
getToken:getToken,
@@ -29,6 +31,14 @@ function isTokenExpired(token) {
}
}
+function getAdhesion() {
+ return localStorage.getItem('adhesion')
+}
+
+function setAdhesion(adhesionExists) {
+ return localStorage.setItem('adhesion', adhesionExists)
+}
+
function setToken(idToken) {
localStorage.setItem('id_token', idToken)
}
--
GitLab