1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
onion/js/components/password_reset_container.js

181 lines
5.9 KiB
JavaScript
Raw Normal View History

2015-06-15 16:56:17 +02:00
'use strict';
import React from 'react';
import { History } from 'react-router';
2015-06-15 16:56:17 +02:00
2015-06-30 14:46:28 +02:00
import Form from './ascribe_forms/form';
import Property from './ascribe_forms/property';
2015-08-07 15:08:02 +02:00
import ApiUrls from '../constants/api_urls';
2015-10-12 17:55:02 +02:00
import AscribeSpinner from './ascribe_spinner';
2015-06-15 16:56:17 +02:00
import GlobalNotificationModel from '../models/global_notification_model';
import GlobalNotificationActions from '../actions/global_notification_actions';
import { getLangText } from '../utils/lang_utils';
import { setDocumentTitle } from '../utils/dom_utils';
2015-06-15 16:56:17 +02:00
let PasswordResetContainer = React.createClass({
2015-10-07 09:39:30 +02:00
propTypes: {
// Provided from AscribeApp
currentUser: React.PropTypes.object,
whitelabel: React.PropTypes.object,
2016-01-11 16:26:36 +01:00
// Provided from router
2015-10-07 09:39:30 +02:00
location: React.PropTypes.object
},
2015-08-06 10:23:01 +02:00
2015-06-30 14:46:28 +02:00
getInitialState() {
return { isRequested: false };
2015-06-30 14:46:28 +02:00
},
2015-08-06 10:23:01 +02:00
handleRequestSuccess(email) {
2016-01-18 17:31:56 +01:00
this.setState({ isRequested: !!email });
2015-06-30 14:46:28 +02:00
},
2015-08-06 10:23:01 +02:00
2015-06-30 14:46:28 +02:00
render() {
const { email: emailQuery, token: tokenQuery } = this.props.location.query;
const { isRequested } = this.state;
2015-10-07 09:39:30 +02:00
if (emailQuery && tokenQuery) {
2015-06-30 14:46:28 +02:00
return (
2016-01-18 17:31:56 +01:00
<PasswordResetForm
email={emailQuery}
token={tokenQuery} />
);
} else if (!isRequested) {
return (
<PasswordRequestResetForm handleRequestSuccess={this.handleRequestSuccess} />
2015-06-30 14:46:28 +02:00
);
} else {
2016-01-18 17:31:56 +01:00
return (
<div className="ascribe-login-text ascribe-login-header">
{getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.')}
</div>
);
2015-06-30 14:46:28 +02:00
}
}
2015-06-30 14:46:28 +02:00
});
2015-06-15 16:56:17 +02:00
2015-06-30 14:46:28 +02:00
let PasswordRequestResetForm = React.createClass({
2015-08-06 10:23:01 +02:00
propTypes: {
handleRequestSuccess: React.PropTypes.func
},
2015-06-30 14:46:28 +02:00
handleSuccess() {
const notificationText = getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.');
const notification = new GlobalNotificationModel(notificationText, 'success', 50000);
2015-06-30 14:46:28 +02:00
GlobalNotificationActions.appendGlobalNotification(notification);
2015-06-30 14:46:28 +02:00
this.props.handleRequestSuccess(this.refs.form.refs.email.state.value);
},
2015-08-06 10:23:01 +02:00
2015-06-30 14:46:28 +02:00
render() {
setDocumentTitle(getLangText('Reset your password'));
2015-06-30 14:46:28 +02:00
return (
<Form
ref="form"
2015-08-18 16:24:36 +02:00
className='ascribe-form-wrapper'
2015-08-07 15:08:02 +02:00
url={ApiUrls.users_password_reset_request}
2015-06-30 14:46:28 +02:00
handleSuccess={this.handleSuccess}
buttons={
<button
type="submit"
2015-10-12 17:55:02 +02:00
className="btn btn-default btn-wide">
{getLangText('Reset your password')}
</button>
}
2015-06-30 14:46:28 +02:00
spinner={
2015-10-12 17:55:02 +02:00
<span className="btn btn-default btn-wide btn-spinner">
<AscribeSpinner color="dark-blue" size="md" />
</span>
}>
2015-08-06 10:23:01 +02:00
<div className="ascribe-form-header">
2015-07-15 13:20:34 +02:00
<h3>{getLangText('Reset your password')}</h3>
2015-08-06 10:23:01 +02:00
</div>
2015-06-30 14:46:28 +02:00
<Property
name='email'
label={getLangText('Email')}>
2015-06-30 14:46:28 +02:00
<input
type="email"
2015-08-06 10:23:01 +02:00
placeholder={getLangText('Enter your email and we\'ll send a link')}
2015-06-30 14:46:28 +02:00
name="email"
required/>
</Property>
<hr />
</Form>
);
}
});
let PasswordResetForm = React.createClass({
2015-08-06 10:23:01 +02:00
propTypes: {
email: React.PropTypes.string,
token: React.PropTypes.string
},
mixins: [History],
2015-06-30 14:46:28 +02:00
2015-08-06 10:23:01 +02:00
getFormData() {
2015-07-10 15:52:09 +02:00
return {
email: this.props.email,
token: this.props.token
};
2015-06-30 14:46:28 +02:00
},
2015-08-06 10:23:01 +02:00
2015-06-30 14:46:28 +02:00
handleSuccess() {
2016-01-11 17:52:32 +01:00
this.history.push('/collection');
const notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
2015-06-15 16:56:17 +02:00
GlobalNotificationActions.appendGlobalNotification(notification);
},
2015-08-06 10:23:01 +02:00
2015-06-15 16:56:17 +02:00
render() {
return (
2015-06-30 14:46:28 +02:00
<Form
ref="form"
2015-08-18 16:24:36 +02:00
className='ascribe-form-wrapper'
2015-08-07 15:08:02 +02:00
url={ApiUrls.users_password_reset}
2015-06-15 16:56:17 +02:00
handleSuccess={this.handleSuccess}
2015-06-30 14:46:28 +02:00
getFormData={this.getFormData}
buttons={
<button
type="submit"
2015-10-12 17:55:02 +02:00
className="btn btn-default btn-wide">
{getLangText('Reset your password')}
</button>
}
2015-06-30 14:46:28 +02:00
spinner={
2015-10-12 17:55:02 +02:00
<span className="btn btn-default btn-wide btn-spinner">
<AscribeSpinner color="dark-blue" size="md" />
</span>
}>
2015-08-06 10:23:01 +02:00
<div className="ascribe-form-header">
2015-07-15 13:20:34 +02:00
<h3>{getLangText('Reset the password for')} {this.props.email}</h3>
2015-08-06 10:23:01 +02:00
</div>
2015-06-30 14:46:28 +02:00
<Property
name='password'
label={getLangText('Password')}>
2015-06-30 14:46:28 +02:00
<input
type="password"
placeholder={getLangText('Enter a new password')}
2015-06-30 14:46:28 +02:00
name="password"
required/>
</Property>
<Property
name='password_confirm'
label={getLangText('Confirm password')}>
2015-06-30 14:46:28 +02:00
<input
type="password"
placeholder={getLangText('Enter your password once again')}
2015-06-30 14:46:28 +02:00
name="password"
required/>
</Property>
<hr />
</Form>
);
}
2015-06-15 16:56:17 +02:00
});
2015-07-13 19:53:16 +02:00
export default PasswordResetContainer;