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

PLT-3484 OAuth2 Service Provider (#3632)

Просмотр исходного кода 
* PLT-3484 OAuth2 Service Provider

* PM text review for OAuth 2.0 Service Provider

* PLT-3484 OAuth2 Service Provider UI tweaks (#3668)

* Tweaks to help text

* Pushing OAuth improvements (#3680)

* Re-arrange System Console for OAuth 2.0 Provider
Этот коммит содержится в:
enahum
2016-08-03 12:19:27 -05:00
коммит произвёл Harrison Healey
родитель ea027c8de4
Коммит 5bc3cea6fe
50 изменённых файлов: 2334 добавлений и 1158 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

7
webapp/actions/global_actions.jsx
Просмотреть файл

@@ -308,13 +308,6 @@ export function showLeaveTeamModal() {
});
}
export function showRegisterAppModal() {
AppDispatcher.handleViewAction({
type: ActionTypes.TOGGLE_REGISTER_APP_MODAL,
value: true
});
}
export function emitSuggestionPretextChanged(suggestionId, pretext) {
AppDispatcher.handleViewAction({
type: ActionTypes.SUGGESTION_PRETEXT_CHANGED,

60
webapp/actions/oauth_actions.jsx Обычный файл
Просмотреть файл

@@ -0,0 +1,60 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import Client from 'client/web_client.jsx';
import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
import Constants from 'utils/constants.jsx';
const ActionTypes = Constants.ActionTypes;
export function listOAuthApps(userId, onSuccess, onError) {
Client.listOAuthApps(
(data) => {
AppDispatcher.handleServerAction({
type: ActionTypes.RECEIVED_OAUTHAPPS,
userId,
oauthApps: data
});
if (onSuccess) {
onSuccess(data);
}
},
onError
);
}
export function deleteOAuthApp(id, userId, onSuccess, onError) {
Client.deleteOAuthApp(
id,
() => {
AppDispatcher.handleServerAction({
type: ActionTypes.REMOVED_OAUTHAPP,
userId,
id
});
if (onSuccess) {
onSuccess();
}
},
onError
);
}
export function registerOAuthApp(app, onSuccess, onError) {
Client.registerOAuthApp(
app,
(data) => {
AppDispatcher.handleServerAction({
type: ActionTypes.RECEIVED_OAUTHAPP,
oauthApp: data
});
if (onSuccess) {
onSuccess();
}
},
onError
);
}

30
webapp/client/client.jsx
Просмотреть файл

@@ -1498,6 +1498,36 @@ export default class Client {
end(this.handleResponse.bind(this, 'allowOAuth2', success, error));
}
listOAuthApps(success, error) {
request.
get(`${this.getOAuthRoute()}/list`).
set(this.defaultHeaders).
type('application/json').
accept('application/json').
send().
end(this.handleResponse.bind(this, 'getOAuthApps', success, error));
}
deleteOAuthApp(id, success, error) {
request.
post(`${this.getOAuthRoute()}/delete`).
set(this.defaultHeaders).
type('application/json').
accept('application/json').
send({id}).
end(this.handleResponse.bind(this, 'deleteOAuthApp', success, error));
}
getOAuthAppInfo(id, success, error) {
request.
get(`${this.getOAuthRoute()}/app/${id}`).
set(this.defaultHeaders).
type('application/json').
accept('application/json').
send().
end(this.handleResponse.bind(this, 'getOAuthAppInfo', success, error));
}
// Routes for Hooks
addIncomingHook(hook, success, error) {

17
webapp/components/admin_console/admin_settings.jsx
Просмотреть файл

@@ -8,7 +8,6 @@ import Client from 'client/web_client.jsx';
import FormError from 'components/form_error.jsx';
import SaveButton from 'components/admin_console/save_button.jsx';
import Constants from 'utils/constants.jsx';
export default class AdminSettings extends React.Component {
static get propTypes() {
@@ -22,7 +21,6 @@ export default class AdminSettings extends React.Component {
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.state = Object.assign(this.getStateFromConfig(props.config), {
saveNeeded: false,
@@ -38,20 +36,6 @@ export default class AdminSettings extends React.Component {
});
}
componentDidMount() {
document.addEventListener('keydown', this.onKeyDown);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.onKeyDown);
}
onKeyDown(e) {
if (e.keyCode === Constants.KeyCodes.ENTER) {
this.handleSubmit(e);
}
}
handleSubmit(e) {
e.preventDefault();
@@ -118,6 +102,7 @@ export default class AdminSettings extends React.Component {
<form
className='form-horizontal'
role='form'
onSubmit={this.handleSubmit}
>
{this.renderSettings()}
<div className='form-group'>

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

@@ -521,11 +521,11 @@ export default class AdminSidebar extends React.Component {
}
>
<AdminSidebarSection
name='webhooks'
name='custom'
title={
<FormattedMessage
id='admin.sidebar.webhooks'
defaultMessage='Webhooks and Commands'
id='admin.sidebar.customIntegrations'
defaultMessage='Custom Integrations'
/>
}
/>

25
webapp/components/admin_console/webhook_settings.jsx → webapp/components/admin_console/custom_integrations_settings.jsx
Просмотреть файл

@@ -24,6 +24,7 @@ export default class WebhookSettings extends AdminSettings {
config.ServiceSettings.EnableOnlyAdminIntegrations = this.state.enableOnlyAdminIntegrations;
config.ServiceSettings.EnablePostUsernameOverride = this.state.enablePostUsernameOverride;
config.ServiceSettings.EnablePostIconOverride = this.state.enablePostIconOverride;
config.ServiceSettings.EnableOAuthServiceProvider = this.state.enableOAuthServiceProvider;
return config;
}
@@ -35,7 +36,8 @@ export default class WebhookSettings extends AdminSettings {
enableCommands: config.ServiceSettings.EnableCommands,
enableOnlyAdminIntegrations: config.ServiceSettings.EnableOnlyAdminIntegrations,
enablePostUsernameOverride: config.ServiceSettings.EnablePostUsernameOverride,
enablePostIconOverride: config.ServiceSettings.EnablePostIconOverride
enablePostIconOverride: config.ServiceSettings.EnablePostIconOverride,
enableOAuthServiceProvider: config.ServiceSettings.EnableOAuthServiceProvider
};
}
@@ -43,8 +45,8 @@ export default class WebhookSettings extends AdminSettings {
return (
<h3>
<FormattedMessage
id='admin.integrations.webhook'
defaultMessage='Webhooks and Commands'
id='admin.integrations.custom'
defaultMessage='Custom Integrations'
/>
</h3>
);
@@ -104,6 +106,23 @@ export default class WebhookSettings extends AdminSettings {
value={this.state.enableCommands}
onChange={this.handleChange}
/>
<BooleanSetting
id='enableOAuthServiceProvider'
label={
<FormattedMessage
id='admin.oauth.providerTitle'
defaultMessage='Enable OAuth 2.0 Service Provider: '
/>
}
helpText={
<FormattedMessage
id='admin.oauth.providerDescription'
defaultMessage='When true, Mattermost can act as an OAuth 2.0 service provider allowing external applications to authorize API requests to Mattermost.'
/>
}
value={this.state.enableOAuthServiceProvider}
onChange={this.handleChange}
/>
<BooleanSetting
id='enableOnlyAdminIntegrations'
label={

77
webapp/components/authorize.jsx
Просмотреть файл

@@ -10,6 +10,13 @@ import React from 'react';
import icon50 from 'images/icon50x50.png';
export default class Authorize extends React.Component {
static get propTypes() {
return {
location: React.PropTypes.object.isRequired,
params: React.PropTypes.object.isRequired
};
}
constructor(props) {
super(props);
@@ -18,17 +25,31 @@ export default class Authorize extends React.Component {
this.state = {};
}
handleAllow() {
const responseType = this.props.responseType;
const clientId = this.props.clientId;
const redirectUri = this.props.redirectUri;
const state = this.props.state;
const scope = this.props.scope;
Client.allowOAuth2(responseType, clientId, redirectUri, state, scope,
componentWillMount() {
Client.getOAuthAppInfo(
this.props.location.query.client_id,
(app) => {
this.setState({app});
}
);
}
componentDidMount() {
// if we get to this point remove the antiClickjack blocker
const blocker = document.getElementById('antiClickjack');
if (blocker) {
blocker.parentNode.removeChild(blocker);
}
}
handleAllow() {
const params = this.props.location.query;
Client.allowOAuth2(params.response_type, params.client_id, params.redirect_uri, params.state, params.scope,
(data) => {
if (data.redirect) {
window.location.replace(data.redirect);
window.location.href = data.redirect;
}
},
() => {
@@ -36,28 +57,42 @@ export default class Authorize extends React.Component {
}
);
}
handleDeny() {
window.location.replace(this.props.redirectUri + '?error=access_denied');
window.location.replace(this.props.location.query.redirect_uri + '?error=access_denied');
}
render() {
const app = this.state.app;
if (!app) {
return null;
}
let icon;
if (app.icon_url) {
icon = app.icon_url;
} else {
icon = icon50;
}
return (
<div className='container-fluid'>
<div className='prompt'>
<div className='prompt__heading'>
<div className='prompt__app-icon'>
<img
src={icon50}
src={icon}
width='50'
height='50'
alt=''
/>
</div>
<div className='text'>
<FormattedMessage
<FormattedHTMLMessage
id='authorize.title'
defaultMessage='An application would like to connect to your {teamName} account'
defaultMessage='<strong>{appName}</strong> would like to connect to your <strong>Mattermost</strong> user account'
values={{
teamName: this.props.teamName
appName: app.name
}}
/>
</div>
@@ -67,7 +102,7 @@ export default class Authorize extends React.Component {
id='authorize.app'
defaultMessage='The app <strong>{appName}</strong> would like the ability to access and modify your basic information.'
values={{
appName: this.props.appName
appName: app.name
}}
/>
</p>
@@ -76,14 +111,14 @@ export default class Authorize extends React.Component {
id='authorize.access'
defaultMessage='Allow <strong>{appName}</strong> access?'
values={{
appName: this.props.appName
appName: app.name
}}
/>
</h2>
<div className='prompt__buttons'>
<button
type='submit'
className='btn authorize-btn'
className='btn btn-link authorize-btn'
onClick={this.handleDeny}
>
<FormattedMessage
@@ -107,13 +142,3 @@ export default class Authorize extends React.Component {
);
}
}
Authorize.propTypes = {
appName: React.PropTypes.string,
teamName: React.PropTypes.string,
responseType: React.PropTypes.string,
clientId: React.PropTypes.string,
redirectUri: React.PropTypes.string,
state: React.PropTypes.string,
scope: React.PropTypes.string
};

32
webapp/components/backstage/components/backstage_sidebar.jsx
Просмотреть файл

@@ -39,20 +39,22 @@ export default class BackstageSidebar extends React.Component {
}
renderIntegrations() {
if (window.mm_config.EnableIncomingWebhooks !== 'true' &&
window.mm_config.EnableOutgoingWebhooks !== 'true' &&
window.mm_config.EnableCommands !== 'true') {
const config = window.mm_config;
if (config.EnableIncomingWebhooks !== 'true' &&
config.EnableOutgoingWebhooks !== 'true' &&
config.EnableCommands !== 'true' &&
config.EnableOAuthServiceProvider !== 'true') {
return null;
}
if (window.mm_config.EnableOnlyAdminIntegrations !== 'false' &&
if (config.EnableOnlyAdminIntegrations !== 'false' &&
!Utils.isSystemAdmin(this.props.user.roles) &&
!TeamStore.isTeamAdmin(this.props.user.id, this.props.team.id)) {
return null;
}
let incomingWebhooks = null;
if (window.mm_config.EnableIncomingWebhooks === 'true') {
if (config.EnableIncomingWebhooks === 'true') {
incomingWebhooks = (
<BackstageSection
name='incoming_webhooks'
@@ -67,7 +69,7 @@ export default class BackstageSidebar extends React.Component {
}
let outgoingWebhooks = null;
if (window.mm_config.EnableOutgoingWebhooks === 'true') {
if (config.EnableOutgoingWebhooks === 'true') {
outgoingWebhooks = (
<BackstageSection
name='outgoing_webhooks'
@@ -82,7 +84,7 @@ export default class BackstageSidebar extends React.Component {
}
let commands = null;
if (window.mm_config.EnableCommands === 'true') {
if (config.EnableCommands === 'true') {
commands = (
<BackstageSection
name='commands'
@@ -96,6 +98,21 @@ export default class BackstageSidebar extends React.Component {
);
}
let oauthApps = null;
if (config.EnableOAuthServiceProvider === 'true') {
oauthApps = (
<BackstageSection
name='oauth2-apps'
title={
<FormattedMessage
id='backstage_sidebar.integrations.oauthApps'
defaultMessage='OAuth 2.0 Applications'
/>
}
/>
);
}
return (
<BackstageCategory
name='integrations'
@@ -111,6 +128,7 @@ export default class BackstageSidebar extends React.Component {
{incomingWebhooks}
{outgoingWebhooks}
{commands}
{oauthApps}
</BackstageCategory>
);
}

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

@@ -0,0 +1,435 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import * as OAuthActions from 'actions/oauth_actions.jsx';
import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
import {FormattedMessage} from 'react-intl';
import FormError from 'components/form_error.jsx';
import {browserHistory, Link} from 'react-router/es6';
import SpinnerButton from 'components/spinner_button.jsx';
export default class AddOAuthApp extends React.Component {
static get propTypes() {
return {
team: React.propTypes.object.isRequired
};
}
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.updateName = this.updateName.bind(this);
this.updateTrusted = this.updateTrusted.bind(this);
this.updateDescription = this.updateDescription.bind(this);
this.updateHomepage = this.updateHomepage.bind(this);
this.updateIconUrl = this.updateIconUrl.bind(this);
this.updateCallbackUrls = this.updateCallbackUrls.bind(this);
this.imageLoaded = this.imageLoaded.bind(this);
this.image = new Image();
this.image.onload = this.imageLoaded;
this.state = {
name: '',
description: '',
homepage: '',
icon_url: '',
callbackUrls: '',
is_trusted: false,
has_icon: false,
saving: false,
serverError: '',
clientError: null
};
}
imageLoaded() {
this.setState({
has_icon: true,
icon_url: this.refs.icon_url.value
});
}
handleSubmit(e) {
e.preventDefault();
if (this.state.saving) {
return;
}
this.setState({
saving: true,
serverError: '',
clientError: ''
});
if (!this.state.name) {
this.setState({
saving: false,
clientError: (
<FormattedMessage
id='add_oauth_app.nameRequired'
defaultMessage='Name for the OAuth 2.0 application is required.'
/>
)
});
return;
}
if (!this.state.description) {
this.setState({
saving: false,
clientError: (
<FormattedMessage
id='add_oauth_app.descriptionRequired'
defaultMessage='Description for the OAuth 2.0 application is required.'
/>
)
});
return;
}
if (!this.state.homepage) {
this.setState({
saving: false,
clientError: (
<FormattedMessage
id='add_oauth_app.homepageRequired'
defaultMessage='Homepage for the OAuth 2.0 application is required.'
/>
)
});
return;
}
const callbackUrls = [];
for (let callbackUrl of this.state.callbackUrls.split('\n')) {
callbackUrl = callbackUrl.trim();
if (callbackUrl.length > 0) {
callbackUrls.push(callbackUrl);
}
}
if (callbackUrls.length === 0) {
this.setState({
saving: false,
clientError: (
<FormattedMessage
id='add_oauth_app.callbackUrlsRequired'
defaultMessage='One or more callback URLs are required.'
/>
)
});
return;
}
const app = {
name: this.state.name,
callback_urls: callbackUrls,
homepage: this.state.homepage,
description: this.state.description,
is_trusted: this.state.is_trusted,
icon_url: this.state.icon_url
};
OAuthActions.registerOAuthApp(
app,
() => {
browserHistory.push('/' + this.props.team.name + '/integrations/oauth2-apps');
},
(err) => {
this.setState({
saving: false,
serverError: err.message
});
}
);
}
updateName(e) {
this.setState({
name: e.target.value
});
}
updateTrusted(e) {
this.setState({
is_trusted: e.target.value === 'true'
});
}
updateDescription(e) {
this.setState({
description: e.target.value
});
}
updateHomepage(e) {
this.setState({
homepage: e.target.value
});
}
updateIconUrl(e) {
this.setState({
has_icon: false,
icon_url: ''
});
this.image.src = e.target.value;
}
updateCallbackUrls(e) {
this.setState({
callbackUrls: e.target.value
});
}
render() {
let icon;
if (this.state.has_icon) {
icon = (
<div className='integration__icon'>
<img src={this.state.icon_url}/>
</div>
);
}
return (
<div className='backstage-content'>
<BackstageHeader>
<Link to={'/' + this.props.team.name + '/integrations/oauth2-apps'}>
<FormattedMessage
id='installed_oauth_apps.header'
defaultMessage='Installed OAuth2 Apps'
/>
</Link>
<FormattedMessage
id='add_oauth_app.header'
defaultMessage='Add'
/>
</BackstageHeader>
<div className='backstage-form'>
{icon}
<form className='form-horizontal'>
<div className='form-group'>
<label
className='control-label col-sm-4'
htmlFor='is_trusted'
>
<FormattedMessage
id='installed_oauth_apps.trusted'
defaultMessage='Is Trusted'
/>
</label>
<div className='col-md-5 col-sm-8'>
<label className='radio-inline'>
<input
type='radio'
value='true'
name='is_trusted'
checked={this.state.is_trusted}
onChange={this.updateTrusted}
/>
<FormattedMessage
id='installed_oauth_apps.trusted.yes'
defaultMessage='Yes'
/>
</label>
<label className='radio-inline'>
<input
type='radio'
value='false'
name='is_trusted'
checked={!this.state.is_trusted}
onChange={this.updateTrusted}
/>
<FormattedMessage
id='installed_oauth_apps.trusted.no'
defaultMessage='No'
/>
</label>
<div className='form__help'>
<FormattedMessage
id='add_oauth_app.trusted.help'
defaultMessage="When true, the OAuth 2.0 application is considered trusted by the Mattermost server and doesn't require the user to accept authorization. When false, an additional window will appear, asking the user to accept or deny the authorization."
/>
</div>
</div>
</div>
<div className='form-group'>
<label
className='control-label col-sm-4'
htmlFor='name'
>
<FormattedMessage
id='installed_oauth_apps.name'
defaultMessage='Display Name'
/>
</label>
<div className='col-md-5 col-sm-8'>
<input
id='name'
type='text'
maxLength='64'
className='form-control'
value={this.state.name}
onChange={this.updateName}
/>
<div className='form__help'>
<FormattedMessage
id='add_oauth_app.name.help'
defaultMessage='Display name for your OAuth 2.0 application made of up to 64 characters.'
/>
</div>
</div>
</div>
<div className='form-group'>
<label
className='control-label col-sm-4'
htmlFor='description'
>
<FormattedMessage
id='installed_oauth_apps.description'
defaultMessage='Description'
/>
</label>
<div className='col-md-5 col-sm-8'>
<input
id='description'
type='text'
maxLength='512'
className='form-control'
value={this.state.description}
onChange={this.updateDescription}
/>
<div className='form__help'>
<FormattedMessage
id='add_oauth_app.description.help'
defaultMessage='Description for your OAuth 2.0 application.'
/>
</div>
</div>
</div>
<div className='form-group'>
<label
className='control-label col-sm-4'
htmlFor='homepage'
>
<FormattedMessage
id='installed_oauth_apps.homepage'
defaultMessage='Homepage'
/>
</label>
<div className='col-md-5 col-sm-8'>
<input
id='homepage'
type='url'
maxLength='256'
className='form-control'
value={this.state.homepage}
onChange={this.updateHomepage}
/>
<div className='form__help'>
<FormattedMessage
id='add_oauth_app.homepage.help'
defaultMessage='The URL for the homepage of the OAuth 2.0 application. Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
/>
</div>
</div>
</div>
<div className='form-group'>
<label
className='control-label col-sm-4'
htmlFor='icon_url'
>
<FormattedMessage
id='installed_oauth_apps.iconUrl'
defaultMessage='Icon URL'
/>
</label>
<div className='col-md-5 col-sm-8'>
<input
id='icon_url'
ref='icon_url'
type='url'
maxLength='512'
className='form-control'
onChange={this.updateIconUrl}
/>
<div className='form__help'>
<FormattedMessage
id='add_oauth_app.icon.help'
defaultMessage='The URL for the homepage of the OAuth 2.0 application. Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
/>
</div>
</div>
</div>
<div className='form-group'>
<label
className='control-label col-sm-4'
htmlFor='callbackUrls'
>
<FormattedMessage
id='installed_oauth_apps.callbackUrls'
defaultMessage='Callback URLs (One Per Line)'
/>
</label>
<div className='col-md-5 col-sm-8'>
<textarea
id='callbackUrls'
rows='3'
maxLength='1024'
className='form-control'
value={this.state.callbackUrls}
onChange={this.updateCallbackUrls}
/>
<div className='form__help'>
<FormattedMessage
id='add_oauth_app.callbackUrls.help'
defaultMessage='The redirect URIs to which the service will redirect users after accepting or denying authorization of your application, and which will handle authorization codes or access tokens. Must be a valid URL and start with http:// or https://.'
/>
</div>
</div>
</div>
<div className='backstage-form__footer'>
<FormError
type='backstage'
errors={[this.state.serverError, this.state.clientError]}
/>
<Link
className='btn btn-sm'
to={'/' + this.props.team.name + '/integrations/oauth2-apps'}
>
<FormattedMessage
id='installed_oauth_apps.cancel'
defaultMessage='Cancel'
/>
</Link>
<SpinnerButton
className='btn btn-primary'
type='submit'
spinning={this.state.saving}
onClick={this.handleSubmit}
>
<FormattedMessage
id='installed_oauth_apps.save'
defaultMessage='Save'
/>
</SpinnerButton>
</div>
</form>
</div>
</div>
);
}
}

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

@@ -0,0 +1,219 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import * as Utils from 'utils/utils.jsx';
import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
const FAKE_SECRET = '***************';
export default class InstalledOAuthApp extends React.Component {
static get propTypes() {
return {
oauthApp: React.PropTypes.object.isRequired,
onDelete: React.PropTypes.func.isRequired,
filter: React.PropTypes.string
};
}
constructor(props) {
super(props);
this.handleShowClientSecret = this.handleShowClientSecret.bind(this);
this.handleHideClientScret = this.handleHideClientScret.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.matchesFilter = this.matchesFilter.bind(this);
this.state = {
clientSecret: FAKE_SECRET
};
}
handleShowClientSecret(e) {
e.preventDefault();
this.setState({clientSecret: this.props.oauthApp.client_secret});
}
handleHideClientScret(e) {
e.preventDefault();
this.setState({clientSecret: FAKE_SECRET});
}
handleDelete(e) {
e.preventDefault();
this.props.onDelete(this.props.oauthApp);
}
matchesFilter(oauthApp, filter) {
if (!filter) {
return true;
}
return oauthApp.name.toLowerCase().indexOf(filter) !== -1;
}
render() {
const oauthApp = this.props.oauthApp;
if (!this.matchesFilter(oauthApp, this.props.filter)) {
return null;
}
let name;
if (oauthApp.name) {
name = oauthApp.name;
} else {
name = (
<FormattedMessage
id='installed_integrations.unnamed_oauth_app'
defaultMessage='Unnamed OAuth 2.0 Application'
/>
);
}
let description;
if (oauthApp.description) {
description = (
<div className='item-details__row'>
<span className='item-details__description'>
{oauthApp.description}
</span>
</div>
);
}
const urls = (
<div className='item-details__row'>
<span className='item-details__url'>
<FormattedMessage
id='installed_integrations.callback_urls'
defaultMessage='Callback URLs: {urls}'
values={{
urls: oauthApp.callback_urls.join(', ')
}}
/>
</span>
</div>
);
let isTrusted;
if (oauthApp.is_trusted) {
isTrusted = Utils.localizeMessage('installed_oauth_apps.trusted.yes', 'Yes');
} else {
isTrusted = Utils.localizeMessage('installed_oauth_apps.trusted.no', 'No');
}
let action;
if (this.state.clientSecret === FAKE_SECRET) {
action = (
<a
href='#'
onClick={this.handleShowClientSecret}
>
<FormattedMessage
id='installed_integrations.showSecret'
defaultMessage='Show Secret'
/>
</a>
);
} else {
action = (
<a
href='#'
onClick={this.handleHideClientScret}
>
<FormattedMessage
id='installed_integrations.hideSecret'
defaultMessage='Hide Secret'
/>
</a>
);
}
let icon;
if (oauthApp.icon_url) {
icon = (
<div className='integration__icon integration-list__icon'>
<img src={oauthApp.icon_url}/>
</div>
);
}
return (
<div className='backstage-list__item'>
{icon}
<div className='item-details'>
<div className='item-details__row'>
<span className='item-details__name'>
{name}
</span>
</div>
{description}
<div className='item-details__row'>
<span className='item-details__url'>
<FormattedHTMLMessage
id='installed_oauth_apps.is_trusted'
defaultMessage='Is Trusted: <strong>{isTrusted}</strong>'
values={{
isTrusted
}}
/>
</span>
</div>
<div className='item-details__row'>
<span className='item-details__token'>
<FormattedHTMLMessage
id='installed_integrations.client_id'
defaultMessage='Client ID: <strong>{clientId}</strong>'
values={{
clientId: oauthApp.id
}}
/>
</span>
</div>
<div className='item-details__row'>
<span className='item-details__token'>
<FormattedHTMLMessage
id='installed_integrations.client_secret'
defaultMessage='Client Secret: <strong>{clientSecret}</strong>'
values={{
clientSecret: this.state.clientSecret
}}
/>
</span>
</div>
{urls}
<div className='item-details__row'>
<span className='item-details__creation'>
<FormattedMessage
id='installed_integrations.creation'
defaultMessage='Created by {creator} on {createAt, date, full}'
values={{
creator: Utils.displayUsername(oauthApp.creator_id),
createAt: oauthApp.create_at
}}
/>
</span>
</div>
</div>
<div className='item-actions'>
{action}
{' - '}
<a
href='#'
onClick={this.handleDelete}
>
<FormattedMessage
id='installed_integrations.delete'
defaultMessage='Delete'
/>
</a>
</div>
</div>
);
}
}

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

@@ -0,0 +1,108 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import UserStore from 'stores/user_store.jsx';
import IntegrationStore from 'stores/integration_store.jsx';
import * as OAuthActions from 'actions/oauth_actions.jsx';
import {localizeMessage} from 'utils/utils.jsx';
import BackstageList from 'components/backstage/components/backstage_list.jsx';
import {FormattedMessage} from 'react-intl';
import InstalledOAuthApp from './installed_oauth_app.jsx';
export default class InstalledOAuthApps extends React.Component {
static get propTypes() {
return {
team: React.propTypes.object.isRequired
};
}
constructor(props) {
super(props);
this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
this.deleteOAuthApp = this.deleteOAuthApp.bind(this);
const userId = UserStore.getCurrentId();
this.state = {
oauthApps: IntegrationStore.getOAuthApps(userId),
loading: !IntegrationStore.hasReceivedOAuthApps(userId)
};
}
componentDidMount() {
IntegrationStore.addChangeListener(this.handleIntegrationChange);
if (window.mm_config.EnableOAuthServiceProvider === 'true') {
OAuthActions.listOAuthApps(UserStore.getCurrentId());
}
}
componentWillUnmount() {
IntegrationStore.removeChangeListener(this.handleIntegrationChange);
}
handleIntegrationChange() {
const userId = UserStore.getCurrentId();
this.setState({
oauthApps: IntegrationStore.getOAuthApps(userId),
loading: !IntegrationStore.hasReceivedOAuthApps(userId)
});
}
deleteOAuthApp(app) {
const userId = UserStore.getCurrentId();
OAuthActions.deleteOAuthApp(app.id, userId);
}
render() {
const oauthApps = this.state.oauthApps.map((app) => {
return (
<InstalledOAuthApp
key={app.id}
oauthApp={app}
onDelete={this.deleteOAuthApp}
/>
);
});
return (
<BackstageList
header={
<FormattedMessage
id='installed_oauth_apps.header'
defaultMessage='OAuth 2.0 Applications'
/>
}
helpText={
<FormattedMessage
id='installed_oauth_apps.help'
defaultMessage='OAuth 2.0 Applications are available to everyone on your server.'
/>
}
addText={
<FormattedMessage
id='installed_oauth_apps.add'
defaultMessage='Add OAuth 2.0 Application'
/>
}
addLink={'/' + this.props.team.name + '/integrations/oauth2-apps/add'}
emptyText={
<FormattedMessage
id='installed_oauth_apps.empty'
defaultMessage='No OAuth 2.0 Applications found'
/>
}
searchPlaceholder={localizeMessage('installed_oauth_apps.search', 'Search OAuth 2.0 Applications')}
loading={this.state.loading}
>
{oauthApps}
</BackstageList>
);
}
}

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

@@ -7,6 +7,7 @@ import {FormattedMessage} from 'react-intl';
import IntegrationOption from './integration_option.jsx';
import WebhookIcon from 'images/webhook_icon.jpg';
import AppIcon from 'images/oauth_icon.png';
export default class Integrations extends React.Component {
static get propTypes() {
@@ -17,8 +18,9 @@ export default class Integrations extends React.Component {
render() {
const options = [];
const config = window.mm_config;
if (window.mm_config.EnableIncomingWebhooks === 'true') {
if (config.EnableIncomingWebhooks === 'true') {
options.push(
<IntegrationOption
key='incomingWebhook'
@@ -40,7 +42,7 @@ export default class Integrations extends React.Component {
);
}
if (window.mm_config.EnableOutgoingWebhooks === 'true') {
if (config.EnableOutgoingWebhooks === 'true') {
options.push(
<IntegrationOption
key='outgoingWebhook'
@@ -62,7 +64,7 @@ export default class Integrations extends React.Component {
);
}
if (window.mm_config.EnableCommands === 'true') {
if (config.EnableCommands === 'true') {
options.push(
<IntegrationOption
key='command'
@@ -84,6 +86,28 @@ export default class Integrations extends React.Component {
);
}
if (config.EnableOAuthServiceProvider === 'true') {
options.push(
<IntegrationOption
key='oauth2Apps'
image={AppIcon}
title={
<FormattedMessage
id='integrations.oauthApps.title'
defaultMessage='OAuth 2.0 Applications'
/>
}
description={
<FormattedMessage
id='integrations.oauthApps.description'
defaultMessage='Auth 2.0 allows external applications to make authorized requests to the Mattermost API.'
/>
}
link={'/' + this.props.team.name + '/integrations/oauth2-apps'}
/>
);
}
return (
<div className='backstage-content row'>
<div className='backstage-header'>

18
webapp/components/login/login_controller.jsx
Просмотреть файл

@@ -146,11 +146,12 @@ export default class LoginController extends React.Component {
token,
() => {
// check for query params brought over from signup_user_complete
if (this.props.location.query.id || this.props.location.query.h) {
const query = this.props.location.query;
if (query.id || query.h) {
Client.addUserToTeamFromInvite(
this.props.location.query.d,
this.props.location.query.h,
this.props.location.query.id,
query.d,
query.h,
query.id,
() => {
this.finishSignin();
},
@@ -200,8 +201,13 @@ export default class LoginController extends React.Component {
finishSignin() {
GlobalActions.emitInitialLoad(
() => {
const query = this.props.location.query;
GlobalActions.loadDefaultLocale();
browserHistory.push('/select_team');
if (query.redirect_to) {
browserHistory.push(query.redirect_to);
} else {
browserHistory.push('/select_team');
}
}
);
}
@@ -401,7 +407,7 @@ export default class LoginController extends React.Component {
defaultMessage="Don't have an account? "
/>
<Link
to={'/signup_user_complete'}
to={'/signup_user_complete' + this.props.location.search}
className='signup-team-login'
>
<FormattedMessage

26
webapp/components/navbar_dropdown.jsx
Просмотреть файл

@@ -99,6 +99,7 @@ export default class NavbarDropdown extends React.Component {
}
render() {
const config = global.window.mm_config;
var teamLink = '';
var inviteLink = '';
var manageLink = '';
@@ -131,7 +132,7 @@ export default class NavbarDropdown extends React.Component {
</li>
);
if (this.props.teamType === Constants.OPEN_TEAM && global.window.mm_config.EnableUserCreation === 'true') {
if (this.props.teamType === Constants.OPEN_TEAM && config.EnableUserCreation === 'true') {
teamLink = (
<li>
<a
@@ -148,10 +149,10 @@ export default class NavbarDropdown extends React.Component {
}
if (global.window.mm_license.IsLicensed === 'true') {
if (global.window.mm_config.RestrictTeamInvite === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) {
if (config.RestrictTeamInvite === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) {
teamLink = null;
inviteLink = null;
} else if (global.window.mm_config.RestrictTeamInvite === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) {
} else if (config.RestrictTeamInvite === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) {
teamLink = null;
inviteLink = null;
}
@@ -201,10 +202,11 @@ export default class NavbarDropdown extends React.Component {
);
const integrationsEnabled =
window.mm_config.EnableIncomingWebhooks === 'true' ||
window.mm_config.EnableOutgoingWebhooks === 'true' ||
window.mm_config.EnableCommands === 'true';
if (integrationsEnabled && (isAdmin || window.mm_config.EnableOnlyAdminIntegrations !== 'true')) {
config.EnableIncomingWebhooks === 'true' ||
config.EnableOutgoingWebhooks === 'true' ||
config.EnableCommands === 'true' ||
config.EnableOAuthServiceProvider === 'true';
if (integrationsEnabled && (isAdmin || config.EnableOnlyAdminIntegrations !== 'true')) {
integrationsLink = (
<li>
<Link to={'/' + this.props.teamName + '/integrations'}>
@@ -234,7 +236,7 @@ export default class NavbarDropdown extends React.Component {
var teams = [];
if (global.window.mm_config.EnableTeamCreation === 'true') {
if (config.EnableTeamCreation === 'true') {
teams.push(
<li key='newTeam_li'>
<Link
@@ -297,13 +299,13 @@ export default class NavbarDropdown extends React.Component {
}
let helpLink = null;
if (global.window.mm_config.HelpLink) {
if (config.HelpLink) {
helpLink = (
<li>
<Link
target='_blank'
rel='noopener noreferrer'
to={global.window.mm_config.HelpLink}
to={config.HelpLink}
>
<FormattedMessage
id='navbar_dropdown.help'
@@ -315,13 +317,13 @@ export default class NavbarDropdown extends React.Component {
}
let reportLink = null;
if (global.window.mm_config.ReportAProblemLink) {
if (config.ReportAProblemLink) {
reportLink = (
<li>
<Link
target='_blank'
rel='noopener noreferrer'
to={global.window.mm_config.ReportAProblemLink}
to={config.ReportAProblemLink}
>
<FormattedMessage
id='navbar_dropdown.report'

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

@@ -31,7 +31,6 @@ import DeletePostModal from 'components/delete_post_modal.jsx';
import MoreChannelsModal from 'components/more_channels.jsx';
import TeamSettingsModal from 'components/team_settings_modal.jsx';
import RemovedFromChannelModal from 'components/removed_from_channel_modal.jsx';
import RegisterAppModal from 'components/register_app_modal.jsx';
import ImportThemeModal from 'components/user_settings/import_theme_modal.jsx';
import InviteMemberModal from 'components/invite_member_modal.jsx';
import LeaveTeamModal from 'components/leave_team_modal.jsx';
@@ -162,7 +161,6 @@ export default class NeedsTeam extends React.Component {
<EditPostModal/>
<DeletePostModal/>
<RemovedFromChannelModal/>
<RegisterAppModal/>
<SelectTeamModal/>
</div>
</div>

411
webapp/components/register_app_modal.jsx
Просмотреть файл

@@ -1,411 +0,0 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import Client from 'client/web_client.jsx';
import ModalStore from 'stores/modal_store.jsx';
import {Modal} from 'react-bootstrap';
import Constants from 'utils/constants.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
const ActionTypes = Constants.ActionTypes;
const holders = defineMessages({
required: {
id: 'register_app.required',
defaultMessage: 'Required'
},
optional: {
id: 'register_app.optional',
defaultMessage: 'Optional'
}
});
import React from 'react';
class RegisterAppModal extends React.Component {
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
this.onHide = this.onHide.bind(this);
this.save = this.save.bind(this);
this.updateShow = this.updateShow.bind(this);
this.state = {
clientId: '',
clientSecret: '',
saved: false,
show: false
};
}
componentDidMount() {
ModalStore.addModalListener(ActionTypes.TOGGLE_REGISTER_APP_MODAL, this.updateShow);
}
componentWillUnmount() {
ModalStore.removeModalListener(ActionTypes.TOGGLE_REGISTER_APP_MODAL, this.updateShow);
}
updateShow(show) {
if (!show) {
if (this.state.clientId !== '' && !this.state.saved) {
return;
}
this.setState({
clientId: '',
clientSecret: '',
saved: false,
homepageError: null,
callbackError: null,
serverError: null,
nameError: null
});
}
this.setState({show});
}
handleSubmit(e) {
e.preventDefault();
var state = this.state;
state.serverError = null;
var app = {};
var name = this.refs.name.value;
if (!name || name.length === 0) {
state.nameError = true;
this.setState(state);
return;
}
state.nameError = null;
app.name = name;
var homepage = this.refs.homepage.value;
if (!homepage || homepage.length === 0) {
state.homepageError = true;
this.setState(state);
return;
}
state.homepageError = null;
app.homepage = homepage;
var desc = this.refs.desc.value;
app.description = desc;
var rawCallbacks = this.refs.callback.value.trim();
if (!rawCallbacks || rawCallbacks.length === 0) {
state.callbackError = true;
this.setState(state);
return;
}
state.callbackError = null;
app.callback_urls = rawCallbacks.split('\n');
Client.registerOAuthApp(app,
(data) => {
state.clientId = data.id;
state.clientSecret = data.client_secret;
this.setState(state);
},
(err) => {
state.serverError = err.message;
this.setState(state);
}
);
}
onHide(e) {
if (!this.state.saved && this.state.clientId !== '') {
e.preventDefault();
return;
}
this.setState({clientId: '', clientSecret: '', saved: false});
}
save() {
this.setState({saved: this.refs.save.checked});
}
render() {
const {formatMessage} = this.props.intl;
var nameError;
if (this.state.nameError) {
nameError = (
<div className='form-group has-error'>
<label className='control-label'>
<FormattedMessage
id='register_app.nameError'
defaultMessage='Application name must be filled in.'
/>
</label>
</div>
);
}
var homepageError;
if (this.state.homepageError) {
homepageError = (
<div className='form-group has-error'>
<label className='control-label'>
<FormattedMessage
id='register_app.homepageError'
defaultMessage='Homepage must be filled in.'
/>
</label>
</div>
);
}
var callbackError;
if (this.state.callbackError) {
callbackError = (
<div className='form-group has-error'>
<label className='control-label'>
<FormattedMessage
id='register_app.callbackError'
defaultMessage='At least one callback URL must be filled in.'
/>
</label>
</div>
);
}
var serverError;
if (this.state.serverError) {
serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
}
var body = '';
var footer = '';
if (this.state.clientId === '') {
body = (
<div className='settings-modal'>
<div className='form-horizontal user-settings'>
<h4 className='padding-bottom x3'>
<FormattedMessage
id='register_app.title'
defaultMessage='Register a New Application'
/>
</h4>
<div className='row'>
<label className='col-sm-4 control-label'>
<FormattedMessage
id='register_app.name'
defaultMessage='Application Name'
/>
</label>
<div className='col-sm-7'>
<input
ref='name'
className='form-control'
type='text'
placeholder={formatMessage(holders.required)}
/>
{nameError}
</div>
</div>
<div className='row padding-top x2'>
<label className='col-sm-4 control-label'>
<FormattedMessage
id='register_app.homepage'
defaultMessage='Homepage URL'
/>
</label>
<div className='col-sm-7'>
<input
ref='homepage'
className='form-control'
type='text'
placeholder={formatMessage(holders.required)}
/>
{homepageError}
</div>
</div>
<div className='row padding-top x2'>
<label className='col-sm-4 control-label'>
<FormattedMessage
id='register_app.description'
defaultMessage='Description'
/>
</label>
<div className='col-sm-7'>
<input
ref='desc'
className='form-control'
type='text'
placeholder={formatMessage(holders.optional)}
/>
</div>
</div>
<div className='row padding-top padding-bottom x2'>
<label className='col-sm-4 control-label'>
<FormattedMessage
id='register_app.callback'
defaultMessage='Callback URL'
/>
</label>
<div className='col-sm-7'>
<textarea
ref='callback'
className='form-control'
type='text'
placeholder={formatMessage(holders.required)}
rows='5'
/>
{callbackError}
</div>
</div>
{serverError}
</div>
</div>
);
footer = (
<div>
<button
type='button'
className='btn btn-default'
onClick={() => this.updateShow(false)}
>
<FormattedMessage
id='register_app.cancel'
defaultMessage='Cancel'
/>
</button>
<button
onClick={this.handleSubmit}
type='submit'
className='btn btn-primary'
tabIndex='3'
>
<FormattedMessage
id='register_app.register'
defaultMessage='Register'
/>
</button>
</div>
);
} else {
var btnClass = ' disabled';
if (this.state.saved) {
btnClass = '';
}
body = (
<div className='form-horizontal user-settings'>
<h4 className='padding-bottom x3'>
<FormattedMessage
id='register_app.credentialsTitle'
defaultMessage='Your Application Credentials'
/>
</h4>
<br/>
<div className='row'>
<label className='col-sm-4 control-label'>
<FormattedMessage
id='register_app.clientId'
defaultMessage='Client ID'
/>
</label>
<div className='col-sm-7'>
<input
className='form-control'
type='text'
value={this.state.clientId}
readOnly='true'
/>
</div>
</div>
<br/>
<div className='row padding-top x2'>
<label className='col-sm-4 control-label'>
<FormattedMessage
id='register_app.clientSecret'
defaultMessage='Client Secret'
/></label>
<div className='col-sm-7'>
<input
className='form-control'
type='text'
value={this.state.clientSecret}
readOnly='true'
/>
</div>
</div>
<br/>
<br/>
<strong>
<FormattedMessage
id='register_app.credentialsDescription'
defaultMessage="Save these somewhere SAFE and SECURE. Treat your Client ID as your app's username and your Client Secret as the app's password."
/>
</strong>
<br/>
<br/>
<div className='checkbox'>
<label>
<input
ref='save'
type='checkbox'
checked={this.state.saved}
onChange={this.save}
/>
<FormattedMessage
id='register_app.credentialsSave'
defaultMessage='I have saved both my Client Id and Client Secret somewhere safe'
/>
</label>
</div>
</div>
);
footer = (
<a
className={'btn btn-sm btn-primary pull-right' + btnClass}
href='#'
onClick={(e) => {
e.preventDefault();
this.updateShow(false);
}}
>
<FormattedMessage
id='register_app.close'
defaultMessage='Close'
/>
</a>
);
}
return (
<span>
<Modal
show={this.state.show}
onHide={() => this.updateShow(false)}
>
<Modal.Header closeButton={true}>
<Modal.Title>
<FormattedMessage
id='register_app.dev'
defaultMessage='Developer Applications'
/>
</Modal.Title>
</Modal.Header>
<form
role='form'
className='form-horizontal'
>
<Modal.Body>
{body}
</Modal.Body>
<Modal.Footer>
{footer}
</Modal.Footer>
</form>
</Modal>
</span>
);
}
}
RegisterAppModal.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(RegisterAppModal);

14
webapp/components/signup_user_complete.jsx
Просмотреть файл

@@ -231,8 +231,13 @@ export default class SignupUserComplete extends React.Component {
finishSignup() {
GlobalActions.emitInitialLoad(
() => {
const query = this.props.location.query;
GlobalActions.loadDefaultLocale();
browserHistory.push('/select_team');
if (query.redirect_to) {
browserHistory.push(query.redirect_to);
} else {
browserHistory.push('/select_team');
}
}
);
}
@@ -250,7 +255,12 @@ export default class SignupUserComplete extends React.Component {
GlobalActions.emitInitialLoad(
() => {
browserHistory.push('/select_team');
const query = this.props.location.query;
if (query.redirect_to) {
browserHistory.push(query.redirect_to);
} else {
browserHistory.push('/select_team');
}
}
);
},

12
webapp/components/user_settings/user_settings.jsx
Просмотреть файл

@@ -6,7 +6,6 @@ import * as utils from 'utils/utils.jsx';
import NotificationsTab from './user_settings_notifications.jsx';
import SecurityTab from './user_settings_security.jsx';
import GeneralTab from './user_settings_general.jsx';
import DeveloperTab from './user_settings_developer.jsx';
import DisplayTab from './user_settings_display.jsx';
import AdvancedTab from './user_settings_advanced.jsx';
@@ -77,17 +76,6 @@ export default class UserSettings extends React.Component {
/>
</div>
);
} else if (this.props.activeTab === 'developer') {
return (
<div>
<DeveloperTab
activeSection={this.props.activeSection}
updateSection={this.props.updateSection}
closeModal={this.props.closeModal}
collapseModal={this.props.collapseModal}
/>
</div>
);
} else if (this.props.activeTab === 'display') {
return (
<div>

138
webapp/components/user_settings/user_settings_developer.jsx
Просмотреть файл

@@ -1,138 +0,0 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import SettingItemMin from '../setting_item_min.jsx';
import SettingItemMax from '../setting_item_max.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
const holders = defineMessages({
applicationsPreview: {
id: 'user.settings.developer.applicationsPreview',
defaultMessage: 'Applications (Preview)'
},
thirdParty: {
id: 'user.settings.developer.thirdParty',
defaultMessage: 'Open to register a new third-party application'
}
});
import React from 'react';
class DeveloperTab extends React.Component {
constructor(props) {
super(props);
this.register = this.register.bind(this);
this.state = {};
}
register() {
this.props.closeModal();
GlobalActions.showRegisterAppModal();
}
render() {
var appSection;
var self = this;
const {formatMessage} = this.props.intl;
if (this.props.activeSection === 'app') {
var inputs = [];
inputs.push(
<div
key='registerbtn'
className='form-group'
>
<div className='col-sm-7'>
<a
className='btn btn-sm btn-primary'
onClick={this.register}
>
<FormattedMessage
id='user.settings.developer.register'
defaultMessage='Register New Application'
/>
</a>
</div>
</div>
);
appSection = (
<SettingItemMax
title={formatMessage(holders.applicationsPreview)}
inputs={inputs}
updateSection={function updateSection(e) {
self.props.updateSection('');
e.preventDefault();
}}
/>
);
} else {
appSection = (
<SettingItemMin
title={formatMessage(holders.applicationsPreview)}
describe={formatMessage(holders.thirdParty)}
updateSection={function updateSection() {
self.props.updateSection('app');
}}
/>
);
}
return (
<div>
<div className='modal-header'>
<button
type='button'
className='close'
data-dismiss='modal'
aria-label='Close'
onClick={this.props.closeModal}
>
<span aria-hidden='true'>{'×'}</span>
</button>
<h4
className='modal-title'
ref='title'
>
<div className='modal-back'>
<i
className='fa fa-angle-left'
onClick={this.props.collapseModal}
/>
</div>
<FormattedMessage
id='user.settings.developer.title'
defaultMessage='Developer Settings'
/>
</h4>
</div>
<div className='user-settings'>
<h3 className='tab-header'>
<FormattedMessage
id='user.settings.developer.title'
defaultMessage='Developer Settings'
/>
</h3>
<div className='divider-dark first'/>
{appSection}
<div className='divider-dark'/>
</div>
</div>
);
}
}
DeveloperTab.defaultProps = {
activeSection: ''
};
DeveloperTab.propTypes = {
intl: intlShape.isRequired,
activeSection: React.PropTypes.string,
updateSection: React.PropTypes.func,
closeModal: React.PropTypes.func.isRequired,
collapseModal: React.PropTypes.func.isRequired
};
export default injectIntl(DeveloperTab);

8
webapp/components/user_settings/user_settings_modal.jsx
Просмотреть файл

@@ -27,10 +27,6 @@ const holders = defineMessages({
id: 'user.settings.modal.notifications',
defaultMessage: 'Notifications'
},
developer: {
id: 'user.settings.modal.developer',
defaultMessage: 'Developer'
},
display: {
id: 'user.settings.modal.display',
defaultMessage: 'Display'
@@ -214,10 +210,6 @@ class UserSettingsModal extends React.Component {
tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'icon fa fa-gear'});
tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'icon fa fa-lock'});
tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'icon fa fa-exclamation-circle'});
if (global.window.mm_config.EnableOAuthServiceProvider === 'true') {
tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'icon fa fa-th'});
}
tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'icon fa fa-eye'});
tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'icon fa fa-list-alt'});

67
webapp/i18n/en.json
Просмотреть файл

@@ -93,6 +93,17 @@
"add_incoming_webhook.header": "Add",
"add_incoming_webhook.name": "Name",
"add_incoming_webhook.save": "Save",
"add_oauth_app.callbackUrls.help": "The redirect URIs to which the service will redirect users after accepting or denying authorization of your application, and which will handle authorization codes or access tokens. Must be a valid URL and start with http:// or https://.",
"add_oauth_app.callbackUrlsRequired": "One or more callback URLs are required",
"add_oauth_app.description.help": "Description for your OAuth 2.0 application.",
"add_oauth_app.descriptionRequired": "Description for the OAuth 2.0 application is required.",
"add_oauth_app.header": "Add",
"add_oauth_app.homepage.help": "The URL for the homepage of the OAuth 2.0 application. Make sure you use HTTP or HTTPS in your URL depending on your server configuration.",
"add_oauth_app.homepageRequired": "Homepage for the OAuth 2.0 application is required.",
"add_oauth_app.icon.help": "(Optional) The URL of the image used for your OAuth 2.0 application. Make sure you use HTTP or HTTPS in your URL.",
"add_oauth_app.name.help": "Display name for your OAuth 2.0 application made of up to 64 characters.",
"add_oauth_app.nameRequired": "Name for the OAuth 2.0 application is required.",
"add_oauth_app.trusted.help": "When true, the OAuth 2.0 application is considered trusted by the Mattermost server and doesn't require the user to accept authorization. When false, an additional window will appear, asking the user to accept or deny the authorization.",
"add_outgoing_webhook.callbackUrls": "Callback URLs (One Per Line)",
"add_outgoing_webhook.callbackUrls.help": "The URL that messages will be sent to.",
"add_outgoing_webhook.callbackUrlsRequired": "One or more callback URLs are required",
@@ -360,8 +371,8 @@
"admin.image.thumbWidthDescription": "Width of thumbnails generated from uploaded images. Updating this value changes how thumbnail images render in future, but does not change images created in the past.",
"admin.image.thumbWidthExample": "Ex \"120\"",
"admin.image.thumbWidthTitle": "Attachment Thumbnail Width:",
"admin.integrations.custom": "Custom Integrations",
"admin.integrations.external": "External Services",
"admin.integrations.webhook": "Webhooks and Commands",
"admin.ldap.baseDesc": "The Base DN is the Distinguished Name of the location where Mattermost should start its search for users in the LDAP tree.",
"admin.ldap.baseEx": "Ex \"ou=Unit Name,dc=corp,dc=example,dc=com\"",
"admin.ldap.baseTitle": "BaseDN:",
@@ -459,6 +470,8 @@
"admin.notifications.email": "Email",
"admin.notifications.push": "Mobile Push",
"admin.notifications.title": "Notification Settings",
"admin.oauth.providerDescription": "When true, Mattermost can act as an OAuth 2.0 service provider allowing external applications to authorize API requests to Mattermost.",
"admin.oauth.providerTitle": "Enable OAuth 2.0 Service Provider: ",
"admin.password.lowercase": "At least one lowercase letter",
"admin.password.minimumLength": "Minimum Password Length:",
"admin.password.minimumLengthDescription": "Minimum number of characters required for a valid password. Must be a whole number greater than or equal to {min} and less than or equal to {max}.",
@@ -625,6 +638,7 @@
"admin.sidebar.connections": "Connections",
"admin.sidebar.customBrand": "Custom Branding",
"admin.sidebar.customEmoji": "Custom Emoji",
"admin.sidebar.customIntegrations": "Custom Integrations",
"admin.sidebar.customization": "Customization",
"admin.sidebar.database": "Database",
"admin.sidebar.developer": "Developer",
@@ -666,7 +680,6 @@
"admin.sidebar.users": "Users",
"admin.sidebar.usersAndTeams": "Users and Teams",
"admin.sidebar.view_statistics": "Site Statistics",
"admin.sidebar.webhooks": "Webhooks and Commands",
"admin.sidebarHeader.systemConsole": "System Console",
"admin.sql.dataSource": "Data Source:",
"admin.sql.driverName": "Driver Name:",
@@ -861,12 +874,13 @@
"authorize.allow": "Allow",
"authorize.app": "The app <strong>{appName}</strong> would like the ability to access and modify your basic information.",
"authorize.deny": "Deny",
"authorize.title": "An application would like to connect to your {teamName} account",
"authorize.title": "<strong>{appName}</strong> would like to connect to your <strong>Mattermost</strong> user account",
"backstage_list.search": "Search",
"backstage_navbar.backToMattermost": "Back to {siteName}",
"backstage_sidebar.integrations": "Integrations",
"backstage_sidebar.integrations.commands": "Slash Commands",
"backstage_sidebar.integrations.incoming_webhooks": "Incoming Webhooks",
"backstage_sidebar.integrations.oauthApps": "OAuth 2.0 Applications",
"backstage_sidebar.integrations.outgoing_webhooks": "Outgoing Webhooks",
"center_panel.recent": "Click here to jump to recent messages. ",
"chanel_header.addMembers": "Add Members",
@@ -1161,14 +1175,35 @@
"installed_incoming_webhooks.search": "Search Incoming Webhooks",
"installed_incoming_webhooks.unknown_channel": "A Private Webhook",
"installed_integrations.callback_urls": "Callback URLs: {urls}",
"installed_integrations.client_id": "Client ID: <strong>{clientId}</strong>",
"installed_integrations.client_secret": "Client Secret: <strong>{clientSecret}</strong>",
"installed_integrations.content_type": "Content-Type: {contentType}",
"installed_integrations.creation": "Created by {creator} on {createAt, date, full}",
"installed_integrations.delete": "Delete",
"installed_integrations.hideSecret": "Hide Secret",
"installed_integrations.regenToken": "Regenerate Token",
"installed_integrations.showSecret": "Show Secret",
"installed_integrations.token": "Token: {token}",
"installed_integrations.triggerWords": "Trigger Words: {triggerWords}",
"installed_integrations.triggerWhen": "Trigger When: {triggerWhen}",
"installed_integrations.unnamed_oauth_app": "Unnamed OAuth 2.0 Application",
"installed_integrations.url": "URL: {url}",
"installed_oauth_apps.add": "Add OAuth 2.0 Application",
"installed_oauth_apps.callbackUrls": "Callback URLs (One Per Line)",
"installed_oauth_apps.cancel": "Cancel",
"installed_oauth_apps.description": "Description",
"installed_oauth_apps.empty": "No OAuth 2.0 Applications found",
"installed_oauth_apps.header": "OAuth 2.0 Applications",
"installed_oauth_apps.help": "OAuth 2.0 Applications are available to everyone on your server.",
"installed_oauth_apps.homepage": "Homepage",
"installed_oauth_apps.iconUrl": "Icon URL",
"installed_oauth_apps.is_trusted": "Is Trusted: <strong>{isTrusted}</strong>",
"installed_oauth_apps.name": "Display Name",
"installed_oauth_apps.save": "Save",
"installed_oauth_apps.search": "Search OAuth 2.0 Applications",
"installed_oauth_apps.trusted": "Is Trusted",
"installed_oauth_apps.trusted.no": "No",
"installed_oauth_apps.trusted.yes": "Yes",
"installed_outgoing_webhooks.add": "Add Outgoing Webhook",
"installed_outgoing_webhooks.empty": "No outgoing webhooks found",
"installed_outgoing_webhooks.header": "Outgoing Webhooks",
@@ -1181,6 +1216,8 @@
"integrations.header": "Integrations",
"integrations.incomingWebhook.description": "Incoming webhooks allow external integrations to send messages",
"integrations.incomingWebhook.title": "Incoming Webhook",
"integrations.oauthApps.description": "OAuth 2.0 allows external applications to make authorized requests to the Mattermost API.",
"integrations.oauthApps.title": "OAuth 2.0 Applications",
"integrations.outgoingWebhook.description": "Outgoing webhooks allow external integrations to receive and respond to messages",
"integrations.outgoingWebhook.title": "Outgoing Webhook",
"intro_messages.DM": "This is the start of your direct message history with {teammate}.<br />Direct messages and files shared here are not shown to people outside this area.",
@@ -1338,25 +1375,6 @@
"post_info.reply": "Reply",
"posts_view.loadMore": "Load more messages",
"posts_view.newMsg": "New Messages",
"register_app.callback": "Callback URL",
"register_app.callbackError": "At least one callback URL must be filled in.",
"register_app.cancel": "Cancel",
"register_app.clientId": "Client ID",
"register_app.clientSecret": "Client Secret",
"register_app.close": "Close",
"register_app.credentialsDescription": "Save these somewhere SAFE and SECURE. Treat your Client ID as your app's username and your Client Secret as the app's password.",
"register_app.credentialsSave": "I have saved both my Client Id and Client Secret somewhere safe",
"register_app.credentialsTitle": "Your Application Credentials",
"register_app.description": "Description",
"register_app.dev": "Developer Applications",
"register_app.homepage": "Homepage URL",
"register_app.homepageError": "Homepage must be filled in.",
"register_app.name": "Application Name",
"register_app.nameError": "Application name must be filled in.",
"register_app.optional": "Optional",
"register_app.register": "Register",
"register_app.required": "Required",
"register_app.title": "Register a New Application",
"removed_channel.channelName": "the channel",
"removed_channel.from": "Removed from ",
"removed_channel.okay": "Okay",
@@ -1581,10 +1599,6 @@
"user.settings.custom_theme.sidebarTextHoverBg": "Sidebar Text Hover BG",
"user.settings.custom_theme.sidebarTitle": "Sidebar Styles",
"user.settings.custom_theme.sidebarUnreadText": "Sidebar Unread Text",
"user.settings.developer.applicationsPreview": "Applications (Preview)",
"user.settings.developer.register": "Register New Application",
"user.settings.developer.thirdParty": "Open to register a new third-party application",
"user.settings.developer.title": "Developer Settings",
"user.settings.display.channelDisplayTitle": "Channel Display Mode",
"user.settings.display.channeldisplaymode": "Select the width of the center channel.",
"user.settings.display.clockDisplay": "Clock Display",
@@ -1679,7 +1693,6 @@
"user.settings.modal.confirmBtns": "Yes, Discard",
"user.settings.modal.confirmMsg": "You have unsaved changes, are you sure you want to discard them?",
"user.settings.modal.confirmTitle": "Discard Changes?",
"user.settings.modal.developer": "Developer",
"user.settings.modal.display": "Display",
"user.settings.modal.general": "General",
"user.settings.modal.notifications": "Notifications",

Двоичные данные
webapp/images/oauth_icon.png Обычный файл
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 25 KiB

Двоичные данные
webapp/images/webhook_icon.jpg
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом" Свайп Наложение

До

Ширина:  |  Высота:  |  Размер: 67 KiB

После

Ширина:  |  Высота:  |  Размер: 20 KiB

9
webapp/root.html
Просмотреть файл

@@ -34,20 +34,13 @@
<!-- CSS Should always go first -->
<link rel='stylesheet' class='code_theme'>
<style id='antiClickjack'>body{display:none !important;}</style>
<script type='text/javascript'>
if (self === top) {
var blocker = document.getElementById('antiClickjack');
blocker.parentNode.removeChild(blocker);
}
</script>
</head>
<body>
<div id='root'>
<div
class='loading-screen'
style='relative'
style='position: relative'
>
<div class='loading__content'>
<div class='round round-1'></div>

8
webapp/routes/route_admin_console.jsx
Просмотреть файл

@@ -24,7 +24,7 @@ import SessionSettings from 'components/admin_console/session_settings.jsx';
import ConnectionSettings from 'components/admin_console/connection_settings.jsx';
import EmailSettings from 'components/admin_console/email_settings.jsx';
import PushSettings from 'components/admin_console/push_settings.jsx';
import WebhookSettings from 'components/admin_console/webhook_settings.jsx';
import CustomIntegrationsSettings from 'components/admin_console/custom_integrations_settings.jsx';
import ExternalServiceSettings from 'components/admin_console/external_service_settings.jsx';
import DatabaseSettings from 'components/admin_console/database_settings.jsx';
import StorageSettings from 'components/admin_console/storage_settings.jsx';
@@ -137,10 +137,10 @@ export default (
/>
</Route>
<Route path='integrations'>
<IndexRedirect to='webhooks'/>
<IndexRedirect to='custom'/>
<Route
path='webhooks'
component={WebhookSettings}
path='custom'
component={CustomIntegrationsSettings}
/>
<Route
path='external'

16
webapp/routes/route_integrations.jsx
Просмотреть файл

@@ -61,6 +61,22 @@ export default {
}
}
]
},
{
path: 'oauth2-apps',
indexRoute: {
getComponents: (location, callback) => {
System.import('components/integrations/components/installed_oauth_apps.jsx').then(RouteUtils.importComponentSuccess(callback));
}
},
childRoutes: [
{
path: 'add',
getComponents: (location, callback) => {
System.import('components/integrations/components/add_oauth_app.jsx').then(RouteUtils.importComponentSuccess(callback));
}
}
]
}
]
};

6
webapp/routes/route_root.jsx
Просмотреть файл

@@ -130,6 +130,12 @@ export default {
System.import('components/select_team/select_team.jsx').then(RouteUtils.importComponentSuccess(callback));
}
},
{
path: '*authorize',
getComponents: (location, callback) => {
System.import('components/authorize.jsx').then(RouteUtils.importComponentSuccess(callback));
}
},
createTeamRoute
]
)

11
webapp/sass/components/_oauth.scss
Просмотреть файл

@@ -10,14 +10,19 @@
.prompt__heading {
display: table;
font-size: em(20px);
font-size: em(18px);
line-height: normal;
margin: 1em 0;
table-layout: fixed;
width: 100%;
> div {
display: table-cell;
vertical-align: top;
&:first-child {
width: 70px;
}
}
img {
@@ -26,12 +31,12 @@
}
.prompt__allow {
font-size: em(24px);
font-size: em(20px);
margin: 1em 0;
}
.prompt__buttons {
border-top: 1px solid $dark-gray;
border-top: 1px solid $light-gray;
padding: 1.5em 0;
text-align: right;
}

17
webapp/sass/responsive/_mobile.scss
Просмотреть файл

@@ -1,6 +1,19 @@
@charset 'UTF-8';
@media screen and (max-width: 768px) {
.prompt {
.prompt__heading {
display: block;
> div {
&:first-child {
display: block;
margin: 0 0 1em;
}
}
}
}
.scrollbar--view {
margin-right: 0 !important;
}
@@ -1092,6 +1105,10 @@
@include translate3d(260px, 0, 0);
}
}
.integration__icon {
display: none;
}
}
@media screen and (max-height: 640px) {

20
webapp/sass/routes/_backstage.scss
Просмотреть файл

@@ -40,7 +40,7 @@
.backstage-content {
background-color: $bg--gray;
margin: 46px auto;
max-width: 960px;
max-width: 1200px;
padding-left: 135px;
vertical-align: top;
}
@@ -216,6 +216,7 @@
border-bottom: 1px solid $light-gray;
display: flex;
padding: 20px 15px;
position: relative;
&:last-child {
border: none;
@@ -276,6 +277,7 @@
background-color: $white;
border: 1px solid $light-gray;
padding: 40px 30px 30px;
position: relative;
label {
font-weight: normal;
@@ -323,16 +325,27 @@
}
}
.integration__icon {
position: absolute;
height: 100px;
width: 100px;
right: 20px;
&.integration-list__icon {
top: 50px;
}
}
.integration-option {
background-color: $white;
border: 1px solid $light-gray;
display: inline-block;
height: 210px;
margin: 0 30px 30px 0;
min-height: 230px;
padding: 20px;
text-align: center;
vertical-align: top;
width: 250px;
width: 290px;
&:last-child {
margin-right: 0;
@@ -346,6 +359,7 @@
.integration-option__image {
height: 80px;
margin: .5em 0 .7em;
width: 80px;
}

43
webapp/stores/integration_store.jsx
Просмотреть файл

@@ -20,6 +20,8 @@ class IntegrationStore extends EventEmitter {
this.outgoingWebhooks = new Map();
this.commands = new Map();
this.oauthApps = new Map();
}
addChangeListener(callback) {
@@ -149,6 +151,35 @@ class IntegrationStore extends EventEmitter {
this.setCommands(teamId, commands);
}
hasReceivedOAuthApps(userId) {
return this.oauthApps.has(userId);
}
getOAuthApps(userId) {
return this.oauthApps.get(userId) || [];
}
setOAuthApps(userId, oauthApps) {
this.oauthApps.set(userId, oauthApps);
}
addOAuthApp(oauthApp) {
const userId = oauthApp.creator_id;
const oauthApps = this.getOAuthApps(userId);
oauthApps.push(oauthApp);
this.setOAuthApps(userId, oauthApps);
}
removeOAuthApp(userId, id) {
let apps = this.getOAuthApps(userId);
apps = apps.filter((app) => app.id !== id);
this.setOAuthApps(userId, apps);
}
handleEventPayload(payload) {
const action = payload.action;
@@ -197,6 +228,18 @@ class IntegrationStore extends EventEmitter {
this.removeCommand(action.teamId, action.id);
this.emitChange();
break;
case ActionTypes.RECEIVED_OAUTHAPPS:
this.setOAuthApps(action.userId, action.oauthApps);
this.emitChange();
break;
case ActionTypes.RECEIVED_OAUTHAPP:
this.addOAuthApp(action.oauthApp);
this.emitChange();
break;
case ActionTypes.REMOVED_OAUTHAPP:
this.removeOAuthApp(action.userId, action.id);
this.emitChange();
break;
}
}
}

1
webapp/stores/modal_store.jsx
Просмотреть файл

@@ -37,7 +37,6 @@ class ModalStoreClass extends EventEmitter {
case ActionTypes.TOGGLE_DELETE_POST_MODAL:
case ActionTypes.TOGGLE_GET_POST_LINK_MODAL:
case ActionTypes.TOGGLE_GET_TEAM_INVITE_LINK_MODAL:
case ActionTypes.TOGGLE_REGISTER_APP_MODAL:
case ActionTypes.TOGGLE_GET_PUBLIC_LINK_MODAL:
this.emit(type, value, args);
break;

4
webapp/utils/constants.jsx
Просмотреть файл

@@ -106,6 +106,9 @@ export const ActionTypes = keyMirror({
RECEIVED_COMMAND: null,
UPDATED_COMMAND: null,
REMOVED_COMMAND: null,
RECEIVED_OAUTHAPPS: null,
RECEIVED_OAUTHAPP: null,
REMOVED_OAUTHAPP: null,
RECEIVED_CUSTOM_EMOJIS: null,
RECEIVED_CUSTOM_EMOJI: null,
@@ -138,7 +141,6 @@ export const ActionTypes = keyMirror({
TOGGLE_DELETE_POST_MODAL: null,
TOGGLE_GET_POST_LINK_MODAL: null,
TOGGLE_GET_TEAM_INVITE_LINK_MODAL: null,
TOGGLE_REGISTER_APP_MODAL: null,
TOGGLE_GET_PUBLIC_LINK_MODAL: null,
SUGGESTION_PRETEXT_CHANGED: null,