Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3c3d30e

Browse files
author
Cristian
committed
User profile form into new component
1 parent 0f23d6c commit 3c3d30e

File tree

2 files changed

+154
-142
lines changed

2 files changed

+154
-142
lines changed
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, { Component, Fragment } from 'react';
2+
import { Formik } from 'formik';
3+
import { Button, Form } from 'semantic-ui-react';
4+
import FormMessages from '../FormMessages';
5+
import { profileValidationSchema } from '../../validation/user-schema';
6+
7+
class UserProfileForm extends Component {
8+
state = {
9+
username: '',
10+
email: '',
11+
};
12+
13+
componentDidMount() {
14+
Meteor.call('getUserData', (err, res) => {
15+
if (err) {
16+
Bert.alert('There was an error trying to get your user data', 'danger');
17+
return false;
18+
}
19+
20+
this.setState({ username: res.username, email: res.emails[0].address });
21+
});
22+
}
23+
24+
render() {
25+
const { username, email } = this.state;
26+
return (
27+
<Formik
28+
validationSchema={profileValidationSchema}
29+
initialValues={{ email, username }}
30+
enableReinitialize
31+
onSubmit={(values, { setSubmitting }) => {
32+
const options = { username: values.username };
33+
34+
Meteor.call('updateUserData', Meteor.userId(), options, (err) => {
35+
if (err) {
36+
Bert.alert(
37+
`There was an error trying to update your user data ${err.message}`,
38+
'danger',
39+
);
40+
return false;
41+
}
42+
Bert.alert('Your profile was updated successfully', 'success');
43+
setSubmitting(false);
44+
});
45+
}}
46+
render={({
47+
values,
48+
touched,
49+
errors,
50+
handleSubmit,
51+
handleChange,
52+
handleBlur,
53+
isSubmitting,
54+
}) => (
55+
<Fragment>
56+
<FormMessages errors={errors} touched={touched} />
57+
<Form>
58+
<Form.Input value={values.email} fluid label="Email" type="email" readOnly />
59+
<Form.Input
60+
onChange={handleChange}
61+
onBlur={handleBlur}
62+
value={values.username}
63+
name="username"
64+
fluid
65+
required
66+
label="Username"
67+
type="text"
68+
placeholder="Username"
69+
/>
70+
<Button color="blue" onClick={handleSubmit} disabled={isSubmitting} type="submit">
71+
Save
72+
</Button>
73+
</Form>
74+
</Fragment>
75+
)}
76+
/>
77+
);
78+
}
79+
}
80+
81+
export default UserProfileForm;

‎imports/ui/pages/MyAccountPage.js‎

Lines changed: 73 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,84 @@
1-
import React, { Component,Fragment } from 'react';
1+
import React, { Fragment } from 'react';
22
import { withRouter } from 'react-router-dom';
33
import PropTypes from 'prop-types';
44
import { Formik } from 'formik';
55
import {
66
Button, Form, Container, Header, Segment,
77
} from 'semantic-ui-react';
88
import FormMessages from '../components/FormMessages';
9-
import { resetPasswordValidationSchema, profileValidationSchema } from '../validation/user-schema';
9+
import { resetPasswordValidationSchema } from '../validation/user-schema';
10+
import UserProfileForm from '../components/Forms/UserProfileForm';
1011

