diff --git a/app/scripts/const/links.js b/app/scripts/const/links.js
index 13132303..be45c5e4 100644
--- a/app/scripts/const/links.js
+++ b/app/scripts/const/links.js
@@ -21,6 +21,8 @@ const Links = {
YubiKeyManagerInstall: 'https://github.com/Yubico/yubikey-manager#installation',
HaveIBeenPwned: 'https://haveibeenpwned.com',
HaveIBeenPwnedPrivacy: 'https://haveibeenpwned.com/Passwords',
+ ExtensionHelpForOtherBrowsers:
+ 'https://github.com/keeweb/keeweb/wiki/Browser-AutoFill#other-browsers',
KeeWebConnectForChrome: 'https://TODO',
KeeWebConnectForFirefox: 'https://TODO',
KeeWebConnectForEdge: 'https://TODO',
diff --git a/app/scripts/locales/base.json b/app/scripts/locales/base.json
index 14cf0402..3d754e3f 100644
--- a/app/scripts/locales/base.json
+++ b/app/scripts/locales/base.json
@@ -36,7 +36,6 @@
"oneWeek": "one week",
"oneMonth": "one month",
"oneYear": "one year",
- "for": "for",
"cache": "cache",
"file": "file",
@@ -648,6 +647,11 @@
"setBrowserNotEnabled": "Browser integration is not enabled, extensions won't be able to connect to KeeWeb. Use the checkboxes below to enable it:",
"setBrowserEnablePerBrowser": "Enable browser integration using the checkboxes below:",
"setBrowserFocusIfLocked": "Open KeeWeb if a browser extension tries to connect while the file is locked",
+ "setBrowserOtherBrowsers": "Other browsers",
+ "setBrowserExtensionFor": "for {}",
+ "setBrowserExtensionNotSupported": "Not supported",
+ "setBrowserExtensionHelp": "How to install?",
+ "setBrowserExtensionInstall": "Install the extension",
"setDevicesTitle": "Devices",
"setDevicesEnableUsb": "Enable interaction with USB devices",
diff --git a/app/scripts/views/settings/settings-browser-view.js b/app/scripts/views/settings/settings-browser-view.js
index 0cf585d7..71348f87 100644
--- a/app/scripts/views/settings/settings-browser-view.js
+++ b/app/scripts/views/settings/settings-browser-view.js
@@ -3,6 +3,7 @@ import template from 'templates/settings/settings-browser.hbs';
import { Features } from 'util/features';
import { Links } from 'const/links';
import { AppSettingsModel } from 'models/app-settings-model';
+import { Locale } from 'util/locale';
class SettingsBrowserView extends View {
template = template;
@@ -19,6 +20,7 @@ class SettingsBrowserView extends View {
focusIfLocked: AppSettingsModel.extensionFocusIfLocked
};
if (Features.isDesktop) {
+ data.extensionNames = ['KeeWeb Connect', 'KeePassXC-Browser'];
data.settingsPerBrowser = this.getSettingsPerBrowser();
data.anyBrowserIsEnabled = data.settingsPerBrowser.some((s) => s.kwc || s.kpxc);
} else {
@@ -30,17 +32,31 @@ class SettingsBrowserView extends View {
}
getSettingsPerBrowser() {
- const browsers = ['Chrome', 'Firefox', 'Edge'];
+ const browsers = ['Chrome', 'Firefox', 'Edge', Locale.setBrowserOtherBrowsers];
if (Features.isMac) {
browsers.unshift('Safari');
}
- return browsers.map((browser) => {
- return {
- browser,
- kwc: !!AppSettingsModel[`kwcEnabledFor${browser}`],
- kpxc: !!AppSettingsModel[`kpxcEnabledFor${browser}`]
- };
+ const settingsPerBrowser = browsers.map((browser) => {
+ const extensions = [
+ { alias: 'kwc', loc: 'KeeWebConnect' },
+ { alias: 'kpxc', loc: 'KeePassXcBrowser' }
+ ];
+ for (const ext of extensions) {
+ ext.supported = true;
+ ext.enabled = !!AppSettingsModel[`${ext.alias}EnabledFor${browser}`];
+ ext.installUrl = Links[`${ext.loc}For${browser}`];
+ if (!ext.installUrl) {
+ if (browser === Locale.setBrowserOtherBrowsers) {
+ ext.helpUrl = Links.ExtensionHelpForOtherBrowsers;
+ } else {
+ ext.supported = false;
+ }
+ }
+ }
+ return { browser, extensions };
});
+
+ return settingsPerBrowser;
}
changeEnableForBrowser(e) {
diff --git a/app/styles/base/_typography.scss b/app/styles/base/_typography.scss
index c1826127..8fd4a22c 100644
--- a/app/styles/base/_typography.scss
+++ b/app/styles/base/_typography.scss
@@ -56,30 +56,6 @@ p {
margin: 0 0 $small-spacing;
}
-a {
- color: var(--text-color);
- text-decoration: none;
- display: inline-block;
- transition: color $base-duration $base-timing;
- cursor: pointer;
- height: 1.2em;
- &:not(.no-border) {
- border-bottom: 1px dotted;
- }
-
- &:active,
- &:focus,
- &:hover {
- outline: none;
- &:not(.no-border) {
- border-bottom: 1px solid;
- }
- &.muted-color {
- border-bottom: 1px solid;
- }
- }
-}
-
hr {
border-bottom: base-border();
border-left: 0;
diff --git a/app/styles/common/_links.scss b/app/styles/common/_links.scss
new file mode 100644
index 00000000..90418fe4
--- /dev/null
+++ b/app/styles/common/_links.scss
@@ -0,0 +1,43 @@
+a {
+ color: var(--text-color);
+ text-decoration: none;
+ display: inline-block;
+ transition: color $base-duration $base-timing;
+ cursor: pointer;
+ height: 1.2em;
+ border-bottom: 1px dotted;
+
+ &.no-border {
+ border-bottom: none;
+ }
+
+ &.icon-link {
+ @include area-selectable();
+ border-bottom: none;
+ display: inline-block;
+ text-align: center;
+ font-size: 1.1em;
+ width: 1.8em;
+ height: 1.6em;
+ border-radius: var(--button-border-radius);
+
+ > i {
+ position: relative;
+ top: 0.1em;
+ }
+
+ &:active,
+ &:focus,
+ &:hover {
+ outline: none;
+ border-bottom: none;
+ }
+ }
+
+ &:active,
+ &:focus,
+ &:hover {
+ outline: none;
+ border-bottom: 1px solid;
+ }
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 00ce8940..a94e06a6 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -24,6 +24,7 @@ $fa-font-path: '~font-awesome/fonts';
@import 'common/scroll';
@import 'common/tip';
@import 'common/titlebar';
+@import 'common/links';
@import 'areas/app';
@import 'areas/auto-type';
diff --git a/app/templates/settings/settings-browser.hbs b/app/templates/settings/settings-browser.hbs
index 2d16cfde..00009b93 100644
--- a/app/templates/settings/settings-browser.hbs
+++ b/app/templates/settings/settings-browser.hbs
@@ -13,46 +13,48 @@
- KeeWeb Connect
- KeePassXC-Browser
+ {{#each extensionNames as |ext|}}
+ {{ext}}
+ {{/each}}
{{res 'setBrowserIntroWeb'}}
- KeeWeb Connect {{res 'for'}} {{extensionBrowserFamily}} + KeeWeb Connect {{#res 'setBrowserExtensionFor'}}{{extensionBrowserFamily}}{{/res}} {{/if}}