mirror of https://github.com/keeweb/keeweb.git
browser extension settings
This commit is contained in:
parent
8525571afc
commit
c7b814fc01
|
@ -21,6 +21,8 @@ const Links = {
|
||||||
YubiKeyManagerInstall: 'https://github.com/Yubico/yubikey-manager#installation',
|
YubiKeyManagerInstall: 'https://github.com/Yubico/yubikey-manager#installation',
|
||||||
HaveIBeenPwned: 'https://haveibeenpwned.com',
|
HaveIBeenPwned: 'https://haveibeenpwned.com',
|
||||||
HaveIBeenPwnedPrivacy: 'https://haveibeenpwned.com/Passwords',
|
HaveIBeenPwnedPrivacy: 'https://haveibeenpwned.com/Passwords',
|
||||||
|
ExtensionHelpForOtherBrowsers:
|
||||||
|
'https://github.com/keeweb/keeweb/wiki/Browser-AutoFill#other-browsers',
|
||||||
KeeWebConnectForChrome: 'https://TODO',
|
KeeWebConnectForChrome: 'https://TODO',
|
||||||
KeeWebConnectForFirefox: 'https://TODO',
|
KeeWebConnectForFirefox: 'https://TODO',
|
||||||
KeeWebConnectForEdge: 'https://TODO',
|
KeeWebConnectForEdge: 'https://TODO',
|
||||||
|
|
|
@ -36,7 +36,6 @@
|
||||||
"oneWeek": "one week",
|
"oneWeek": "one week",
|
||||||
"oneMonth": "one month",
|
"oneMonth": "one month",
|
||||||
"oneYear": "one year",
|
"oneYear": "one year",
|
||||||
"for": "for",
|
|
||||||
|
|
||||||
"cache": "cache",
|
"cache": "cache",
|
||||||
"file": "file",
|
"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:",
|
"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:",
|
"setBrowserEnablePerBrowser": "Enable browser integration using the checkboxes below:",
|
||||||
"setBrowserFocusIfLocked": "Open KeeWeb if a browser extension tries to connect while the file is locked",
|
"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",
|
"setDevicesTitle": "Devices",
|
||||||
"setDevicesEnableUsb": "Enable interaction with USB 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 { Features } from 'util/features';
|
||||||
import { Links } from 'const/links';
|
import { Links } from 'const/links';
|
||||||
import { AppSettingsModel } from 'models/app-settings-model';
|
import { AppSettingsModel } from 'models/app-settings-model';
|
||||||
|
import { Locale } from 'util/locale';
|
||||||
|
|
||||||
class SettingsBrowserView extends View {
|
class SettingsBrowserView extends View {
|
||||||
template = template;
|
template = template;
|
||||||
|
@ -19,6 +20,7 @@ class SettingsBrowserView extends View {
|
||||||
focusIfLocked: AppSettingsModel.extensionFocusIfLocked
|
focusIfLocked: AppSettingsModel.extensionFocusIfLocked
|
||||||
};
|
};
|
||||||
if (Features.isDesktop) {
|
if (Features.isDesktop) {
|
||||||
|
data.extensionNames = ['KeeWeb Connect', 'KeePassXC-Browser'];
|
||||||
data.settingsPerBrowser = this.getSettingsPerBrowser();
|
data.settingsPerBrowser = this.getSettingsPerBrowser();
|
||||||
data.anyBrowserIsEnabled = data.settingsPerBrowser.some((s) => s.kwc || s.kpxc);
|
data.anyBrowserIsEnabled = data.settingsPerBrowser.some((s) => s.kwc || s.kpxc);
|
||||||
} else {
|
} else {
|
||||||
|
@ -30,17 +32,31 @@ class SettingsBrowserView extends View {
|
||||||
}
|
}
|
||||||
|
|
||||||
getSettingsPerBrowser() {
|
getSettingsPerBrowser() {
|
||||||
const browsers = ['Chrome', 'Firefox', 'Edge'];
|
const browsers = ['Chrome', 'Firefox', 'Edge', Locale.setBrowserOtherBrowsers];
|
||||||
if (Features.isMac) {
|
if (Features.isMac) {
|
||||||
browsers.unshift('Safari');
|
browsers.unshift('Safari');
|
||||||
}
|
}
|
||||||
return browsers.map((browser) => {
|
const settingsPerBrowser = browsers.map((browser) => {
|
||||||
return {
|
const extensions = [
|
||||||
browser,
|
{ alias: 'kwc', loc: 'KeeWebConnect' },
|
||||||
kwc: !!AppSettingsModel[`kwcEnabledFor${browser}`],
|
{ alias: 'kpxc', loc: 'KeePassXcBrowser' }
|
||||||
kpxc: !!AppSettingsModel[`kpxcEnabledFor${browser}`]
|
];
|
||||||
};
|
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) {
|
changeEnableForBrowser(e) {
|
||||||
|
|
|
@ -56,30 +56,6 @@ p {
|
||||||
margin: 0 0 $small-spacing;
|
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 {
|
hr {
|
||||||
border-bottom: base-border();
|
border-bottom: base-border();
|
||||||
border-left: 0;
|
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/scroll';
|
||||||
@import 'common/tip';
|
@import 'common/tip';
|
||||||
@import 'common/titlebar';
|
@import 'common/titlebar';
|
||||||
|
@import 'common/links';
|
||||||
|
|
||||||
@import 'areas/app';
|
@import 'areas/app';
|
||||||
@import 'areas/auto-type';
|
@import 'areas/auto-type';
|
||||||
|
|
|
@ -13,46 +13,48 @@
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th></th>
|
||||||
<th>KeeWeb Connect</th>
|
{{#each extensionNames as |ext|}}
|
||||||
<th>KeePassXC-Browser</th>
|
<th>{{ext}}</th>
|
||||||
|
{{/each}}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{{#each settingsPerBrowser as |perBrowser|}}
|
{{#each settingsPerBrowser as |perBrowser|}}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{perBrowser.browser}}</td>
|
<td>{{perBrowser.browser}}</td>
|
||||||
<td>
|
{{#each perBrowser.extensions as |setting|}}
|
||||||
<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}}
|
|
||||||
<td>
|
<td>
|
||||||
<input type="checkbox"
|
{{#if setting.supported}}
|
||||||
class="check-enable-for-browser"
|
<input type="checkbox"
|
||||||
{{#if perBrowser.kpxc}}checked{{/if}}
|
class="check-enable-for-browser"
|
||||||
id="check-enable-kpxc-for-{{perBrowser.browser}}"
|
{{#if setting.enabled}}checked{{/if}}
|
||||||
data-browser="{{perBrowser.browser}}"
|
id="check-enable-{{setting.alias}}-for-{{perBrowser.browser}}"
|
||||||
data-extension="kpxc" />
|
data-browser="{{perBrowser.browser}}"
|
||||||
<label for="check-enable-kpxc-for-{{perBrowser.browser}}"></label>
|
data-extension="{{setting.alias}}" />
|
||||||
{{#if perBrowser.kpxc}}
|
<label for="check-enable-{{setting.alias}}-for-{{perBrowser.browser}}"></label>
|
||||||
<i class="fa fa-download"></i>
|
{{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}}
|
{{/if}}
|
||||||
</td>
|
</td>
|
||||||
{{/ifeq}}
|
{{/each}}
|
||||||
</tr>
|
</tr>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -60,7 +62,7 @@
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>{{res 'setBrowserIntroWeb'}}</p>
|
<p>{{res 'setBrowserIntroWeb'}}</p>
|
||||||
<a href="{{extensionDownloadLink}}" target="_blank" rel="noreferrer">
|
<a href="{{extensionDownloadLink}}" target="_blank" rel="noreferrer">
|
||||||
KeeWeb Connect {{res 'for'}} {{extensionBrowserFamily}}
|
KeeWeb Connect {{#res 'setBrowserExtensionFor'}}{{extensionBrowserFamily}}{{/res}}
|
||||||
</a>
|
</a>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<p></p>
|
<p></p>
|
||||||
|
|
Loading…
Reference in New Issue