11-
class MyAccountPage extends Component {
12-
state = {
13-
username: '',
14-
email: '',
15-
};
16-
17-
componentDidMount() {
18-
Meteor.call('getUserData', (err, res) => {
19-
if (err) {
20-
Bert.alert('There was an error trying to get your user data', 'danger');
21-
return false;
22-
}
23-
24-
this.setState({ username: res.username, email: res.emails[0].address });
25-
});
26-
}
27-
28-
render() {
29-
const { username, email } = this.state;
30-
return (
31-
<Container>
32-
<Header as="h1">My Account</Header>
33-
<Segment padded>
34-
<Formik
35-
validationSchema={profileValidationSchema}
36-
initialValues={{ email, username }}
37-
enableReinitialize
38-
onSubmit={(values, { setSubmitting }) => {
39-
const options = { username: values.username };
40-
41-
Meteor.call('updateUserData', Meteor.userId(), options, (err) => {
42-
if (err) {
43-
Bert.alert(
44-
`There was an error trying to update your user data ${err.message}`,
45-
'danger',
46-
);
47-
return false;
48-
}
49-
Bert.alert('Your profile was updated successfully', 'success');
50-
setSubmitting(false);
51-
});
52-
}}
53-
render={({
54-
values,
55-
touched,
56-
errors,
57-
handleSubmit,
58-
handleChange,
59-
handleBlur,
60-
isSubmitting,
61-
}) => (
62-
<Fragment>
63-
<FormMessages errors={errors} touched={touched} />
64-
<Form>
65-
<Form.Input value={values.email} fluid label="Email" type="email" readOnly />
66-
<Form.Input
67-
onChange={handleChange}
68-
onBlur={handleBlur}
69-
value={values.username}
70-
name="username"
71-
fluid
72-
required
73-
label="Username"
74-
type="text"
75-
placeholder="Username"
76-
/>
77-
<Button color="blue" onClick={handleSubmit} disabled={isSubmitting} type="submit">
78-
Save
79-
</Button>
80-
</Form>
81-
</Fragment>
82-
)}
83-
/>
84-
<br />
85-
<Formik
86-
validationSchema={resetPasswordValidationSchema}
87-
initialValues={{ password: '', passwordConfirm: '' }}
88-
onSubmit={(values, { setSubmitting }) => {
89-
Meteor.call('changeUserPassword', Meteor.userId(), values.passwordConfirm, (err) => {
90-
if (err) {
91-
Bert.alert(
92-
`There was an error trying to update your password ${err.message}`,
93-
'danger',
94-
);
95-
return false;
96-
}
97-
Bert.alert('Your password was updated successfully', 'success');
98-
setSubmitting(false);
99-
// We need to wait 1 second before redirecting user to login
100-
// That's because meteor userId() does not update instantly
101-
setTimeout(() => {
102-
const { history } = this.props;
103-
history.push('/login');
104-
}, 1000);
105-
});
106-
}}
107-
render={({
108-
values,
109-
touched,
110-
errors,
111-
handleSubmit,
112-
handleChange,
113-
handleBlur,
114-
isSubmitting,
115-
}) => (
116-
<Fragment>
117-
<FormMessages errors={errors} touched={touched} />
118-
<Form>
119-
<Form.Input
120-
onChange={handleChange}
121-
onBlur={handleBlur}
122-
value={values.password}
123-
name="password"
124-
fluid
125-
label="New password"
126-
type="password"
127-
placeholder="New password"
128-
/>
129-
<Form.Input
130-
onChange={handleChange}
131-
onBlur={handleBlur}
132-
value={values.passwordConfirm}
133-
name="passwordConfirm"
134-
fluid
135-
label="Confirm Password"
136-
type="Password"
137-
placeholder="Confirm Password"
138-
/>
139-
<Button color="blue" onClick={handleSubmit} disabled={isSubmitting} type="submit">
140-
Change password
141-
</Button>
142-
</Form>
143-
</Fragment>
144-
)}
145-
/>
146-
</Segment>
147-
</Container>
148-
);
149-
}
150-
}
12+
const MyAccountPage = props => (
13+
<Container>
14+
<Header as="h1">My Account</Header>
15+
<Segment padded>
16+
<UserProfileForm />
17+
<br />
18+
<Formik
19+
validationSchema={resetPasswordValidationSchema}
20+
initialValues={{ password: '', passwordConfirm: '' }}
21+
onSubmit={(values, { setSubmitting }) => {
22+
Meteor.call('changeUserPassword', Meteor.userId(), values.passwordConfirm, (err) => {
23+
if (err) {
24+
Bert.alert(
25+
`There was an error trying to update your password ${err.message}`,
26+
'danger',
27+
);
28+
return false;
29+
}
30+
Bert.alert('Your password was updated successfully', 'success');
31+
setSubmitting(false);
32+
// We need to wait 1 second before redirecting user to login
33+
// That's because meteor userId() does not update instantly
34+
setTimeout(() => {
35+
const { history } = props;
36+
history.push('/login');
37+
}, 1000);
38+
});
39+
}}
40+
render={({
41+
values,
42+
touched,
43+
errors,
44+
handleSubmit,
45+
handleChange,
46+
handleBlur,
47+
isSubmitting,
48+
}) => (
49+
<Fragment>
50+
<FormMessages errors={errors} touched={touched} />
51+
<Form>
52+
<Form.Input
53+
onChange={handleChange}
54+
onBlur={handleBlur}
55+
value={values.password}
56+
name="password"
57+
fluid
58+
label="New password"
59+
type="password"
60+
placeholder="New password"
61+
/>
62+
<Form.Input
63+
onChange={handleChange}
64+
onBlur={handleBlur}
65+
value={values.passwordConfirm}
66+
name="passwordConfirm"
67+
fluid
68+
label="Confirm Password"
69+
type="Password"
70+
placeholder="Confirm Password"
71+
/>
72+
<Button color="blue" onClick={handleSubmit} disabled={isSubmitting} type="submit">
73+
Change password
74+
</Button>
75+
</Form>
76+
</Fragment>
77+
)}
78+
/>
79+
</Segment>
80+
</Container>
81+
);
15182

15283
MyAccountPage.propTypes = {
15384
history: PropTypes.object.isRequired,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /