mirror of https://github.com/keeweb/keeweb.git
browser extension settings
This commit is contained in:
antelle
parent
8525571afc
commit
c7b814fc01
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -13,46 +13,48 @@
|
|||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>KeeWeb Connect</th>
|
||||
<th>KeePassXC-Browser</th>
|
||||
{{#each extensionNames as |ext|}}
|
||||
<th>{{ext}}</th>
|
||||
{{/each}}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each settingsPerBrowser as |perBrowser|}}
|
||||
<tr>
|
||||
<td>{{perBrowser.browser}}</td>
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
class="check-enable-for-browser"
|
||||
{{#if perBrowser.kwc}}checked{{/if}}
|
||||
id="check-enable-kwc-for-{{perBrowser.browser}}"
|
||||
data-browser="{{perBrowser.browser}}"
|
||||
data-extension="kwc" />
|
||||
<label for="check-enable-kwc-for-{{perBrowser.browser}}"></label>
|
||||
{{#if perBrowser.kwc}}
|
||||
<a href="https://example.com" target="_blank" rel="noreferrer">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
</td>
|
||||
{{#ifeq perBrowser.browser 'Safari'}}
|
||||
<td class="muted-color">
|
||||
<i class="fa fa-times"></i>
|
||||
</td>
|
||||
{{else}}
|
||||
{{#each perBrowser.extensions as |setting|}}
|
||||
<td>
|
||||
<input type="checkbox"
|
||||
class="check-enable-for-browser"
|
||||
{{#if perBrowser.kpxc}}checked{{/if}}
|
||||
id="check-enable-kpxc-for-{{perBrowser.browser}}"
|
||||
data-browser="{{perBrowser.browser}}"
|
||||
data-extension="kpxc" />
|
||||
<label for="check-enable-kpxc-for-{{perBrowser.browser}}"></label>
|
||||
{{#if perBrowser.kpxc}}
|
||||
<i class="fa fa-download"></i>
|
||||
{{#if setting.supported}}
|
||||
<input type="checkbox"
|
||||
class="check-enable-for-browser"
|
||||
{{#if setting.enabled}}checked{{/if}}
|
||||
id="check-enable-{{setting.alias}}-for-{{perBrowser.browser}}"
|
||||
data-browser="{{perBrowser.browser}}"
|
||||
data-extension="{{setting.alias}}" />
|
||||
<label for="check-enable-{{setting.alias}}-for-{{perBrowser.browser}}"></label>
|
||||
{{else}}
|
||||
<i class="fa fa-times muted-color" title="{{res 'setBrowserExtensionNotSupported'}}"></i>
|
||||
{{/if}}
|
||||
{{#if setting.enabled}}
|
||||
{{#if setting.helpUrl}}
|
||||
<a href="{{setting.helpUrl}}" target="_blank" rel="noreferrer"
|
||||
class="settings__browser-extension-link icon-link"
|
||||
title="{{res 'setBrowserExtensionHelp'}}"
|
||||
>
|
||||
<i class="fa fa-info-circle"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
{{#if setting.installUrl}}
|
||||
<a href="{{setting.installUrl}}" target="_blank" rel="noreferrer"
|
||||
class="settings__browser-extension-link icon-link"
|
||||
title="{{res 'setBrowserExtensionInstall'}}"
|
||||
>
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</td>
|
||||
{{/ifeq}}
|
||||
{{/each}}
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
|
|
@ -60,7 +62,7 @@
|
|||
{{else}}
|
||||
<p>{{res 'setBrowserIntroWeb'}}</p>
|
||||
<a href="{{extensionDownloadLink}}" target="_blank" rel="noreferrer">
|
||||
KeeWeb Connect {{res 'for'}} {{extensionBrowserFamily}}
|
||||
KeeWeb Connect {{#res 'setBrowserExtensionFor'}}{{extensionBrowserFamily}}{{/res}}
|
||||
</a>
|
||||
{{/if}}
|
||||
<p></p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue