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}} {{#each settingsPerBrowser as |perBrowser|}} {{perBrowser.browser}} - - - - {{#if perBrowser.kwc}} - - - - {{/if}} - - {{#ifeq perBrowser.browser 'Safari'}} - - - - {{else}} + {{#each perBrowser.extensions as |setting|}} - - - {{#if perBrowser.kpxc}} - + {{#if setting.supported}} + + + {{else}} + + {{/if}} + {{#if setting.enabled}} + {{#if setting.helpUrl}} + + + + {{/if}} + {{#if setting.installUrl}} + + + + {{/if}} {{/if}} - {{/ifeq}} + {{/each}} {{/each}} @@ -60,7 +62,7 @@ {{else}}

{{res 'setBrowserIntroWeb'}}

- KeeWeb Connect {{res 'for'}} {{extensionBrowserFamily}} + KeeWeb Connect {{#res 'setBrowserExtensionFor'}}{{extensionBrowserFamily}}{{/res}} {{/if}}