mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

PLT-3005 Added confirmation screen to integrations (#3747)

Просмотр исходного кода
Этот коммит содержится в:
David Lu
2016-08-15 11:10:31 -04:00
коммит произвёл Joram Wilander
родитель 5e6af8e970
Коммит ef33f3fcd1
11 изменённых файлов: 286 добавлений и 20 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

6
webapp/components/integrations/components/add_command.jsx
Просмотреть файл

@@ -160,8 +160,8 @@ export default class AddCommand extends React.Component {
AsyncClient.addCommand(
command,
() => {
browserHistory.push('/' + this.props.team.name + '/integrations/commands');
(data) => {
browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=commands&id=' + data.token);
},
(err) => {
this.setState({
@@ -313,7 +313,7 @@ export default class AddCommand extends React.Component {
/>
</Link>
<FormattedMessage
id='add_command.header'
id='integrations.add'
defaultMessage='Add'
/>
</BackstageHeader>

6
webapp/components/integrations/components/add_incoming_webhook.jsx
Просмотреть файл

@@ -73,8 +73,8 @@ export default class AddIncomingWebhook extends React.Component {
AsyncClient.addIncomingHook(
hook,
() => {
browserHistory.push('/' + this.props.team.name + '/integrations/incoming_webhooks');
(data) => {
browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=incoming_webhooks&id=' + data.id);
},
(err) => {
this.setState({
@@ -114,7 +114,7 @@ export default class AddIncomingWebhook extends React.Component {
/>
</Link>
<FormattedMessage
id='add_incoming_webhook.header'
id='integrations.add'
defaultMessage='Add'
/>
</BackstageHeader>

4
webapp/components/integrations/components/add_oauth_app.jsx
Просмотреть файл

@@ -144,8 +144,8 @@ export default class AddOAuthApp extends React.Component {
OAuthActions.registerOAuthApp(
app,
() => {
browserHistory.push('/' + this.props.team.name + '/integrations/oauth2-apps');
(data) => {
browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=oauth2-apps&id=' + data.id);
},
(err) => {
this.setState({

7
webapp/components/integrations/components/add_outgoing_webhook.jsx
Просмотреть файл

@@ -119,8 +119,8 @@ export default class AddOutgoingWebhook extends React.Component {
AsyncClient.addOutgoingHook(
hook,
() => {
browserHistory.push('/' + this.props.team.name + '/integrations/outgoing_webhooks');
(data) => {
browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=outgoing_webhooks&id=' + data.token);
},
(err) => {
this.setState({
@@ -176,6 +176,7 @@ export default class AddOutgoingWebhook extends React.Component {
render() {
const contentTypeOption1 = 'application/x-www-form-urlencoded';
const contentTypeOption2 = 'application/json';
return (
<div className='backstage-content'>
<BackstageHeader>
@@ -186,7 +187,7 @@ export default class AddOutgoingWebhook extends React.Component {
/>
</Link>
<FormattedMessage
id='add_outgoing_webhook.header'
id='integrations.add'
defaultMessage='Add'
/>
</BackstageHeader>

243
webapp/components/integrations/components/confirm_integration.jsx Обычный файл
Просмотреть файл

@@ -0,0 +1,243 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
import {browserHistory, Link} from 'react-router/es6';
import SpinnerButton from 'components/spinner_button.jsx';
import UserStore from 'stores/user_store.jsx';
import IntegrationStore from 'stores/integration_store.jsx';
import Constants from 'utils/constants.jsx';
export default class ConfirmIntegration extends React.Component {
static get propTypes() {
return {
team: React.propTypes.object.isRequired,
location: React.PropTypes.object
};
}
constructor(props) {
super(props);
this.handleDone = this.handleDone.bind(this);
this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
const userId = UserStore.getCurrentId();
this.state = {
type: this.props.location.query.type,
id: this.props.location.query.id,
oauthApps: IntegrationStore.getOAuthApps(userId),
loading: !IntegrationStore.hasReceivedOAuthApps(userId)
};
}
componentDidMount() {
IntegrationStore.addChangeListener(this.handleIntegrationChange);
}
componentWillUnmount() {
IntegrationStore.removeChangeListener(this.handleIntegrationChange);
}
handleIntegrationChange() {
const userId = UserStore.getCurrentId();
this.setState({
oauthApps: IntegrationStore.getOAuthApps(userId),
loading: !IntegrationStore.hasReceivedOAuthApps(userId)
});
}
handleDone() {
browserHistory.push('/' + this.props.team.name + '/integrations/' + this.state.type);
this.setState({
id: ''
});
}
render() {
let headerText = null;
let helpText = null;
let tokenText = null;
if (this.state.type === Constants.Integrations.COMMAND) {
headerText = (
<FormattedMessage
id={'installed_commands.header'}
defaultMessage='Slash Commands'
/>
);
helpText = (
<div className='backstage-list__help'>
<FormattedHTMLMessage
id='add_command.doneHelp'
defaultMessage='Your slash command has been set up. The following token will be sent in the outgoing payload. Please use it to verify the request came from your Mattermost team (see <a href="https://docs.mattermost.com/developer/slash-commands.html">documentation</a> for further details).'
/>
</div>
);
tokenText = (
<div className='backstage-list__help'>
<FormattedHTMLMessage
id='add_command.token'
defaultMessage='<b>Token</b>: {token}'
values={{
token: this.state.id
}}
/>
</div>
);
} else if (this.state.type === Constants.Integrations.INCOMING_WEBHOOK) {
headerText = (
<FormattedMessage
id={'installed_incoming_webhooks.header'}
defaultMessage='Incoming Webhooks'
/>
);
helpText = (
<div className='backstage-list__help'>
<FormattedHTMLMessage
id='add_incoming_webhook.doneHelp'
defaultMessage='Your incoming webhook has been set up. Please send data to the following URL (see <a href=\"https://docs.mattermost.com/developer/webhooks-incoming.html\">documentation</a> for further details).'
/>
</div>
);
tokenText = (
<div className='backstage-list__help'>
<FormattedHTMLMessage
id='add_incoming_webhook.url'
defaultMessage='<b>URL</b>: {url}'
values={{
url: window.location.origin + '/hooks/' + this.state.id
}}
/>
</div>
);
} else if (this.state.type === Constants.Integrations.OUTGOING_WEBHOOK) {
headerText = (
<FormattedMessage
id={'installed_outgoing_webhooks.header'}
defaultMessage='Outgoing Webhooks'
/>
);
helpText = (
<div className='backstage-list__help'>
<FormattedHTMLMessage
id='add_outgoing_webhook.doneHelp'
defaultMessage='Your outgoing webhook has been set up. The following token will be sent in the outgoing payload. Please use it to verify the request came from your Mattermost team (see <a href=\"https://docs.mattermost.com/developer/webhooks-outgoing.html\">documentation</a> for further details).'
/>
</div>
);
tokenText = (
<div className='backstage-list__help'>
<FormattedHTMLMessage
id='add_outgoing_webhook.token'
defaultMessage='<b>Token</b>: {token}'
values={{
token: this.state.id
}}
/>
</div>
);
} else if (this.state.type === Constants.Integrations.OAUTH_APP) {
let oauthApp = {};
for (var i = 0; i < this.state.oauthApps.length; i++) {
if (this.state.oauthApps[i].id === this.state.id) {
oauthApp = this.state.oauthApps[i];
break;
}
}
if (oauthApp) {
headerText = (
<FormattedMessage
id={'installed_oauth_apps.header'}
defaultMessage='OAuth 2.0 Applications'
/>
);
helpText = [];
helpText.push(
<div className='backstage-list__help'>
<FormattedMessage
id='add_oauth_app.doneHelp'
defaultMessage='Your OAuth 2.0 application has been set up. Please use the following Client ID and Client Secret when requesting authorization for your application.'
/>
</div>
);
helpText.push(
<div className='backstage-list__help'>
<FormattedHTMLMessage
id='add_oauth_app.clientId'
defaultMessage='<b>Client ID:</b> {id}'
values={{
id: this.state.id
}}
/> <br/>
<FormattedHTMLMessage
id='add_oauth_app.clientSecret'
defaultMessage='<b>Client Secret:</b> {secret}'
values={{
secret: oauthApp.client_secret
}}
/>
</div>
);
helpText.push(
<div className='backstage-list__help'>
<FormattedHTMLMessage
id='add_oauth_app.doneUrlHelp'
defaultMessage='Please send data to the following URL.'
/>
</div>
);
tokenText = (
<div className='backstage-list__help'>
<FormattedHTMLMessage
id='add_oauth_app.url'
defaultMessage='<b>URL(s)</b>: {url}'
values={{
url: oauthApp.callback_urls
}}
/>
</div>
);
}
}
return (
<div className='backstage-content row'>
<BackstageHeader>
<Link to={'/' + this.props.team.name + '/integrations/' + this.state.type}>
{headerText}
</Link>
<FormattedMessage
id='integrations.add'
defaultMessage='Add'
/>
</BackstageHeader>
{helpText}
{tokenText}
<div className='backstage-list__help'>
<SpinnerButton
className='btn btn-primary'
type='submit'
onClick={this.handleDone}
>
<FormattedMessage
id='integrations.done'
defaultMessage='Done'
/>
</SpinnerButton>
</div>
</div>
);
}
}

2
webapp/components/integrations/components/installed_incoming_webhook.jsx
Просмотреть файл

@@ -102,7 +102,7 @@ export default class InstalledIncomingWebhook extends React.Component {
/>
</span>
</div>
<div className='tem-details__row'>
<div className='item-details__row'>
<span className='item-details__creation'>
<FormattedMessage
id='installed_integrations.creation'