2015-11-30 18:52:41 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2017-03-22 18:18:27 +03:00
|
|
|
Copyright 2017 Vector Creations Ltd
|
2018-04-27 17:19:08 +03:00
|
|
|
Copyright 2017, 2018 New Vector Ltd
|
2015-11-30 18:52:41 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
2017-11-04 08:19:45 +03:00
|
|
|
import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
|
2017-10-29 05:21:34 +03:00
|
|
|
|
2017-05-02 23:17:12 +03:00
|
|
|
const React = require('react');
|
|
|
|
const ReactDOM = require('react-dom');
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2017-05-02 23:17:12 +03:00
|
|
|
const sdk = require('../../index');
|
|
|
|
const MatrixClientPeg = require("../../MatrixClientPeg");
|
|
|
|
const PlatformPeg = require("../../PlatformPeg");
|
|
|
|
const Modal = require('../../Modal');
|
|
|
|
const dis = require("../../dispatcher");
|
2017-06-20 13:22:07 +03:00
|
|
|
import sessionStore from '../../stores/SessionStore';
|
2017-07-12 15:58:14 +03:00
|
|
|
import Promise from 'bluebird';
|
2017-05-02 23:17:12 +03:00
|
|
|
const packageJson = require('../../../package.json');
|
|
|
|
const UserSettingsStore = require('../../UserSettingsStore');
|
2017-05-05 22:57:18 +03:00
|
|
|
const CallMediaHandler = require('../../CallMediaHandler');
|
2017-05-02 23:17:12 +03:00
|
|
|
const Email = require('../../email');
|
|
|
|
const AddThreepid = require('../../AddThreepid');
|
|
|
|
const SdkConfig = require('../../SdkConfig');
|
2017-05-29 16:36:50 +03:00
|
|
|
import Analytics from '../../Analytics';
|
2017-01-25 01:41:52 +03:00
|
|
|
import AccessibleButton from '../views/elements/AccessibleButton';
|
2017-09-22 22:43:27 +03:00
|
|
|
import { _t, _td } from '../../languageHandler';
|
2017-05-24 16:36:14 +03:00
|
|
|
import * as languageHandler from '../../languageHandler';
|
2017-05-22 14:01:09 +03:00
|
|
|
import * as FormattingUtils from '../../utils/FormattingUtils';
|
2015-11-30 18:52:41 +03:00
|
|
|
|
2016-06-17 19:09:52 +03:00
|
|
|
// if this looks like a release, use the 'version' from package.json; else use
|
2017-04-21 05:04:34 +03:00
|
|
|
// the git sha. Prepend version with v, to look like riot-web version
|
2017-05-02 23:17:12 +03:00
|
|
|
const REACT_SDK_VERSION = 'dist' in packageJson ? packageJson.version : packageJson.gitHead || '<local>';
|
2016-06-17 19:09:52 +03:00
|
|
|
|
2017-04-21 05:04:34 +03:00
|
|
|
// Simple method to help prettify GH Release Tags and Commit Hashes.
|
2017-05-04 18:22:39 +03:00
|
|
|
const semVerRegex = /^v?(\d+\.\d+\.\d+(?:-rc.+)?)(?:-(?:\d+-g)?([0-9a-fA-F]+))?(?:-dirty)?$/i;
|
2017-05-13 17:04:20 +03:00
|
|
|
const gHVersionLabel = function(repo, token='') {
|
2017-05-02 23:12:58 +03:00
|
|
|
const match = token.match(semVerRegex);
|
2017-05-04 18:22:39 +03:00
|
|
|
let url;
|
2017-05-02 23:12:58 +03:00
|
|
|
if (match && match[1]) { // basic semVer string possibly with commit hash
|
|
|
|
url = (match.length > 1 && match[2])
|
|
|
|
? `https://github.com/${repo}/commit/${match[2]}`
|
|
|
|
: `https://github.com/${repo}/releases/tag/v${match[1]}`;
|
|
|
|
} else {
|
|
|
|
url = `https://github.com/${repo}/commit/${token.split('-')[0]}`;
|
|
|
|
}
|
2017-09-28 13:21:06 +03:00
|
|
|
return <a target="_blank" rel="noopener" href={url}>{ token }</a>;
|
2017-05-02 23:12:58 +03:00
|
|
|
};
|
2017-01-18 17:06:47 +03:00
|
|
|
|
2017-10-29 10:43:52 +03:00
|
|
|
// Enumerate some simple 'flip a bit' UI settings (if any). The strings provided here
|
|
|
|
// must be settings defined in SettingsStore.
|
|
|
|
const SIMPLE_SETTINGS = [
|
2017-10-30 06:48:29 +03:00
|
|
|
{ id: "urlPreviewsEnabled" },
|
2017-10-29 10:43:52 +03:00
|
|
|
{ id: "autoplayGifsAndVideos" },
|
2018-04-23 05:30:37 +03:00
|
|
|
{ id: "alwaysShowEncryptionIcons" },
|
2017-10-29 10:43:52 +03:00
|
|
|
{ id: "hideReadReceipts" },
|
|
|
|
{ id: "dontSendTypingNotifications" },
|
|
|
|
{ id: "alwaysShowTimestamps" },
|
|
|
|
{ id: "showTwelveHourTimestamps" },
|
|
|
|
{ id: "hideJoinLeaves" },
|
2017-11-13 22:58:10 +03:00
|
|
|
{ id: "hideAvatarChanges" },
|
|
|
|
{ id: "hideDisplaynameChanges" },
|
2017-10-29 10:43:52 +03:00
|
|
|
{ id: "useCompactLayout" },
|
|
|
|
{ id: "hideRedactions" },
|
|
|
|
{ id: "enableSyntaxHighlightLanguageDetection" },
|
|
|
|
{ id: "MessageComposerInput.autoReplaceEmoji" },
|
|
|
|
{ id: "MessageComposerInput.dontSuggestEmoji" },
|
|
|
|
{ id: "Pill.shouldHidePillAvatar" },
|
|
|
|
{ id: "TextualBody.disableBigEmoji" },
|
|
|
|
{ id: "VideoView.flipVideoHorizontally" },
|
2018-02-28 21:16:01 +03:00
|
|
|
{ id: "TagPanel.disableTagPanel" },
|
2018-05-12 23:29:37 +03:00
|
|
|
{ id: "enableWidgetScreenshots" },
|
2017-01-18 17:06:47 +03:00
|
|
|
];
|
|
|
|
|
2017-10-31 06:09:24 +03:00
|
|
|
// These settings must be defined in SettingsStore
|
|
|
|
const ANALYTICS_SETTINGS = [
|
2017-05-29 17:11:37 +03:00
|
|
|
{
|
2018-05-15 17:39:12 +03:00
|
|
|
id: 'analyticsOptIn',
|
2017-05-29 17:11:37 +03:00
|
|
|
fn: function(checked) {
|
2018-05-15 17:39:12 +03:00
|
|
|
checked ? Analytics.enable() : Analytics.disable();
|
2017-05-29 17:11:37 +03:00
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2017-10-31 06:09:24 +03:00
|
|
|
// These settings must be defined in SettingsStore
|
|
|
|
const WEBRTC_SETTINGS = [
|
2017-06-12 22:15:14 +03:00
|
|
|
{
|
|
|
|
id: 'webRtcForceTURN',
|
2017-11-17 20:48:42 +03:00
|
|
|
fn: (val) => {
|
|
|
|
MatrixClientPeg.get().setForceTURN(val);
|
|
|
|
},
|
2017-06-12 22:15:14 +03:00
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2017-10-31 06:09:24 +03:00
|
|
|
// These settings must be defined in SettingsStore
|
|
|
|
const CRYPTO_SETTINGS = [
|
2017-01-21 20:39:31 +03:00
|
|
|
{
|
|
|
|
id: 'blacklistUnverifiedDevices',
|
2017-05-29 17:08:11 +03:00
|
|
|
fn: function(checked) {
|
|
|
|
MatrixClientPeg.get().setGlobalBlacklistUnverifiedDevices(checked);
|
|
|
|
},
|
2017-01-21 20:39:31 +03:00
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2017-01-18 17:06:47 +03:00
|
|
|
// Enumerate the available themes, with a nice human text label.
|
2017-01-18 19:36:27 +03:00
|
|
|
// 'label' is how we describe it in the UI.
|
2017-10-31 06:09:24 +03:00
|
|
|
// 'value' is the value for the theme setting
|
2017-01-18 19:36:27 +03:00
|
|
|
//
|
2017-01-18 17:06:47 +03:00
|
|
|
// XXX: Ideally we would have a theme manifest or something and they'd be nicely
|
|
|
|
// packaged up in a single directory, and/or located at the application layer.
|
|
|
|
// But for now for expedience we just hardcode them here.
|
|
|
|
const THEMES = [
|
2017-10-30 01:02:51 +03:00
|
|
|
{ label: _td('Light theme'), value: 'light' },
|
|
|
|
{ label: _td('Dark theme'), value: 'dark' },
|
2017-11-13 22:29:36 +03:00
|
|
|
{ label: _td('Status.im theme'), value: 'status' },
|
2017-01-18 17:06:47 +03:00
|
|
|
];
|
|
|
|
|
2017-09-15 00:33:36 +03:00
|
|
|
const IgnoredUser = React.createClass({
|
|
|
|
propTypes: {
|
2017-12-26 04:03:18 +03:00
|
|
|
userId: PropTypes.string.isRequired,
|
|
|
|
onUnignored: PropTypes.func.isRequired,
|
2017-09-15 00:33:36 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
_onUnignoreClick: function() {
|
|
|
|
const ignoredUsers = MatrixClientPeg.get().getIgnoredUsers();
|
|
|
|
const index = ignoredUsers.indexOf(this.props.userId);
|
|
|
|
if (index !== -1) {
|
|
|
|
ignoredUsers.splice(index, 1);
|
|
|
|
MatrixClientPeg.get().setIgnoredUsers(ignoredUsers)
|
|
|
|
.then(() => this.props.onUnignored(this.props.userId));
|
|
|
|
} else this.props.onUnignored(this.props.userId);
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
return (
|
|
|
|
<li>
|
2017-10-26 03:44:05 +03:00
|
|
|
<AccessibleButton onClick={this._onUnignoreClick} className="mx_textButton">
|
2017-09-15 00:33:36 +03:00
|
|
|
{ _t("Unignore") }
|
|
|
|
</AccessibleButton>
|
|
|
|
{ this.props.userId }
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2015-11-30 18:52:41 +03:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'UserSettings',
|
2015-12-18 03:37:56 +03:00
|
|
|
|
2015-12-23 14:47:56 +03:00
|
|
|
propTypes: {
|
2017-12-26 04:03:18 +03:00
|
|
|
onClose: PropTypes.func,
|
2016-06-08 16:54:34 +03:00
|
|
|
// The brand string given when creating email pushers
|
2017-12-26 04:03:18 +03:00
|
|
|
brand: PropTypes.string,
|
2016-08-05 18:13:06 +03:00
|
|
|
|
2017-01-31 18:17:43 +03:00
|
|
|
// The base URL to use in the referral link. Defaults to window.location.origin.
|
2017-12-26 04:03:18 +03:00
|
|
|
referralBaseUrl: PropTypes.string,
|
2017-01-31 18:17:43 +03:00
|
|
|
|
2017-02-16 21:00:52 +03:00
|
|
|
// Team token for the referral link. If falsy, the referral section will
|
|
|
|
// not appear
|
2017-12-26 04:03:18 +03:00
|
|
|
teamToken: PropTypes.string,
|
2015-12-23 14:47:56 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
2016-08-05 18:13:06 +03:00
|
|
|
onClose: function() {},
|
2015-12-23 14:47:56 +03:00
|
|
|
};
|
2015-11-30 18:52:41 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
avatarUrl: null,
|
2017-05-13 17:04:20 +03:00
|
|
|
threepids: [],
|
2015-12-23 19:02:18 +03:00
|
|
|
phase: "UserSettings.LOADING", // LOADING, DISPLAY
|
2016-01-19 19:36:54 +03:00
|
|
|
email_add_pending: false,
|
2017-05-13 17:04:20 +03:00
|
|
|
vectorVersion: undefined,
|
2016-12-14 19:00:50 +03:00
|
|
|
rejectingInvites: false,
|
2017-04-28 20:21:22 +03:00
|
|
|
mediaDevices: null,
|
2017-09-15 00:41:12 +03:00
|
|
|
ignoredUsers: [],
|
2015-11-30 18:52:41 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount: function() {
|
2016-11-08 14:43:24 +03:00
|
|
|
this._unmounted = false;
|
2017-03-16 17:56:26 +03:00
|
|
|
this._addThreepid = null;
|
2016-11-08 14:43:24 +03:00
|
|
|
|
2016-11-08 13:45:19 +03:00
|
|
|
if (PlatformPeg.get()) {
|
2017-07-12 16:02:00 +03:00
|
|
|
Promise.resolve().then(() => {
|
2016-11-11 13:05:53 +03:00
|
|
|
return PlatformPeg.get().getAppVersion();
|
|
|
|
}).done((appVersion) => {
|
2016-11-08 14:43:24 +03:00
|
|
|
if (this._unmounted) return;
|
2016-11-08 13:45:19 +03:00
|
|
|
this.setState({
|
|
|
|
vectorVersion: appVersion,
|
|
|
|
});
|
|
|
|
}, (e) => {
|
|
|
|
console.log("Failed to fetch app version", e);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-05-25 03:01:40 +03:00
|
|
|
this._refreshMediaDevices();
|
2017-09-15 00:33:36 +03:00
|
|
|
this._refreshIgnoredUsers();
|
2017-04-28 20:21:22 +03:00
|
|
|
|
2016-12-14 19:00:50 +03:00
|
|
|
// Bulk rejecting invites:
|
|
|
|
// /sync won't have had time to return when UserSettings re-renders from state changes, so getRooms()
|
|
|
|
// will still return rooms with invites. To get around this, add a listener for
|
|
|
|
// membership updates and kick the UI.
|
|
|
|
MatrixClientPeg.get().on("RoomMember.membership", this._onInviteStateChange);
|
|
|
|
|
2016-04-15 20:30:13 +03:00
|
|
|
dis.dispatch({
|
2017-10-25 13:09:48 +03:00
|
|
|
action: 'panel_disable',
|
|
|
|
sideDisabled: true,
|
|
|
|
middleDisabled: true,
|
2016-04-15 20:30:13 +03:00
|
|
|
});
|
2015-12-23 19:52:59 +03:00
|
|
|
this._refreshFromServer();
|
2017-01-18 17:06:47 +03:00
|
|
|
|
2017-05-24 17:40:50 +03:00
|
|
|
if (PlatformPeg.get().isElectron()) {
|
|
|
|
const {ipcRenderer} = require('electron');
|
|
|
|
|
2017-05-24 17:55:37 +03:00
|
|
|
ipcRenderer.on('settings', this._electronSettings);
|
2017-05-24 17:40:50 +03:00
|
|
|
ipcRenderer.send('settings_get');
|
|
|
|
}
|
2017-05-29 23:56:45 +03:00
|
|
|
|
2017-05-25 21:53:27 +03:00
|
|
|
this.setState({
|
|
|
|
language: languageHandler.getCurrentLanguage(),
|
|
|
|
});
|
2017-06-20 13:22:07 +03:00
|
|
|
|
|
|
|
this._sessionStore = sessionStore;
|
|
|
|
this._sessionStoreToken = this._sessionStore.addListener(
|
|
|
|
this._setStateFromSessionStore,
|
|
|
|
);
|
|
|
|
this._setStateFromSessionStore();
|
2015-11-30 18:52:41 +03:00
|
|
|
},
|
|
|
|
|
2015-12-18 03:37:56 +03:00
|
|
|
componentDidMount: function() {
|
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
2015-12-23 19:02:18 +03:00
|
|
|
this._me = MatrixClientPeg.get().credentials.userId;
|
2015-12-18 03:37:56 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
2016-11-08 14:43:24 +03:00
|
|
|
this._unmounted = true;
|
2016-04-15 20:30:13 +03:00
|
|
|
dis.dispatch({
|
2017-10-25 13:09:48 +03:00
|
|
|
action: 'panel_disable',
|
|
|
|
sideDisabled: false,
|
|
|
|
middleDisabled: false,
|
2016-04-15 20:30:13 +03:00
|
|
|
});
|
2015-12-18 03:37:56 +03:00
|
|
|
dis.unregister(this.dispatcherRef);
|
2017-05-02 23:17:12 +03:00
|
|
|
const cli = MatrixClientPeg.get();
|
2016-12-15 19:13:09 +03:00
|
|
|
if (cli) {
|
|
|
|
cli.removeListener("RoomMember.membership", this._onInviteStateChange);
|
|
|
|
}
|
2017-05-24 17:55:37 +03:00
|
|
|
|
|
|
|
if (PlatformPeg.get().isElectron()) {
|
|
|
|
const {ipcRenderer} = require('electron');
|
|
|
|
ipcRenderer.removeListener('settings', this._electronSettings);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-06-20 19:11:17 +03:00
|
|
|
// `UserSettings` assumes that the client peg will not be null, so give it some
|
|
|
|
// sort of assurance here by only allowing a re-render if the client is truthy.
|
|
|
|
//
|
|
|
|
// This is required because `UserSettings` maintains its own state and if this state
|
|
|
|
// updates (e.g. during _setStateFromSessionStore) after the client peg has been made
|
|
|
|
// null (during logout), then it will attempt to re-render and throw errors.
|
|
|
|
shouldComponentUpdate: function() {
|
|
|
|
return Boolean(MatrixClientPeg.get());
|
|
|
|
},
|
|
|
|
|
2017-06-20 13:22:07 +03:00
|
|
|
_setStateFromSessionStore: function() {
|
|
|
|
this.setState({
|
|
|
|
userHasGeneratedPassword: Boolean(this._sessionStore.getCachedPassword()),
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-05-24 17:55:37 +03:00
|
|
|
_electronSettings: function(ev, settings) {
|
|
|
|
this.setState({ electron_settings: settings });
|
2015-12-18 03:37:56 +03:00
|
|
|
},
|
|
|
|
|
2017-05-25 03:01:40 +03:00
|
|
|
_refreshMediaDevices: function() {
|
2017-07-12 16:02:00 +03:00
|
|
|
Promise.resolve().then(() => {
|
2017-05-25 03:01:40 +03:00
|
|
|
return CallMediaHandler.getDevices();
|
|
|
|
}).then((mediaDevices) => {
|
|
|
|
// console.log("got mediaDevices", mediaDevices, this._unmounted);
|
|
|
|
if (this._unmounted) return;
|
|
|
|
this.setState({
|
|
|
|
mediaDevices,
|
2017-11-04 08:19:45 +03:00
|
|
|
activeAudioInput: SettingsStore.getValueAt(SettingLevel.DEVICE, 'webrtc_audioinput'),
|
|
|
|
activeVideoInput: SettingsStore.getValueAt(SettingLevel.DEVICE, 'webrtc_videoinput'),
|
2017-05-25 03:01:40 +03:00
|
|
|
});
|
|
|
|
});
|
2015-12-18 03:37:56 +03:00
|
|
|
},
|
|
|
|
|
2015-12-23 19:52:59 +03:00
|
|
|
_refreshFromServer: function() {
|
2017-05-02 23:17:12 +03:00
|
|
|
const self = this;
|
2017-07-12 16:04:20 +03:00
|
|
|
Promise.all([
|
2017-05-02 23:17:12 +03:00
|
|
|
UserSettingsStore.loadProfileInfo(), UserSettingsStore.loadThreePids(),
|
2015-12-23 19:52:59 +03:00
|
|
|
]).done(function(resps) {
|
2015-12-23 14:47:56 +03:00
|
|
|
self.setState({
|
2015-12-23 19:52:59 +03:00
|
|
|
avatarUrl: resps[0].avatar_url,
|
|
|
|
threepids: resps[1].threepids,
|
2015-12-23 14:47:56 +03:00
|
|
|
phase: "UserSettings.DISPLAY",
|
2015-12-18 03:37:56 +03:00
|
|
|
});
|
2015-12-23 14:47:56 +03:00
|
|
|
}, function(error) {
|
2017-05-02 23:17:12 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2017-03-13 01:59:41 +03:00
|
|
|
console.error("Failed to load user settings: " + error);
|
2017-08-10 17:17:52 +03:00
|
|
|
Modal.createTrackedDialog('Can\'t load user settings', '', ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Can't load user settings"),
|
|
|
|
description: ((error && error.message) ? error.message : _t("Server may be unavailable or overloaded")),
|
2015-12-23 14:47:56 +03:00
|
|
|
});
|
2015-12-23 19:52:59 +03:00
|
|
|
});
|
|
|
|
},
|
2015-12-18 03:37:56 +03:00
|
|
|
|
2017-09-15 00:33:36 +03:00
|
|
|
_refreshIgnoredUsers: function(userIdUnignored=null) {
|
2017-09-15 00:41:12 +03:00
|
|
|
const users = MatrixClientPeg.get().getIgnoredUsers();
|
2017-09-15 00:33:36 +03:00
|
|
|
if (userIdUnignored) {
|
2017-09-15 00:41:12 +03:00
|
|
|
const index = users.indexOf(userIdUnignored);
|
2017-09-15 00:33:36 +03:00
|
|
|
if (index !== -1) users.splice(index, 1);
|
|
|
|
}
|
|
|
|
this.setState({
|
2017-09-15 00:41:12 +03:00
|
|
|
ignoredUsers: users,
|
2017-09-15 00:33:36 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2015-12-18 03:37:56 +03:00
|
|
|
onAction: function(payload) {
|
|
|
|
if (payload.action === "notifier_enabled") {
|
2015-12-23 20:06:30 +03:00
|
|
|
this.forceUpdate();
|
2017-09-18 00:04:03 +03:00
|
|
|
} else if (payload.action === "ignore_state_changed") {
|
|
|
|
this._refreshIgnoredUsers();
|
2015-12-18 03:37:56 +03:00
|
|
|
}
|
2015-11-30 18:52:41 +03:00
|
|
|
},
|
|
|
|
|
2016-01-15 15:35:30 +03:00
|
|
|
onAvatarPickerClick: function(ev) {
|
|
|
|
if (this.refs.file_label) {
|
|
|
|
this.refs.file_label.click();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-12-23 19:52:59 +03:00
|
|
|
onAvatarSelected: function(ev) {
|
2017-05-02 23:17:12 +03:00
|
|
|
const self = this;
|
|
|
|
const changeAvatar = this.refs.changeAvatar;
|
2015-12-23 19:52:59 +03:00
|
|
|
if (!changeAvatar) {
|
|
|
|
console.error("No ChangeAvatar found to upload image to!");
|
|
|
|
return;
|
|
|
|
}
|
2015-12-23 20:30:25 +03:00
|
|
|
changeAvatar.onFileSelected(ev).done(function() {
|
|
|
|
// dunno if the avatar changed, re-check it.
|
|
|
|
self._refreshFromServer();
|
|
|
|
}, function(err) {
|
2017-05-02 23:17:12 +03:00
|
|
|
// const errMsg = (typeof err === "string") ? err : (err.error || "");
|
2017-03-13 01:59:41 +03:00
|
|
|
console.error("Failed to set avatar: " + err);
|
2017-05-02 23:17:12 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2017-08-10 15:49:11 +03:00
|
|
|
Modal.createTrackedDialog('Failed to set avatar', '', ErrorDialog, {
|
2017-05-27 20:20:35 +03:00
|
|
|
title: _t("Failed to set avatar."),
|
2017-05-23 17:16:31 +03:00
|
|
|
description: ((err && err.message) ? err.message : _t("Operation failed")),
|
2015-12-23 19:52:59 +03:00
|
|
|
});
|
2015-12-23 20:30:25 +03:00
|
|
|
});
|
2015-11-30 18:52:41 +03:00
|
|
|
},
|
|
|
|
|
2017-10-14 06:13:32 +03:00
|
|
|
onAvatarRemoveClick: function() {
|
|
|
|
MatrixClientPeg.get().setAvatarUrl(null);
|
|
|
|
this.setState({avatarUrl: null}); // the avatar update will complete async for us
|
|
|
|
},
|
|
|
|
|
2015-11-30 18:52:41 +03:00
|
|
|
onLogoutClicked: function(ev) {
|
2017-05-02 23:17:12 +03:00
|
|
|
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialog('Logout E2E Export', '', QuestionDialog, {
|
2017-05-25 21:55:54 +03:00
|
|
|
title: _t("Sign out"),
|
2017-01-25 01:18:25 +03:00
|
|
|
description:
|
|
|
|
<div>
|
2017-05-27 20:20:35 +03:00
|
|
|
{ _t("For security, logging out will delete any end-to-end " +
|
|
|
|
"encryption keys from this browser. If you want to be able " +
|
|
|
|
"to decrypt your conversation history from future Riot sessions, " +
|
2018-01-03 14:57:49 +03:00
|
|
|
"please export your room keys for safe-keeping.") }
|
2017-01-25 01:18:25 +03:00
|
|
|
</div>,
|
2017-05-23 17:16:31 +03:00
|
|
|
button: _t("Sign out"),
|
2017-03-16 17:18:18 +03:00
|
|
|
extraButtons: [
|
2017-04-22 18:26:28 +03:00
|
|
|
<button key="export" className="mx_Dialog_primary"
|
2017-03-16 17:18:18 +03:00
|
|
|
onClick={this._onExportE2eKeysClicked}>
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t("Export E2E room keys") }
|
2017-05-02 23:17:12 +03:00
|
|
|
</button>,
|
2017-03-16 17:18:18 +03:00
|
|
|
],
|
2017-01-25 01:18:25 +03:00
|
|
|
onFinished: (confirmed) => {
|
|
|
|
if (confirmed) {
|
|
|
|
dis.dispatch({action: 'logout'});
|
|
|
|
if (this.props.onFinished) {
|
|
|
|
this.props.onFinished();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
2015-11-30 18:52:41 +03:00
|
|
|
},
|
|
|
|
|
2015-12-23 18:38:28 +03:00
|
|
|
onPasswordChangeError: function(err) {
|
2017-05-02 23:17:12 +03:00
|
|
|
let errMsg = err.error || "";
|
2015-12-23 18:38:28 +03:00
|
|
|
if (err.httpStatus === 403) {
|
2017-05-23 17:16:31 +03:00
|
|
|
errMsg = _t("Failed to change password. Is your password correct?");
|
2017-05-02 23:17:12 +03:00
|
|
|
} else if (err.httpStatus) {
|
2015-12-23 18:38:28 +03:00
|
|
|
errMsg += ` (HTTP status ${err.httpStatus})`;
|
|
|
|
}
|
2017-05-02 23:17:12 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2017-03-13 01:59:41 +03:00
|
|
|
console.error("Failed to change password: " + errMsg);
|
2017-08-10 15:49:11 +03:00
|
|
|
Modal.createTrackedDialog('Failed to change password', '', ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Error"),
|
2017-05-02 23:17:12 +03:00
|
|
|
description: errMsg,
|
2015-12-23 18:38:28 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
onPasswordChanged: function() {
|
2017-05-02 23:17:12 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialog('Password changed', '', ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Success"),
|
2017-06-08 20:35:45 +03:00
|
|
|
description: _t(
|
|
|
|
"Your password was successfully changed. You will not receive " +
|
|
|
|
"push notifications on other devices until you log back in to them",
|
|
|
|
) + ".",
|
2016-01-07 20:23:32 +03:00
|
|
|
});
|
2017-05-11 19:47:45 +03:00
|
|
|
dis.dispatch({action: 'password_changed'});
|
2016-01-07 20:23:32 +03:00
|
|
|
},
|
|
|
|
|
2017-03-16 17:56:26 +03:00
|
|
|
_onAddEmailEditFinished: function(value, shouldSubmit) {
|
2016-01-19 19:36:54 +03:00
|
|
|
if (!shouldSubmit) return;
|
2017-03-16 17:56:26 +03:00
|
|
|
this._addEmail();
|
|
|
|
},
|
|
|
|
|
|
|
|
_addEmail: function() {
|
2017-05-02 23:17:12 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
2016-01-19 19:36:54 +03:00
|
|
|
|
2017-05-02 23:17:12 +03:00
|
|
|
const emailAddress = this.refs.add_email_input.value;
|
|
|
|
if (!Email.looksValid(emailAddress)) {
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialog('Invalid email address', '', ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Invalid Email Address"),
|
|
|
|
description: _t("This doesn't appear to be a valid email address"),
|
2016-01-19 19:36:54 +03:00
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
2017-03-16 17:56:26 +03:00
|
|
|
this._addThreepid = new AddThreepid();
|
2016-01-19 19:36:54 +03:00
|
|
|
// we always bind emails when registering, so let's do the
|
|
|
|
// same here.
|
2017-05-02 23:17:12 +03:00
|
|
|
this._addThreepid.addEmailAddress(emailAddress, true).done(() => {
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialog('Verification Pending', '', QuestionDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Verification Pending"),
|
2017-06-08 20:35:45 +03:00
|
|
|
description: _t(
|
|
|
|
"Please check your email and click on the link it contains. Once this " +
|
|
|
|
"is done, click continue.",
|
|
|
|
),
|
2017-05-23 17:16:31 +03:00
|
|
|
button: _t('Continue'),
|
2016-01-19 19:36:54 +03:00
|
|
|
onFinished: this.onEmailDialogFinished,
|
|
|
|
});
|
|
|
|
}, (err) => {
|
2016-07-08 19:28:04 +03:00
|
|
|
this.setState({email_add_pending: false});
|
2017-05-02 23:17:12 +03:00
|
|
|
console.error("Unable to add email address " + emailAddress + " " + err);
|
2017-08-10 15:49:11 +03:00
|
|
|
Modal.createTrackedDialog('Unable to add email address', '', ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Unable to add email address"),
|
|
|
|
description: ((err && err.message) ? err.message : _t("Operation failed")),
|
2016-01-19 19:36:54 +03:00
|
|
|
});
|
|
|
|
});
|
2017-03-16 17:56:26 +03:00
|
|
|
ReactDOM.findDOMNode(this.refs.add_email_input).blur();
|
2016-01-19 19:36:54 +03:00
|
|
|
this.setState({email_add_pending: true});
|
|
|
|
},
|
|
|
|
|
2016-12-21 21:49:38 +03:00
|
|
|
onRemoveThreepidClicked: function(threepid) {
|
|
|
|
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialog('Remove 3pid', '', QuestionDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Remove Contact Information?"),
|
2017-06-08 20:35:45 +03:00
|
|
|
description: _t("Remove %(threePid)s?", { threePid: threepid.address }),
|
2017-05-23 17:16:31 +03:00
|
|
|
button: _t('Remove'),
|
2016-12-21 21:49:38 +03:00
|
|
|
onFinished: (submit) => {
|
|
|
|
if (submit) {
|
|
|
|
this.setState({
|
|
|
|
phase: "UserSettings.LOADING",
|
|
|
|
});
|
|
|
|
MatrixClientPeg.get().deleteThreePid(threepid.medium, threepid.address).then(() => {
|
|
|
|
return this._refreshFromServer();
|
2016-12-22 18:26:08 +03:00
|
|
|
}).catch((err) => {
|
2016-12-21 21:49:38 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2017-03-13 01:59:41 +03:00
|
|
|
console.error("Unable to remove contact information: " + err);
|
2017-08-10 15:49:11 +03:00
|
|
|
Modal.createTrackedDialog('Remove 3pid failed', '', ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Unable to remove contact information"),
|
|
|
|
description: ((err && err.message) ? err.message : _t("Operation failed")),
|
2016-12-21 21:49:38 +03:00
|
|
|
});
|
|
|
|
}).done();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-01-19 19:36:54 +03:00
|
|
|
onEmailDialogFinished: function(ok) {
|
|
|
|
if (ok) {
|
|
|
|
this.verifyEmailAddress();
|
|
|
|
} else {
|
|
|
|
this.setState({email_add_pending: false});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
verifyEmailAddress: function() {
|
2017-03-16 17:56:26 +03:00
|
|
|
this._addThreepid.checkEmailLinkClicked().done(() => {
|
|
|
|
this._addThreepid = null;
|
2016-01-19 19:36:54 +03:00
|
|
|
this.setState({
|
|
|
|
phase: "UserSettings.LOADING",
|
|
|
|
});
|
|
|
|
this._refreshFromServer();
|
|
|
|
this.setState({email_add_pending: false});
|
|
|
|
}, (err) => {
|
2016-03-24 18:03:44 +03:00
|
|
|
this.setState({email_add_pending: false});
|
2017-05-23 17:16:31 +03:00
|
|
|
if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
|
2017-05-02 23:17:12 +03:00
|
|
|
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
2017-06-08 20:35:45 +03:00
|
|
|
const message = _t("Unable to verify email address.") + " " +
|
|
|
|
_t("Please check your email and click on the link it contains. Once this is done, click continue.");
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialog('Verification Pending', '', QuestionDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Verification Pending"),
|
2016-01-19 19:36:54 +03:00
|
|
|
description: message,
|
2017-05-23 17:16:31 +03:00
|
|
|
button: _t('Continue'),
|
2016-01-19 19:36:54 +03:00
|
|
|
onFinished: this.onEmailDialogFinished,
|
|
|
|
});
|
|
|
|
} else {
|
2017-05-02 23:17:12 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2017-03-13 01:59:41 +03:00
|
|
|
console.error("Unable to verify email address: " + err);
|
2017-08-10 15:49:11 +03:00
|
|
|
Modal.createTrackedDialog('Unable to verify email address', '', ErrorDialog, {
|
2017-05-27 20:20:35 +03:00
|
|
|
title: _t("Unable to verify email address."),
|
2017-05-23 17:16:31 +03:00
|
|
|
description: ((err && err.message) ? err.message : _t("Operation failed")),
|
2016-01-19 19:36:54 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-08-02 20:40:12 +03:00
|
|
|
_onDeactivateAccountClicked: function() {
|
|
|
|
const DeactivateAccountDialog = sdk.getComponent("dialogs.DeactivateAccountDialog");
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialog('Deactivate Account', '', DeactivateAccountDialog, {});
|
2016-08-02 20:40:12 +03:00
|
|
|
},
|
|
|
|
|
2017-01-24 17:47:11 +03:00
|
|
|
_onBugReportClicked: function() {
|
|
|
|
const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
|
2017-01-25 19:33:00 +03:00
|
|
|
if (!BugReportDialog) {
|
|
|
|
return;
|
|
|
|
}
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
|
2017-01-24 17:47:11 +03:00
|
|
|
},
|
|
|
|
|
2017-02-17 18:16:28 +03:00
|
|
|
_onClearCacheClicked: function() {
|
2017-04-10 19:39:27 +03:00
|
|
|
if (!PlatformPeg.get()) return;
|
|
|
|
|
2017-04-11 20:16:29 +03:00
|
|
|
MatrixClientPeg.get().stopClient();
|
2017-02-17 18:37:49 +03:00
|
|
|
MatrixClientPeg.get().store.deleteAllData().done(() => {
|
2017-04-10 19:39:27 +03:00
|
|
|
PlatformPeg.get().reload();
|
2017-02-17 18:16:28 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-12-14 19:00:50 +03:00
|
|
|
_onInviteStateChange: function(event, member, oldMembership) {
|
|
|
|
if (member.userId === this._me && oldMembership === "invite") {
|
|
|
|
this.forceUpdate();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_onRejectAllInvitesClicked: function(rooms, ev) {
|
|
|
|
this.setState({
|
2017-05-02 23:17:12 +03:00
|
|
|
rejectingInvites: true,
|
2016-12-14 19:00:50 +03:00
|
|
|
});
|
|
|
|
// reject the invites
|
2017-05-02 23:17:12 +03:00
|
|
|
const promises = rooms.map((room) => {
|
2017-07-12 17:15:59 +03:00
|
|
|
return MatrixClientPeg.get().leave(room.roomId).catch((e) => {
|
|
|
|
// purposefully drop errors to the floor: we'll just have a non-zero number on the UI
|
|
|
|
// after trying to reject all the invites.
|
|
|
|
});
|
2016-12-14 19:00:50 +03:00
|
|
|
});
|
2017-07-12 17:15:59 +03:00
|
|
|
Promise.all(promises).then(() => {
|
2016-12-14 19:00:50 +03:00
|
|
|
this.setState({
|
2017-05-02 23:17:12 +03:00
|
|
|
rejectingInvites: false,
|
2016-12-14 19:00:50 +03:00
|
|
|
});
|
2017-07-12 17:15:59 +03:00
|
|
|
});
|
2016-12-14 18:01:50 +03:00
|
|
|
},
|
|
|
|
|
2017-01-20 18:12:50 +03:00
|
|
|
_onExportE2eKeysClicked: function() {
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialogAsync('Export E2E Keys', '', (cb) => {
|
|
|
|
require.ensure(['../../async-components/views/dialogs/ExportE2eKeysDialog'], () => {
|
|
|
|
cb(require('../../async-components/views/dialogs/ExportE2eKeysDialog'));
|
|
|
|
}, "e2e-export");
|
|
|
|
}, {
|
|
|
|
matrixClient: MatrixClientPeg.get(),
|
|
|
|
});
|
2017-01-24 18:57:42 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
_onImportE2eKeysClicked: function() {
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialogAsync('Import E2E Keys', '', (cb) => {
|
|
|
|
require.ensure(['../../async-components/views/dialogs/ImportE2eKeysDialog'], () => {
|
|
|
|
cb(require('../../async-components/views/dialogs/ImportE2eKeysDialog'));
|
|
|
|
}, "e2e-export");
|
|
|
|
}, {
|
|
|
|
matrixClient: MatrixClientPeg.get(),
|
|
|
|
});
|
2017-01-20 18:12:50 +03:00
|
|
|
},
|
|
|
|
|
2017-11-21 14:50:41 +03:00
|
|
|
_renderGroupSettings: function() {
|
|
|
|
const GroupUserSettings = sdk.getComponent('groups.GroupUserSettings');
|
|
|
|
return <GroupUserSettings />;
|
|
|
|
},
|
|
|
|
|
2017-01-31 16:17:01 +03:00
|
|
|
_renderReferral: function() {
|
2017-02-16 21:00:52 +03:00
|
|
|
const teamToken = this.props.teamToken;
|
2017-01-31 16:17:01 +03:00
|
|
|
if (!teamToken) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
if (typeof teamToken !== 'string') {
|
|
|
|
console.warn('Team token not a string');
|
|
|
|
return null;
|
|
|
|
}
|
2017-01-31 18:17:43 +03:00
|
|
|
const href = (this.props.referralBaseUrl || window.location.origin) +
|
2017-01-31 16:17:01 +03:00
|
|
|
`/#/register?referrer=${this._me}&team_token=${teamToken}`;
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<h3>Referral</h3>
|
|
|
|
<div className="mx_UserSettings_section">
|
2017-09-28 13:21:06 +03:00
|
|
|
{ _t("Refer a friend to Riot:") } <a href={href}>{ href }</a>
|
2017-01-31 16:17:01 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2017-05-27 22:21:23 +03:00
|
|
|
onLanguageChange: function(newLang) {
|
2017-11-16 16:19:36 +03:00
|
|
|
if (this.state.language !== newLang) {
|
2017-11-16 07:16:12 +03:00
|
|
|
SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
|
2017-05-27 22:11:00 +03:00
|
|
|
this.setState({
|
2017-05-27 22:21:23 +03:00
|
|
|
language: newLang,
|
2017-05-27 22:11:00 +03:00
|
|
|
});
|
|
|
|
PlatformPeg.get().reload();
|
|
|
|
}
|
2017-05-23 17:16:31 +03:00
|
|
|
},
|
|
|
|
|
2017-06-08 20:35:45 +03:00
|
|
|
_renderLanguageSetting: function() {
|
2017-05-24 16:28:30 +03:00
|
|
|
const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
|
2017-05-24 16:36:14 +03:00
|
|
|
return <div>
|
2017-09-28 13:21:06 +03:00
|
|
|
<label htmlFor="languageSelector">{ _t('Interface Language') }</label>
|
2017-05-24 16:36:14 +03:00
|
|
|
<LanguageDropdown ref="language" onOptionChange={this.onLanguageChange}
|
|
|
|
className="mx_UserSettings_language"
|
2017-05-25 21:53:27 +03:00
|
|
|
value={this.state.language}
|
2017-05-24 16:36:14 +03:00
|
|
|
/>
|
|
|
|
</div>;
|
2017-05-23 17:16:31 +03:00
|
|
|
},
|
|
|
|
|
2016-07-18 03:35:42 +03:00
|
|
|
_renderUserInterfaceSettings: function() {
|
2017-06-23 19:35:07 +03:00
|
|
|
// TODO: this ought to be a separate component so that we don't need
|
|
|
|
// to rebind the onChange each time we render
|
|
|
|
const onChange = (e) =>
|
2017-11-04 08:19:45 +03:00
|
|
|
SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
|
2016-07-18 03:35:42 +03:00
|
|
|
return (
|
|
|
|
<div>
|
2017-05-23 17:16:31 +03:00
|
|
|
<h3>{ _t("User Interface") }</h3>
|
2016-07-18 03:35:42 +03:00
|
|
|
<div className="mx_UserSettings_section">
|
2017-10-31 06:09:24 +03:00
|
|
|
{ SIMPLE_SETTINGS.map( this._renderAccountSetting ) }
|
|
|
|
{ THEMES.map( this._renderThemeOption ) }
|
2017-02-20 16:56:40 +03:00
|
|
|
<table>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
2017-09-28 13:21:06 +03:00
|
|
|
<td><strong>{ _t('Autocomplete Delay (ms):') }</strong></td>
|
2017-06-23 17:30:06 +03:00
|
|
|
<td>
|
|
|
|
<input
|
|
|
|
type="number"
|
2017-11-04 08:19:45 +03:00
|
|
|
defaultValue={SettingsStore.getValueAt(SettingLevel.DEVICE, "autocompleteDelay")}
|
2017-06-23 19:35:07 +03:00
|
|
|
onChange={onChange}
|
2017-06-23 17:30:06 +03:00
|
|
|
/>
|
|
|
|
</td>
|
2017-02-20 16:56:40 +03:00
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
2017-05-23 17:16:31 +03:00
|
|
|
{ this._renderLanguageSetting() }
|
2016-07-18 03:35:42 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2017-10-31 06:09:24 +03:00
|
|
|
_renderAccountSetting: function(setting) {
|
2017-10-31 05:08:27 +03:00
|
|
|
const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
|
2017-10-30 04:46:48 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_UserSettings_toggle" key={setting.id}>
|
2017-10-31 05:08:27 +03:00
|
|
|
<SettingsFlag name={setting.id}
|
2017-10-30 04:46:48 +03:00
|
|
|
label={setting.label}
|
2017-11-04 08:19:45 +03:00
|
|
|
level={SettingLevel.ACCOUNT}
|
2017-10-30 04:46:48 +03:00
|
|
|
onChange={setting.fn} />
|
|
|
|
</div>
|
|
|
|
);
|
2017-01-18 17:06:47 +03:00
|
|
|
},
|
|
|
|
|
2017-10-31 06:09:24 +03:00
|
|
|
_renderThemeOption: function(setting) {
|
2017-10-31 05:08:27 +03:00
|
|
|
const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
|
2017-10-30 04:46:48 +03:00
|
|
|
const onChange = (v) => dis.dispatch({action: 'set_theme', value: setting.value});
|
|
|
|
return (
|
|
|
|
<div className="mx_UserSettings_toggle" key={setting.id + '_' + setting.value}>
|
2017-10-31 05:08:27 +03:00
|
|
|
<SettingsFlag name="theme"
|
2017-10-30 04:46:48 +03:00
|
|
|
label={setting.label}
|
2017-11-04 08:19:45 +03:00
|
|
|
level={SettingLevel.ACCOUNT}
|
2017-10-30 04:46:48 +03:00
|
|
|
onChange={onChange}
|
|
|
|
group="theme"
|
|
|
|
value={setting.value} />
|
|
|
|
</div>
|
|
|
|
);
|
2017-01-18 17:06:47 +03:00
|
|
|
},
|
|
|
|
|
2016-08-01 15:42:29 +03:00
|
|
|
_renderCryptoInfo: function() {
|
2016-12-05 21:33:38 +03:00
|
|
|
const client = MatrixClientPeg.get();
|
2016-12-05 23:03:43 +03:00
|
|
|
const deviceId = client.deviceId;
|
2017-05-22 14:01:09 +03:00
|
|
|
let identityKey = client.getDeviceEd25519Key();
|
|
|
|
if (!identityKey) {
|
2017-05-23 17:16:31 +03:00
|
|
|
identityKey = _t("<not supported>");
|
2017-05-22 14:01:09 +03:00
|
|
|
} else {
|
|
|
|
identityKey = FormattingUtils.formatCryptoKey(identityKey);
|
|
|
|
}
|
2016-09-15 03:55:51 +03:00
|
|
|
|
2017-02-09 05:00:58 +03:00
|
|
|
let importExportButtons = null;
|
2017-01-20 18:12:50 +03:00
|
|
|
|
|
|
|
if (client.isCryptoEnabled) {
|
2017-02-09 05:00:58 +03:00
|
|
|
importExportButtons = (
|
|
|
|
<div className="mx_UserSettings_importExportButtons">
|
|
|
|
<AccessibleButton className="mx_UserSettings_button"
|
|
|
|
onClick={this._onExportE2eKeysClicked}>
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t("Export E2E room keys") }
|
2017-02-09 05:00:58 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
<AccessibleButton className="mx_UserSettings_button"
|
|
|
|
onClick={this._onImportE2eKeysClicked}>
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t("Import E2E room keys") }
|
2017-02-09 05:00:58 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
</div>
|
2017-01-24 18:57:42 +03:00
|
|
|
);
|
2017-01-20 18:12:50 +03:00
|
|
|
}
|
2016-06-08 15:09:07 +03:00
|
|
|
return (
|
|
|
|
<div>
|
2017-05-23 17:16:31 +03:00
|
|
|
<h3>{ _t("Cryptography") }</h3>
|
2016-09-15 03:55:51 +03:00
|
|
|
<div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
|
2016-06-08 15:09:07 +03:00
|
|
|
<ul>
|
2017-09-28 13:21:06 +03:00
|
|
|
<li><label>{ _t("Device ID:") }</label>
|
|
|
|
<span><code>{ deviceId }</code></span></li>
|
|
|
|
<li><label>{ _t("Device key:") }</label>
|
|
|
|
<span><code><b>{ identityKey }</b></code></span></li>
|
2016-06-08 15:09:07 +03:00
|
|
|
</ul>
|
2017-02-09 05:00:58 +03:00
|
|
|
{ importExportButtons }
|
2016-06-08 15:09:07 +03:00
|
|
|
</div>
|
2017-01-22 00:27:55 +03:00
|
|
|
<div className="mx_UserSettings_section">
|
2017-10-31 06:09:24 +03:00
|
|
|
{ CRYPTO_SETTINGS.map( this._renderDeviceSetting ) }
|
2017-01-22 00:27:55 +03:00
|
|
|
</div>
|
2016-06-08 15:09:07 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2017-09-14 21:51:53 +03:00
|
|
|
_renderIgnoredUsers: function() {
|
2017-09-15 00:33:36 +03:00
|
|
|
if (this.state.ignoredUsers.length > 0) {
|
2017-09-15 00:41:12 +03:00
|
|
|
const updateHandler = this._refreshIgnoredUsers;
|
2017-09-14 21:51:53 +03:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<h3>{ _t("Ignored Users") }</h3>
|
|
|
|
<div className="mx_UserSettings_section mx_UserSettings_ignoredUsersSection">
|
|
|
|
<ul>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ this.state.ignoredUsers.map(function(userId) {
|
2017-09-15 00:41:12 +03:00
|
|
|
return (<IgnoredUser key={userId}
|
|
|
|
userId={userId}
|
|
|
|
onUnignored={updateHandler}></IgnoredUser>);
|
2017-09-28 13:21:06 +03:00
|
|
|
}) }
|
2017-09-14 21:51:53 +03:00
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else return (<div />);
|
|
|
|
},
|
|
|
|
|
2017-10-31 06:09:24 +03:00
|
|
|
_renderDeviceSetting: function(setting) {
|
2017-10-31 05:08:27 +03:00
|
|
|
const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
|
2017-10-30 04:46:48 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_UserSettings_toggle" key={setting.id}>
|
2017-10-31 05:08:27 +03:00
|
|
|
<SettingsFlag name={setting.id}
|
2017-11-05 05:52:42 +03:00
|
|
|
label={setting.label}
|
|
|
|
level={SettingLevel.DEVICE}
|
|
|
|
onChange={setting.fn} />
|
2017-10-30 04:46:48 +03:00
|
|
|
</div>
|
|
|
|
);
|
2017-01-21 20:39:31 +03:00
|
|
|
},
|
|
|
|
|
2016-08-01 15:42:29 +03:00
|
|
|
_renderDevicesPanel: function() {
|
2017-05-02 23:17:12 +03:00
|
|
|
const DevicesPanel = sdk.getComponent('settings.DevicesPanel');
|
2016-08-01 15:42:29 +03:00
|
|
|
return (
|
|
|
|
<div>
|
2017-09-28 13:21:06 +03:00
|
|
|
<h3>{ _t("Devices") }</h3>
|
|
|
|
<DevicesPanel className="mx_UserSettings_section" />
|
2016-08-01 15:42:29 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2017-01-24 17:47:11 +03:00
|
|
|
_renderBugReport: function() {
|
2017-01-25 17:43:47 +03:00
|
|
|
if (!SdkConfig.get().bug_report_endpoint_url) {
|
2017-05-02 23:17:12 +03:00
|
|
|
return <div />;
|
2017-01-25 17:43:47 +03:00
|
|
|
}
|
2017-01-24 17:47:11 +03:00
|
|
|
return (
|
|
|
|
<div>
|
2018-02-08 21:18:57 +03:00
|
|
|
<h3>{ _t("Debug Logs Submission") }</h3>
|
2017-01-24 17:47:11 +03:00
|
|
|
<div className="mx_UserSettings_section">
|
2018-03-19 17:54:50 +03:00
|
|
|
<p>{
|
|
|
|
_t( "If you've submitted a bug via GitHub, debug logs can help " +
|
|
|
|
"us track down the problem. Debug logs contain application " +
|
|
|
|
"usage data including your username, the IDs or aliases of " +
|
|
|
|
"the rooms or groups you have visited and the usernames of " +
|
2018-04-24 19:53:23 +03:00
|
|
|
"other users. They do not contain messages.",
|
2018-03-19 17:54:50 +03:00
|
|
|
)
|
|
|
|
}</p>
|
2018-04-27 17:19:08 +03:00
|
|
|
<button className="mx_UserSettings_button"
|
2018-02-08 21:18:57 +03:00
|
|
|
onClick={this._onBugReportClicked}>{ _t('Submit debug logs') }
|
2017-01-24 17:47:11 +03:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2017-05-29 16:36:50 +03:00
|
|
|
_renderAnalyticsControl: function() {
|
2017-09-28 13:21:06 +03:00
|
|
|
if (!SdkConfig.get().piwik) return <div />;
|
2017-06-02 15:34:01 +03:00
|
|
|
|
2017-05-29 16:36:50 +03:00
|
|
|
return <div>
|
|
|
|
<h3>{ _t('Analytics') }</h3>
|
|
|
|
<div className="mx_UserSettings_section">
|
2017-09-28 13:21:06 +03:00
|
|
|
{ _t('Riot collects anonymous analytics to allow us to improve the application.') }
|
2017-11-19 18:33:07 +03:00
|
|
|
<br />
|
|
|
|
{ _t('Privacy is important to us, so we don\'t collect any personal'
|
|
|
|
+ ' or identifiable data for our analytics.') }
|
|
|
|
<div className="mx_UserSettings_advanced_spoiler" onClick={Analytics.showDetailsModal}>
|
|
|
|
{ _t('Learn more about how we use analytics.') }
|
|
|
|
</div>
|
2017-10-31 06:09:24 +03:00
|
|
|
{ ANALYTICS_SETTINGS.map( this._renderDeviceSetting ) }
|
2017-05-29 16:36:50 +03:00
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
2017-01-20 17:22:27 +03:00
|
|
|
_renderLabs: function() {
|
2017-08-14 14:26:31 +03:00
|
|
|
const features = [];
|
2017-10-29 05:21:34 +03:00
|
|
|
SettingsStore.getLabsFeatures().forEach((featureId) => {
|
2017-06-08 20:35:45 +03:00
|
|
|
// TODO: this ought to be a separate component so that we don't need
|
|
|
|
// to rebind the onChange each time we render
|
|
|
|
const onChange = (e) => {
|
2017-10-29 05:21:34 +03:00
|
|
|
SettingsStore.setFeatureEnabled(featureId, e.target.checked);
|
2017-06-08 20:35:45 +03:00
|
|
|
this.forceUpdate();
|
|
|
|
};
|
|
|
|
|
2017-08-14 14:26:31 +03:00
|
|
|
features.push(
|
2017-10-12 19:03:38 +03:00
|
|
|
<div key={featureId} className="mx_UserSettings_toggle">
|
2017-06-08 20:35:45 +03:00
|
|
|
<input
|
|
|
|
type="checkbox"
|
2017-10-12 19:03:38 +03:00
|
|
|
id={featureId}
|
|
|
|
name={featureId}
|
2017-10-29 05:21:34 +03:00
|
|
|
defaultChecked={SettingsStore.isFeatureEnabled(featureId)}
|
2017-09-28 13:21:06 +03:00
|
|
|
onChange={onChange}
|
2017-06-08 20:35:45 +03:00
|
|
|
/>
|
2017-10-29 05:21:34 +03:00
|
|
|
<label htmlFor={featureId}>{ SettingsStore.getDisplayName(featureId) }</label>
|
2017-08-14 15:59:12 +03:00
|
|
|
</div>);
|
2017-06-08 20:35:45 +03:00
|
|
|
});
|
2017-08-14 14:26:31 +03:00
|
|
|
|
|
|
|
// No labs section when there are no features in labs
|
|
|
|
if (features.length === 0) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2016-08-01 15:42:29 +03:00
|
|
|
return (
|
|
|
|
<div>
|
2017-05-23 17:16:31 +03:00
|
|
|
<h3>{ _t("Labs") }</h3>
|
2016-08-01 15:42:29 +03:00
|
|
|
<div className="mx_UserSettings_section">
|
2017-05-23 17:16:31 +03:00
|
|
|
<p>{ _t("These are experimental features that may break in unexpected ways") }. { _t("Use with caution") }.</p>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ features }
|
2016-08-01 15:42:29 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
2017-01-20 17:22:27 +03:00
|
|
|
);
|
2016-08-01 15:42:29 +03:00
|
|
|
},
|
|
|
|
|
2016-08-02 20:40:12 +03:00
|
|
|
_renderDeactivateAccount: function() {
|
|
|
|
return <div>
|
2017-05-23 17:16:31 +03:00
|
|
|
<h3>{ _t("Deactivate Account") }</h3>
|
2016-08-02 20:40:12 +03:00
|
|
|
<div className="mx_UserSettings_section">
|
2017-01-13 19:25:26 +03:00
|
|
|
<AccessibleButton className="mx_UserSettings_button danger"
|
2017-05-23 17:16:31 +03:00
|
|
|
onClick={this._onDeactivateAccountClicked}> { _t("Deactivate my account") }
|
2017-01-13 19:25:26 +03:00
|
|
|
</AccessibleButton>
|
2016-08-02 20:40:12 +03:00
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
2017-02-17 18:16:28 +03:00
|
|
|
_renderClearCache: function() {
|
|
|
|
return <div>
|
2017-05-23 17:16:31 +03:00
|
|
|
<h3>{ _t("Clear Cache") }</h3>
|
2017-02-17 18:16:28 +03:00
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<AccessibleButton className="mx_UserSettings_button danger"
|
|
|
|
onClick={this._onClearCacheClicked}>
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t("Clear Cache and Reload") }
|
2017-02-17 18:16:28 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
2017-06-03 17:10:05 +03:00
|
|
|
_renderCheckUpdate: function() {
|
|
|
|
const platform = PlatformPeg.get();
|
2017-06-11 21:12:40 +03:00
|
|
|
if ('canSelfUpdate' in platform && platform.canSelfUpdate() && 'startUpdateCheck' in platform) {
|
2017-06-03 17:10:05 +03:00
|
|
|
return <div>
|
2017-09-28 13:21:06 +03:00
|
|
|
<h3>{ _t('Updates') }</h3>
|
2017-06-03 17:10:05 +03:00
|
|
|
<div className="mx_UserSettings_section">
|
2017-06-11 21:12:40 +03:00
|
|
|
<AccessibleButton className="mx_UserSettings_button" onClick={platform.startUpdateCheck}>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ _t('Check for update') }
|
2017-06-03 17:10:05 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
}
|
2017-06-12 01:42:22 +03:00
|
|
|
return <div />;
|
2017-06-03 17:10:05 +03:00
|
|
|
},
|
|
|
|
|
2016-12-14 18:01:50 +03:00
|
|
|
_renderBulkOptions: function() {
|
2017-05-02 23:17:12 +03:00
|
|
|
const invitedRooms = MatrixClientPeg.get().getRooms().filter((r) => {
|
2016-12-14 18:01:50 +03:00
|
|
|
return r.hasMembershipState(this._me, "invite");
|
|
|
|
});
|
|
|
|
if (invitedRooms.length === 0) {
|
|
|
|
return null;
|
|
|
|
}
|
2016-12-14 19:00:50 +03:00
|
|
|
|
2017-05-02 23:17:12 +03:00
|
|
|
const Spinner = sdk.getComponent("elements.Spinner");
|
2016-12-14 19:00:50 +03:00
|
|
|
|
|
|
|
let reject = <Spinner />;
|
|
|
|
if (!this.state.rejectingInvites) {
|
2016-12-14 19:04:20 +03:00
|
|
|
// bind() the invited rooms so any new invites that may come in as this button is clicked
|
|
|
|
// don't inadvertently get rejected as well.
|
2017-06-08 20:35:45 +03:00
|
|
|
const onClick = this._onRejectAllInvitesClicked.bind(this, invitedRooms);
|
2016-12-14 19:00:50 +03:00
|
|
|
reject = (
|
2017-01-13 19:25:26 +03:00
|
|
|
<AccessibleButton className="mx_UserSettings_button danger"
|
2017-06-08 20:35:45 +03:00
|
|
|
onClick={onClick}>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ _t("Reject all %(invitedRooms)s invites", {invitedRooms: invitedRooms.length}) }
|
2017-01-13 19:25:26 +03:00
|
|
|
</AccessibleButton>
|
2016-12-14 19:00:50 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-12-14 18:01:50 +03:00
|
|
|
return <div>
|
2017-05-23 17:16:31 +03:00
|
|
|
<h3>{ _t("Bulk Options") }</h3>
|
2016-12-14 18:01:50 +03:00
|
|
|
<div className="mx_UserSettings_section">
|
2017-09-28 13:21:06 +03:00
|
|
|
{ reject }
|
2016-12-14 18:01:50 +03:00
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
2017-05-24 17:40:50 +03:00
|
|
|
_renderElectronSettings: function() {
|
|
|
|
const settings = this.state.electron_settings;
|
|
|
|
if (!settings) return;
|
|
|
|
|
2017-10-31 06:09:24 +03:00
|
|
|
// TODO: This should probably be a granular setting, but it only applies to electron
|
|
|
|
// and ends up being get/set outside of matrix anyways (local system setting).
|
2017-05-24 17:40:50 +03:00
|
|
|
return <div>
|
2017-05-31 01:46:51 +03:00
|
|
|
<h3>{ _t('Desktop specific') }</h3>
|
2017-05-24 17:40:50 +03:00
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<div className="mx_UserSettings_toggle">
|
|
|
|
<input type="checkbox"
|
|
|
|
name="auto-launch"
|
|
|
|
defaultChecked={settings['auto-launch']}
|
2017-06-08 20:35:45 +03:00
|
|
|
onChange={this._onAutoLaunchChanged}
|
2017-05-24 17:40:50 +03:00
|
|
|
/>
|
2017-09-28 13:21:06 +03:00
|
|
|
<label htmlFor="auto-launch">{ _t('Start automatically after system login') }</label>
|
2017-05-24 17:40:50 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
2017-06-08 20:35:45 +03:00
|
|
|
_onAutoLaunchChanged: function(e) {
|
|
|
|
const {ipcRenderer} = require('electron');
|
|
|
|
ipcRenderer.send('settings_set', 'auto-launch', e.target.checked);
|
|
|
|
},
|
|
|
|
|
2017-04-28 20:21:22 +03:00
|
|
|
_mapWebRtcDevicesToSpans: function(devices) {
|
2017-09-28 13:21:06 +03:00
|
|
|
return devices.map((device) => <span key={device.deviceId}>{ device.label }</span>);
|
2017-04-28 20:21:22 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
_setAudioInput: function(deviceId) {
|
|
|
|
this.setState({activeAudioInput: deviceId});
|
|
|
|
CallMediaHandler.setAudioInput(deviceId);
|
|
|
|
},
|
|
|
|
|
|
|
|
_setVideoInput: function(deviceId) {
|
|
|
|
this.setState({activeVideoInput: deviceId});
|
|
|
|
CallMediaHandler.setVideoInput(deviceId);
|
|
|
|
},
|
|
|
|
|
2017-05-25 03:25:17 +03:00
|
|
|
_requestMediaPermissions: function(event) {
|
2017-05-25 03:01:40 +03:00
|
|
|
const getUserMedia = (
|
|
|
|
window.navigator.getUserMedia || window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia
|
|
|
|
);
|
|
|
|
if (getUserMedia) {
|
|
|
|
return getUserMedia.apply(window.navigator, [
|
|
|
|
{ video: true, audio: true },
|
|
|
|
this._refreshMediaDevices,
|
2017-05-25 03:25:17 +03:00
|
|
|
function() {
|
|
|
|
const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialog('No media permissions', '', ErrorDialog, {
|
2017-06-02 00:58:17 +03:00
|
|
|
title: _t('No media permissions'),
|
|
|
|
description: _t('You may need to manually permit Riot to access your microphone/webcam'),
|
2017-05-25 03:25:17 +03:00
|
|
|
});
|
|
|
|
},
|
2017-05-25 03:01:40 +03:00
|
|
|
]);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-06-12 22:15:14 +03:00
|
|
|
_renderWebRtcDeviceSettings: function() {
|
2017-05-25 03:01:40 +03:00
|
|
|
if (this.state.mediaDevices === false) {
|
2017-06-12 22:15:14 +03:00
|
|
|
return (
|
|
|
|
<p className="mx_UserSettings_link" onClick={this._requestMediaPermissions}>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ _t('Missing Media Permissions, click here to request.') }
|
2017-06-12 22:15:14 +03:00
|
|
|
</p>
|
|
|
|
);
|
2017-05-25 03:01:40 +03:00
|
|
|
} else if (!this.state.mediaDevices) return;
|
2017-04-28 20:21:22 +03:00
|
|
|
|
|
|
|
const Dropdown = sdk.getComponent('elements.Dropdown');
|
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
let microphoneDropdown = <p>{ _t('No Microphones detected') }</p>;
|
|
|
|
let webcamDropdown = <p>{ _t('No Webcams detected') }</p>;
|
2017-04-28 20:21:22 +03:00
|
|
|
|
2017-06-02 01:25:44 +03:00
|
|
|
const defaultOption = {
|
2017-06-02 02:31:43 +03:00
|
|
|
deviceId: '',
|
2017-06-02 01:25:44 +03:00
|
|
|
label: _t('Default Device'),
|
|
|
|
};
|
|
|
|
|
2017-06-02 01:50:14 +03:00
|
|
|
const audioInputs = this.state.mediaDevices.audioinput.slice(0);
|
2017-06-02 01:25:44 +03:00
|
|
|
if (audioInputs.length > 0) {
|
2017-06-02 02:42:19 +03:00
|
|
|
let defaultInput = '';
|
2017-06-02 01:33:36 +03:00
|
|
|
if (!audioInputs.some((input) => input.deviceId === 'default')) {
|
|
|
|
audioInputs.unshift(defaultOption);
|
2017-06-02 02:26:31 +03:00
|
|
|
} else {
|
|
|
|
defaultInput = 'default';
|
2017-06-02 01:33:36 +03:00
|
|
|
}
|
2017-06-02 01:54:17 +03:00
|
|
|
|
2017-04-28 20:21:22 +03:00
|
|
|
microphoneDropdown = <div>
|
2017-09-28 13:21:06 +03:00
|
|
|
<h4>{ _t('Microphone') }</h4>
|
2017-04-28 20:21:22 +03:00
|
|
|
<Dropdown
|
|
|
|
className="mx_UserSettings_webRtcDevices_dropdown"
|
2017-06-02 02:26:31 +03:00
|
|
|
value={this.state.activeAudioInput || defaultInput}
|
2017-04-28 20:21:22 +03:00
|
|
|
onOptionChange={this._setAudioInput}>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ this._mapWebRtcDevicesToSpans(audioInputs) }
|
2017-04-28 20:21:22 +03:00
|
|
|
</Dropdown>
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
2017-06-02 01:50:14 +03:00
|
|
|
const videoInputs = this.state.mediaDevices.videoinput.slice(0);
|
2017-06-02 01:25:44 +03:00
|
|
|
if (videoInputs.length > 0) {
|
2017-06-02 02:42:19 +03:00
|
|
|
let defaultInput = '';
|
2017-06-02 01:33:36 +03:00
|
|
|
if (!videoInputs.some((input) => input.deviceId === 'default')) {
|
|
|
|
videoInputs.unshift(defaultOption);
|
2017-06-02 02:26:31 +03:00
|
|
|
} else {
|
|
|
|
defaultInput = 'default';
|
2017-06-02 01:33:36 +03:00
|
|
|
}
|
2017-06-02 01:54:17 +03:00
|
|
|
|
2017-04-28 20:21:22 +03:00
|
|
|
webcamDropdown = <div>
|
2017-09-28 13:21:06 +03:00
|
|
|
<h4>{ _t('Camera') }</h4>
|
2017-04-28 20:21:22 +03:00
|
|
|
<Dropdown
|
|
|
|
className="mx_UserSettings_webRtcDevices_dropdown"
|
2017-06-02 02:26:31 +03:00
|
|
|
value={this.state.activeVideoInput || defaultInput}
|
2017-04-28 20:21:22 +03:00
|
|
|
onOptionChange={this._setVideoInput}>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ this._mapWebRtcDevicesToSpans(videoInputs) }
|
2017-04-28 20:21:22 +03:00
|
|
|
</Dropdown>
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
|
|
|
return <div>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ microphoneDropdown }
|
|
|
|
{ webcamDropdown }
|
2017-06-12 22:15:14 +03:00
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
|
|
|
_renderWebRtcSettings: function() {
|
|
|
|
return <div>
|
2017-09-28 13:21:06 +03:00
|
|
|
<h3>{ _t('VoIP') }</h3>
|
2017-06-12 22:15:14 +03:00
|
|
|
<div className="mx_UserSettings_section">
|
2017-10-31 06:09:24 +03:00
|
|
|
{ WEBRTC_SETTINGS.map(this._renderDeviceSetting) }
|
2017-06-12 22:15:14 +03:00
|
|
|
{ this._renderWebRtcDeviceSettings() }
|
2017-04-28 20:21:22 +03:00
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
2017-04-18 21:55:08 +03:00
|
|
|
_showSpoiler: function(event) {
|
|
|
|
const target = event.target;
|
2017-05-02 23:17:12 +03:00
|
|
|
target.innerHTML = target.getAttribute('data-spoiler');
|
2017-04-18 21:55:08 +03:00
|
|
|
|
|
|
|
const range = document.createRange();
|
|
|
|
range.selectNodeContents(target);
|
|
|
|
|
|
|
|
const selection = window.getSelection();
|
|
|
|
selection.removeAllRanges();
|
|
|
|
selection.addRange(range);
|
|
|
|
},
|
|
|
|
|
2016-12-21 21:56:50 +03:00
|
|
|
nameForMedium: function(medium) {
|
2017-05-23 17:16:31 +03:00
|
|
|
if (medium === 'msisdn') return _t('Phone');
|
2017-05-26 19:56:51 +03:00
|
|
|
if (medium === 'email') return _t('Email');
|
2016-12-21 21:56:50 +03:00
|
|
|
return medium[0].toUpperCase() + medium.slice(1);
|
|
|
|
},
|
|
|
|
|
2017-03-16 18:16:24 +03:00
|
|
|
presentableTextForThreepid: function(threepid) {
|
2017-05-02 23:17:12 +03:00
|
|
|
if (threepid.medium === 'msisdn') {
|
2017-03-16 18:16:24 +03:00
|
|
|
return '+' + threepid.address;
|
|
|
|
} else {
|
|
|
|
return threepid.address;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-11-30 18:52:41 +03:00
|
|
|
render: function() {
|
2017-05-02 23:17:12 +03:00
|
|
|
const Loader = sdk.getComponent("elements.Spinner");
|
2015-12-18 03:37:56 +03:00
|
|
|
switch (this.state.phase) {
|
2015-12-23 14:47:56 +03:00
|
|
|
case "UserSettings.LOADING":
|
2015-12-23 19:02:18 +03:00
|
|
|
return (
|
|
|
|
<Loader />
|
|
|
|
);
|
2015-12-23 14:47:56 +03:00
|
|
|
case "UserSettings.DISPLAY":
|
|
|
|
break; // quit the switch to return the common state
|
|
|
|
default:
|
|
|
|
throw new Error("Unknown state.phase => " + this.state.phase);
|
|
|
|
}
|
|
|
|
// can only get here if phase is UserSettings.DISPLAY
|
2017-05-02 23:17:12 +03:00
|
|
|
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
|
|
|
|
const ChangeDisplayName = sdk.getComponent("views.settings.ChangeDisplayName");
|
|
|
|
const ChangePassword = sdk.getComponent("views.settings.ChangePassword");
|
|
|
|
const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
|
|
|
|
const Notifications = sdk.getComponent("settings.Notifications");
|
|
|
|
const EditableText = sdk.getComponent('elements.EditableText');
|
2018-03-21 15:00:56 +03:00
|
|
|
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
|
2017-05-02 23:17:12 +03:00
|
|
|
|
|
|
|
const avatarUrl = (
|
2015-12-23 19:52:59 +03:00
|
|
|
this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
|
|
|
|
);
|
2015-12-23 18:38:28 +03:00
|
|
|
|
2017-05-02 23:17:12 +03:00
|
|
|
const threepidsSection = this.state.threepids.map((val, pidIndex) => {
|
2016-12-22 18:03:24 +03:00
|
|
|
const id = "3pid-" + val.address;
|
2017-06-12 15:22:52 +03:00
|
|
|
// TODO: make a separate component to avoid having to rebind onClick
|
2017-06-08 20:35:45 +03:00
|
|
|
// each time we render
|
|
|
|
const onRemoveClick = (e) => this.onRemoveThreepidClicked(val);
|
2016-01-19 19:36:54 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_UserSettings_profileTableRow" key={pidIndex}>
|
|
|
|
<div className="mx_UserSettings_profileLabelCell">
|
2017-09-28 13:21:06 +03:00
|
|
|
<label htmlFor={id}>{ this.nameForMedium(val.medium) }</label>
|
2016-01-19 19:36:54 +03:00
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_profileInputCell">
|
2017-03-16 18:16:24 +03:00
|
|
|
<input type="text" key={val.address} id={id}
|
|
|
|
value={this.presentableTextForThreepid(val)} disabled
|
|
|
|
/>
|
2016-01-19 19:36:54 +03:00
|
|
|
</div>
|
2017-01-21 00:00:22 +03:00
|
|
|
<div className="mx_UserSettings_threepidButton mx_filterFlipColor">
|
2017-09-28 13:21:06 +03:00
|
|
|
<img src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
|
2017-06-08 20:35:45 +03:00
|
|
|
onClick={onRemoveClick} />
|
2016-12-21 21:49:38 +03:00
|
|
|
</div>
|
2016-01-19 19:36:54 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
});
|
2017-03-16 17:56:26 +03:00
|
|
|
let addEmailSection;
|
2016-01-19 19:36:54 +03:00
|
|
|
if (this.state.email_add_pending) {
|
2017-03-16 17:56:26 +03:00
|
|
|
addEmailSection = <Loader key="_email_add_spinner" />;
|
2017-06-08 22:30:34 +03:00
|
|
|
} else {
|
2017-03-16 17:56:26 +03:00
|
|
|
addEmailSection = (
|
|
|
|
<div className="mx_UserSettings_profileTableRow" key="_newEmail">
|
2016-01-19 19:36:54 +03:00
|
|
|
<div className="mx_UserSettings_profileLabelCell">
|
2017-09-28 13:21:06 +03:00
|
|
|
<label>{ _t('Email') }</label>
|
2016-01-19 19:36:54 +03:00
|
|
|
</div>
|
2016-01-24 21:15:08 +03:00
|
|
|
<div className="mx_UserSettings_profileInputCell">
|
|
|
|
<EditableText
|
2017-03-16 17:56:26 +03:00
|
|
|
ref="add_email_input"
|
2016-01-24 21:15:08 +03:00
|
|
|
className="mx_UserSettings_editable"
|
|
|
|
placeholderClassName="mx_UserSettings_threepidPlaceholder"
|
2017-09-28 13:21:06 +03:00
|
|
|
placeholder={_t("Add email address")}
|
|
|
|
blurToCancel={false}
|
|
|
|
onValueChanged={this._onAddEmailEditFinished} />
|
2017-03-16 17:56:26 +03:00
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_threepidButton mx_filterFlipColor">
|
2017-06-07 13:40:46 +03:00
|
|
|
<img src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
|
2017-03-16 17:56:26 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2017-03-22 18:18:27 +03:00
|
|
|
const AddPhoneNumber = sdk.getComponent('views.settings.AddPhoneNumber');
|
|
|
|
const addMsisdnSection = (
|
|
|
|
<AddPhoneNumber key="_addMsisdn" onThreepidAdded={this._refreshFromServer} />
|
|
|
|
);
|
2017-03-16 17:56:26 +03:00
|
|
|
threepidsSection.push(addEmailSection);
|
|
|
|
threepidsSection.push(addMsisdnSection);
|
2016-01-19 19:36:54 +03:00
|
|
|
|
2017-06-08 22:30:34 +03:00
|
|
|
const accountJsx = (
|
2016-01-07 20:23:32 +03:00
|
|
|
<ChangePassword
|
|
|
|
className="mx_UserSettings_accountTable"
|
|
|
|
rowClassName="mx_UserSettings_profileTableRow"
|
|
|
|
rowLabelClassName="mx_UserSettings_profileLabelCell"
|
|
|
|
rowInputClassName="mx_UserSettings_profileInputCell"
|
2016-01-20 20:09:46 +03:00
|
|
|
buttonClassName="mx_UserSettings_button mx_UserSettings_changePasswordButton"
|
2016-01-07 20:23:32 +03:00
|
|
|
onError={this.onPasswordChangeError}
|
|
|
|
onFinished={this.onPasswordChanged} />
|
2017-06-08 22:30:34 +03:00
|
|
|
);
|
|
|
|
|
2017-05-02 23:17:12 +03:00
|
|
|
let notificationArea;
|
2017-06-08 22:30:34 +03:00
|
|
|
if (this.state.threepids !== undefined) {
|
2017-05-02 23:17:12 +03:00
|
|
|
notificationArea = (<div>
|
2017-05-23 17:16:31 +03:00
|
|
|
<h3>{ _t("Notifications") }</h3>
|
2016-02-10 14:48:35 +03:00
|
|
|
|
|
|
|
<div className="mx_UserSettings_section">
|
2016-06-08 16:54:34 +03:00
|
|
|
<Notifications threepids={this.state.threepids} brand={this.props.brand} />
|
2016-02-10 14:48:35 +03:00
|
|
|
</div>
|
|
|
|
</div>);
|
|
|
|
}
|
2016-01-07 20:23:32 +03:00
|
|
|
|
2017-04-21 05:04:34 +03:00
|
|
|
const olmVersion = MatrixClientPeg.get().olmVersion;
|
2016-09-15 13:31:54 +03:00
|
|
|
// If the olmVersion is not defined then either crypto is disabled, or
|
|
|
|
// we are using a version old version of olm. We assume the former.
|
2017-04-21 05:04:34 +03:00
|
|
|
let olmVersionString = "<not-enabled>";
|
2016-09-15 13:31:54 +03:00
|
|
|
if (olmVersion !== undefined) {
|
2017-05-02 23:12:58 +03:00
|
|
|
olmVersionString = `${olmVersion[0]}.${olmVersion[1]}.${olmVersion[2]}`;
|
2016-09-15 13:31:54 +03:00
|
|
|
}
|
|
|
|
|
2015-12-23 14:47:56 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_UserSettings">
|
2016-09-13 14:18:22 +03:00
|
|
|
<SimpleRoomHeader
|
2017-09-28 13:21:06 +03:00
|
|
|
title={_t("Settings")}
|
|
|
|
onCancelClick={this.props.onClose}
|
2016-09-13 14:18:22 +03:00
|
|
|
/>
|
2015-12-23 14:47:56 +03:00
|
|
|
|
2018-03-21 15:00:56 +03:00
|
|
|
<GeminiScrollbarWrapper
|
|
|
|
className="mx_UserSettings_body"
|
|
|
|
autoshow={true}>
|
2016-01-15 16:11:14 +03:00
|
|
|
|
2017-05-23 17:16:31 +03:00
|
|
|
<h3>{ _t("Profile") }</h3>
|
2015-12-23 14:47:56 +03:00
|
|
|
|
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<div className="mx_UserSettings_profileTable">
|
|
|
|
<div className="mx_UserSettings_profileTableRow">
|
|
|
|
<div className="mx_UserSettings_profileLabelCell">
|
2017-05-23 17:16:31 +03:00
|
|
|
<label htmlFor="displayName">{ _t('Display name') }</label>
|
2015-12-23 14:47:56 +03:00
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_profileInputCell">
|
2015-12-23 17:14:25 +03:00
|
|
|
<ChangeDisplayName />
|
2015-12-23 14:47:56 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ threepidsSection }
|
2015-12-23 18:38:28 +03:00
|
|
|
</div>
|
2015-11-30 18:52:41 +03:00
|
|
|
|
2015-12-23 14:47:56 +03:00
|
|
|
<div className="mx_UserSettings_avatarPicker">
|
2017-10-14 06:13:32 +03:00
|
|
|
<div className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
|
2017-10-26 16:05:58 +03:00
|
|
|
<img src="img/cancel.svg"
|
|
|
|
width="15" height="15"
|
|
|
|
className="mx_filterFlipColor"
|
|
|
|
alt={_t("Remove avatar")}
|
|
|
|
title={_t("Remove avatar")} />
|
2017-10-14 06:13:32 +03:00
|
|
|
</div>
|
|
|
|
<div onClick={this.onAvatarPickerClick} className="mx_UserSettings_avatarPicker_imgContainer">
|
2016-01-15 19:33:34 +03:00
|
|
|
<ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
|
2017-09-28 13:21:06 +03:00
|
|
|
showUploadSection={false} className="mx_UserSettings_avatarPicker_img" />
|
2016-01-15 19:33:34 +03:00
|
|
|
</div>
|
2015-12-23 19:52:59 +03:00
|
|
|
<div className="mx_UserSettings_avatarPicker_edit">
|
2016-01-15 15:35:30 +03:00
|
|
|
<label htmlFor="avatarInput" ref="file_label">
|
2017-01-21 00:00:22 +03:00
|
|
|
<img src="img/camera.svg" className="mx_filterFlipColor"
|
2017-09-28 13:21:06 +03:00
|
|
|
alt={_t("Upload avatar")} title={_t("Upload avatar")}
|
2016-01-15 15:35:30 +03:00
|
|
|
width="17" height="15" />
|
2015-12-23 19:52:59 +03:00
|
|
|
</label>
|
2017-09-28 13:21:06 +03:00
|
|
|
<input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
|
2015-11-30 18:52:41 +03:00
|
|
|
</div>
|
2015-12-23 14:47:56 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
2015-12-18 03:37:56 +03:00
|
|
|
|
2017-05-23 17:16:31 +03:00
|
|
|
<h3>{ _t("Account") }</h3>
|
2015-12-23 18:38:28 +03:00
|
|
|
|
2017-05-23 17:16:31 +03:00
|
|
|
<div className="mx_UserSettings_section cadcampoHide">
|
2017-01-13 19:25:26 +03:00
|
|
|
<AccessibleButton className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t("Sign out") }
|
2017-01-13 19:25:26 +03:00
|
|
|
</AccessibleButton>
|
2017-06-20 13:22:07 +03:00
|
|
|
{ this.state.userHasGeneratedPassword ?
|
|
|
|
<div className="mx_UserSettings_passwordWarning">
|
|
|
|
{ _t("To return to your account in future you need to set a password") }
|
|
|
|
</div> : null
|
|
|
|
}
|
2016-01-15 15:35:30 +03:00
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
{ accountJsx }
|
2015-12-23 14:47:56 +03:00
|
|
|
</div>
|
2015-12-18 03:37:56 +03:00
|
|
|
|
2017-11-21 14:50:41 +03:00
|
|
|
{ this._renderGroupSettings() }
|
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
{ this._renderReferral() }
|
2017-01-31 16:17:01 +03:00
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
{ notificationArea }
|
2015-12-18 03:37:56 +03:00
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
{ this._renderUserInterfaceSettings() }
|
|
|
|
{ this._renderLabs() }
|
|
|
|
{ this._renderWebRtcSettings() }
|
|
|
|
{ this._renderDevicesPanel() }
|
|
|
|
{ this._renderCryptoInfo() }
|
|
|
|
{ this._renderIgnoredUsers() }
|
|
|
|
{ this._renderBulkOptions() }
|
|
|
|
{ this._renderBugReport() }
|
2016-06-13 19:34:12 +03:00
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
{ PlatformPeg.get().isElectron() && this._renderElectronSettings() }
|
2017-05-24 17:40:50 +03:00
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
{ this._renderAnalyticsControl() }
|
2017-05-29 16:36:50 +03:00
|
|
|
|
2017-05-23 17:16:31 +03:00
|
|
|
<h3>{ _t("Advanced") }</h3>
|
2015-12-23 14:47:56 +03:00
|
|
|
|
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<div className="mx_UserSettings_advanced">
|
2017-09-28 13:21:06 +03:00
|
|
|
{ _t("Logged in as:") } { this._me }
|
2015-11-30 18:52:41 +03:00
|
|
|
</div>
|
2017-04-18 21:55:08 +03:00
|
|
|
<div className="mx_UserSettings_advanced">
|
2017-09-28 13:21:06 +03:00
|
|
|
{ _t('Access Token:') }
|
2017-06-08 20:35:45 +03:00
|
|
|
<span className="mx_UserSettings_advanced_spoiler"
|
|
|
|
onClick={this._showSpoiler}
|
2017-09-28 13:21:06 +03:00
|
|
|
data-spoiler={MatrixClientPeg.get().getAccessToken()}>
|
2017-06-08 20:35:45 +03:00
|
|
|
<{ _t("click to reveal") }>
|
|
|
|
</span>
|
2017-04-18 21:55:08 +03:00
|
|
|
</div>
|
2016-05-18 13:42:51 +03:00
|
|
|
<div className="mx_UserSettings_advanced">
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t("Homeserver is") } { MatrixClientPeg.get().getHomeserverUrl() }
|
2016-05-18 13:42:51 +03:00
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_advanced">
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t("Identity Server is") } { MatrixClientPeg.get().getIdentityServerUrl() }
|
2016-05-18 13:42:51 +03:00
|
|
|
</div>
|
2015-12-23 19:02:18 +03:00
|
|
|
<div className="mx_UserSettings_advanced">
|
2017-09-28 13:21:06 +03:00
|
|
|
{ _t('matrix-react-sdk version:') } { (REACT_SDK_VERSION !== '<local>')
|
2017-05-02 23:12:58 +03:00
|
|
|
? gHVersionLabel('matrix-org/matrix-react-sdk', REACT_SDK_VERSION)
|
2017-04-21 05:04:34 +03:00
|
|
|
: REACT_SDK_VERSION
|
2017-09-28 13:21:06 +03:00
|
|
|
}<br />
|
|
|
|
{ _t('riot-web version:') } { (this.state.vectorVersion !== undefined)
|
2017-05-02 23:12:58 +03:00
|
|
|
? gHVersionLabel('vector-im/riot-web', this.state.vectorVersion)
|
2017-04-21 05:04:34 +03:00
|
|
|
: 'unknown'
|
2017-09-28 13:21:06 +03:00
|
|
|
}<br />
|
|
|
|
{ _t("olm version:") } { olmVersionString }<br />
|
2015-12-23 14:47:56 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
2016-01-15 16:11:14 +03:00
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
{ this._renderCheckUpdate() }
|
2017-06-03 17:10:05 +03:00
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
{ this._renderClearCache() }
|
2017-02-17 18:16:28 +03:00
|
|
|
|
2017-09-28 13:21:06 +03:00
|
|
|
{ this._renderDeactivateAccount() }
|
2016-08-02 20:40:12 +03:00
|
|
|
|
2018-03-21 15:00:56 +03:00
|
|
|
</GeminiScrollbarWrapper>
|
2015-12-23 14:47:56 +03:00
|
|
|
</div>
|
|
|
|
);
|
2017-05-02 23:17:12 +03:00
|
|
|
},
|
2015-11-30 18:52:41 +03:00
|
|
|
});
|