summaryrefslogtreecommitdiffstats
path: root/web/react/components/user_settings/user_settings_security.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/user_settings/user_settings_security.jsx')
-rw-r--r--web/react/components/user_settings/user_settings_security.jsx323
1 files changed, 209 insertions, 114 deletions
diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx
index fa2fecf07..d9c5f58a9 100644
--- a/web/react/components/user_settings/user_settings_security.jsx
+++ b/web/react/components/user_settings/user_settings_security.jsx
@@ -6,6 +6,9 @@ import SettingItemMax from '../setting_item_max.jsx';
import AccessHistoryModal from '../access_history_modal.jsx';
import ActivityLogModal from '../activity_log_modal.jsx';
import ToggleModalButton from '../toggle_modal_button.jsx';
+
+import TeamStore from '../../stores/team_store.jsx';
+
import * as Client from '../../utils/client.jsx';
import * as AsyncClient from '../../utils/async_client.jsx';
import Constants from '../../utils/constants.jsx';
@@ -18,9 +21,19 @@ export default class SecurityTab extends React.Component {
this.updateCurrentPassword = this.updateCurrentPassword.bind(this);
this.updateNewPassword = this.updateNewPassword.bind(this);
this.updateConfirmPassword = this.updateConfirmPassword.bind(this);
- this.setupInitialState = this.setupInitialState.bind(this);
+ this.getDefaultState = this.getDefaultState.bind(this);
+ this.createPasswordSection = this.createPasswordSection.bind(this);
+ this.createSignInSection = this.createSignInSection.bind(this);
- this.state = this.setupInitialState();
+ this.state = this.getDefaultState();
+ }
+ getDefaultState() {
+ return {
+ currentPassword: '',
+ newPassword: '',
+ confirmPassword: '',
+ authService: this.props.user.auth_service
+ };
}
submitPassword(e) {
e.preventDefault();
@@ -51,13 +64,13 @@ export default class SecurityTab extends React.Component {
data.new_password = newPassword;
Client.updatePassword(data,
- function success() {
+ () => {
this.props.updateSection('');
AsyncClient.getMe();
- this.setState(this.setupInitialState());
- }.bind(this),
- function fail(err) {
- var state = this.setupInitialState();
+ this.setState(this.getDefaultState());
+ },
+ (err) => {
+ var state = this.getDefaultState();
if (err.message) {
state.serverError = err.message;
} else {
@@ -65,7 +78,7 @@ export default class SecurityTab extends React.Component {
}
state.passwordError = '';
this.setState(state);
- }.bind(this)
+ }
);
}
updateCurrentPassword(e) {
@@ -77,86 +90,60 @@ export default class SecurityTab extends React.Component {
updateConfirmPassword(e) {
this.setState({confirmPassword: e.target.value});
}
- setupInitialState() {
- return {currentPassword: '', newPassword: '', confirmPassword: ''};
- }
- render() {
- var serverError;
- if (this.state.serverError) {
- serverError = this.state.serverError;
- }
- var passwordError;
- if (this.state.passwordError) {
- passwordError = this.state.passwordError;
- }
+ createPasswordSection() {
+ let updateSectionStatus;
- var updateSectionStatus;
- var passwordSection;
- if (this.props.activeSection === 'password') {
- var inputs = [];
- var submit = null;
-
- if (this.props.user.auth_service === '') {
- inputs.push(
- <div
- key='currentPasswordUpdateForm'
- className='form-group'
- >
- <label className='col-sm-5 control-label'>Current Password</label>
- <div className='col-sm-7'>
- <input
- className='form-control'
- type='password'
- onChange={this.updateCurrentPassword}
- value={this.state.currentPassword}
- />
- </div>
- </div>
- );
- inputs.push(
- <div
- key='newPasswordUpdateForm'
- className='form-group'
- >
- <label className='col-sm-5 control-label'>New Password</label>
- <div className='col-sm-7'>
- <input
- className='form-control'
- type='password'
- onChange={this.updateNewPassword}
- value={this.state.newPassword}
- />
- </div>
+ if (this.props.activeSection === 'password' && this.props.user.auth_service === '') {
+ const inputs = [];
+
+ inputs.push(
+ <div
+ key='currentPasswordUpdateForm'
+ className='form-group'
+ >
+ <label className='col-sm-5 control-label'>{'Current Password'}</label>
+ <div className='col-sm-7'>
+ <input
+ className='form-control'
+ type='password'
+ onChange={this.updateCurrentPassword}
+ value={this.state.currentPassword}
+ />
</div>
- );
- inputs.push(
- <div
- key='retypeNewPasswordUpdateForm'
- className='form-group'
- >
- <label className='col-sm-5 control-label'>Retype New Password</label>
- <div className='col-sm-7'>
- <input
- className='form-control'
- type='password'
- onChange={this.updateConfirmPassword}
- value={this.state.confirmPassword}
- />
- </div>
+ </div>
+ );
+ inputs.push(
+ <div
+ key='newPasswordUpdateForm'
+ className='form-group'
+ >
+ <label className='col-sm-5 control-label'>{'New Password'}</label>
+ <div className='col-sm-7'>
+ <input
+ className='form-control'
+ type='password'
+ onChange={this.updateNewPassword}
+ value={this.state.newPassword}
+ />
</div>
- );
-
- submit = this.submitPassword;
- } else {
- inputs.push(
- <div
- key='oauthPasswordInfo'
- className='form-group'
- >
- <label className='col-sm-12'>Log in occurs through GitLab. Please see your GitLab account settings page to update your password.</label>
+ </div>
+ );
+ inputs.push(
+ <div
+ key='retypeNewPasswordUpdateForm'
+ className='form-group'
+ >
+ <label className='col-sm-5 control-label'>{'Retype New Password'}</label>
+ <div className='col-sm-7'>
+ <input
+ className='form-control'
+ type='password'
+ onChange={this.updateConfirmPassword}
+ value={this.state.confirmPassword}
+ />
</div>
- );
- }
+ </div>
+ );
updateSectionStatus = function resetSection(e) {
this.props.updateSection('');
@@ -164,51 +151,157 @@ export default class SecurityTab extends React.Component {
e.preventDefault();
}.bind(this);
- passwordSection = (
+ return (
<SettingItemMax
title='Password'
inputs={inputs}
- submit={submit}
- server_error={serverError}
- client_error={passwordError}
+ submit={this.submitPassword}
+ server_error={this.state.serverError}
+ client_error={this.state.passwordError}
updateSection={updateSectionStatus}
/>
);
- } else {
- var describe;
- if (this.props.user.auth_service === '') {
- var d = new Date(this.props.user.last_password_update);
- var hour = '12';
- if (d.getHours() % 12) {
- hour = String(d.getHours() % 12);
- }
- var min = String(d.getMinutes());
- if (d.getMinutes() < 10) {
- min = '0' + d.getMinutes();
- }
- var timeOfDay = ' am';
- if (d.getHours() >= 12) {
- timeOfDay = ' pm';
- }
+ }
+
+ var describe;
+ var d = new Date(this.props.user.last_password_update);
+ var hour = '12';
+ if (d.getHours() % 12) {
+ hour = String(d.getHours() % 12);
+ }
+ var min = String(d.getMinutes());
+ if (d.getMinutes() < 10) {
+ min = '0' + d.getMinutes();
+ }
+ var timeOfDay = ' am';
+ if (d.getHours() >= 12) {
+ timeOfDay = ' pm';
+ }
- describe = 'Last updated ' + Constants.MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear() + ' at ' + hour + ':' + min + timeOfDay;
- } else {
- describe = 'Log in done through GitLab';
+ describe = 'Last updated ' + Constants.MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear() + ' at ' + hour + ':' + min + timeOfDay;
+
+ updateSectionStatus = function updateSection() {
+ this.props.updateSection('password');
+ }.bind(this);
+
+ return (
+ <SettingItemMin
+ title='Password'
+ describe={describe}
+ updateSection={updateSectionStatus}
+ />
+ );
+ }
+ createSignInSection() {
+ let updateSectionStatus;
+ const user = this.props.user;
+
+ if (this.props.activeSection === 'signin') {
+ const inputs = [];
+ const teamName = TeamStore.getCurrent().name;
+
+ let emailOption;
+ if (global.window.mm_config.EnableSignUpWithEmail === 'true' && user.auth_service !== '') {
+ emailOption = (
+ <div>
+ <a
+ className='btn btn-primary'
+ href={'/' + teamName + '/claim?email=' + user.email}
+ >
+ {'Switch to using email and password'}
+ </a>
+ <br/>
+ </div>
+ );
}
- updateSectionStatus = function updateSection() {
- this.props.updateSection('password');
+ let gitlabOption;
+ if (global.window.mm_config.EnableSignUpWithGitLab === 'true' && user.auth_service === '') {
+ gitlabOption = (
+ <div>
+ <a
+ className='btn btn-primary'
+ href={'/' + teamName + '/claim?email=' + user.email + '&new_type=' + Constants.GITLAB_SERVICE}
+ >
+ {'Switch to using GitLab SSO'}
+ </a>
+ <br/>
+ </div>
+ );
+ }
+
+ let googleOption;
+ if (global.window.mm_config.EnableSignUpWithGoogle === 'true' && user.auth_service === '') {
+ googleOption = (
+ <div>
+ <a
+ className='btn btn-primary'
+ href={'/' + teamName + '/claim?email=' + user.email + '&new_type=' + Constants.GOOGLE_SERVICE}
+ >
+ {'Switch to using Google SSO'}
+ </a>
+ <br/>
+ </div>
+ );
+ }
+
+ inputs.push(
+ <div key='userSignInOption'>
+ {emailOption}
+ {gitlabOption}
+ <br/>
+ {googleOption}
+ </div>
+ );
+
+ updateSectionStatus = function updateSection(e) {
+ this.props.updateSection('');
+ this.setState({serverError: null});
+ e.preventDefault();
}.bind(this);
- passwordSection = (
- <SettingItemMin
- title='Password'
- describe={describe}
+ const extraInfo = <span>{'You may only have one sign-in method at a time. Switching sign-in method will send an email notifying you if the change was successful.'}</span>;
+
+ return (
+ <SettingItemMax
+ title='Sign-in Method'
+ extraInfo={extraInfo}
+ inputs={inputs}
+ server_error={this.state.serverError}
updateSection={updateSectionStatus}
/>
);
}
+ updateSectionStatus = function updateSection() {
+ this.props.updateSection('signin');
+ }.bind(this);
+
+ let describe = 'Email and Password';
+ if (this.props.user.auth_service === Constants.GITLAB_SERVICE) {
+ describe = 'GitLab SSO';
+ }
+
+ return (
+ <SettingItemMin
+ title='Sign-in Method'
+ describe={describe}
+ updateSection={updateSectionStatus}
+ />
+ );
+ }
+ render() {
+ const passwordSection = this.createPasswordSection();
+ let signInSection;
+
+ let numMethods = 0;
+ numMethods = global.window.mm_config.EnableSignUpWithGitLab === 'true' ? numMethods + 1 : numMethods;
+ numMethods = global.window.mm_config.EnableSignUpWithGoogle === 'true' ? numMethods + 1 : numMethods;
+
+ if (global.window.mm_config.EnableSignUpWithEmail && numMethods > 0) {
+ signInSection = this.createSignInSection();
+ }
+
return (
<div>
<div className='modal-header'>
@@ -233,9 +326,11 @@ export default class SecurityTab extends React.Component {
</h4>
</div>
<div className='user-settings'>
- <h3 className='tab-header'>Security Settings</h3>
+ <h3 className='tab-header'>{'Security Settings'}</h3>
<div className='divider-dark first'/>
{passwordSection}
+ <div className='divider-light'/>
+ {signInSection}
<div className='divider-dark'/>
<br></br>
<ToggleModalButton
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-29 04:38:58 +0000