mirror of
https://github.com/zulip/zulip-desktop.git
synced 2025-10-24 08:33:36 +00:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
be869a52d5 | ||
|
|
fcbb5da18e |
@@ -1,11 +1,16 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = tab
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[{*.cjs,*.css,*.html,*.js,*.json,*.ts}]
|
||||
[{package.json,*.yml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
2
.gitattributes
vendored
2
.gitattributes
vendored
@@ -1,5 +1,7 @@
|
||||
* text=auto eol=lf
|
||||
|
||||
package-lock.json binary
|
||||
app/package-lock.json binary
|
||||
*.gif binary
|
||||
*.jpg binary
|
||||
*.jpeg binary
|
||||
|
||||
3
.github/FUNDING.yml
vendored
3
.github/FUNDING.yml
vendored
@@ -1,3 +0,0 @@
|
||||
github: zulip
|
||||
patreon: zulip
|
||||
open_collective: zulip
|
||||
8
.github/ISSUE_TEMPLATE.md
vendored
Normal file
8
.github/ISSUE_TEMPLATE.md
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
<!-- Please Include: -->
|
||||
- **Operating System**:
|
||||
- [ ] Windows
|
||||
- [ ] Linux/Ubuntu
|
||||
- [ ] macOS
|
||||
- **Clear steps to reproduce the issue**:
|
||||
- **Relevant error messages and/or screenshots**:
|
||||
31
.github/ISSUE_TEMPLATE/bug_report.md
vendored
31
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@@ -1,31 +0,0 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
|
||||
<!-- A clear and concise description of what the bug is. -->
|
||||
|
||||
**To Reproduce**
|
||||
|
||||
<!-- Clear steps to reproduce the issue. -->
|
||||
|
||||
**Expected behavior**
|
||||
|
||||
<!-- A clear and concise description of what you expected to happen. -->
|
||||
|
||||
**Screenshots**
|
||||
|
||||
<!-- If applicable, add screenshots to help explain your problem. -->
|
||||
|
||||
**Desktop (please complete the following information):**
|
||||
|
||||
- Operating System:
|
||||
<!-- (Platform and Version) e.g. macOS 10.13.6 / Windows 10 (1803) / Ubuntu 18.04 x64 -->
|
||||
- Zulip Desktop Version:
|
||||
<!-- e.g. 5.2.0 -->
|
||||
|
||||
**Additional context**
|
||||
|
||||
<!-- Add any other context about the problem here. -->
|
||||
4
.github/ISSUE_TEMPLATE/custom.md
vendored
4
.github/ISSUE_TEMPLATE/custom.md
vendored
@@ -1,4 +0,0 @@
|
||||
---
|
||||
name: Custom issue template
|
||||
about: Describe this issue template's purpose here.
|
||||
---
|
||||
20
.github/ISSUE_TEMPLATE/feature_request.md
vendored
20
.github/ISSUE_TEMPLATE/feature_request.md
vendored
@@ -1,20 +0,0 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
---
|
||||
|
||||
**Problem Description**
|
||||
|
||||
<!-- Please add a clear and concise description of what the problem is. -->
|
||||
|
||||
**Proposed Solution**
|
||||
|
||||
<!-- Describe the solution you'd like in a clear and concise manner -->
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
|
||||
<!-- A clear and concise description of any alternative solutions or features you've considered. -->
|
||||
|
||||
**Additional context**
|
||||
|
||||
<!-- Add any other context or screenshots about the feature request here. -->
|
||||
55
.github/PULL_REQUEST_TEMPLATE.md
vendored
55
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -1,49 +1,16 @@
|
||||
<!-- Describe your pull request here.-->
|
||||
|
||||
Fixes: <!-- Issue link, or clear description.-->
|
||||
|
||||
<!-- If the PR makes UI changes, always include one or more still screenshots to demonstrate your changes. If it seems helpful, add a screen capture of the new functionality as well.
|
||||
|
||||
Tooling tips: https://zulip.readthedocs.io/en/latest/tutorials/screenshot-and-gif-software.html
|
||||
---
|
||||
<!--
|
||||
Remove the fields that are not appropriate
|
||||
Please include:
|
||||
-->
|
||||
|
||||
**Screenshots and screen captures:**
|
||||
**What's this PR do?**
|
||||
|
||||
**Platforms this PR was tested on:**
|
||||
**Any background context you want to provide?**
|
||||
|
||||
- [ ] Windows
|
||||
- [ ] macOS
|
||||
- [ ] Linux (specify distro)
|
||||
**Screenshots?**
|
||||
|
||||
<details>
|
||||
<summary>Self-review checklist</summary>
|
||||
|
||||
<!-- Prior to submitting a PR, follow our step-by-step guide to review your own code:
|
||||
https://zulip.readthedocs.io/en/latest/contributing/code-reviewing.html#how-to-review-code -->
|
||||
|
||||
<!-- Once you create the PR, check off all the steps below that you have completed.
|
||||
If any of these steps are not relevant or you have not completed, leave them unchecked.-->
|
||||
|
||||
- [ ] [Self-reviewed](https://zulip.readthedocs.io/en/latest/contributing/code-reviewing.html#how-to-review-code) the changes for clarity and maintainability
|
||||
(variable names, code reuse, readability, etc.).
|
||||
|
||||
Communicate decisions, questions, and potential concerns.
|
||||
|
||||
- [ ] Explains differences from previous plans (e.g., issue description).
|
||||
- [ ] Highlights technical choices and bugs encountered.
|
||||
- [ ] Calls out remaining decisions and concerns.
|
||||
- [ ] Automated tests verify logic where appropriate.
|
||||
|
||||
Individual commits are ready for review (see [commit discipline](https://zulip.readthedocs.io/en/latest/contributing/commit-discipline.html)).
|
||||
|
||||
- [ ] Each commit is a coherent idea.
|
||||
- [ ] Commit message(s) explain reasoning and motivation for changes.
|
||||
|
||||
Completed manual review and testing of the following:
|
||||
|
||||
- [ ] Visual appearance of the changes.
|
||||
- [ ] Responsiveness and internationalization.
|
||||
- [ ] Strings and tooltips.
|
||||
- [ ] End-to-end functionality of buttons, interactions and flows.
|
||||
- [ ] Corner cases, error conditions, and easily imagined bugs.
|
||||
</details>
|
||||
**You have tested this PR on:**
|
||||
- [ ] Windows
|
||||
- [ ] Linux/Ubuntu
|
||||
- [ ] macOS
|
||||
|
||||
18
.github/workflows/node.js.yml
vendored
18
.github/workflows/node.js.yml
vendored
@@ -1,18 +0,0 @@
|
||||
name: Node.js CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
pull_request:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: lts/*
|
||||
- uses: actions/checkout@v4
|
||||
- run: npm ci
|
||||
- run: npm test
|
||||
10
.gitignore
vendored
10
.gitignore
vendored
@@ -1,12 +1,11 @@
|
||||
# Dependency directory
|
||||
/node_modules/
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# npm cache directory
|
||||
.npm
|
||||
|
||||
# Compiled binary build directory
|
||||
/dist/
|
||||
/dist-electron/
|
||||
dist/
|
||||
|
||||
#snap generated files
|
||||
snap/parts
|
||||
@@ -37,3 +36,6 @@ config.gypi
|
||||
# tests/package.json
|
||||
|
||||
.python-version
|
||||
|
||||
# Ignore all the typescript compiled files
|
||||
app/**/*.js
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
{
|
||||
"tagname-lowercase": true,
|
||||
"attr-lowercase": true,
|
||||
"attr-value-double-quotes": true,
|
||||
"attr-value-not-empty": false,
|
||||
"attr-no-duplication": true,
|
||||
"doctype-first": true,
|
||||
"tag-pair": true,
|
||||
"empty-tag-not-self-closed": true,
|
||||
"spec-char-escape": true,
|
||||
"id-unique": true,
|
||||
"src-not-empty": true,
|
||||
@@ -12,8 +17,9 @@
|
||||
"style-disabled": false,
|
||||
"inline-style-disabled": false,
|
||||
"inline-script-disabled": false,
|
||||
"space-tab-mixed-disabled": "space4",
|
||||
"id-class-ad-disabled": false,
|
||||
"href-abs-or-rel": false,
|
||||
"attr-unsafe-chars": true,
|
||||
"head-script-disabled": true
|
||||
}
|
||||
}
|
||||
5
.mailmap
5
.mailmap
@@ -1,5 +0,0 @@
|
||||
Anders Kaseorg <anders@zulip.com> <anders@zulipchat.com>
|
||||
Rishi Gupta <rishig@zulip.com> <rishig@zulipchat.com>
|
||||
Rishi Gupta <rishig@zulip.com> <rishig@users.noreply.github.com>
|
||||
Tim Abbott <tabbott@zulip.com> <tabbott@zulipchat.com>
|
||||
Tim Abbott <tabbott@zulip.com> <tabbott@mit.edu>
|
||||
1
.node-version
Normal file
1
.node-version
Normal file
@@ -0,0 +1 @@
|
||||
6.9.4
|
||||
@@ -1,3 +0,0 @@
|
||||
/dist
|
||||
/dist-electron
|
||||
/public/translations/*.json
|
||||
77
.stylelintrc
77
.stylelintrc
@@ -1,12 +1,67 @@
|
||||
{
|
||||
"extends": ["stylelint-config-standard"],
|
||||
"rules": {
|
||||
"color-named": "never",
|
||||
"color-no-hex": true,
|
||||
"font-family-no-missing-generic-family-keyword": [
|
||||
true,
|
||||
{"ignoreFontFamilies": ["Material Icons"]}
|
||||
],
|
||||
"selector-type-no-unknown": [true, {"ignoreTypes": ["webview"]}]
|
||||
}
|
||||
}
|
||||
"rules": {
|
||||
# Stylistic rules for CSS.
|
||||
"function-comma-space-after": "always",
|
||||
"function-comma-space-before": "never",
|
||||
"function-max-empty-lines": 0,
|
||||
"function-whitespace-after": "always",
|
||||
|
||||
"value-keyword-case": "lower",
|
||||
"value-list-comma-newline-after": "always-multi-line",
|
||||
"value-list-comma-space-after": "always-single-line",
|
||||
"value-list-comma-space-before": "never",
|
||||
"value-list-max-empty-lines": 0,
|
||||
|
||||
"unit-case": "lower",
|
||||
"property-case": "lower",
|
||||
"color-hex-case": "lower",
|
||||
|
||||
"declaration-bang-space-before": "always",
|
||||
"declaration-colon-newline-after": "always-multi-line",
|
||||
"declaration-colon-space-after": "always-single-line",
|
||||
"declaration-colon-space-before": "never",
|
||||
"declaration-block-semicolon-newline-after": "always",
|
||||
"declaration-block-semicolon-space-before": "never",
|
||||
"declaration-block-trailing-semicolon": "always",
|
||||
|
||||
"block-closing-brace-empty-line-before": "never",
|
||||
"block-closing-brace-newline-after": "always",
|
||||
"block-closing-brace-newline-before": "always",
|
||||
"block-opening-brace-newline-after": "always",
|
||||
"block-opening-brace-space-before": "always",
|
||||
|
||||
"selector-attribute-brackets-space-inside": "never",
|
||||
"selector-attribute-operator-space-after": "never",
|
||||
"selector-attribute-operator-space-before": "never",
|
||||
"selector-combinator-space-after": "always",
|
||||
"selector-combinator-space-before": "always",
|
||||
"selector-descendant-combinator-no-non-space": true,
|
||||
"selector-pseudo-class-parentheses-space-inside": "never",
|
||||
"selector-pseudo-element-case": "lower",
|
||||
"selector-pseudo-element-colon-notation": "double",
|
||||
"selector-type-case": "lower",
|
||||
"selector-list-comma-newline-after": "always",
|
||||
"selector-list-comma-space-before": "never",
|
||||
|
||||
"media-feature-colon-space-after": "always",
|
||||
"media-feature-colon-space-before": "never",
|
||||
"media-feature-name-case": "lower",
|
||||
"media-feature-parentheses-space-inside": "never",
|
||||
"media-feature-range-operator-space-after": "always",
|
||||
"media-feature-range-operator-space-before": "always",
|
||||
"media-query-list-comma-newline-after": "always",
|
||||
"media-query-list-comma-space-before": "never",
|
||||
|
||||
"at-rule-name-case": "lower",
|
||||
"at-rule-name-space-after": "always",
|
||||
"at-rule-semicolon-newline-after": "always",
|
||||
"at-rule-semicolon-space-before": "never",
|
||||
|
||||
"comment-whitespace-inside": "always",
|
||||
"indentation": 4,
|
||||
|
||||
# Limit language features
|
||||
"color-no-hex": true,
|
||||
"color-named": "never",
|
||||
}
|
||||
}
|
||||
37
.travis.yml
Normal file
37
.travis.yml
Normal file
@@ -0,0 +1,37 @@
|
||||
sudo: required
|
||||
dist: trusty
|
||||
|
||||
os:
|
||||
- osx
|
||||
- linux
|
||||
|
||||
addons:
|
||||
apt:
|
||||
packages:
|
||||
- build-essential
|
||||
- libxext-dev
|
||||
- libxtst-dev
|
||||
- libxkbfile-dev
|
||||
|
||||
language: node_js
|
||||
node_js:
|
||||
- '8'
|
||||
|
||||
before_install:
|
||||
- ./scripts/travis-xvfb.sh
|
||||
- npm install -g gulp
|
||||
- npm install
|
||||
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
- app/node_modules
|
||||
|
||||
script:
|
||||
- npm run travis
|
||||
notifications:
|
||||
webhooks:
|
||||
urls:
|
||||
- https://zulip.org/zulipbot/travis
|
||||
on_success: always
|
||||
on_failure: always
|
||||
@@ -10,12 +10,11 @@ Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If yo
|
||||
|
||||
## Community
|
||||
|
||||
- The whole Zulip documentation, such as setting up a development environment, setting up with the Zulip web app project, and testing, can be read [here](https://zulip.readthedocs.io).
|
||||
* The whole Zulip documentation, such as setting up a development environment, setting up with the Zulip webapp project, and testing, can be read [here](https://zulip.readthedocs.io).
|
||||
|
||||
- If you have any questions regarding zulip-desktop, open an [issue](https://github.com/zulip/zulip-desktop/issues/new/) or ask it on [chat.zulip.org](https://chat.zulip.org/#narrow/stream/16-desktop).
|
||||
* If you have any questions regarding zulip-desktop, open an [issue](https://github.com/zulip/zulip-desktop/issues/new/) or ask it on [chat.zulip.org](https://chat.zulip.org/#narrow/stream/16-desktop).
|
||||
|
||||
## Issue
|
||||
|
||||
Ensure the bug was not already reported by searching on GitHub under [issues](https://github.com/zulip/zulip-desktop/issues). If you're unable to find an open issue addressing the bug, open a [new issue](https://github.com/zulip/zulip-desktop/issues/new).
|
||||
|
||||
The [zulipbot](https://github.com/zulip/zulipbot) helps to claim an issue by commenting the following in the comment section: "**@zulipbot** claim". **@zulipbot** will assign you to the issue and label the issue as **in progress**. For more details, check out [**@zulipbot**](https://github.com/zulip/zulipbot).
|
||||
@@ -23,29 +22,26 @@ The [zulipbot](https://github.com/zulip/zulipbot) helps to claim an issue by com
|
||||
Please pay attention to the following points while opening an issue.
|
||||
|
||||
### Does it happen on web browsers? (especially Chrome)
|
||||
|
||||
Zulip's desktop client is based on Electron, which integrates the Chrome engine within a standalone application.
|
||||
If the problem you encounter can be reproduced on web browsers, it may be an issue with [Zulip web app](https://github.com/zulip/zulip).
|
||||
|
||||
### Write detailed information
|
||||
|
||||
Detailed information is very helpful to understand an issue.
|
||||
|
||||
For example:
|
||||
* How to reproduce the issue, step-by-step.
|
||||
* The expected behavior (or what is wrong).
|
||||
* Screenshots for GUI issues.
|
||||
* The application version.
|
||||
* The operating system.
|
||||
* The Zulip-Desktop version.
|
||||
|
||||
- How to reproduce the issue, step-by-step.
|
||||
- The expected behavior (or what is wrong).
|
||||
- Screenshots for GUI issues.
|
||||
- The application version.
|
||||
- The operating system.
|
||||
- The Zulip-Desktop version.
|
||||
|
||||
## Pull Requests
|
||||
|
||||
Pull Requests are always welcome.
|
||||
|
||||
1. When you edit the code, please run `npm run test` to check the formatting of your code before you `git commit`.
|
||||
2. Ensure the PR description clearly describes the problem and solution. It should include:
|
||||
- The operating system on which you tested.
|
||||
- The Zulip-Desktop version on which you tested.
|
||||
- The relevant issue number, if applicable.
|
||||
* The operating system on which you tested.
|
||||
* The Zulip-Desktop version on which you tested.
|
||||
* The relevant issue number, if applicable.
|
||||
|
||||
29
README.md
29
README.md
@@ -1,33 +1,29 @@
|
||||
# Zulip Desktop Client
|
||||
|
||||
[](https://github.com/zulip/zulip-desktop/actions/workflows/node.js.yml?query=branch%3Amain)
|
||||
[](https://ci.appveyor.com/project/zulip/zulip-desktop/branch/main)
|
||||
[](https://travis-ci.org/zulip/zulip-desktop)
|
||||
[](https://ci.appveyor.com/project/zulip/zulip-desktop/branch/master)
|
||||
[](https://github.com/sindresorhus/xo)
|
||||
[](https://chat.zulip.org)
|
||||
|
||||
Desktop client for Zulip. Available for Mac, Linux, and Windows.
|
||||
|
||||
|
||||
|
||||
<img src="http://i.imgur.com/ChzTq4F.png"/>
|
||||
|
||||
# Download
|
||||
|
||||
Please see the [installation guide](https://zulip.com/help/desktop-app-install-guide).
|
||||
Please see the [installation guide](https://zulipchat.com/help/desktop-app-install-guide).
|
||||
|
||||
# Features
|
||||
|
||||
- Sign in to multiple organizations
|
||||
- Desktop notifications with inline reply
|
||||
- Tray/dock integration
|
||||
- Multi-language spell checker
|
||||
- Automatic updates
|
||||
* Sign in to multiple organizations
|
||||
* Desktop notifications with inline reply
|
||||
* Tray/dock integration
|
||||
* Multi-language spell checker
|
||||
* Automatic updates
|
||||
|
||||
# Reporting issues
|
||||
|
||||
This desktop client shares most of its code with the Zulip web app.
|
||||
This desktop client shares most of its code with the Zulip webapp.
|
||||
Issues in an individual organization's Zulip window should be reported
|
||||
in the [Zulip server and web app
|
||||
project](https://github.com/zulip/zulip/issues/new). Other
|
||||
in the [Zulip server and webapp
|
||||
project](https://github.com/zulip/zulip/issues/new). Other
|
||||
issues in the desktop app and its settings should be reported [in this
|
||||
project](https://github.com/zulip/zulip-desktop/issues/new).
|
||||
|
||||
@@ -37,5 +33,4 @@ First, join us on the [Zulip community server](https://zulip.readthedocs.io/en/l
|
||||
Also see our [contribution guidelines](./CONTRIBUTING.md) and our [development guide](./development.md).
|
||||
|
||||
# License
|
||||
|
||||
Released under the [Apache-2.0](./LICENSE) license.
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
import {z} from "zod";
|
||||
|
||||
export const dndSettingsSchemata = {
|
||||
showNotification: z.boolean(),
|
||||
silent: z.boolean(),
|
||||
flashTaskbarOnMessage: z.boolean(),
|
||||
};
|
||||
|
||||
export const configSchemata = {
|
||||
...dndSettingsSchemata,
|
||||
appLanguage: z.string().nullable(),
|
||||
autoHideMenubar: z.boolean(),
|
||||
autoUpdate: z.boolean(),
|
||||
badgeOption: z.boolean(),
|
||||
betaUpdate: z.boolean(),
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
customCSS: z.string().or(z.literal(false)).nullable(),
|
||||
dnd: z.boolean(),
|
||||
dndPreviousSettings: z.object(dndSettingsSchemata).partial(),
|
||||
dockBouncing: z.boolean(),
|
||||
downloadsPath: z.string(),
|
||||
enableSpellchecker: z.boolean(),
|
||||
errorReporting: z.boolean(),
|
||||
lastActiveTab: z.number(),
|
||||
promptDownload: z.boolean(),
|
||||
proxyBypass: z.string(),
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
proxyPAC: z.string(),
|
||||
proxyRules: z.string(),
|
||||
quitOnClose: z.boolean(),
|
||||
showSidebar: z.boolean(),
|
||||
spellcheckerLanguages: z.string().array().nullable(),
|
||||
startAtLogin: z.boolean(),
|
||||
startMinimized: z.boolean(),
|
||||
trayIcon: z.boolean(),
|
||||
useManualProxy: z.boolean(),
|
||||
useProxy: z.boolean(),
|
||||
useSystemProxy: z.boolean(),
|
||||
};
|
||||
export type ConfigSchemata = typeof configSchemata;
|
||||
|
||||
export const enterpriseConfigSchemata = {
|
||||
...configSchemata,
|
||||
presetOrganizations: z.string().array(),
|
||||
};
|
||||
@@ -1,106 +0,0 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
import * as Sentry from "@sentry/core";
|
||||
import {JsonDB} from "node-json-db";
|
||||
import {DataError} from "node-json-db/dist/lib/Errors.js";
|
||||
import type {z} from "zod";
|
||||
import {app, dialog} from "zulip:remote";
|
||||
|
||||
import {type ConfigSchemata, configSchemata} from "./config-schemata.ts";
|
||||
import * as EnterpriseUtil from "./enterprise-util.ts";
|
||||
import Logger from "./logger-util.ts";
|
||||
|
||||
export type Config = {
|
||||
[Key in keyof ConfigSchemata]: z.output<ConfigSchemata[Key]>;
|
||||
};
|
||||
|
||||
const logger = new Logger({
|
||||
file: "config-util.log",
|
||||
});
|
||||
|
||||
let database: JsonDB;
|
||||
|
||||
reloadDatabase();
|
||||
|
||||
export function getConfigItem<Key extends keyof Config>(
|
||||
key: Key,
|
||||
defaultValue: Config[Key],
|
||||
): z.output<ConfigSchemata[Key]> {
|
||||
try {
|
||||
database.reload();
|
||||
} catch (error: unknown) {
|
||||
logger.error("Error while reloading settings.json: ");
|
||||
logger.error(error);
|
||||
}
|
||||
|
||||
try {
|
||||
const typedSchemata: {
|
||||
[Key in keyof Config]: z.ZodType<
|
||||
z.output<ConfigSchemata[Key]>,
|
||||
z.input<ConfigSchemata[Key]>
|
||||
>;
|
||||
} = configSchemata; // https://github.com/colinhacks/zod/issues/5154
|
||||
return typedSchemata[key].parse(database.getObject<unknown>(`/${key}`));
|
||||
} catch (error: unknown) {
|
||||
if (!(error instanceof DataError)) throw error;
|
||||
setConfigItem(key, defaultValue);
|
||||
return defaultValue;
|
||||
}
|
||||
}
|
||||
|
||||
// This function returns whether a key exists in the configuration file (settings.json)
|
||||
export function isConfigItemExists(key: string): boolean {
|
||||
try {
|
||||
database.reload();
|
||||
} catch (error: unknown) {
|
||||
logger.error("Error while reloading settings.json: ");
|
||||
logger.error(error);
|
||||
}
|
||||
|
||||
return database.exists(`/${key}`);
|
||||
}
|
||||
|
||||
export function setConfigItem<Key extends keyof Config>(
|
||||
key: Key,
|
||||
value: Config[Key],
|
||||
override?: boolean,
|
||||
): void {
|
||||
if (EnterpriseUtil.configItemExists(key) && !override) {
|
||||
// If item is in global config and we're not trying to override
|
||||
return;
|
||||
}
|
||||
|
||||
configSchemata[key].parse(value);
|
||||
database.push(`/${key}`, value, true);
|
||||
database.save();
|
||||
}
|
||||
|
||||
export function removeConfigItem(key: string): void {
|
||||
database.delete(`/${key}`);
|
||||
database.save();
|
||||
}
|
||||
|
||||
function reloadDatabase(): void {
|
||||
const settingsJsonPath = path.join(
|
||||
app.getPath("userData"),
|
||||
"/config/settings.json",
|
||||
);
|
||||
try {
|
||||
const file = fs.readFileSync(settingsJsonPath, "utf8");
|
||||
JSON.parse(file);
|
||||
} catch (error: unknown) {
|
||||
if (fs.existsSync(settingsJsonPath)) {
|
||||
fs.unlinkSync(settingsJsonPath);
|
||||
dialog.showErrorBox(
|
||||
"Error saving settings",
|
||||
"We encountered an error while saving the settings.",
|
||||
);
|
||||
logger.error("Error while JSON parsing settings.json: ");
|
||||
logger.error(error);
|
||||
Sentry.captureException(error);
|
||||
}
|
||||
}
|
||||
|
||||
database = new JsonDB(settingsJsonPath, true, true);
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
import fs from "node:fs";
|
||||
|
||||
import {app} from "zulip:remote";
|
||||
|
||||
let setupCompleted = false;
|
||||
|
||||
const zulipDirectory = app.getPath("userData");
|
||||
const logDirectory = `${zulipDirectory}/Logs/`;
|
||||
const configDirectory = `${zulipDirectory}/config/`;
|
||||
export const initSetUp = (): void => {
|
||||
// If it is the first time the app is running
|
||||
// create zulip dir in userData folder to
|
||||
// avoid errors
|
||||
if (!setupCompleted) {
|
||||
if (!fs.existsSync(zulipDirectory)) {
|
||||
fs.mkdirSync(zulipDirectory);
|
||||
}
|
||||
|
||||
if (!fs.existsSync(logDirectory)) {
|
||||
fs.mkdirSync(logDirectory);
|
||||
}
|
||||
|
||||
// Migrate config files from app data folder to config folder inside app
|
||||
// data folder. This will be done once when a user updates to the new version.
|
||||
if (!fs.existsSync(configDirectory)) {
|
||||
fs.mkdirSync(configDirectory);
|
||||
const domainJson = `${zulipDirectory}/domain.json`;
|
||||
const settingsJson = `${zulipDirectory}/settings.json`;
|
||||
const updatesJson = `${zulipDirectory}/updates.json`;
|
||||
const windowStateJson = `${zulipDirectory}/window-state.json`;
|
||||
const configData = [
|
||||
{
|
||||
path: domainJson,
|
||||
fileName: "domain.json",
|
||||
},
|
||||
{
|
||||
path: settingsJson,
|
||||
fileName: "settings.json",
|
||||
},
|
||||
{
|
||||
path: updatesJson,
|
||||
fileName: "updates.json",
|
||||
},
|
||||
];
|
||||
for (const data of configData) {
|
||||
if (fs.existsSync(data.path)) {
|
||||
fs.copyFileSync(data.path, configDirectory + data.fileName);
|
||||
fs.unlinkSync(data.path);
|
||||
}
|
||||
}
|
||||
|
||||
// `window-state.json` is only deleted not moved, as the electron-window-state
|
||||
// package will recreate the file in the config folder.
|
||||
if (fs.existsSync(windowStateJson)) {
|
||||
fs.unlinkSync(windowStateJson);
|
||||
}
|
||||
}
|
||||
|
||||
setupCompleted = true;
|
||||
}
|
||||
};
|
||||
@@ -1,60 +0,0 @@
|
||||
import process from "node:process";
|
||||
|
||||
import type {z} from "zod";
|
||||
|
||||
import type {dndSettingsSchemata} from "./config-schemata.ts";
|
||||
import * as ConfigUtil from "./config-util.ts";
|
||||
|
||||
export type DndSettings = {
|
||||
[Key in keyof typeof dndSettingsSchemata]: z.output<
|
||||
(typeof dndSettingsSchemata)[Key]
|
||||
>;
|
||||
};
|
||||
|
||||
type SettingName = keyof DndSettings;
|
||||
|
||||
type Toggle = {
|
||||
dnd: boolean;
|
||||
newSettings: Partial<DndSettings>;
|
||||
};
|
||||
|
||||
export function toggle(): Toggle {
|
||||
const dnd = !ConfigUtil.getConfigItem("dnd", false);
|
||||
const dndSettingList: SettingName[] = ["showNotification", "silent"];
|
||||
if (process.platform === "win32") {
|
||||
dndSettingList.push("flashTaskbarOnMessage");
|
||||
}
|
||||
|
||||
let newSettings: Partial<DndSettings>;
|
||||
if (dnd) {
|
||||
const oldSettings: Partial<DndSettings> = {};
|
||||
newSettings = {};
|
||||
|
||||
// Iterate through the dndSettingList.
|
||||
for (const settingName of dndSettingList) {
|
||||
// Store the current value of setting.
|
||||
oldSettings[settingName] = ConfigUtil.getConfigItem(
|
||||
settingName,
|
||||
settingName !== "silent",
|
||||
);
|
||||
// New value of setting.
|
||||
newSettings[settingName] = settingName === "silent";
|
||||
}
|
||||
|
||||
// Store old value in oldSettings.
|
||||
ConfigUtil.setConfigItem("dndPreviousSettings", oldSettings);
|
||||
} else {
|
||||
newSettings = ConfigUtil.getConfigItem("dndPreviousSettings", {
|
||||
showNotification: true,
|
||||
silent: false,
|
||||
...(process.platform === "win32" && {flashTaskbarOnMessage: true}),
|
||||
});
|
||||
}
|
||||
|
||||
for (const settingName of dndSettingList) {
|
||||
ConfigUtil.setConfigItem(settingName, newSettings[settingName]!);
|
||||
}
|
||||
|
||||
ConfigUtil.setConfigItem("dnd", dnd);
|
||||
return {dnd, newSettings};
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import process from "node:process";
|
||||
|
||||
import {z} from "zod";
|
||||
import {dialog} from "zulip:remote";
|
||||
|
||||
import {enterpriseConfigSchemata} from "./config-schemata.ts";
|
||||
import Logger from "./logger-util.ts";
|
||||
|
||||
type EnterpriseConfig = {
|
||||
[Key in keyof typeof enterpriseConfigSchemata]: z.output<
|
||||
(typeof enterpriseConfigSchemata)[Key]
|
||||
>;
|
||||
};
|
||||
|
||||
const logger = new Logger({
|
||||
file: "enterprise-util.log",
|
||||
});
|
||||
|
||||
let enterpriseSettings: Partial<EnterpriseConfig>;
|
||||
let configFile: boolean;
|
||||
|
||||
reloadDatabase();
|
||||
|
||||
function reloadDatabase(): void {
|
||||
let enterpriseFile = "/etc/zulip-desktop-config/global_config.json";
|
||||
if (process.platform === "win32") {
|
||||
enterpriseFile = String.raw`C:\Program Files\Zulip-Desktop-Config\global_config.json`;
|
||||
}
|
||||
|
||||
enterpriseFile = path.resolve(enterpriseFile);
|
||||
if (fs.existsSync(enterpriseFile)) {
|
||||
configFile = true;
|
||||
try {
|
||||
const file = fs.readFileSync(enterpriseFile, "utf8");
|
||||
const data: unknown = JSON.parse(file);
|
||||
enterpriseSettings = z
|
||||
.object(enterpriseConfigSchemata)
|
||||
.partial()
|
||||
.parse(data);
|
||||
} catch (error: unknown) {
|
||||
dialog.showErrorBox(
|
||||
"Error loading global_config",
|
||||
"We encountered an error while reading global_config.json, please make sure the file contains valid JSON.",
|
||||
);
|
||||
logger.log("Error while JSON parsing global_config.json: ");
|
||||
logger.log(error);
|
||||
}
|
||||
} else {
|
||||
configFile = false;
|
||||
}
|
||||
}
|
||||
|
||||
export function hasConfigFile(): boolean {
|
||||
return configFile;
|
||||
}
|
||||
|
||||
export function getConfigItem<Key extends keyof EnterpriseConfig>(
|
||||
key: Key,
|
||||
defaultValue: EnterpriseConfig[Key],
|
||||
): EnterpriseConfig[Key] {
|
||||
reloadDatabase();
|
||||
if (!configFile) {
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
const value = enterpriseSettings[key];
|
||||
return value === undefined ? defaultValue : (value as EnterpriseConfig[Key]);
|
||||
}
|
||||
|
||||
export function configItemExists(key: keyof EnterpriseConfig): boolean {
|
||||
reloadDatabase();
|
||||
if (!configFile) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return enterpriseSettings[key] !== undefined;
|
||||
}
|
||||
|
||||
export function isPresetOrg(url: string): boolean {
|
||||
if (!configFile || !configItemExists("presetOrganizations")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const presetOrgs = enterpriseSettings.presetOrganizations;
|
||||
if (!Array.isArray(presetOrgs)) {
|
||||
throw new TypeError("Expected array for presetOrgs");
|
||||
}
|
||||
|
||||
for (const org of presetOrgs) {
|
||||
if (url.includes(org)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import {htmlEscape} from "escape-goat";
|
||||
|
||||
export class Html {
|
||||
html: string;
|
||||
|
||||
constructor({html}: {html: string}) {
|
||||
this.html = html;
|
||||
}
|
||||
|
||||
join(htmls: readonly Html[]): Html {
|
||||
return new Html({html: htmls.map((html) => html.html).join(this.html)});
|
||||
}
|
||||
}
|
||||
|
||||
export function html(
|
||||
template: TemplateStringsArray,
|
||||
...values: unknown[]
|
||||
): Html {
|
||||
let html = template[0];
|
||||
for (const [index, value] of values.entries()) {
|
||||
html += value instanceof Html ? value.html : htmlEscape(String(value));
|
||||
html += template[index + 1];
|
||||
}
|
||||
|
||||
return new Html({html});
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import {shell} from "electron/common";
|
||||
import fs from "node:fs";
|
||||
import os from "node:os";
|
||||
import path from "node:path";
|
||||
|
||||
import {Html, html} from "./html.ts";
|
||||
import * as t from "./translation-util.ts";
|
||||
|
||||
export async function openBrowser(url: URL): Promise<void> {
|
||||
if (["http:", "https:", "mailto:"].includes(url.protocol)) {
|
||||
await shell.openExternal(url.href);
|
||||
} else {
|
||||
// For security, indirect links to non-whitelisted protocols
|
||||
// through a real web browser via a local HTML file.
|
||||
const directory = fs.mkdtempSync(path.join(os.tmpdir(), "zulip-redirect-"));
|
||||
const file = path.join(directory, "redirect.html");
|
||||
fs.writeFileSync(
|
||||
file,
|
||||
html`
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="Refresh" content="0; url=${url.href}" />
|
||||
<title>${t.__("Redirecting")}</title>
|
||||
<style>
|
||||
html {
|
||||
font-family: menu, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
${new Html({
|
||||
html: t.__("Opening {{{link}}}…", {
|
||||
link: html`<a href="${url.href}">${url.href}</a>`.html,
|
||||
}),
|
||||
})}
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
`.html,
|
||||
);
|
||||
await shell.openPath(file);
|
||||
setTimeout(() => {
|
||||
fs.unlinkSync(file);
|
||||
fs.rmdirSync(directory);
|
||||
}, 15_000);
|
||||
}
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
import {Console} from "node:console"; // eslint-disable-line n/prefer-global/console
|
||||
import fs from "node:fs";
|
||||
import os from "node:os";
|
||||
import process from "node:process";
|
||||
|
||||
import {app} from "zulip:remote";
|
||||
|
||||
import {initSetUp} from "./default-util.ts";
|
||||
|
||||
type LoggerOptions = {
|
||||
file?: string;
|
||||
};
|
||||
|
||||
initSetUp();
|
||||
|
||||
const logDirectory = `${app.getPath("userData")}/Logs`;
|
||||
|
||||
type Level = "log" | "debug" | "info" | "warn" | "error";
|
||||
|
||||
export default class Logger {
|
||||
nodeConsole: Console;
|
||||
|
||||
constructor(options: LoggerOptions = {}) {
|
||||
let {file = "console.log"} = options;
|
||||
|
||||
file = `${logDirectory}/${file}`;
|
||||
|
||||
// Trim log according to type of process
|
||||
if (process.type === "renderer") {
|
||||
requestIdleCallback(async () => this.trimLog(file));
|
||||
} else {
|
||||
process.nextTick(async () => this.trimLog(file));
|
||||
}
|
||||
|
||||
const fileStream = fs.createWriteStream(file, {flags: "a"});
|
||||
const nodeConsole = new Console(fileStream);
|
||||
|
||||
this.nodeConsole = nodeConsole;
|
||||
}
|
||||
|
||||
_log(type: Level, ...arguments_: unknown[]): void {
|
||||
arguments_.unshift(this.getTimestamp() + " |\t");
|
||||
arguments_.unshift(type.toUpperCase() + " |");
|
||||
this.nodeConsole[type](...arguments_);
|
||||
console[type](...arguments_);
|
||||
}
|
||||
|
||||
log(...arguments_: unknown[]): void {
|
||||
this._log("log", ...arguments_);
|
||||
}
|
||||
|
||||
debug(...arguments_: unknown[]): void {
|
||||
this._log("debug", ...arguments_);
|
||||
}
|
||||
|
||||
info(...arguments_: unknown[]): void {
|
||||
this._log("info", ...arguments_);
|
||||
}
|
||||
|
||||
warn(...arguments_: unknown[]): void {
|
||||
this._log("warn", ...arguments_);
|
||||
}
|
||||
|
||||
error(...arguments_: unknown[]): void {
|
||||
this._log("error", ...arguments_);
|
||||
}
|
||||
|
||||
getTimestamp(): string {
|
||||
const date = new Date();
|
||||
const timestamp =
|
||||
`${date.getMonth()}/${date.getDate()} ` +
|
||||
`${date.getMinutes()}:${date.getSeconds()}`;
|
||||
return timestamp;
|
||||
}
|
||||
|
||||
async trimLog(file: string): Promise<void> {
|
||||
const data = await fs.promises.readFile(file, "utf8");
|
||||
|
||||
const maxLogFileLines = 500;
|
||||
const logs = data.split(os.EOL);
|
||||
const logLength = logs.length - 1;
|
||||
|
||||
// Keep bottom maxLogFileLines of each log instance
|
||||
if (logLength > maxLogFileLines) {
|
||||
const trimmedLogs = logs.slice(logLength - maxLogFileLines);
|
||||
const toWrite = trimmedLogs.join(os.EOL);
|
||||
await fs.promises.writeFile(file, toWrite);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import * as t from "./translation-util.ts";
|
||||
|
||||
type DialogBoxError = {
|
||||
title: string;
|
||||
content: string;
|
||||
};
|
||||
|
||||
export function invalidZulipServerError(domain: string): string {
|
||||
return `${domain} does not appear to be a valid Zulip server. Make sure that
|
||||
• You can connect to that URL in a web browser.
|
||||
• If you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings.
|
||||
• It's a Zulip server. (The oldest supported version is 1.6).
|
||||
• The server has a valid certificate.
|
||||
• The SSL is correctly configured for the certificate. Check out the SSL troubleshooting guide -
|
||||
https://zulip.readthedocs.io/en/stable/production/ssl-certificates.html`;
|
||||
}
|
||||
|
||||
export function enterpriseOrgError(domains: string[]): DialogBoxError {
|
||||
let domainList = "";
|
||||
for (const domain of domains) {
|
||||
domainList += `• ${domain}\n`;
|
||||
}
|
||||
|
||||
return {
|
||||
title: t.__mf(
|
||||
"{number, plural, one {Could not add # organization} other {Could not add # organizations}}",
|
||||
{number: domains.length},
|
||||
),
|
||||
content: `${domainList}\n${t.__("Please contact your system administrator.")}`,
|
||||
};
|
||||
}
|
||||
|
||||
export function orgRemovalError(url: string): DialogBoxError {
|
||||
return {
|
||||
title: t.__("Removing {{{url}}} is a restricted operation.", {url}),
|
||||
content: t.__("Please contact your system administrator."),
|
||||
};
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import path from "node:path";
|
||||
import process from "node:process";
|
||||
import url from "node:url";
|
||||
|
||||
export const bundlePath = __dirname;
|
||||
|
||||
export const publicPath = import.meta.env.DEV
|
||||
? path.join(bundlePath, "../public")
|
||||
: bundlePath;
|
||||
|
||||
export const bundleUrl = import.meta.env.DEV
|
||||
? process.env.VITE_DEV_SERVER_URL
|
||||
: url.pathToFileURL(__dirname).href + "/";
|
||||
|
||||
export const publicUrl = bundleUrl;
|
||||
@@ -1,16 +0,0 @@
|
||||
import path from "node:path";
|
||||
|
||||
import i18n from "i18n";
|
||||
|
||||
import * as ConfigUtil from "./config-util.ts";
|
||||
import {publicPath} from "./paths.ts";
|
||||
|
||||
i18n.configure({
|
||||
directory: path.join(publicPath, "translations/"),
|
||||
updateFiles: false,
|
||||
});
|
||||
|
||||
/* Fetches the current appLocale from settings.json */
|
||||
i18n.setLocale(ConfigUtil.getConfigItem("appLanguage", "en") ?? "en");
|
||||
|
||||
export {__, __mf} from "i18n";
|
||||
@@ -1,84 +0,0 @@
|
||||
import type {DndSettings} from "./dnd-util.ts";
|
||||
import type {MenuProperties, ServerConfig} from "./types.ts";
|
||||
|
||||
export type MainMessage = {
|
||||
"clear-app-settings": () => void;
|
||||
"configure-spell-checker": () => void;
|
||||
"fetch-user-agent": () => string;
|
||||
"focus-app": () => void;
|
||||
"focus-this-webview": () => void;
|
||||
"new-clipboard-key": () => {key: Uint8Array; sig: Uint8Array};
|
||||
"permission-callback": (permissionCallbackId: number, grant: boolean) => void;
|
||||
"quit-app": () => void;
|
||||
"realm-icon-changed": (serverURL: string, iconURL: string) => void;
|
||||
"realm-name-changed": (serverURL: string, realmName: string) => void;
|
||||
"reload-full-app": () => void;
|
||||
"save-last-tab": (index: number) => void;
|
||||
"switch-server-tab": (index: number) => void;
|
||||
"toggle-app": () => void;
|
||||
"toggle-badge-option": (newValue: boolean) => void;
|
||||
"toggle-menubar": (showMenubar: boolean) => void;
|
||||
toggleAutoLauncher: (AutoLaunchValue: boolean) => void;
|
||||
"unread-count": (unreadCount: number) => void;
|
||||
"update-badge": (messageCount: number) => void;
|
||||
"update-menu": (properties: MenuProperties) => void;
|
||||
"update-taskbar-icon": (data: string, text: string) => void;
|
||||
};
|
||||
|
||||
export type MainCall = {
|
||||
"get-server-settings": (domain: string) => ServerConfig;
|
||||
"is-online": (url: string) => boolean;
|
||||
"poll-clipboard": (key: Uint8Array, sig: Uint8Array) => string | undefined;
|
||||
"save-server-icon": (iconURL: string) => string | null;
|
||||
};
|
||||
|
||||
export type RendererMessage = {
|
||||
back: () => void;
|
||||
"copy-zulip-url": () => void;
|
||||
destroytray: () => void;
|
||||
"enter-fullscreen": () => void;
|
||||
focus: () => void;
|
||||
"focus-webview-with-id": (webviewId: number) => void;
|
||||
forward: () => void;
|
||||
"hard-reload": () => void;
|
||||
"leave-fullscreen": () => void;
|
||||
"log-out": () => void;
|
||||
logout: () => void;
|
||||
"new-server": () => void;
|
||||
"open-about": () => void;
|
||||
"open-help": () => void;
|
||||
"open-network-settings": () => void;
|
||||
"open-org-tab": () => void;
|
||||
"open-settings": () => void;
|
||||
"permission-request": (
|
||||
options: {webContentsId: number | null; origin: string; permission: string},
|
||||
rendererCallbackId: number,
|
||||
) => void;
|
||||
"play-ding-sound": () => void;
|
||||
"reload-current-viewer": () => void;
|
||||
"reload-proxy": (showAlert: boolean) => void;
|
||||
"reload-viewer": () => void;
|
||||
"render-taskbar-icon": (messageCount: number) => void;
|
||||
"set-active": () => void;
|
||||
"set-idle": () => void;
|
||||
"show-keyboard-shortcuts": () => void;
|
||||
"show-notification-settings": () => void;
|
||||
"switch-server-tab": (index: number) => void;
|
||||
"tab-devtools": () => void;
|
||||
"toggle-autohide-menubar": (
|
||||
autoHideMenubar: boolean,
|
||||
updateMenu: boolean,
|
||||
) => void;
|
||||
"toggle-dnd": (state: boolean, newSettings: Partial<DndSettings>) => void;
|
||||
"toggle-sidebar": (show: boolean) => void;
|
||||
"toggle-silent": (state: boolean) => void;
|
||||
"toggle-tray": (state: boolean) => void;
|
||||
toggletray: () => void;
|
||||
tray: (argument: number) => void;
|
||||
"update-realm-icon": (serverURL: string, iconURL: string) => void;
|
||||
"update-realm-name": (serverURL: string, realmName: string) => void;
|
||||
"webview-reload": () => void;
|
||||
zoomActualSize: () => void;
|
||||
zoomIn: () => void;
|
||||
zoomOut: () => void;
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
export type MenuProperties = {
|
||||
tabs: TabData[];
|
||||
activeTabIndex?: number;
|
||||
enableMenu?: boolean;
|
||||
};
|
||||
|
||||
export type NavigationItem =
|
||||
| "General"
|
||||
| "Network"
|
||||
| "AddServer"
|
||||
| "Organizations"
|
||||
| "Shortcuts";
|
||||
|
||||
export type ServerConfig = {
|
||||
url: string;
|
||||
alias: string;
|
||||
icon: string;
|
||||
zulipVersion: string;
|
||||
zulipFeatureLevel: number;
|
||||
};
|
||||
|
||||
export type TabRole = "server" | "function";
|
||||
export type TabPage = "Settings" | "About";
|
||||
|
||||
export type TabData = {
|
||||
role: TabRole;
|
||||
page?: TabPage;
|
||||
label: string;
|
||||
index: number;
|
||||
};
|
||||
@@ -1,135 +1,106 @@
|
||||
import {shell} from "electron/common";
|
||||
import {app, dialog, session} from "electron/main";
|
||||
import process from "node:process";
|
||||
'use strict';
|
||||
import { app, dialog, shell } from 'electron';
|
||||
import { autoUpdater } from 'electron-updater';
|
||||
import { linuxUpdateNotification } from './linuxupdater'; // Required only in case of linux
|
||||
|
||||
import log from "electron-log/main";
|
||||
import {
|
||||
type UpdateDownloadedEvent,
|
||||
type UpdateInfo,
|
||||
autoUpdater,
|
||||
} from "electron-updater";
|
||||
import log = require('electron-log');
|
||||
import isDev = require('electron-is-dev');
|
||||
import ConfigUtil = require('../renderer/js/utils/config-util');
|
||||
|
||||
import * as ConfigUtil from "../common/config-util.ts";
|
||||
import * as t from "../common/translation-util.ts";
|
||||
export function appUpdater(updateFromMenu = false): void {
|
||||
// Don't initiate auto-updates in development
|
||||
if (isDev) {
|
||||
return;
|
||||
}
|
||||
|
||||
import {linuxUpdateNotification} from "./linuxupdater.ts"; // Required only in case of linux
|
||||
if (process.platform === 'linux' && !process.env.APPIMAGE) {
|
||||
linuxUpdateNotification();
|
||||
return;
|
||||
}
|
||||
|
||||
let quitting = false;
|
||||
let updateAvailable = false;
|
||||
|
||||
export function shouldQuitForUpdate(): boolean {
|
||||
return quitting;
|
||||
}
|
||||
|
||||
export async function appUpdater(updateFromMenu = false): Promise<void> {
|
||||
// Don't initiate auto-updates in development
|
||||
if (!app.isPackaged) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (process.platform === "linux" && !process.env.APPIMAGE) {
|
||||
const ses = session.fromPartition("persist:webviewsession");
|
||||
await linuxUpdateNotification(ses);
|
||||
return;
|
||||
}
|
||||
|
||||
let updateAvailable = false;
|
||||
|
||||
// Log what's happening
|
||||
const updateLogger = log.create({logId: "updates"});
|
||||
updateLogger.transports.file.fileName = "updates.log";
|
||||
updateLogger.transports.file.level = "info";
|
||||
autoUpdater.logger = updateLogger;
|
||||
|
||||
// Handle auto updates for beta/pre releases
|
||||
const isBetaUpdate = ConfigUtil.getConfigItem("betaUpdate", false);
|
||||
|
||||
autoUpdater.allowPrerelease = isBetaUpdate;
|
||||
|
||||
const eventsListenerRemove = [
|
||||
"update-available",
|
||||
"update-not-available",
|
||||
] as const;
|
||||
autoUpdater.on("update-available", async (info: UpdateInfo) => {
|
||||
if (updateFromMenu) {
|
||||
updateAvailable = true;
|
||||
|
||||
// This is to prevent removal of 'update-downloaded' and 'error' event listener.
|
||||
for (const event of eventsListenerRemove) {
|
||||
autoUpdater.removeAllListeners(event);
|
||||
}
|
||||
|
||||
await dialog.showMessageBox({
|
||||
message: t.__(
|
||||
"A new version {{{version}}} of Zulip Desktop is available.",
|
||||
{version: info.version},
|
||||
),
|
||||
detail: t.__(
|
||||
"The update will be downloaded in the background. You will be notified when it is ready to be installed.",
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
autoUpdater.on("update-not-available", async () => {
|
||||
if (updateFromMenu) {
|
||||
// Remove all autoUpdator listeners so that next time autoUpdator is manually called these
|
||||
// listeners don't trigger multiple times.
|
||||
autoUpdater.removeAllListeners();
|
||||
|
||||
await dialog.showMessageBox({
|
||||
message: t.__("No updates available."),
|
||||
detail: t.__(
|
||||
"You are running the latest version of Zulip Desktop.\nVersion: {{{version}}}",
|
||||
{version: app.getVersion()},
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
autoUpdater.on("error", async (error: Error) => {
|
||||
if (updateFromMenu) {
|
||||
// Remove all autoUpdator listeners so that next time autoUpdator is manually called these
|
||||
// listeners don't trigger multiple times.
|
||||
autoUpdater.removeAllListeners();
|
||||
|
||||
const messageText = updateAvailable
|
||||
? t.__("Unable to download the update.")
|
||||
: t.__("Unable to check for updates.");
|
||||
const link = "https://zulip.com/apps/";
|
||||
const {response} = await dialog.showMessageBox({
|
||||
type: "error",
|
||||
buttons: [t.__("Manual Download"), t.__("Cancel")],
|
||||
message: messageText,
|
||||
detail: t.__(
|
||||
"Error: {{{error}}}\n\nThe latest version of Zulip Desktop is available at:\n{{{link}}}\nCurrent version: {{{version}}}",
|
||||
{error: error.message, link, version: app.getVersion()},
|
||||
),
|
||||
});
|
||||
if (response === 0) {
|
||||
await shell.openExternal(link);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Ask the user if update is available
|
||||
autoUpdater.on("update-downloaded", async (event: UpdateDownloadedEvent) => {
|
||||
// Ask user to update the app
|
||||
const {response} = await dialog.showMessageBox({
|
||||
type: "question",
|
||||
buttons: [t.__("Install and Relaunch"), t.__("Install Later")],
|
||||
defaultId: 0,
|
||||
message: t.__("A new update {{{version}}} has been downloaded.", {
|
||||
version: event.version,
|
||||
}),
|
||||
detail: t.__(
|
||||
"It will be installed the next time you restart the application.",
|
||||
),
|
||||
});
|
||||
if (response === 0) {
|
||||
quitting = true;
|
||||
autoUpdater.quitAndInstall();
|
||||
}
|
||||
});
|
||||
// Init for updates
|
||||
await autoUpdater.checkForUpdates();
|
||||
// Create Logs directory
|
||||
const LogsDir = `${app.getPath('userData')}/Logs`;
|
||||
|
||||
// Log whats happening
|
||||
log.transports.file.file = `${LogsDir}/updates.log`;
|
||||
log.transports.file.level = 'info';
|
||||
autoUpdater.logger = log;
|
||||
|
||||
// Handle auto updates for beta/pre releases
|
||||
const isBetaUpdate = ConfigUtil.getConfigItem('betaUpdate');
|
||||
|
||||
autoUpdater.allowPrerelease = isBetaUpdate || false;
|
||||
|
||||
const eventsListenerRemove = ['update-available', 'update-not-available'];
|
||||
autoUpdater.on('update-available', info => {
|
||||
if (updateFromMenu) {
|
||||
dialog.showMessageBox({
|
||||
message: `A new version ${info.version}, of Zulip Desktop is available`,
|
||||
detail: 'The update will be downloaded in the background. You will be notified when it is ready to be installed.'
|
||||
});
|
||||
|
||||
updateAvailable = true;
|
||||
|
||||
// This is to prevent removal of 'update-downloaded' and 'error' event listener.
|
||||
eventsListenerRemove.forEach(event => {
|
||||
autoUpdater.removeAllListeners(event);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
autoUpdater.on('update-not-available', () => {
|
||||
if (updateFromMenu) {
|
||||
dialog.showMessageBox({
|
||||
message: 'No updates available',
|
||||
detail: `You are running the latest version of Zulip Desktop.\nVersion: ${app.getVersion()}`
|
||||
});
|
||||
// Remove all autoUpdator listeners so that next time autoUpdator is manually called these
|
||||
// listeners don't trigger multiple times.
|
||||
autoUpdater.removeAllListeners();
|
||||
}
|
||||
});
|
||||
|
||||
autoUpdater.on('error', error => {
|
||||
if (updateFromMenu) {
|
||||
const messageText = (updateAvailable) ? ('Unable to download the updates') : ('Unable to check for updates');
|
||||
dialog.showMessageBox({
|
||||
type: 'error',
|
||||
buttons: ['Manual Download', 'Cancel'],
|
||||
message: messageText,
|
||||
detail: (error).toString() + `\n\nThe latest version of Zulip Desktop is available at -\nhttps://zulipchat.com/apps/.\n
|
||||
Current Version: ${app.getVersion()}`
|
||||
}, response => {
|
||||
if (response === 0) {
|
||||
shell.openExternal('https://zulipchat.com/apps/');
|
||||
}
|
||||
});
|
||||
// Remove all autoUpdator listeners so that next time autoUpdator is manually called these
|
||||
// listeners don't trigger multiple times.
|
||||
autoUpdater.removeAllListeners();
|
||||
}
|
||||
});
|
||||
|
||||
// Ask the user if update is available
|
||||
autoUpdater.on('update-downloaded', event => {
|
||||
// Ask user to update the app
|
||||
dialog.showMessageBox({
|
||||
type: 'question',
|
||||
buttons: ['Install and Relaunch', 'Install Later'],
|
||||
defaultId: 0,
|
||||
message: `A new update ${event.version} has been downloaded`,
|
||||
detail: 'It will be installed the next time you restart the application'
|
||||
}, response => {
|
||||
if (response === 0) {
|
||||
setTimeout(() => {
|
||||
autoUpdater.quitAndInstall();
|
||||
// force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
|
||||
app.quit();
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
});
|
||||
// Init for updates
|
||||
autoUpdater.checkForUpdates();
|
||||
}
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
import {nativeImage} from "electron/common";
|
||||
import {type BrowserWindow, app} from "electron/main";
|
||||
import process from "node:process";
|
||||
|
||||
import * as ConfigUtil from "../common/config-util.ts";
|
||||
|
||||
import {send} from "./typed-ipc-main.ts";
|
||||
|
||||
function showBadgeCount(messageCount: number, mainWindow: BrowserWindow): void {
|
||||
if (process.platform === "win32") {
|
||||
updateOverlayIcon(messageCount, mainWindow);
|
||||
} else {
|
||||
app.badgeCount = messageCount;
|
||||
}
|
||||
}
|
||||
|
||||
function hideBadgeCount(mainWindow: BrowserWindow): void {
|
||||
if (process.platform === "win32") {
|
||||
mainWindow.setOverlayIcon(null, "");
|
||||
} else {
|
||||
app.badgeCount = 0;
|
||||
}
|
||||
}
|
||||
|
||||
export function updateBadge(
|
||||
badgeCount: number,
|
||||
mainWindow: BrowserWindow,
|
||||
): void {
|
||||
if (ConfigUtil.getConfigItem("badgeOption", true)) {
|
||||
showBadgeCount(badgeCount, mainWindow);
|
||||
} else {
|
||||
hideBadgeCount(mainWindow);
|
||||
}
|
||||
}
|
||||
|
||||
function updateOverlayIcon(
|
||||
messageCount: number,
|
||||
mainWindow: BrowserWindow,
|
||||
): void {
|
||||
if (!mainWindow.isFocused()) {
|
||||
mainWindow.flashFrame(
|
||||
ConfigUtil.getConfigItem("flashTaskbarOnMessage", true),
|
||||
);
|
||||
}
|
||||
|
||||
if (messageCount === 0) {
|
||||
mainWindow.setOverlayIcon(null, "");
|
||||
} else {
|
||||
send(mainWindow.webContents, "render-taskbar-icon", messageCount);
|
||||
}
|
||||
}
|
||||
|
||||
export function updateTaskbarIcon(
|
||||
data: string,
|
||||
text: string,
|
||||
mainWindow: BrowserWindow,
|
||||
): void {
|
||||
const img = nativeImage.createFromDataURL(data);
|
||||
mainWindow.setOverlayIcon(img, text);
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
import {type Event, shell} from "electron/common";
|
||||
import {
|
||||
type HandlerDetails,
|
||||
Notification,
|
||||
type SaveDialogOptions,
|
||||
type WebContents,
|
||||
app,
|
||||
} from "electron/main";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
import * as ConfigUtil from "../common/config-util.ts";
|
||||
import * as LinkUtil from "../common/link-util.ts";
|
||||
import * as t from "../common/translation-util.ts";
|
||||
|
||||
import {send} from "./typed-ipc-main.ts";
|
||||
|
||||
function isUploadsUrl(server: string, url: URL): boolean {
|
||||
return url.origin === server && url.pathname.startsWith("/user_uploads/");
|
||||
}
|
||||
|
||||
function downloadFile({
|
||||
contents,
|
||||
url,
|
||||
downloadPath,
|
||||
completed,
|
||||
failed,
|
||||
}: {
|
||||
contents: WebContents;
|
||||
url: string;
|
||||
downloadPath: string;
|
||||
completed(filePath: string, fileName: string): Promise<void>;
|
||||
failed(state: string): void;
|
||||
}) {
|
||||
contents.downloadURL(url);
|
||||
contents.session.once("will-download", async (_event, item) => {
|
||||
if (ConfigUtil.getConfigItem("promptDownload", false)) {
|
||||
const showDialogOptions: SaveDialogOptions = {
|
||||
defaultPath: path.join(downloadPath, item.getFilename()),
|
||||
};
|
||||
item.setSaveDialogOptions(showDialogOptions);
|
||||
} else {
|
||||
const getTimeStamp = (): number => {
|
||||
const date = new Date();
|
||||
return date.getTime();
|
||||
};
|
||||
|
||||
const formatFile = (filePath: string): string => {
|
||||
const fileExtension = path.extname(filePath);
|
||||
const baseName = path.basename(filePath, fileExtension);
|
||||
return `${baseName}-${getTimeStamp()}${fileExtension}`;
|
||||
};
|
||||
|
||||
const filePath = path.join(downloadPath, item.getFilename());
|
||||
|
||||
// Update the name and path of the file if it already exists
|
||||
const updatedFilePath = path.join(downloadPath, formatFile(filePath));
|
||||
const setFilePath: string = fs.existsSync(filePath)
|
||||
? updatedFilePath
|
||||
: filePath;
|
||||
item.setSavePath(setFilePath);
|
||||
}
|
||||
|
||||
const updatedListener = (_event: Event, state: string): void => {
|
||||
switch (state) {
|
||||
case "interrupted": {
|
||||
// Can interrupted to due to network error, cancel download then
|
||||
console.log(
|
||||
"Download interrupted, cancelling and fallback to dialog download.",
|
||||
);
|
||||
item.cancel();
|
||||
break;
|
||||
}
|
||||
|
||||
case "progressing": {
|
||||
if (item.isPaused()) {
|
||||
item.cancel();
|
||||
}
|
||||
|
||||
// This event can also be used to show progress in percentage in future.
|
||||
break;
|
||||
}
|
||||
|
||||
default: {
|
||||
console.info("Unknown updated state of download item");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
item.on("updated", updatedListener);
|
||||
item.once("done", async (_event, state) => {
|
||||
if (state === "completed") {
|
||||
await completed(item.getSavePath(), path.basename(item.getSavePath()));
|
||||
} else {
|
||||
console.log("Download failed state:", state);
|
||||
failed(state);
|
||||
}
|
||||
|
||||
// To stop item for listening to updated events of this file
|
||||
item.removeListener("updated", updatedListener);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export default function handleExternalLink(
|
||||
contents: WebContents,
|
||||
details: HandlerDetails,
|
||||
mainContents: WebContents,
|
||||
): void {
|
||||
let url: URL;
|
||||
try {
|
||||
url = new URL(details.url);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
const downloadPath = ConfigUtil.getConfigItem(
|
||||
"downloadsPath",
|
||||
`${app.getPath("downloads")}`,
|
||||
);
|
||||
|
||||
if (isUploadsUrl(new URL(contents.getURL()).origin, url)) {
|
||||
downloadFile({
|
||||
contents,
|
||||
url: url.href,
|
||||
downloadPath,
|
||||
async completed(filePath: string, fileName: string) {
|
||||
const downloadNotification = new Notification({
|
||||
title: t.__("Download Complete"),
|
||||
body: t.__("Click to show {{{fileName}}} in folder", {fileName}),
|
||||
silent: true, // We'll play our own sound - ding.ogg
|
||||
});
|
||||
downloadNotification.on("click", () => {
|
||||
// Reveal file in download folder
|
||||
shell.showItemInFolder(filePath);
|
||||
});
|
||||
downloadNotification.show();
|
||||
|
||||
// Play sound to indicate download complete
|
||||
if (!ConfigUtil.getConfigItem("silent", false)) {
|
||||
send(mainContents, "play-ding-sound");
|
||||
}
|
||||
},
|
||||
failed(state: string) {
|
||||
// Automatic download failed, so show save dialog prompt and download
|
||||
// through webview
|
||||
// Only do this if it is the automatic download, otherwise show an error (so we aren't showing two save
|
||||
// prompts right after each other)
|
||||
// Check that the download is not cancelled by user
|
||||
if (state !== "cancelled") {
|
||||
if (ConfigUtil.getConfigItem("promptDownload", false)) {
|
||||
new Notification({
|
||||
title: t.__("Download Complete"),
|
||||
body: t.__("Download failed"),
|
||||
}).show();
|
||||
} else {
|
||||
contents.downloadURL(url.href);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
(async () => LinkUtil.openBrowser(url))();
|
||||
}
|
||||
}
|
||||
@@ -1,486 +1,402 @@
|
||||
import {clipboard} from "electron/common";
|
||||
import {
|
||||
BrowserWindow,
|
||||
type IpcMainEvent,
|
||||
type WebContents,
|
||||
app,
|
||||
dialog,
|
||||
powerMonitor,
|
||||
session,
|
||||
webContents,
|
||||
} from "electron/main";
|
||||
import {Buffer} from "node:buffer";
|
||||
import crypto from "node:crypto";
|
||||
import path from "node:path";
|
||||
import process from "node:process";
|
||||
'use strict';
|
||||
import { sentryInit } from '../renderer/js/utils/sentry-util';
|
||||
import { appUpdater } from './autoupdater';
|
||||
import { setAutoLaunch } from './startup';
|
||||
|
||||
import * as remoteMain from "@electron/remote/main";
|
||||
import windowStateKeeper from "electron-window-state";
|
||||
import windowStateKeeper = require('electron-window-state');
|
||||
import path = require('path');
|
||||
import fs = require('fs');
|
||||
import isDev = require('electron-is-dev');
|
||||
import electron = require('electron');
|
||||
const { app, ipcMain, session } = electron;
|
||||
|
||||
import * as ConfigUtil from "../common/config-util.ts";
|
||||
import {bundlePath, bundleUrl, publicPath} from "../common/paths.ts";
|
||||
import * as t from "../common/translation-util.ts";
|
||||
import type {RendererMessage} from "../common/typed-ipc.ts";
|
||||
import type {MenuProperties} from "../common/types.ts";
|
||||
import AppMenu = require('./menu');
|
||||
import BadgeSettings = require('../renderer/js/pages/preference/badge-settings');
|
||||
import ConfigUtil = require('../renderer/js/utils/config-util');
|
||||
import ProxyUtil = require('../renderer/js/utils/proxy-util');
|
||||
|
||||
import {appUpdater, shouldQuitForUpdate} from "./autoupdater.ts";
|
||||
import * as BadgeSettings from "./badge-settings.ts";
|
||||
import handleExternalLink from "./handle-external-link.ts";
|
||||
import * as AppMenu from "./menu.ts";
|
||||
import {_getServerSettings, _isOnline, _saveServerIcon} from "./request.ts";
|
||||
import {sentryInit} from "./sentry.ts";
|
||||
import {setAutoLaunch} from "./startup.ts";
|
||||
import {ipcMain, send} from "./typed-ipc-main.ts";
|
||||
interface PatchedGlobal extends NodeJS.Global {
|
||||
mainWindowState: windowStateKeeper.State;
|
||||
}
|
||||
|
||||
import "gatemaker/electron-setup.js"; // eslint-disable-line import-x/no-unassigned-import
|
||||
const globalPatched = global as PatchedGlobal;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
const {GDK_BACKEND} = process.env;
|
||||
|
||||
// Initialize sentry for main process
|
||||
sentryInit();
|
||||
|
||||
let mainWindowState: windowStateKeeper.State;
|
||||
// Adds debug features like hotkeys for triggering dev tools and reload
|
||||
// in development mode
|
||||
if (isDev) {
|
||||
require('electron-debug')();
|
||||
}
|
||||
|
||||
// Prevent window being garbage collected
|
||||
let mainWindow: BrowserWindow;
|
||||
let mainWindow: Electron.BrowserWindow;
|
||||
let badgeCount: number;
|
||||
|
||||
let isQuitting = false;
|
||||
|
||||
// Load this file in main window
|
||||
const mainUrl = new URL("app/renderer/main.html", bundleUrl).href;
|
||||
// Load this url in main window
|
||||
const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
|
||||
|
||||
const permissionCallbacks = new Map<number, (grant: boolean) => void>();
|
||||
let nextPermissionCallbackId = 0;
|
||||
const singleInstanceLock = app.requestSingleInstanceLock();
|
||||
if (singleInstanceLock) {
|
||||
app.on('second-instance', () => {
|
||||
if (mainWindow) {
|
||||
if (mainWindow.isMinimized()) {
|
||||
mainWindow.restore();
|
||||
}
|
||||
|
||||
const appIcon = path.join(publicPath, "resources/Icon");
|
||||
|
||||
const iconPath = (): string =>
|
||||
appIcon + (process.platform === "win32" ? ".ico" : ".png");
|
||||
|
||||
// Toggle the app window
|
||||
const toggleApp = (): void => {
|
||||
if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
|
||||
mainWindow.show();
|
||||
} else {
|
||||
mainWindow.hide();
|
||||
}
|
||||
};
|
||||
|
||||
function createMainWindow(): BrowserWindow {
|
||||
// Load the previous state with fallback to defaults
|
||||
mainWindowState = windowStateKeeper({
|
||||
defaultWidth: 1100,
|
||||
defaultHeight: 720,
|
||||
path: `${app.getPath("userData")}/config`,
|
||||
});
|
||||
|
||||
const win = new BrowserWindow({
|
||||
// This settings needs to be saved in config
|
||||
title: "Zulip",
|
||||
icon: iconPath(),
|
||||
x: mainWindowState.x,
|
||||
y: mainWindowState.y,
|
||||
width: mainWindowState.width,
|
||||
height: mainWindowState.height,
|
||||
minWidth: 500,
|
||||
minHeight: 400,
|
||||
webPreferences: {
|
||||
preload: path.join(bundlePath, "renderer.cjs"),
|
||||
sandbox: false,
|
||||
webviewTag: true,
|
||||
},
|
||||
show: false,
|
||||
});
|
||||
remoteMain.enable(win.webContents);
|
||||
|
||||
win.on("focus", () => {
|
||||
send(win.webContents, "focus");
|
||||
});
|
||||
|
||||
(async () => win.loadURL(mainUrl))();
|
||||
|
||||
// Keep the app running in background on close event
|
||||
win.on("close", (event) => {
|
||||
if (ConfigUtil.getConfigItem("quitOnClose", false)) {
|
||||
app.quit();
|
||||
}
|
||||
|
||||
if (!isQuitting && !shouldQuitForUpdate()) {
|
||||
event.preventDefault();
|
||||
|
||||
if (process.platform === "darwin") {
|
||||
if (win.isFullScreen()) {
|
||||
win.setFullScreen(false);
|
||||
win.once("leave-full-screen", () => {
|
||||
app.hide();
|
||||
});
|
||||
} else {
|
||||
app.hide();
|
||||
}
|
||||
} else {
|
||||
win.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
win.setTitle("Zulip");
|
||||
|
||||
win.on("enter-full-screen", () => {
|
||||
send(win.webContents, "enter-fullscreen");
|
||||
});
|
||||
|
||||
win.on("leave-full-screen", () => {
|
||||
send(win.webContents, "leave-fullscreen");
|
||||
});
|
||||
|
||||
// To destroy tray icon when navigate to a new URL
|
||||
win.webContents.on("will-navigate", (event) => {
|
||||
if (event) {
|
||||
send(win.webContents, "destroytray");
|
||||
}
|
||||
});
|
||||
|
||||
// Let us register listeners on the window, so we can update the state
|
||||
// automatically (the listeners will be removed when the window is closed)
|
||||
// and restore the maximized or full screen state
|
||||
mainWindowState.manage(win);
|
||||
|
||||
return win;
|
||||
mainWindow.show();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
app.quit();
|
||||
}
|
||||
|
||||
(async () => {
|
||||
if (!app.requestSingleInstanceLock()) {
|
||||
app.quit();
|
||||
return;
|
||||
}
|
||||
const APP_ICON = path.join(__dirname, '../resources', 'Icon');
|
||||
|
||||
await app.whenReady();
|
||||
const iconPath = (): string => {
|
||||
return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
|
||||
};
|
||||
|
||||
if (process.env.GDK_BACKEND !== GDK_BACKEND) {
|
||||
console.warn(
|
||||
"Reverting GDK_BACKEND to work around https://github.com/electron/electron/issues/28436",
|
||||
);
|
||||
if (GDK_BACKEND === undefined) {
|
||||
delete process.env.GDK_BACKEND;
|
||||
} else {
|
||||
process.env.GDK_BACKEND = GDK_BACKEND;
|
||||
}
|
||||
}
|
||||
function createMainWindow(): Electron.BrowserWindow {
|
||||
// Load the previous state with fallback to defaults
|
||||
const mainWindowState: windowStateKeeper.State = windowStateKeeper({
|
||||
defaultWidth: 1100,
|
||||
defaultHeight: 720,
|
||||
path: `${app.getPath('userData')}/config`
|
||||
});
|
||||
|
||||
// Used for notifications on Windows
|
||||
app.setAppUserModelId("org.zulip.zulip-electron");
|
||||
// Let's keep the window position global so that we can access it in other process
|
||||
globalPatched.mainWindowState = mainWindowState;
|
||||
|
||||
remoteMain.initialize();
|
||||
const win = new electron.BrowserWindow({
|
||||
// This settings needs to be saved in config
|
||||
title: 'Zulip',
|
||||
icon: iconPath(),
|
||||
x: mainWindowState.x,
|
||||
y: mainWindowState.y,
|
||||
width: mainWindowState.width,
|
||||
height: mainWindowState.height,
|
||||
minWidth: 300,
|
||||
minHeight: 400,
|
||||
webPreferences: {
|
||||
plugins: true,
|
||||
nodeIntegration: true,
|
||||
partition: 'persist:webviewsession'
|
||||
},
|
||||
show: false
|
||||
});
|
||||
|
||||
app.on("second-instance", () => {
|
||||
if (mainWindow) {
|
||||
if (mainWindow.isMinimized()) {
|
||||
mainWindow.restore();
|
||||
}
|
||||
win.on('focus', () => {
|
||||
win.webContents.send('focus');
|
||||
});
|
||||
|
||||
mainWindow.show();
|
||||
}
|
||||
});
|
||||
win.loadURL(mainURL);
|
||||
|
||||
ipcMain.on(
|
||||
"permission-callback",
|
||||
(event, permissionCallbackId: number, grant: boolean) => {
|
||||
permissionCallbacks.get(permissionCallbackId)?.(grant);
|
||||
permissionCallbacks.delete(permissionCallbackId);
|
||||
},
|
||||
);
|
||||
// Keep the app running in background on close event
|
||||
win.on('close', e => {
|
||||
if (ConfigUtil.getConfigItem("quitOnClose")) {
|
||||
app.quit();
|
||||
}
|
||||
if (!isQuitting) {
|
||||
e.preventDefault();
|
||||
|
||||
// This event is only available on macOS. Triggers when you click on the dock icon.
|
||||
app.on("activate", () => {
|
||||
mainWindow.show();
|
||||
});
|
||||
if (process.platform === 'darwin') {
|
||||
app.hide();
|
||||
} else {
|
||||
win.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
app.on("web-contents-created", (_event, contents: WebContents) => {
|
||||
contents.setWindowOpenHandler((details) => {
|
||||
handleExternalLink(contents, details, page);
|
||||
return {action: "deny"};
|
||||
});
|
||||
});
|
||||
win.setTitle('Zulip');
|
||||
|
||||
const ses = session.fromPartition("persist:webviewsession");
|
||||
ses.setUserAgent(`ZulipElectron/${app.getVersion()} ${ses.getUserAgent()}`);
|
||||
win.on('enter-full-screen', () => {
|
||||
win.webContents.send('enter-fullscreen');
|
||||
});
|
||||
|
||||
function configureSpellChecker() {
|
||||
const enable = ConfigUtil.getConfigItem("enableSpellchecker", true);
|
||||
if (enable && process.platform !== "darwin") {
|
||||
ses.setSpellCheckerLanguages(
|
||||
ConfigUtil.getConfigItem("spellcheckerLanguages", null) ?? [],
|
||||
);
|
||||
}
|
||||
win.on('leave-full-screen', () => {
|
||||
win.webContents.send('leave-fullscreen');
|
||||
});
|
||||
|
||||
ses.setSpellCheckerEnabled(enable);
|
||||
}
|
||||
// To destroy tray icon when navigate to a new URL
|
||||
win.webContents.on('will-navigate', e => {
|
||||
if (e) {
|
||||
win.webContents.send('destroytray');
|
||||
}
|
||||
});
|
||||
|
||||
configureSpellChecker();
|
||||
ipcMain.on("configure-spell-checker", configureSpellChecker);
|
||||
// Let us register listeners on the window, so we can update the state
|
||||
// automatically (the listeners will be removed when the window is closed)
|
||||
// and restore the maximized or full screen state
|
||||
mainWindowState.manage(win);
|
||||
|
||||
const clipboardSigKey = crypto.randomBytes(32);
|
||||
return win;
|
||||
}
|
||||
|
||||
ipcMain.on("new-clipboard-key", (event) => {
|
||||
const key = crypto.randomBytes(32);
|
||||
const hmac = crypto.createHmac("sha256", clipboardSigKey);
|
||||
hmac.update(key);
|
||||
event.returnValue = {key, sig: hmac.digest()};
|
||||
});
|
||||
// Decrease load on GPU (experimental)
|
||||
app.disableHardwareAcceleration();
|
||||
|
||||
ipcMain.handle("poll-clipboard", (event, key, sig) => {
|
||||
// Check that the key was generated here.
|
||||
const hmac = crypto.createHmac("sha256", clipboardSigKey);
|
||||
hmac.update(key);
|
||||
if (!crypto.timingSafeEqual(sig, hmac.digest())) return;
|
||||
// Temporary fix for Electron render colors differently
|
||||
// More info here - https://github.com/electron/electron/issues/10732
|
||||
app.commandLine.appendSwitch('force-color-profile', 'srgb');
|
||||
|
||||
try {
|
||||
// Check that the data on the clipboard was encrypted to the key.
|
||||
const data = Buffer.from(clipboard.readText(), "hex");
|
||||
const iv = data.subarray(0, 12);
|
||||
const ciphertext = data.subarray(12, -16);
|
||||
const authTag = data.subarray(-16);
|
||||
const decipher = crypto.createDecipheriv("aes-256-gcm", key, iv, {
|
||||
authTagLength: 16,
|
||||
});
|
||||
decipher.setAuthTag(authTag);
|
||||
return (
|
||||
decipher.update(ciphertext, undefined, "utf8") + decipher.final("utf8")
|
||||
);
|
||||
} catch {
|
||||
// If the parsing or decryption failed in any way,
|
||||
// the correct token hasn’t been copied yet; try
|
||||
// again next time.
|
||||
return undefined;
|
||||
}
|
||||
});
|
||||
// eslint-disable-next-line max-params
|
||||
app.on('certificate-error', (event: Event, _webContents: Electron.WebContents, _url: string, _error: string, _certificate: any, callback) => {
|
||||
event.preventDefault();
|
||||
callback(true);
|
||||
});
|
||||
|
||||
AppMenu.setMenu({
|
||||
tabs: [],
|
||||
});
|
||||
mainWindow = createMainWindow();
|
||||
app.on('activate', () => {
|
||||
if (!mainWindow) {
|
||||
mainWindow = createMainWindow();
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-hide menu bar on Windows + Linux
|
||||
if (process.platform !== "darwin") {
|
||||
const shouldHideMenu = ConfigUtil.getConfigItem("autoHideMenubar", false);
|
||||
mainWindow.autoHideMenuBar = shouldHideMenu;
|
||||
mainWindow.setMenuBarVisibility(!shouldHideMenu);
|
||||
}
|
||||
app.on('ready', () => {
|
||||
AppMenu.setMenu({
|
||||
tabs: []
|
||||
});
|
||||
mainWindow = createMainWindow();
|
||||
|
||||
const page = mainWindow.webContents;
|
||||
// Auto-hide menu bar on Windows + Linux
|
||||
if (process.platform !== 'darwin') {
|
||||
const shouldHideMenu = ConfigUtil.getConfigItem('autoHideMenubar') || false;
|
||||
mainWindow.setAutoHideMenuBar(shouldHideMenu);
|
||||
mainWindow.setMenuBarVisibility(!shouldHideMenu);
|
||||
}
|
||||
|
||||
page.on("dom-ready", () => {
|
||||
if (ConfigUtil.getConfigItem("startMinimized", false)) {
|
||||
mainWindow.hide();
|
||||
} else {
|
||||
mainWindow.show();
|
||||
}
|
||||
});
|
||||
// Initialize sentry for main process
|
||||
const errorReporting = ConfigUtil.getConfigItem('errorReporting');
|
||||
if (errorReporting) {
|
||||
sentryInit();
|
||||
}
|
||||
|
||||
ipcMain.on("fetch-user-agent", (event) => {
|
||||
event.returnValue = session
|
||||
.fromPartition("persist:webviewsession")
|
||||
.getUserAgent();
|
||||
});
|
||||
const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
|
||||
|
||||
ipcMain.handle("get-server-settings", async (event, domain: string) =>
|
||||
_getServerSettings(domain, ses),
|
||||
);
|
||||
if (isSystemProxy) {
|
||||
ProxyUtil.resolveSystemProxy(mainWindow);
|
||||
}
|
||||
|
||||
ipcMain.handle("save-server-icon", async (event, url: string) =>
|
||||
_saveServerIcon(url, ses),
|
||||
);
|
||||
const page = mainWindow.webContents;
|
||||
|
||||
ipcMain.handle("is-online", async (event, url: string) =>
|
||||
_isOnline(url, ses),
|
||||
);
|
||||
page.on('dom-ready', () => {
|
||||
if (ConfigUtil.getConfigItem('startMinimized')) {
|
||||
mainWindow.hide();
|
||||
} else {
|
||||
mainWindow.show();
|
||||
}
|
||||
if (!ConfigUtil.isConfigItemExists('userAgent')) {
|
||||
const userAgent = session.fromPartition('webview:persistsession').getUserAgent();
|
||||
ConfigUtil.setConfigItem('userAgent', userAgent);
|
||||
}
|
||||
});
|
||||
|
||||
page.once("did-frame-finish-load", async () => {
|
||||
// Initiate auto-updates on MacOS and Windows
|
||||
if (ConfigUtil.getConfigItem("autoUpdate", true)) {
|
||||
await appUpdater();
|
||||
}
|
||||
});
|
||||
page.once('did-frame-finish-load', () => {
|
||||
// Initiate auto-updates on MacOS and Windows
|
||||
if (ConfigUtil.getConfigItem('autoUpdate')) {
|
||||
appUpdater();
|
||||
}
|
||||
});
|
||||
|
||||
app.on(
|
||||
"certificate-error",
|
||||
(
|
||||
event,
|
||||
webContents,
|
||||
urlString,
|
||||
error,
|
||||
certificate,
|
||||
callback,
|
||||
isMainFrame,
|
||||
// eslint-disable-next-line max-params
|
||||
) => {
|
||||
if (isMainFrame) {
|
||||
const url = new URL(urlString);
|
||||
dialog.showErrorBox(
|
||||
t.__("Certificate error"),
|
||||
t.__(
|
||||
"The server presented an invalid certificate for {{{origin}}}:\n\n{{{error}}}",
|
||||
{origin: url.origin, error},
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
// Temporarily remove this event
|
||||
// electron.powerMonitor.on('resume', () => {
|
||||
// mainWindow.reload();
|
||||
// page.send('destroytray');
|
||||
// });
|
||||
|
||||
ses.setPermissionRequestHandler(
|
||||
(webContents, permission, callback, details) => {
|
||||
const {origin} = new URL(details.requestingUrl);
|
||||
const permissionCallbackId = nextPermissionCallbackId++;
|
||||
permissionCallbacks.set(permissionCallbackId, callback);
|
||||
send(
|
||||
page,
|
||||
"permission-request",
|
||||
{
|
||||
webContentsId:
|
||||
webContents.id === mainWindow.webContents.id
|
||||
? null
|
||||
: webContents.id,
|
||||
origin,
|
||||
permission,
|
||||
},
|
||||
permissionCallbackId,
|
||||
);
|
||||
},
|
||||
);
|
||||
ipcMain.on('focus-app', () => {
|
||||
mainWindow.show();
|
||||
});
|
||||
|
||||
// Temporarily remove this event
|
||||
// powerMonitor.on('resume', () => {
|
||||
// mainWindow.reload();
|
||||
// send(page, 'destroytray');
|
||||
// });
|
||||
ipcMain.on('quit-app', () => {
|
||||
app.quit();
|
||||
});
|
||||
|
||||
ipcMain.on("focus-app", () => {
|
||||
mainWindow.show();
|
||||
});
|
||||
// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
|
||||
// ipcMain.on('pdf-view', (event, url) => {
|
||||
// // Paddings for pdfWindow so that it fits into the main browserWindow
|
||||
// const paddingWidth = 55;
|
||||
// const paddingHeight = 22;
|
||||
|
||||
ipcMain.on("quit-app", () => {
|
||||
app.quit();
|
||||
});
|
||||
// // Get the config of main browserWindow
|
||||
// const mainWindowState = global.mainWindowState;
|
||||
|
||||
// Reload full app not just webview, useful in debugging
|
||||
ipcMain.on("reload-full-app", () => {
|
||||
mainWindow.reload();
|
||||
send(page, "destroytray");
|
||||
});
|
||||
// // Window to view the pdf file
|
||||
// const pdfWindow = new electron.BrowserWindow({
|
||||
// x: mainWindowState.x + paddingWidth,
|
||||
// y: mainWindowState.y + paddingHeight,
|
||||
// width: mainWindowState.width - paddingWidth,
|
||||
// height: mainWindowState.height - paddingHeight,
|
||||
// webPreferences: {
|
||||
// plugins: true,
|
||||
// partition: 'persist:webviewsession'
|
||||
// }
|
||||
// });
|
||||
// pdfWindow.loadURL(url);
|
||||
|
||||
ipcMain.on("clear-app-settings", () => {
|
||||
mainWindowState.unmanage();
|
||||
app.relaunch();
|
||||
app.exit();
|
||||
});
|
||||
// // We don't want to have the menu bar in pdf window
|
||||
// pdfWindow.setMenu(null);
|
||||
// });
|
||||
|
||||
ipcMain.on("toggle-app", () => {
|
||||
toggleApp();
|
||||
});
|
||||
// Reload full app not just webview, useful in debugging
|
||||
ipcMain.on('reload-full-app', () => {
|
||||
mainWindow.reload();
|
||||
page.send('destroytray');
|
||||
});
|
||||
|
||||
ipcMain.on("toggle-badge-option", () => {
|
||||
BadgeSettings.updateBadge(badgeCount, mainWindow);
|
||||
});
|
||||
ipcMain.on('clear-app-settings', () => {
|
||||
globalPatched.mainWindowState.unmanage();
|
||||
app.relaunch();
|
||||
app.exit();
|
||||
});
|
||||
|
||||
ipcMain.on("toggle-menubar", (_event, showMenubar: boolean) => {
|
||||
mainWindow.autoHideMenuBar = showMenubar;
|
||||
mainWindow.setMenuBarVisibility(!showMenubar);
|
||||
send(page, "toggle-autohide-menubar", showMenubar, true);
|
||||
});
|
||||
ipcMain.on('toggle-app', () => {
|
||||
if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
|
||||
mainWindow.show();
|
||||
} else {
|
||||
mainWindow.hide();
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on("update-badge", (_event, messageCount: number) => {
|
||||
badgeCount = messageCount;
|
||||
BadgeSettings.updateBadge(badgeCount, mainWindow);
|
||||
send(page, "tray", messageCount);
|
||||
});
|
||||
ipcMain.on('toggle-badge-option', () => {
|
||||
BadgeSettings.updateBadge(badgeCount, mainWindow);
|
||||
});
|
||||
|
||||
ipcMain.on("update-taskbar-icon", (_event, data: string, text: string) => {
|
||||
BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
|
||||
});
|
||||
ipcMain.on('toggle-menubar', (_event: Electron.IpcMessageEvent, showMenubar: boolean) => {
|
||||
mainWindow.setAutoHideMenuBar(showMenubar);
|
||||
mainWindow.setMenuBarVisibility(!showMenubar);
|
||||
page.send('toggle-autohide-menubar', showMenubar, true);
|
||||
});
|
||||
|
||||
ipcMain.on(
|
||||
"forward-message",
|
||||
<Channel extends keyof RendererMessage>(
|
||||
_event: IpcMainEvent,
|
||||
listener: Channel,
|
||||
...parameters: Parameters<RendererMessage[Channel]>
|
||||
) => {
|
||||
send(page, listener, ...parameters);
|
||||
},
|
||||
);
|
||||
ipcMain.on('update-badge', (_event: Electron.IpcMessageEvent, messageCount: number) => {
|
||||
badgeCount = messageCount;
|
||||
BadgeSettings.updateBadge(badgeCount, mainWindow);
|
||||
page.send('tray', messageCount);
|
||||
});
|
||||
|
||||
ipcMain.on(
|
||||
"forward-to",
|
||||
<Channel extends keyof RendererMessage>(
|
||||
_event: IpcMainEvent,
|
||||
webContentsId: number,
|
||||
listener: Channel,
|
||||
...parameters: Parameters<RendererMessage[Channel]>
|
||||
) => {
|
||||
const contents = webContents.fromId(webContentsId);
|
||||
if (contents !== undefined) {
|
||||
send(contents, listener, ...parameters);
|
||||
}
|
||||
},
|
||||
);
|
||||
ipcMain.on('update-taskbar-icon', (_event: Electron.IpcMessageEvent, data: any, text: string) => {
|
||||
BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
|
||||
});
|
||||
|
||||
ipcMain.on("update-menu", (_event, properties: MenuProperties) => {
|
||||
AppMenu.setMenu(properties);
|
||||
if (properties.activeTabIndex !== undefined) {
|
||||
const activeTab = properties.tabs[properties.activeTabIndex];
|
||||
mainWindow.setTitle(`Zulip - ${activeTab.label}`);
|
||||
}
|
||||
});
|
||||
ipcMain.on('forward-message', (_event: Electron.IpcMessageEvent, listener: any, ...params: any[]) => {
|
||||
page.send(listener, ...params);
|
||||
});
|
||||
|
||||
ipcMain.on("toggleAutoLauncher", async (_event, AutoLaunchValue: boolean) => {
|
||||
await setAutoLaunch(AutoLaunchValue);
|
||||
});
|
||||
ipcMain.on('update-menu', (_event: Electron.IpcMessageEvent, props: any) => {
|
||||
AppMenu.setMenu(props);
|
||||
const activeTab = props.tabs[props.activeTabIndex];
|
||||
if (activeTab) {
|
||||
mainWindow.setTitle(`Zulip - ${activeTab.webview.props.name}`);
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on(
|
||||
"realm-name-changed",
|
||||
(_event, serverURL: string, realmName: string) => {
|
||||
send(page, "update-realm-name", serverURL, realmName);
|
||||
},
|
||||
);
|
||||
ipcMain.on('toggleAutoLauncher', (_event: Electron.IpcMessageEvent, AutoLaunchValue: boolean) => {
|
||||
setAutoLaunch(AutoLaunchValue);
|
||||
});
|
||||
|
||||
ipcMain.on(
|
||||
"realm-icon-changed",
|
||||
(_event, serverURL: string, iconURL: string) => {
|
||||
send(page, "update-realm-icon", serverURL, iconURL);
|
||||
},
|
||||
);
|
||||
ipcMain.on('downloadFile', (_event: Electron.IpcMessageEvent, url: string, downloadPath: string) => {
|
||||
page.downloadURL(url);
|
||||
page.session.once('will-download', (_event: Event, item) => {
|
||||
const filePath = path.join(downloadPath, item.getFilename());
|
||||
|
||||
ipcMain.on("save-last-tab", (_event, index: number) => {
|
||||
ConfigUtil.setConfigItem("lastActiveTab", index);
|
||||
});
|
||||
const getTimeStamp = (): any => {
|
||||
const date = new Date();
|
||||
return date.getTime();
|
||||
};
|
||||
|
||||
ipcMain.on("focus-this-webview", (event) => {
|
||||
send(page, "focus-webview-with-id", event.sender.id);
|
||||
mainWindow.show();
|
||||
});
|
||||
const formatFile = (filePath: string): string => {
|
||||
const fileExtension = path.extname(filePath);
|
||||
const baseName = path.basename(filePath, fileExtension);
|
||||
return `${baseName}-${getTimeStamp()}${fileExtension}`;
|
||||
};
|
||||
|
||||
// Update user idle status for each realm after every 15s
|
||||
const idleCheckInterval = 15 * 1000; // 15 seconds
|
||||
setInterval(() => {
|
||||
// Set user idle if no activity in 1 second (idleThresholdSeconds)
|
||||
const idleThresholdSeconds = 1; // 1 second
|
||||
const idleState = powerMonitor.getSystemIdleState(idleThresholdSeconds);
|
||||
if (idleState === "active") {
|
||||
send(page, "set-active");
|
||||
} else {
|
||||
send(page, "set-idle");
|
||||
}
|
||||
}, idleCheckInterval);
|
||||
})();
|
||||
// Update the name and path of the file if it already exists
|
||||
|
||||
app.on("before-quit", () => {
|
||||
isQuitting = true;
|
||||
const updatedFilePath = path.join(downloadPath, formatFile(filePath));
|
||||
|
||||
const setFilePath = fs.existsSync(filePath) ? updatedFilePath : filePath;
|
||||
|
||||
item.setSavePath(setFilePath);
|
||||
|
||||
item.on('updated', (_event: Event, state) => {
|
||||
switch (state) {
|
||||
case 'interrupted': {
|
||||
// Can interrupted to due to network error, cancel download then
|
||||
console.log('Download interrupted, cancelling and fallback to dialog download.');
|
||||
item.cancel();
|
||||
break;
|
||||
}
|
||||
case 'progressing': {
|
||||
if (item.isPaused()) {
|
||||
item.cancel();
|
||||
}
|
||||
// This event can also be used to show progress in percentage in future.
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
console.info('Unknown updated state of download item');
|
||||
}
|
||||
}
|
||||
});
|
||||
item.once('done', (_event: Event, state) => {
|
||||
const getFileName = fs.existsSync(filePath) ? formatFile(filePath) : item.getFilename();
|
||||
if (state === 'completed') {
|
||||
page.send('downloadFileCompleted', item.getSavePath(), getFileName);
|
||||
} else {
|
||||
console.log('Download failed state: ', state);
|
||||
page.send('downloadFileFailed');
|
||||
}
|
||||
// To stop item for listening to updated events of this file
|
||||
item.removeAllListeners('updated');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
ipcMain.on('realm-name-changed', (_event: Electron.IpcMessageEvent, serverURL: string, realmName: string) => {
|
||||
page.send('update-realm-name', serverURL, realmName);
|
||||
});
|
||||
|
||||
ipcMain.on('realm-icon-changed', (_event: Electron.IpcMessageEvent, serverURL: string, iconURL: string) => {
|
||||
page.send('update-realm-icon', serverURL, iconURL);
|
||||
});
|
||||
|
||||
// Using event.sender.send instead of page.send here to
|
||||
// make sure the value of errorReporting is sent only once on load.
|
||||
ipcMain.on('error-reporting', (event: Electron.IpcMessageEvent) => {
|
||||
event.sender.send('error-reporting-val', errorReporting);
|
||||
});
|
||||
|
||||
ipcMain.on('save-last-tab', (_event: Electron.IpcMessageEvent, index: number) => {
|
||||
ConfigUtil.setConfigItem('lastActiveTab', index);
|
||||
});
|
||||
|
||||
// Update user idle status for each realm after every 15s
|
||||
const idleCheckInterval = 15 * 1000; // 15 seconds
|
||||
setInterval(() => {
|
||||
// Set user idle if no activity in 1 second (idleThresholdSeconds)
|
||||
const idleThresholdSeconds = 1; // 1 second
|
||||
|
||||
// TODO: Remove typecast to any when types get added
|
||||
// TODO: use powerMonitor.getSystemIdleState when upgrading electron
|
||||
// powerMonitor.querySystemIdleState is deprecated in current electron
|
||||
// version at the time of writing.
|
||||
const powerMonitor = electron.powerMonitor as any;
|
||||
powerMonitor.querySystemIdleState(idleThresholdSeconds, (idleState: string) => {
|
||||
if (idleState === 'active') {
|
||||
page.send('set-active');
|
||||
} else {
|
||||
page.send('set-idle');
|
||||
}
|
||||
});
|
||||
}, idleCheckInterval);
|
||||
});
|
||||
|
||||
app.on('before-quit', () => {
|
||||
isQuitting = true;
|
||||
});
|
||||
|
||||
// Send crash reports
|
||||
process.on("uncaughtException", (error) => {
|
||||
console.error(error);
|
||||
console.error(error.stack);
|
||||
process.on('uncaughtException', err => {
|
||||
console.error(err);
|
||||
console.error(err.stack);
|
||||
});
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
import {app, dialog} from "electron/main";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
import {JsonDB} from "node-json-db";
|
||||
import {DataError} from "node-json-db/dist/lib/Errors.js";
|
||||
|
||||
import Logger from "../common/logger-util.ts";
|
||||
import * as t from "../common/translation-util.ts";
|
||||
|
||||
const logger = new Logger({
|
||||
file: "linux-update-util.log",
|
||||
});
|
||||
|
||||
let database: JsonDB;
|
||||
|
||||
reloadDatabase();
|
||||
|
||||
export function getUpdateItem(
|
||||
key: string,
|
||||
defaultValue: true | null = null,
|
||||
): true | null {
|
||||
reloadDatabase();
|
||||
let value: unknown;
|
||||
try {
|
||||
value = database.getObject<unknown>(`/${key}`);
|
||||
} catch (error: unknown) {
|
||||
if (!(error instanceof DataError)) throw error;
|
||||
}
|
||||
|
||||
if (value !== true && value !== null) {
|
||||
setUpdateItem(key, defaultValue);
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
export function setUpdateItem(key: string, value: true | null): void {
|
||||
database.push(`/${key}`, value, true);
|
||||
reloadDatabase();
|
||||
}
|
||||
|
||||
export function removeUpdateItem(key: string): void {
|
||||
database.delete(`/${key}`);
|
||||
reloadDatabase();
|
||||
}
|
||||
|
||||
function reloadDatabase(): void {
|
||||
const linuxUpdateJsonPath = path.join(
|
||||
app.getPath("userData"),
|
||||
"/config/updates.json",
|
||||
);
|
||||
try {
|
||||
const file = fs.readFileSync(linuxUpdateJsonPath, "utf8");
|
||||
JSON.parse(file);
|
||||
} catch (error: unknown) {
|
||||
if (fs.existsSync(linuxUpdateJsonPath)) {
|
||||
fs.unlinkSync(linuxUpdateJsonPath);
|
||||
dialog.showErrorBox(
|
||||
t.__("Error saving update notifications"),
|
||||
t.__("We encountered an error while saving the update notifications."),
|
||||
);
|
||||
logger.error("Error while JSON parsing updates.json: ");
|
||||
logger.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
database = new JsonDB(linuxUpdateJsonPath, true, true);
|
||||
}
|
||||
@@ -1,51 +1,48 @@
|
||||
import {Notification, type Session, app} from "electron/main";
|
||||
import { app, Notification } from 'electron';
|
||||
|
||||
import * as semver from "semver";
|
||||
import {z} from "zod";
|
||||
|
||||
import * as ConfigUtil from "../common/config-util.ts";
|
||||
import Logger from "../common/logger-util.ts";
|
||||
import * as t from "../common/translation-util.ts";
|
||||
|
||||
import * as LinuxUpdateUtil from "./linux-update-util.ts";
|
||||
import request = require('request');
|
||||
import semver = require('semver');
|
||||
import ConfigUtil = require('../renderer/js/utils/config-util');
|
||||
import ProxyUtil = require('../renderer/js/utils/proxy-util');
|
||||
import LinuxUpdateUtil = require('../renderer/js/utils/linux-update-util');
|
||||
import Logger = require('../renderer/js/utils/logger-util');
|
||||
|
||||
const logger = new Logger({
|
||||
file: "linux-update-util.log",
|
||||
file: 'linux-update-util.log',
|
||||
timestamp: true
|
||||
});
|
||||
|
||||
export async function linuxUpdateNotification(session: Session): Promise<void> {
|
||||
let url = "https://api.github.com/repos/zulip/zulip-desktop/releases";
|
||||
url = ConfigUtil.getConfigItem("betaUpdate", false) ? url : url + "/latest";
|
||||
export function linuxUpdateNotification(): void {
|
||||
let url = 'https://api.github.com/repos/zulip/zulip-desktop/releases';
|
||||
url = ConfigUtil.getConfigItem('betaUpdate') ? url : url + '/latest';
|
||||
const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
|
||||
|
||||
try {
|
||||
const response = await session.fetch(url);
|
||||
if (!response.ok) {
|
||||
logger.log("Linux update response status: ", response.status);
|
||||
return;
|
||||
}
|
||||
const options = {
|
||||
url,
|
||||
headers: {'User-Agent': 'request'},
|
||||
proxy: proxyEnabled ? ProxyUtil.getProxy(url) : '',
|
||||
ecdhCurve: 'auto'
|
||||
};
|
||||
|
||||
const data: unknown = await response.json();
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
const latestVersion = ConfigUtil.getConfigItem("betaUpdate", false)
|
||||
? z.array(z.object({tag_name: z.string()})).parse(data)[0].tag_name
|
||||
: z.object({tag_name: z.string()}).parse(data).tag_name;
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
request(options, (error: any, response: any, body: any) => {
|
||||
if (error) {
|
||||
logger.error('Linux update error.');
|
||||
logger.error(error);
|
||||
return;
|
||||
}
|
||||
if (response.statusCode < 400) {
|
||||
const data = JSON.parse(body);
|
||||
const latestVersion = ConfigUtil.getConfigItem('betaUpdate') ? data[0].tag_name : data.tag_name;
|
||||
|
||||
if (semver.gt(latestVersion, app.getVersion())) {
|
||||
const notified = LinuxUpdateUtil.getUpdateItem(latestVersion);
|
||||
if (notified === null) {
|
||||
new Notification({
|
||||
title: t.__("Zulip Update"),
|
||||
body: t.__(
|
||||
"A new version {{{version}}} is available. Please update using your package manager.",
|
||||
{version: latestVersion},
|
||||
),
|
||||
}).show();
|
||||
LinuxUpdateUtil.setUpdateItem(latestVersion, true);
|
||||
}
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
logger.error("Linux update error.");
|
||||
logger.error(error);
|
||||
}
|
||||
if (semver.gt(latestVersion, app.getVersion())) {
|
||||
const notified = LinuxUpdateUtil.getUpdateItem(latestVersion);
|
||||
if (notified === null) {
|
||||
new Notification({title: 'Zulip Update', body: 'A new version ' + latestVersion + ' is available. Please update using your package manager.'}).show();
|
||||
LinuxUpdateUtil.setUpdateItem(latestVersion, true);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
logger.log('Linux update response status: ', response.statusCode);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
1317
app/main/menu.ts
1317
app/main/menu.ts
File diff suppressed because it is too large
Load Diff
@@ -1,121 +0,0 @@
|
||||
import {type Session, app} from "electron/main";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import {Readable} from "node:stream";
|
||||
import {pipeline} from "node:stream/promises";
|
||||
import type {ReadableStream} from "node:stream/web";
|
||||
|
||||
import * as Sentry from "@sentry/electron/main";
|
||||
import {z} from "zod";
|
||||
|
||||
import Logger from "../common/logger-util.ts";
|
||||
import * as Messages from "../common/messages.ts";
|
||||
import type {ServerConfig} from "../common/types.ts";
|
||||
|
||||
/* Request: domain-util */
|
||||
|
||||
const logger = new Logger({
|
||||
file: "domain-util.log",
|
||||
});
|
||||
|
||||
const generateFilePath = (url: string): string => {
|
||||
const directory = `${app.getPath("userData")}/server-icons`;
|
||||
const extension = path.extname(url).split("?")[0];
|
||||
|
||||
let hash = 5381;
|
||||
let {length} = url;
|
||||
|
||||
while (length) {
|
||||
// eslint-disable-next-line no-bitwise, unicorn/prefer-code-point
|
||||
hash = (hash * 33) ^ url.charCodeAt(--length);
|
||||
}
|
||||
|
||||
// Create 'server-icons' directory if not existed
|
||||
if (!fs.existsSync(directory)) {
|
||||
fs.mkdirSync(directory);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-bitwise
|
||||
return `${directory}/${hash >>> 0}${extension}`;
|
||||
};
|
||||
|
||||
export const _getServerSettings = async (
|
||||
domain: string,
|
||||
session: Session,
|
||||
): Promise<ServerConfig> => {
|
||||
const response = await session.fetch(domain + "/api/v1/server_settings");
|
||||
if (!response.ok) {
|
||||
throw new Error(Messages.invalidZulipServerError(domain));
|
||||
}
|
||||
|
||||
const data: unknown = await response.json();
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
const {
|
||||
realm_name,
|
||||
realm_uri,
|
||||
realm_icon,
|
||||
zulip_version,
|
||||
zulip_feature_level,
|
||||
} = z
|
||||
.object({
|
||||
realm_name: z.string(),
|
||||
realm_uri: z.url(),
|
||||
realm_icon: z.string(),
|
||||
zulip_version: z.string().default("unknown"),
|
||||
zulip_feature_level: z.number().default(0),
|
||||
})
|
||||
.parse(data);
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
|
||||
return {
|
||||
// Some Zulip Servers use absolute URL for server icon whereas others use relative URL
|
||||
// Following check handles both the cases
|
||||
icon: realm_icon.startsWith("/") ? realm_uri + realm_icon : realm_icon,
|
||||
url: realm_uri,
|
||||
alias: realm_name,
|
||||
zulipVersion: zulip_version,
|
||||
zulipFeatureLevel: zulip_feature_level,
|
||||
};
|
||||
};
|
||||
|
||||
export const _saveServerIcon = async (
|
||||
url: string,
|
||||
session: Session,
|
||||
): Promise<string | null> => {
|
||||
try {
|
||||
const response = await session.fetch(url);
|
||||
if (!response.ok) {
|
||||
logger.log("Could not get server icon.");
|
||||
return null;
|
||||
}
|
||||
|
||||
const filePath = generateFilePath(url);
|
||||
await pipeline(
|
||||
Readable.fromWeb(response.body as ReadableStream<Uint8Array>),
|
||||
fs.createWriteStream(filePath),
|
||||
);
|
||||
return filePath;
|
||||
} catch (error: unknown) {
|
||||
logger.log("Could not get server icon.");
|
||||
logger.log(error);
|
||||
Sentry.captureException(error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
/* Request: reconnect-util */
|
||||
|
||||
export const _isOnline = async (
|
||||
url: string,
|
||||
session: Session,
|
||||
): Promise<boolean> => {
|
||||
try {
|
||||
const response = await session.fetch(`${url}/api/v1/server_settings`, {
|
||||
method: "HEAD",
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error: unknown) {
|
||||
logger.log(error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
import {app} from "electron/main";
|
||||
|
||||
import * as Sentry from "@sentry/electron/main";
|
||||
|
||||
import {getConfigItem} from "../common/config-util.ts";
|
||||
|
||||
export const sentryInit = (): void => {
|
||||
Sentry.init({
|
||||
dsn: "https://628dc2f2864243a08ead72e63f94c7b1@o48127.ingest.sentry.io/204668",
|
||||
|
||||
// Don't report errors in development or if disabled by the user.
|
||||
beforeSend: (event) =>
|
||||
app.isPackaged && getConfigItem("errorReporting", true) ? event : null,
|
||||
|
||||
// We should ignore this error since it's harmless and we know the reason behind this
|
||||
// This error mainly comes from the console logs.
|
||||
// This is a temp solution until Sentry supports disabling the console logs
|
||||
ignoreErrors: ["does not appear to be a valid Zulip server"],
|
||||
|
||||
/// sendTimeout: 30 // wait 30 seconds before considering the sending capture to have failed, default is 1 second
|
||||
});
|
||||
};
|
||||
@@ -1,36 +1,31 @@
|
||||
import {app} from "electron/main";
|
||||
import process from "node:process";
|
||||
'use strict';
|
||||
import { app } from 'electron';
|
||||
|
||||
import AutoLaunch from "auto-launch";
|
||||
import AutoLaunch = require('auto-launch');
|
||||
import isDev = require('electron-is-dev');
|
||||
import ConfigUtil = require('../renderer/js/utils/config-util');
|
||||
|
||||
import * as ConfigUtil from "../common/config-util.ts";
|
||||
export const setAutoLaunch = (AutoLaunchValue: boolean): void => {
|
||||
// Don't run this in development
|
||||
if (isDev) {
|
||||
return;
|
||||
}
|
||||
|
||||
export const setAutoLaunch = async (
|
||||
AutoLaunchValue: boolean,
|
||||
): Promise<void> => {
|
||||
// Don't run this in development
|
||||
if (!app.isPackaged) {
|
||||
return;
|
||||
}
|
||||
// On Mac, work around a bug in auto-launch where it opens a Terminal window
|
||||
// See https://github.com/Teamwork/node-auto-launch/issues/28#issuecomment-222194437
|
||||
|
||||
const autoLaunchOption = ConfigUtil.getConfigItem(
|
||||
"startAtLogin",
|
||||
AutoLaunchValue,
|
||||
);
|
||||
const appPath = process.platform === 'darwin' ? app.getPath('exe').replace(/\.app\/Content.*/, '.app') : undefined; // Use the default
|
||||
|
||||
// `setLoginItemSettings` doesn't support linux
|
||||
if (process.platform === "linux") {
|
||||
const zulipAutoLauncher = new AutoLaunch({
|
||||
name: "Zulip",
|
||||
isHidden: false,
|
||||
});
|
||||
await (autoLaunchOption
|
||||
? zulipAutoLauncher.enable()
|
||||
: zulipAutoLauncher.disable());
|
||||
} else {
|
||||
app.setLoginItemSettings({
|
||||
openAtLogin: autoLaunchOption,
|
||||
openAsHidden: false,
|
||||
});
|
||||
}
|
||||
const ZulipAutoLauncher = new AutoLaunch({
|
||||
name: 'Zulip',
|
||||
path: appPath,
|
||||
isHidden: false
|
||||
});
|
||||
const autoLaunchOption = ConfigUtil.getConfigItem('startAtLogin', AutoLaunchValue);
|
||||
|
||||
if (autoLaunchOption) {
|
||||
ZulipAutoLauncher.enable();
|
||||
} else {
|
||||
ZulipAutoLauncher.disable();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,88 +0,0 @@
|
||||
import {
|
||||
type IpcMainEvent,
|
||||
type IpcMainInvokeEvent,
|
||||
type WebContents,
|
||||
ipcMain as untypedIpcMain, // eslint-disable-line no-restricted-imports
|
||||
} from "electron/main";
|
||||
|
||||
import type {
|
||||
MainCall,
|
||||
MainMessage,
|
||||
RendererMessage,
|
||||
} from "../common/typed-ipc.js";
|
||||
|
||||
type MainListener<Channel extends keyof MainMessage> =
|
||||
MainMessage[Channel] extends (...arguments_: infer Arguments) => infer Return
|
||||
? (
|
||||
event: IpcMainEvent & {returnValue: Return},
|
||||
...arguments_: Arguments
|
||||
) => void
|
||||
: never;
|
||||
|
||||
type MainHandler<Channel extends keyof MainCall> = MainCall[Channel] extends (
|
||||
...arguments_: infer Arguments
|
||||
) => infer Return
|
||||
? (
|
||||
event: IpcMainInvokeEvent,
|
||||
...arguments_: Arguments
|
||||
) => Return | Promise<Return>
|
||||
: never;
|
||||
|
||||
export const ipcMain: {
|
||||
on(
|
||||
channel: "forward-message",
|
||||
listener: <Channel extends keyof RendererMessage>(
|
||||
event: IpcMainEvent,
|
||||
channel: Channel,
|
||||
...arguments_: Parameters<RendererMessage[Channel]>
|
||||
) => void,
|
||||
): void;
|
||||
on(
|
||||
channel: "forward-to",
|
||||
listener: <Channel extends keyof RendererMessage>(
|
||||
event: IpcMainEvent,
|
||||
webContentsId: number,
|
||||
channel: Channel,
|
||||
...arguments_: Parameters<RendererMessage[Channel]>
|
||||
) => void,
|
||||
): void;
|
||||
on<Channel extends keyof MainMessage>(
|
||||
channel: Channel,
|
||||
listener: MainListener<Channel>,
|
||||
): void;
|
||||
once<Channel extends keyof MainMessage>(
|
||||
channel: Channel,
|
||||
listener: MainListener<Channel>,
|
||||
): void;
|
||||
removeListener<Channel extends keyof MainMessage>(
|
||||
channel: Channel,
|
||||
listener: MainListener<Channel>,
|
||||
): void;
|
||||
removeAllListeners(channel?: keyof MainMessage): void;
|
||||
handle<Channel extends keyof MainCall>(
|
||||
channel: Channel,
|
||||
handler: MainHandler<Channel>,
|
||||
): void;
|
||||
handleOnce<Channel extends keyof MainCall>(
|
||||
channel: Channel,
|
||||
handler: MainHandler<Channel>,
|
||||
): void;
|
||||
removeHandler(channel: keyof MainCall): void;
|
||||
} = untypedIpcMain;
|
||||
|
||||
export function send<Channel extends keyof RendererMessage>(
|
||||
contents: WebContents,
|
||||
channel: Channel,
|
||||
...arguments_: Parameters<RendererMessage[Channel]>
|
||||
): void {
|
||||
contents.send(channel, ...arguments_);
|
||||
}
|
||||
|
||||
export function sendToFrame<Channel extends keyof RendererMessage>(
|
||||
contents: WebContents,
|
||||
frameId: number | [number, number],
|
||||
channel: Channel,
|
||||
...arguments_: Parameters<RendererMessage[Channel]>
|
||||
): void {
|
||||
contents.sendToFrame(frameId, channel, ...arguments_);
|
||||
}
|
||||
1940
app/package-lock.json
generated
Normal file
1940
app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
51
app/package.json
Normal file
51
app/package.json
Normal file
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "zulip",
|
||||
"productName": "Zulip",
|
||||
"version": "4.0.3",
|
||||
"desktopName": "zulip.desktop",
|
||||
"description": "Zulip Desktop App",
|
||||
"license": "Apache-2.0",
|
||||
"copyright": "Kandra Labs, Inc.",
|
||||
"author": {
|
||||
"name": "Kandra Labs, Inc.",
|
||||
"email": "support@zulipchat.com"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/zulip/zulip-desktop.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/zulip/zulip-desktop/issues"
|
||||
},
|
||||
"main": "main/index.js",
|
||||
"keywords": [
|
||||
"Zulip",
|
||||
"Group Chat app",
|
||||
"electron-app",
|
||||
"electron",
|
||||
"Desktop app",
|
||||
"InstantMessaging"
|
||||
],
|
||||
"dependencies": {
|
||||
"@electron-elements/send-feedback": "1.0.8",
|
||||
"@sentry/electron": "0.14.0",
|
||||
"adm-zip": "0.4.11",
|
||||
"auto-launch": "5.0.5",
|
||||
"backoff": "2.5.0",
|
||||
"dotenv": "8.0.0",
|
||||
"electron-is-dev": "0.3.0",
|
||||
"electron-log": "2.2.14",
|
||||
"electron-spellchecker": "1.1.2",
|
||||
"electron-updater": "4.0.6",
|
||||
"electron-window-state": "5.0.3",
|
||||
"escape-html": "1.0.3",
|
||||
"i18n": "0.8.3",
|
||||
"node-json-db": "0.9.2",
|
||||
"request": "2.85.0",
|
||||
"semver": "5.4.1",
|
||||
"wurl": "2.5.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"node-mac-notifier": "1.1.0"
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,47 @@
|
||||
<!doctype html>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="css/about.css" />
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<!-- Initially hidden to prevent FOUC -->
|
||||
<div class="about" hidden>
|
||||
<img class="logo" src="../resources/zulip.png" />
|
||||
<p class="detail" id="version"></p>
|
||||
</div>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="css/about.css">
|
||||
<title>Zulip - About</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="about">
|
||||
<img class="logo" src="../resources/zulip.png" />
|
||||
<p class="detail" id="version">v?.?.?</p>
|
||||
<div class="maintenance-info">
|
||||
<p class="detail maintainer">
|
||||
Maintained by
|
||||
<a onclick="linkInBrowser('website')">Zulip</a>
|
||||
</p>
|
||||
<p class="detail license">
|
||||
Available under the
|
||||
<a onclick="linkInBrowser('license')">Apache 2.0 License</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
const { app } = require('electron').remote;
|
||||
const { shell } = require('electron');
|
||||
const version_tag = document.querySelector('#version');
|
||||
version_tag.innerHTML = 'v' + app.getVersion();
|
||||
|
||||
function linkInBrowser(type) {
|
||||
let url;
|
||||
switch (type) {
|
||||
case 'website':
|
||||
url = "https://zulipchat.com";
|
||||
break;
|
||||
case 'license':
|
||||
url = "https://github.com/zulip/zulip-desktop/blob/master/LICENSE";
|
||||
break;
|
||||
}
|
||||
shell.openExternal(url);
|
||||
}
|
||||
</script>
|
||||
<script>require('./js/shared/preventdrag.js')</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,68 +1,66 @@
|
||||
:host {
|
||||
contain: strict;
|
||||
display: flow-root;
|
||||
background: rgb(250 250 250 / 100%);
|
||||
font-family: menu, "Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
body {
|
||||
background: rgba(250, 250, 250, 1.000);
|
||||
font-family: menu, "Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: -40px auto;
|
||||
display: block;
|
||||
margin: -40px auto;
|
||||
}
|
||||
|
||||
#version {
|
||||
color: rgb(68 67 67 / 100%);
|
||||
font-size: 1.3em;
|
||||
padding-top: 40px;
|
||||
color: rgba(68, 67, 67, 1.000);
|
||||
font-size: 1.3em;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: block !important;
|
||||
margin: 25vh auto;
|
||||
height: 25vh;
|
||||
text-align: center;
|
||||
margin: 25vh auto;
|
||||
height: 25vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about p {
|
||||
font-size: 20px;
|
||||
color: rgb(0 0 0 / 62%);
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.62);
|
||||
}
|
||||
|
||||
.about img {
|
||||
width: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detail.maintainer {
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail.license {
|
||||
font-size: 0.8em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.maintenance-info {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
color: rgb(68 68 68 / 100%);
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
color: rgba(68, 68, 68, 1.000);
|
||||
}
|
||||
|
||||
.maintenance-info p {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p.detail a {
|
||||
color: rgb(53 95 76 / 100%);
|
||||
color: rgba(53, 95, 76, 1.000);
|
||||
}
|
||||
|
||||
p.detail a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
:host {
|
||||
--button-color: rgb(69 166 149);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--button-color);
|
||||
border-color: var(--button-color);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus {
|
||||
border-color: var(--button-color);
|
||||
color: var(--button-color);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: rgb(241 241 241);
|
||||
color: var(--button-color);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local("Material Icons"),
|
||||
local("MaterialIcons-Regular"),
|
||||
url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Montserrat;
|
||||
src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
|
||||
}
|
||||
@@ -4,283 +4,280 @@
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.toggle-sidebar {
|
||||
background: rgb(34 44 49 / 100%);
|
||||
width: 54px;
|
||||
padding: 27px 0 20px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-app-region: drag;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s ease;
|
||||
z-index: 2;
|
||||
background: rgba(34, 44, 49, 1.000);
|
||||
width: 54px;
|
||||
padding: 27px 0 20px 0;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-app-region: drag;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.toggle-sidebar div {
|
||||
transition: all 0.5s ease-out;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
.sidebar-hide {
|
||||
width: 0;
|
||||
transition: all 0.8s ease;
|
||||
width: 0;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
.sidebar-hide div {
|
||||
transform: translateX(-100%);
|
||||
transition: all 0.6s ease-out;
|
||||
transform: translateX(-100%);
|
||||
transition: all 0.6s ease-out;
|
||||
}
|
||||
|
||||
#view-controls-container {
|
||||
height: calc(100% - 208px);
|
||||
scrollbar-gutter: stable both-edges;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#view-controls-container::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
#view-controls-container::-webkit-scrollbar-track {
|
||||
background-color: rgb(0 0 0 / 30%);
|
||||
}
|
||||
|
||||
#view-controls-container::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(169 169 169 / 100%);
|
||||
height: calc(100% - 208px);
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#view-controls-container:hover {
|
||||
overflow-y: scroll;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
|
||||
#view-controls-container::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
#view-controls-container::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#view-controls-container::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(169, 169, 169, 1.000);
|
||||
outline: 1px solid rgba(169, 169, 169, 1.000);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
* Left Sidebar *
|
||||
*******************/
|
||||
|
||||
#tabs-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
/* Preferred icon size */
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
overflow-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizelegibility;
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
/* Preferred icon size */
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
#actions-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-button i {
|
||||
color: hsl(200.53deg 14.96% 49.8%);
|
||||
font-size: 28px;
|
||||
color: rgba(108, 133, 146, 1.000);
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.action-button:hover i {
|
||||
color: hsl(202.22deg 15.08% 64.9%);
|
||||
}
|
||||
|
||||
.action-button > .dnd-on {
|
||||
color: hsl(200.53deg 14.96% 85%);
|
||||
}
|
||||
|
||||
.action-button:hover > .dnd-on {
|
||||
color: hsl(202.22deg 15.08% 95%);
|
||||
}
|
||||
|
||||
.action-button.active {
|
||||
/* background-color: rgba(255, 255, 255, 0.25); */
|
||||
background-color: rgb(239 239 239 / 100%);
|
||||
opacity: 0.9;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.action-button.active i {
|
||||
color: rgb(28 38 43 / 100%);
|
||||
color: rgba(152, 169, 179, 1.000);
|
||||
}
|
||||
|
||||
.action-button.disable {
|
||||
opacity: 0.6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.action-button.disable:hover {
|
||||
cursor: not-allowed;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-button.disable:hover i {
|
||||
color: rgb(108 133 146 / 100%);
|
||||
color: rgba(108, 133, 146, 1.000);
|
||||
}
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
margin: 2px 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.action-button.active {
|
||||
/* background-color: rgba(255, 255, 255, 0.25); */
|
||||
background-color: rgba(239, 239, 239, 1.000);
|
||||
opacity: 0.9;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.action-button.active i {
|
||||
color: rgba(28, 38, 43, 1.000);
|
||||
}
|
||||
|
||||
.tab:first-child {
|
||||
margin-top: 9px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
margin: 2px 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab .server-icons {
|
||||
width: 35px;
|
||||
vertical-align: top;
|
||||
border-radius: 4px;
|
||||
width: 35px;
|
||||
vertical-align: top;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tab .server-tab {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
z-index: 11;
|
||||
line-height: 31px;
|
||||
color: rgb(238 238 238 / 100%);
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
opacity: 0.6;
|
||||
padding: 6px 0;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
z-index: 11;
|
||||
line-height: 31px;
|
||||
color: rgba(238, 238, 238, 1.000);
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
opacity: 0.6;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.server-tab .alt-icon {
|
||||
font-family: Verdana, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
border: 2px solid rgb(34 44 49 / 100%);
|
||||
margin-left: 17%;
|
||||
width: 35px;
|
||||
border-radius: 4px;
|
||||
font-family: Verdana;
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
border: 2px solid rgba(34, 44, 49, 1.000);
|
||||
margin-left: 17%;
|
||||
width: 35px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tab .server-tab:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tab.active .server-tab {
|
||||
opacity: 1;
|
||||
background-color: rgb(100 132 120 / 100%);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tab.functional-tab {
|
||||
height: 46px;
|
||||
padding: 0;
|
||||
height: 46px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tab.functional-tab.active .server-tab {
|
||||
padding: 2px 0;
|
||||
height: 40px;
|
||||
background-color: rgb(255 255 255 / 25%);
|
||||
padding: 2px 0;
|
||||
height: 40px;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.tab.functional-tab .server-tab i {
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.tab.active .server-tab {
|
||||
opacity: 1;
|
||||
background-color: rgba(100, 132, 120, 1.000);
|
||||
}
|
||||
|
||||
.tab .server-tab-badge.active {
|
||||
border-radius: 9px;
|
||||
min-width: 11px;
|
||||
padding: 0 3px;
|
||||
height: 17px;
|
||||
background-color: rgb(244 67 54 / 100%);
|
||||
font-size: 10px;
|
||||
font-family: sans-serif;
|
||||
position: absolute;
|
||||
z-index: 15;
|
||||
top: 6px;
|
||||
float: right;
|
||||
color: rgb(255 255 255 / 100%);
|
||||
text-align: center;
|
||||
line-height: 17px;
|
||||
display: block;
|
||||
right: 0;
|
||||
border-radius: 9px;
|
||||
min-width: 11px;
|
||||
padding: 0 3px;
|
||||
height: 17px;
|
||||
background-color: rgba(244, 67, 54, 1.000);
|
||||
font-size: 10px;
|
||||
font-family: sans-serif;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
z-index: 15;
|
||||
top: 6px;
|
||||
float: right;
|
||||
color: rgba(255, 255, 255, 1.000);
|
||||
text-align: center;
|
||||
line-height: 17px;
|
||||
display: block;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tab .server-tab-badge {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab .server-tab-badge.close-button {
|
||||
width: 16px;
|
||||
padding: 0;
|
||||
width: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tab .server-tab-badge.close-button i {
|
||||
font-size: 13px;
|
||||
line-height: 17px;
|
||||
font-size: 13px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
#add-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab .server-tab-shortcut {
|
||||
color: rgb(100 132 120 / 100%);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
margin-bottom: 5px;
|
||||
color: rgba(100, 132, 120, 1.000);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.refresh {
|
||||
animation: rotate-loader 1s linear infinite;
|
||||
animation: rotate-loader 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate-loader {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*******************
|
||||
@@ -288,81 +285,57 @@ body {
|
||||
*******************/
|
||||
|
||||
#webviews-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Pseudo element for loading indicator */
|
||||
#webviews-container::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
/* Spinner is released under loading.io free License: https://loading.io/license/#free-license */
|
||||
background: rgb(255 255 255 / 100%) url("../img/ic_loading.svg") no-repeat;
|
||||
background-size: 60px 60px;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: rgba(255, 255, 255, 1.000) url(../img/ic_loading.gif) no-repeat;
|
||||
background-size: 60px 60px;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* When the active webview is loaded */
|
||||
#webviews-container.loaded::before {
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.webview-pane,
|
||||
.functional-view {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
visibility: hidden;
|
||||
webview {
|
||||
/* transition: opacity 0.3s ease-in; */
|
||||
flex-grow: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.webview-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
webview.onload {
|
||||
transition: opacity 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
|
||||
}
|
||||
|
||||
.webview-pane > webview {
|
||||
flex: 1;
|
||||
webview.active {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.webview-pane.active,
|
||||
.functional-view.active {
|
||||
z-index: 1;
|
||||
visibility: visible;
|
||||
webview.disabled {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
webview.focus {
|
||||
outline: 0 solid transparent;
|
||||
}
|
||||
|
||||
.webview-unsupported {
|
||||
background: rgb(254 243 199);
|
||||
border: 1px solid rgb(253 230 138);
|
||||
color: rgb(69 26 3);
|
||||
font-family: system-ui;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.webview-unsupported[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.webview-unsupported-message {
|
||||
padding: 0.3em;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.webview-unsupported-dismiss {
|
||||
padding: 0.3em;
|
||||
cursor: pointer;
|
||||
outline: 0px solid transparent;
|
||||
}
|
||||
|
||||
/* Tooltip styling */
|
||||
@@ -372,18 +345,18 @@ webview.focus {
|
||||
#back-tooltip,
|
||||
#reload-tooltip,
|
||||
#setting-tooltip {
|
||||
font-family: sans-serif;
|
||||
background: rgb(34 44 49 / 100%);
|
||||
margin-left: 48px;
|
||||
padding: 6px 8px;
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
z-index: 1000;
|
||||
color: rgb(255 255 255 / 100%);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
width: 55px;
|
||||
font-size: 14px;
|
||||
font-family: sans-serif;
|
||||
background: rgba(34, 44, 49, 1.000);
|
||||
margin-left: 48px;
|
||||
padding: 6px 8px;
|
||||
position: absolute;
|
||||
margin-top: 0px;
|
||||
z-index: 1000;
|
||||
color: rgba(255, 255, 255, 1.000);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
width: 55px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#loading-tooltip::after,
|
||||
@@ -391,104 +364,127 @@ webview.focus {
|
||||
#back-tooltip::after,
|
||||
#reload-tooltip::after,
|
||||
#setting-tooltip::after {
|
||||
content: " ";
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right: 8px solid rgb(34 44 49 / 100%);
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 68px;
|
||||
content: " ";
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right: 8px solid rgba(34, 44, 49, 1.000);
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 68px;
|
||||
}
|
||||
|
||||
#add-server-tooltip,
|
||||
.server-tooltip {
|
||||
font-family: arial, sans-serif;
|
||||
background: rgb(34 44 49 / 100%);
|
||||
left: 56px;
|
||||
padding: 10px 20px;
|
||||
position: fixed;
|
||||
margin-top: 11px;
|
||||
z-index: 5000 !important;
|
||||
color: rgb(255 255 255 / 100%);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
width: max-content;
|
||||
font-size: 14px;
|
||||
font-family: 'arial';
|
||||
background: rgba(34, 44, 49, 1.000);
|
||||
left: 56px;
|
||||
padding: 10px 20px;
|
||||
position: fixed;
|
||||
margin-top: 11px;
|
||||
z-index: 5000 !important;
|
||||
color: rgba(255, 255, 255, 1.000);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
width: max-content;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#add-server-tooltip::after,
|
||||
.server-tooltip::after {
|
||||
content: " ";
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right: 8px solid rgb(34 44 49 / 100%);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: -5px;
|
||||
content: " ";
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right: 8px solid rgba(34, 44, 49, 1.000);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
#collapse-button {
|
||||
bottom: 30px;
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: rgb(34 44 49 / 100%);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
box-shadow: rgb(153 153 153 / 100%) 1px 1px;
|
||||
bottom: 30px;
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: rgba(34, 44, 49, 1.000);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
box-shadow: rgba(153, 153, 153, 1.000) 1px 1px;
|
||||
}
|
||||
|
||||
#collapse-button i {
|
||||
color: rgb(239 239 239 / 100%);
|
||||
color: rgba(239, 239, 239, 1.000);
|
||||
}
|
||||
|
||||
#main-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* Full screen Popup container */
|
||||
|
||||
.popup .popuptext {
|
||||
visibility: hidden;
|
||||
background-color: rgb(85 85 85 / 100%);
|
||||
color: rgb(255 255 255 / 100%);
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 9px 0;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
font-family: arial, sans-serif;
|
||||
width: 240px;
|
||||
top: 15px;
|
||||
height: 20px;
|
||||
left: 43%;
|
||||
visibility: hidden;
|
||||
background-color: rgba(85, 85, 85, 1.000);
|
||||
color: rgba(255, 255, 255, 1.000);
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 9px 0;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
font-family: arial;
|
||||
width: 240px;
|
||||
top: 15px;
|
||||
height: 20px;
|
||||
left: 43%;
|
||||
}
|
||||
|
||||
.popup .show {
|
||||
visibility: visible;
|
||||
animation: full-screen-popup 0s ease-in 1s forwards;
|
||||
animation-fill-mode: forwards;
|
||||
visibility: visible;
|
||||
animation: cssAnimation 0s ease-in 5s forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes full-screen-popup {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
}
|
||||
@keyframes cssAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
send-feedback {
|
||||
width: 60%;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
#feedback-modal {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(68, 67, 67, 0.81);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
transition: all 1s ease-out;
|
||||
}
|
||||
|
||||
#feedback-modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -1,59 +1,59 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
font-size: 14px;
|
||||
color: rgb(51 51 51 / 100%);
|
||||
background: rgb(255 255 255 / 100%);
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
font-size: 14px;
|
||||
color: rgba(51, 51, 51, 1.000);
|
||||
background: rgba(255, 255, 255, 1.000);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "Trebuchet MS", Helvetica, sans-serif;
|
||||
margin: 100px 200px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "Trebuchet MS", Helvetica, sans-serif;
|
||||
margin: 100px 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#title {
|
||||
text-align: left;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0;
|
||||
text-align: left;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
margin: 12px 0;
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
#description {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
list-style-position: inside;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#reconnect {
|
||||
float: left;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#settings {
|
||||
margin-left: 116px;
|
||||
margin-left: 116px;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 16px;
|
||||
background: rgb(0 150 136 / 100%);
|
||||
color: rgb(255 255 255 / 100%);
|
||||
width: 96px;
|
||||
height: 32px;
|
||||
border-radius: 5px;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
background: rgba(0, 150, 136, 1.000);
|
||||
color: rgba(255, 255, 255, 1.000);
|
||||
width: 96px;
|
||||
height: 32px;
|
||||
border-radius: 5px;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
opacity: 0.8;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,9 +1,9 @@
|
||||
/* Override css rules */
|
||||
|
||||
.portico-wrap > .header {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.portico-container > .footer {
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
BIN
app/renderer/img/ic_loading.gif
Normal file
BIN
app/renderer/img/ic_loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="150px" height="150px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
||||
<circle cx="50" cy="50" fill="none" stroke="#759ed4" stroke-width="10" r="42" stroke-dasharray="197.92033717615698 67.97344572538566" style="animation-play-state: running; animation-delay: 0s;">
|
||||
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1" style="animation-play-state: running; animation-delay: 0s;"></animateTransform>
|
||||
</circle>
|
||||
<!-- Created with loading.io (https://loading.io/spinner/rolling/-bar-circle-curve-round-rotate) -->
|
||||
<!-- "The Rolling spinner is released under loading.io free License." (https://loading.io/license/#free-license) -->
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1018 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 27 KiB |
@@ -1,64 +0,0 @@
|
||||
import {ipcRenderer} from "./typed-ipc-renderer.ts";
|
||||
|
||||
// This helper is exposed via electron_bridge for use in the social
|
||||
// login flow.
|
||||
//
|
||||
// It consists of a key and a promised token. The in-app page sends
|
||||
// the key to the server, and opens the user’s browser to a page where
|
||||
// they can log in and get a token encrypted to that key. When the
|
||||
// user copies the encrypted token from their browser to the
|
||||
// clipboard, we decrypt it and resolve the promise. The in-app page
|
||||
// then uses the decrypted token to log the user in within the app.
|
||||
//
|
||||
// The encryption is authenticated (AES-GCM) to guarantee that we
|
||||
// don’t leak anything from the user’s clipboard other than the token
|
||||
// intended for us.
|
||||
|
||||
export type ClipboardDecrypter = {
|
||||
version: number;
|
||||
key: Uint8Array;
|
||||
pasted: Promise<string>;
|
||||
};
|
||||
|
||||
export class ClipboardDecrypterImplementation implements ClipboardDecrypter {
|
||||
version: number;
|
||||
key: Uint8Array;
|
||||
pasted: Promise<string>;
|
||||
|
||||
constructor(_: number) {
|
||||
// At this time, the only version is 1.
|
||||
this.version = 1;
|
||||
const {key, sig} = ipcRenderer.sendSync("new-clipboard-key");
|
||||
this.key = key;
|
||||
this.pasted = new Promise((resolve) => {
|
||||
let interval: NodeJS.Timeout | null = null;
|
||||
const startPolling = () => {
|
||||
interval ??= setInterval(poll, 1000);
|
||||
void poll();
|
||||
};
|
||||
|
||||
const stopPolling = () => {
|
||||
if (interval !== null) {
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
}
|
||||
};
|
||||
|
||||
const poll = async () => {
|
||||
const plaintext = await ipcRenderer.invoke("poll-clipboard", key, sig);
|
||||
if (plaintext === undefined) return;
|
||||
|
||||
window.removeEventListener("focus", startPolling);
|
||||
window.removeEventListener("blur", stopPolling);
|
||||
stopPolling();
|
||||
resolve(plaintext);
|
||||
};
|
||||
|
||||
window.addEventListener("focus", startPolling);
|
||||
window.addEventListener("blur", stopPolling);
|
||||
if (document.hasFocus()) {
|
||||
startPolling();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,11 @@
|
||||
import type {Html} from "../../../common/html.ts";
|
||||
'use strict';
|
||||
|
||||
export function generateNodeFromHtml(html: Html): Element {
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.innerHTML = html.html;
|
||||
|
||||
if (wrapper.firstElementChild === null) {
|
||||
throw new Error("No element found in HTML");
|
||||
}
|
||||
|
||||
return wrapper.firstElementChild;
|
||||
class BaseComponent {
|
||||
generateNodeFromTemplate(template: string): Element | null {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = template;
|
||||
return wrapper.firstElementChild;
|
||||
}
|
||||
}
|
||||
|
||||
export = BaseComponent;
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
import {type Event, clipboard} from "electron/common";
|
||||
import type {WebContents} from "electron/main";
|
||||
import type {
|
||||
ContextMenuParams,
|
||||
MenuItemConstructorOptions,
|
||||
} from "electron/renderer";
|
||||
import process from "node:process";
|
||||
|
||||
import {BrowserWindow, Menu} from "@electron/remote";
|
||||
|
||||
import * as t from "../../../common/translation-util.ts";
|
||||
|
||||
export const contextMenu = (
|
||||
webContents: WebContents,
|
||||
event: Event,
|
||||
properties: ContextMenuParams,
|
||||
) => {
|
||||
const isText = properties.selectionText !== "";
|
||||
const isLink = properties.linkURL !== "";
|
||||
const linkUrl = isLink ? new URL(properties.linkURL) : undefined;
|
||||
|
||||
const makeSuggestion = (suggestion: string) => ({
|
||||
label: suggestion,
|
||||
visible: true,
|
||||
async click() {
|
||||
await webContents.insertText(suggestion);
|
||||
},
|
||||
});
|
||||
|
||||
let menuTemplate: MenuItemConstructorOptions[] = [
|
||||
{
|
||||
label: t.__("Add to Dictionary"),
|
||||
visible:
|
||||
properties.isEditable && isText && properties.misspelledWord.length > 0,
|
||||
click(_item) {
|
||||
webContents.session.addWordToSpellCheckerDictionary(
|
||||
properties.misspelledWord,
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "separator",
|
||||
visible:
|
||||
properties.isEditable && isText && properties.misspelledWord.length > 0,
|
||||
},
|
||||
{
|
||||
label: `${t.__("Look Up")} "${properties.selectionText}"`,
|
||||
visible: process.platform === "darwin" && isText,
|
||||
click(_item) {
|
||||
webContents.showDefinitionForSelection();
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "separator",
|
||||
visible: process.platform === "darwin" && isText,
|
||||
},
|
||||
{
|
||||
label: t.__("Cut"),
|
||||
visible: isText,
|
||||
enabled: properties.isEditable,
|
||||
accelerator: "CommandOrControl+X",
|
||||
click(_item) {
|
||||
webContents.cut();
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t.__("Copy"),
|
||||
accelerator: "CommandOrControl+C",
|
||||
enabled: properties.editFlags.canCopy,
|
||||
click(_item) {
|
||||
webContents.copy();
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t.__("Paste"), // Bug: Paste replaces text
|
||||
accelerator: "CommandOrControl+V",
|
||||
enabled: properties.isEditable,
|
||||
click() {
|
||||
webContents.paste();
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "separator",
|
||||
},
|
||||
{
|
||||
label:
|
||||
linkUrl?.protocol === "mailto:"
|
||||
? t.__("Copy Email Address")
|
||||
: t.__("Copy Link"),
|
||||
visible: isLink,
|
||||
click(_item) {
|
||||
clipboard.write({
|
||||
bookmark: properties.linkText,
|
||||
text:
|
||||
linkUrl?.protocol === "mailto:"
|
||||
? linkUrl.pathname
|
||||
: properties.linkURL,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t.__("Copy Image"),
|
||||
visible: properties.mediaType === "image",
|
||||
click(_item) {
|
||||
webContents.copyImageAt(properties.x, properties.y);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t.__("Copy Image URL"),
|
||||
visible: properties.mediaType === "image",
|
||||
click(_item) {
|
||||
clipboard.write({
|
||||
bookmark: properties.srcURL,
|
||||
text: properties.srcURL,
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
if (properties.misspelledWord) {
|
||||
if (properties.dictionarySuggestions.length > 0) {
|
||||
const suggestions: MenuItemConstructorOptions[] =
|
||||
properties.dictionarySuggestions.map((suggestion: string) =>
|
||||
makeSuggestion(suggestion),
|
||||
);
|
||||
menuTemplate = [...suggestions, ...menuTemplate];
|
||||
} else {
|
||||
menuTemplate.unshift({
|
||||
label: t.__("No Suggestion Found"),
|
||||
enabled: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
// Hide the invisible separators on Linux and Windows
|
||||
// Electron has a bug which ignores visible: false parameter for separator menu items. So we remove them here.
|
||||
// https://github.com/electron/electron/issues/5869
|
||||
// https://github.com/electron/electron/issues/6906
|
||||
|
||||
const filteredMenuTemplate = menuTemplate.filter(
|
||||
(menuItem) => menuItem.visible ?? true,
|
||||
);
|
||||
const menu = Menu.buildFromTemplate(filteredMenuTemplate);
|
||||
menu.popup({
|
||||
window: BrowserWindow.fromWebContents(webContents) ?? undefined,
|
||||
frame: properties.frame ?? undefined,
|
||||
x: properties.x,
|
||||
y: properties.y,
|
||||
sourceType: properties.menuSourceType,
|
||||
});
|
||||
};
|
||||
@@ -1,73 +1,51 @@
|
||||
import {type Html, html} from "../../../common/html.ts";
|
||||
import type {TabPage} from "../../../common/types.ts";
|
||||
'use strict';
|
||||
|
||||
import {generateNodeFromHtml} from "./base.ts";
|
||||
import Tab, {type TabProperties} from "./tab.ts";
|
||||
import Tab = require('./tab');
|
||||
|
||||
export type FunctionalTabProperties = {
|
||||
$view: Element;
|
||||
page: TabPage;
|
||||
} & TabProperties;
|
||||
class FunctionalTab extends Tab {
|
||||
$closeButton: Element;
|
||||
template(): string {
|
||||
return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
|
||||
<div class="server-tab-badge close-button">
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
<div class="server-tab">
|
||||
<i class="material-icons">${this.props.materialIcon}</i>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
export default class FunctionalTab extends Tab {
|
||||
$view: Element;
|
||||
$el: Element;
|
||||
$closeButton?: Element;
|
||||
// TODO: Typescript - This type for props should be TabProps
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.init();
|
||||
}
|
||||
|
||||
constructor({$view, ...properties}: FunctionalTabProperties) {
|
||||
super(properties);
|
||||
init(): void {
|
||||
this.$el = this.generateNodeFromTemplate(this.template());
|
||||
if (this.props.name !== 'Settings') {
|
||||
this.props.$root.append(this.$el);
|
||||
this.$closeButton = this.$el.querySelectorAll('.server-tab-badge')[0];
|
||||
this.registerListeners();
|
||||
}
|
||||
}
|
||||
|
||||
this.$view = $view;
|
||||
this.$el = generateNodeFromHtml(this.templateHtml());
|
||||
if (properties.page !== "Settings") {
|
||||
this.properties.$root.append(this.$el);
|
||||
this.$closeButton = this.$el.querySelector(".server-tab-badge")!;
|
||||
this.registerListeners();
|
||||
}
|
||||
}
|
||||
registerListeners(): void {
|
||||
super.registerListeners();
|
||||
|
||||
override async activate(): Promise<void> {
|
||||
await super.activate();
|
||||
this.$view.classList.add("active");
|
||||
}
|
||||
this.$el.addEventListener('mouseover', () => {
|
||||
this.$closeButton.classList.add('active');
|
||||
});
|
||||
|
||||
override async deactivate(): Promise<void> {
|
||||
await super.deactivate();
|
||||
this.$view.classList.remove("active");
|
||||
}
|
||||
this.$el.addEventListener('mouseout', () => {
|
||||
this.$closeButton.classList.remove('active');
|
||||
});
|
||||
|
||||
override async destroy(): Promise<void> {
|
||||
await super.destroy();
|
||||
this.$view.remove();
|
||||
}
|
||||
|
||||
templateHtml(): Html {
|
||||
return html`
|
||||
<div class="tab functional-tab" data-tab-id="${this.properties.tabIndex}">
|
||||
<div class="server-tab-badge close-button">
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
<div class="server-tab">
|
||||
<i class="material-icons">${this.properties.materialIcon}</i>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
override registerListeners(): void {
|
||||
super.registerListeners();
|
||||
|
||||
this.$el.addEventListener("mouseover", () => {
|
||||
this.$closeButton?.classList.add("active");
|
||||
});
|
||||
|
||||
this.$el.addEventListener("mouseout", () => {
|
||||
this.$closeButton?.classList.remove("active");
|
||||
});
|
||||
|
||||
this.$closeButton?.addEventListener("click", (event) => {
|
||||
this.properties.onDestroy?.();
|
||||
event.stopPropagation();
|
||||
});
|
||||
}
|
||||
this.$closeButton.addEventListener('click', (e: Event) => {
|
||||
this.props.onDestroy();
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export = FunctionalTab;
|
||||
|
||||
83
app/renderer/js/components/handle-external-link.ts
Normal file
83
app/renderer/js/components/handle-external-link.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { ipcRenderer, remote } from 'electron';
|
||||
|
||||
import LinkUtil = require('../utils/link-util');
|
||||
import DomainUtil = require('../utils/domain-util');
|
||||
import ConfigUtil = require('../utils/config-util');
|
||||
|
||||
const { shell, app } = remote;
|
||||
|
||||
const dingSound = new Audio('../resources/sounds/ding.ogg');
|
||||
|
||||
// TODO: TypeScript - Figure out a way to pass correct type here.
|
||||
function handleExternalLink(this: any, event: any): void {
|
||||
const { url } = event;
|
||||
const domainPrefix = DomainUtil.getDomain(this.props.index).url;
|
||||
const downloadPath = ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`);
|
||||
const shouldShowInFolder = ConfigUtil.getConfigItem('showDownloadFolder', false);
|
||||
|
||||
// Whitelist URLs which are allowed to be opened in the app
|
||||
const {
|
||||
isInternalUrl: isWhiteListURL,
|
||||
isUploadsUrl: isUploadsURL
|
||||
} = LinkUtil.isInternal(domainPrefix, url);
|
||||
|
||||
if (isWhiteListURL) {
|
||||
event.preventDefault();
|
||||
|
||||
// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
|
||||
// Show pdf attachments in a new window
|
||||
// if (LinkUtil.isPDF(url) && isUploadsURL) {
|
||||
// ipcRenderer.send('pdf-view', url);
|
||||
// return;
|
||||
// }
|
||||
|
||||
// download txt, mp3, mp4 etc.. by using downloadURL in the
|
||||
// main process which allows the user to save the files to their desktop
|
||||
// and not trigger webview reload while image in webview will
|
||||
// do nothing and will not save it
|
||||
|
||||
// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
|
||||
// if (!LinkUtil.isImage(url) && !LinkUtil.isPDF(url) && isUploadsURL) {
|
||||
if (!LinkUtil.isImage(url) && isUploadsURL) {
|
||||
ipcRenderer.send('downloadFile', url, downloadPath);
|
||||
ipcRenderer.once('downloadFileCompleted', (_event: Event, filePath: string, fileName: string) => {
|
||||
const downloadNotification = new Notification('Download Complete', {
|
||||
body: shouldShowInFolder ? `Click to show ${fileName} in folder` : `Click to open ${fileName}`,
|
||||
silent: true // We'll play our own sound - ding.ogg
|
||||
});
|
||||
|
||||
// Play sound to indicate download complete
|
||||
if (!ConfigUtil.getConfigItem('silent')) {
|
||||
dingSound.play();
|
||||
}
|
||||
|
||||
downloadNotification.addEventListener('click', () => {
|
||||
if (shouldShowInFolder) {
|
||||
// Reveal file in download folder
|
||||
shell.showItemInFolder(filePath);
|
||||
} else {
|
||||
// Open file in the default native app
|
||||
shell.openItem(filePath);
|
||||
}
|
||||
});
|
||||
ipcRenderer.removeAllListeners('downloadFileFailed');
|
||||
});
|
||||
|
||||
ipcRenderer.once('downloadFileFailed', () => {
|
||||
// Automatic download failed, so show save dialog prompt and download
|
||||
// through webview
|
||||
this.$el.downloadURL(url);
|
||||
ipcRenderer.removeAllListeners('downloadFileCompleted');
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// open internal urls inside the current webview.
|
||||
this.$el.loadURL(url);
|
||||
} else {
|
||||
event.preventDefault();
|
||||
shell.openExternal(url);
|
||||
}
|
||||
}
|
||||
|
||||
export = handleExternalLink;
|
||||
@@ -1,93 +1,68 @@
|
||||
import process from "node:process";
|
||||
'use strict';
|
||||
|
||||
import {type Html, html} from "../../../common/html.ts";
|
||||
import {ipcRenderer} from "../typed-ipc-renderer.ts";
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
import {generateNodeFromHtml} from "./base.ts";
|
||||
import Tab, {type TabProperties} from "./tab.ts";
|
||||
import type WebView from "./webview.ts";
|
||||
import Tab = require('./tab');
|
||||
import SystemUtil = require('../utils/system-util');
|
||||
|
||||
export type ServerTabProperties = {
|
||||
webview: Promise<WebView>;
|
||||
} & TabProperties;
|
||||
class ServerTab extends Tab {
|
||||
$badge: Element;
|
||||
|
||||
export default class ServerTab extends Tab {
|
||||
webview: Promise<WebView>;
|
||||
$el: Element;
|
||||
$name: Element;
|
||||
$icon: HTMLImageElement;
|
||||
$badge: Element;
|
||||
template(): string {
|
||||
return `<div class="tab" data-tab-id="${this.props.tabIndex}">
|
||||
<div class="server-tooltip" style="display:none">${this.props.name}</div>
|
||||
<div class="server-tab-badge"></div>
|
||||
<div class="server-tab">
|
||||
<img class="server-icons" src='${this.props.icon}'/>
|
||||
</div>
|
||||
<div class="server-tab-shortcut">${this.generateShortcutText()}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
constructor({webview, ...properties}: ServerTabProperties) {
|
||||
super(properties);
|
||||
// TODO: Typescript - This type for props should be TabProps
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.init();
|
||||
}
|
||||
|
||||
this.webview = webview;
|
||||
this.$el = generateNodeFromHtml(this.templateHtml());
|
||||
this.properties.$root.append(this.$el);
|
||||
this.registerListeners();
|
||||
this.$name = this.$el.querySelector(".server-tooltip")!;
|
||||
this.$icon = this.$el.querySelector(".server-icons")!;
|
||||
this.$badge = this.$el.querySelector(".server-tab-badge")!;
|
||||
}
|
||||
init(): void {
|
||||
this.$el = this.generateNodeFromTemplate(this.template());
|
||||
this.props.$root.append(this.$el);
|
||||
this.registerListeners();
|
||||
this.$badge = this.$el.querySelectorAll('.server-tab-badge')[0];
|
||||
}
|
||||
|
||||
override async activate(): Promise<void> {
|
||||
await super.activate();
|
||||
(await this.webview).load();
|
||||
}
|
||||
updateBadge(count: number): void {
|
||||
if (count > 0) {
|
||||
const formattedCount = count > 999 ? '1K+' : count.toString();
|
||||
this.$badge.innerHTML = formattedCount;
|
||||
this.$badge.classList.add('active');
|
||||
} else {
|
||||
this.$badge.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
override async deactivate(): Promise<void> {
|
||||
await super.deactivate();
|
||||
(await this.webview).hide();
|
||||
}
|
||||
generateShortcutText(): string {
|
||||
// Only provide shortcuts for server [0..10]
|
||||
if (this.props.index >= 10) {
|
||||
return '';
|
||||
}
|
||||
|
||||
override async destroy(): Promise<void> {
|
||||
await super.destroy();
|
||||
(await this.webview).destroy();
|
||||
}
|
||||
const shownIndex = this.props.index + 1;
|
||||
|
||||
templateHtml(): Html {
|
||||
return html`
|
||||
<div class="tab" data-tab-id="${this.properties.tabIndex}">
|
||||
<div class="server-tooltip" style="display:none">
|
||||
${this.properties.label}
|
||||
</div>
|
||||
<div class="server-tab-badge"></div>
|
||||
<div class="server-tab">
|
||||
<img class="server-icons" src="${this.properties.icon}" />
|
||||
</div>
|
||||
<div class="server-tab-shortcut">${this.generateShortcutText()}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
let shortcutText = '';
|
||||
|
||||
setLabel(label: string): void {
|
||||
this.properties.label = label;
|
||||
this.$name.textContent = label;
|
||||
}
|
||||
if (SystemUtil.getOS() === 'Mac') {
|
||||
shortcutText = `⌘ ${shownIndex}`;
|
||||
} else {
|
||||
shortcutText = `Ctrl+${shownIndex}`;
|
||||
}
|
||||
|
||||
setIcon(icon: string): void {
|
||||
this.properties.icon = icon;
|
||||
this.$icon.src = icon;
|
||||
}
|
||||
// Array index == Shown index - 1
|
||||
ipcRenderer.send('switch-server-tab', shownIndex - 1);
|
||||
|
||||
updateBadge(count: number): void {
|
||||
this.$badge.textContent = count > 999 ? "1K+" : count.toString();
|
||||
this.$badge.classList.toggle("active", count > 0);
|
||||
}
|
||||
|
||||
generateShortcutText(): string {
|
||||
// Only provide shortcuts for server [0..9]
|
||||
if (this.properties.index >= 9) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const shownIndex = this.properties.index + 1;
|
||||
|
||||
// Array index == Shown index - 1
|
||||
ipcRenderer.send("switch-server-tab", shownIndex - 1);
|
||||
|
||||
return process.platform === "darwin"
|
||||
? `⌘${shownIndex}`
|
||||
: `Ctrl+${shownIndex}`;
|
||||
}
|
||||
return shortcutText;
|
||||
}
|
||||
}
|
||||
|
||||
export = ServerTab;
|
||||
|
||||
@@ -1,46 +1,48 @@
|
||||
import type {TabPage, TabRole} from "../../../common/types.ts";
|
||||
'use strict';
|
||||
|
||||
export type TabProperties = {
|
||||
role: TabRole;
|
||||
page?: TabPage;
|
||||
icon?: string;
|
||||
label: string;
|
||||
$root: Element;
|
||||
onClick: () => void;
|
||||
index: number;
|
||||
tabIndex: number;
|
||||
onHover?: () => void;
|
||||
onHoverOut?: () => void;
|
||||
materialIcon?: string;
|
||||
onDestroy?: () => void;
|
||||
};
|
||||
import WebView = require('./webview');
|
||||
import BaseComponent = require('./base');
|
||||
|
||||
export default abstract class Tab {
|
||||
abstract $el: Element;
|
||||
|
||||
constructor(readonly properties: TabProperties) {}
|
||||
|
||||
registerListeners(): void {
|
||||
this.$el.addEventListener("click", this.properties.onClick);
|
||||
|
||||
if (this.properties.onHover !== undefined) {
|
||||
this.$el.addEventListener("mouseover", this.properties.onHover);
|
||||
}
|
||||
|
||||
if (this.properties.onHoverOut !== undefined) {
|
||||
this.$el.addEventListener("mouseout", this.properties.onHoverOut);
|
||||
}
|
||||
}
|
||||
|
||||
async activate(): Promise<void> {
|
||||
this.$el.classList.add("active");
|
||||
}
|
||||
|
||||
async deactivate(): Promise<void> {
|
||||
this.$el.classList.remove("active");
|
||||
}
|
||||
|
||||
async destroy(): Promise<void> {
|
||||
this.$el.remove();
|
||||
}
|
||||
// TODO: TypeScript - Type annotate props
|
||||
interface TabProps {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
class Tab extends BaseComponent {
|
||||
props: TabProps;
|
||||
webview: WebView;
|
||||
$el: Element;
|
||||
constructor(props: TabProps) {
|
||||
super();
|
||||
|
||||
this.props = props;
|
||||
this.webview = this.props.webview;
|
||||
}
|
||||
|
||||
registerListeners(): void {
|
||||
this.$el.addEventListener('click', this.props.onClick);
|
||||
this.$el.addEventListener('mouseover', this.props.onHover);
|
||||
this.$el.addEventListener('mouseout', this.props.onHoverOut);
|
||||
}
|
||||
|
||||
showNetworkError(): void {
|
||||
this.webview.forceLoad();
|
||||
}
|
||||
|
||||
activate(): void {
|
||||
this.$el.classList.add('active');
|
||||
this.webview.load();
|
||||
}
|
||||
|
||||
deactivate(): void {
|
||||
this.$el.classList.remove('active');
|
||||
this.webview.hide();
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
this.$el.parentNode.removeChild(this.$el);
|
||||
this.webview.$el.parentNode.removeChild(this.webview.$el);
|
||||
}
|
||||
}
|
||||
|
||||
export = Tab;
|
||||
|
||||
@@ -1,342 +1,296 @@
|
||||
import type {WebContents} from "electron/main";
|
||||
import fs from "node:fs";
|
||||
'use strict';
|
||||
import { remote } from 'electron';
|
||||
|
||||
import * as remote from "@electron/remote";
|
||||
import {app, dialog} from "@electron/remote";
|
||||
import path = require('path');
|
||||
import fs = require('fs');
|
||||
import ConfigUtil = require('../utils/config-util');
|
||||
import SystemUtil = require('../utils/system-util');
|
||||
import BaseComponent = require('../components/base');
|
||||
import handleExternalLink = require('../components/handle-external-link');
|
||||
|
||||
import * as ConfigUtil from "../../../common/config-util.ts";
|
||||
import {type Html, html} from "../../../common/html.ts";
|
||||
import * as t from "../../../common/translation-util.ts";
|
||||
import type {RendererMessage} from "../../../common/typed-ipc.ts";
|
||||
import type {TabRole} from "../../../common/types.ts";
|
||||
import preloadCss from "../../css/preload.css?raw";
|
||||
import {ipcRenderer} from "../typed-ipc-renderer.ts";
|
||||
import * as SystemUtil from "../utils/system-util.ts";
|
||||
const { app, dialog } = remote;
|
||||
|
||||
import {generateNodeFromHtml} from "./base.ts";
|
||||
import {contextMenu} from "./context-menu.ts";
|
||||
const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
|
||||
|
||||
const shouldSilentWebview = ConfigUtil.getConfigItem("silent", false);
|
||||
|
||||
type WebViewProperties = {
|
||||
$root: Element;
|
||||
rootWebContents: WebContents;
|
||||
index: number;
|
||||
tabIndex: number;
|
||||
url: string;
|
||||
role: TabRole;
|
||||
isActive: () => boolean;
|
||||
switchLoading: (loading: boolean, url: string) => void;
|
||||
onNetworkError: (index: number) => void;
|
||||
preload?: string;
|
||||
onTitleChange: () => void;
|
||||
hasPermission?: (origin: string, permission: string) => boolean;
|
||||
unsupportedMessage?: string;
|
||||
};
|
||||
|
||||
export default class WebView {
|
||||
static templateHtml(properties: WebViewProperties): Html {
|
||||
return html`
|
||||
<div class="webview-pane">
|
||||
<div
|
||||
class="webview-unsupported"
|
||||
${properties.unsupportedMessage === undefined ? html`hidden` : html``}
|
||||
>
|
||||
<span class="webview-unsupported-message"
|
||||
>${properties.unsupportedMessage ?? ""}</span
|
||||
>
|
||||
<span class="webview-unsupported-dismiss">×</span>
|
||||
</div>
|
||||
<webview
|
||||
data-tab-id="${properties.tabIndex}"
|
||||
src="${properties.url}"
|
||||
${properties.preload === undefined
|
||||
? html``
|
||||
: html`preload="${properties.preload}"`}
|
||||
partition="persist:webviewsession"
|
||||
allowpopups
|
||||
>
|
||||
</webview>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static async create(properties: WebViewProperties): Promise<WebView> {
|
||||
const $pane = generateNodeFromHtml(
|
||||
WebView.templateHtml(properties),
|
||||
) as HTMLElement;
|
||||
properties.$root.append($pane);
|
||||
|
||||
const $webview: HTMLElement = $pane.querySelector(":scope > webview")!;
|
||||
await new Promise<void>((resolve) => {
|
||||
$webview.addEventListener(
|
||||
"did-attach",
|
||||
() => {
|
||||
resolve();
|
||||
},
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
// Work around https://github.com/electron/electron/issues/26904
|
||||
function getWebContentsIdFunction(
|
||||
this: undefined,
|
||||
selector: string,
|
||||
): number {
|
||||
return document
|
||||
.querySelector<Electron.WebviewTag>(selector)!
|
||||
.getWebContentsId();
|
||||
}
|
||||
|
||||
const selector = `webview[data-tab-id="${CSS.escape(
|
||||
`${properties.tabIndex}`,
|
||||
)}"]`;
|
||||
const webContentsId: unknown =
|
||||
await properties.rootWebContents.executeJavaScript(
|
||||
`(${getWebContentsIdFunction.toString()})(${JSON.stringify(selector)})`,
|
||||
);
|
||||
if (typeof webContentsId !== "number") {
|
||||
throw new TypeError("Failed to get WebContents ID");
|
||||
}
|
||||
|
||||
return new WebView(properties, $pane, $webview, webContentsId);
|
||||
}
|
||||
|
||||
badgeCount = 0;
|
||||
loading = true;
|
||||
private customCss: string | false | null;
|
||||
private readonly $webviewsContainer: DOMTokenList;
|
||||
private readonly $unsupported: HTMLElement;
|
||||
private readonly $unsupportedMessage: HTMLElement;
|
||||
private readonly $unsupportedDismiss: HTMLElement;
|
||||
private unsupportedDismissed = false;
|
||||
|
||||
private constructor(
|
||||
readonly properties: WebViewProperties,
|
||||
private readonly $pane: HTMLElement,
|
||||
private readonly $webview: HTMLElement,
|
||||
readonly webContentsId: number,
|
||||
) {
|
||||
this.customCss = ConfigUtil.getConfigItem("customCSS", null);
|
||||
this.$webviewsContainer = document.querySelector(
|
||||
"#webviews-container",
|
||||
)!.classList;
|
||||
this.$unsupported = $pane.querySelector(".webview-unsupported")!;
|
||||
this.$unsupportedMessage = $pane.querySelector(
|
||||
".webview-unsupported-message",
|
||||
)!;
|
||||
this.$unsupportedDismiss = $pane.querySelector(
|
||||
".webview-unsupported-dismiss",
|
||||
)!;
|
||||
|
||||
this.registerListeners();
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
this.$pane.remove();
|
||||
}
|
||||
|
||||
getWebContents(): WebContents {
|
||||
return remote.webContents.fromId(this.webContentsId)!;
|
||||
}
|
||||
|
||||
showNotificationSettings(): void {
|
||||
this.send("show-notification-settings");
|
||||
this.focus();
|
||||
}
|
||||
|
||||
focus(): void {
|
||||
this.$webview.focus();
|
||||
// Work around https://github.com/electron/electron/issues/31918
|
||||
this.$webview.shadowRoot?.querySelector("iframe")?.focus();
|
||||
}
|
||||
|
||||
hide(): void {
|
||||
this.$pane.classList.remove("active");
|
||||
}
|
||||
|
||||
load(): void {
|
||||
this.show();
|
||||
}
|
||||
|
||||
zoomIn(): void {
|
||||
this.getWebContents().zoomLevel += 0.5;
|
||||
}
|
||||
|
||||
zoomOut(): void {
|
||||
this.getWebContents().zoomLevel -= 0.5;
|
||||
}
|
||||
|
||||
zoomActualSize(): void {
|
||||
this.getWebContents().zoomLevel = 0;
|
||||
}
|
||||
|
||||
logOut(): void {
|
||||
this.send("logout");
|
||||
}
|
||||
|
||||
showKeyboardShortcuts(): void {
|
||||
this.send("show-keyboard-shortcuts");
|
||||
this.focus();
|
||||
}
|
||||
|
||||
openDevTools(): void {
|
||||
this.getWebContents().openDevTools();
|
||||
}
|
||||
|
||||
back(): void {
|
||||
if (this.getWebContents().navigationHistory.canGoBack()) {
|
||||
this.getWebContents().navigationHistory.goBack();
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
|
||||
canGoBackButton(): void {
|
||||
const $backButton = document.querySelector(
|
||||
"#actions-container #back-action",
|
||||
)!;
|
||||
$backButton.classList.toggle(
|
||||
"disable",
|
||||
!this.getWebContents().navigationHistory.canGoBack(),
|
||||
);
|
||||
}
|
||||
|
||||
forward(): void {
|
||||
if (this.getWebContents().navigationHistory.canGoForward()) {
|
||||
this.getWebContents().navigationHistory.goForward();
|
||||
}
|
||||
}
|
||||
|
||||
reload(): void {
|
||||
this.hide();
|
||||
// Shows the loading indicator till the webview is reloaded
|
||||
this.$webviewsContainer.remove("loaded");
|
||||
this.loading = true;
|
||||
this.properties.switchLoading(true, this.properties.url);
|
||||
this.getWebContents().reload();
|
||||
}
|
||||
|
||||
setUnsupportedMessage(unsupportedMessage: string | undefined) {
|
||||
this.$unsupported.hidden =
|
||||
unsupportedMessage === undefined || this.unsupportedDismissed;
|
||||
this.$unsupportedMessage.textContent = unsupportedMessage ?? "";
|
||||
}
|
||||
|
||||
send<Channel extends keyof RendererMessage>(
|
||||
channel: Channel,
|
||||
...arguments_: Parameters<RendererMessage[Channel]>
|
||||
): void {
|
||||
ipcRenderer.send("forward-to", this.webContentsId, channel, ...arguments_);
|
||||
}
|
||||
|
||||
private registerListeners(): void {
|
||||
const webContents = this.getWebContents();
|
||||
|
||||
if (shouldSilentWebview) {
|
||||
webContents.setAudioMuted(true);
|
||||
}
|
||||
|
||||
webContents.on("page-title-updated", (_event, title) => {
|
||||
this.badgeCount = this.getBadgeCount(title);
|
||||
this.properties.onTitleChange();
|
||||
});
|
||||
|
||||
this.$webview.addEventListener("did-navigate-in-page", () => {
|
||||
this.canGoBackButton();
|
||||
});
|
||||
|
||||
this.$webview.addEventListener("did-navigate", () => {
|
||||
this.canGoBackButton();
|
||||
});
|
||||
|
||||
webContents.on("page-favicon-updated", (_event, favicons) => {
|
||||
// This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
|
||||
// https://chat.zulip.org/static/images/favicon/favicon-pms.png
|
||||
if (favicons[0].indexOf("favicon-pms") > 0 && app.dock !== undefined) {
|
||||
// This api is only supported on macOS
|
||||
app.dock.setBadge("●");
|
||||
// Bounce the dock
|
||||
if (ConfigUtil.getConfigItem("dockBouncing", true)) {
|
||||
app.dock.bounce();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
webContents.addListener("context-menu", (event, menuParameters) => {
|
||||
contextMenu(webContents, event, menuParameters);
|
||||
});
|
||||
|
||||
this.$webview.addEventListener("dom-ready", () => {
|
||||
this.loading = false;
|
||||
this.properties.switchLoading(false, this.properties.url);
|
||||
this.show();
|
||||
});
|
||||
|
||||
webContents.on("did-fail-load", (_event, _errorCode, errorDescription) => {
|
||||
const hasConnectivityError =
|
||||
SystemUtil.connectivityError.includes(errorDescription);
|
||||
if (hasConnectivityError) {
|
||||
console.error("error", errorDescription);
|
||||
if (!this.properties.url.includes("network.html")) {
|
||||
this.properties.onNetworkError(this.properties.index);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.$webview.addEventListener("did-start-loading", () => {
|
||||
this.properties.switchLoading(true, this.properties.url);
|
||||
});
|
||||
|
||||
this.$webview.addEventListener("did-stop-loading", () => {
|
||||
this.properties.switchLoading(false, this.properties.url);
|
||||
});
|
||||
|
||||
this.$unsupportedDismiss.addEventListener("click", () => {
|
||||
this.unsupportedDismissed = true;
|
||||
this.$unsupported.hidden = true;
|
||||
});
|
||||
|
||||
webContents.on("zoom-changed", (event, zoomDirection) => {
|
||||
if (zoomDirection === "in") this.zoomIn();
|
||||
else if (zoomDirection === "out") this.zoomOut();
|
||||
});
|
||||
}
|
||||
|
||||
private getBadgeCount(title: string): number {
|
||||
const messageCountInTitle = /^\((\d+)\)/.exec(title);
|
||||
return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
|
||||
}
|
||||
|
||||
private show(): void {
|
||||
// Do not show WebView if another tab was selected and this tab should be in background.
|
||||
if (!this.properties.isActive()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// To show or hide the loading indicator in the active tab
|
||||
this.$webviewsContainer.toggle("loaded", !this.loading);
|
||||
|
||||
this.$pane.classList.add("active");
|
||||
this.focus();
|
||||
this.properties.onTitleChange();
|
||||
// Injecting preload css in webview to override some css rules
|
||||
(async () => this.getWebContents().insertCSS(preloadCss))();
|
||||
|
||||
// Get customCSS again from config util to avoid warning user again
|
||||
const customCss = ConfigUtil.getConfigItem("customCSS", null);
|
||||
this.customCss = customCss;
|
||||
if (customCss) {
|
||||
if (!fs.existsSync(customCss)) {
|
||||
this.customCss = null;
|
||||
ConfigUtil.setConfigItem("customCSS", null);
|
||||
|
||||
const errorMessage = t.__("The custom CSS previously set is deleted.");
|
||||
dialog.showErrorBox(t.__("Custom CSS file deleted"), errorMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
(async () =>
|
||||
this.getWebContents().insertCSS(fs.readFileSync(customCss, "utf8")))();
|
||||
}
|
||||
}
|
||||
// TODO: TypeScript - Type annotate WebViewProps.
|
||||
interface WebViewProps {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
class WebView extends BaseComponent {
|
||||
props: any;
|
||||
zoomFactor: number;
|
||||
badgeCount: number;
|
||||
loading: boolean;
|
||||
customCSS: string;
|
||||
$webviewsContainer: DOMTokenList;
|
||||
$el: Electron.WebviewTag;
|
||||
|
||||
// This is required because in main.js we access WebView.method as
|
||||
// webview[method].
|
||||
[key: string]: any;
|
||||
|
||||
constructor(props: WebViewProps) {
|
||||
super();
|
||||
|
||||
this.props = props;
|
||||
this.zoomFactor = 1.0;
|
||||
this.loading = true;
|
||||
this.badgeCount = 0;
|
||||
this.customCSS = ConfigUtil.getConfigItem('customCSS');
|
||||
this.$webviewsContainer = document.querySelector('#webviews-container').classList;
|
||||
}
|
||||
|
||||
template(): string {
|
||||
return `<webview
|
||||
class="disabled"
|
||||
data-tab-id="${this.props.tabIndex}"
|
||||
src="${this.props.url}"
|
||||
${this.props.nodeIntegration ? 'nodeIntegration' : ''}
|
||||
${this.props.preload ? 'preload="js/preload.js"' : ''}
|
||||
partition="persist:webviewsession"
|
||||
name="${this.props.name}"
|
||||
webpreferences="allowRunningInsecureContent, javascript=yes">
|
||||
</webview>`;
|
||||
}
|
||||
|
||||
init(): void {
|
||||
this.$el = this.generateNodeFromTemplate(this.template()) as Electron.WebviewTag;
|
||||
this.props.$root.append(this.$el);
|
||||
|
||||
this.registerListeners();
|
||||
}
|
||||
|
||||
registerListeners(): void {
|
||||
this.$el.addEventListener('new-window', event => {
|
||||
handleExternalLink.call(this, event);
|
||||
});
|
||||
|
||||
if (shouldSilentWebview) {
|
||||
this.$el.addEventListener('dom-ready', () => {
|
||||
this.$el.setAudioMuted(true);
|
||||
});
|
||||
}
|
||||
|
||||
this.$el.addEventListener('page-title-updated', event => {
|
||||
const { title } = event;
|
||||
this.badgeCount = this.getBadgeCount(title);
|
||||
this.props.onTitleChange();
|
||||
});
|
||||
|
||||
this.$el.addEventListener('did-navigate-in-page', event => {
|
||||
const isSettingPage = event.url.includes('renderer/preference.html');
|
||||
if (isSettingPage) {
|
||||
return;
|
||||
}
|
||||
this.canGoBackButton();
|
||||
});
|
||||
|
||||
this.$el.addEventListener('did-navigate', () => {
|
||||
this.canGoBackButton();
|
||||
});
|
||||
|
||||
this.$el.addEventListener('page-favicon-updated', event => {
|
||||
const { favicons } = event;
|
||||
|
||||
// This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
|
||||
// https://chat.zulip.org/static/images/favicon/favicon-pms.png
|
||||
if (favicons[0].indexOf('favicon-pms') > 0 && process.platform === 'darwin') {
|
||||
// This api is only supported on macOS
|
||||
app.dock.setBadge('●');
|
||||
// bounce the dock
|
||||
if (ConfigUtil.getConfigItem('dockBouncing')) {
|
||||
app.dock.bounce();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.$el.addEventListener('dom-ready', () => {
|
||||
if (this.props.role === 'server') {
|
||||
this.$el.classList.add('onload');
|
||||
}
|
||||
this.loading = false;
|
||||
this.props.switchLoading(false, this.props.url);
|
||||
this.show();
|
||||
|
||||
// Refocus text boxes after reload
|
||||
// Remove when upstream issue https://github.com/electron/electron/issues/14474 is fixed
|
||||
this.$el.blur();
|
||||
this.$el.focus();
|
||||
});
|
||||
|
||||
this.$el.addEventListener('did-fail-load', event => {
|
||||
const { errorDescription } = event;
|
||||
const hasConnectivityErr = SystemUtil.connectivityERR.includes(errorDescription);
|
||||
if (hasConnectivityErr) {
|
||||
console.error('error', errorDescription);
|
||||
if (!this.props.url.includes('network.html')) {
|
||||
this.props.onNetworkError(this.props.index);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.$el.addEventListener('did-start-loading', () => {
|
||||
const isSettingPage = this.props.url.includes('renderer/preference.html');
|
||||
if (!isSettingPage) {
|
||||
this.props.switchLoading(true, this.props.url);
|
||||
}
|
||||
let userAgent = SystemUtil.getUserAgent();
|
||||
if (!userAgent) {
|
||||
SystemUtil.setUserAgent(this.$el.getUserAgent());
|
||||
userAgent = SystemUtil.getUserAgent();
|
||||
}
|
||||
this.$el.setUserAgent(userAgent);
|
||||
});
|
||||
|
||||
this.$el.addEventListener('did-stop-loading', () => {
|
||||
this.props.switchLoading(false, this.props.url);
|
||||
});
|
||||
}
|
||||
|
||||
getBadgeCount(title: string): number {
|
||||
const messageCountInTitle = (/\((\d+)\)/).exec(title);
|
||||
return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
|
||||
}
|
||||
|
||||
showNotificationSettings(): void {
|
||||
this.$el.executeJavaScript('showNotificationSettings()');
|
||||
}
|
||||
|
||||
show(): void {
|
||||
// Do not show WebView if another tab was selected and this tab should be in background.
|
||||
if (!this.props.isActive()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// To show or hide the loading indicator in the the active tab
|
||||
if (this.loading) {
|
||||
this.$webviewsContainer.remove('loaded');
|
||||
} else {
|
||||
this.$webviewsContainer.add('loaded');
|
||||
}
|
||||
|
||||
this.$el.classList.remove('disabled');
|
||||
this.$el.classList.add('active');
|
||||
setTimeout(() => {
|
||||
if (this.props.role === 'server') {
|
||||
this.$el.classList.remove('onload');
|
||||
}
|
||||
}, 1000);
|
||||
this.focus();
|
||||
this.props.onTitleChange();
|
||||
// Injecting preload css in webview to override some css rules
|
||||
this.$el.insertCSS(fs.readFileSync(path.join(__dirname, '/../../css/preload.css'), 'utf8'));
|
||||
|
||||
// get customCSS again from config util to avoid warning user again
|
||||
this.customCSS = ConfigUtil.getConfigItem('customCSS');
|
||||
if (this.customCSS) {
|
||||
if (!fs.existsSync(this.customCSS)) {
|
||||
this.customCSS = null;
|
||||
ConfigUtil.setConfigItem('customCSS', null);
|
||||
|
||||
const errMsg = 'The custom css previously set is deleted!';
|
||||
dialog.showErrorBox('custom css file deleted!', errMsg);
|
||||
return;
|
||||
}
|
||||
|
||||
this.$el.insertCSS(fs.readFileSync(path.resolve(__dirname, this.customCSS), 'utf8'));
|
||||
}
|
||||
}
|
||||
|
||||
focus(): void {
|
||||
// focus Webview and it's contents when Window regain focus.
|
||||
const webContents = this.$el.getWebContents();
|
||||
// HACK: webContents.isFocused() seems to be true even without the element
|
||||
// being in focus. So, we check against `document.activeElement`.
|
||||
if (webContents && this.$el !== document.activeElement) {
|
||||
// HACK: Looks like blur needs to be called on the previously focused
|
||||
// element to transfer focus correctly, in Electron v3.0.10
|
||||
// See https://github.com/electron/electron/issues/15718
|
||||
(document.activeElement as HTMLElement).blur();
|
||||
this.$el.focus();
|
||||
webContents.focus();
|
||||
}
|
||||
}
|
||||
|
||||
hide(): void {
|
||||
this.$el.classList.add('disabled');
|
||||
this.$el.classList.remove('active');
|
||||
}
|
||||
|
||||
load(): void {
|
||||
if (this.$el) {
|
||||
this.show();
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
zoomIn(): void {
|
||||
this.zoomFactor += 0.1;
|
||||
this.$el.setZoomFactor(this.zoomFactor);
|
||||
}
|
||||
|
||||
zoomOut(): void {
|
||||
this.zoomFactor -= 0.1;
|
||||
this.$el.setZoomFactor(this.zoomFactor);
|
||||
}
|
||||
|
||||
zoomActualSize(): void {
|
||||
this.zoomFactor = 1.0;
|
||||
this.$el.setZoomFactor(this.zoomFactor);
|
||||
}
|
||||
|
||||
logOut(): void {
|
||||
this.$el.executeJavaScript('logout()');
|
||||
}
|
||||
|
||||
showShortcut(): void {
|
||||
this.$el.executeJavaScript('shortcut()');
|
||||
}
|
||||
|
||||
openDevTools(): void {
|
||||
this.$el.openDevTools();
|
||||
}
|
||||
|
||||
back(): void {
|
||||
if (this.$el.canGoBack()) {
|
||||
this.$el.goBack();
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
|
||||
canGoBackButton(): void {
|
||||
const $backButton = document.querySelector('#actions-container #back-action');
|
||||
if (this.$el.canGoBack()) {
|
||||
$backButton.classList.remove('disable');
|
||||
} else {
|
||||
$backButton.classList.add('disable');
|
||||
}
|
||||
}
|
||||
|
||||
forward(): void {
|
||||
if (this.$el.canGoForward()) {
|
||||
this.$el.goForward();
|
||||
}
|
||||
}
|
||||
|
||||
reload(): void {
|
||||
this.hide();
|
||||
// Shows the loading indicator till the webview is reloaded
|
||||
this.$webviewsContainer.remove('loaded');
|
||||
this.loading = true;
|
||||
this.props.switchLoading(true, this.props.url);
|
||||
this.$el.reload();
|
||||
}
|
||||
|
||||
forceLoad(): void {
|
||||
this.init();
|
||||
}
|
||||
|
||||
send(channel: string, ...param: any[]): void {
|
||||
this.$el.send(channel, ...param);
|
||||
}
|
||||
}
|
||||
|
||||
export = WebView;
|
||||
|
||||
@@ -1,114 +1,59 @@
|
||||
import {EventEmitter} from "node:events";
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
import {
|
||||
type ClipboardDecrypter,
|
||||
ClipboardDecrypterImplementation,
|
||||
} from "./clipboard-decrypter.ts";
|
||||
import {type NotificationData, newNotification} from "./notification/index.ts";
|
||||
import {ipcRenderer} from "./typed-ipc-renderer.ts";
|
||||
import events = require('events');
|
||||
|
||||
type ListenerType = (...arguments_: any[]) => void;
|
||||
type ListenerType = ((...args: any[]) => void);
|
||||
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
export type ElectronBridge = {
|
||||
send_event: (eventName: string | symbol, ...arguments_: unknown[]) => boolean;
|
||||
on_event: (eventName: string, listener: ListenerType) => void;
|
||||
new_notification: (
|
||||
title: string,
|
||||
options: NotificationOptions,
|
||||
dispatch: (type: string, eventInit: EventInit) => boolean,
|
||||
) => NotificationData;
|
||||
get_idle_on_system: () => boolean;
|
||||
get_last_active_on_system: () => number;
|
||||
get_send_notification_reply_message_supported: () => boolean;
|
||||
set_send_notification_reply_message_supported: (value: boolean) => void;
|
||||
decrypt_clipboard: (version: number) => ClipboardDecrypter;
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
// we have and will have some non camelcase stuff
|
||||
// while working with zulip so just turning the rule off
|
||||
// for the whole file.
|
||||
/* eslint-disable @typescript-eslint/camelcase */
|
||||
class ElectronBridge extends events {
|
||||
send_notification_reply_message_supported: boolean;
|
||||
idle_on_system: boolean;
|
||||
last_active_on_system: number;
|
||||
|
||||
let notificationReplySupported = false;
|
||||
// Indicates if the user is idle or not
|
||||
let idle = false;
|
||||
// Indicates the time at which user was last active
|
||||
let lastActive = Date.now();
|
||||
constructor() {
|
||||
super();
|
||||
this.send_notification_reply_message_supported = false;
|
||||
// Indicates if the user is idle or not
|
||||
this.idle_on_system = false;
|
||||
|
||||
export const bridgeEvents = new EventEmitter(); // eslint-disable-line unicorn/prefer-event-target
|
||||
// Indicates the time at which user was last active
|
||||
this.last_active_on_system = Date.now();
|
||||
}
|
||||
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
const electron_bridge: ElectronBridge = {
|
||||
send_event: (eventName: string | symbol, ...arguments_: unknown[]): boolean =>
|
||||
bridgeEvents.emit(eventName, ...arguments_),
|
||||
send_event(eventName: string | symbol, ...args: any[]): void {
|
||||
this.emit(eventName, ...args);
|
||||
}
|
||||
|
||||
on_event(eventName: string, listener: ListenerType): void {
|
||||
bridgeEvents.on(eventName, listener);
|
||||
},
|
||||
on_event(eventName: string, listener: ListenerType): void {
|
||||
this.on(eventName, listener);
|
||||
}
|
||||
}
|
||||
|
||||
new_notification: (
|
||||
title: string,
|
||||
options: NotificationOptions,
|
||||
dispatch: (type: string, eventInit: EventInit) => boolean,
|
||||
): NotificationData => newNotification(title, options, dispatch),
|
||||
const electron_bridge = new ElectronBridge();
|
||||
|
||||
get_idle_on_system: (): boolean => idle,
|
||||
|
||||
get_last_active_on_system: (): number => lastActive,
|
||||
|
||||
get_send_notification_reply_message_supported: (): boolean =>
|
||||
notificationReplySupported,
|
||||
|
||||
set_send_notification_reply_message_supported(value: boolean): void {
|
||||
notificationReplySupported = value;
|
||||
},
|
||||
|
||||
decrypt_clipboard: (version: number): ClipboardDecrypter =>
|
||||
new ClipboardDecrypterImplementation(version),
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
|
||||
bridgeEvents.on("total_unread_count", (unreadCount: unknown) => {
|
||||
if (typeof unreadCount !== "number") {
|
||||
throw new TypeError("Expected string for unreadCount");
|
||||
}
|
||||
|
||||
ipcRenderer.send("unread-count", unreadCount);
|
||||
electron_bridge.on('total_unread_count', (...args) => {
|
||||
ipcRenderer.send('unread-count', ...args);
|
||||
});
|
||||
|
||||
bridgeEvents.on("realm_name", (realmName: unknown) => {
|
||||
if (typeof realmName !== "string") {
|
||||
throw new TypeError("Expected string for realmName");
|
||||
}
|
||||
|
||||
const serverUrl = location.origin;
|
||||
ipcRenderer.send("realm-name-changed", serverUrl, realmName);
|
||||
electron_bridge.on('realm_name', realmName => {
|
||||
const serverURL = location.origin;
|
||||
ipcRenderer.send('realm-name-changed', serverURL, realmName);
|
||||
});
|
||||
|
||||
bridgeEvents.on("realm_icon_url", (iconUrl: unknown) => {
|
||||
if (typeof iconUrl !== "string") {
|
||||
throw new TypeError("Expected string for iconUrl");
|
||||
}
|
||||
|
||||
const serverUrl = location.origin;
|
||||
ipcRenderer.send(
|
||||
"realm-icon-changed",
|
||||
serverUrl,
|
||||
iconUrl.includes("http") ? iconUrl : `${serverUrl}${iconUrl}`,
|
||||
);
|
||||
electron_bridge.on('realm_icon_url', iconURL => {
|
||||
const serverURL = location.origin;
|
||||
iconURL = iconURL.includes('http') ? iconURL : `${serverURL}${iconURL}`;
|
||||
ipcRenderer.send('realm-icon-changed', serverURL, iconURL);
|
||||
});
|
||||
|
||||
// Set user as active and update the time of last activity
|
||||
ipcRenderer.on("set-active", () => {
|
||||
idle = false;
|
||||
lastActive = Date.now();
|
||||
});
|
||||
|
||||
// Set user as idle and time of last activity is left unchanged
|
||||
ipcRenderer.on("set-idle", () => {
|
||||
idle = true;
|
||||
});
|
||||
|
||||
// This follows node's idiomatic implementation of event
|
||||
// this follows node's idiomatic implementation of event
|
||||
// emitters to make event handling more simpler instead of using
|
||||
// functions zulip side will emit event using ElectronBridge.send_event
|
||||
// functions zulip side will emit event using ElectronBrigde.send_event
|
||||
// which is alias of .emit and on this side we can handle the data by adding
|
||||
// a listener for the event.
|
||||
export default electron_bridge;
|
||||
export = electron_bridge;
|
||||
|
||||
/* eslint-enable @typescript-eslint/camelcase */
|
||||
|
||||
66
app/renderer/js/feedback.ts
Normal file
66
app/renderer/js/feedback.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import { remote } from 'electron';
|
||||
import SendFeedback from '@electron-elements/send-feedback';
|
||||
|
||||
import path = require('path');
|
||||
import fs = require('fs');
|
||||
|
||||
const { app } = remote;
|
||||
|
||||
interface SendFeedback extends HTMLElement {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
type SendFeedbackType = SendFeedback;
|
||||
|
||||
// make the button color match zulip app's theme
|
||||
SendFeedback.customStyles = `
|
||||
button:hover, button:focus {
|
||||
border-color: #4EBFAC;
|
||||
color: #4EBFAC;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #f1f1f1;
|
||||
color: #4EBFAC;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4EBFAC;
|
||||
border-color: #4EBFAC;
|
||||
}
|
||||
`;
|
||||
|
||||
customElements.define('send-feedback', SendFeedback);
|
||||
export const sendFeedback: SendFeedbackType = document.querySelector('send-feedback');
|
||||
export const feedbackHolder = sendFeedback.parentElement;
|
||||
|
||||
// customize the fields of custom elements
|
||||
sendFeedback.title = 'Report Issue';
|
||||
sendFeedback.titleLabel = 'Issue title:';
|
||||
sendFeedback.titlePlaceholder = 'Enter issue title';
|
||||
sendFeedback.textareaLabel = 'Describe the issue:';
|
||||
sendFeedback.textareaPlaceholder = 'Succinctly describe your issue and steps to reproduce it...';
|
||||
sendFeedback.buttonLabel = 'Report Issue';
|
||||
sendFeedback.loaderSuccessText = '';
|
||||
|
||||
sendFeedback.useReporter('emailReporter', {
|
||||
email: 'akash@zulipchat.com'
|
||||
});
|
||||
|
||||
feedbackHolder.addEventListener('click', (e: Event) => {
|
||||
// only remove the class if the grey out faded
|
||||
// part is clicked and not the feedback element itself
|
||||
if (e.target === e.currentTarget) {
|
||||
feedbackHolder.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
sendFeedback.addEventListener('feedback-submitted', () => {
|
||||
setTimeout(() => {
|
||||
feedbackHolder.classList.remove('show');
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
const dataDir = app.getPath('userData');
|
||||
const logsDir = path.join(dataDir, '/Logs');
|
||||
sendFeedback.logs.push(...fs.readdirSync(logsDir).map(file => path.join(logsDir, file)));
|
||||
File diff suppressed because it is too large
Load Diff
114
app/renderer/js/notification/darwin-notifications.ts
Normal file
114
app/renderer/js/notification/darwin-notifications.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
'use strict';
|
||||
import { ipcRenderer } from 'electron';
|
||||
import {
|
||||
appId, customReply, focusCurrentServer, parseReply, setupReply
|
||||
} from './helpers';
|
||||
|
||||
import url = require('url');
|
||||
import MacNotifier = require('node-mac-notifier');
|
||||
import ConfigUtil = require('../utils/config-util');
|
||||
|
||||
type ReplyHandler = (response: string) => void;
|
||||
type ClickHandler = () => void;
|
||||
let replyHandler: ReplyHandler;
|
||||
let clickHandler: ClickHandler;
|
||||
|
||||
declare const window: ZulipWebWindow;
|
||||
interface NotificationHandlerArgs {
|
||||
response: string;
|
||||
}
|
||||
|
||||
class DarwinNotification {
|
||||
tag: string;
|
||||
|
||||
constructor(title: string, opts: NotificationOptions) {
|
||||
const silent: boolean = ConfigUtil.getConfigItem('silent') || false;
|
||||
const { host, protocol } = location;
|
||||
const { icon } = opts;
|
||||
const profilePic = url.resolve(`${protocol}//${host}`, icon);
|
||||
|
||||
this.tag = opts.tag;
|
||||
const notification = new MacNotifier(title, Object.assign(opts, {
|
||||
bundleId: appId,
|
||||
canReply: true,
|
||||
silent,
|
||||
icon: profilePic
|
||||
}));
|
||||
|
||||
notification.addEventListener('click', () => {
|
||||
// focus to the server who sent the
|
||||
// notification if not focused already
|
||||
if (clickHandler) {
|
||||
clickHandler();
|
||||
}
|
||||
|
||||
focusCurrentServer();
|
||||
ipcRenderer.send('focus-app');
|
||||
});
|
||||
|
||||
notification.addEventListener('reply', this.notificationHandler);
|
||||
}
|
||||
|
||||
static requestPermission(): void {
|
||||
return; // eslint-disable-line no-useless-return
|
||||
}
|
||||
|
||||
// Override default Notification permission
|
||||
static get permission(): NotificationPermission {
|
||||
return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
|
||||
}
|
||||
|
||||
set onreply(handler: ReplyHandler) {
|
||||
replyHandler = handler;
|
||||
}
|
||||
|
||||
get onreply(): ReplyHandler {
|
||||
return replyHandler;
|
||||
}
|
||||
|
||||
set onclick(handler: ClickHandler) {
|
||||
clickHandler = handler;
|
||||
}
|
||||
|
||||
get onclick(): ClickHandler {
|
||||
return clickHandler;
|
||||
}
|
||||
|
||||
// not something that is common or
|
||||
// used by zulip server but added to be
|
||||
// future proff.
|
||||
addEventListener(event: string, handler: ClickHandler | ReplyHandler): void {
|
||||
if (event === 'click') {
|
||||
clickHandler = handler as ClickHandler;
|
||||
}
|
||||
|
||||
if (event === 'reply') {
|
||||
replyHandler = handler as ReplyHandler;
|
||||
}
|
||||
}
|
||||
|
||||
notificationHandler({ response }: NotificationHandlerArgs): void {
|
||||
response = parseReply(response);
|
||||
focusCurrentServer();
|
||||
if (window.electron_bridge.send_notification_reply_message_supported) {
|
||||
window.electron_bridge.send_event('send_notification_reply_message', this.tag, response);
|
||||
return;
|
||||
}
|
||||
|
||||
setupReply(this.tag);
|
||||
if (replyHandler) {
|
||||
replyHandler(response);
|
||||
return;
|
||||
}
|
||||
|
||||
customReply(response);
|
||||
}
|
||||
|
||||
// method specific to notification api
|
||||
// used by zulip
|
||||
close(): void {
|
||||
return; // eslint-disable-line no-useless-return
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = DarwinNotification;
|
||||
32
app/renderer/js/notification/default-notification.ts
Normal file
32
app/renderer/js/notification/default-notification.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
'use strict';
|
||||
|
||||
import { ipcRenderer } from 'electron';
|
||||
import { focusCurrentServer } from './helpers';
|
||||
|
||||
import ConfigUtil = require('../utils/config-util');
|
||||
|
||||
const NativeNotification = window.Notification;
|
||||
class BaseNotification extends NativeNotification {
|
||||
constructor(title: string, opts: NotificationOptions) {
|
||||
opts.silent = true;
|
||||
super(title, opts);
|
||||
|
||||
this.addEventListener('click', () => {
|
||||
// focus to the server who sent the
|
||||
// notification if not focused already
|
||||
focusCurrentServer();
|
||||
ipcRenderer.send('focus-app');
|
||||
});
|
||||
}
|
||||
|
||||
static requestPermission(): void {
|
||||
return; // eslint-disable-line no-useless-return
|
||||
}
|
||||
|
||||
// Override default Notification permission
|
||||
static get permission(): NotificationPermission {
|
||||
return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
|
||||
}
|
||||
}
|
||||
|
||||
export = BaseNotification;
|
||||
153
app/renderer/js/notification/helpers.ts
Normal file
153
app/renderer/js/notification/helpers.ts
Normal file
@@ -0,0 +1,153 @@
|
||||
import { remote } from 'electron';
|
||||
|
||||
import Logger = require('../utils/logger-util');
|
||||
|
||||
const logger = new Logger({
|
||||
file: 'errors.log',
|
||||
timestamp: true
|
||||
});
|
||||
|
||||
// Do not change this
|
||||
export const appId = 'org.zulip.zulip-electron';
|
||||
|
||||
export type BotListItem = [string, string];
|
||||
const botsList: BotListItem[] = [];
|
||||
let botsListLoaded = false;
|
||||
|
||||
// this function load list of bots from the server
|
||||
// sync=True for a synchronous getJSON request
|
||||
// in case botsList isn't already completely loaded when required in parseRely
|
||||
export function loadBots(sync = false): void {
|
||||
const { $ } = window;
|
||||
botsList.length = 0;
|
||||
if (sync) {
|
||||
$.ajaxSetup({async: false});
|
||||
}
|
||||
$.getJSON('/json/users')
|
||||
.done((data: any) => {
|
||||
const { members } = data;
|
||||
members.forEach((membersRow: any) => {
|
||||
if (membersRow.is_bot) {
|
||||
const bot = `@${membersRow.full_name}`;
|
||||
const mention = `@**${bot.replace(/^@/, '')}**`;
|
||||
botsList.push([bot, mention]);
|
||||
}
|
||||
});
|
||||
botsListLoaded = true;
|
||||
})
|
||||
.fail((error: any) => {
|
||||
logger.log('Load bots request failed: ', error.responseText);
|
||||
logger.log('Load bots request status: ', error.statusText);
|
||||
});
|
||||
if (sync) {
|
||||
$.ajaxSetup({async: true});
|
||||
}
|
||||
}
|
||||
|
||||
export function checkElements(...elements: any[]): boolean {
|
||||
let status = true;
|
||||
elements.forEach(element => {
|
||||
if (element === null || element === undefined) {
|
||||
status = false;
|
||||
}
|
||||
});
|
||||
return status;
|
||||
}
|
||||
|
||||
export function customReply(reply: string): void {
|
||||
// server does not support notification reply yet.
|
||||
const buttonSelector = '.messagebox #send_controls button[type=submit]';
|
||||
const messageboxSelector = '.selected_message .messagebox .messagebox-border .messagebox-content';
|
||||
const textarea: HTMLInputElement = document.querySelector('#compose-textarea');
|
||||
const messagebox: HTMLButtonElement = document.querySelector(messageboxSelector);
|
||||
const sendButton: HTMLButtonElement = document.querySelector(buttonSelector);
|
||||
|
||||
// sanity check for old server versions
|
||||
const elementsExists = checkElements(textarea, messagebox, sendButton);
|
||||
if (!elementsExists) {
|
||||
return;
|
||||
}
|
||||
|
||||
textarea.value = reply;
|
||||
messagebox.click();
|
||||
sendButton.click();
|
||||
}
|
||||
|
||||
const currentWindow = remote.getCurrentWindow();
|
||||
const webContents = remote.getCurrentWebContents();
|
||||
const webContentsId = webContents.id;
|
||||
|
||||
// this function will focus the server that sent
|
||||
// the notification. Main function implemented in main.js
|
||||
export function focusCurrentServer(): void {
|
||||
// TODO: TypeScript: currentWindow of type BrowserWindow doesn't
|
||||
// have a .send() property per typescript.
|
||||
(currentWindow as any).send('focus-webview-with-id', webContentsId);
|
||||
}
|
||||
// this function parses the reply from to notification
|
||||
// making it easier to reply from notification eg
|
||||
// @username in reply will be converted to @**username**
|
||||
// #stream in reply will be converted to #**stream**
|
||||
// bot mentions are not yet supported
|
||||
export function parseReply(reply: string): string {
|
||||
const usersDiv = document.querySelectorAll('#user_presences li');
|
||||
const streamHolder = document.querySelectorAll('#stream_filters li');
|
||||
|
||||
type UsersItem = BotListItem;
|
||||
type StreamsItem = BotListItem;
|
||||
const users: UsersItem[] = [];
|
||||
const streams: StreamsItem[] = [];
|
||||
|
||||
usersDiv.forEach(userRow => {
|
||||
const anchor = userRow.querySelector('span a');
|
||||
if (anchor !== null) {
|
||||
const user = `@${anchor.textContent.trim()}`;
|
||||
const mention = `@**${user.replace(/^@/, '')}**`;
|
||||
users.push([user, mention]);
|
||||
}
|
||||
});
|
||||
|
||||
streamHolder.forEach(stream => {
|
||||
const streamAnchor = stream.querySelector('div a');
|
||||
if (streamAnchor !== null) {
|
||||
const streamName = `#${streamAnchor.textContent.trim()}`;
|
||||
const streamMention = `#**${streamName.replace(/^#/, '')}**`;
|
||||
streams.push([streamName, streamMention]);
|
||||
}
|
||||
});
|
||||
|
||||
users.forEach(([user, mention]) => {
|
||||
if (reply.includes(user)) {
|
||||
const regex = new RegExp(user, 'g');
|
||||
reply = reply.replace(regex, mention);
|
||||
}
|
||||
});
|
||||
|
||||
streams.forEach(([stream, streamMention]) => {
|
||||
const regex = new RegExp(stream, 'g');
|
||||
reply = reply.replace(regex, streamMention);
|
||||
});
|
||||
|
||||
// If botsList isn't completely loaded yet, make a synchronous getJSON request for list
|
||||
if (botsListLoaded === false) {
|
||||
loadBots(true);
|
||||
}
|
||||
|
||||
// Iterate for every bot name and replace in reply
|
||||
// @botname with @**botname**
|
||||
botsList.forEach(([bot, mention]) => {
|
||||
if (reply.includes(bot)) {
|
||||
const regex = new RegExp(bot, 'g');
|
||||
reply = reply.replace(regex, mention);
|
||||
}
|
||||
});
|
||||
|
||||
reply = reply.replace(/\\n/, '\n');
|
||||
return reply;
|
||||
}
|
||||
|
||||
export function setupReply(id: string): void {
|
||||
const { narrow } = window;
|
||||
const narrowByTopic = narrow.by_topic || narrow.by_subject;
|
||||
narrowByTopic(id, { trigger: 'notification' });
|
||||
}
|
||||
@@ -1,41 +1,25 @@
|
||||
import {ipcRenderer} from "../typed-ipc-renderer.ts";
|
||||
'use strict';
|
||||
|
||||
export type NotificationData = {
|
||||
close: () => void;
|
||||
title: string;
|
||||
dir: NotificationDirection;
|
||||
lang: string;
|
||||
body: string;
|
||||
tag: string;
|
||||
icon: string;
|
||||
data: unknown;
|
||||
};
|
||||
import { remote } from 'electron';
|
||||
import * as params from '../utils/params-util';
|
||||
import { appId, loadBots } from './helpers';
|
||||
|
||||
export function newNotification(
|
||||
title: string,
|
||||
options: NotificationOptions,
|
||||
dispatch: (type: string, eventInit: EventInit) => boolean,
|
||||
): NotificationData {
|
||||
const notification = new Notification(title, {...options, silent: true});
|
||||
for (const type of ["click", "close", "error", "show"]) {
|
||||
notification.addEventListener(type, (event) => {
|
||||
if (type === "click") ipcRenderer.send("focus-this-webview");
|
||||
if (!dispatch(type, event)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
import DefaultNotification = require('./default-notification');
|
||||
const { app } = remote;
|
||||
|
||||
return {
|
||||
close() {
|
||||
notification.close();
|
||||
},
|
||||
title: notification.title,
|
||||
dir: notification.dir,
|
||||
lang: notification.lang,
|
||||
body: notification.body,
|
||||
tag: notification.tag,
|
||||
icon: notification.icon,
|
||||
data: notification.data,
|
||||
};
|
||||
// From https://github.com/felixrieseberg/electron-windows-notifications#appusermodelid
|
||||
// On windows 8 we have to explicitly set the appUserModelId otherwise notification won't work.
|
||||
app.setAppUserModelId(appId);
|
||||
|
||||
window.Notification = DefaultNotification;
|
||||
|
||||
if (process.platform === 'darwin') {
|
||||
window.Notification = require('./darwin-notifications');
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
// eslint-disable-next-line no-undef, @typescript-eslint/camelcase
|
||||
if (params.isPageParams() && page_params.realm_uri) {
|
||||
loadBots();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
import {app} from "@electron/remote";
|
||||
|
||||
import {Html, html} from "../../../common/html.ts";
|
||||
import {bundleUrl} from "../../../common/paths.ts";
|
||||
import * as t from "../../../common/translation-util.ts";
|
||||
import {generateNodeFromHtml} from "../components/base.ts";
|
||||
|
||||
export class AboutView {
|
||||
static async create(): Promise<AboutView> {
|
||||
return new AboutView(
|
||||
await (await fetch(new URL("app/renderer/about.html", bundleUrl))).text(),
|
||||
);
|
||||
}
|
||||
|
||||
readonly $view: HTMLElement;
|
||||
|
||||
private constructor(templateHtml: string) {
|
||||
this.$view = document.createElement("div");
|
||||
const $shadow = this.$view.attachShadow({mode: "open"});
|
||||
$shadow.innerHTML = templateHtml;
|
||||
$shadow.querySelector("#version")!.textContent = `v${app.getVersion()}`;
|
||||
const maintenanceInfoHtml = html`
|
||||
<div class="maintenance-info">
|
||||
<p class="detail maintainer">
|
||||
${new Html({
|
||||
html: t.__("Maintained by {{{link}}}Zulip{{{endLink}}}", {
|
||||
link: '<a href="https://zulip.com" target="_blank" rel="noopener noreferrer">',
|
||||
endLink: "</a>",
|
||||
}),
|
||||
})}
|
||||
</p>
|
||||
<p class="detail license">
|
||||
${new Html({
|
||||
html: t.__(
|
||||
"Available under the {{{link}}}Apache 2.0 License{{{endLink}}}",
|
||||
{
|
||||
link: '<a href="https://github.com/zulip/zulip-desktop/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">',
|
||||
endLink: "</a>",
|
||||
},
|
||||
),
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
$shadow
|
||||
.querySelector(".about")!
|
||||
.append(generateNodeFromHtml(maintenanceInfoHtml));
|
||||
}
|
||||
|
||||
destroy() {
|
||||
// Do nothing.
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,16 @@
|
||||
import {ipcRenderer} from "../typed-ipc-renderer.ts";
|
||||
'use strict';
|
||||
|
||||
export function init(
|
||||
$reconnectButton: Element,
|
||||
$settingsButton: Element,
|
||||
): void {
|
||||
$reconnectButton.addEventListener("click", () => {
|
||||
ipcRenderer.send("forward-message", "reload-viewer");
|
||||
});
|
||||
$settingsButton.addEventListener("click", () => {
|
||||
ipcRenderer.send("forward-message", "open-settings");
|
||||
});
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
class NetworkTroubleshootingView {
|
||||
init($reconnectButton: Element, $settingsButton: Element): void {
|
||||
$reconnectButton.addEventListener('click', () => {
|
||||
ipcRenderer.send('forward-message', 'reload-viewer');
|
||||
});
|
||||
$settingsButton.addEventListener('click', () => {
|
||||
ipcRenderer.send('forward-message', 'open-settings');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export = new NetworkTroubleshootingView();
|
||||
|
||||
100
app/renderer/js/pages/preference/add-certificate.ts
Normal file
100
app/renderer/js/pages/preference/add-certificate.ts
Normal file
@@ -0,0 +1,100 @@
|
||||
'use-strict';
|
||||
|
||||
import { remote, OpenDialogOptions } from 'electron';
|
||||
|
||||
import path = require('path');
|
||||
import BaseComponent = require('../../components/base');
|
||||
import CertificateUtil = require('../../utils/certificate-util');
|
||||
import DomainUtil = require('../../utils/domain-util');
|
||||
import t = require('../../utils/translation-util');
|
||||
|
||||
const { dialog } = remote;
|
||||
|
||||
class AddCertificate extends BaseComponent {
|
||||
// TODO: TypeScript - Here props should be object type
|
||||
props: any;
|
||||
_certFile: string;
|
||||
$addCertificate: Element | null;
|
||||
addCertificateButton: Element | null;
|
||||
serverUrl: HTMLInputElement | null;
|
||||
constructor(props: any) {
|
||||
super();
|
||||
this.props = props;
|
||||
this._certFile = '';
|
||||
}
|
||||
|
||||
template(): string {
|
||||
return `
|
||||
<div class="settings-card certificates-card">
|
||||
<div class="certificate-input">
|
||||
<div>${t.__('Organization URL')}</div>
|
||||
<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
|
||||
</div>
|
||||
<div class="certificate-input">
|
||||
<div>${t.__('Certificate file')}</div>
|
||||
<button class="green" id="add-certificate-button">${t.__('Upload')}</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
init(): void {
|
||||
this.$addCertificate = this.generateNodeFromTemplate(this.template());
|
||||
this.props.$root.append(this.$addCertificate);
|
||||
this.addCertificateButton = this.$addCertificate.querySelector('#add-certificate-button');
|
||||
this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
|
||||
this.initListeners();
|
||||
}
|
||||
|
||||
validateAndAdd(): void {
|
||||
const certificate = this._certFile;
|
||||
const serverUrl = this.serverUrl.value;
|
||||
if (certificate !== '' && serverUrl !== '') {
|
||||
const server = encodeURIComponent(DomainUtil.formatUrl(serverUrl));
|
||||
const fileName = path.basename(certificate);
|
||||
const copy = CertificateUtil.copyCertificate(server, certificate, fileName);
|
||||
if (!copy) {
|
||||
return;
|
||||
}
|
||||
CertificateUtil.setCertificate(server, fileName);
|
||||
dialog.showMessageBox({
|
||||
title: 'Success',
|
||||
message: `Certificate saved!`
|
||||
});
|
||||
this.serverUrl.value = '';
|
||||
} else {
|
||||
dialog.showErrorBox('Error', `Please, ${serverUrl === '' ?
|
||||
'Enter an Organization URL' : 'Choose certificate file'}`);
|
||||
}
|
||||
}
|
||||
|
||||
addHandler(): void {
|
||||
const showDialogOptions: OpenDialogOptions = {
|
||||
title: 'Select file',
|
||||
properties: ['openFile'],
|
||||
filters: [{ name: 'crt, pem', extensions: ['crt', 'pem'] }]
|
||||
};
|
||||
dialog.showOpenDialog(showDialogOptions, selectedFile => {
|
||||
if (selectedFile) {
|
||||
this._certFile = selectedFile[0] || '';
|
||||
this.validateAndAdd();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initListeners(): void {
|
||||
this.addCertificateButton.addEventListener('click', () => {
|
||||
this.addHandler();
|
||||
});
|
||||
|
||||
this.serverUrl.addEventListener('keypress', event => {
|
||||
const EnterkeyCode = event.keyCode;
|
||||
|
||||
if (EnterkeyCode === 13) {
|
||||
this.addHandler();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export = AddCertificate;
|
||||
63
app/renderer/js/pages/preference/badge-settings.ts
Normal file
63
app/renderer/js/pages/preference/badge-settings.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
'use strict';
|
||||
import { app } from 'electron';
|
||||
|
||||
import electron = require('electron');
|
||||
import ConfigUtil = require('../../utils/config-util');
|
||||
|
||||
let instance: BadgeSettings | any = null;
|
||||
|
||||
class BadgeSettings {
|
||||
constructor() {
|
||||
if (instance) {
|
||||
return instance;
|
||||
} else {
|
||||
instance = this;
|
||||
}
|
||||
|
||||
return instance;
|
||||
}
|
||||
|
||||
showBadgeCount(messageCount: number, mainWindow: electron.BrowserWindow): void {
|
||||
if (process.platform === 'win32') {
|
||||
this.updateOverlayIcon(messageCount, mainWindow);
|
||||
} else {
|
||||
// This should work on both macOS and Linux
|
||||
app.setBadgeCount(messageCount);
|
||||
}
|
||||
}
|
||||
|
||||
hideBadgeCount(mainWindow: electron.BrowserWindow): void {
|
||||
if (process.platform === 'darwin') {
|
||||
app.setBadgeCount(0);
|
||||
}
|
||||
if (process.platform === 'win32') {
|
||||
mainWindow.setOverlayIcon(null, '');
|
||||
}
|
||||
}
|
||||
|
||||
updateBadge(badgeCount: number, mainWindow: electron.BrowserWindow): void {
|
||||
if (ConfigUtil.getConfigItem('badgeOption', true)) {
|
||||
this.showBadgeCount(badgeCount, mainWindow);
|
||||
} else {
|
||||
this.hideBadgeCount(mainWindow);
|
||||
}
|
||||
}
|
||||
|
||||
updateOverlayIcon(messageCount: number, mainWindow: electron.BrowserWindow): void {
|
||||
if (!mainWindow.isFocused()) {
|
||||
mainWindow.flashFrame(ConfigUtil.getConfigItem('flashTaskbarOnMessage'));
|
||||
}
|
||||
if (messageCount === 0) {
|
||||
mainWindow.setOverlayIcon(null, '');
|
||||
} else {
|
||||
mainWindow.webContents.send('render-taskbar-icon', messageCount);
|
||||
}
|
||||
}
|
||||
|
||||
updateTaskbarIcon(data: string, text: string, mainWindow: electron.BrowserWindow): void {
|
||||
const img = electron.nativeImage.createFromDataURL(data);
|
||||
mainWindow.setOverlayIcon(img, text);
|
||||
}
|
||||
}
|
||||
|
||||
export = new BadgeSettings();
|
||||
@@ -1,83 +1,50 @@
|
||||
import {type Html, html} from "../../../../common/html.ts";
|
||||
import * as t from "../../../../common/translation-util.ts";
|
||||
import {generateNodeFromHtml} from "../../components/base.ts";
|
||||
import {ipcRenderer} from "../../typed-ipc-renderer.ts";
|
||||
'use strict';
|
||||
|
||||
type BaseSectionProperties = {
|
||||
$element: HTMLElement;
|
||||
disabled?: boolean;
|
||||
value: boolean;
|
||||
clickHandler: () => void;
|
||||
};
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
export function generateSettingOption(properties: BaseSectionProperties): void {
|
||||
const {$element, disabled, value, clickHandler} = properties;
|
||||
import BaseComponent = require('../../components/base');
|
||||
|
||||
$element.textContent = "";
|
||||
class BaseSection extends BaseComponent {
|
||||
// TODO: TypeScript - Here props should be object type
|
||||
generateSettingOption(props: any): void {
|
||||
const {$element, disabled, value, clickHandler} = props;
|
||||
|
||||
const $optionControl = generateNodeFromHtml(
|
||||
generateOptionHtml(value, disabled),
|
||||
);
|
||||
$element.append($optionControl);
|
||||
$element.innerHTML = '';
|
||||
|
||||
if (!disabled) {
|
||||
$optionControl.addEventListener("click", clickHandler);
|
||||
}
|
||||
const $optionControl = this.generateNodeFromTemplate(this.generateOptionTemplate(value, disabled));
|
||||
$element.append($optionControl);
|
||||
|
||||
if (!disabled) {
|
||||
$optionControl.addEventListener('click', clickHandler);
|
||||
}
|
||||
}
|
||||
|
||||
generateOptionTemplate(settingOption: boolean, disabled: boolean): string {
|
||||
const label = disabled ? `<label class="disallowed" title="Setting locked by system administrator."/>` : `<label/>`;
|
||||
if (settingOption) {
|
||||
return `
|
||||
<div class="action">
|
||||
<div class="switch">
|
||||
<input class="toggle toggle-round" type="checkbox" checked disabled>
|
||||
${label}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
return `
|
||||
<div class="action">
|
||||
<div class="switch">
|
||||
<input class="toggle toggle-round" type="checkbox">
|
||||
${label}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
reloadApp(): void {
|
||||
ipcRenderer.send('forward-message', 'reload-viewer');
|
||||
}
|
||||
}
|
||||
|
||||
export function generateOptionHtml(
|
||||
settingOption: boolean,
|
||||
disabled?: boolean,
|
||||
): Html {
|
||||
const labelHtml = disabled
|
||||
? html`<label
|
||||
class="disallowed"
|
||||
title="${t.__("Setting locked by system administrator.")}"
|
||||
></label>`
|
||||
: html`<label></label>`;
|
||||
if (settingOption) {
|
||||
return html`
|
||||
<div class="action">
|
||||
<div class="switch">
|
||||
<input class="toggle toggle-round" type="checkbox" checked disabled />
|
||||
${labelHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="action">
|
||||
<div class="switch">
|
||||
<input class="toggle toggle-round" type="checkbox" />
|
||||
${labelHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/* A method that in future can be used to create dropdown menus using <select> <option> tags.
|
||||
it needs an object which has ``key: value`` pairs and will return a string that can be appended to HTML
|
||||
*/
|
||||
export function generateSelectHtml(
|
||||
options: Record<string, string>,
|
||||
className?: string,
|
||||
idName?: string,
|
||||
): Html {
|
||||
const optionsHtml = html``.join(
|
||||
Object.keys(options).map(
|
||||
(key) => html`
|
||||
<option name="${key}" value="${key}">${options[key]}</option>
|
||||
`,
|
||||
),
|
||||
);
|
||||
return html`
|
||||
<select class="${className}" id="${idName}">
|
||||
${optionsHtml}
|
||||
</select>
|
||||
`;
|
||||
}
|
||||
|
||||
export function reloadApp(): void {
|
||||
ipcRenderer.send("forward-message", "reload-viewer");
|
||||
}
|
||||
export = BaseSection;
|
||||
|
||||
@@ -1,67 +1,90 @@
|
||||
import {html} from "../../../../common/html.ts";
|
||||
import * as t from "../../../../common/translation-util.ts";
|
||||
import {ipcRenderer} from "../../typed-ipc-renderer.ts";
|
||||
import * as DomainUtil from "../../utils/domain-util.ts";
|
||||
'use strict';
|
||||
|
||||
import {reloadApp} from "./base-section.ts";
|
||||
import {initFindAccounts} from "./find-accounts.ts";
|
||||
import {initServerInfoForm} from "./server-info-form.ts";
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
type ConnectedOrgSectionProperties = {
|
||||
$root: Element;
|
||||
};
|
||||
import BaseSection = require('./base-section');
|
||||
import DomainUtil = require('../../utils/domain-util');
|
||||
import ServerInfoForm = require('./server-info-form');
|
||||
import AddCertificate = require('./add-certificate');
|
||||
import FindAccounts = require('./find-accounts');
|
||||
import t = require('../../utils/translation-util');
|
||||
|
||||
export function initConnectedOrgSection({
|
||||
$root,
|
||||
}: ConnectedOrgSectionProperties): void {
|
||||
$root.textContent = "";
|
||||
class ConnectedOrgSection extends BaseSection {
|
||||
// TODO: TypeScript - Here props should be object type
|
||||
props: any;
|
||||
$serverInfoContainer: Element | null;
|
||||
$existingServers: Element | null;
|
||||
$newOrgButton: HTMLButtonElement | null;
|
||||
$addCertificateContainer: Element | null;
|
||||
$findAccountsContainer: Element | null;
|
||||
constructor(props: any) {
|
||||
super();
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
const servers = DomainUtil.getDomains();
|
||||
$root.innerHTML = html`
|
||||
<div class="settings-pane" id="server-settings-pane">
|
||||
<div class="page-title">${t.__("Connected organizations")}</div>
|
||||
<div class="title" id="existing-servers">
|
||||
${t.__("All the connected organizations will appear here.")}
|
||||
</div>
|
||||
<div id="server-info-container"></div>
|
||||
<div id="new-org-button">
|
||||
<button class="green sea w-250">
|
||||
${t.__("Connect to another organization")}
|
||||
</button>
|
||||
</div>
|
||||
<div class="page-title">${t.__("Find accounts by email")}</div>
|
||||
<div id="find-accounts-container"></div>
|
||||
</div>
|
||||
`.html;
|
||||
template(): string {
|
||||
return `
|
||||
<div class="settings-pane" id="server-settings-pane">
|
||||
<div class="page-title">${t.__('Connected organizations')}</div>
|
||||
<div class="title" id="existing-servers">${t.__('All the connected orgnizations will appear here.')}</div>
|
||||
<div id="server-info-container"></div>
|
||||
<div id="new-org-button"><button class="green sea w-250">${t.__('Connect to another organization')}</button></div>
|
||||
<div class="page-title">${t.__('Add Custom Certificates')}</div>
|
||||
<div id="add-certificate-container"></div>
|
||||
<div class="page-title">${t.__('Find accounts by email')}</div>
|
||||
<div id="find-accounts-container"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
const $serverInfoContainer = $root.querySelector("#server-info-container")!;
|
||||
const $existingServers = $root.querySelector("#existing-servers")!;
|
||||
const $newOrgButton: HTMLButtonElement =
|
||||
$root.querySelector("#new-org-button")!;
|
||||
const $findAccountsContainer = $root.querySelector(
|
||||
"#find-accounts-container",
|
||||
)!;
|
||||
init(): void {
|
||||
this.initServers();
|
||||
}
|
||||
|
||||
const noServerText = t.__(
|
||||
"All the connected organizations will appear here.",
|
||||
);
|
||||
// Show noServerText if no servers are there otherwise hide it
|
||||
$existingServers.textContent = servers.length === 0 ? noServerText : "";
|
||||
initServers(): void {
|
||||
this.props.$root.innerHTML = '';
|
||||
|
||||
for (const [i, server] of servers.entries()) {
|
||||
initServerInfoForm({
|
||||
$root: $serverInfoContainer,
|
||||
server,
|
||||
index: i,
|
||||
onChange: reloadApp,
|
||||
});
|
||||
}
|
||||
const servers = DomainUtil.getDomains();
|
||||
this.props.$root.innerHTML = this.template();
|
||||
|
||||
$newOrgButton.addEventListener("click", () => {
|
||||
ipcRenderer.send("forward-message", "open-org-tab");
|
||||
});
|
||||
this.$serverInfoContainer = document.querySelector('#server-info-container');
|
||||
this.$existingServers = document.querySelector('#existing-servers');
|
||||
this.$newOrgButton = document.querySelector('#new-org-button');
|
||||
this.$addCertificateContainer = document.querySelector('#add-certificate-container');
|
||||
this.$findAccountsContainer = document.querySelector('#find-accounts-container');
|
||||
|
||||
initFindAccounts({
|
||||
$root: $findAccountsContainer,
|
||||
});
|
||||
const noServerText = t.__('All the connected orgnizations will appear here');
|
||||
// Show noServerText if no servers are there otherwise hide it
|
||||
this.$existingServers.innerHTML = servers.length === 0 ? noServerText : '';
|
||||
|
||||
for (let i = 0; i < servers.length; i++) {
|
||||
new ServerInfoForm({
|
||||
$root: this.$serverInfoContainer,
|
||||
server: servers[i],
|
||||
index: i,
|
||||
onChange: this.reloadApp
|
||||
}).init();
|
||||
}
|
||||
|
||||
this.$newOrgButton.addEventListener('click', () => {
|
||||
ipcRenderer.send('forward-message', 'open-org-tab');
|
||||
});
|
||||
|
||||
this.initAddCertificate();
|
||||
this.initFindAccounts();
|
||||
}
|
||||
|
||||
initAddCertificate(): void {
|
||||
new AddCertificate({
|
||||
$root: this.$addCertificateContainer
|
||||
}).init();
|
||||
}
|
||||
|
||||
initFindAccounts(): void {
|
||||
new FindAccounts({
|
||||
$root: this.$findAccountsContainer
|
||||
}).init();
|
||||
}
|
||||
}
|
||||
|
||||
export = ConnectedOrgSection;
|
||||
|
||||
@@ -1,66 +1,78 @@
|
||||
import {html} from "../../../../common/html.ts";
|
||||
import * as LinkUtil from "../../../../common/link-util.ts";
|
||||
import * as t from "../../../../common/translation-util.ts";
|
||||
import {generateNodeFromHtml} from "../../components/base.ts";
|
||||
'use-strict';
|
||||
|
||||
type FindAccountsProperties = {
|
||||
$root: Element;
|
||||
};
|
||||
import { shell } from 'electron';
|
||||
|
||||
async function findAccounts(url: string): Promise<void> {
|
||||
if (!url) {
|
||||
return;
|
||||
}
|
||||
import BaseComponent = require('../../components/base');
|
||||
import t = require('../../utils/translation-util');
|
||||
|
||||
if (!url.startsWith("http")) {
|
||||
url = "https://" + url;
|
||||
}
|
||||
class FindAccounts extends BaseComponent {
|
||||
// TODO: TypeScript - Here props should be object type
|
||||
props: any;
|
||||
$findAccounts: Element | null;
|
||||
$findAccountsButton: Element | null;
|
||||
$serverUrlField: HTMLInputElement | null;
|
||||
constructor(props: any) {
|
||||
super();
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
await LinkUtil.openBrowser(new URL("/accounts/find", url));
|
||||
template(): string {
|
||||
return `
|
||||
<div class="settings-card certificate-card">
|
||||
<div class="certificate-input">
|
||||
<div>${t.__('Organization URL')}</div>
|
||||
<input class="setting-input-value" value="zulipchat.com"/>
|
||||
</div>
|
||||
<div class="certificate-input">
|
||||
<button class="green w-150" id="find-accounts-button">${t.__('Find accounts')}</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
init(): void {
|
||||
this.$findAccounts = this.generateNodeFromTemplate(this.template());
|
||||
this.props.$root.append(this.$findAccounts);
|
||||
this.$findAccountsButton = this.$findAccounts.querySelector('#find-accounts-button');
|
||||
this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
|
||||
this.initListeners();
|
||||
}
|
||||
|
||||
findAccounts(url: string): void {
|
||||
if (!url) {
|
||||
return;
|
||||
}
|
||||
if (!url.startsWith('http')) {
|
||||
url = 'https://' + url;
|
||||
}
|
||||
shell.openExternal(url + '/accounts/find');
|
||||
}
|
||||
|
||||
initListeners(): void {
|
||||
this.$findAccountsButton.addEventListener('click', () => {
|
||||
this.findAccounts(this.$serverUrlField.value);
|
||||
});
|
||||
|
||||
this.$serverUrlField.addEventListener('click', () => {
|
||||
if (this.$serverUrlField.value === 'zulipchat.com') {
|
||||
this.$serverUrlField.setSelectionRange(0, 0);
|
||||
}
|
||||
});
|
||||
|
||||
this.$serverUrlField.addEventListener('keypress', event => {
|
||||
if (event.keyCode === 13) {
|
||||
this.findAccounts(this.$serverUrlField.value);
|
||||
}
|
||||
});
|
||||
|
||||
this.$serverUrlField.addEventListener('input', () => {
|
||||
if (this.$serverUrlField.value) {
|
||||
this.$serverUrlField.classList.remove('invalid-input-value');
|
||||
} else {
|
||||
this.$serverUrlField.classList.add('invalid-input-value');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function initFindAccounts(properties: FindAccountsProperties): void {
|
||||
const $findAccounts = generateNodeFromHtml(html`
|
||||
<div class="settings-card certificate-card">
|
||||
<div class="certificate-input">
|
||||
<div>${t.__("Organization URL")}</div>
|
||||
<input class="setting-input-value" value="zulipchat.com" />
|
||||
</div>
|
||||
<div class="certificate-input">
|
||||
<button class="green w-150" id="find-accounts-button">
|
||||
${t.__("Find accounts")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
properties.$root.append($findAccounts);
|
||||
const $findAccountsButton = $findAccounts.querySelector(
|
||||
"#find-accounts-button",
|
||||
)!;
|
||||
const $serverUrlField: HTMLInputElement = $findAccounts.querySelector(
|
||||
"input.setting-input-value",
|
||||
)!;
|
||||
|
||||
$findAccountsButton.addEventListener("click", async () => {
|
||||
await findAccounts($serverUrlField.value);
|
||||
});
|
||||
|
||||
$serverUrlField.addEventListener("click", () => {
|
||||
if ($serverUrlField.value === "zulipchat.com") {
|
||||
$serverUrlField.setSelectionRange(0, 0);
|
||||
}
|
||||
});
|
||||
|
||||
$serverUrlField.addEventListener("keypress", async (event) => {
|
||||
if (event.key === "Enter") {
|
||||
await findAccounts($serverUrlField.value);
|
||||
}
|
||||
});
|
||||
|
||||
$serverUrlField.addEventListener("input", () => {
|
||||
$serverUrlField.classList.toggle(
|
||||
"invalid-input-value",
|
||||
$serverUrlField.value === "",
|
||||
);
|
||||
});
|
||||
}
|
||||
export = FindAccounts;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,74 +1,68 @@
|
||||
import {type Html, html} from "../../../../common/html.ts";
|
||||
import * as t from "../../../../common/translation-util.ts";
|
||||
import type {NavigationItem} from "../../../../common/types.ts";
|
||||
import {generateNodeFromHtml} from "../../components/base.ts";
|
||||
'use strict';
|
||||
|
||||
type PreferenceNavigationProperties = {
|
||||
$root: Element;
|
||||
onItemSelected: (navigationItem: NavigationItem) => void;
|
||||
};
|
||||
import BaseComponent = require('../../components/base');
|
||||
import t = require('../../utils/translation-util');
|
||||
|
||||
export default class PreferenceNavigation {
|
||||
navigationItems: Array<{navigationItem: NavigationItem; label: string}>;
|
||||
$el: Element;
|
||||
constructor(private readonly properties: PreferenceNavigationProperties) {
|
||||
this.navigationItems = [
|
||||
{navigationItem: "General", label: t.__("General")},
|
||||
{navigationItem: "Network", label: t.__("Network")},
|
||||
{navigationItem: "AddServer", label: t.__("Add Organization")},
|
||||
{navigationItem: "Organizations", label: t.__("Organizations")},
|
||||
{navigationItem: "Shortcuts", label: t.__("Shortcuts")},
|
||||
];
|
||||
class PreferenceNav extends BaseComponent {
|
||||
// TODO: TypeScript - Here props should be object type
|
||||
props: any;
|
||||
navItems: string[];
|
||||
$el: Element;
|
||||
constructor(props: any) {
|
||||
super();
|
||||
this.props = props;
|
||||
this.navItems = ['General', 'Network', 'AddServer', 'Organizations', 'Shortcuts'];
|
||||
this.init();
|
||||
}
|
||||
|
||||
this.$el = generateNodeFromHtml(this.templateHtml());
|
||||
this.properties.$root.append(this.$el);
|
||||
this.registerListeners();
|
||||
}
|
||||
template(): string {
|
||||
let navItemsTemplate = '';
|
||||
for (const navItem of this.navItems) {
|
||||
navItemsTemplate += `<div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>`;
|
||||
}
|
||||
|
||||
templateHtml(): Html {
|
||||
const navigationItemsHtml = html``.join(
|
||||
this.navigationItems.map(
|
||||
({navigationItem, label}) =>
|
||||
html`<div class="nav" id="nav-${navigationItem}">${label}</div>`,
|
||||
),
|
||||
);
|
||||
return `
|
||||
<div>
|
||||
<div id="settings-header">${t.__('Settings')}</div>
|
||||
<div id="nav-container">${navItemsTemplate}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div>
|
||||
<div id="settings-header">${t.__("Settings")}</div>
|
||||
<div id="nav-container">${navigationItemsHtml}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
init(): void {
|
||||
this.$el = this.generateNodeFromTemplate(this.template());
|
||||
this.props.$root.append(this.$el);
|
||||
this.registerListeners();
|
||||
}
|
||||
|
||||
registerListeners(): void {
|
||||
for (const {navigationItem} of this.navigationItems) {
|
||||
const $item = this.$el.querySelector(
|
||||
`#nav-${CSS.escape(navigationItem)}`,
|
||||
)!;
|
||||
$item.addEventListener("click", () => {
|
||||
this.properties.onItemSelected(navigationItem);
|
||||
});
|
||||
}
|
||||
}
|
||||
registerListeners(): void {
|
||||
for (const navItem of this.navItems) {
|
||||
const $item = document.querySelector(`#nav-${navItem}`);
|
||||
$item.addEventListener('click', () => {
|
||||
this.props.onItemSelected(navItem);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
select(navigationItemToSelect: NavigationItem): void {
|
||||
for (const {navigationItem} of this.navigationItems) {
|
||||
if (navigationItem === navigationItemToSelect) {
|
||||
this.activate(navigationItem);
|
||||
} else {
|
||||
this.deactivate(navigationItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
select(navItemToSelect: string): void {
|
||||
for (const navItem of this.navItems) {
|
||||
if (navItem === navItemToSelect) {
|
||||
this.activate(navItem);
|
||||
} else {
|
||||
this.deactivate(navItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
activate(navigationItem: NavigationItem): void {
|
||||
const $item = this.$el.querySelector(`#nav-${CSS.escape(navigationItem)}`)!;
|
||||
$item.classList.add("active");
|
||||
}
|
||||
activate(navItem: string): void {
|
||||
const $item = document.querySelector(`#nav-${navItem}`);
|
||||
$item.classList.add('active');
|
||||
}
|
||||
|
||||
deactivate(navigationItem: NavigationItem): void {
|
||||
const $item = this.$el.querySelector(`#nav-${CSS.escape(navigationItem)}`)!;
|
||||
$item.classList.remove("active");
|
||||
}
|
||||
deactivate(navItem: string): void {
|
||||
const $item = document.querySelector(`#nav-${navItem}`);
|
||||
$item.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
export = PreferenceNav;
|
||||
|
||||
@@ -1,136 +1,136 @@
|
||||
import * as ConfigUtil from "../../../../common/config-util.ts";
|
||||
import {html} from "../../../../common/html.ts";
|
||||
import * as t from "../../../../common/translation-util.ts";
|
||||
import {ipcRenderer} from "../../typed-ipc-renderer.ts";
|
||||
'use strict';
|
||||
|
||||
import {generateSettingOption} from "./base-section.ts";
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
type NetworkSectionProperties = {
|
||||
$root: Element;
|
||||
};
|
||||
import BaseSection = require('./base-section');
|
||||
import ConfigUtil = require('../../utils/config-util');
|
||||
import t = require('../../utils/translation-util');
|
||||
|
||||
export function initNetworkSection({$root}: NetworkSectionProperties): void {
|
||||
$root.innerHTML = html`
|
||||
<div class="settings-pane">
|
||||
<div class="title">${t.__("Proxy")}</div>
|
||||
<div id="appearance-option-settings" class="settings-card">
|
||||
<div class="setting-row" id="use-system-settings">
|
||||
<div class="setting-description">
|
||||
${t.__("Use system proxy settings (requires restart)")}
|
||||
</div>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="setting-row" id="use-manual-settings">
|
||||
<div class="setting-description">
|
||||
${t.__("Manual proxy configuration")}
|
||||
</div>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="manual-proxy-block">
|
||||
<div class="setting-row" id="proxy-pac-option">
|
||||
<span class="setting-input-key">${t.__("PAC script")}</span>
|
||||
<input
|
||||
class="setting-input-value"
|
||||
placeholder="e.g. foobar.com/pacfile.js"
|
||||
/>
|
||||
</div>
|
||||
<div class="setting-row" id="proxy-rules-option">
|
||||
<span class="setting-input-key">${t.__("Proxy rules")}</span>
|
||||
<input
|
||||
class="setting-input-value"
|
||||
placeholder="e.g. http=foopy:80;ftp=foopy2"
|
||||
/>
|
||||
</div>
|
||||
<div class="setting-row" id="proxy-bypass-option">
|
||||
<span class="setting-input-key">${t.__("Proxy bypass rules")}</span>
|
||||
<input class="setting-input-value" placeholder="e.g. foobar.com" />
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div class="action green" id="proxy-save-action">
|
||||
<span>${t.__("Save")}</span>
|
||||
class NetworkSection extends BaseSection {
|
||||
// TODO: TypeScript - Here props should be object type
|
||||
props: any;
|
||||
$proxyPAC: HTMLInputElement;
|
||||
$proxyRules: HTMLInputElement;
|
||||
$proxyBypass: HTMLInputElement;
|
||||
$proxySaveAction: Element;
|
||||
$manualProxyBlock: Element;
|
||||
constructor(props: any) {
|
||||
super();
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
template(): string {
|
||||
return `
|
||||
<div class="settings-pane">
|
||||
<div class="title">${t.__('Proxy')}</div>
|
||||
<div id="appearance-option-settings" class="settings-card">
|
||||
<div class="setting-row" id="use-system-settings">
|
||||
<div class="setting-description">${t.__('Use system proxy settings (requires restart)')}</div>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="setting-row" id="use-manual-settings">
|
||||
<div class="setting-description">${t.__('Manual proxy configuration')}</div>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="manual-proxy-block">
|
||||
<div class="setting-row" id="proxy-pac-option">
|
||||
<span class="setting-input-key">PAC ${t.__('script')}</span>
|
||||
<input class="setting-input-value" placeholder="e.g. foobar.com/pacfile.js"/>
|
||||
</div>
|
||||
<div class="setting-row" id="proxy-rules-option">
|
||||
<span class="setting-input-key">${t.__('Proxy rules')}</span>
|
||||
<input class="setting-input-value" placeholder="e.g. http=foopy:80;ftp=foopy2"/>
|
||||
</div>
|
||||
<div class="setting-row" id="proxy-bypass-option">
|
||||
<span class="setting-input-key">${t.__('Proxy bypass rules')}</span>
|
||||
<input class="setting-input-value" placeholder="e.g. foobar.com"/>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div class="action green" id="proxy-save-action">
|
||||
<span>${t.__('Save')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`.html;
|
||||
`;
|
||||
}
|
||||
|
||||
const $proxyPac: HTMLInputElement = $root.querySelector(
|
||||
"#proxy-pac-option .setting-input-value",
|
||||
)!;
|
||||
const $proxyRules: HTMLInputElement = $root.querySelector(
|
||||
"#proxy-rules-option .setting-input-value",
|
||||
)!;
|
||||
const $proxyBypass: HTMLInputElement = $root.querySelector(
|
||||
"#proxy-bypass-option .setting-input-value",
|
||||
)!;
|
||||
const $proxySaveAction = $root.querySelector("#proxy-save-action")!;
|
||||
const $manualProxyBlock = $root.querySelector(".manual-proxy-block")!;
|
||||
init(): void {
|
||||
this.props.$root.innerHTML = this.template();
|
||||
this.$proxyPAC = document.querySelector('#proxy-pac-option .setting-input-value');
|
||||
this.$proxyRules = document.querySelector('#proxy-rules-option .setting-input-value');
|
||||
this.$proxyBypass = document.querySelector('#proxy-bypass-option .setting-input-value');
|
||||
this.$proxySaveAction = document.querySelector('#proxy-save-action');
|
||||
this.$manualProxyBlock = this.props.$root.querySelector('.manual-proxy-block');
|
||||
this.initProxyOption();
|
||||
|
||||
toggleManualProxySettings(ConfigUtil.getConfigItem("useManualProxy", false));
|
||||
updateProxyOption();
|
||||
this.$proxyPAC.value = ConfigUtil.getConfigItem('proxyPAC', '');
|
||||
this.$proxyRules.value = ConfigUtil.getConfigItem('proxyRules', '');
|
||||
this.$proxyBypass.value = ConfigUtil.getConfigItem('proxyBypass', '');
|
||||
|
||||
$proxyPac.value = ConfigUtil.getConfigItem("proxyPAC", "");
|
||||
$proxyRules.value = ConfigUtil.getConfigItem("proxyRules", "");
|
||||
$proxyBypass.value = ConfigUtil.getConfigItem("proxyBypass", "");
|
||||
this.$proxySaveAction.addEventListener('click', () => {
|
||||
ConfigUtil.setConfigItem('proxyPAC', this.$proxyPAC.value);
|
||||
ConfigUtil.setConfigItem('proxyRules', this.$proxyRules.value);
|
||||
ConfigUtil.setConfigItem('proxyBypass', this.$proxyBypass.value);
|
||||
|
||||
$proxySaveAction.addEventListener("click", () => {
|
||||
ConfigUtil.setConfigItem("proxyPAC", $proxyPac.value);
|
||||
ConfigUtil.setConfigItem("proxyRules", $proxyRules.value);
|
||||
ConfigUtil.setConfigItem("proxyBypass", $proxyBypass.value);
|
||||
ipcRenderer.send('forward-message', 'reload-proxy', true);
|
||||
});
|
||||
}
|
||||
|
||||
ipcRenderer.send("forward-message", "reload-proxy", true);
|
||||
});
|
||||
initProxyOption(): void {
|
||||
const manualProxyEnabled = ConfigUtil.getConfigItem('useManualProxy', false);
|
||||
this.toggleManualProxySettings(manualProxyEnabled);
|
||||
|
||||
function toggleManualProxySettings(option: boolean): void {
|
||||
$manualProxyBlock.classList.toggle("hidden", !option);
|
||||
}
|
||||
this.updateProxyOption();
|
||||
}
|
||||
|
||||
function updateProxyOption(): void {
|
||||
generateSettingOption({
|
||||
$element: $root.querySelector("#use-system-settings .setting-control")!,
|
||||
value: ConfigUtil.getConfigItem("useSystemProxy", false),
|
||||
clickHandler() {
|
||||
const newValue = !ConfigUtil.getConfigItem("useSystemProxy", false);
|
||||
const manualProxyValue = ConfigUtil.getConfigItem(
|
||||
"useManualProxy",
|
||||
false,
|
||||
);
|
||||
if (manualProxyValue && newValue) {
|
||||
ConfigUtil.setConfigItem("useManualProxy", !manualProxyValue);
|
||||
toggleManualProxySettings(!manualProxyValue);
|
||||
}
|
||||
toggleManualProxySettings(option: boolean): void {
|
||||
if (option) {
|
||||
this.$manualProxyBlock.classList.remove('hidden');
|
||||
} else {
|
||||
this.$manualProxyBlock.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
if (!newValue) {
|
||||
// Remove proxy system proxy settings
|
||||
ConfigUtil.setConfigItem("proxyRules", "");
|
||||
ipcRenderer.send("forward-message", "reload-proxy", false);
|
||||
}
|
||||
|
||||
ConfigUtil.setConfigItem("useSystemProxy", newValue);
|
||||
updateProxyOption();
|
||||
},
|
||||
});
|
||||
generateSettingOption({
|
||||
$element: $root.querySelector("#use-manual-settings .setting-control")!,
|
||||
value: ConfigUtil.getConfigItem("useManualProxy", false),
|
||||
clickHandler() {
|
||||
const newValue = !ConfigUtil.getConfigItem("useManualProxy", false);
|
||||
const systemProxyValue = ConfigUtil.getConfigItem(
|
||||
"useSystemProxy",
|
||||
false,
|
||||
);
|
||||
toggleManualProxySettings(newValue);
|
||||
if (systemProxyValue && newValue) {
|
||||
ConfigUtil.setConfigItem("useSystemProxy", !systemProxyValue);
|
||||
}
|
||||
|
||||
ConfigUtil.setConfigItem("proxyRules", "");
|
||||
ConfigUtil.setConfigItem("useManualProxy", newValue);
|
||||
// Reload app only when turning manual proxy off, hence !newValue
|
||||
ipcRenderer.send("forward-message", "reload-proxy", !newValue);
|
||||
updateProxyOption();
|
||||
},
|
||||
});
|
||||
}
|
||||
updateProxyOption(): void {
|
||||
this.generateSettingOption({
|
||||
$element: document.querySelector('#use-system-settings .setting-control'),
|
||||
value: ConfigUtil.getConfigItem('useSystemProxy', false),
|
||||
clickHandler: () => {
|
||||
const newValue = !ConfigUtil.getConfigItem('useSystemProxy');
|
||||
const manualProxyValue = ConfigUtil.getConfigItem('useManualProxy');
|
||||
if (manualProxyValue && newValue) {
|
||||
ConfigUtil.setConfigItem('useManualProxy', !manualProxyValue);
|
||||
this.toggleManualProxySettings(!manualProxyValue);
|
||||
}
|
||||
if (newValue === false) {
|
||||
// Remove proxy system proxy settings
|
||||
ConfigUtil.setConfigItem('proxyRules', '');
|
||||
ipcRenderer.send('forward-message', 'reload-proxy', false);
|
||||
}
|
||||
ConfigUtil.setConfigItem('useSystemProxy', newValue);
|
||||
this.updateProxyOption();
|
||||
}
|
||||
});
|
||||
this.generateSettingOption({
|
||||
$element: document.querySelector('#use-manual-settings .setting-control'),
|
||||
value: ConfigUtil.getConfigItem('useManualProxy', false),
|
||||
clickHandler: () => {
|
||||
const newValue = !ConfigUtil.getConfigItem('useManualProxy');
|
||||
const systemProxyValue = ConfigUtil.getConfigItem('useSystemProxy');
|
||||
this.toggleManualProxySettings(newValue);
|
||||
if (systemProxyValue && newValue) {
|
||||
ConfigUtil.setConfigItem('useSystemProxy', !systemProxyValue);
|
||||
}
|
||||
ConfigUtil.setConfigItem('proxyRules', '');
|
||||
ConfigUtil.setConfigItem('useManualProxy', newValue);
|
||||
// Reload app only when turning manual proxy off, hence !newValue
|
||||
ipcRenderer.send('forward-message', 'reload-proxy', !newValue);
|
||||
this.updateProxyOption();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export = NetworkSection;
|
||||
|
||||
@@ -1,108 +1,107 @@
|
||||
import {dialog} from "@electron/remote";
|
||||
'use strict';
|
||||
|
||||
import {html} from "../../../../common/html.ts";
|
||||
import * as LinkUtil from "../../../../common/link-util.ts";
|
||||
import * as t from "../../../../common/translation-util.ts";
|
||||
import {generateNodeFromHtml} from "../../components/base.ts";
|
||||
import {ipcRenderer} from "../../typed-ipc-renderer.ts";
|
||||
import * as DomainUtil from "../../utils/domain-util.ts";
|
||||
import { shell, ipcRenderer } from 'electron';
|
||||
|
||||
type NewServerFormProperties = {
|
||||
$root: Element;
|
||||
onChange: () => void;
|
||||
};
|
||||
import BaseComponent = require('../../components/base');
|
||||
import DomainUtil = require('../../utils/domain-util');
|
||||
import t = require('../../utils/translation-util');
|
||||
|
||||
export function initNewServerForm({
|
||||
$root,
|
||||
onChange,
|
||||
}: NewServerFormProperties): void {
|
||||
const $newServerForm = generateNodeFromHtml(html`
|
||||
<div class="server-input-container">
|
||||
<div class="title">${t.__("Organization URL")}</div>
|
||||
<div class="add-server-info-row">
|
||||
<input
|
||||
class="setting-input-value"
|
||||
autofocus
|
||||
placeholder="${t.__(
|
||||
"your-organization.zulipchat.com or zulip.your-organization.com",
|
||||
)}"
|
||||
/>
|
||||
</div>
|
||||
<div class="server-center">
|
||||
<button id="connect">${t.__("Connect")}</button>
|
||||
</div>
|
||||
<div class="server-center">
|
||||
<div class="divider">
|
||||
<hr class="left" />
|
||||
${t.__("OR")}
|
||||
<hr class="right" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-center">
|
||||
<button id="open-create-org-link">
|
||||
${t.__("Create a new organization")}
|
||||
</button>
|
||||
</div>
|
||||
<div class="server-center">
|
||||
<div class="server-network-option">
|
||||
<span id="open-network-settings"
|
||||
>${t.__("Network and Proxy Settings")}</span
|
||||
>
|
||||
<i class="material-icons open-network-button">open_in_new</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
const $saveServerButton: HTMLButtonElement =
|
||||
$newServerForm.querySelector("#connect")!;
|
||||
$root.textContent = "";
|
||||
$root.append($newServerForm);
|
||||
const $newServerUrl: HTMLInputElement = $newServerForm.querySelector(
|
||||
"input.setting-input-value",
|
||||
)!;
|
||||
class NewServerForm extends BaseComponent {
|
||||
// TODO: TypeScript - Here props should be object type
|
||||
props: any;
|
||||
$newServerForm: Element;
|
||||
$saveServerButton: HTMLButtonElement;
|
||||
$newServerUrl: HTMLInputElement;
|
||||
constructor(props: any) {
|
||||
super();
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
async function submitFormHandler(): Promise<void> {
|
||||
$saveServerButton.textContent = t.__("Connecting…");
|
||||
let serverConfig;
|
||||
try {
|
||||
serverConfig = await DomainUtil.checkDomain($newServerUrl.value.trim());
|
||||
} catch (error: unknown) {
|
||||
$saveServerButton.textContent = t.__("Connect");
|
||||
await dialog.showMessageBox({
|
||||
type: "error",
|
||||
message:
|
||||
error instanceof Error
|
||||
? `${error.name}: ${error.message}`
|
||||
: t.__("Unknown error"),
|
||||
buttons: [t.__("OK")],
|
||||
});
|
||||
return;
|
||||
}
|
||||
template(): string {
|
||||
return `
|
||||
<div class="server-input-container">
|
||||
<div class="title">${t.__('Organization URL')}</div>
|
||||
<div class="add-server-info-row">
|
||||
<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
|
||||
</div>
|
||||
<div class="server-center">
|
||||
<div class="server-save-action">
|
||||
<button id="connect">${t.__('Connect')}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-center">
|
||||
<div class="divider">
|
||||
<hr class="left"/>${t.__('OR')}<hr class="right" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-center">
|
||||
<div class="server-save-action">
|
||||
<button id="open-create-org-link">${t.__('Create a new organization')}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-center">
|
||||
<div class="server-network-option">
|
||||
<span id="open-network-settings">${t.__('Network and Proxy Settings')}</span>
|
||||
<i class="material-icons open-network-button">open_in_new</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
await DomainUtil.addDomain(serverConfig);
|
||||
onChange();
|
||||
}
|
||||
init(): void {
|
||||
this.initForm();
|
||||
this.initActions();
|
||||
}
|
||||
|
||||
$saveServerButton.addEventListener("click", async () => {
|
||||
await submitFormHandler();
|
||||
});
|
||||
$newServerUrl.addEventListener("keypress", async (event) => {
|
||||
if (event.key === "Enter") {
|
||||
await submitFormHandler();
|
||||
}
|
||||
});
|
||||
initForm(): void {
|
||||
this.$newServerForm = this.generateNodeFromTemplate(this.template());
|
||||
this.$saveServerButton = this.$newServerForm.querySelectorAll('.server-save-action')[0] as HTMLButtonElement;
|
||||
this.props.$root.innerHTML = '';
|
||||
this.props.$root.append(this.$newServerForm);
|
||||
this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
|
||||
}
|
||||
|
||||
// Open create new org link in default browser
|
||||
const link = "https://zulip.com/new/";
|
||||
const externalCreateNewOrgElement = $root.querySelector(
|
||||
"#open-create-org-link",
|
||||
)!;
|
||||
externalCreateNewOrgElement.addEventListener("click", async () => {
|
||||
await LinkUtil.openBrowser(new URL(link));
|
||||
});
|
||||
submitFormHandler(): void {
|
||||
this.$saveServerButton.children[0].innerHTML = 'Connecting...';
|
||||
DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
|
||||
DomainUtil.addDomain(serverConf).then(() => {
|
||||
this.props.onChange(this.props.index);
|
||||
});
|
||||
}, errorMessage => {
|
||||
this.$saveServerButton.children[0].innerHTML = 'Connect';
|
||||
alert(errorMessage);
|
||||
});
|
||||
}
|
||||
|
||||
const networkSettingsId = $root.querySelector(".server-network-option")!;
|
||||
networkSettingsId.addEventListener("click", () => {
|
||||
ipcRenderer.send("forward-message", "open-network-settings");
|
||||
});
|
||||
openCreateNewOrgExternalLink(): void {
|
||||
const link = 'https://zulipchat.com/new/';
|
||||
const externalCreateNewOrgEl = document.querySelector('#open-create-org-link');
|
||||
externalCreateNewOrgEl.addEventListener('click', () => {
|
||||
shell.openExternal(link);
|
||||
});
|
||||
}
|
||||
|
||||
networkSettingsLink(): void {
|
||||
const networkSettingsId = document.querySelectorAll('.server-network-option')[0];
|
||||
networkSettingsId.addEventListener('click', () => ipcRenderer.send('forward-message', 'open-network-settings'));
|
||||
}
|
||||
|
||||
initActions(): void {
|
||||
this.$saveServerButton.addEventListener('click', () => {
|
||||
this.submitFormHandler();
|
||||
});
|
||||
this.$newServerUrl.addEventListener('keypress', event => {
|
||||
const EnterkeyCode = event.keyCode;
|
||||
// Submit form when Enter key is pressed
|
||||
if (EnterkeyCode === 13) {
|
||||
this.submitFormHandler();
|
||||
}
|
||||
});
|
||||
// open create new org link in default browser
|
||||
this.openCreateNewOrgExternalLink();
|
||||
this.networkSettingsLink();
|
||||
}
|
||||
}
|
||||
|
||||
export = NewServerForm;
|
||||
|
||||
@@ -1,144 +1,126 @@
|
||||
import type {IpcRendererEvent} from "electron/renderer";
|
||||
import process from "node:process";
|
||||
'use strict';
|
||||
|
||||
import type {DndSettings} from "../../../../common/dnd-util.ts";
|
||||
import {bundleUrl} from "../../../../common/paths.ts";
|
||||
import type {NavigationItem} from "../../../../common/types.ts";
|
||||
import {ipcRenderer} from "../../typed-ipc-renderer.ts";
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
import {initConnectedOrgSection} from "./connected-org-section.ts";
|
||||
import {initGeneralSection} from "./general-section.ts";
|
||||
import Nav from "./nav.ts";
|
||||
import {initNetworkSection} from "./network-section.ts";
|
||||
import {initServersSection} from "./servers-section.ts";
|
||||
import {initShortcutsSection} from "./shortcuts-section.ts";
|
||||
import BaseComponent = require('../../components/base');
|
||||
import Nav = require('./nav');
|
||||
import ServersSection = require('./servers-section');
|
||||
import GeneralSection = require('./general-section');
|
||||
import NetworkSection = require('./network-section');
|
||||
import ConnectedOrgSection = require('./connected-org-section');
|
||||
import ShortcutsSection = require('./shortcuts-section');
|
||||
|
||||
export class PreferenceView {
|
||||
static async create(): Promise<PreferenceView> {
|
||||
return new PreferenceView(
|
||||
await (
|
||||
await fetch(new URL("app/renderer/preference.html", bundleUrl))
|
||||
).text(),
|
||||
);
|
||||
}
|
||||
type Section = ServersSection | GeneralSection | NetworkSection | ConnectedOrgSection | ShortcutsSection;
|
||||
|
||||
readonly $view: HTMLElement;
|
||||
private readonly $shadow: ShadowRoot;
|
||||
private readonly $settingsContainer: Element;
|
||||
private readonly nav: Nav;
|
||||
private navigationItem: NavigationItem = "General";
|
||||
class PreferenceView extends BaseComponent {
|
||||
$sidebarContainer: Element;
|
||||
$settingsContainer: Element;
|
||||
nav: Nav;
|
||||
section: Section;
|
||||
constructor() {
|
||||
super();
|
||||
this.$sidebarContainer = document.querySelector('#sidebar');
|
||||
this.$settingsContainer = document.querySelector('#settings-container');
|
||||
}
|
||||
|
||||
private constructor(templateHtml: string) {
|
||||
this.$view = document.createElement("div");
|
||||
this.$shadow = this.$view.attachShadow({mode: "open"});
|
||||
this.$shadow.innerHTML = templateHtml;
|
||||
init(): void {
|
||||
this.nav = new Nav({
|
||||
$root: this.$sidebarContainer,
|
||||
onItemSelected: this.handleNavigation.bind(this)
|
||||
});
|
||||
|
||||
const $sidebarContainer = this.$shadow.querySelector("#sidebar")!;
|
||||
this.$settingsContainer = this.$shadow.querySelector(
|
||||
"#settings-container",
|
||||
)!;
|
||||
this.setDefaultView();
|
||||
this.registerIpcs();
|
||||
}
|
||||
|
||||
this.nav = new Nav({
|
||||
$root: $sidebarContainer,
|
||||
onItemSelected: this.handleNavigation,
|
||||
});
|
||||
setDefaultView(): void {
|
||||
let nav = 'General';
|
||||
const hasTag = window.location.hash;
|
||||
if (hasTag) {
|
||||
nav = hasTag.substring(1);
|
||||
}
|
||||
this.handleNavigation(nav);
|
||||
}
|
||||
|
||||
ipcRenderer.on("toggle-sidebar", this.handleToggleSidebar);
|
||||
ipcRenderer.on("toggle-autohide-menubar", this.handleToggleMenubar);
|
||||
ipcRenderer.on("toggle-dnd", this.handleToggleDnd);
|
||||
handleNavigation(navItem: string): void {
|
||||
this.nav.select(navItem);
|
||||
switch (navItem) {
|
||||
case 'AddServer': {
|
||||
this.section = new ServersSection({
|
||||
$root: this.$settingsContainer
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'General': {
|
||||
this.section = new GeneralSection({
|
||||
$root: this.$settingsContainer
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'Organizations': {
|
||||
this.section = new ConnectedOrgSection({
|
||||
$root: this.$settingsContainer
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'Network': {
|
||||
this.section = new NetworkSection({
|
||||
$root: this.$settingsContainer
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'Shortcuts': {
|
||||
this.section = new ShortcutsSection({
|
||||
$root: this.$settingsContainer
|
||||
});
|
||||
break;
|
||||
}
|
||||
default: break;
|
||||
}
|
||||
this.section.init();
|
||||
window.location.hash = `#${navItem}`;
|
||||
}
|
||||
|
||||
this.handleNavigation(this.navigationItem);
|
||||
}
|
||||
// Handle toggling and reflect changes in preference page
|
||||
handleToggle(elementName: string, state: boolean): void {
|
||||
const inputSelector = `#${elementName} .action .switch input`;
|
||||
const input: HTMLInputElement = document.querySelector(inputSelector);
|
||||
if (input) {
|
||||
input.checked = state;
|
||||
}
|
||||
}
|
||||
|
||||
handleNavigation = (navigationItem: NavigationItem): void => {
|
||||
this.navigationItem = navigationItem;
|
||||
this.nav.select(navigationItem);
|
||||
switch (navigationItem) {
|
||||
case "AddServer": {
|
||||
initServersSection({
|
||||
$root: this.$settingsContainer,
|
||||
});
|
||||
break;
|
||||
}
|
||||
registerIpcs(): void {
|
||||
ipcRenderer.on('switch-settings-nav', (_event: Event, navItem: string) => {
|
||||
this.handleNavigation(navItem);
|
||||
});
|
||||
|
||||
case "General": {
|
||||
initGeneralSection({
|
||||
$root: this.$settingsContainer,
|
||||
});
|
||||
break;
|
||||
}
|
||||
ipcRenderer.on('toggle-sidebar-setting', (_event: Event, state: boolean) => {
|
||||
this.handleToggle('sidebar-option', state);
|
||||
});
|
||||
|
||||
case "Organizations": {
|
||||
initConnectedOrgSection({
|
||||
$root: this.$settingsContainer,
|
||||
});
|
||||
break;
|
||||
}
|
||||
ipcRenderer.on('toggle-menubar-setting', (_event: Event, state: boolean) => {
|
||||
this.handleToggle('menubar-option', state);
|
||||
});
|
||||
|
||||
case "Network": {
|
||||
initNetworkSection({
|
||||
$root: this.$settingsContainer,
|
||||
});
|
||||
break;
|
||||
}
|
||||
ipcRenderer.on('toggletray', (_event: Event, state: boolean) => {
|
||||
this.handleToggle('tray-option', state);
|
||||
});
|
||||
|
||||
case "Shortcuts": {
|
||||
initShortcutsSection({
|
||||
$root: this.$settingsContainer,
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
ipcRenderer.on('toggle-dnd', (_event: Event, _state: boolean, newSettings: any) => {
|
||||
this.handleToggle('show-notification-option', newSettings.showNotification);
|
||||
this.handleToggle('silent-option', newSettings.silent);
|
||||
|
||||
location.hash = `#${navigationItem}`;
|
||||
};
|
||||
|
||||
handleToggleTray(state: boolean) {
|
||||
this.handleToggle("tray-option", state);
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
ipcRenderer.off("toggle-sidebar", this.handleToggleSidebar);
|
||||
ipcRenderer.off("toggle-autohide-menubar", this.handleToggleMenubar);
|
||||
ipcRenderer.off("toggle-dnd", this.handleToggleDnd);
|
||||
}
|
||||
|
||||
// Handle toggling and reflect changes in preference page
|
||||
private handleToggle(elementName: string, state = false): void {
|
||||
const inputSelector = `#${elementName} .action .switch input`;
|
||||
const input: HTMLInputElement = this.$shadow.querySelector(inputSelector)!;
|
||||
if (input) {
|
||||
input.checked = state;
|
||||
}
|
||||
}
|
||||
|
||||
private readonly handleToggleSidebar = (
|
||||
_event: IpcRendererEvent,
|
||||
state: boolean,
|
||||
) => {
|
||||
this.handleToggle("sidebar-option", state);
|
||||
};
|
||||
|
||||
private readonly handleToggleMenubar = (
|
||||
_event: IpcRendererEvent,
|
||||
state: boolean,
|
||||
) => {
|
||||
this.handleToggle("menubar-option", state);
|
||||
};
|
||||
|
||||
private readonly handleToggleDnd = (
|
||||
_event: IpcRendererEvent,
|
||||
_state: boolean,
|
||||
newSettings: Partial<DndSettings>,
|
||||
) => {
|
||||
this.handleToggle("show-notification-option", newSettings.showNotification);
|
||||
this.handleToggle("silent-option", newSettings.silent);
|
||||
|
||||
if (process.platform === "win32") {
|
||||
this.handleToggle(
|
||||
"flash-taskbar-option",
|
||||
newSettings.flashTaskbarOnMessage,
|
||||
);
|
||||
}
|
||||
};
|
||||
if (process.platform === 'win32') {
|
||||
this.handleToggle('flash-taskbar-option', newSettings.flashTaskbarOnMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const preferenceView = new PreferenceView();
|
||||
preferenceView.init();
|
||||
});
|
||||
|
||||
export = PreferenceView;
|
||||
|
||||
@@ -1,83 +1,96 @@
|
||||
import {dialog} from "@electron/remote";
|
||||
'use strict';
|
||||
|
||||
import {html} from "../../../../common/html.ts";
|
||||
import * as Messages from "../../../../common/messages.ts";
|
||||
import * as t from "../../../../common/translation-util.ts";
|
||||
import type {ServerConfig} from "../../../../common/types.ts";
|
||||
import {generateNodeFromHtml} from "../../components/base.ts";
|
||||
import {ipcRenderer} from "../../typed-ipc-renderer.ts";
|
||||
import * as DomainUtil from "../../utils/domain-util.ts";
|
||||
import { remote, ipcRenderer } from 'electron';
|
||||
|
||||
type ServerInfoFormProperties = {
|
||||
$root: Element;
|
||||
server: ServerConfig;
|
||||
index: number;
|
||||
onChange: () => void;
|
||||
};
|
||||
import BaseComponent = require('../../components/base');
|
||||
import DomainUtil = require('../../utils/domain-util');
|
||||
import Messages = require('./../../../../resources/messages');
|
||||
import t = require('../../utils/translation-util');
|
||||
|
||||
export function initServerInfoForm(properties: ServerInfoFormProperties): void {
|
||||
const $serverInfoForm = generateNodeFromHtml(html`
|
||||
<div class="settings-card">
|
||||
<div class="server-info-left">
|
||||
<img
|
||||
class="server-info-icon"
|
||||
src="${DomainUtil.iconAsUrl(properties.server.icon)}"
|
||||
/>
|
||||
<div class="server-info-row">
|
||||
<span class="server-info-alias">${properties.server.alias}</span>
|
||||
<i class="material-icons open-tab-button">open_in_new</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-info-right">
|
||||
<div class="server-info-row server-url">
|
||||
<span class="server-url-info" title="${properties.server.url}"
|
||||
>${properties.server.url}</span
|
||||
>
|
||||
</div>
|
||||
<div class="server-info-row">
|
||||
<div class="action red server-delete-action">
|
||||
<span>${t.__("Disconnect")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
const $serverInfoAlias = $serverInfoForm.querySelector(".server-info-alias")!;
|
||||
const $serverIcon = $serverInfoForm.querySelector(".server-info-icon")!;
|
||||
const $deleteServerButton = $serverInfoForm.querySelector(
|
||||
".server-delete-action",
|
||||
)!;
|
||||
const $openServerButton = $serverInfoForm.querySelector(".open-tab-button")!;
|
||||
properties.$root.append($serverInfoForm);
|
||||
const { dialog } = remote;
|
||||
|
||||
$deleteServerButton.addEventListener("click", async () => {
|
||||
const {response} = await dialog.showMessageBox({
|
||||
type: "warning",
|
||||
buttons: [t.__("Yes"), t.__("No")],
|
||||
defaultId: 0,
|
||||
message: t.__("Are you sure you want to disconnect this organization?"),
|
||||
});
|
||||
if (response === 0) {
|
||||
if (DomainUtil.removeDomain(properties.index)) {
|
||||
ipcRenderer.send("reload-full-app");
|
||||
} else {
|
||||
const {title, content} = Messages.orgRemovalError(
|
||||
DomainUtil.getDomain(properties.index).url,
|
||||
);
|
||||
dialog.showErrorBox(title, content);
|
||||
}
|
||||
}
|
||||
});
|
||||
class ServerInfoForm extends BaseComponent {
|
||||
// TODO: TypeScript - Here props should be object type
|
||||
props: any;
|
||||
$serverInfoForm: Element;
|
||||
$serverInfoAlias: Element;
|
||||
$serverIcon: Element;
|
||||
$deleteServerButton: Element;
|
||||
$openServerButton: Element;
|
||||
constructor(props: any) {
|
||||
super();
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
$openServerButton.addEventListener("click", () => {
|
||||
ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
|
||||
});
|
||||
template(): string {
|
||||
return `
|
||||
<div class="settings-card">
|
||||
<div class="server-info-left">
|
||||
<img class="server-info-icon" src="${this.props.server.icon}"/>
|
||||
<div class="server-info-row">
|
||||
<span class="server-info-alias">${this.props.server.alias}</span>
|
||||
<i class="material-icons open-tab-button">open_in_new</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-info-right">
|
||||
<div class="server-info-row server-url">
|
||||
<span class="server-url-info" title="${this.props.server.url}">${this.props.server.url}</span>
|
||||
</div>
|
||||
<div class="server-info-row">
|
||||
<div class="action red server-delete-action">
|
||||
<span>${t.__('Disconnect')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
$serverInfoAlias.addEventListener("click", () => {
|
||||
ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
|
||||
});
|
||||
init(): void {
|
||||
this.initForm();
|
||||
this.initActions();
|
||||
}
|
||||
|
||||
$serverIcon.addEventListener("click", () => {
|
||||
ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
|
||||
});
|
||||
initForm(): void {
|
||||
this.$serverInfoForm = this.generateNodeFromTemplate(this.template());
|
||||
this.$serverInfoAlias = this.$serverInfoForm.querySelectorAll('.server-info-alias')[0];
|
||||
this.$serverIcon = this.$serverInfoForm.querySelectorAll('.server-info-icon')[0];
|
||||
this.$deleteServerButton = this.$serverInfoForm.querySelectorAll('.server-delete-action')[0];
|
||||
this.$openServerButton = this.$serverInfoForm.querySelectorAll('.open-tab-button')[0];
|
||||
this.props.$root.append(this.$serverInfoForm);
|
||||
}
|
||||
|
||||
initActions(): void {
|
||||
this.$deleteServerButton.addEventListener('click', () => {
|
||||
dialog.showMessageBox({
|
||||
type: 'warning',
|
||||
buttons: [t.__('YES'), t.__('NO')],
|
||||
defaultId: 0,
|
||||
message: t.__('Are you sure you want to disconnect this organization?')
|
||||
}, response => {
|
||||
if (response === 0) {
|
||||
if (DomainUtil.removeDomain(this.props.index)) {
|
||||
ipcRenderer.send('reload-full-app');
|
||||
} else {
|
||||
const { title, content } = Messages.orgRemovalError(DomainUtil.getDomain(this.props.index).url);
|
||||
dialog.showErrorBox(title, content);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.$openServerButton.addEventListener('click', () => {
|
||||
ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
|
||||
});
|
||||
|
||||
this.$serverInfoAlias.addEventListener('click', () => {
|
||||
ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
|
||||
});
|
||||
|
||||
this.$serverIcon.addEventListener('click', () => {
|
||||
ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export = ServerInfoForm;
|
||||
|
||||
@@ -1,28 +1,50 @@
|
||||
import {html} from "../../../../common/html.ts";
|
||||
import * as t from "../../../../common/translation-util.ts";
|
||||
'use strict';
|
||||
|
||||
import {reloadApp} from "./base-section.ts";
|
||||
import {initNewServerForm} from "./new-server-form.ts";
|
||||
import BaseSection = require('./base-section');
|
||||
import NewServerForm = require('./new-server-form');
|
||||
import t = require('../../utils/translation-util');
|
||||
|
||||
type ServersSectionProperties = {
|
||||
$root: Element;
|
||||
};
|
||||
class ServersSection extends BaseSection {
|
||||
// TODO: TypeScript - Here props should be object type
|
||||
props: any;
|
||||
$newServerContainer: Element;
|
||||
constructor(props: any) {
|
||||
super();
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
export function initServersSection({$root}: ServersSectionProperties): void {
|
||||
$root.innerHTML = html`
|
||||
<div class="add-server-modal">
|
||||
<div class="modal-container">
|
||||
<div class="settings-pane" id="server-settings-pane">
|
||||
<div class="page-title">${t.__("Add a Zulip organization")}</div>
|
||||
<div id="new-server-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`.html;
|
||||
const $newServerContainer = $root.querySelector("#new-server-container")!;
|
||||
template(): string {
|
||||
return `
|
||||
<div class="add-server-modal">
|
||||
<div class="modal-container">
|
||||
<div class="settings-pane" id="server-settings-pane">
|
||||
<div class="page-title">${t.__('Add a Zulip organization')}</div>
|
||||
<div id="new-server-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
initNewServerForm({
|
||||
$root: $newServerContainer,
|
||||
onChange: reloadApp,
|
||||
});
|
||||
init(): void {
|
||||
this.initServers();
|
||||
}
|
||||
|
||||
initServers(): void {
|
||||
this.props.$root.innerHTML = '';
|
||||
|
||||
this.props.$root.innerHTML = this.template();
|
||||
this.$newServerContainer = document.querySelector('#new-server-container');
|
||||
|
||||
this.initNewServerForm();
|
||||
}
|
||||
|
||||
initNewServerForm(): void {
|
||||
new NewServerForm({
|
||||
$root: this.$newServerContainer,
|
||||
onChange: this.reloadApp
|
||||
}).init();
|
||||
}
|
||||
}
|
||||
|
||||
export = ServersSection;
|
||||
|
||||
@@ -1,235 +1,345 @@
|
||||
import process from "node:process";
|
||||
'use strict';
|
||||
|
||||
import {html} from "../../../../common/html.ts";
|
||||
import * as LinkUtil from "../../../../common/link-util.ts";
|
||||
import * as t from "../../../../common/translation-util.ts";
|
||||
import { shell } from 'electron';
|
||||
|
||||
type ShortcutsSectionProperties = {
|
||||
$root: Element;
|
||||
};
|
||||
import BaseSection = require('./base-section');
|
||||
import t = require('../../utils/translation-util');
|
||||
|
||||
// eslint-disable-next-line complexity
|
||||
export function initShortcutsSection({
|
||||
$root,
|
||||
}: ShortcutsSectionProperties): void {
|
||||
const cmdOrCtrl = process.platform === "darwin" ? "⌘" : "Ctrl";
|
||||
class ShortcutsSection extends BaseSection {
|
||||
// TODO: TypeScript - Here props should be object type
|
||||
props: any;
|
||||
constructor(props: any) {
|
||||
super();
|
||||
this.props = props;
|
||||
}
|
||||
// TODO - Deduplicate templateMac and templateWinLin functions. In theory
|
||||
// they both should be the same the only thing different should be the userOSKey
|
||||
// variable but there seems to be inconsistences between both function, one has more
|
||||
// lines though one may just be using more new lines and other thing is the use of +.
|
||||
templateMac(): string {
|
||||
const userOSKey = '⌘';
|
||||
|
||||
$root.innerHTML = html`
|
||||
<div class="settings-pane">
|
||||
<div class="settings-card tip">
|
||||
<p>
|
||||
<b><i class="material-icons md-14">settings</i>${t.__("Tip")}: </b
|
||||
>${t.__("These desktop app shortcuts extend the Zulip webapp's")}
|
||||
<span id="open-hotkeys-link"> ${t.__("keyboard shortcuts")}</span>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="title">${t.__("Application Shortcuts")}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>,</kbd></td>
|
||||
<td>${t.__("Settings")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>K</kbd></td>
|
||||
<td>${t.__("Keyboard Shortcuts")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
|
||||
<td>${t.__("Toggle Do Not Disturb")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>M</kbd></td>
|
||||
<td>${t.__("Toggle Do Not Disturb")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>D</kbd></td>
|
||||
<td>${t.__("Reset App Settings")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>L</kbd></td>
|
||||
<td>${t.__("Log Out")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>H</kbd></td>
|
||||
<td>${t.__("Hide Zulip")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>Option</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>H</kbd></td>
|
||||
<td>${t.__("Hide Others")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>Q</kbd></td>
|
||||
<td>${t.__("Quit Zulip")}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__("Edit Shortcuts")}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>Z</kbd></td>
|
||||
<td>${t.__("Undo")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>Z</kbd></td>
|
||||
<td>${t.__("Redo")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>Y</kbd></td>
|
||||
<td>${t.__("Redo")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>X</kbd></td>
|
||||
<td>${t.__("Cut")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>C</kbd></td>
|
||||
<td>${t.__("Copy")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>V</kbd></td>
|
||||
<td>${t.__("Paste")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td>
|
||||
<td>${t.__("Paste and Match Style")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>V</kbd></td>
|
||||
<td>${t.__("Paste and Match Style")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>A</kbd></td>
|
||||
<td>${t.__("Select All")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td>
|
||||
<kbd>Control</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>Space</kbd>
|
||||
</td>
|
||||
<td>${t.__("Emoji & Symbols")}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__("View Shortcuts")}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>R</kbd></td>
|
||||
<td>${t.__("Reload")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
|
||||
<td>${t.__("Hard Reload")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>R</kbd></td>
|
||||
<td>${t.__("Hard Reload")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>F11</kbd></td>
|
||||
<td>${t.__("Toggle Full Screen")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>Control</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>F</kbd></td>
|
||||
<td>${t.__("Enter Full Screen")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>+</kbd></td>
|
||||
<td>${t.__("Zoom In")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>=</kbd></td>
|
||||
<td>${t.__("Zoom In")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>-</kbd></td>
|
||||
<td>${t.__("Zoom Out")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>0</kbd></td>
|
||||
<td>${t.__("Actual Size")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
|
||||
<td>${t.__("Toggle Sidebar")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>S</kbd></td>
|
||||
<td>${t.__("Toggle Sidebar")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>Option</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>I</kbd></td>
|
||||
<td>${t.__("Toggle DevTools for Zulip App")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
|
||||
<td>${t.__("Toggle DevTools for Zulip App")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>Option</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>U</kbd></td>
|
||||
<td>${t.__("Toggle DevTools for Active Tab")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
|
||||
<td>${t.__("Toggle DevTools for Active Tab")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl</kbd> + <kbd>Tab</kbd></td>
|
||||
<td>${t.__("Switch to Next Organization")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
|
||||
<td>${t.__("Switch to Previous Organization")}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__("History Shortcuts")}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>←</kbd></td>
|
||||
<td>${t.__("Back")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>Alt</kbd> + <kbd>←</kbd></td>
|
||||
<td>${t.__("Back")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "" : "hidden"}>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>→</kbd></td>
|
||||
<td>${t.__("Forward")}</td>
|
||||
</tr>
|
||||
<tr ${process.platform === "darwin" ? "hidden" : ""}>
|
||||
<td><kbd>Alt</kbd> + <kbd>→</kbd></td>
|
||||
<td>${t.__("Forward")}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__("Window Shortcuts")}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>M</kbd></td>
|
||||
<td>${t.__("Minimize")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${cmdOrCtrl}</kbd> + <kbd>W</kbd></td>
|
||||
<td>${t.__("Close")}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
</div>
|
||||
`.html;
|
||||
return `
|
||||
<div class="settings-pane">
|
||||
<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}: </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
|
||||
<div class="title">${t.__('Application Shortcuts')}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>,</kbd></td>
|
||||
<td>${t.__('Settings')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>K</kbd></td>
|
||||
<td>${t.__('Keyboard Shortcuts')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
|
||||
<td>${t.__('Toggle Do Not Disturb')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>D</kbd></td>
|
||||
<td>${t.__('Reset App Settings')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>L</kbd></td>
|
||||
<td>${t.__('Log Out')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
|
||||
<td>${t.__('Hide Zulip')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
|
||||
<td>${t.__('Hide Others')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>Q</kbd></td>
|
||||
<td>${t.__('Quit Zulip')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__('Edit Shortcuts')}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
|
||||
<td>${t.__('Undo')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
|
||||
<td>${t.__('Redo')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>X</kbd></td>
|
||||
<td>${t.__('Cut')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>C</kbd></td>
|
||||
<td>${t.__('Copy')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
|
||||
<td>${t.__('Paste')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
|
||||
<td>${t.__('Paste and Match Style')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>A</kbd></td>
|
||||
<td>${t.__('Select All')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>Space</kbd></td>
|
||||
<td>${t.__('Emoji & Symbols')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__('View Shortcuts')}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
|
||||
<td>${t.__('Reload')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
|
||||
<td>${t.__('Hard Reload')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>F</kbd></td>
|
||||
<td>${t.__('Enter Full Screen')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>+</kbd></td>
|
||||
<td>${t.__('Zoom In')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>-</kbd></td>
|
||||
<td>${t.__('Zoom Out')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>0</kbd></td>
|
||||
<td>${t.__('Actual Size')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
|
||||
<td>${t.__('Toggle Sidebar')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>I</kbd></td>
|
||||
<td>${t.__('Toggle DevTools for Zulip App')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>U</kbd></td>
|
||||
<td>${t.__('Toggle DevTools for Active Tab')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl</kbd> + <kbd>Tab</kbd></td>
|
||||
<td>${t.__('Switch to Next Organization')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
|
||||
<td>${t.__('Switch to Previous Organization')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__('History Shortcuts')}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>←</kbd></td>
|
||||
<td>${t.__('Back')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>→</kbd></td>
|
||||
<td>${t.__('Forward')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">Window Shortcuts</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>M</kbd></td>
|
||||
<td>${t.__('Minimize')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd><kbd>W</kbd></td>
|
||||
<td>${t.__('Close')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
const link = "https://zulip.com/help/keyboard-shortcuts";
|
||||
const externalCreateNewOrgElement =
|
||||
$root.querySelector("#open-hotkeys-link")!;
|
||||
externalCreateNewOrgElement.addEventListener("click", async () => {
|
||||
await LinkUtil.openBrowser(new URL(link));
|
||||
});
|
||||
templateWinLin(): string {
|
||||
const userOSKey = 'Ctrl';
|
||||
|
||||
return `
|
||||
<div class="settings-pane">
|
||||
<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}: </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
|
||||
<div class="title">${t.__('Application Shortcuts')}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>,</kbd></td>
|
||||
<td>${t.__('Settings')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>K</kbd></td>
|
||||
<td>${t.__('Keyboard Shortcuts')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
|
||||
<td>${t.__('Toggle Do Not Disturb')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>L</kbd></td>
|
||||
<td>${t.__('Log Out')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Q</kbd></td>
|
||||
<td>${t.__('Quit Zulip')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__('Edit Shortcuts')}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Z</kbd></td>
|
||||
<td>${t.__('Undo')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Y</kbd></td>
|
||||
<td>${t.__('Redo')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>X</kbd></td>
|
||||
<td>${t.__('Cut')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>C</kbd></td>
|
||||
<td>${t.__('Copy')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>V</kbd></td>
|
||||
<td>${t.__('Paste')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td>
|
||||
<td>${t.__('Paste and Match Style')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>A</kbd></td>
|
||||
<td>${t.__('Select All')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__('View Shortcuts')}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>R</kbd></td>
|
||||
<td>${t.__('Reload')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
|
||||
<td>${t.__('Hard Reload')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>F11</kbd></td>
|
||||
<td>${t.__('Toggle Full Screen')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>=</kbd></td>
|
||||
<td>${t.__('Zoom In')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>-</kbd></td>
|
||||
<td>${t.__('Zoom Out')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>0</kbd></td>
|
||||
<td>${t.__('Actual Size')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
|
||||
<td>${t.__('Toggle Sidebar')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
|
||||
<td>${t.__('Toggle DevTools for Zulip App')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
|
||||
<td>${t.__('Toggle DevTools for Active Tab')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Tab</kbd></td>
|
||||
<td>${t.__('Switch to Next Organization')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
|
||||
<td>${t.__('Switch to Previous Organization')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__('History Shortcuts')}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>←</kbd></td>
|
||||
<td>${t.__('Back')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>→</kbd></td>
|
||||
<td>${t.__('Forward')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
<div class="title">${t.__('Window Shortcuts')}</div>
|
||||
<div class="settings-card">
|
||||
<table>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>M</kbd></td>
|
||||
<td>${t.__('Minimize')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>${userOSKey}</kbd> + <kbd>W</kbd></td>
|
||||
<td>${t.__('Close')}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="setting-control"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
openHotkeysExternalLink(): void {
|
||||
const link = 'https://zulipchat.com/help/keyboard-shortcuts';
|
||||
const externalCreateNewOrgEl = document.querySelector('#open-hotkeys-link');
|
||||
externalCreateNewOrgEl.addEventListener('click', () => {
|
||||
shell.openExternal(link);
|
||||
});
|
||||
}
|
||||
init(): void {
|
||||
this.props.$root.innerHTML = (process.platform === 'darwin') ?
|
||||
this.templateMac() : this.templateWinLin();
|
||||
this.openHotkeysExternalLink();
|
||||
}
|
||||
}
|
||||
|
||||
export = ShortcutsSection;
|
||||
|
||||
@@ -1,29 +1,165 @@
|
||||
import {contextBridge} from "electron/renderer";
|
||||
// we have and will have some non camelcase stuff
|
||||
// while working with zulip and electron bridge
|
||||
// so turning the rule off for the whole file.
|
||||
/* eslint-disable @typescript-eslint/camelcase */
|
||||
|
||||
import electron_bridge, {bridgeEvents} from "./electron-bridge.ts";
|
||||
import * as NetworkError from "./pages/network.ts";
|
||||
import {ipcRenderer} from "./typed-ipc-renderer.ts";
|
||||
'use strict';
|
||||
|
||||
contextBridge.exposeInMainWorld("electron_bridge", electron_bridge);
|
||||
import { ipcRenderer, shell } from 'electron';
|
||||
import SetupSpellChecker from './spellchecker';
|
||||
|
||||
ipcRenderer.on("logout", () => {
|
||||
bridgeEvents.emit("logout");
|
||||
import isDev = require('electron-is-dev');
|
||||
import LinkUtil = require('./utils/link-util');
|
||||
import params = require('./utils/params-util');
|
||||
|
||||
import NetworkError = require('./pages/network');
|
||||
|
||||
interface PatchedGlobal extends NodeJS.Global {
|
||||
logout: () => void;
|
||||
shortcut: () => void;
|
||||
showNotificationSettings: () => void;
|
||||
}
|
||||
|
||||
const globalPatched = global as PatchedGlobal;
|
||||
|
||||
// eslint-disable-next-line import/no-unassigned-import
|
||||
require('./notification');
|
||||
|
||||
// Prevent drag and drop event in main process which prevents remote code executaion
|
||||
require(__dirname + '/shared/preventdrag.js');
|
||||
|
||||
declare let window: ZulipWebWindow;
|
||||
|
||||
window.electron_bridge = require('./electron-bridge');
|
||||
|
||||
const logout = (): void => {
|
||||
// Create the menu for the below
|
||||
const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
|
||||
dropdown.click();
|
||||
|
||||
const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li:last-child a');
|
||||
nodes[nodes.length - 1].click();
|
||||
};
|
||||
|
||||
const shortcut = (): void => {
|
||||
// Create the menu for the below
|
||||
const node: HTMLElement = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
|
||||
// Additional check
|
||||
if (node.textContent.trim().toLowerCase() === 'keyboard shortcuts (?)') {
|
||||
node.click();
|
||||
} else {
|
||||
// Atleast click the dropdown
|
||||
const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
|
||||
dropdown.click();
|
||||
}
|
||||
};
|
||||
|
||||
const showNotificationSettings = (): void => {
|
||||
// Create the menu for the below
|
||||
const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
|
||||
dropdown.click();
|
||||
|
||||
const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li a');
|
||||
nodes[2].click();
|
||||
|
||||
const notificationItem: NodeListOf<HTMLElement> = document.querySelectorAll('.normal-settings-list li div');
|
||||
|
||||
// wait until the notification dom element shows up
|
||||
setTimeout(() => {
|
||||
notificationItem[2].click();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
process.once('loaded', (): void => {
|
||||
globalPatched.logout = logout;
|
||||
globalPatched.shortcut = shortcut;
|
||||
globalPatched.showNotificationSettings = showNotificationSettings;
|
||||
});
|
||||
|
||||
ipcRenderer.on("show-keyboard-shortcuts", () => {
|
||||
bridgeEvents.emit("show-keyboard-shortcuts");
|
||||
// To prevent failing this script on linux we need to load it after the document loaded
|
||||
document.addEventListener('DOMContentLoaded', (): void => {
|
||||
if (params.isPageParams()) {
|
||||
// Get the default language of the server
|
||||
const serverLanguage = page_params.default_language; // eslint-disable-line no-undef
|
||||
if (serverLanguage) {
|
||||
// Init spellchecker
|
||||
SetupSpellChecker.init(serverLanguage);
|
||||
}
|
||||
// redirect users to network troubleshooting page
|
||||
const getRestartButton = document.querySelector('.restart_get_events_button');
|
||||
if (getRestartButton) {
|
||||
getRestartButton.addEventListener('click', () => {
|
||||
ipcRenderer.send('forward-message', 'reload-viewer');
|
||||
});
|
||||
}
|
||||
// Open image attachment link in the lightbox instead of opening in the default browser
|
||||
const { $, lightbox } = window;
|
||||
$('#main_div').on('click', '.message_content p a', function (this: HTMLElement, e: Event) {
|
||||
const url = $(this).attr('href');
|
||||
|
||||
if (LinkUtil.isImage(url)) {
|
||||
const $img = $(this).parent().siblings('.message_inline_image').find('img');
|
||||
|
||||
// prevent the image link from opening in a new page.
|
||||
e.preventDefault();
|
||||
// prevent the message compose dialog from happening.
|
||||
e.stopPropagation();
|
||||
|
||||
// Open image in the default browser if image preview is unavailable
|
||||
if (!$img[0]) {
|
||||
shell.openExternal(window.location.origin + url);
|
||||
}
|
||||
// Open image in lightbox
|
||||
lightbox.open($img);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
ipcRenderer.on("show-notification-settings", () => {
|
||||
bridgeEvents.emit("show-notification-settings");
|
||||
// Clean up spellchecker events after you navigate away from this page;
|
||||
// otherwise, you may experience errors
|
||||
window.addEventListener('beforeunload', (): void => {
|
||||
SetupSpellChecker.unsubscribeSpellChecker();
|
||||
});
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
if (!location.href.includes("app/renderer/network.html")) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $reconnectButton = document.querySelector("#reconnect")!;
|
||||
const $settingsButton = document.querySelector("#settings")!;
|
||||
NetworkError.init($reconnectButton, $settingsButton);
|
||||
window.addEventListener('load', (event: any): void => {
|
||||
if (!event.target.URL.includes('app/renderer/network.html')) {
|
||||
return;
|
||||
}
|
||||
const $reconnectButton = document.querySelector('#reconnect');
|
||||
const $settingsButton = document.querySelector('#settings');
|
||||
NetworkError.init($reconnectButton, $settingsButton);
|
||||
});
|
||||
|
||||
// electron's globalShortcut can cause unexpected results
|
||||
// so adding the reload shortcut in the old-school way
|
||||
// Zoom from numpad keys is not supported by electron, so adding it through listeners.
|
||||
document.addEventListener('keydown', event => {
|
||||
const cmdOrCtrl = event.ctrlKey || event.metaKey;
|
||||
if (event.code === 'F5') {
|
||||
ipcRenderer.send('forward-message', 'hard-reload');
|
||||
} else if (cmdOrCtrl && (event.code === 'NumpadAdd' || event.code === 'Equal')) {
|
||||
ipcRenderer.send('forward-message', 'zoomIn');
|
||||
} else if (cmdOrCtrl && event.code === 'NumpadSubtract') {
|
||||
ipcRenderer.send('forward-message', 'zoomOut');
|
||||
} else if (cmdOrCtrl && event.code === 'Numpad0') {
|
||||
ipcRenderer.send('forward-message', 'zoomActualSize');
|
||||
}
|
||||
});
|
||||
|
||||
// Set user as active and update the time of last activity
|
||||
ipcRenderer.on('set-active', () => {
|
||||
if (isDev) {
|
||||
console.log('active');
|
||||
}
|
||||
window.electron_bridge.idle_on_system = false;
|
||||
window.electron_bridge.last_active_on_system = Date.now();
|
||||
});
|
||||
|
||||
// Set user as idle and time of last activity is left unchanged
|
||||
ipcRenderer.on('set-idle', () => {
|
||||
if (isDev) {
|
||||
console.log('idle');
|
||||
}
|
||||
window.electron_bridge.idle_on_system = true;
|
||||
});
|
||||
|
||||
17
app/renderer/js/shared/preventdrag.ts
Normal file
17
app/renderer/js/shared/preventdrag.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
'use strict';
|
||||
|
||||
// This is a security fix. Following function prevents drag and drop event in the app
|
||||
// so that attackers can't execute any remote code within the app
|
||||
// It doesn't affect the compose box so that users can still
|
||||
// use drag and drop event to share files etc
|
||||
|
||||
const preventDragAndDrop = (): void => {
|
||||
const preventEvents = ['dragover', 'drop'];
|
||||
preventEvents.forEach(dragEvents => {
|
||||
document.addEventListener(dragEvents, event => {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
preventDragAndDrop();
|
||||
56
app/renderer/js/spellchecker.ts
Normal file
56
app/renderer/js/spellchecker.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
'use strict';
|
||||
|
||||
import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
|
||||
|
||||
import ConfigUtil = require('./utils/config-util');
|
||||
import Logger = require('./utils/logger-util');
|
||||
|
||||
const logger = new Logger({
|
||||
file: 'errors.log',
|
||||
timestamp: true
|
||||
});
|
||||
|
||||
class SetupSpellChecker {
|
||||
SpellCheckHandler: typeof SpellCheckHandler;
|
||||
contextMenuListener: typeof ContextMenuListener;
|
||||
init(serverLanguage: string): void {
|
||||
if (ConfigUtil.getConfigItem('enableSpellchecker')) {
|
||||
this.enableSpellChecker();
|
||||
}
|
||||
this.enableContextMenu(serverLanguage);
|
||||
}
|
||||
|
||||
enableSpellChecker(): void {
|
||||
try {
|
||||
this.SpellCheckHandler = new SpellCheckHandler();
|
||||
} catch (err) {
|
||||
logger.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
enableContextMenu(serverLanguage: string): void {
|
||||
if (this.SpellCheckHandler) {
|
||||
this.SpellCheckHandler.attachToInput();
|
||||
this.SpellCheckHandler.switchLanguage(serverLanguage);
|
||||
this.SpellCheckHandler.currentSpellcheckerChanged.subscribe(() => {
|
||||
this.SpellCheckHandler.switchLanguage(this.SpellCheckHandler.currentSpellcheckerLanguage);
|
||||
});
|
||||
}
|
||||
|
||||
const contextMenuBuilder = new ContextMenuBuilder(this.SpellCheckHandler);
|
||||
this.contextMenuListener = new ContextMenuListener((info: object) => {
|
||||
contextMenuBuilder.showPopupMenu(info);
|
||||
});
|
||||
}
|
||||
|
||||
unsubscribeSpellChecker(): void {
|
||||
if (this.SpellCheckHandler) {
|
||||
this.SpellCheckHandler.unsubscribe();
|
||||
}
|
||||
if (this.contextMenuListener) {
|
||||
this.contextMenuListener.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export = new SetupSpellChecker();
|
||||
@@ -1,251 +1,220 @@
|
||||
import {type NativeImage, nativeImage} from "electron/common";
|
||||
import type {Tray as ElectronTray} from "electron/main";
|
||||
import path from "node:path";
|
||||
import process from "node:process";
|
||||
'use strict';
|
||||
import { ipcRenderer, remote, WebviewTag, NativeImage } from 'electron';
|
||||
|
||||
import {BrowserWindow, Menu, Tray} from "@electron/remote";
|
||||
import path = require('path');
|
||||
import ConfigUtil = require('./utils/config-util.js');
|
||||
const { Tray, Menu, nativeImage, BrowserWindow } = remote;
|
||||
|
||||
import * as ConfigUtil from "../../common/config-util.ts";
|
||||
import {publicPath} from "../../common/paths.ts";
|
||||
import * as t from "../../common/translation-util.ts";
|
||||
import type {RendererMessage} from "../../common/typed-ipc.ts";
|
||||
const APP_ICON = path.join(__dirname, '../../resources/tray', 'tray');
|
||||
|
||||
import type {ServerManagerView} from "./main.ts";
|
||||
import {ipcRenderer} from "./typed-ipc-renderer.ts";
|
||||
|
||||
let tray: ElectronTray | null = null;
|
||||
|
||||
const appIcon = path.join(publicPath, "resources/tray/tray");
|
||||
declare let window: ZulipWebWindow;
|
||||
|
||||
const iconPath = (): string => {
|
||||
if (process.platform === "linux") {
|
||||
return appIcon + "linux.png";
|
||||
}
|
||||
|
||||
return (
|
||||
appIcon + (process.platform === "win32" ? "win.ico" : "macOSTemplate.png")
|
||||
);
|
||||
if (process.platform === 'linux') {
|
||||
return APP_ICON + 'linux.png';
|
||||
}
|
||||
return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'osx.png');
|
||||
};
|
||||
|
||||
const winUnreadTrayIconPath = (): string => appIcon + "unread.ico";
|
||||
|
||||
let unread = 0;
|
||||
|
||||
const trayIconSize = (): number => {
|
||||
switch (process.platform) {
|
||||
case "darwin": {
|
||||
return 20;
|
||||
}
|
||||
|
||||
case "win32": {
|
||||
return 100;
|
||||
}
|
||||
|
||||
case "linux": {
|
||||
return 100;
|
||||
}
|
||||
|
||||
default: {
|
||||
return 80;
|
||||
}
|
||||
}
|
||||
switch (process.platform) {
|
||||
case 'darwin':
|
||||
return 20;
|
||||
case 'win32':
|
||||
return 100;
|
||||
case 'linux':
|
||||
return 100;
|
||||
default: return 80;
|
||||
}
|
||||
};
|
||||
|
||||
// Default config for Icon we might make it OS specific if needed like the size
|
||||
const config = {
|
||||
pixelRatio: window.devicePixelRatio,
|
||||
unreadCount: 0,
|
||||
showUnreadCount: true,
|
||||
unreadColor: "#000000",
|
||||
readColor: "#000000",
|
||||
unreadBackgroundColor: "#B9FEEA",
|
||||
readBackgroundColor: "#B9FEEA",
|
||||
size: trayIconSize(),
|
||||
thick: process.platform === "win32",
|
||||
pixelRatio: window.devicePixelRatio,
|
||||
unreadCount: 0,
|
||||
showUnreadCount: true,
|
||||
unreadColor: '#000000',
|
||||
readColor: '#000000',
|
||||
unreadBackgroundColor: '#B9FEEA',
|
||||
readBackgroundColor: '#B9FEEA',
|
||||
size: trayIconSize(),
|
||||
thick: process.platform === 'win32'
|
||||
};
|
||||
|
||||
const renderCanvas = function (argument: number): HTMLCanvasElement {
|
||||
config.unreadCount = argument;
|
||||
const renderCanvas = function (arg: number): Promise<HTMLCanvasElement> {
|
||||
config.unreadCount = arg;
|
||||
|
||||
const size = config.size * config.pixelRatio;
|
||||
const padding = size * 0.05;
|
||||
const center = size / 2;
|
||||
const hasCount = config.showUnreadCount && config.unreadCount;
|
||||
const color = config.unreadCount ? config.unreadColor : config.readColor;
|
||||
const backgroundColor = config.unreadCount
|
||||
? config.unreadBackgroundColor
|
||||
: config.readBackgroundColor;
|
||||
return new Promise(resolve => {
|
||||
const SIZE = config.size * config.pixelRatio;
|
||||
const PADDING = SIZE * 0.05;
|
||||
const CENTER = SIZE / 2;
|
||||
const HAS_COUNT = config.showUnreadCount && config.unreadCount;
|
||||
const color = config.unreadCount ? config.unreadColor : config.readColor;
|
||||
const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
const context = canvas.getContext("2d")!;
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = SIZE;
|
||||
canvas.height = SIZE;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Circle
|
||||
// If (!config.thick || config.thick && hasCount) {
|
||||
context.beginPath();
|
||||
context.arc(center, center, size / 2 - padding, 0, 2 * Math.PI, false);
|
||||
context.fillStyle = backgroundColor;
|
||||
context.fill();
|
||||
context.lineWidth = size / (config.thick ? 10 : 20);
|
||||
context.strokeStyle = backgroundColor;
|
||||
context.stroke();
|
||||
// Count or Icon
|
||||
if (hasCount) {
|
||||
context.fillStyle = color;
|
||||
context.textAlign = "center";
|
||||
if (config.unreadCount > 99) {
|
||||
context.font = `${config.thick ? "bold " : ""}${size * 0.4}px Helvetica`;
|
||||
context.fillText("99+", center, center + size * 0.15);
|
||||
} else if (config.unreadCount < 10) {
|
||||
context.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
|
||||
context.fillText(String(config.unreadCount), center, center + size * 0.2);
|
||||
} else {
|
||||
context.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
|
||||
context.fillText(
|
||||
String(config.unreadCount),
|
||||
center,
|
||||
center + size * 0.15,
|
||||
);
|
||||
}
|
||||
}
|
||||
// Circle
|
||||
// If (!config.thick || config.thick && HAS_COUNT) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = backgroundColor;
|
||||
ctx.fill();
|
||||
ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
|
||||
ctx.strokeStyle = backgroundColor;
|
||||
ctx.stroke();
|
||||
// Count or Icon
|
||||
if (HAS_COUNT) {
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = 'center';
|
||||
if (config.unreadCount > 99) {
|
||||
ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
|
||||
ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
|
||||
} else if (config.unreadCount < 10) {
|
||||
ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
|
||||
ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.20));
|
||||
} else {
|
||||
ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
|
||||
ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.15));
|
||||
}
|
||||
|
||||
return canvas;
|
||||
resolve(canvas);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the tray icon as a native image
|
||||
* @param arg: Unread count
|
||||
* @return the native image
|
||||
*/
|
||||
const renderNativeImage = function (argument: number): NativeImage {
|
||||
if (process.platform === "win32") {
|
||||
return nativeImage.createFromPath(winUnreadTrayIconPath());
|
||||
}
|
||||
const renderNativeImage = function (arg: number): Promise<NativeImage> {
|
||||
return Promise.resolve()
|
||||
.then(() => renderCanvas(arg))
|
||||
.then(canvas => {
|
||||
const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPNG();
|
||||
|
||||
const canvas = renderCanvas(argument);
|
||||
const pngData = nativeImage
|
||||
.createFromDataURL(canvas.toDataURL("image/png"))
|
||||
.toPNG();
|
||||
return nativeImage.createFromBuffer(pngData, {
|
||||
scaleFactor: config.pixelRatio,
|
||||
});
|
||||
// TODO: Fix the function to correctly use Promise correctly.
|
||||
// the Promise.resolve().then(...) above is useless we should
|
||||
// start with renderCanvas(arg).then
|
||||
// eslint-disable-next-line promise/no-return-wrap
|
||||
return Promise.resolve(nativeImage.createFromBuffer(pngData, {
|
||||
scaleFactor: config.pixelRatio
|
||||
}));
|
||||
});
|
||||
};
|
||||
|
||||
function sendAction<Channel extends keyof RendererMessage>(
|
||||
channel: Channel,
|
||||
...arguments_: Parameters<RendererMessage[Channel]>
|
||||
): void {
|
||||
const win = BrowserWindow.getAllWindows()[0];
|
||||
function sendAction(action: string): void {
|
||||
const win = BrowserWindow.getAllWindows()[0];
|
||||
|
||||
if (process.platform === "darwin") {
|
||||
win.restore();
|
||||
}
|
||||
if (process.platform === 'darwin') {
|
||||
win.restore();
|
||||
}
|
||||
|
||||
ipcRenderer.send("forward-to", win.webContents.id, channel, ...arguments_);
|
||||
win.webContents.send(action);
|
||||
}
|
||||
|
||||
const createTray = function (): void {
|
||||
const contextMenu = Menu.buildFromTemplate([
|
||||
{
|
||||
label: t.__("Zulip"),
|
||||
click() {
|
||||
ipcRenderer.send("focus-app");
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t.__("Settings"),
|
||||
click() {
|
||||
ipcRenderer.send("focus-app");
|
||||
sendAction("open-settings");
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "separator",
|
||||
},
|
||||
{
|
||||
label: t.__("Quit"),
|
||||
click() {
|
||||
ipcRenderer.send("quit-app");
|
||||
},
|
||||
},
|
||||
]);
|
||||
tray = new Tray(iconPath());
|
||||
tray.setContextMenu(contextMenu);
|
||||
if (process.platform === "linux" || process.platform === "win32") {
|
||||
tray.on("click", () => {
|
||||
ipcRenderer.send("toggle-app");
|
||||
});
|
||||
}
|
||||
window.tray = new Tray(iconPath());
|
||||
const contextMenu = Menu.buildFromTemplate([
|
||||
{
|
||||
label: 'Zulip',
|
||||
click() {
|
||||
ipcRenderer.send('focus-app');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
click() {
|
||||
ipcRenderer.send('focus-app');
|
||||
sendAction('open-settings');
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
click() {
|
||||
ipcRenderer.send('quit-app');
|
||||
}
|
||||
}
|
||||
]);
|
||||
window.tray.setContextMenu(contextMenu);
|
||||
if (process.platform === 'linux' || process.platform === 'win32') {
|
||||
window.tray.on('click', () => {
|
||||
ipcRenderer.send('toggle-app');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export function initializeTray(serverManagerView: ServerManagerView) {
|
||||
ipcRenderer.on("destroytray", () => {
|
||||
if (!tray) {
|
||||
return;
|
||||
}
|
||||
ipcRenderer.on('destroytray', (event: Event): Event => {
|
||||
if (!window.tray) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
tray.destroy();
|
||||
if (tray.isDestroyed()) {
|
||||
tray = null;
|
||||
} else {
|
||||
throw new Error("Tray icon not properly destroyed.");
|
||||
}
|
||||
});
|
||||
window.tray.destroy();
|
||||
if (window.tray.isDestroyed()) {
|
||||
window.tray = null;
|
||||
} else {
|
||||
throw new Error('Tray icon not properly destroyed.');
|
||||
}
|
||||
|
||||
ipcRenderer.on("tray", (_event, argument: number): void => {
|
||||
if (!tray) {
|
||||
return;
|
||||
}
|
||||
return event;
|
||||
});
|
||||
|
||||
// We don't want to create tray from unread messages on macOS since it already has dock badges.
|
||||
if (process.platform === "linux" || process.platform === "win32") {
|
||||
if (argument === 0) {
|
||||
unread = argument;
|
||||
tray.setImage(iconPath());
|
||||
tray.setToolTip(t.__("No unread messages"));
|
||||
} else {
|
||||
unread = argument;
|
||||
const image = renderNativeImage(argument);
|
||||
tray.setImage(image);
|
||||
tray.setToolTip(
|
||||
t.__mf(
|
||||
"{number, plural, one {# unread message} other {# unread messages}}",
|
||||
{number: `${argument}`},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
ipcRenderer.on('tray', (_event: Event, arg: number): void => {
|
||||
if (!window.tray) {
|
||||
return;
|
||||
}
|
||||
// We don't want to create tray from unread messages on macOS since it already has dock badges.
|
||||
if (process.platform === 'linux' || process.platform === 'win32') {
|
||||
if (arg === 0) {
|
||||
unread = arg;
|
||||
window.tray.setImage(iconPath());
|
||||
window.tray.setToolTip('No unread messages');
|
||||
} else {
|
||||
unread = arg;
|
||||
renderNativeImage(arg).then(image => {
|
||||
window.tray.setImage(image);
|
||||
window.tray.setToolTip(arg + ' unread messages');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function toggleTray(): void {
|
||||
let state;
|
||||
if (tray) {
|
||||
state = false;
|
||||
tray.destroy();
|
||||
if (tray.isDestroyed()) {
|
||||
tray = null;
|
||||
}
|
||||
|
||||
ConfigUtil.setConfigItem("trayIcon", false);
|
||||
} else {
|
||||
state = true;
|
||||
createTray();
|
||||
if (process.platform === "linux" || process.platform === "win32") {
|
||||
const image = renderNativeImage(unread);
|
||||
tray!.setImage(image);
|
||||
tray!.setToolTip(`${unread} unread messages`);
|
||||
}
|
||||
|
||||
ConfigUtil.setConfigItem("trayIcon", true);
|
||||
}
|
||||
|
||||
serverManagerView.preferenceView?.handleToggleTray(state);
|
||||
}
|
||||
|
||||
ipcRenderer.on("toggletray", toggleTray);
|
||||
|
||||
if (ConfigUtil.getConfigItem("trayIcon", true)) {
|
||||
createTray();
|
||||
}
|
||||
function toggleTray(): void {
|
||||
let state;
|
||||
if (window.tray) {
|
||||
state = false;
|
||||
window.tray.destroy();
|
||||
if (window.tray.isDestroyed()) {
|
||||
window.tray = null;
|
||||
}
|
||||
ConfigUtil.setConfigItem('trayIcon', false);
|
||||
} else {
|
||||
state = true;
|
||||
createTray();
|
||||
if (process.platform === 'linux' || process.platform === 'win32') {
|
||||
renderNativeImage(unread).then(image => {
|
||||
window.tray.setImage(image);
|
||||
window.tray.setToolTip(unread + ' unread messages');
|
||||
});
|
||||
}
|
||||
ConfigUtil.setConfigItem('trayIcon', true);
|
||||
}
|
||||
const selector = 'webview:not([class*=disabled])';
|
||||
const webview: WebviewTag = document.querySelector(selector);
|
||||
const webContents = webview.getWebContents();
|
||||
webContents.send('toggletray', state);
|
||||
}
|
||||
|
||||
ipcRenderer.on('toggletray', toggleTray);
|
||||
|
||||
if (ConfigUtil.getConfigItem('trayIcon', true)) {
|
||||
createTray();
|
||||
}
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
import {
|
||||
type IpcRendererEvent,
|
||||
ipcRenderer as untypedIpcRenderer, // eslint-disable-line no-restricted-imports
|
||||
} from "electron/renderer";
|
||||
|
||||
import type {
|
||||
MainCall,
|
||||
MainMessage,
|
||||
RendererMessage,
|
||||
} from "../../common/typed-ipc.js";
|
||||
|
||||
type RendererListener<Channel extends keyof RendererMessage> =
|
||||
RendererMessage[Channel] extends (...arguments_: infer Arguments) => void
|
||||
? (event: IpcRendererEvent, ...arguments_: Arguments) => void
|
||||
: never;
|
||||
|
||||
export const ipcRenderer: {
|
||||
on<Channel extends keyof RendererMessage>(
|
||||
channel: Channel,
|
||||
listener: RendererListener<Channel>,
|
||||
): void;
|
||||
once<Channel extends keyof RendererMessage>(
|
||||
channel: Channel,
|
||||
listener: RendererListener<Channel>,
|
||||
): void;
|
||||
off<Channel extends keyof RendererMessage>(
|
||||
channel: Channel,
|
||||
listener: RendererListener<Channel>,
|
||||
): void;
|
||||
removeListener<Channel extends keyof RendererMessage>(
|
||||
channel: Channel,
|
||||
listener: RendererListener<Channel>,
|
||||
): void;
|
||||
removeAllListeners(channel: keyof RendererMessage): void;
|
||||
send<Channel extends keyof RendererMessage>(
|
||||
channel: "forward-message",
|
||||
rendererChannel: Channel,
|
||||
...arguments_: Parameters<RendererMessage[Channel]>
|
||||
): void;
|
||||
send<Channel extends keyof RendererMessage>(
|
||||
channel: "forward-to",
|
||||
webContentsId: number,
|
||||
rendererChannel: Channel,
|
||||
...arguments_: Parameters<RendererMessage[Channel]>
|
||||
): void;
|
||||
send<Channel extends keyof MainMessage>(
|
||||
channel: Channel,
|
||||
...arguments_: Parameters<MainMessage[Channel]>
|
||||
): void;
|
||||
invoke<Channel extends keyof MainCall>(
|
||||
channel: Channel,
|
||||
...arguments_: Parameters<MainCall[Channel]>
|
||||
): Promise<ReturnType<MainCall[Channel]>>;
|
||||
sendSync<Channel extends keyof MainMessage>(
|
||||
channel: Channel,
|
||||
...arguments_: Parameters<MainMessage[Channel]>
|
||||
): ReturnType<MainMessage[Channel]>;
|
||||
postMessage<Channel extends keyof MainMessage>(
|
||||
channel: Channel,
|
||||
message: Parameters<MainMessage[Channel]> extends [infer Message]
|
||||
? Message
|
||||
: never,
|
||||
transfer?: MessagePort[],
|
||||
): void;
|
||||
sendToHost<Channel extends keyof RendererMessage>(
|
||||
channel: Channel,
|
||||
...arguments_: Parameters<RendererMessage[Channel]>
|
||||
): void;
|
||||
} = untypedIpcRenderer;
|
||||
96
app/renderer/js/utils/certificate-util.ts
Normal file
96
app/renderer/js/utils/certificate-util.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
'use strict';
|
||||
|
||||
import { remote } from 'electron';
|
||||
import JsonDB from 'node-json-db';
|
||||
import { initSetUp } from './default-util';
|
||||
|
||||
import fs = require('fs');
|
||||
import path = require('path');
|
||||
import Logger = require('./logger-util');
|
||||
|
||||
const { app, dialog } = remote;
|
||||
|
||||
initSetUp();
|
||||
|
||||
const logger = new Logger({
|
||||
file: `certificate-util.log`,
|
||||
timestamp: true
|
||||
});
|
||||
|
||||
let instance: null | CertificateUtil = null;
|
||||
const certificatesDir = `${app.getPath('userData')}/certificates`;
|
||||
|
||||
class CertificateUtil {
|
||||
db: JsonDB;
|
||||
|
||||
constructor() {
|
||||
if (instance) {
|
||||
return instance;
|
||||
} else {
|
||||
instance = this;
|
||||
}
|
||||
|
||||
this.reloadDB();
|
||||
return instance;
|
||||
}
|
||||
|
||||
getCertificate(server: string, defaultValue: any = null): any {
|
||||
this.reloadDB();
|
||||
const value = this.db.getData('/')[server];
|
||||
if (value === undefined) {
|
||||
return defaultValue;
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
// Function to copy the certificate to userData folder
|
||||
copyCertificate(_server: string, location: string, fileName: string): boolean {
|
||||
let copied = false;
|
||||
const filePath = `${certificatesDir}/${fileName}`;
|
||||
try {
|
||||
fs.copyFileSync(location, filePath);
|
||||
copied = true;
|
||||
} catch (err) {
|
||||
dialog.showErrorBox(
|
||||
'Error saving certificate',
|
||||
'We encountered error while saving the certificate.'
|
||||
);
|
||||
logger.error('Error while copying the certificate to certificates folder.');
|
||||
logger.error(err);
|
||||
}
|
||||
return copied;
|
||||
}
|
||||
|
||||
setCertificate(server: string, fileName: string): void {
|
||||
const filePath = `${fileName}`;
|
||||
this.db.push(`/${server}`, filePath, true);
|
||||
this.reloadDB();
|
||||
}
|
||||
|
||||
removeCertificate(server: string): void {
|
||||
this.db.delete(`/${server}`);
|
||||
this.reloadDB();
|
||||
}
|
||||
|
||||
reloadDB(): void {
|
||||
const settingsJsonPath = path.join(app.getPath('userData'), '/config/certificates.json');
|
||||
try {
|
||||
const file = fs.readFileSync(settingsJsonPath, 'utf8');
|
||||
JSON.parse(file);
|
||||
} catch (err) {
|
||||
if (fs.existsSync(settingsJsonPath)) {
|
||||
fs.unlinkSync(settingsJsonPath);
|
||||
dialog.showErrorBox(
|
||||
'Error saving settings',
|
||||
'We encountered error while saving the certificate.'
|
||||
);
|
||||
logger.error('Error while JSON parsing certificates.json: ');
|
||||
logger.error(err);
|
||||
}
|
||||
}
|
||||
this.db = new JsonDB(settingsJsonPath, true, true);
|
||||
}
|
||||
}
|
||||
|
||||
export = new CertificateUtil();
|
||||
25
app/renderer/js/utils/common-util.ts
Normal file
25
app/renderer/js/utils/common-util.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
'use strict';
|
||||
|
||||
let instance: null | CommonUtil = null;
|
||||
|
||||
class CommonUtil {
|
||||
constructor() {
|
||||
if (instance) {
|
||||
return instance;
|
||||
} else {
|
||||
instance = this;
|
||||
}
|
||||
return instance;
|
||||
}
|
||||
|
||||
// unescape already encoded/escaped strings
|
||||
decodeString(stringInput: string): string {
|
||||
const parser = new DOMParser();
|
||||
const dom = parser.parseFromString(
|
||||
'<!doctype html><body>' + stringInput,
|
||||
'text/html');
|
||||
return dom.body.textContent;
|
||||
}
|
||||
}
|
||||
|
||||
export = new CommonUtil();
|
||||
106
app/renderer/js/utils/config-util.ts
Normal file
106
app/renderer/js/utils/config-util.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
'use strict';
|
||||
import JsonDB from 'node-json-db';
|
||||
|
||||
import fs = require('fs');
|
||||
import path = require('path');
|
||||
import electron = require('electron');
|
||||
import Logger = require('./logger-util');
|
||||
import EnterpriseUtil = require('./enterprise-util');
|
||||
|
||||
const logger = new Logger({
|
||||
file: 'config-util.log',
|
||||
timestamp: true
|
||||
});
|
||||
|
||||
let instance: null | ConfigUtil = null;
|
||||
let dialog: Electron.Dialog = null;
|
||||
let app: Electron.App = null;
|
||||
|
||||
/* To make the util runnable in both main and renderer process */
|
||||
if (process.type === 'renderer') {
|
||||
const { remote } = electron;
|
||||
dialog = remote.dialog;
|
||||
app = remote.app;
|
||||
} else {
|
||||
dialog = electron.dialog;
|
||||
app = electron.app;
|
||||
}
|
||||
|
||||
class ConfigUtil {
|
||||
db: JsonDB;
|
||||
|
||||
constructor() {
|
||||
if (instance) {
|
||||
return instance;
|
||||
} else {
|
||||
instance = this;
|
||||
}
|
||||
|
||||
this.reloadDB();
|
||||
return instance;
|
||||
}
|
||||
|
||||
getConfigItem(key: string, defaultValue: any = null): any {
|
||||
try {
|
||||
this.db.reload();
|
||||
} catch (err) {
|
||||
logger.error('Error while reloading settings.json: ');
|
||||
logger.error(err);
|
||||
}
|
||||
const value = this.db.getData('/')[key];
|
||||
if (value === undefined) {
|
||||
this.setConfigItem(key, defaultValue);
|
||||
return defaultValue;
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
// This function returns whether a key exists in the configuration file (settings.json)
|
||||
isConfigItemExists(key: string): boolean {
|
||||
try {
|
||||
this.db.reload();
|
||||
} catch (err) {
|
||||
logger.error('Error while reloading settings.json: ');
|
||||
logger.error(err);
|
||||
}
|
||||
const value = this.db.getData('/')[key];
|
||||
return (value !== undefined);
|
||||
}
|
||||
|
||||
setConfigItem(key: string, value: any, override? : boolean): void {
|
||||
if (EnterpriseUtil.configItemExists(key) && !override) {
|
||||
// if item is in global config and we're not trying to override
|
||||
return;
|
||||
}
|
||||
this.db.push(`/${key}`, value, true);
|
||||
this.db.save();
|
||||
}
|
||||
|
||||
removeConfigItem(key: string): void {
|
||||
this.db.delete(`/${key}`);
|
||||
this.db.save();
|
||||
}
|
||||
|
||||
reloadDB(): void {
|
||||
const settingsJsonPath = path.join(app.getPath('userData'), '/config/settings.json');
|
||||
try {
|
||||
const file = fs.readFileSync(settingsJsonPath, 'utf8');
|
||||
JSON.parse(file);
|
||||
} catch (err) {
|
||||
if (fs.existsSync(settingsJsonPath)) {
|
||||
fs.unlinkSync(settingsJsonPath);
|
||||
dialog.showErrorBox(
|
||||
'Error saving settings',
|
||||
'We encountered an error while saving the settings.'
|
||||
);
|
||||
logger.error('Error while JSON parsing settings.json: ');
|
||||
logger.error(err);
|
||||
logger.reportSentry(err);
|
||||
}
|
||||
}
|
||||
this.db = new JsonDB(settingsJsonPath, true, true);
|
||||
}
|
||||
}
|
||||
|
||||
export = new ConfigUtil();
|
||||
74
app/renderer/js/utils/default-util.ts
Normal file
74
app/renderer/js/utils/default-util.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import fs = require('fs');
|
||||
|
||||
let app: Electron.App = null;
|
||||
let setupCompleted = false;
|
||||
if (process.type === 'renderer') {
|
||||
app = require('electron').remote.app;
|
||||
} else {
|
||||
app = require('electron').app;
|
||||
}
|
||||
|
||||
const zulipDir = app.getPath('userData');
|
||||
const logDir = `${zulipDir}/Logs/`;
|
||||
const certificatesDir = `${zulipDir}/certificates/`;
|
||||
const configDir = `${zulipDir}/config/`;
|
||||
export const initSetUp = (): void => {
|
||||
// if it is the first time the app is running
|
||||
// create zulip dir in userData folder to
|
||||
// avoid errors
|
||||
if (!setupCompleted) {
|
||||
if (!fs.existsSync(zulipDir)) {
|
||||
fs.mkdirSync(zulipDir);
|
||||
}
|
||||
|
||||
if (!fs.existsSync(logDir)) {
|
||||
fs.mkdirSync(logDir);
|
||||
}
|
||||
|
||||
if (!fs.existsSync(certificatesDir)) {
|
||||
fs.mkdirSync(certificatesDir);
|
||||
}
|
||||
|
||||
// Migrate config files from app data folder to config folder inside app
|
||||
// data folder. This will be done once when a user updates to the new version.
|
||||
if (!fs.existsSync(configDir)) {
|
||||
fs.mkdirSync(configDir);
|
||||
const domainJson = `${zulipDir}/domain.json`;
|
||||
const certificatesJson = `${zulipDir}/certificates.json`;
|
||||
const settingsJson = `${zulipDir}/settings.json`;
|
||||
const updatesJson = `${zulipDir}/updates.json`;
|
||||
const windowStateJson = `${zulipDir}/window-state.json`;
|
||||
const configData = [
|
||||
{
|
||||
path: domainJson,
|
||||
fileName: `domain.json`
|
||||
},
|
||||
{
|
||||
path: certificatesJson,
|
||||
fileName: `certificates.json`
|
||||
},
|
||||
{
|
||||
path: settingsJson,
|
||||
fileName: `settings.json`
|
||||
},
|
||||
{
|
||||
path: updatesJson,
|
||||
fileName: `updates.json`
|
||||
}
|
||||
];
|
||||
configData.forEach(data => {
|
||||
if (fs.existsSync(data.path)) {
|
||||
fs.copyFileSync(data.path, configDir + data.fileName);
|
||||
fs.unlinkSync(data.path);
|
||||
}
|
||||
});
|
||||
// window-state.json is only deleted not moved, as the electron-window-state
|
||||
// package will recreate the file in the config folder.
|
||||
if (fs.existsSync(windowStateJson)) {
|
||||
fs.unlinkSync(windowStateJson);
|
||||
}
|
||||
}
|
||||
|
||||
setupCompleted = true;
|
||||
}
|
||||
};
|
||||
50
app/renderer/js/utils/dnd-util.ts
Normal file
50
app/renderer/js/utils/dnd-util.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
'use strict';
|
||||
|
||||
import ConfigUtil = require('./config-util');
|
||||
|
||||
// TODO: TypeScript - add to Setting interface
|
||||
// the list of settings since we have fixed amount of them
|
||||
// We want to do this by creating a new module that exports
|
||||
// this interface
|
||||
interface Setting {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface Toggle {
|
||||
dnd: boolean;
|
||||
newSettings: Setting;
|
||||
}
|
||||
|
||||
export function toggle(): Toggle {
|
||||
const dnd = !ConfigUtil.getConfigItem('dnd', false);
|
||||
const dndSettingList = ['showNotification', 'silent'];
|
||||
if (process.platform === 'win32') {
|
||||
dndSettingList.push('flashTaskbarOnMessage');
|
||||
}
|
||||
|
||||
let newSettings: Setting;
|
||||
if (dnd) {
|
||||
const oldSettings: Setting = {};
|
||||
newSettings = {};
|
||||
|
||||
// Iterate through the dndSettingList.
|
||||
for (const settingName of dndSettingList) {
|
||||
// Store the current value of setting.
|
||||
oldSettings[settingName] = ConfigUtil.getConfigItem(settingName);
|
||||
// New value of setting.
|
||||
newSettings[settingName] = (settingName === 'silent');
|
||||
}
|
||||
|
||||
// Store old value in oldSettings.
|
||||
ConfigUtil.setConfigItem('dndPreviousSettings', oldSettings);
|
||||
} else {
|
||||
newSettings = ConfigUtil.getConfigItem('dndPreviousSettings');
|
||||
}
|
||||
|
||||
for (const settingName of dndSettingList) {
|
||||
ConfigUtil.setConfigItem(settingName, newSettings[settingName]);
|
||||
}
|
||||
|
||||
ConfigUtil.setConfigItem('dnd', dnd);
|
||||
return {dnd, newSettings};
|
||||
}
|
||||
@@ -1,236 +1,331 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
'use strict';
|
||||
import JsonDB from 'node-json-db';
|
||||
|
||||
import {app, dialog} from "@electron/remote";
|
||||
import * as Sentry from "@sentry/electron/renderer";
|
||||
import {JsonDB} from "node-json-db";
|
||||
import {DataError} from "node-json-db/dist/lib/Errors.js";
|
||||
import {z} from "zod";
|
||||
import escape = require('escape-html');
|
||||
import request = require('request');
|
||||
import fs = require('fs');
|
||||
import path = require('path');
|
||||
import Logger = require('./logger-util');
|
||||
import electron = require('electron');
|
||||
|
||||
import * as EnterpriseUtil from "../../../common/enterprise-util.ts";
|
||||
import Logger from "../../../common/logger-util.ts";
|
||||
import * as Messages from "../../../common/messages.ts";
|
||||
import * as t from "../../../common/translation-util.ts";
|
||||
import type {ServerConfig} from "../../../common/types.ts";
|
||||
import defaultIcon from "../../img/icon.png";
|
||||
import {ipcRenderer} from "../typed-ipc-renderer.ts";
|
||||
import RequestUtil = require('./request-util');
|
||||
import EnterpriseUtil = require('./enterprise-util');
|
||||
import Messages = require('../../../resources/messages');
|
||||
|
||||
const { ipcRenderer } = electron;
|
||||
const { app, dialog } = electron.remote;
|
||||
|
||||
const logger = new Logger({
|
||||
file: "domain-util.log",
|
||||
file: `domain-util.log`,
|
||||
timestamp: true
|
||||
});
|
||||
|
||||
// For historical reasons, we store this string in domain.json to denote a
|
||||
// missing icon; it does not change with the actual icon location.
|
||||
export const defaultIconSentinel = "../renderer/img/icon.png";
|
||||
let instance: null | DomainUtil = null;
|
||||
|
||||
const serverConfigSchema = z.object({
|
||||
url: z.url(),
|
||||
alias: z.string(),
|
||||
icon: z.string(),
|
||||
zulipVersion: z.string().default("unknown"),
|
||||
zulipFeatureLevel: z.number().default(0),
|
||||
});
|
||||
const defaultIconUrl = '../renderer/img/icon.png';
|
||||
|
||||
let database!: JsonDB;
|
||||
class DomainUtil {
|
||||
db: JsonDB;
|
||||
constructor() {
|
||||
if (instance) {
|
||||
return instance;
|
||||
} else {
|
||||
instance = this;
|
||||
}
|
||||
|
||||
reloadDatabase();
|
||||
this.reloadDB();
|
||||
// Migrate from old schema
|
||||
if (this.db.getData('/').domain) {
|
||||
this.addDomain({
|
||||
alias: 'Zulip',
|
||||
url: this.db.getData('/domain')
|
||||
});
|
||||
this.db.delete('/domain');
|
||||
}
|
||||
|
||||
// Migrate from old schema
|
||||
try {
|
||||
const oldDomain = database.getObject<unknown>("/domain");
|
||||
if (typeof oldDomain === "string") {
|
||||
(async () => {
|
||||
await addDomain({
|
||||
alias: "Zulip",
|
||||
url: oldDomain,
|
||||
});
|
||||
database.delete("/domain");
|
||||
})();
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
if (!(error instanceof DataError)) throw error;
|
||||
return instance;
|
||||
}
|
||||
|
||||
getDomains(): any {
|
||||
this.reloadDB();
|
||||
if (this.db.getData('/').domains === undefined) {
|
||||
return [];
|
||||
} else {
|
||||
return this.db.getData('/domains');
|
||||
}
|
||||
}
|
||||
|
||||
getDomain(index: number): any {
|
||||
this.reloadDB();
|
||||
return this.db.getData(`/domains[${index}]`);
|
||||
}
|
||||
|
||||
shouldIgnoreCerts(url: string): boolean {
|
||||
const domains = this.getDomains();
|
||||
for (const domain of domains) {
|
||||
if (domain.url === url) {
|
||||
return domain.ignoreCerts;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
updateDomain(index: number, server: object): void {
|
||||
this.reloadDB();
|
||||
this.db.push(`/domains[${index}]`, server, true);
|
||||
}
|
||||
|
||||
addDomain(server: any): Promise<void> {
|
||||
const { ignoreCerts } = server;
|
||||
return new Promise(resolve => {
|
||||
if (server.icon) {
|
||||
this.saveServerIcon(server, ignoreCerts).then(localIconUrl => {
|
||||
server.icon = localIconUrl;
|
||||
this.db.push('/domains[]', server, true);
|
||||
this.reloadDB();
|
||||
resolve();
|
||||
});
|
||||
} else {
|
||||
server.icon = defaultIconUrl;
|
||||
this.db.push('/domains[]', server, true);
|
||||
this.reloadDB();
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
removeDomains(): void {
|
||||
this.db.delete('/domains');
|
||||
this.reloadDB();
|
||||
}
|
||||
|
||||
removeDomain(index: number): boolean {
|
||||
if (EnterpriseUtil.isPresetOrg(this.getDomain(index).url)) {
|
||||
return false;
|
||||
}
|
||||
this.db.delete(`/domains[${index}]`);
|
||||
this.reloadDB();
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check if domain is already added
|
||||
duplicateDomain(domain: any): boolean {
|
||||
domain = this.formatUrl(domain);
|
||||
const servers = this.getDomains();
|
||||
for (const i in servers) {
|
||||
if (servers[i].url === domain) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
async checkCertError(domain: any, serverConf: any, error: string, silent: boolean): Promise<string | object> {
|
||||
if (silent) {
|
||||
// since getting server settings has already failed
|
||||
return serverConf;
|
||||
} else {
|
||||
// Report error to sentry to get idea of possible certificate errors
|
||||
// users get when adding the servers
|
||||
logger.reportSentry(new Error(error).toString());
|
||||
const certErrorMessage = Messages.certErrorMessage(domain, error);
|
||||
const certErrorDetail = Messages.certErrorDetail();
|
||||
|
||||
const response = await (dialog.showMessageBox({
|
||||
type: 'warning',
|
||||
buttons: ['Yes', 'No'],
|
||||
defaultId: 1,
|
||||
message: certErrorMessage,
|
||||
detail: certErrorDetail
|
||||
}) as any); // TODO: TypeScript - Figure this out
|
||||
if (response === 0) {
|
||||
// set ignoreCerts parameter to true in case user responds with yes
|
||||
serverConf.ignoreCerts = true;
|
||||
try {
|
||||
return await this.getServerSettings(domain, serverConf.ignoreCerts);
|
||||
} catch (_) {
|
||||
if (error === Messages.noOrgsError(domain)) {
|
||||
throw new Error(error);
|
||||
}
|
||||
return serverConf;
|
||||
}
|
||||
} else {
|
||||
throw new Error('Untrusted certificate.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ignoreCerts parameter helps in fetching server icon and
|
||||
// other server details when user chooses to ignore certificate warnings
|
||||
async checkDomain(domain: any, ignoreCerts = false, silent = false): Promise<any> {
|
||||
if (!silent && this.duplicateDomain(domain)) {
|
||||
// Do not check duplicate in silent mode
|
||||
throw new Error('This server has been added.');
|
||||
}
|
||||
|
||||
domain = this.formatUrl(domain);
|
||||
|
||||
const serverConf = {
|
||||
icon: defaultIconUrl,
|
||||
url: domain,
|
||||
alias: domain,
|
||||
ignoreCerts
|
||||
};
|
||||
|
||||
try {
|
||||
return await this.getServerSettings(domain, serverConf.ignoreCerts);
|
||||
} catch (err) {
|
||||
// If the domain contains following strings we just bypass the server
|
||||
const whitelistDomains = [
|
||||
'zulipdev.org'
|
||||
];
|
||||
|
||||
// make sure that error is an error or string not undefined
|
||||
// so validation does not throw error.
|
||||
const error = err || '';
|
||||
|
||||
const certsError = error.toString().includes('certificate');
|
||||
if (domain.indexOf(whitelistDomains) >= 0 || certsError) {
|
||||
return this.checkCertError(domain, serverConf, error, silent);
|
||||
} else {
|
||||
throw Messages.invalidZulipServerError(domain);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getServerSettings(domain: any, ignoreCerts = false): Promise<object | string> {
|
||||
const serverSettingsOptions = {
|
||||
url: domain + '/api/v1/server_settings',
|
||||
...RequestUtil.requestOptions(domain, ignoreCerts)
|
||||
};
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
request(serverSettingsOptions, (error: string, response: any) => {
|
||||
if (!error && response.statusCode === 200) {
|
||||
const data = JSON.parse(response.body);
|
||||
if (data.hasOwnProperty('realm_icon') && data.realm_icon) {
|
||||
resolve({
|
||||
// Some Zulip Servers use absolute URL for server icon whereas others use relative URL
|
||||
// Following check handles both the cases
|
||||
icon: data.realm_icon.startsWith('/') ? data.realm_uri + data.realm_icon : data.realm_icon,
|
||||
url: data.realm_uri,
|
||||
alias: escape(data.realm_name),
|
||||
ignoreCerts
|
||||
});
|
||||
} else {
|
||||
reject(Messages.noOrgsError(domain));
|
||||
}
|
||||
} else {
|
||||
reject(response);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
saveServerIcon(server: any, ignoreCerts = false): Promise<string> {
|
||||
const url = server.icon;
|
||||
const domain = server.url;
|
||||
|
||||
const serverIconOptions = {
|
||||
url,
|
||||
...RequestUtil.requestOptions(domain, ignoreCerts)
|
||||
};
|
||||
|
||||
// The save will always succeed. If url is invalid, downgrade to default icon.
|
||||
return new Promise(resolve => {
|
||||
const filePath = this.generateFilePath(url);
|
||||
const file = fs.createWriteStream(filePath);
|
||||
try {
|
||||
request(serverIconOptions).on('response', (response: any) => {
|
||||
response.on('error', (err: string) => {
|
||||
logger.log('Could not get server icon.');
|
||||
logger.log(err);
|
||||
logger.reportSentry(err);
|
||||
resolve(defaultIconUrl);
|
||||
});
|
||||
response.pipe(file).on('finish', () => {
|
||||
resolve(filePath);
|
||||
});
|
||||
}).on('error', (err: string) => {
|
||||
logger.log('Could not get server icon.');
|
||||
logger.log(err);
|
||||
logger.reportSentry(err);
|
||||
resolve(defaultIconUrl);
|
||||
});
|
||||
} catch (err) {
|
||||
logger.log('Could not get server icon.');
|
||||
logger.log(err);
|
||||
logger.reportSentry(err);
|
||||
resolve(defaultIconUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async updateSavedServer(url: string, index: number): Promise<void> {
|
||||
// Does not promise successful update
|
||||
const oldIcon = this.getDomain(index).icon;
|
||||
const { ignoreCerts } = this.getDomain(index);
|
||||
try {
|
||||
const newServerConf = await this.checkDomain(url, ignoreCerts, true);
|
||||
const localIconUrl = await this.saveServerIcon(newServerConf, ignoreCerts);
|
||||
if (!oldIcon || localIconUrl !== '../renderer/img/icon.png') {
|
||||
newServerConf.icon = localIconUrl;
|
||||
this.updateDomain(index, newServerConf);
|
||||
this.reloadDB();
|
||||
}
|
||||
} catch (err) {
|
||||
ipcRenderer.send('forward-message', 'show-network-error', index);
|
||||
}
|
||||
}
|
||||
|
||||
reloadDB(): void {
|
||||
const domainJsonPath = path.join(app.getPath('userData'), 'config/domain.json');
|
||||
try {
|
||||
const file = fs.readFileSync(domainJsonPath, 'utf8');
|
||||
JSON.parse(file);
|
||||
} catch (err) {
|
||||
if (fs.existsSync(domainJsonPath)) {
|
||||
fs.unlinkSync(domainJsonPath);
|
||||
dialog.showErrorBox(
|
||||
'Error saving new organization',
|
||||
'There seems to be error while saving new organization, ' +
|
||||
'you may have to re-add your previous organizations back.'
|
||||
);
|
||||
logger.error('Error while JSON parsing domain.json: ');
|
||||
logger.error(err);
|
||||
logger.reportSentry(err);
|
||||
}
|
||||
}
|
||||
this.db = new JsonDB(domainJsonPath, true, true);
|
||||
}
|
||||
|
||||
generateFilePath(url: string): string {
|
||||
const dir = `${app.getPath('userData')}/server-icons`;
|
||||
const extension = path.extname(url).split('?')[0];
|
||||
|
||||
let hash = 5381;
|
||||
let len = url.length;
|
||||
|
||||
while (len) {
|
||||
hash = (hash * 33) ^ url.charCodeAt(--len);
|
||||
}
|
||||
|
||||
// Create 'server-icons' directory if not existed
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir);
|
||||
}
|
||||
|
||||
return `${dir}/${hash >>> 0}${extension}`;
|
||||
}
|
||||
|
||||
formatUrl(domain: any): string {
|
||||
const hasPrefix = (domain.indexOf('http') === 0);
|
||||
if (hasPrefix) {
|
||||
return domain;
|
||||
} else {
|
||||
return (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function getDomains(): ServerConfig[] {
|
||||
reloadDatabase();
|
||||
try {
|
||||
return serverConfigSchema
|
||||
.array()
|
||||
.parse(database.getObject<unknown>("/domains"));
|
||||
} catch (error: unknown) {
|
||||
if (!(error instanceof DataError)) throw error;
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function getDomain(index: number): ServerConfig {
|
||||
reloadDatabase();
|
||||
return serverConfigSchema.parse(
|
||||
database.getObject<unknown>(`/domains[${index}]`),
|
||||
);
|
||||
}
|
||||
|
||||
export function updateDomain(index: number, server: ServerConfig): void {
|
||||
reloadDatabase();
|
||||
serverConfigSchema.parse(server);
|
||||
database.push(`/domains[${index}]`, server, true);
|
||||
}
|
||||
|
||||
export async function addDomain(server: {
|
||||
url: string;
|
||||
alias: string;
|
||||
icon?: string;
|
||||
}): Promise<void> {
|
||||
if (server.icon) {
|
||||
const localIconUrl = await saveServerIcon(server.icon);
|
||||
server.icon = localIconUrl;
|
||||
serverConfigSchema.parse(server);
|
||||
database.push("/domains[]", server, true);
|
||||
reloadDatabase();
|
||||
} else {
|
||||
server.icon = defaultIconSentinel;
|
||||
serverConfigSchema.parse(server);
|
||||
database.push("/domains[]", server, true);
|
||||
reloadDatabase();
|
||||
}
|
||||
}
|
||||
|
||||
export function removeDomains(): void {
|
||||
database.delete("/domains");
|
||||
reloadDatabase();
|
||||
}
|
||||
|
||||
export function removeDomain(index: number): boolean {
|
||||
if (EnterpriseUtil.isPresetOrg(getDomain(index).url)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
database.delete(`/domains[${index}]`);
|
||||
reloadDatabase();
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check if domain is already added
|
||||
export function duplicateDomain(domain: string): boolean {
|
||||
domain = formatUrl(domain);
|
||||
return getDomains().some((server) => server.url === domain);
|
||||
}
|
||||
|
||||
export async function checkDomain(
|
||||
domain: string,
|
||||
silent = false,
|
||||
): Promise<ServerConfig> {
|
||||
if (!silent && duplicateDomain(domain)) {
|
||||
// Do not check duplicate in silent mode
|
||||
throw new Error("This server has been added.");
|
||||
}
|
||||
|
||||
domain = formatUrl(domain);
|
||||
|
||||
try {
|
||||
return await getServerSettings(domain);
|
||||
} catch {
|
||||
throw new Error(Messages.invalidZulipServerError(domain));
|
||||
}
|
||||
}
|
||||
|
||||
async function getServerSettings(domain: string): Promise<ServerConfig> {
|
||||
return ipcRenderer.invoke("get-server-settings", domain);
|
||||
}
|
||||
|
||||
export async function saveServerIcon(iconURL: string): Promise<string> {
|
||||
return (
|
||||
(await ipcRenderer.invoke("save-server-icon", iconURL)) ??
|
||||
defaultIconSentinel
|
||||
);
|
||||
}
|
||||
|
||||
export async function updateSavedServer(
|
||||
url: string,
|
||||
index: number,
|
||||
): Promise<ServerConfig> {
|
||||
// Does not promise successful update
|
||||
const serverConfig = getDomain(index);
|
||||
const oldIcon = serverConfig.icon;
|
||||
try {
|
||||
const newServerConfig = await checkDomain(url, true);
|
||||
const localIconUrl = await saveServerIcon(newServerConfig.icon);
|
||||
if (!oldIcon || localIconUrl !== defaultIconSentinel) {
|
||||
newServerConfig.icon = localIconUrl;
|
||||
updateDomain(index, newServerConfig);
|
||||
reloadDatabase();
|
||||
}
|
||||
|
||||
return newServerConfig;
|
||||
} catch (error: unknown) {
|
||||
logger.log("Could not update server icon.");
|
||||
logger.log(error);
|
||||
Sentry.captureException(error);
|
||||
return serverConfig;
|
||||
}
|
||||
}
|
||||
|
||||
function reloadDatabase(): void {
|
||||
const domainJsonPath = path.join(
|
||||
app.getPath("userData"),
|
||||
"config/domain.json",
|
||||
);
|
||||
try {
|
||||
const file = fs.readFileSync(domainJsonPath, "utf8");
|
||||
JSON.parse(file);
|
||||
} catch (error: unknown) {
|
||||
if (fs.existsSync(domainJsonPath)) {
|
||||
fs.unlinkSync(domainJsonPath);
|
||||
dialog.showErrorBox(
|
||||
t.__("Error saving new organization"),
|
||||
t.__(
|
||||
"There was an error while saving the new organization. You may have to add your previous organizations again.",
|
||||
),
|
||||
);
|
||||
logger.error("Error while JSON parsing domain.json: ");
|
||||
logger.error(error);
|
||||
Sentry.captureException(error);
|
||||
}
|
||||
}
|
||||
|
||||
database = new JsonDB(domainJsonPath, true, true);
|
||||
}
|
||||
|
||||
export function formatUrl(domain: string): string {
|
||||
if (domain.startsWith("http://") || domain.startsWith("https://")) {
|
||||
return domain;
|
||||
}
|
||||
|
||||
if (domain.startsWith("localhost:")) {
|
||||
return `http://${domain}`;
|
||||
}
|
||||
|
||||
return `https://${domain}`;
|
||||
}
|
||||
|
||||
export function getUnsupportedMessage(
|
||||
server: ServerConfig,
|
||||
): string | undefined {
|
||||
if (server.zulipFeatureLevel < 65 /* Zulip Server 4.0 */) {
|
||||
const realm = new URL(server.url).hostname;
|
||||
return t.__(
|
||||
"{{{server}}} runs an outdated Zulip Server version {{{version}}}. It may not fully work in this app.",
|
||||
{server: realm, version: server.zulipVersion},
|
||||
);
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export function iconAsUrl(iconPath: string): string {
|
||||
if (iconPath === defaultIconSentinel) return defaultIcon;
|
||||
|
||||
try {
|
||||
return `data:application/octet-stream;base64,${fs.readFileSync(
|
||||
iconPath,
|
||||
"base64",
|
||||
)}`;
|
||||
} catch {
|
||||
return defaultIcon;
|
||||
}
|
||||
}
|
||||
export = new DomainUtil();
|
||||
|
||||
80
app/renderer/js/utils/enterprise-util.ts
Normal file
80
app/renderer/js/utils/enterprise-util.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
import fs = require('fs');
|
||||
import path = require('path');
|
||||
|
||||
import Logger = require('./logger-util');
|
||||
|
||||
const logger = new Logger({
|
||||
file: 'enterprise-util.log',
|
||||
timestamp: true
|
||||
});
|
||||
|
||||
let instance: null | EnterpriseUtil = null;
|
||||
|
||||
class EnterpriseUtil {
|
||||
// todo: replace enterpriseSettings type with an interface once settings are final
|
||||
enterpriseSettings: any;
|
||||
configFile: boolean;
|
||||
constructor() {
|
||||
if (instance) {
|
||||
return instance;
|
||||
}
|
||||
instance = this;
|
||||
|
||||
this.reloadDB();
|
||||
}
|
||||
|
||||
reloadDB(): void {
|
||||
let enterpriseFile = '/etc/zulip-desktop-config/global_config.json';
|
||||
if (process.platform === 'win32') {
|
||||
enterpriseFile = 'C:\\Program Files\\Zulip-Desktop-Config\\global_config.json';
|
||||
}
|
||||
|
||||
enterpriseFile = path.resolve(enterpriseFile);
|
||||
if (fs.existsSync(enterpriseFile)) {
|
||||
this.configFile = true;
|
||||
try {
|
||||
const file = fs.readFileSync(enterpriseFile, 'utf8');
|
||||
this.enterpriseSettings = JSON.parse(file);
|
||||
} catch (err) {
|
||||
logger.log('Error while JSON parsing global_config.json: ');
|
||||
logger.log(err);
|
||||
}
|
||||
} else {
|
||||
this.configFile = false;
|
||||
}
|
||||
}
|
||||
|
||||
getConfigItem(key: string, defaultValue?: any): any {
|
||||
this.reloadDB();
|
||||
if (!this.configFile) {
|
||||
return defaultValue;
|
||||
}
|
||||
if (defaultValue === undefined) {
|
||||
defaultValue = null;
|
||||
}
|
||||
return this.configItemExists(key) ? this.enterpriseSettings[key] : defaultValue;
|
||||
}
|
||||
|
||||
configItemExists(key: string): boolean {
|
||||
this.reloadDB();
|
||||
if (!this.configFile) {
|
||||
return false;
|
||||
}
|
||||
return (this.enterpriseSettings[key] !== undefined);
|
||||
}
|
||||
|
||||
isPresetOrg(url: string): boolean {
|
||||
if (!this.configFile || !this.configItemExists('presetOrganizations')) {
|
||||
return false;
|
||||
}
|
||||
const presetOrgs = this.enterpriseSettings.presetOrganizations;
|
||||
for (const org of presetOrgs) {
|
||||
if (url.includes(org)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export = new EnterpriseUtil();
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user