diff --git a/res/css/_components.scss b/res/css/_components.scss index 25b7c9342e..d0068c14ad 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -136,6 +136,7 @@ @import "./views/settings/_PhoneNumbers.scss"; @import "./views/settings/_ProfileSettings.scss"; @import "./views/settings/tabs/_GeneralSettingsTab.scss"; +@import "./views/settings/tabs/_HelpSettingsTab.scss"; @import "./views/settings/tabs/_PreferencesSettingsTab.scss"; @import "./views/settings/tabs/_SettingsTab.scss"; @import "./views/settings/tabs/_VoiceSettingsTab.scss"; diff --git a/res/css/views/settings/tabs/_HelpSettingsTab.scss b/res/css/views/settings/tabs/_HelpSettingsTab.scss new file mode 100644 index 0000000000..a1199b59b6 --- /dev/null +++ b/res/css/views/settings/tabs/_HelpSettingsTab.scss @@ -0,0 +1,24 @@ +/* +Copyright 2019 New Vector Ltd + +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. +*/ + +.mx_HelpSettingsTab_debugButton { + margin-bottom: 5px; + margin-top: 5px; +} + +.mx_HelpSettingsTab span.mx_AccessibleButton { + word-break: break-word; +} \ No newline at end of file diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js index 7b09970f56..321d741743 100644 --- a/src/components/views/dialogs/UserSettingsDialog.js +++ b/src/components/views/dialogs/UserSettingsDialog.js @@ -26,6 +26,7 @@ import LabsSettingsTab from "../settings/tabs/LabsSettingsTab"; import NotificationSettingsTab from "../settings/tabs/NotificationSettingsTab"; import PreferencesSettingsTab from "../settings/tabs/PreferencesSettingsTab"; import VoiceSettingsTab from "../settings/tabs/VoiceSettingsTab"; +import HelpSettingsTab from "../settings/tabs/HelpSettingsTab"; // TODO: Ditch this whole component export class TempTab extends React.Component { @@ -86,7 +87,7 @@ export default class UserSettingsDialog extends React.Component { tabs.push(new Tab( _td("Help & About"), "mx_UserSettingsDialog_helpIcon", -
Help Test
, + , )); tabs.push(new Tab( _td("Visit old settings"), diff --git a/src/components/views/settings/tabs/HelpSettingsTab.js b/src/components/views/settings/tabs/HelpSettingsTab.js new file mode 100644 index 0000000000..c0892cf448 --- /dev/null +++ b/src/components/views/settings/tabs/HelpSettingsTab.js @@ -0,0 +1,227 @@ +/* +Copyright 2019 New Vector Ltd + +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. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import {_t, getCurrentLanguage} from "../../../../languageHandler"; +import MatrixClientPeg from "../../../../MatrixClientPeg"; +import AccessibleButton from "../../elements/AccessibleButton"; +import SdkConfig from "../../../../SdkConfig"; +import createRoom from "../../../../createRoom"; +const packageJson = require('../../../../../package.json'); +const Modal = require("../../../../Modal"); +const sdk = require("../../../../index"); +const PlatformPeg = require("../../../../PlatformPeg"); + +// if this looks like a release, use the 'version' from package.json; else use +// the git sha. Prepend version with v, to look like riot-web version +const REACT_SDK_VERSION = 'dist' in packageJson ? packageJson.version : packageJson.gitHead || ''; + +// Simple method to help prettify GH Release Tags and Commit Hashes. +const semVerRegex = /^v?(\d+\.\d+\.\d+(?:-rc.+)?)(?:-(?:\d+-g)?([0-9a-fA-F]+))?(?:-dirty)?$/i; +const ghVersionLabel = function(repo, token='') { + const match = token.match(semVerRegex); + let url; + 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]}`; + } + return { token }; +}; + +export default class HelpSettingsTab extends React.Component { + static propTypes = { + closeSettingsFn: PropTypes.func.isRequired, + }; + + constructor() { + super(); + + this.state = { + vectorVersion: null, + canUpdate: false, + }; + } + + componentWillMount(): void { + PlatformPeg.get().getAppVersion().then((ver) => this.setState({vectorVersion: ver})).catch((e) => { + console.error("Error getting vector version: ", e); + }); + PlatformPeg.get().canSelfUpdate().then((v) => this.setState({canUpdate: v})).catch((e) => { + console.error("Error getting self updatability: ", e); + }); + } + + _onClearCacheAndReload = (e) => { + if (!PlatformPeg.get()) return; + + MatrixClientPeg.get().stopClient(); + MatrixClientPeg.get().store.deleteAllData().done(() => { + PlatformPeg.get().reload(); + }); + }; + + _onBugReport = (e) => { + const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog"); + if (!BugReportDialog) { + return; + } + Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {}); + }; + + _onStartBotChat = (e) => { + this.props.closeSettingsFn(); + createRoom({ + dmUserId: SdkConfig.get().welcomeUserId, + andView: true, + }); + }; + + _showSpoiler = (event) => { + const target = event.target; + target.innerHTML = target.getAttribute('data-spoiler'); + + const range = document.createRange(); + range.selectNodeContents(target); + + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + }; + + _renderLegal() { + const tocLinks = SdkConfig.get().terms_and_conditions_links; + if (!tocLinks) return null; + + const legalLinks = []; + for (const tocEntry of SdkConfig.get().terms_and_conditions_links) { + legalLinks.push(
+ {tocEntry.text} +
); + } + + return ( +
+ {_t("Legal")} +
+ {legalLinks} +
+
+ ); + } + + render() { + let faqText = _t('For help with using Riot, click here.', {}, { + 'a': (sub) => {sub}, + }); + if (SdkConfig.get().welcomeUserId && getCurrentLanguage().startsWith('en')) { + faqText = ( +
+ { + _t('For help with using Riot, click here or start a chat with our ' + + 'bot using the button below.', {}, { + 'a': (sub) => {sub}, + }) + } + + {_t("Start a chat with Riot Bot")} + +
+ ); + } + + const reactSdkVersion = REACT_SDK_VERSION !== '' + ? ghVersionLabel('matrix-org/matrix-react-sdk', REACT_SDK_VERSION) + : REACT_SDK_VERSION; + const vectorVersion = this.state.vectorVersion + ? ghVersionLabel('vector-im/riot-web', this.state.vectorVersion) + : 'unknown'; + + let olmVersion = MatrixClientPeg.get().olmVersion; + olmVersion = olmVersion ? `${olmVersion[0]}.${olmVersion[1]}.${olmVersion[2]}` : ''; + + let updateButton = null; + if (this.state.canUpdate) { + const platform = PlatformPeg.get(); + updateButton = ( + + {_t('Check for update')} + + ); + } + + return ( +
+
{_t("Help & About")}
+
+ {_t('Bug reporting')} +
+ { + _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 " + + "other users. They do not contain messages.", + ) + } +
+ + {_t("Submit debug logs")} + +
+
+ + {_t("Clear Cache and Reload")} + +
+
+
+
+ {_t("FAQ")} +
+ {faqText} +
+
+
+ {_t("Versions")} +
+ {_t("matrix-react-sdk version:")} {reactSdkVersion}
+ {_t("riot-web version:")} {vectorVersion}
+ {_t("olm version:")} {olmVersion}
+ {updateButton} +
+
+ {this._renderLegal()} +
+ {_t("Advanced")} +
+ {_t("Homeserver is")} {MatrixClientPeg.get().getHomeserverUrl()}
+ {_t("Identity Server is")} {MatrixClientPeg.get().getIdentityServerUrl()}
+ {_t("Access Token:") + ' '} + + <{ _t("click to reveal") }> + +
+
+
+ ); + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index ab4e8b74c7..94c2528c64 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -439,6 +439,26 @@ "Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!", "Close Account": "Close Account", "General": "General", + "Legal": "Legal", + "For help with using Riot, click here.": "For help with using Riot, click here.", + "For help with using Riot, click here or start a chat with our bot using the button below.": "For help with using Riot, click here or start a chat with our bot using the button below.", + "Start a chat with Riot Bot": "Start a chat with Riot Bot", + "Check for update": "Check for update", + "Help & About": "Help & About", + "Bug reporting": "Bug reporting", + "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 other users. They do not contain messages.": "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 other users. They do not contain messages.", + "Submit debug logs": "Submit debug logs", + "Clear Cache and Reload": "Clear Cache and Reload", + "FAQ": "FAQ", + "Versions": "Versions", + "matrix-react-sdk version:": "matrix-react-sdk version:", + "riot-web version:": "riot-web version:", + "olm version:": "olm version:", + "Advanced": "Advanced", + "Homeserver is": "Homeserver is", + "Identity Server is": "Identity Server is", + "Access Token:": "Access Token:", + "click to reveal": "click to reveal", "Lazy loading members not supported": "Lazy loading members not supported", "Lazy loading is not supported by your current homeserver.": "Lazy loading is not supported by your current homeserver.", "Labs": "Labs", @@ -448,7 +468,6 @@ "Composer": "Composer", "Room list": "Room list", "Timeline": "Timeline", - "Advanced": "Advanced", "Autocomplete delay (ms)": "Autocomplete delay (ms)", "No media permissions": "No media permissions", "You may need to manually permit Riot to access your microphone/webcam": "You may need to manually permit Riot to access your microphone/webcam", @@ -916,7 +935,6 @@ "Logs sent": "Logs sent", "Thank you!": "Thank you!", "Failed to send logs: ": "Failed to send logs: ", - "Submit debug logs": "Submit debug logs", "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 other users. They do not contain messages.": "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 other users. They do not contain messages.", "Before submitting logs, you must create a GitHub issue to describe your problem.": "Before submitting logs, you must create a GitHub issue to describe your problem.", "What GitHub issue are these logs for?": "What GitHub issue are these logs for?", @@ -1057,7 +1075,6 @@ "\"%(RoomName)s\" contains devices that you haven't seen before.": "\"%(RoomName)s\" contains devices that you haven't seen before.", "Unknown devices": "Unknown devices", "Security & Privacy": "Security & Privacy", - "Help & About": "Help & About", "Visit old settings": "Visit old settings", "Unable to load backup status": "Unable to load backup status", "Unable to restore backup": "Unable to restore backup", @@ -1296,18 +1313,14 @@ "Device key:": "Device key:", "Ignored Users": "Ignored Users", "Submit Debug Logs": "Submit Debug Logs", - "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 other users. They do not contain messages.": "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 other users. They do not contain messages.", "Riot collects anonymous analytics to allow us to improve the application.": "Riot collects anonymous analytics to allow us to improve the application.", "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.": "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.", "Learn more about how we use analytics.": "Learn more about how we use analytics.", "These are experimental features that may break in unexpected ways": "These are experimental features that may break in unexpected ways", "Use with caution": "Use with caution", "Deactivate my account": "Deactivate my account", - "Legal": "Legal", "Clear Cache": "Clear Cache", - "Clear Cache and Reload": "Clear Cache and Reload", "Updates": "Updates", - "Check for update": "Check for update", "Reject all %(invitedRooms)s invites": "Reject all %(invitedRooms)s invites", "Bulk Options": "Bulk Options", "Desktop specific": "Desktop specific", @@ -1318,13 +1331,6 @@ "Display name": "Display name", "To return to your account in future you need to set a password": "To return to your account in future you need to set a password", "Logged in as:": "Logged in as:", - "Access Token:": "Access Token:", - "click to reveal": "click to reveal", - "Homeserver is": "Homeserver is", - "Identity Server is": "Identity Server is", - "matrix-react-sdk version:": "matrix-react-sdk version:", - "riot-web version:": "riot-web version:", - "olm version:": "olm version:", "Failed to send email": "Failed to send email", "The email address linked to your account must be entered.": "The email address linked to your account must be entered.", "A new password must be entered.": "A new password must be entered.",