Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

API & Client: Profile update

Browse Source
This commit is contained in:
SamR1
2018-01-01 16:59:46 +01:00
parent cac4f368bf
commit 2c4f3c4462
16 changed files with 524 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
mpwo_client/src/components/App.css
View File

@ -31,6 +31,14 @@
text-align: left;
}
label {
width: 100%;
}
input, textarea {
width: 100%;
}
.page-title {
font-size: 2em;
margin: 1em;

13
mpwo_client/src/components/App.jsx
View File

@ -7,6 +7,7 @@ import Logout from './User/Logout'
import NavBar from './NavBar'
import NotFound from './NotFound'
import Profile from './User/Profile'
import ProfileEdit from './User/ProfileEdit'
import UserForm from './User/UserForm'
import { isLoggedIn } from '../utils'
@ -57,6 +58,18 @@ export default class App extends React.Component {
)}
/>
<Route exact path="/logout" component={Logout} />
<Route
exact path="/profile/edit"
render={() => (
isLoggedIn() ? (
<ProfileEdit />
) : (
<UserForm
formType={'Login'}
/>
)
)}
/>
<Route
exact path="/profile"
render={() => (

4
mpwo_client/src/components/User/Form.jsx
View File

@ -51,10 +51,10 @@ export default function Form (props) {
{props.formType === 'Register' &&
<div className="form-group">
<input
name="password-conf"
name="passwordConf"
className="form-control input-lg"
type="password"
placeholder="Enter password confirmation"
placeholder="Enter the password confirmation"
required
onChange={props.onHandleFormChange}
/>

7
mpwo_client/src/components/User/Profile.jsx
View File

@ -28,7 +28,12 @@ function Profile ({ user }) {
<div className="row">
<div className="col-md-8">
<p>Email : {user.email}</p>
<p>Registration date : {user.createdAt}</p>
<p>Registration Date : {user.createdAt}</p>
<p>First Name : {user.firstName}</p>
<p>Last Name : {user.lastName}</p>
<p>Birth Date : {user.birthDate}</p>
<p>Location : {user.location}</p>
<p>Bio : {user.bio}</p>
</div>
</div>
</div>

162
mpwo_client/src/components/User/ProfileEdit.jsx Normal file
View File

@ -0,0 +1,162 @@
import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import {
initProfileForm,
updateProfileFormData,
handleProfileFormSubmit
} from '../../actions'
class ProfileEdit extends React.Component {
componentDidMount() {
this.props.initForm(this.props.user)
}
render () {
const { formProfile,
onHandleFormChange,
onHandleProfileFormSubmit,
user
} = this.props
return (
<div>
<Helmet>
<title>mpwo - {user.username} - Edit Profile</title>
</Helmet>
<div className="container">
<h1 className="page-title">Profile Edition</h1>
<div className="row">
<div className="col-md-2" />
<div className="col-md-8">
<div className="card">
<div className="card-header">
{user.username}
</div>
<div className="card-body">
<div className="row">
<div className="col-md-12">
<form onSubmit={event =>
onHandleProfileFormSubmit(event)}
>
<div className="form-group">
<label>Email:
<input
name="email"
className="form-control input-lg"
type="text"
value={user.email}
readOnly
/>
</label>
</div>
<div className="form-group">
<label>
Registration Date:
<input
name="createdAt"
className="form-control input-lg"
type="text"
value={user.createdAt}
readOnly
/>
</label>
</div>
<div className="form-group">
<label>
First Name:
<input
name="firstName"
className="form-control input-lg"
type="text"
value={formProfile.firstName}
onChange={onHandleFormChange}
/>
</label>
</div>
<div className="form-group">
<label>
Last Name:
<input
name="lastName"
className="form-control input-lg"
type="text"
value={formProfile.lastName}
onChange={onHandleFormChange}
/>
</label>
</div>
<div className="form-group">
<label>
Birth Date
<input
name="birthDate"
className="form-control input-lg"
type="text"
value={formProfile.birthDate}
onChange={onHandleFormChange}
/>
</label>
</div>
<div className="form-group">
<label>
Location:
<input
name="location"
className="form-control input-lg"
type="text"
value={formProfile.location}
onChange={onHandleFormChange}
/>
</label>
</div>
<div className="form-group">
<label>
Bio:
<textarea
name="bio"
className="form-control input-lg"
maxLength="200"
type="text"
value={formProfile.bio}
onChange={onHandleFormChange}
/>
</label>
</div>
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
value="Submit"
/>
</form>
</div>
</div>
</div>
</div>
</div>
<div className="col-md-2" />
</div>
</div>
</div>
)
}
}
export default connect(
state => ({
formProfile: state.formProfile.formProfile,
user: state.user,
}),
dispatch => ({
initForm: () => {
dispatch(initProfileForm())
},
onHandleFormChange: event => {
dispatch(updateProfileFormData(event.target.name, event.target.value))
},
onHandleProfileFormSubmit: event => {
dispatch(handleProfileFormSubmit(event))
},
})
)(ProfileEdit)

2
mpwo_client/src/components/User/UserForm.jsx
View File

@ -47,7 +47,7 @@ export default connect(
}),
dispatch => ({
onHandleFormChange: event => {
dispatch(handleFormChange(event))
dispatch(handleFormChange(event.target.name, event.target.value))
},
onHandleUserFormSubmit: (event, formType) => {
dispatch(handleUserFormSubmit(event, formType))