Skip to content
Snippets Groups Projects
Commit ea2d12f6 authored by VOGT VICTOR's avatar VOGT VICTOR
Browse files

Merge branch 'develop' into 'feature/modify-profile' 

# Conflicts:
#   frontend/src/containers/Profile.container.js
#   frontend/src/containers/SignUp.container.js
parents 0e36b77f bcc4af23
Branches
1 merge request!4Feature/modify profile
Hide whitespace changes
Inline Side-by-side
backend/models/user.js
+ 4
− 0
View file @ ea2d12f6
...@@ -56,6 +56,10 @@ const UserSchema = new mongoose.Schema({ ...@@ -56,6 +56,10 @@ const UserSchema = new mongoose.Schema({
select: false, select: false,
default: null, default: null,
}, },
url_photo: {
type:String,
required: false,
}
}); });
UserSchema.set('toJSON', { UserSchema.set('toJSON', {
......
frontend/src/containers/Login.container.js
+ 3
− 3
View file @ ea2d12f6
...@@ -5,13 +5,13 @@ import * as loginActions from '../actions/Login.actions'; ...@@ -5,13 +5,13 @@ import * as loginActions from '../actions/Login.actions';
import { Form, Button, Card } from "react-bootstrap"; import { Form, Button, Card } from "react-bootstrap";
export class Login extends React.Component { export class Login extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
username: "", username: "",
password: "" password: "",
}; };
this.login = this.login.bind(this); this.login = this.login.bind(this);
...@@ -71,7 +71,7 @@ export class Login extends React.Component { ...@@ -71,7 +71,7 @@ export class Login extends React.Component {
{this.props.state.error && <div><br/>{JSON.stringify(this.props.state.errorMessage.message)}</div>} {this.props.state.error && <div><br/>{JSON.stringify(this.props.state.errorMessage.message)}</div>}
</Form> </Form>
</Card.Body> </Card.Body>
</Card> </Card>
); );
} }
} }
......
frontend/src/containers/Profile.container.js
+ 0
− 191
View file @ ea2d12f6
import { connect } from 'react-redux';
import React from 'react';
import { withRouter } from 'react-router-dom'
import { Form, Button, Card, Image, Container, Row, Col } from "react-bootstrap";
import * as profileActions from "../actions/Profile.actions";
export class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
readOnly: true
};
this.switchToEditionMode = this.switchToEditionMode.bind(this);
}
componentWillMount(){
this.props.fetchUserData();
this.props.reinitializeState();
}
componentDidUpdate(prevProps) {
if (prevProps.state !== this.props.state) {
this.setState({
readOnly: this.props.state.updateUserSuccess
});
}
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value,
});
}
switchToEditionMode() {
this.setState({
readOnly: false
});
}
changeUserData() {
this.props.changeUserData(this.state);
}
render() {
return (
<Card style={{ width: '18rem', margin: '0 auto', marginTop:'30px' }}>
<Card.Body>
<Card.Title>Profile</Card.Title>
<Container>
<Row>
<Col xs={6} md={4}>
<Image src={this.props.state.me.picture} width={210} height={210} roundedCircle />
</Col>
</Row>
</Container>
<Form autoComplete="off" onSubmit={(e) => {e.preventDefault(); this.changeUserData()}}>
<Form.Group controlId="username">
<Form.Label>Username</Form.Label>
<Form.Control
defaultValue={this.props.state.me.username}
onChange={this.handleChange}
type="text"
minLength={8}
readOnly
plaintext
/>
</Form.Group>
<Form.Group controlId="firstname">
<Form.Label>First name</Form.Label>
<Form.Control
defaultValue={this.props.state.me.firstname}
onChange={this.handleChange}
type="text"
minLength={8}
readOnly={this.state.readOnly}
/>
</Form.Group>
<Form.Group controlId="lastname">
<Form.Label>Last Name</Form.Label>
<Form.Control
defaultValue={this.props.state.me.lastname}
onChange={this.handleChange}
type="text"
minLength={8}
readOnly={this.state.readOnly}
/>
</Form.Group>
<Form.Group controlId="student_number">
<Form.Label>No Student</Form.Label>
<Form.Control
defaultValue={this.props.state.me.student_number}
onChange={this.handleChange}
type="text"
minLength={8}
readOnly
plaintext
/>
</Form.Group>
<Form.Group controlId="email">
<Form.Label>Email</Form.Label>
<Form.Control
defaultValue={this.props.state.me.email}
onChange={this.handleChange}
type="text"
minLength={8}
readOnly={this.state.readOnly}
/>
</Form.Group>
<Form.Group controlId="date_birth">
<Form.Label>Date Birth</Form.Label>
<Form.Control
defaultValue={this.props.state.me.date_birth}
onChange={this.handleChange}
type="date"
minLength={8}
readOnly={this.state.readOnly}
/>
</Form.Group>
{ !this.state.readOnly && this.state.password &&
<Form.Group controlId="oldpassword">
<Form.Label>Old Password</Form.Label>
<Form.Control
onChange={this.handleChange}
type="password"
minLength={8}
/>
</Form.Group>
}
{ !this.state.readOnly &&
<Form.Group controlId="password">
<Form.Label>Password</Form.Label>
<Form.Control
onClick={(e) => {
this.setState({changePass: true});
}}
onChange={this.handleChange}
onBlur={this.handleChange}
type="password"
minLength={8}
/>
</Form.Group>
}
{ !this.state.readOnly &&
<Button
block
type="submit"
variant="primary"
>
Save
</Button>
}
{ this.state.readOnly &&
<Button
block
onClick={this.switchToEditionMode}
variant="primary"
>
Edit
</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>}
</Card.Body>
</Card>
);
}
}
// map state from store to props
const mapStateToProps = (state) => {
return {
state: state.profile
}
}
// map actions to props
const mapDispatchToProps = (dispatch) => {
return {
fetchUserData: () => dispatch(profileActions.fetchUserData()),
changeUserData: (data) => dispatch(profileActions.changeUserData(data)),
reinitializeState: () => dispatch(profileActions.reinitializeState()),
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Profile))
frontend/src/containers/SignUp.container.js
+ 0
− 146
View file @ ea2d12f6
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))
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment