From 3f8dda6f5ad676c976fd5ae575a6790fdb505449 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Fri, 29 Jul 2016 14:58:37 -0400 Subject: PLT-3633 EE: Add Google and Office365 SSO through OAuth2 (#3660) * EE: Add Google and Office365 SSO through OAuth2 * Add localization strings * Text tweaks for PLT-3633 * Added sign-up button for Office 365 * Updated some error messages and a bit of licensing * Updated sign-in method section in user settings to include Google and Office365 * Added more localization strings --- webapp/components/admin_console/admin_sidebar.jsx | 129 +++--- webapp/components/admin_console/oauth_settings.jsx | 432 +++++++++++++++++++++ webapp/components/login/login_controller.jsx | 27 +- webapp/components/signup_user_complete.jsx | 18 + .../user_settings/user_settings_general.jsx | 56 +++ .../user_settings/user_settings_security.jsx | 192 +++++---- 6 files changed, 713 insertions(+), 141 deletions(-) create mode 100644 webapp/components/admin_console/oauth_settings.jsx (limited to 'webapp/components') diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx index 5c02f419e..d812b83fd 100644 --- a/webapp/components/admin_console/admin_sidebar.jsx +++ b/webapp/components/admin_console/admin_sidebar.jsx @@ -175,6 +175,7 @@ export default class AdminSidebar extends React.Component { } render() { + let oauthSettings = null; let ldapSettings = null; let samlSettings = null; let complianceSettings = null; @@ -184,69 +185,93 @@ export default class AdminSidebar extends React.Component { let policy = null; if (window.mm_config.BuildEnterpriseReady === 'true') { - if (window.mm_license.IsLicensed === 'true') { - if (global.window.mm_license.LDAP === 'true') { - ldapSettings = ( - - } + license = ( + - ); - } + } + /> + ); + } - if (global.window.mm_license.SAML === 'true') { - samlSettings = ( - - } - /> - ); - } + if (window.mm_license.IsLicensed === 'true') { + if (global.window.mm_license.LDAP === 'true') { + ldapSettings = ( + + } + /> + ); + } - if (global.window.mm_license.Compliance === 'true') { - complianceSettings = ( - - } - /> - ); - } + if (global.window.mm_license.SAML === 'true') { + samlSettings = ( + + } + /> + ); + } - policy = ( + if (global.window.mm_license.Compliance === 'true') { + complianceSettings = ( } /> ); } - license = ( + oauthSettings = ( + } + /> + ); + + policy = ( + + } + /> + ); + } else { + oauthSettings = ( + } /> @@ -396,15 +421,7 @@ export default class AdminSidebar extends React.Component { /> } /> - - } - /> + {oauthSettings} {ldapSettings} {samlSettings} diff --git a/webapp/components/admin_console/oauth_settings.jsx b/webapp/components/admin_console/oauth_settings.jsx new file mode 100644 index 000000000..627a8864b --- /dev/null +++ b/webapp/components/admin_console/oauth_settings.jsx @@ -0,0 +1,432 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import * as Utils from 'utils/utils.jsx'; +import Constants from 'utils/constants.jsx'; + +import AdminSettings from './admin_settings.jsx'; +import DropdownSetting from './dropdown_setting.jsx'; +import SettingsGroup from './settings_group.jsx'; +import TextSetting from './text_setting.jsx'; + +import React from 'react'; +import {FormattedHTMLMessage, FormattedMessage} from 'react-intl'; + +export default class OAuthSettings extends AdminSettings { + constructor(props) { + super(props); + + this.getConfigFromState = this.getConfigFromState.bind(this); + this.getStateFromConfig = this.getStateFromConfig.bind(this); + this.renderSettings = this.renderSettings.bind(this); + this.renderOffice365 = this.renderOffice365.bind(this); + this.renderGoogle = this.renderGoogle.bind(this); + this.renderGitLab = this.renderGitLab.bind(this); + this.changeType = this.changeType.bind(this); + } + + getConfigFromState(config) { + config.GitLabSettings.Enable = false; + config.GoogleSettings.Enable = false; + config.Office365Settings.Enable = false; + + if (this.state.oauthType === Constants.GITLAB_SERVICE) { + config.GitLabSettings.Enable = true; + config.GitLabSettings.Id = this.state.id; + config.GitLabSettings.Secret = this.state.secret; + config.GitLabSettings.UserApiEndpoint = this.state.userApiEndpoint; + config.GitLabSettings.AuthEndpoint = this.state.authEndpoint; + config.GitLabSettings.TokenEndpoint = this.state.tokenEndpoint; + } + + if (this.state.oauthType === Constants.GOOGLE_SERVICE) { + config.GoogleSettings.Enable = true; + config.GoogleSettings.Id = this.state.id; + config.GoogleSettings.Secret = this.state.secret; + config.GoogleSettings.UserApiEndpoint = this.state.userApiEndpoint; + config.GoogleSettings.AuthEndpoint = this.state.authEndpoint; + config.GoogleSettings.TokenEndpoint = this.state.tokenEndpoint; + config.GoogleSettings.Scope = 'profile email'; + } + + if (this.state.oauthType === Constants.OFFICE365_SERVICE) { + config.Office365Settings.Enable = true; + config.Office365Settings.Id = this.state.id; + config.Office365Settings.Secret = this.state.secret; + config.Office365Settings.UserApiEndpoint = this.state.userApiEndpoint; + config.Office365Settings.AuthEndpoint = this.state.authEndpoint; + config.Office365Settings.TokenEndpoint = this.state.tokenEndpoint; + config.Office365Settings.Scope = 'User.Read'; + } + + return config; + } + + getStateFromConfig(config) { + this.config = config; + + let oauthType = 'off'; + let settings = {}; + if (config.GitLabSettings.Enable) { + oauthType = Constants.GITLAB_SERVICE; + settings = config.GitLabSettings; + } else if (config.GoogleSettings.Enable) { + oauthType = Constants.GOOGLE_SERVICE; + settings = config.GoogleSettings; + } else if (config.Office365Settings.Enable) { + oauthType = Constants.OFFICE365_SERVICE; + settings = config.Office365Settings; + } + + return { + oauthType, + id: settings.Id, + secret: settings.Secret, + userApiEndpoint: settings.UserApiEndpoint, + authEndpoint: settings.AuthEndpoint, + tokenEndpoint: settings.TokenEndpoint + }; + } + + changeType(id, value) { + let settings = {}; + if (value === Constants.GITLAB_SERVICE) { + settings = this.config.GitLabSettings; + } else if (value === Constants.GOOGLE_SERVICE) { + settings = this.config.GoogleSettings; + } else if (value === Constants.OFFICE365_SERVICE) { + settings = this.config.Office365Settings; + } + + this.setState({ + id: settings.Id, + secret: settings.Secret, + userApiEndpoint: settings.UserApiEndpoint, + authEndpoint: settings.AuthEndpoint, + tokenEndpoint: settings.TokenEndpoint + }); + + this.handleChange(id, value); + } + + renderTitle() { + return ( +

+ +

+ ); + } + + renderGoogle() { + return ( +
+ + } + placeholder={Utils.localizeMessage('admin.google.clientIdExample', 'Ex "7602141235235-url0fhs1mayfasbmop5qlfns8dh4.apps.googleusercontent.com"')} + helpText={ + + } + value={this.state.id} + onChange={this.handleChange} + /> + + } + placeholder={Utils.localizeMessage('admin.google.clientSecretExample', 'Ex "H8sz0Az-dDs2p15-7QzD231"')} + helpText={ + + } + value={this.state.secret} + onChange={this.handleChange} + /> + + } + value='https://www.googleapis.com/plus/v1/people/me' + disabled={true} + /> + + } + value='https://accounts.google.com/o/oauth2/v2/auth' + disabled={true} + /> + + } + value='https://www.googleapis.com/oauth2/v4/token' + disabled={true} + /> +
+ ); + } + + renderOffice365() { + return ( +
+ + } + placeholder={Utils.localizeMessage('admin.office365.clientIdExample', 'Ex "adf3sfa2-ag3f-sn4n-ids0-sh1hdax192qq"')} + helpText={ + + } + value={this.state.id} + onChange={this.handleChange} + /> + + } + placeholder={Utils.localizeMessage('admin.office365.clientSecretExample', 'Ex "shAieM47sNBfgl20f8ci294"')} + helpText={ + + } + value={this.state.secret} + onChange={this.handleChange} + /> + + } + value='https://graph.microsoft.com/v1.0/me' + disabled={true} + /> + + } + value='https://login.microsoftonline.com/common/oauth2/v2.0/authorize' + disabled={true} + /> + + } + value='https://login.microsoftonline.com/common/oauth2/v2.0/token' + disabled={true} + /> +
+ ); + } + + renderGitLab() { + return ( +
+ + } + placeholder={Utils.localizeMessage('admin.gitlab.clientIdExample', 'Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"')} + helpText={ + + } + value={this.state.id} + onChange={this.handleChange} + /> + + } + placeholder={Utils.localizeMessage('admin.gitlab.clientSecretExample', 'Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"')} + helpText={ + + } + value={this.state.secret} + onChange={this.handleChange} + /> + + } + placeholder={Utils.localizeMessage('admin.gitlab.userExample', 'Ex "https:///api/v3/user"')} + helpText={ + + } + value={this.state.userApiEndpoint} + onChange={this.handleChange} + /> + + } + placeholder={Utils.localizeMessage('admin.gitlab.authExample', 'Ex "https:///oauth/authorize"')} + helpText={ + + } + value={this.state.authEndpoint} + onChange={this.handleChange} + /> + + } + placeholder={Utils.localizeMessage('admin.gitlab.tokenExample', 'Ex "https:///oauth/token"')} + helpText={ + + } + value={this.state.tokenEndpoint} + onChange={this.handleChange} + /> +
+ ); + } + + renderSettings() { + let contents; + let helpText; + if (this.state.oauthType === Constants.GITLAB_SERVICE) { + contents = this.renderGitLab(); + helpText = ( + + ); + } else if (this.state.oauthType === Constants.GOOGLE_SERVICE) { + contents = this.renderGoogle(); + helpText = ( + + ); + } else if (this.state.oauthType === Constants.OFFICE365_SERVICE) { + contents = this.renderOffice365(); + helpText = ( + + ); + } + + const oauthTypes = []; + oauthTypes.push({value: 'off', text: Utils.localizeMessage('admin.oauth.off', 'Do not allow sign-in via an OAuth 2.0 provider.')}); + oauthTypes.push({value: Constants.GITLAB_SERVICE, text: Utils.localizeMessage('admin.oauth.gitlab', 'GitLab')}); + if (global.window.mm_license.IsLicensed === 'true') { + if (global.window.mm_license.GoogleSSO === 'true') { + oauthTypes.push({value: Constants.GOOGLE_SERVICE, text: Utils.localizeMessage('admin.oauth.google', 'Google Apps')}); + } + if (global.window.mm_license.Office365SSO === 'true') { + oauthTypes.push({value: Constants.OFFICE365_SERVICE, text: Utils.localizeMessage('admin.oauth.office365', 'Office 365')}); + } + } + + return ( + + + } + helpText={helpText} + value={this.state.oauthType} + onChange={this.changeType} + /> + {contents} + + ); + } +} diff --git a/webapp/components/login/login_controller.jsx b/webapp/components/login/login_controller.jsx index bcd362f13..4a4c5cb0a 100644 --- a/webapp/components/login/login_controller.jsx +++ b/webapp/components/login/login_controller.jsx @@ -328,6 +328,7 @@ export default class LoginController extends React.Component { const ldapEnabled = this.state.ldapEnabled; const gitlabSigninEnabled = global.window.mm_config.EnableSignUpWithGitLab === 'true'; const googleSigninEnabled = global.window.mm_config.EnableSignUpWithGoogle === 'true'; + const office365SigninEnabled = global.window.mm_config.EnableSignUpWithOffice365 === 'true'; const samlSigninEnabled = this.state.samlEnabled; const usernameSigninEnabled = this.state.usernameSigninEnabled; const emailSigninEnabled = this.state.emailSigninEnabled; @@ -429,7 +430,7 @@ export default class LoginController extends React.Component { ); } - if ((emailSigninEnabled || usernameSigninEnabled || ldapEnabled) && (gitlabSigninEnabled || googleSigninEnabled || samlSigninEnabled)) { + if ((emailSigninEnabled || usernameSigninEnabled || ldapEnabled) && (gitlabSigninEnabled || googleSigninEnabled || samlSigninEnabled || office365SigninEnabled)) { loginControls.push(
@@ -484,7 +485,25 @@ export default class LoginController extends React.Component { defaultMessage='Google Apps' /> - + + ); + } + + if (office365SigninEnabled) { + loginControls.push( + + + + + + ); } diff --git a/webapp/components/signup_user_complete.jsx b/webapp/components/signup_user_complete.jsx index 254478e03..3cd6fb27b 100644 --- a/webapp/components/signup_user_complete.jsx +++ b/webapp/components/signup_user_complete.jsx @@ -594,6 +594,24 @@ export default class SignupUserComplete extends React.Component { ); } + if (global.window.mm_config.EnableSignUpWithOffice365 === 'true') { + signupMessage.push( + + + + + + ); + } + if (global.window.mm_config.EnableSaml === 'true' && global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.SAML === 'true') { signupMessage.push( ); + } else if (this.props.user.auth_service === Constants.GOOGLE_SERVICE) { + inputs.push( +
+
+ +
+ {helpText} +
+ ); + } else if (this.props.user.auth_service === Constants.OFFICE365_SERVICE) { + inputs.push( +
+
+ +
+ {helpText} +
+ ); } else if (this.props.user.auth_service === Constants.LDAP_SERVICE) { inputs.push(
); + } else if (this.props.user.auth_service === Constants.GOOGLE_SERVICE) { + describe = ( + + ); + } else if (this.props.user.auth_service === Constants.OFFICE365_SERVICE) { + describe = ( + + ); } else if (this.props.user.auth_service === Constants.LDAP_SERVICE) { describe = ( + + +
+
+ ); + } + + if (global.window.mm_config.EnableSignUpWithGoogle === 'true') { + googleOption = ( +
+ + +
+
+ ); + } + + if (global.window.mm_config.EnableSignUpWithOffice365 === 'true') { + office365Option = ( +
+ + +
+
+ ); + } + + if (global.window.mm_config.EnableLdap === 'true') { + ldapOption = ( +
+ + + +
+
+ ); + } + + if (global.window.mm_config.EnableSaml === 'true') { + samlOption = ( +
+ + +
+
+ ); + } + } else if (global.window.mm_config.EnableSignUpWithEmail === 'true') { let link; if (user.auth_service === Constants.LDAP_SERVICE) { link = '/claim/ldap_to_email?email=' + encodeURIComponent(user.email); @@ -570,86 +657,15 @@ class SecurityTab extends React.Component { ); } - let gitlabOption; - if (global.window.mm_config.EnableSignUpWithGitLab === 'true' && user.auth_service === '') { - gitlabOption = ( -
- - -
-
- ); - } - - let googleOption; - if (global.window.mm_config.EnableSignUpWithGoogle === 'true' && user.auth_service === '') { - googleOption = ( -
- - -
-
- ); - } - - let ldapOption; - if (global.window.mm_config.EnableLdap === 'true' && user.auth_service === '') { - ldapOption = ( -
- - - -
-
- ); - } - - let samlOption; - if (global.window.mm_config.EnableSaml === 'true' && user.auth_service === '') { - samlOption = ( -
- - -
-
- ); - } - const inputs = []; inputs.push(
{emailOption} {gitlabOption} + {googleOption} + {office365Option} {ldapOption} {samlOption} - {googleOption}
); @@ -693,7 +709,21 @@ class SecurityTab extends React.Component { describe = ( + ); + } else if (this.props.user.auth_service === Constants.GOOGLE_SERVICE) { + describe = ( + + ); + } else if (this.props.user.auth_service === Constants.OFFICE365_SERVICE) { + describe = ( + ); } else if (this.props.user.auth_service === Constants.LDAP_SERVICE) { -- cgit v1.2.3-1-g7c22