PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

delint UserSettings.js

Browse source
This commit is contained in:
Richard van der Hoff 2017-06-08 18:35:45 +01:00
parent f680bb5d3c
commit 20bdae6079
2 changed files with 95 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintignore.errorfiles
View file

@ -30,7 +30,6 @@ src/components/structures/RoomView.js
src/components/structures/ScrollPanel.js src/components/structures/ScrollPanel.js
src/components/structures/TimelinePanel.js src/components/structures/TimelinePanel.js
src/components/structures/UploadBar.js src/components/structures/UploadBar.js
src/components/structures/UserSettings.js
src/components/views/avatars/BaseAvatar.js src/components/views/avatars/BaseAvatar.js
src/components/views/avatars/MemberAvatar.js src/components/views/avatars/MemberAvatar.js
src/components/views/avatars/RoomAvatar.js src/components/views/avatars/RoomAvatar.js

153
src/components/structures/UserSettings.js
View file

@ -389,7 +389,10 @@ module.exports = React.createClass({
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, { Modal.createDialog(ErrorDialog, {
title: _t("Success"), title: _t("Success"),
description: _t("Your password was successfully changed. You will not receive push notifications on other devices until you log back in to them") + ".", description: _t(
"Your password was successfully changed. You will not receive " +
"push notifications on other devices until you log back in to them",
) + ".",
}); });
dis.dispatch({action: 'password_changed'}); dis.dispatch({action: 'password_changed'});
}, },
@ -427,7 +430,10 @@ module.exports = React.createClass({
this._addThreepid.addEmailAddress(emailAddress, true).done(() => { this._addThreepid.addEmailAddress(emailAddress, true).done(() => {
Modal.createDialog(QuestionDialog, { Modal.createDialog(QuestionDialog, {
title: _t("Verification Pending"), title: _t("Verification Pending"),
description: _t("Please check your email and click on the link it contains. Once this is done, click continue."), description: _t(
"Please check your email and click on the link it contains. Once this " +
"is done, click continue.",
),
button: _t('Continue'), button: _t('Continue'),
onFinished: this.onEmailDialogFinished, onFinished: this.onEmailDialogFinished,
}); });
@ -447,7 +453,7 @@ module.exports = React.createClass({
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
Modal.createDialog(QuestionDialog, { Modal.createDialog(QuestionDialog, {
title: _t("Remove Contact Information?"), title: _t("Remove Contact Information?"),
description: _t("Remove %(threePid)s?", { threePid : threepid.address }), description: _t("Remove %(threePid)s?", { threePid: threepid.address }),
button: _t('Remove'), button: _t('Remove'),
onFinished: (submit) => { onFinished: (submit) => {
if (submit) { if (submit) {
@ -489,8 +495,8 @@ module.exports = React.createClass({
this.setState({email_add_pending: false}); this.setState({email_add_pending: false});
if (err.errcode == 'M_THREEPID_AUTH_FAILED') { if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
let message = _t("Unable to verify email address.") + " " + 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."); _t("Please check your email and click on the link it contains. Once this is done, click continue.");
Modal.createDialog(QuestionDialog, { Modal.createDialog(QuestionDialog, {
title: _t("Verification Pending"), title: _t("Verification Pending"),
description: message, description: message,
@ -608,7 +614,7 @@ module.exports = React.createClass({
} }
}, },
_renderLanguageSetting: function () { _renderLanguageSetting: function() {
const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown'); const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
return <div> return <div>
<label htmlFor="languageSelector">{_t('Interface Language')}</label> <label htmlFor="languageSelector">{_t('Interface Language')}</label>
@ -639,7 +645,7 @@ module.exports = React.createClass({
<input id="urlPreviewsDisabled" <input id="urlPreviewsDisabled"
type="checkbox" type="checkbox"
defaultChecked={ UserSettingsStore.getUrlPreviewsDisabled() } defaultChecked={ UserSettingsStore.getUrlPreviewsDisabled() }
onChange={ (e) => UserSettingsStore.setUrlPreviewsDisabled(e.target.checked) } onChange={ this._onPreviewsDisabledChanged }
/> />
<label htmlFor="urlPreviewsDisabled"> <label htmlFor="urlPreviewsDisabled">
{ _t("Disable inline URL previews by default") } { _t("Disable inline URL previews by default") }
@ -647,17 +653,24 @@ module.exports = React.createClass({
</div>; </div>;
}, },
_onPreviewsDisabledChanged: function(e) {
UserSettingsStore.setUrlPreviewsDisabled(e.target.checked);
},
_renderSyncedSetting: function(setting) { _renderSyncedSetting: function(setting) {
// 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) => {
UserSettingsStore.setSyncedSetting(setting.id, e.target.checked);
if (setting.fn) setting.fn(e.target.checked);
};
return <div className="mx_UserSettings_toggle" key={ setting.id }> return <div className="mx_UserSettings_toggle" key={ setting.id }>
<input id={ setting.id } <input id={ setting.id }
type="checkbox" type="checkbox"
defaultChecked={ this._syncedSettings[setting.id] } defaultChecked={ this._syncedSettings[setting.id] }
onChange={ onChange={ onChange }
(e) => {
UserSettingsStore.setSyncedSetting(setting.id, e.target.checked);
if (setting.fn) setting.fn(e.target.checked);
}
}
/> />
<label htmlFor={ setting.id }> <label htmlFor={ setting.id }>
{ _t(setting.label) } { _t(setting.label) }
@ -666,22 +679,24 @@ module.exports = React.createClass({
}, },
_renderThemeSelector: function(setting) { _renderThemeSelector: function(setting) {
// 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) => {
if (e.target.checked) {
UserSettingsStore.setSyncedSetting(setting.id, setting.value);
}
dis.dispatch({
action: 'set_theme',
value: setting.value,
});
};
return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }> return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }>
<input id={ setting.id + "_" + setting.value } <input id={ setting.id + "_" + setting.value }
type="radio" type="radio"
name={ setting.id } name={ setting.id }
value={ setting.value } value={ setting.value }
defaultChecked={ this._syncedSettings[setting.id] === setting.value } defaultChecked={ this._syncedSettings[setting.id] === setting.value }
onChange={ (e) => { onChange={ onChange }
if (e.target.checked) {
UserSettingsStore.setSyncedSetting(setting.id, setting.value);
}
dis.dispatch({
action: 'set_theme',
value: setting.value,
});
}
}
/> />
<label htmlFor={ setting.id + "_" + setting.value }> <label htmlFor={ setting.id + "_" + setting.value }>
{ setting.label } { setting.label }
@ -720,8 +735,10 @@ module.exports = React.createClass({
<h3>{ _t("Cryptography") }</h3> <h3>{ _t("Cryptography") }</h3>
<div className="mx_UserSettings_section mx_UserSettings_cryptoSection"> <div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
<ul> <ul>
<li><label>{_t("Device ID:")}</label> <span><code>{deviceId}</code></span></li> <li><label>{_t("Device ID:")}</label>
<li><label>{_t("Device key:")}</label> <span><code><b>{identityKey}</b></code></span></li> <span><code>{deviceId}</code></span></li>
<li><label>{_t("Device key:")}</label>
<span><code><b>{identityKey}</b></code></span></li>
</ul> </ul>
{ importExportButtons } { importExportButtons }
</div> </div>
@ -733,16 +750,18 @@ module.exports = React.createClass({
}, },
_renderLocalSetting: function(setting) { _renderLocalSetting: function(setting) {
// 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) => {
UserSettingsStore.setLocalSetting(setting.id, e.target.checked);
if (setting.fn) setting.fn(e.target.checked);
};
return <div className="mx_UserSettings_toggle" key={ setting.id }> return <div className="mx_UserSettings_toggle" key={ setting.id }>
<input id={ setting.id } <input id={ setting.id }
type="checkbox" type="checkbox"
defaultChecked={ this._localSettings[setting.id] } defaultChecked={ this._localSettings[setting.id] }
onChange={ onChange={ onChange }
(e) => {
UserSettingsStore.setLocalSetting(setting.id, e.target.checked);
if (setting.fn) setting.fn(e.target.checked);
}
}
/> />
<label htmlFor={ setting.id }> <label htmlFor={ setting.id }>
{ _t(setting.label) } { _t(setting.label) }
@ -794,26 +813,33 @@ module.exports = React.createClass({
if (this.props.enableLabs === false) return null; if (this.props.enableLabs === false) return null;
UserSettingsStore.doTranslations(); UserSettingsStore.doTranslations();
const features = UserSettingsStore.LABS_FEATURES.map((feature) => ( const features = UserSettingsStore.LABS_FEATURES.map((feature) => {
<div key={feature.id} className="mx_UserSettings_toggle"> // TODO: this ought to be a separate component so that we don't need
<input // to rebind the onChange each time we render
type="checkbox" const onChange = (e) => {
id={feature.id} if (MatrixClientPeg.get().isGuest()) {
name={feature.id} e.target.checked = false;
defaultChecked={ UserSettingsStore.isFeatureEnabled(feature.id) } dis.dispatch({action: 'view_set_mxid'});
onChange={(e) => { return;
if (MatrixClientPeg.get().isGuest()) { }
e.target.checked = false;
dis.dispatch({action: 'view_set_mxid'});
return;
}
UserSettingsStore.setFeatureEnabled(feature.id, e.target.checked); UserSettingsStore.setFeatureEnabled(feature.id, e.target.checked);
this.forceUpdate(); this.forceUpdate();
}}/> };
<label htmlFor={feature.id}>{feature.name}</label>
</div> return (
)); <div key={feature.id} className="mx_UserSettings_toggle">
<input
type="checkbox"
id={feature.id}
name={feature.id}
defaultChecked={ UserSettingsStore.isFeatureEnabled(feature.id) }
onChange={ onChange }
/>
<label htmlFor={feature.id}>{feature.name}</label>
</div>
);
});
return ( return (
<div> <div>
<h3>{ _t("Labs") }</h3> <h3>{ _t("Labs") }</h3>
@ -865,9 +891,10 @@ module.exports = React.createClass({
if (!this.state.rejectingInvites) { if (!this.state.rejectingInvites) {
// bind() the invited rooms so any new invites that may come in as this button is clicked // bind() the invited rooms so any new invites that may come in as this button is clicked
// don't inadvertently get rejected as well. // don't inadvertently get rejected as well.
const onClick = this._onRejectAllInvitesClicked.bind(this, invitedRooms);
reject = ( reject = (
<AccessibleButton className="mx_UserSettings_button danger" <AccessibleButton className="mx_UserSettings_button danger"
onClick={this._onRejectAllInvitesClicked.bind(this, invitedRooms)}> onClick={onClick}>
{_t("Reject all %(invitedRooms)s invites", {invitedRooms: invitedRooms.length})} {_t("Reject all %(invitedRooms)s invites", {invitedRooms: invitedRooms.length})}
</AccessibleButton> </AccessibleButton>
); );
@ -885,8 +912,6 @@ module.exports = React.createClass({
const settings = this.state.electron_settings; const settings = this.state.electron_settings;
if (!settings) return; if (!settings) return;
const {ipcRenderer} = require('electron');
return <div> return <div>
<h3>{ _t('Desktop specific') }</h3> <h3>{ _t('Desktop specific') }</h3>
<div className="mx_UserSettings_section"> <div className="mx_UserSettings_section">
@ -894,9 +919,7 @@ module.exports = React.createClass({
<input type="checkbox" <input type="checkbox"
name="auto-launch" name="auto-launch"
defaultChecked={settings['auto-launch']} defaultChecked={settings['auto-launch']}
onChange={(e) => { onChange={this._onAutoLaunchChanged}
ipcRenderer.send('settings_set', 'auto-launch', e.target.checked);
}}
/> />
<label htmlFor="auto-launch">{_t('Start automatically after system login')}</label> <label htmlFor="auto-launch">{_t('Start automatically after system login')}</label>
</div> </div>
@ -904,6 +927,11 @@ module.exports = React.createClass({
</div>; </div>;
}, },
_onAutoLaunchChanged: function(e) {
const {ipcRenderer} = require('electron');
ipcRenderer.send('settings_set', 'auto-launch', e.target.checked);
},
_mapWebRtcDevicesToSpans: function(devices) { _mapWebRtcDevicesToSpans: function(devices) {
return devices.map((device) => <span key={device.deviceId}>{device.label}</span>); return devices.map((device) => <span key={device.deviceId}>{device.label}</span>);
}, },
@ -1060,6 +1088,9 @@ module.exports = React.createClass({
const threepidsSection = this.state.threepids.map((val, pidIndex) => { const threepidsSection = this.state.threepids.map((val, pidIndex) => {
const id = "3pid-" + val.address; const id = "3pid-" + val.address;
// TODO; make a separate component to avoid having to rebind onClick
// each time we render
const onRemoveClick = (e) => this.onRemoveThreepidClicked(val);
return ( return (
<div className="mx_UserSettings_profileTableRow" key={pidIndex}> <div className="mx_UserSettings_profileTableRow" key={pidIndex}>
<div className="mx_UserSettings_profileLabelCell"> <div className="mx_UserSettings_profileLabelCell">
@ -1071,7 +1102,8 @@ module.exports = React.createClass({
/> />
</div> </div>
<div className="mx_UserSettings_threepidButton mx_filterFlipColor"> <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
<img src="img/cancel-small.svg" width="14" height="14" alt={ _t("Remove") } onClick={this.onRemoveThreepidClicked.bind(this, val)} /> <img src="img/cancel-small.svg" width="14" height="14" alt={ _t("Remove") }
onClick={onRemoveClick} />
</div> </div>
</div> </div>
); );
@ -1222,7 +1254,12 @@ module.exports = React.createClass({
{ _t("Logged in as:") } {this._me} { _t("Logged in as:") } {this._me}
</div> </div>
<div className="mx_UserSettings_advanced"> <div className="mx_UserSettings_advanced">
{_t('Access Token:')} <span className="mx_UserSettings_advanced_spoiler" onClick={this._showSpoiler} data-spoiler={ MatrixClientPeg.get().getAccessToken() }>&lt;{ _t("click to reveal") }&gt;</span> {_t('Access Token:')}
<span className="mx_UserSettings_advanced_spoiler"
onClick={this._showSpoiler}
data-spoiler={ MatrixClientPeg.get().getAccessToken() }>
&lt;{ _t("click to reveal") }&gt;
</span>
</div> </div>
<div className="mx_UserSettings_advanced"> <div className="mx_UserSettings_advanced">
{ _t("Homeserver is") } { MatrixClientPeg.get().getHomeserverUrl() } { _t("Homeserver is") } { MatrixClientPeg.get().getHomeserverUrl() }