devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

Apply Prettier (#2238)

This commit is contained in:
Oscar Hinton 2021-12-21 15:43:35 +01:00 committed by GitHub
parent cebee8aa81
commit 8fe821b9a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
174 changed files with 17599 additions and 14766 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitattributes vendored Normal file
View File

@ -0,0 +1 @@
* text=auto eol=lf

14
.github/PULL_REQUEST_TEMPLATE.md vendored
View File

@ -1,4 +1,5 @@
## Type of change
- [ ] Bug fix
- [ ] New feature development
- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
@ -6,27 +7,26 @@
- [ ] Other
## Objective
<!--Describe what the purpose of this PR is. For example: what bug you're fixing or what new feature you're adding-->
## Code changes
<!--Explain the changes you've made to each file or major component. This should help the reviewer understand your changes-->
<!--Also refer to any related changes or PRs in other repositories-->
* **file.ext:** Description of what was changed and why
- **file.ext:** Description of what was changed and why
## Screenshots
<!--Required for any UI changes. Delete if not applicable-->
## Testing requirements
<!--What functionality requires testing by QA? This includes testing new behavior and regression testing-->
## Before you submit
- [ ] I have checked for **linting** errors (`npm run lint`) (required)
- [ ] This change requires a **documentation update** (notify the documentation team)
- [ ] This change has particular **deployment requirements** (notify the DevOps team)

4
.github/workflows/build.yml vendored
View File

@ -104,8 +104,8 @@ jobs:
npm run dist
npm run test
# - name: Run linter
# run: npm run lint
- name: Run linter
run: npm run lint
- name: Gulp
run: gulp ci

23
CONTRIBUTING.md
View File

@ -6,17 +6,12 @@ Please visit our [Community Forums](https://community.bitwarden.com/) for genera
Here is how you can get involved:
* **Request a new feature:** Go to the [Feature Requests category](https://community.bitwarden.com/c/feature-requests/) of the Community Forums. Please search existing feature requests before making a new one
* **Write code for a new feature:** Make a new post in the [Github Contributions category](https://community.bitwarden.com/c/github-contributions/) of the Community Forums. Include a description of your proposed contribution, screeshots, and links to any relevant feature requests. This helps get feedback from the community and Bitwarden team members before you start writing code
* **Report a bug or submit a bugfix:** Use Github issues and pull requests
* **Write documentation:** Submit a pull request to the [Bitwarden help repository](https://github.com/bitwarden/help)
* **Help other users:** Go to the [User-to-User Support category](https://community.bitwarden.com/c/support/) on the Community Forums
* **Translate:** See the localization (i10n) section below
- **Request a new feature:** Go to the [Feature Requests category](https://community.bitwarden.com/c/feature-requests/) of the Community Forums. Please search existing feature requests before making a new one
- **Write code for a new feature:** Make a new post in the [Github Contributions category](https://community.bitwarden.com/c/github-contributions/) of the Community Forums. Include a description of your proposed contribution, screeshots, and links to any relevant feature requests. This helps get feedback from the community and Bitwarden team members before you start writing code
- **Report a bug or submit a bugfix:** Use Github issues and pull requests
- **Write documentation:** Submit a pull request to the [Bitwarden help repository](https://github.com/bitwarden/help)
- **Help other users:** Go to the [User-to-User Support category](https://community.bitwarden.com/c/support/) on the Community Forums
- **Translate:** See the localization (i10n) section below
## Contributor Agreement
@ -24,9 +19,9 @@ Please sign the [Contributor Agreement](https://cla-assistant.io/bitwarden/brows
## Pull Request Guidelines
* use `npm run lint` and fix any linting suggestions before submitting a pull request
* commit any pull requests against the `master` branch
* include a link to your Community Forums post
- use `npm run lint` and fix any linting suggestions before submitting a pull request
- commit any pull requests against the `master` branch
- include a link to your Community Forums post
# Localization (l10n)

227
gulpfile.js
View File

@ -1,39 +1,37 @@
const gulp = require('gulp'),
gulpif = require('gulp-if'),
filter = require('gulp-filter'),
replace = require('gulp-replace'),
const gulp = require("gulp"),
gulpif = require("gulp-if"),
filter = require("gulp-filter"),
replace = require("gulp-replace"),
jeditor = require("gulp-json-editor"),
child = require('child_process'),
zip = require('gulp-zip'),
manifest = require('./src/manifest.json'),
del = require('del'),
fs = require('fs');
child = require("child_process"),
zip = require("gulp-zip"),
manifest = require("./src/manifest.json"),
del = require("del"),
fs = require("fs");
const paths = {
build: './build/',
dist: './dist/',
coverage: './coverage/',
node_modules: './node_modules/',
popupDir: './src/popup/',
cssDir: './src/popup/css/',
safari: './src/safari/'
build: "./build/",
dist: "./dist/",
coverage: "./coverage/",
node_modules: "./node_modules/",
popupDir: "./src/popup/",
cssDir: "./src/popup/css/",
safari: "./src/safari/",
};
const filters = {
fonts: [
'!build/popup/fonts/*',
'build/popup/fonts/Open_Sans*.woff',
'build/popup/fonts/fontawesome*.woff2',
'build/popup/fonts/fontawesome*.woff'
],
safari: [
'!build/safari/**/*'
"!build/popup/fonts/*",
"build/popup/fonts/Open_Sans*.woff",
"build/popup/fonts/fontawesome*.woff2",
"build/popup/fonts/fontawesome*.woff",
],
safari: ["!build/safari/**/*"],
};
function buildString() {
var build = '';
if (process.env.BUILD_NUMBER && process.env.BUILD_NUMBER !== '') {
var build = "";
if (process.env.BUILD_NUMBER && process.env.BUILD_NUMBER !== "") {
build = `-${process.env.BUILD_NUMBER}`;
}
return build;
@ -44,16 +42,17 @@ function distFileName(browserName, ext) {
}
function dist(browserName, manifest) {
return gulp.src(paths.build + '**/*')
.pipe(filter(['**'].concat(filters.fonts).concat(filters.safari)))
.pipe(gulpif('popup/index.html', replace('__BROWSER__', 'browser_' + browserName)))
.pipe(gulpif('manifest.json', jeditor(manifest)))
.pipe(zip(distFileName(browserName, 'zip')))
return gulp
.src(paths.build + "**/*")
.pipe(filter(["**"].concat(filters.fonts).concat(filters.safari)))
.pipe(gulpif("popup/index.html", replace("__BROWSER__", "browser_" + browserName)))
.pipe(gulpif("manifest.json", jeditor(manifest)))
.pipe(zip(distFileName(browserName, "zip")))
.pipe(gulp.dest(paths.dist));
}
function distFirefox() {
return dist('firefox', (manifest) => {
return dist("firefox", (manifest) => {
delete manifest.content_security_policy;
removeShortcuts(manifest);
return manifest;
@ -61,7 +60,7 @@ function distFirefox() {
}
function distOpera() {
return dist('opera', (manifest) => {
return dist("opera", (manifest) => {
delete manifest.applications;
delete manifest.content_security_policy;
removeShortcuts(manifest);
@ -70,7 +69,7 @@ function distOpera() {
}
function distChrome() {
return dist('chrome', (manifest) => {
return dist("chrome", (manifest) => {
delete manifest.applications;
delete manifest.content_security_policy;
delete manifest.sidebar_action;
@ -80,7 +79,7 @@ function distChrome() {
}
function distEdge() {
return dist('edge', (manifest) => {
return dist("edge", (manifest) => {
delete manifest.applications;
delete manifest.content_security_policy;
delete manifest.sidebar_action;
@ -92,132 +91,152 @@ function distEdge() {
function removeShortcuts(manifest) {
if (manifest.content_scripts && manifest.content_scripts.length > 1) {
const shortcutsScript = manifest.content_scripts[1];
if (shortcutsScript.js.indexOf('content/shortcuts.js') > -1) {
if (shortcutsScript.js.indexOf("content/shortcuts.js") > -1) {
manifest.content_scripts.splice(1, 1);
}
}
}
function distSafariMas(cb) {
return distSafariApp(cb, 'mas');
return distSafariApp(cb, "mas");
}
function distSafariMasDev(cb) {
return distSafariApp(cb, 'masdev');
return distSafariApp(cb, "masdev");
}
function distSafariDmg(cb) {
return distSafariApp(cb, 'dmg');
return distSafariApp(cb, "dmg");
}
function distSafariApp(cb, subBuildPath) {
const buildPath = paths.dist + 'Safari/' + subBuildPath + '/';
const builtAppexPath = buildPath + 'build/Release/safari.appex';
const builtAppexFrameworkPath = buildPath + 'build/Release/safari.appex/Contents/Frameworks/';
const entitlementsPath = paths.safari + 'safari/safari.entitlements';
const buildPath = paths.dist + "Safari/" + subBuildPath + "/";
const builtAppexPath = buildPath + "build/Release/safari.appex";
const builtAppexFrameworkPath = buildPath + "build/Release/safari.appex/Contents/Frameworks/";
const entitlementsPath = paths.safari + "safari/safari.entitlements";
var args = [
'--verbose',
'--force',
'-o',
'runtime',
'--sign',
'Developer ID Application: 8bit Solutions LLC',
'--entitlements',
entitlementsPath
"--verbose",
"--force",
"-o",
"runtime",
"--sign",
"Developer ID Application: 8bit Solutions LLC",
"--entitlements",
entitlementsPath,
];
if (subBuildPath !== 'dmg') {
if (subBuildPath !== "dmg") {
args = [
'--verbose',
'--force',
'--sign',
subBuildPath === 'mas' ? '3rd Party Mac Developer Application: 8bit Solutions LLC' :
'6B287DD81FF922D86FD836128B0F62F358B38726',
'--entitlements',
entitlementsPath
"--verbose",
"--force",
"--sign",
subBuildPath === "mas"
? "3rd Party Mac Developer Application: 8bit Solutions LLC"
: "6B287DD81FF922D86FD836128B0F62F358B38726",
"--entitlements",
entitlementsPath,
];
}
return del([buildPath + '**/*'])
.then(() => safariCopyAssets(paths.safari + '**/*', buildPath))
.then(() => safariCopyBuild(paths.build + '**/*', buildPath + 'safari/app'))
return del([buildPath + "**/*"])
.then(() => safariCopyAssets(paths.safari + "**/*", buildPath))
.then(() => safariCopyBuild(paths.build + "**/*", buildPath + "safari/app"))
.then(() => {
const proc = child.spawn('xcodebuild', [
'-project',
buildPath + 'desktop.xcodeproj',
'-alltargets',
'-configuration',
'Release']);
const proc = child.spawn("xcodebuild", [
"-project",
buildPath + "desktop.xcodeproj",
"-alltargets",
"-configuration",
"Release",
]);
stdOutProc(proc);
return new Promise((resolve) => proc.on('close', resolve));
}).then(() => {
const libs = fs.readdirSync(builtAppexFrameworkPath).filter((p) => p.endsWith('.dylib'))
return new Promise((resolve) => proc.on("close", resolve));
})
.then(() => {
const libs = fs
.readdirSync(builtAppexFrameworkPath)
.filter((p) => p.endsWith(".dylib"))
.map((p) => builtAppexFrameworkPath + p);
const libPromises = [];
libs.forEach((i) => {
const proc = child.spawn('codesign', args.concat([i]));
const proc = child.spawn("codesign", args.concat([i]));
stdOutProc(proc);
libPromises.push(new Promise((resolve) => proc.on('close', resolve)));
libPromises.push(new Promise((resolve) => proc.on("close", resolve)));
});
return Promise.all(libPromises);
}).then(() => {
const proc = child.spawn('codesign', args.concat([builtAppexPath]));
})
.then(() => {
const proc = child.spawn("codesign", args.concat([builtAppexPath]));
stdOutProc(proc);
return new Promise((resolve) => proc.on('close', resolve));
}).then(() => {
return new Promise((resolve) => proc.on("close", resolve));
})
.then(
() => {
return cb;
}, () => {
},
() => {
return cb;
});
}
);
}
function safariCopyAssets(source, dest) {
return new Promise((resolve, reject) => {
gulp.src(source)
.on('error', reject)
.pipe(gulpif('safari/Info.plist', replace('0.0.1', manifest.version)))
.pipe(gulpif('safari/Info.plist', replace('0.0.2', process.env.BUILD_NUMBER || manifest.version)))
.pipe(gulpif('desktop.xcodeproj/project.pbxproj', replace('../../../build', '../safari/app')))
gulp
.src(source)
.on("error", reject)
.pipe(gulpif("safari/Info.plist", replace("0.0.1", manifest.version)))
.pipe(
gulpif("safari/Info.plist", replace("0.0.2", process.env.BUILD_NUMBER || manifest.version))
)
.pipe(gulpif("desktop.xcodeproj/project.pbxproj", replace("../../../build", "../safari/app")))
.pipe(gulp.dest(dest))
.on('end', resolve);
.on("end", resolve);
});
}
function safariCopyBuild(source, dest) {
return new Promise((resolve, reject) => {
gulp.src(source)
.on('error', reject)
.pipe(filter(['**'].concat(filters.fonts)))
.pipe(gulpif('popup/index.html', replace('__BROWSER__', 'browser_safari')))
.pipe(gulpif('manifest.json', jeditor((manifest) => {
gulp
.src(source)
.on("error", reject)
.pipe(filter(["**"].concat(filters.fonts)))
.pipe(gulpif("popup/index.html", replace("__BROWSER__", "browser_safari")))
.pipe(
gulpif(
"manifest.json",
jeditor((manifest) => {
delete manifest.optional_permissions;
manifest.permissions.push("nativeMessaging");
return manifest;
})))
})
)
)
.pipe(gulp.dest(dest))
.on('end', resolve);
.on("end", resolve);
});
}
function stdOutProc(proc) {
proc.stdout.on('data', (data) => console.log(data.toString()));
proc.stderr.on('data', (data) => console.error(data.toString()));
proc.stdout.on("data", (data) => console.log(data.toString()));
proc.stderr.on("data", (data) => console.error(data.toString()));
}
function ciCoverage(cb) {
return gulp.src(paths.coverage + '**/*')
.pipe(filter(['**', '!coverage/coverage*.zip']))
return gulp
.src(paths.coverage + "**/*")
.pipe(filter(["**", "!coverage/coverage*.zip"]))
.pipe(zip(`coverage${buildString()}.zip`))
.pipe(gulp.dest(paths.coverage));
}
exports['dist:firefox'] = distFirefox;
exports['dist:chrome'] = distChrome;
exports['dist:opera'] = distOpera;
exports['dist:edge'] = distEdge;
exports['dist:safari'] = gulp.parallel(distSafariMas, distSafariMasDev, distSafariDmg);
exports['dist:safari:mas'] = distSafariMas;
exports['dist:safari:masdev'] = distSafariMasDev;
exports['dist:safari:dmg'] = distSafariDmg;
exports["dist:firefox"] = distFirefox;
exports["dist:chrome"] = distChrome;
exports["dist:opera"] = distOpera;
exports["dist:edge"] = distEdge;
exports["dist:safari"] = gulp.parallel(distSafariMas, distSafariMasDev, distSafariDmg);
exports["dist:safari:mas"] = distSafariMas;
exports["dist:safari:masdev"] = distSafariMasDev;
exports["dist:safari:dmg"] = distSafariDmg;
exports.dist = gulp.parallel(distFirefox, distChrome, distOpera, distEdge);
exports['ci:coverage'] = ciCoverage;
exports["ci:coverage"] = ciCoverage;
exports.ci = ciCoverage;

41
karma.conf.js
View File

@ -1,32 +1,29 @@
const path = require('path');
const path = require("path");
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
basePath: "",
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'webpack'],
frameworks: ["jasmine", "webpack"],
// list of files / patterns to load in the browser
files: [
{ pattern: 'src/**/*.spec.ts', watch: false },
],
files: [{ pattern: "src/**/*.spec.ts", watch: false }],
exclude: [
],
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'src/**/*.ts': 'webpack'
"src/**/*.ts": "webpack",
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'kjhtml'],
reporters: ["progress", "kjhtml"],
// web server port
port: 9876,
@ -40,37 +37,35 @@ module.exports = function(config) {
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
browsers: ["Chrome"],
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
webpack: {
mode: 'production',
mode: "production",
resolve: {
extensions: ['.js', '.ts', '.tsx'],
extensions: [".js", ".ts", ".tsx"],
alias: {
"jslib-common": path.join(__dirname, 'jslib/common/src'),
"jslib-angular": path.join(__dirname, 'jslib/angular/src'),
"jslib-common": path.join(__dirname, "jslib/common/src"),
"jslib-angular": path.join(__dirname, "jslib/angular/src"),
},
},
module: {
rules: [
{test: /\.tsx?$/, loader: 'ts-loader'}
]
rules: [{ test: /\.tsx?$/, loader: "ts-loader" }],
},
stats: {
colors: true,
modules: true,
reasons: true,
errorDetails: true
errorDetails: true,
},
devtool: 'inline-source-map',
devtool: "inline-source-map",
},
})
}
});
};

5
src/background.html
View File

@ -1,7 +1,6 @@
<html>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
</head>
<body>
</body>
<body></body>
</html>

4
src/background.ts
View File

@ -1,6 +1,6 @@
import MainBackground from './background/main.background';
import MainBackground from "./background/main.background";
const bitwardenMain = (window as any).bitwardenMain = new MainBackground();
const bitwardenMain = ((window as any).bitwardenMain = new MainBackground());
bitwardenMain.bootstrap().then(() => {
// Finished bootstrapping
});

58
src/background/commands.background.ts
View File

@ -1,32 +1,42 @@
import { BrowserApi } from '../browser/browserApi';
import { BrowserApi } from "../browser/browserApi";
import MainBackground from './main.background';
import MainBackground from "./main.background";
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
import LockedVaultPendingNotificationsItem from './models/lockedVaultPendingNotificationsItem';
import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
import LockedVaultPendingNotificationsItem from "./models/lockedVaultPendingNotificationsItem";
export default class CommandsBackground {
private isSafari: boolean;
private isVivaldi: boolean;
constructor(private main: MainBackground, private passwordGenerationService: PasswordGenerationService,
private platformUtilsService: PlatformUtilsService, private vaultTimeoutService: VaultTimeoutService) {
constructor(
private main: MainBackground,
private passwordGenerationService: PasswordGenerationService,
private platformUtilsService: PlatformUtilsService,
private vaultTimeoutService: VaultTimeoutService
) {
this.isSafari = this.platformUtilsService.isSafari();
this.isVivaldi = this.platformUtilsService.isVivaldi();
}
async init() {
BrowserApi.messageListener('commands.background', async (msg: any, sender: chrome.runtime.MessageSender, sendResponse: any) => {
if (msg.command === 'unlockCompleted' && msg.data.target === 'commands.background') {
await this.processCommand(msg.data.commandToRetry.msg.command, msg.data.commandToRetry.sender);
BrowserApi.messageListener(
"commands.background",
async (msg: any, sender: chrome.runtime.MessageSender, sendResponse: any) => {
if (msg.command === "unlockCompleted" && msg.data.target === "commands.background") {
await this.processCommand(
msg.data.commandToRetry.msg.command,
msg.data.commandToRetry.sender
);
}
if (this.isVivaldi && msg.command === 'keyboardShortcutTriggered' && msg.shortcut) {
if (this.isVivaldi && msg.command === "keyboardShortcutTriggered" && msg.shortcut) {
await this.processCommand(msg.shortcut, sender);
}
});
}
);
if (!this.isVivaldi && chrome && chrome.commands) {
chrome.commands.onCommand.addListener(async (command: string) => {
@ -37,16 +47,16 @@ export default class CommandsBackground {
private async processCommand(command: string, sender?: chrome.runtime.MessageSender) {
switch (command) {
case 'generate_password':
case "generate_password":
await this.generatePasswordToClipboard();
break;
case 'autofill_login':
case "autofill_login":
await this.autoFillLogin(sender ? sender.tab : null);
break;
case 'open_popup':
case "open_popup":
await this.openPopup();
break;
case 'lock_vault':
case "lock_vault":
await this.vaultTimeoutService.lock(true);
break;
default:
@ -73,18 +83,22 @@ export default class CommandsBackground {
if (await this.vaultTimeoutService.isLocked()) {
const retryMessage: LockedVaultPendingNotificationsItem = {
commandToRetry: {
msg: { command: 'autofill_login' },
msg: { command: "autofill_login" },
sender: { tab: tab },
},
target: 'commands.background',
target: "commands.background",
};
await BrowserApi.tabSendMessageData(tab, 'addToLockedVaultPendingNotifications', retryMessage);
await BrowserApi.tabSendMessageData(
tab,
"addToLockedVaultPendingNotifications",
retryMessage
);
BrowserApi.tabSendMessageData(tab, 'promptForLogin');
BrowserApi.tabSendMessageData(tab, "promptForLogin");
return;
}
await this.main.collectPageDetailsForContentScript(tab, 'autofill_cmd');
await this.main.collectPageDetailsForContentScript(tab, "autofill_cmd");
}
private async openPopup() {

103
src/background/contextMenus.background.ts
View File

@ -1,27 +1,32 @@
import { BrowserApi } from '../browser/browserApi';
import { BrowserApi } from "../browser/browserApi";
import MainBackground from './main.background';
import MainBackground from "./main.background";
import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { EventService } from 'jslib-common/abstractions/event.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { TotpService } from 'jslib-common/abstractions/totp.service';
import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
import { CipherService } from "jslib-common/abstractions/cipher.service";
import { EventService } from "jslib-common/abstractions/event.service";
import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { TotpService } from "jslib-common/abstractions/totp.service";
import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
import { CipherRepromptType } from 'jslib-common/enums/cipherRepromptType';
import { EventType } from 'jslib-common/enums/eventType';
import { CipherView } from 'jslib-common/models/view/cipherView';
import LockedVaultPendingNotificationsItem from './models/lockedVaultPendingNotificationsItem';
import { CipherRepromptType } from "jslib-common/enums/cipherRepromptType";
import { EventType } from "jslib-common/enums/eventType";
import { CipherView } from "jslib-common/models/view/cipherView";
import LockedVaultPendingNotificationsItem from "./models/lockedVaultPendingNotificationsItem";
export default class ContextMenusBackground {
private readonly noopCommandSuffix = 'noop';
private readonly noopCommandSuffix = "noop";
private contextMenus: any;
constructor(private main: MainBackground, private cipherService: CipherService,
constructor(
private main: MainBackground,
private cipherService: CipherService,
private passwordGenerationService: PasswordGenerationService,
private platformUtilsService: PlatformUtilsService, private vaultTimeoutService: VaultTimeoutService,
private eventService: EventService, private totpService: TotpService) {
private platformUtilsService: PlatformUtilsService,
private vaultTimeoutService: VaultTimeoutService,
private eventService: EventService,
private totpService: TotpService
) {
this.contextMenus = chrome.contextMenus;
}
@ -30,24 +35,34 @@ export default class ContextMenusBackground {
return;
}
this.contextMenus.onClicked.addListener(async (info: chrome.contextMenus.OnClickData, tab: chrome.tabs.Tab) => {
if (info.menuItemId === 'generate-password') {
this.contextMenus.onClicked.addListener(
async (info: chrome.contextMenus.OnClickData, tab: chrome.tabs.Tab) => {
if (info.menuItemId === "generate-password") {
await this.generatePasswordToClipboard();
} else if (info.menuItemId === 'copy-identifier') {
} else if (info.menuItemId === "copy-identifier") {
await this.getClickedElement(tab, info.frameId);
} else if (info.parentMenuItemId === 'autofill' ||
info.parentMenuItemId === 'copy-username' ||
info.parentMenuItemId === 'copy-password' ||
info.parentMenuItemId === 'copy-totp') {
} else if (
info.parentMenuItemId === "autofill" ||
info.parentMenuItemId === "copy-username" ||
info.parentMenuItemId === "copy-password" ||
info.parentMenuItemId === "copy-totp"
) {
await this.cipherAction(tab, info);
}
});
BrowserApi.messageListener('contextmenus.background', async (msg: any, sender: chrome.runtime.MessageSender, sendResponse: any) => {
if (msg.command === 'unlockCompleted' && msg.data.target === 'contextmenus.background') {
await this.cipherAction(msg.data.commandToRetry.sender.tab, msg.data.commandToRetry.msg.data);
}
});
);
BrowserApi.messageListener(
"contextmenus.background",
async (msg: any, sender: chrome.runtime.MessageSender, sendResponse: any) => {
if (msg.command === "unlockCompleted" && msg.data.target === "contextmenus.background") {
await this.cipherAction(
msg.data.commandToRetry.sender.tab,
msg.data.commandToRetry.msg.data
);
}
}
);
}
private async generatePasswordToClipboard() {
@ -62,11 +77,11 @@ export default class ContextMenusBackground {
return;
}
BrowserApi.tabSendMessage(tab, { command: 'getClickedElement' }, { frameId: frameId });
BrowserApi.tabSendMessage(tab, { command: "getClickedElement" }, { frameId: frameId });
}
private async cipherAction(tab: chrome.tabs.Tab, info: chrome.contextMenus.OnClickData) {
const id = info.menuItemId.split('_')[1];
const id = info.menuItemId.split("_")[1];
if (await this.vaultTimeoutService.isLocked()) {
const retryMessage: LockedVaultPendingNotificationsItem = {
@ -74,35 +89,39 @@ export default class ContextMenusBackground {
msg: { command: this.noopCommandSuffix, data: info },
sender: { tab: tab },
},
target: 'contextmenus.background',
target: "contextmenus.background",
};
await BrowserApi.tabSendMessageData(tab, 'addToLockedVaultPendingNotifications', retryMessage);
await BrowserApi.tabSendMessageData(
tab,
"addToLockedVaultPendingNotifications",
retryMessage
);
BrowserApi.tabSendMessageData(tab, 'promptForLogin');
BrowserApi.tabSendMessageData(tab, "promptForLogin");
return;
}
let cipher: CipherView;
if (id === this.noopCommandSuffix) {
const ciphers = await this.cipherService.getAllDecryptedForUrl(tab.url);
cipher = ciphers.find(c => c.reprompt === CipherRepromptType.None);
cipher = ciphers.find((c) => c.reprompt === CipherRepromptType.None);
} else {
const ciphers = await this.cipherService.getAllDecrypted();
cipher = ciphers.find(c => c.id === id);
cipher = ciphers.find((c) => c.id === id);
}
if (cipher == null) {
return;
}
if (info.parentMenuItemId === 'autofill') {
if (info.parentMenuItemId === "autofill") {
await this.startAutofillPage(tab, cipher);
} else if (info.parentMenuItemId === 'copy-username') {
} else if (info.parentMenuItemId === "copy-username") {
this.platformUtilsService.copyToClipboard(cipher.login.username, { window: window });
} else if (info.parentMenuItemId === 'copy-password') {
} else if (info.parentMenuItemId === "copy-password") {
this.platformUtilsService.copyToClipboard(cipher.login.password, { window: window });
this.eventService.collect(EventType.Cipher_ClientCopiedPassword, cipher.id);
} else if (info.parentMenuItemId === 'copy-totp') {
} else if (info.parentMenuItemId === "copy-totp") {
const totpValue = await this.totpService.getCode(cipher.login.totp);
this.platformUtilsService.copyToClipboard(totpValue, { window: window });
}
@ -115,9 +134,9 @@ export default class ContextMenusBackground {
}
BrowserApi.tabSendMessage(tab, {
command: 'collectPageDetails',
command: "collectPageDetails",
tab: tab,
sender: 'contextMenu',
sender: "contextMenu",
});
}
}

31
src/background/idle.background.ts
View File

@ -1,18 +1,21 @@
import { NotificationsService } from 'jslib-common/abstractions/notifications.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
import { NotificationsService } from "jslib-common/abstractions/notifications.service";
import { StorageService } from "jslib-common/abstractions/storage.service";
import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
import { ConstantsService } from 'jslib-common/services/constants.service';
import { ConstantsService } from "jslib-common/services/constants.service";
const IdleInterval = 60 * 5; // 5 minutes
export default class IdleBackground {
private idle: any;
private idleTimer: number = null;
private idleState = 'active';
private idleState = "active";
constructor(private vaultTimeoutService: VaultTimeoutService, private storageService: StorageService,
private notificationsService: NotificationsService) {
constructor(
private vaultTimeoutService: VaultTimeoutService,
private storageService: StorageService,
private notificationsService: NotificationsService
) {
this.idle = chrome.idle || (browser != null ? browser.idle : null);
}
@ -22,7 +25,7 @@ export default class IdleBackground {
}
const idleHandler = (newState: string) => {
if (newState === 'active') {
if (newState === "active") {
this.notificationsService.reconnectFromActivity();
} else {
this.notificationsService.disconnectFromInactivity();
@ -37,11 +40,15 @@ export default class IdleBackground {
if (this.idle.onStateChanged) {
this.idle.onStateChanged.addListener(async (newState: string) => {
if (newState === 'locked') { // If the screen is locked or the screensaver activates
if (newState === "locked") {
// If the screen is locked or the screensaver activates
const timeout = await this.storageService.get<number>(ConstantsService.vaultTimeoutKey);
if (timeout === -2) { // On System Lock vault timeout option
const action = await this.storageService.get<string>(ConstantsService.vaultTimeoutActionKey);
if (action === 'logOut') {
if (timeout === -2) {
// On System Lock vault timeout option
const action = await this.storageService.get<string>(
ConstantsService.vaultTimeoutActionKey
);
if (action === "logOut") {
await this.vaultTimeoutService.logOut();
} else {
await this.vaultTimeoutService.lock(true);

692
src/background/main.background.ts
View File

@ -1,95 +1,95 @@
import { CipherRepromptType } from 'jslib-common/enums/cipherRepromptType';
import { CipherType } from 'jslib-common/enums/cipherType';
import { CipherRepromptType } from "jslib-common/enums/cipherRepromptType";
import { CipherType } from "jslib-common/enums/cipherType";
import { CipherView } from 'jslib-common/models/view/cipherView';
import { CipherView } from "jslib-common/models/view/cipherView";
import { ApiService } from 'jslib-common/services/api.service';
import { AppIdService } from 'jslib-common/services/appId.service';
import { AuditService } from 'jslib-common/services/audit.service';
import { AuthService } from 'jslib-common/services/auth.service';
import { CipherService } from 'jslib-common/services/cipher.service';
import { CollectionService } from 'jslib-common/services/collection.service';
import { ConsoleLogService } from 'jslib-common/services/consoleLog.service';
import { ConstantsService } from 'jslib-common/services/constants.service';
import { ContainerService } from 'jslib-common/services/container.service';
import { EnvironmentService } from 'jslib-common/services/environment.service';
import { EventService } from 'jslib-common/services/event.service';
import { ExportService } from 'jslib-common/services/export.service';
import { FileUploadService } from 'jslib-common/services/fileUpload.service';
import { FolderService } from 'jslib-common/services/folder.service';
import { KeyConnectorService } from 'jslib-common/services/keyConnector.service';
import { NotificationsService } from 'jslib-common/services/notifications.service';
import { PasswordGenerationService } from 'jslib-common/services/passwordGeneration.service';
import { PolicyService } from 'jslib-common/services/policy.service';
import { SearchService } from 'jslib-common/services/search.service';
import { SendService } from 'jslib-common/services/send.service';
import { SettingsService } from 'jslib-common/services/settings.service';
import { StateService } from 'jslib-common/services/state.service';
import { SyncService } from 'jslib-common/services/sync.service';
import { SystemService } from 'jslib-common/services/system.service';
import { TokenService } from 'jslib-common/services/token.service';
import { TotpService } from 'jslib-common/services/totp.service';
import { UserService } from 'jslib-common/services/user.service';
import { UserVerificationService } from 'jslib-common/services/userVerification.service';
import { WebCryptoFunctionService } from 'jslib-common/services/webCryptoFunction.service';
import { ApiService } from "jslib-common/services/api.service";
import { AppIdService } from "jslib-common/services/appId.service";
import { AuditService } from "jslib-common/services/audit.service";
import { AuthService } from "jslib-common/services/auth.service";
import { CipherService } from "jslib-common/services/cipher.service";
import { CollectionService } from "jslib-common/services/collection.service";
import { ConsoleLogService } from "jslib-common/services/consoleLog.service";
import { ConstantsService } from "jslib-common/services/constants.service";
import { ContainerService } from "jslib-common/services/container.service";
import { EnvironmentService } from "jslib-common/services/environment.service";
import { EventService } from "jslib-common/services/event.service";
import { ExportService } from "jslib-common/services/export.service";
import { FileUploadService } from "jslib-common/services/fileUpload.service";
import { FolderService } from "jslib-common/services/folder.service";
import { KeyConnectorService } from "jslib-common/services/keyConnector.service";
import { NotificationsService } from "jslib-common/services/notifications.service";
import { PasswordGenerationService } from "jslib-common/services/passwordGeneration.service";
import { PolicyService } from "jslib-common/services/policy.service";
import { SearchService } from "jslib-common/services/search.service";
import { SendService } from "jslib-common/services/send.service";
import { SettingsService } from "jslib-common/services/settings.service";
import { StateService } from "jslib-common/services/state.service";
import { SyncService } from "jslib-common/services/sync.service";
import { SystemService } from "jslib-common/services/system.service";
import { TokenService } from "jslib-common/services/token.service";
import { TotpService } from "jslib-common/services/totp.service";
import { UserService } from "jslib-common/services/user.service";
import { UserVerificationService } from "jslib-common/services/userVerification.service";
import { WebCryptoFunctionService } from "jslib-common/services/webCryptoFunction.service";
import { ApiService as ApiServiceAbstraction } from 'jslib-common/abstractions/api.service';
import { AppIdService as AppIdServiceAbstraction } from 'jslib-common/abstractions/appId.service';
import { AuditService as AuditServiceAbstraction } from 'jslib-common/abstractions/audit.service';
import { AuthService as AuthServiceAbstraction } from 'jslib-common/abstractions/auth.service';
import { CipherService as CipherServiceAbstraction } from 'jslib-common/abstractions/cipher.service';
import { CollectionService as CollectionServiceAbstraction } from 'jslib-common/abstractions/collection.service';
import { CryptoService as CryptoServiceAbstraction } from 'jslib-common/abstractions/crypto.service';
import { CryptoFunctionService as CryptoFunctionServiceAbstraction } from 'jslib-common/abstractions/cryptoFunction.service';
import { EnvironmentService as EnvironmentServiceAbstraction } from 'jslib-common/abstractions/environment.service';
import { EventService as EventServiceAbstraction } from 'jslib-common/abstractions/event.service';
import { ExportService as ExportServiceAbstraction } from 'jslib-common/abstractions/export.service';
import { FileUploadService as FileUploadServiceAbstraction } from 'jslib-common/abstractions/fileUpload.service';
import { FolderService as FolderServiceAbstraction } from 'jslib-common/abstractions/folder.service';
import { I18nService as I18nServiceAbstraction } from 'jslib-common/abstractions/i18n.service';
import { KeyConnectorService as KeyConnectorServiceAbstraction } from 'jslib-common/abstractions/keyConnector.service';
import { LogService as LogServiceAbstraction } from 'jslib-common/abstractions/log.service';
import { MessagingService as MessagingServiceAbstraction } from 'jslib-common/abstractions/messaging.service';
import { NotificationsService as NotificationsServiceAbstraction } from 'jslib-common/abstractions/notifications.service';
import { PasswordGenerationService as PasswordGenerationServiceAbstraction } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService as PlatformUtilsServiceAbstraction } from 'jslib-common/abstractions/platformUtils.service';
import { PolicyService as PolicyServiceAbstraction } from 'jslib-common/abstractions/policy.service';
import { SearchService as SearchServiceAbstraction } from 'jslib-common/abstractions/search.service';
import { SendService as SendServiceAbstraction } from 'jslib-common/abstractions/send.service';
import { SettingsService as SettingsServiceAbstraction } from 'jslib-common/abstractions/settings.service';
import { StateService as StateServiceAbstraction } from 'jslib-common/abstractions/state.service';
import { StorageService as StorageServiceAbstraction } from 'jslib-common/abstractions/storage.service';
import { SyncService as SyncServiceAbstraction } from 'jslib-common/abstractions/sync.service';
import { SystemService as SystemServiceAbstraction } from 'jslib-common/abstractions/system.service';
import { TokenService as TokenServiceAbstraction } from 'jslib-common/abstractions/token.service';
import { TotpService as TotpServiceAbstraction } from 'jslib-common/abstractions/totp.service';
import { UserService as UserServiceAbstraction } from 'jslib-common/abstractions/user.service';
import { UserVerificationService as UserVerificationServiceAbstraction } from 'jslib-common/abstractions/userVerification.service';
import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from 'jslib-common/abstractions/vaultTimeout.service';
import { ApiService as ApiServiceAbstraction } from "jslib-common/abstractions/api.service";
import { AppIdService as AppIdServiceAbstraction } from "jslib-common/abstractions/appId.service";
import { AuditService as AuditServiceAbstraction } from "jslib-common/abstractions/audit.service";
import { AuthService as AuthServiceAbstraction } from "jslib-common/abstractions/auth.service";
import { CipherService as CipherServiceAbstraction } from "jslib-common/abstractions/cipher.service";
import { CollectionService as CollectionServiceAbstraction } from "jslib-common/abstractions/collection.service";
import { CryptoService as CryptoServiceAbstraction } from "jslib-common/abstractions/crypto.service";
import { CryptoFunctionService as CryptoFunctionServiceAbstraction } from "jslib-common/abstractions/cryptoFunction.service";
import { EnvironmentService as EnvironmentServiceAbstraction } from "jslib-common/abstractions/environment.service";
import { EventService as EventServiceAbstraction } from "jslib-common/abstractions/event.service";
import { ExportService as ExportServiceAbstraction } from "jslib-common/abstractions/export.service";
import { FileUploadService as FileUploadServiceAbstraction } from "jslib-common/abstractions/fileUpload.service";
import { FolderService as FolderServiceAbstraction } from "jslib-common/abstractions/folder.service";
import { I18nService as I18nServiceAbstraction } from "jslib-common/abstractions/i18n.service";
import { KeyConnectorService as KeyConnectorServiceAbstraction } from "jslib-common/abstractions/keyConnector.service";
import { LogService as LogServiceAbstraction } from "jslib-common/abstractions/log.service";
import { MessagingService as MessagingServiceAbstraction } from "jslib-common/abstractions/messaging.service";
import { NotificationsService as NotificationsServiceAbstraction } from "jslib-common/abstractions/notifications.service";
import { PasswordGenerationService as PasswordGenerationServiceAbstraction } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService as PlatformUtilsServiceAbstraction } from "jslib-common/abstractions/platformUtils.service";
import { PolicyService as PolicyServiceAbstraction } from "jslib-common/abstractions/policy.service";
import { SearchService as SearchServiceAbstraction } from "jslib-common/abstractions/search.service";
import { SendService as SendServiceAbstraction } from "jslib-common/abstractions/send.service";
import { SettingsService as SettingsServiceAbstraction } from "jslib-common/abstractions/settings.service";
import { StateService as StateServiceAbstraction } from "jslib-common/abstractions/state.service";
import { StorageService as StorageServiceAbstraction } from "jslib-common/abstractions/storage.service";
import { SyncService as SyncServiceAbstraction } from "jslib-common/abstractions/sync.service";
import { SystemService as SystemServiceAbstraction } from "jslib-common/abstractions/system.service";
import { TokenService as TokenServiceAbstraction } from "jslib-common/abstractions/token.service";
import { TotpService as TotpServiceAbstraction } from "jslib-common/abstractions/totp.service";
import { UserService as UserServiceAbstraction } from "jslib-common/abstractions/user.service";
import { UserVerificationService as UserVerificationServiceAbstraction } from "jslib-common/abstractions/userVerification.service";
import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from "jslib-common/abstractions/vaultTimeout.service";
import { AutofillService as AutofillServiceAbstraction } from '../services/abstractions/autofill.service';
import { AutofillService as AutofillServiceAbstraction } from "../services/abstractions/autofill.service";
import { BrowserApi } from '../browser/browserApi';
import { SafariApp } from '../browser/safariApp';
import { BrowserApi } from "../browser/browserApi";
import { SafariApp } from "../browser/safariApp";
import CommandsBackground from './commands.background';
import ContextMenusBackground from './contextMenus.background';
import IdleBackground from './idle.background';
import { NativeMessagingBackground } from './nativeMessaging.background';
import NotificationBackground from './notification.background';
import RuntimeBackground from './runtime.background';
import TabsBackground from './tabs.background';
import WebRequestBackground from './webRequest.background';
import WindowsBackground from './windows.background';
import CommandsBackground from "./commands.background";
import ContextMenusBackground from "./contextMenus.background";
import IdleBackground from "./idle.background";
import { NativeMessagingBackground } from "./nativeMessaging.background";
import NotificationBackground from "./notification.background";
import RuntimeBackground from "./runtime.background";
import TabsBackground from "./tabs.background";
import WebRequestBackground from "./webRequest.background";
import WindowsBackground from "./windows.background";
import { PopupUtilsService } from '../popup/services/popup-utils.service';
import AutofillService from '../services/autofill.service';
import { BrowserCryptoService } from '../services/browserCrypto.service';
import BrowserMessagingService from '../services/browserMessaging.service';
import BrowserPlatformUtilsService from '../services/browserPlatformUtils.service';
import BrowserStorageService from '../services/browserStorage.service';
import I18nService from '../services/i18n.service';
import VaultTimeoutService from '../services/vaultTimeout.service';
import { PopupUtilsService } from "../popup/services/popup-utils.service";
import AutofillService from "../services/autofill.service";
import { BrowserCryptoService } from "../services/browserCrypto.service";
import BrowserMessagingService from "../services/browserMessaging.service";
import BrowserPlatformUtilsService from "../services/browserPlatformUtils.service";
import BrowserStorageService from "../services/browserStorage.service";
import I18nService from "../services/i18n.service";
import VaultTimeoutService from "../services/vaultTimeout.service";
export default class MainBackground {
messagingService: MessagingServiceAbstraction;
@ -155,7 +155,9 @@ export default class MainBackground {
// Services
this.messagingService = new BrowserMessagingService();
this.storageService = new BrowserStorageService();
this.platformUtilsService = new BrowserPlatformUtilsService(this.messagingService, this.storageService,
this.platformUtilsService = new BrowserPlatformUtilsService(
this.messagingService,
this.storageService,
(clipboardValue, clearMs) => {
if (this.systemService != null) {
this.systemService.clearClipboard(clipboardValue, clearMs);
@ -166,45 +168,95 @@ export default class MainBackground {
const promise = this.nativeMessagingBackground.getResponse();
try {
await this.nativeMessagingBackground.send({ command: 'biometricUnlock' });
await this.nativeMessagingBackground.send({ command: "biometricUnlock" });
} catch (e) {
return Promise.reject(e);
}
return promise.then(result => result.response === 'unlocked');
return promise.then((result) => result.response === "unlocked");
}
});
}
);
this.secureStorageService = new BrowserStorageService();
this.i18nService = new I18nService(BrowserApi.getUILanguage(window));
this.cryptoFunctionService = new WebCryptoFunctionService(window, this.platformUtilsService);
this.logService = new ConsoleLogService(false);
this.cryptoService = new BrowserCryptoService(this.storageService, this.secureStorageService,
this.cryptoFunctionService, this.platformUtilsService, this.logService);
this.cryptoService = new BrowserCryptoService(
this.storageService,
this.secureStorageService,
this.cryptoFunctionService,
this.platformUtilsService,
this.logService
);
this.tokenService = new TokenService(this.storageService);
this.appIdService = new AppIdService(this.storageService);
this.environmentService = new EnvironmentService(this.storageService);
this.apiService = new ApiService(this.tokenService, this.platformUtilsService, this.environmentService,
(expired: boolean) => this.logout(expired));
this.apiService = new ApiService(
this.tokenService,
this.platformUtilsService,
this.environmentService,
(expired: boolean) => this.logout(expired)
);
this.userService = new UserService(this.tokenService, this.storageService);
this.settingsService = new SettingsService(this.userService, this.storageService);
this.fileUploadService = new FileUploadService(this.logService, this.apiService);
this.cipherService = new CipherService(this.cryptoService, this.userService, this.settingsService,
this.apiService, this.fileUploadService, this.storageService, this.i18nService, () => this.searchService,
this.logService);
this.folderService = new FolderService(this.cryptoService, this.userService, this.apiService,
this.storageService, this.i18nService, this.cipherService);
this.collectionService = new CollectionService(this.cryptoService, this.userService, this.storageService,
this.i18nService);
this.cipherService = new CipherService(
this.cryptoService,
this.userService,
this.settingsService,
this.apiService,
this.fileUploadService,
this.storageService,
this.i18nService,
() => this.searchService,
this.logService
);
this.folderService = new FolderService(
this.cryptoService,
this.userService,
this.apiService,
this.storageService,
this.i18nService,
this.cipherService
);
this.collectionService = new CollectionService(
this.cryptoService,
this.userService,
this.storageService,
this.i18nService
);
this.searchService = new SearchService(this.cipherService, this.logService, this.i18nService);
this.sendService = new SendService(this.cryptoService, this.userService, this.apiService, this.fileUploadService,
this.storageService, this.i18nService, this.cryptoFunctionService);
this.sendService = new SendService(
this.cryptoService,
this.userService,
this.apiService,
this.fileUploadService,
this.storageService,
this.i18nService,
this.cryptoFunctionService
);
this.stateService = new StateService();
this.policyService = new PolicyService(this.userService, this.storageService, this.apiService);
this.keyConnectorService = new KeyConnectorService(this.storageService, this.userService, this.cryptoService,
this.apiService, this.tokenService, this.logService);
this.vaultTimeoutService = new VaultTimeoutService(this.cipherService, this.folderService,
this.collectionService, this.cryptoService, this.platformUtilsService, this.storageService,
this.messagingService, this.searchService, this.userService, this.tokenService, this.policyService,
this.keyConnectorService = new KeyConnectorService(
this.storageService,
this.userService,
this.cryptoService,
this.apiService,
this.tokenService,
this.logService
);
this.vaultTimeoutService = new VaultTimeoutService(
this.cipherService,
this.folderService,
this.collectionService,
this.cryptoService,
this.platformUtilsService,
this.storageService,
this.messagingService,
this.searchService,
this.userService,
this.tokenService,
this.policyService,
this.keyConnectorService,
async () => {
if (this.notificationsService != null) {
@ -216,74 +268,183 @@ export default class MainBackground {
this.systemService.startProcessReload();
await this.systemService.clearPendingClipboard();
}
}, async () => await this.logout(false));
this.syncService = new SyncService(this.userService, this.apiService, this.settingsService,
this.folderService, this.cipherService, this.cryptoService, this.collectionService,
this.storageService, this.messagingService, this.policyService, this.sendService,
this.logService, this.tokenService, this.keyConnectorService,
async (expired: boolean) => await this.logout(expired));
this.eventService = new EventService(this.storageService, this.apiService, this.userService,
this.cipherService, this.logService);
this.passwordGenerationService = new PasswordGenerationService(this.cryptoService, this.storageService,
this.policyService);
this.totpService = new TotpService(this.storageService, this.cryptoFunctionService, this.logService);
this.autofillService = new AutofillService(this.cipherService, this.userService, this.totpService,
this.eventService, this.logService);
},
async () => await this.logout(false)
);
this.syncService = new SyncService(
this.userService,
this.apiService,
this.settingsService,
this.folderService,
this.cipherService,
this.cryptoService,
this.collectionService,
this.storageService,
this.messagingService,
this.policyService,
this.sendService,
this.logService,
this.tokenService,
this.keyConnectorService,
async (expired: boolean) => await this.logout(expired)
);
this.eventService = new EventService(
this.storageService,
this.apiService,
this.userService,
this.cipherService,
this.logService
);
this.passwordGenerationService = new PasswordGenerationService(
this.cryptoService,
this.storageService,
this.policyService
);
this.totpService = new TotpService(
this.storageService,
this.cryptoFunctionService,
this.logService
);
this.autofillService = new AutofillService(
this.cipherService,
this.userService,
this.totpService,
this.eventService,
this.logService
);
this.containerService = new ContainerService(this.cryptoService);
this.auditService = new AuditService(this.cryptoFunctionService, this.apiService);
this.exportService = new ExportService(this.folderService, this.cipherService, this.apiService,
this.cryptoService);
this.notificationsService = new NotificationsService(this.userService, this.syncService, this.appIdService,
this.apiService, this.vaultTimeoutService, this.environmentService, () => this.logout(true), this.logService);
this.exportService = new ExportService(
this.folderService,
this.cipherService,
this.apiService,
this.cryptoService
);
this.notificationsService = new NotificationsService(
this.userService,
this.syncService,
this.appIdService,
this.apiService,
this.vaultTimeoutService,
this.environmentService,
() => this.logout(true),
this.logService
);
this.popupUtilsService = new PopupUtilsService(this.platformUtilsService);
this.systemService = new SystemService(this.storageService, this.vaultTimeoutService,
this.messagingService, this.platformUtilsService, () => {
const forceWindowReload = this.platformUtilsService.isSafari() ||
this.platformUtilsService.isFirefox() || this.platformUtilsService.isOpera();
this.systemService = new SystemService(
this.storageService,
this.vaultTimeoutService,
this.messagingService,
this.platformUtilsService,
() => {
const forceWindowReload =
this.platformUtilsService.isSafari() ||
this.platformUtilsService.isFirefox() ||
this.platformUtilsService.isOpera();
BrowserApi.reloadExtension(forceWindowReload ? window : null);
return Promise.resolve();
});
this.userVerificationService = new UserVerificationService(this.cryptoService, this.i18nService,
this.apiService);
}
);
this.userVerificationService = new UserVerificationService(
this.cryptoService,
this.i18nService,
this.apiService
);
// Other fields
this.isSafari = this.platformUtilsService.isSafari();
this.sidebarAction = this.isSafari ? null : (typeof opr !== 'undefined') && opr.sidebarAction ?
opr.sidebarAction : (window as any).chrome.sidebarAction;
this.sidebarAction = this.isSafari
? null
: typeof opr !== "undefined" && opr.sidebarAction
? opr.sidebarAction
: (window as any).chrome.sidebarAction;
// Background
this.runtimeBackground = new RuntimeBackground(this, this.autofillService,
this.platformUtilsService as BrowserPlatformUtilsService, this.storageService, this.i18nService,
this.notificationsService, this.systemService, this.environmentService, this.messagingService,
this.logService);
this.nativeMessagingBackground = new NativeMessagingBackground(this.storageService, this.cryptoService, this.cryptoFunctionService,
this.vaultTimeoutService, this.runtimeBackground, this.i18nService, this.userService, this.messagingService, this.appIdService,
this.platformUtilsService);
this.commandsBackground = new CommandsBackground(this, this.passwordGenerationService,
this.platformUtilsService, this.vaultTimeoutService);
this.notificationBackground = new NotificationBackground(this, this.autofillService, this.cipherService,
this.storageService, this.vaultTimeoutService, this.policyService, this.folderService, this.userService);
this.runtimeBackground = new RuntimeBackground(
this,
this.autofillService,
this.platformUtilsService as BrowserPlatformUtilsService,
this.storageService,
this.i18nService,
this.notificationsService,
this.systemService,
this.environmentService,
this.messagingService,
this.logService
);
this.nativeMessagingBackground = new NativeMessagingBackground(
this.storageService,
this.cryptoService,
this.cryptoFunctionService,
this.vaultTimeoutService,
this.runtimeBackground,
this.i18nService,
this.userService,
this.messagingService,
this.appIdService,
this.platformUtilsService
);
this.commandsBackground = new CommandsBackground(
this,
this.passwordGenerationService,
this.platformUtilsService,
this.vaultTimeoutService
);
this.notificationBackground = new NotificationBackground(
this,
this.autofillService,
this.cipherService,
this.storageService,
this.vaultTimeoutService,
this.policyService,
this.folderService,
this.userService
);
this.tabsBackground = new TabsBackground(this, this.notificationBackground);
this.contextMenusBackground = new ContextMenusBackground(this, this.cipherService, this.passwordGenerationService,
this.platformUtilsService, this.vaultTimeoutService, this.eventService, this.totpService);
this.idleBackground = new IdleBackground(this.vaultTimeoutService, this.storageService,
this.notificationsService);
this.webRequestBackground = new WebRequestBackground(this.platformUtilsService, this.cipherService,
this.vaultTimeoutService);
this.contextMenusBackground = new ContextMenusBackground(
this,
this.cipherService,
this.passwordGenerationService,
this.platformUtilsService,
this.vaultTimeoutService,
this.eventService,
this.totpService
);
this.idleBackground = new IdleBackground(
this.vaultTimeoutService,
this.storageService,
this.notificationsService
);
this.webRequestBackground = new WebRequestBackground(
this.platformUtilsService,
this.cipherService,
this.vaultTimeoutService
);
this.windowsBackground = new WindowsBackground(this);
const that = this;
this.authService = new AuthService(this.cryptoService, this.apiService, this.userService,
this.tokenService, this.appIdService, this.i18nService, this.platformUtilsService,
new class extends MessagingServiceAbstraction {
this.authService = new AuthService(
this.cryptoService,
this.apiService,
this.userService,
this.tokenService,
this.appIdService,
this.i18nService,
this.platformUtilsService,
new (class extends MessagingServiceAbstraction {
// AuthService should send the messages to the background not popup.
send = (subscriber: string, arg: any = {}) => {
const message = Object.assign({}, { command: subscriber }, arg);
that.runtimeBackground.processMessage(message, that, null);
}
}(), this.vaultTimeoutService, this.logService, this.cryptoFunctionService, this.environmentService,
this.keyConnectorService);
};
})(),
this.vaultTimeoutService,
this.logService,
this.cryptoFunctionService,
this.environmentService,
this.keyConnectorService
);
}
async bootstrap() {
@ -303,7 +464,7 @@ export default class MainBackground {
await this.webRequestBackground.init();
await this.windowsBackground.init();
return new Promise<void>(resolve => {
return new Promise<void>((resolve) => {
setTimeout(async () => {
await this.environmentService.setUrlsFromStorage();
await this.setIcon();
@ -322,11 +483,11 @@ export default class MainBackground {
const isAuthenticated = await this.userService.isAuthenticated();
const locked = await this.vaultTimeoutService.isLocked();
let suffix = '';
let suffix = "";
if (!isAuthenticated) {
suffix = '_gray';
suffix = "_gray";
} else if (locked) {
suffix = '_locked';
suffix = "_locked";
}
await this.actionSetIcon(chrome.browserAction, suffix);
@ -338,7 +499,9 @@ export default class MainBackground {
return;
}
const menuDisabled = await this.storageService.get<boolean>(ConstantsService.disableContextMenuItemKey);
const menuDisabled = await this.storageService.get<boolean>(
ConstantsService.disableContextMenuItemKey
);
if (!menuDisabled) {
await this.buildContextMenu();
} else {
@ -378,7 +541,7 @@ export default class MainBackground {
]);
this.searchService.clearIndex();
this.messagingService.send('doneLoggingOut', { expired: expired });
this.messagingService.send("doneLoggingOut", { expired: expired });
await this.setIcon();
await this.refreshBadgeAndMenu();
@ -398,11 +561,15 @@ export default class MainBackground {
options.frameId = frameId;
}
BrowserApi.tabSendMessage(tab, {
command: 'collectPageDetails',
BrowserApi.tabSendMessage(
tab,
{
command: "collectPageDetails",
tab: tab,
sender: sender,
}, options);
},
options
);
}
async openPopup() {
@ -412,25 +579,32 @@ export default class MainBackground {
if (!this.isSafari) {
return;
}
await SafariApp.sendMessageToApp('showPopover', null, true);
await SafariApp.sendMessageToApp("showPopover", null, true);
}
async reseedStorage() {
if (!this.platformUtilsService.isChrome() && !this.platformUtilsService.isVivaldi() &&
!this.platformUtilsService.isOpera()) {
if (
!this.platformUtilsService.isChrome() &&
!this.platformUtilsService.isVivaldi() &&
!this.platformUtilsService.isOpera()
) {
return;
}
const currentVaultTimeout = await this.storageService.get<number>(ConstantsService.vaultTimeoutKey);
const currentVaultTimeout = await this.storageService.get<number>(
ConstantsService.vaultTimeoutKey
);
if (currentVaultTimeout == null) {
return;
}
const getStorage = (): Promise<any> => new Promise(resolve => {
const getStorage = (): Promise<any> =>
new Promise((resolve) => {
chrome.storage.local.get(null, (o: any) => resolve(o));
});
const clearStorage = (): Promise<void> => new Promise(resolve => {
const clearStorage = (): Promise<void> =>
new Promise((resolve) => {
chrome.storage.local.clear(() => resolve());
});
@ -454,65 +628,65 @@ export default class MainBackground {
await this.contextMenusRemoveAll();
await this.contextMenusCreate({
type: 'normal',
id: 'root',
contexts: ['all'],
title: 'Bitwarden',
type: "normal",
id: "root",
contexts: ["all"],
title: "Bitwarden",
});
await this.contextMenusCreate({
type: 'normal',
id: 'autofill',
parentId: 'root',
contexts: ['all'],
title: this.i18nService.t('autoFill'),
type: "normal",
id: "autofill",
parentId: "root",
contexts: ["all"],
title: this.i18nService.t("autoFill"),
});
await this.contextMenusCreate({
type: 'normal',
id: 'copy-username',
parentId: 'root',
contexts: ['all'],
title: this.i18nService.t('copyUsername'),
type: "normal",
id: "copy-username",
parentId: "root",
contexts: ["all"],
title: this.i18nService.t("copyUsername"),
});
await this.contextMenusCreate({
type: 'normal',
id: 'copy-password',
parentId: 'root',
contexts: ['all'],
title: this.i18nService.t('copyPassword'),
type: "normal",
id: "copy-password",
parentId: "root",
contexts: ["all"],
title: this.i18nService.t("copyPassword"),
});
if (await this.userService.canAccessPremium()) {
await this.contextMenusCreate({
type: 'normal',
id: 'copy-totp',
parentId: 'root',
contexts: ['all'],
title: this.i18nService.t('copyVerificationCode'),
type: "normal",
id: "copy-totp",
parentId: "root",
contexts: ["all"],
title: this.i18nService.t("copyVerificationCode"),
});
}
await this.contextMenusCreate({
type: 'separator',
parentId: 'root',
type: "separator",
parentId: "root",
});
await this.contextMenusCreate({
type: 'normal',
id: 'generate-password',
parentId: 'root',
contexts: ['all'],
title: this.i18nService.t('generatePasswordCopied'),
type: "normal",
id: "generate-password",
parentId: "root",
contexts: ["all"],
title: this.i18nService.t("generatePasswordCopied"),
});
await this.contextMenusCreate({
type: 'normal',
id: 'copy-identifier',
parentId: 'root',
contexts: ['all'],
title: this.i18nService.t('copyElementIdentifier'),
type: "normal",
id: "copy-identifier",
parentId: "root",
contexts: ["all"],
title: this.i18nService.t("copyElementIdentifier"),
});
this.buildingContextMenu = false;
@ -539,24 +713,26 @@ export default class MainBackground {
ciphers.sort((a, b) => this.cipherService.sortCiphersByLastUsedThenName(a, b));
if (contextMenuEnabled) {
ciphers.forEach(cipher => {
ciphers.forEach((cipher) => {
this.loadLoginContextMenuOptions(cipher);
});
}
const disableBadgeCounter = await this.storageService.get<boolean>(ConstantsService.disableBadgeCounterKey);
let theText = '';
const disableBadgeCounter = await this.storageService.get<boolean>(
ConstantsService.disableBadgeCounterKey
);
let theText = "";
if (!disableBadgeCounter) {
if (ciphers.length > 0 && ciphers.length <= 9) {
theText = ciphers.length.toString();
} else if (ciphers.length > 0) {
theText = '9+';
theText = "9+";
}
}
if (contextMenuEnabled && ciphers.length === 0) {
await this.loadNoLoginsContextMenuOptions(this.i18nService.t('noMatchingLogins'));
await this.loadNoLoginsContextMenuOptions(this.i18nService.t("noMatchingLogins"));
}
this.sidebarActionSetBadgeText(theText, tabId);
@ -574,88 +750,100 @@ export default class MainBackground {
private async loadMenuAndUpdateBadgeForNoAccessState(contextMenuEnabled: boolean) {
if (contextMenuEnabled) {
const authed = await this.userService.isAuthenticated();
await this.loadNoLoginsContextMenuOptions(this.i18nService.t(authed ? 'vaultLocked' : 'vaultLoggedOut'));
await this.loadNoLoginsContextMenuOptions(
this.i18nService.t(authed ? "vaultLocked" : "vaultLoggedOut")
);
}
const tabs = await BrowserApi.getActiveTabs();
if (tabs != null) {
tabs.forEach(tab => {
tabs.forEach((tab) => {
if (tab.id != null) {
this.browserActionSetBadgeText('', tab.id);
this.sidebarActionSetBadgeText('', tab.id);
this.browserActionSetBadgeText("", tab.id);
this.sidebarActionSetBadgeText("", tab.id);
}
});
}
}
private async loadLoginContextMenuOptions(cipher: any) {
if (cipher == null || cipher.type !== CipherType.Login || cipher.reprompt !== CipherRepromptType.None) {
if (
cipher == null ||
cipher.type !== CipherType.Login ||
cipher.reprompt !== CipherRepromptType.None
) {
return;
}
let title = cipher.name;
if (cipher.login.username && cipher.login.username !== '') {
title += (' (' + cipher.login.username + ')');
if (cipher.login.username && cipher.login.username !== "") {
title += " (" + cipher.login.username + ")";
}
await this.loadContextMenuOptions(title, cipher.id, cipher);
}
private async loadNoLoginsContextMenuOptions(noLoginsMessage: string) {
await this.loadContextMenuOptions(noLoginsMessage, 'noop', null);
await this.loadContextMenuOptions(noLoginsMessage, "noop", null);
}
private async loadContextMenuOptions(title: string, idSuffix: string, cipher: any) {
if (!chrome.contextMenus || this.menuOptionsLoaded.indexOf(idSuffix) > -1 ||
(cipher != null && cipher.type !== CipherType.Login)) {
if (
!chrome.contextMenus ||
this.menuOptionsLoaded.indexOf(idSuffix) > -1 ||
(cipher != null && cipher.type !== CipherType.Login)
) {
return;
}
this.menuOptionsLoaded.push(idSuffix);
if (cipher == null || (cipher.login.password && cipher.login.password !== '')) {
if (cipher == null || (cipher.login.password && cipher.login.password !== "")) {
await this.contextMenusCreate({
type: 'normal',
id: 'autofill_' + idSuffix,
parentId: 'autofill',
contexts: ['all'],
type: "normal",
id: "autofill_" + idSuffix,
parentId: "autofill",
contexts: ["all"],
title: this.sanitizeContextMenuTitle(title),
});
}
if (cipher == null || (cipher.login.username && cipher.login.username !== '')) {
if (cipher == null || (cipher.login.username && cipher.login.username !== "")) {
await this.contextMenusCreate({
type: 'normal',
id: 'copy-username_' + idSuffix,
parentId: 'copy-username',
contexts: ['all'],
type: "normal",
id: "copy-username_" + idSuffix,
parentId: "copy-username",
contexts: ["all"],
title: this.sanitizeContextMenuTitle(title),
});
}
if (cipher == null || (cipher.login.password && cipher.login.password !== '' && cipher.viewPassword)) {
if (
cipher == null ||
(cipher.login.password && cipher.login.password !== "" && cipher.viewPassword)
) {
await this.contextMenusCreate({
type: 'normal',
id: 'copy-password_' + idSuffix,
parentId: 'copy-password',
contexts: ['all'],
type: "normal",
id: "copy-password_" + idSuffix,
parentId: "copy-password",
contexts: ["all"],
title: this.sanitizeContextMenuTitle(title),
});
}
const canAccessPremium = await this.userService.canAccessPremium();
if (canAccessPremium && (cipher == null || (cipher.login.totp && cipher.login.totp !== ''))) {
if (canAccessPremium && (cipher == null || (cipher.login.totp && cipher.login.totp !== ""))) {
await this.contextMenusCreate({
type: 'normal',
id: 'copy-totp_' + idSuffix,
parentId: 'copy-totp',
contexts: ['all'],
type: "normal",
id: "copy-totp_" + idSuffix,
parentId: "copy-totp",
contexts: ["all"],
title: this.sanitizeContextMenuTitle(title),
});
}
}
private sanitizeContextMenuTitle(title: string): string {
return title.replace(/&/g, '&&');
return title.replace(/&/g, "&&");
}
private async fullSync(override: boolean = false) {
@ -686,7 +874,7 @@ export default class MainBackground {
// Browser API Helpers
private contextMenusRemoveAll() {
return new Promise<void>(resolve => {
return new Promise<void>((resolve) => {
chrome.contextMenus.removeAll(() => {
resolve();
if (chrome.runtime.lastError) {
@ -697,7 +885,7 @@ export default class MainBackground {
}
private contextMenusCreate(options: any) {
return new Promise<void>(resolve => {
return new Promise<void>((resolve) => {
chrome.contextMenus.create(options, () => {
resolve();
if (chrome.runtime.lastError) {
@ -714,8 +902,8 @@ export default class MainBackground {
const options = {
path: {
19: 'images/icon19' + suffix + '.png',
38: 'images/icon38' + suffix + '.png',
19: "images/icon19" + suffix + ".png",
38: "images/icon38" + suffix + ".png",
},
};
@ -726,7 +914,7 @@ export default class MainBackground {
// which doesn't resolve within a reasonable time.
theAction.setIcon(options);
} else {
return new Promise<void>(resolve => {
return new Promise<void>((resolve) => {
theAction.setIcon(options, () => resolve());
});
}
@ -734,7 +922,7 @@ export default class MainBackground {
private actionSetBadgeBackgroundColor(action: any) {
if (action && action.setBadgeBackgroundColor) {
action.setBadgeBackgroundColor({ color: '#294e5f' });
action.setBadgeBackgroundColor({ color: "#294e5f" });
}
}
@ -758,9 +946,9 @@ export default class MainBackground {
tabId: tabId,
});
} else if (this.sidebarAction.setTitle) {
let title = 'Bitwarden';
if (text && text !== '') {
title += (' [' + text + ']');
let title = "Bitwarden";
if (text && text !== "") {
title += " [" + text + "]";
}
this.sidebarAction.setTitle({

2
src/background/models/addChangePasswordQueueMessage.ts
View File

@ -1,4 +1,4 @@
import NotificationQueueMessage from './notificationQueueMessage';
import NotificationQueueMessage from "./notificationQueueMessage";
export default class AddChangePasswordQueueMessage extends NotificationQueueMessage {
cipherId: string;

2
src/background/models/addLoginQueueMessage.ts
View File

@ -1,4 +1,4 @@
import NotificationQueueMessage from './notificationQueueMessage';
import NotificationQueueMessage from "./notificationQueueMessage";
export default class AddLoginQueueMessage extends NotificationQueueMessage {
username: string;

2
src/background/models/notificationQueueMessage.ts
View File

@ -1,4 +1,4 @@
import { NotificationQueueMessageType } from './notificationQueueMessageType';
import { NotificationQueueMessageType } from "./notificationQueueMessageType";
export default class NotificationQueueMessage {
type: NotificationQueueMessageType;

4
src/background/models/notificationQueueMessageType.ts
View File

@ -1,4 +1,4 @@
export enum NotificationQueueMessageType {
addLogin = 'addLogin',
changePassword = 'changePassword',
addLogin = "addLogin",
changePassword = "changePassword",
}

181
src/background/nativeMessaging.background.ts
View File

@ -1,22 +1,22 @@
import { AppIdService } from 'jslib-common/abstractions/appId.service';
import { CryptoService } from 'jslib-common/abstractions/crypto.service';
import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
import { ConstantsService } from 'jslib-common/services/constants.service';
import { AppIdService } from "jslib-common/abstractions/appId.service";
import { CryptoService } from "jslib-common/abstractions/crypto.service";
import { CryptoFunctionService } from "jslib-common/abstractions/cryptoFunction.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { MessagingService } from "jslib-common/abstractions/messaging.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { StorageService } from "jslib-common/abstractions/storage.service";
import { UserService } from "jslib-common/abstractions/user.service";
import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
import { ConstantsService } from "jslib-common/services/constants.service";
import { Utils } from 'jslib-common/misc/utils';
import { SymmetricCryptoKey } from 'jslib-common/models/domain/symmetricCryptoKey';
import { Utils } from "jslib-common/misc/utils";
import { SymmetricCryptoKey } from "jslib-common/models/domain/symmetricCryptoKey";
import { BrowserApi } from '../browser/browserApi';
import RuntimeBackground from './runtime.background';
import { BrowserApi } from "../browser/browserApi";
import RuntimeBackground from "./runtime.background";
const MessageValidTimeout = 10 * 1000;
const EncryptionAlgorithm = 'sha1';
const EncryptionAlgorithm = "sha1";
export class NativeMessagingBackground {
private connected = false;
@ -31,16 +31,23 @@ export class NativeMessagingBackground {
private appId: string;
private validatingFingerprint: boolean;
constructor(private storageService: StorageService, private cryptoService: CryptoService,
private cryptoFunctionService: CryptoFunctionService, private vaultTimeoutService: VaultTimeoutService,
private runtimeBackground: RuntimeBackground, private i18nService: I18nService, private userService: UserService,
private messagingService: MessagingService, private appIdService: AppIdService,
private platformUtilsService: PlatformUtilsService) {
constructor(
private storageService: StorageService,
private cryptoService: CryptoService,
private cryptoFunctionService: CryptoFunctionService,
private vaultTimeoutService: VaultTimeoutService,
private runtimeBackground: RuntimeBackground,
private i18nService: I18nService,
private userService: UserService,
private messagingService: MessagingService,
private appIdService: AppIdService,
private platformUtilsService: PlatformUtilsService
) {
this.storageService.save(ConstantsService.biometricFingerprintValidated, false);
if (chrome?.permissions?.onAdded) {
// Reload extension to activate nativeMessaging
chrome.permissions.onAdded.addListener(permissions => {
chrome.permissions.onAdded.addListener((permissions) => {
BrowserApi.reloadExtension(null);
});
}
@ -51,7 +58,7 @@ export class NativeMessagingBackground {
this.storageService.save(ConstantsService.biometricFingerprintValidated, false);
return new Promise<void>((resolve, reject) => {
this.port = BrowserApi.connectNative('com.8bit.bitwarden');
this.port = BrowserApi.connectNative("com.8bit.bitwarden");
this.connecting = true;
@ -69,30 +76,34 @@ export class NativeMessagingBackground {
this.port.onMessage.addListener(async (message: any) => {
switch (message.command) {
case 'connected':
case "connected":
connectedCallback();
break;
case 'disconnected':
case "disconnected":
if (this.connecting) {
this.messagingService.send('showDialog', {
text: this.i18nService.t('startDesktopDesc'),
title: this.i18nService.t('startDesktopTitle'),
confirmText: this.i18nService.t('ok'),
type: 'error',
this.messagingService.send("showDialog", {
text: this.i18nService.t("startDesktopDesc"),
title: this.i18nService.t("startDesktopTitle"),
confirmText: this.i18nService.t("ok"),
type: "error",
});
reject();
}
this.connected = false;
this.port.disconnect();
break;
case 'setupEncryption':
case "setupEncryption":
// Ignore since it belongs to another device
if (message.appId !== this.appId) {
return;
}
const encrypted = Utils.fromB64ToArray(message.sharedSecret);
const decrypted = await this.cryptoFunctionService.rsaDecrypt(encrypted.buffer, this.privateKey, EncryptionAlgorithm);
const decrypted = await this.cryptoFunctionService.rsaDecrypt(
encrypted.buffer,
this.privateKey,
EncryptionAlgorithm
);
if (this.validatingFingerprint) {
this.validatingFingerprint = false;
@ -101,7 +112,7 @@ export class NativeMessagingBackground {
this.sharedSecret = new SymmetricCryptoKey(decrypted);
this.secureSetupResolve();
break;
case 'invalidateEncryption':
case "invalidateEncryption":
// Ignore since it belongs to another device
if (message.appId !== this.appId) {
return;
@ -111,21 +122,21 @@ export class NativeMessagingBackground {
this.privateKey = null;
this.connected = false;
this.messagingService.send('showDialog', {
text: this.i18nService.t('nativeMessagingInvalidEncryptionDesc'),
title: this.i18nService.t('nativeMessagingInvalidEncryptionTitle'),
confirmText: this.i18nService.t('ok'),
type: 'error',
this.messagingService.send("showDialog", {
text: this.i18nService.t("nativeMessagingInvalidEncryptionDesc"),
title: this.i18nService.t("nativeMessagingInvalidEncryptionTitle"),
confirmText: this.i18nService.t("ok"),
type: "error",
});
break;
case 'verifyFingerprint': {
case "verifyFingerprint": {
if (this.sharedSecret == null) {
this.validatingFingerprint = true;
this.showFingerprintDialog();
}
break;
}
case 'wrongUserId':
case "wrongUserId":
this.showWrongUserDialog();
default:
// Ignore since it belongs to another device
@ -146,11 +157,11 @@ export class NativeMessagingBackground {
}
if (error != null) {
this.messagingService.send('showDialog', {
text: this.i18nService.t('desktopIntegrationDisabledDesc'),
title: this.i18nService.t('desktopIntegrationDisabledTitle'),
confirmText: this.i18nService.t('ok'),
type: 'error',
this.messagingService.send("showDialog", {
text: this.i18nService.t("desktopIntegrationDisabledDesc"),
title: this.i18nService.t("desktopIntegrationDisabledTitle"),
confirmText: this.i18nService.t("ok"),
type: "error",
});
}
this.sharedSecret = null;
@ -162,11 +173,11 @@ export class NativeMessagingBackground {
}
showWrongUserDialog() {
this.messagingService.send('showDialog', {
text: this.i18nService.t('nativeMessagingWrongUserDesc'),
title: this.i18nService.t('nativeMessagingWrongUserTitle'),
confirmText: this.i18nService.t('ok'),
type: 'error',
this.messagingService.send("showDialog", {
text: this.i18nService.t("nativeMessagingWrongUserDesc"),
title: this.i18nService.t("nativeMessagingWrongUserTitle"),
confirmText: this.i18nService.t("ok"),
type: "error",
});
}
@ -210,11 +221,11 @@ export class NativeMessagingBackground {
this.privateKey = null;
this.connected = false;
this.messagingService.send('showDialog', {
text: this.i18nService.t('nativeMessagingInvalidEncryptionDesc'),
title: this.i18nService.t('nativeMessagingInvalidEncryptionTitle'),
confirmText: this.i18nService.t('ok'),
type: 'error',
this.messagingService.send("showDialog", {
text: this.i18nService.t("nativeMessagingInvalidEncryptionDesc"),
title: this.i18nService.t("nativeMessagingInvalidEncryptionTitle"),
confirmText: this.i18nService.t("ok"),
type: "error",
});
}
}
@ -227,35 +238,35 @@ export class NativeMessagingBackground {
if (Math.abs(message.timestamp - Date.now()) > MessageValidTimeout) {
// tslint:disable-next-line
console.error('NativeMessage is to old, ignoring.');
console.error("NativeMessage is to old, ignoring.");
return;
}
switch (message.command) {
case 'biometricUnlock':
case "biometricUnlock":
await this.storageService.remove(ConstantsService.biometricAwaitingAcceptance);
if (message.response === 'not enabled') {
this.messagingService.send('showDialog', {
text: this.i18nService.t('biometricsNotEnabledDesc'),
title: this.i18nService.t('biometricsNotEnabledTitle'),
confirmText: this.i18nService.t('ok'),
type: 'error',
if (message.response === "not enabled") {
this.messagingService.send("showDialog", {
text: this.i18nService.t("biometricsNotEnabledDesc"),
title: this.i18nService.t("biometricsNotEnabledTitle"),
confirmText: this.i18nService.t("ok"),
type: "error",
});
break;
} else if (message.response === 'not supported') {
this.messagingService.send('showDialog', {
text: this.i18nService.t('biometricsNotSupportedDesc'),
title: this.i18nService.t('biometricsNotSupportedTitle'),
confirmText: this.i18nService.t('ok'),
type: 'error',
} else if (message.response === "not supported") {
this.messagingService.send("showDialog", {
text: this.i18nService.t("biometricsNotSupportedDesc"),
title: this.i18nService.t("biometricsNotSupportedTitle"),
confirmText: this.i18nService.t("ok"),
type: "error",
});
break;
}
const enabled = await this.storageService.get(ConstantsService.biometricUnlockKey);
if (enabled === null || enabled === false) {
if (message.response === 'unlocked') {
if (message.response === "unlocked") {
await this.storageService.save(ConstantsService.biometricUnlockKey, true);
}
break;
@ -266,15 +277,17 @@ export class NativeMessagingBackground {
break;
}
if (message.response === 'unlocked') {
await this.cryptoService.setKey(new SymmetricCryptoKey(Utils.fromB64ToArray(message.keyB64).buffer));
if (message.response === "unlocked") {
await this.cryptoService.setKey(
new SymmetricCryptoKey(Utils.fromB64ToArray(message.keyB64).buffer)
);
// Verify key is correct by attempting to decrypt a secret
try {
await this.cryptoService.getFingerprint(await this.userService.getUserId());
} catch (e) {
// tslint:disable-next-line
console.error('Unable to verify key:', e);
console.error("Unable to verify key:", e);
await this.cryptoService.clearKey();
this.showWrongUserDialog();
@ -283,12 +296,12 @@ export class NativeMessagingBackground {
}
this.vaultTimeoutService.biometricLocked = false;
this.runtimeBackground.processMessage({command: 'unlocked'}, null, null);
this.runtimeBackground.processMessage({ command: "unlocked" }, null, null);
}
break;
default:
// tslint:disable-next-line
console.error('NativeMessage, got unknown command: ', message.command);
console.error("NativeMessage, got unknown command: ", message.command);
}
if (this.resolver) {
@ -302,12 +315,12 @@ export class NativeMessagingBackground {
this.privateKey = privateKey;
this.sendUnencrypted({
command: 'setupEncryption',
command: "setupEncryption",
publicKey: Utils.fromBufferToB64(publicKey),
userId: await this.userService.getUserId(),
});
return new Promise((resolve, reject) => this.secureSetupResolve = resolve);
return new Promise((resolve, reject) => (this.secureSetupResolve = resolve));
}
private async sendUnencrypted(message: any) {
@ -321,13 +334,17 @@ export class NativeMessagingBackground {
}
private async showFingerprintDialog() {
const fingerprint = (await this.cryptoService.getFingerprint(await this.userService.getUserId(), this.publicKey)).join(' ');
const fingerprint = (
await this.cryptoService.getFingerprint(await this.userService.getUserId(), this.publicKey)
).join(" ");
this.messagingService.send('showDialog', {
html: `${this.i18nService.t('desktopIntegrationVerificationText')}<br><br><strong>${fingerprint}</strong>`,
title: this.i18nService.t('desktopSyncVerificationTitle'),
confirmText: this.i18nService.t('ok'),
type: 'warning',
this.messagingService.send("showDialog", {
html: `${this.i18nService.t(
"desktopIntegrationVerificationText"
)}<br><br><strong>${fingerprint}</strong>`,
title: this.i18nService.t("desktopSyncVerificationTitle"),
confirmText: this.i18nService.t("ok"),
type: "warning",
});
}
}

209
src/background/notification.background.ts
View File

@ -1,108 +1,119 @@
import { CipherType } from 'jslib-common/enums/cipherType';
import { CipherType } from "jslib-common/enums/cipherType";
import { CipherView } from 'jslib-common/models/view/cipherView';
import { LoginUriView } from 'jslib-common/models/view/loginUriView';
import { LoginView } from 'jslib-common/models/view/loginView';
import { CipherView } from "jslib-common/models/view/cipherView";
import { LoginUriView } from "jslib-common/models/view/loginUriView";
import { LoginView } from "jslib-common/models/view/loginView";
import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { FolderService } from 'jslib-common/abstractions/folder.service';
import { PolicyService } from 'jslib-common/abstractions/policy.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
import { CipherService } from "jslib-common/abstractions/cipher.service";
import { FolderService } from "jslib-common/abstractions/folder.service";
import { PolicyService } from "jslib-common/abstractions/policy.service";
import { StorageService } from "jslib-common/abstractions/storage.service";
import { UserService } from "jslib-common/abstractions/user.service";
import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
import { ConstantsService } from 'jslib-common/services/constants.service';
import { ConstantsService } from "jslib-common/services/constants.service";
import { AutofillService } from '../services/abstractions/autofill.service';
import { AutofillService } from "../services/abstractions/autofill.service";
import { BrowserApi } from '../browser/browserApi';
import { BrowserApi } from "../browser/browserApi";
import MainBackground from './main.background';
import MainBackground from "./main.background";
import { Utils } from 'jslib-common/misc/utils';
import { Utils } from "jslib-common/misc/utils";
import { PolicyType } from 'jslib-common/enums/policyType';
import { PolicyType } from "jslib-common/enums/policyType";
import AddChangePasswordQueueMessage from './models/addChangePasswordQueueMessage';
import AddLoginQueueMessage from './models/addLoginQueueMessage';
import AddLoginRuntimeMessage from './models/addLoginRuntimeMessage';
import ChangePasswordRuntimeMessage from './models/changePasswordRuntimeMessage';
import LockedVaultPendingNotificationsItem from './models/lockedVaultPendingNotificationsItem';
import { NotificationQueueMessageType } from './models/notificationQueueMessageType';
import AddChangePasswordQueueMessage from "./models/addChangePasswordQueueMessage";
import AddLoginQueueMessage from "./models/addLoginQueueMessage";
import AddLoginRuntimeMessage from "./models/addLoginRuntimeMessage";
import ChangePasswordRuntimeMessage from "./models/changePasswordRuntimeMessage";
import LockedVaultPendingNotificationsItem from "./models/lockedVaultPendingNotificationsItem";
import { NotificationQueueMessageType } from "./models/notificationQueueMessageType";
export default class NotificationBackground {
private notificationQueue: (AddLoginQueueMessage | AddChangePasswordQueueMessage)[] = [];
constructor(private main: MainBackground, private autofillService: AutofillService,
private cipherService: CipherService, private storageService: StorageService,
private vaultTimeoutService: VaultTimeoutService, private policyService: PolicyService,
private folderService: FolderService, private userService: UserService) {
}
constructor(
private main: MainBackground,
private autofillService: AutofillService,
private cipherService: CipherService,
private storageService: StorageService,
private vaultTimeoutService: VaultTimeoutService,
private policyService: PolicyService,
private folderService: FolderService,
private userService: UserService
) {}
async init() {
if (chrome.runtime == null) {
return;
}
BrowserApi.messageListener('notification.background', async (msg: any, sender: chrome.runtime.MessageSender) => {
BrowserApi.messageListener(
"notification.background",
async (msg: any, sender: chrome.runtime.MessageSender) => {
await this.processMessage(msg, sender);
});
}
);
this.cleanupNotificationQueue();
}
async processMessage(msg: any, sender: chrome.runtime.MessageSender) {
switch (msg.command) {
case 'unlockCompleted':
if (msg.data.target !== 'notification.background') {
case "unlockCompleted":
if (msg.data.target !== "notification.background") {
return;
}
await this.processMessage(msg.data.commandToRetry.msg, msg.data.commandToRetry.sender);
break;
case 'bgGetDataForTab':
case "bgGetDataForTab":
await this.getDataForTab(sender.tab, msg.responseCommand);
break;
case 'bgCloseNotificationBar':
await BrowserApi.tabSendMessageData(sender.tab, 'closeNotificationBar');
case "bgCloseNotificationBar":
await BrowserApi.tabSendMessageData(sender.tab, "closeNotificationBar");
break;
case 'bgAdjustNotificationBar':
await BrowserApi.tabSendMessageData(sender.tab, 'adjustNotificationBar', msg.data);
case "bgAdjustNotificationBar":
await BrowserApi.tabSendMessageData(sender.tab, "adjustNotificationBar", msg.data);
break;
case 'bgAddLogin':
case "bgAddLogin":
await this.addLogin(msg.login, sender.tab);
break;
case 'bgChangedPassword':
case "bgChangedPassword":
await this.changedPassword(msg.data, sender.tab);
break;
case 'bgAddClose':
case 'bgChangeClose':
case "bgAddClose":
case "bgChangeClose":
this.removeTabFromNotificationQueue(sender.tab);
break;
case 'bgAddSave':
case 'bgChangeSave':
case "bgAddSave":
case "bgChangeSave":
if (await this.vaultTimeoutService.isLocked()) {
const retryMessage: LockedVaultPendingNotificationsItem = {
commandToRetry: {
msg: msg,
sender: sender,
},
target: 'notification.background',
target: "notification.background",
};
await BrowserApi.tabSendMessageData(sender.tab, 'addToLockedVaultPendingNotifications', retryMessage);
await BrowserApi.tabSendMessageData(sender.tab, 'promptForLogin');
await BrowserApi.tabSendMessageData(
sender.tab,
"addToLockedVaultPendingNotifications",
retryMessage
);
await BrowserApi.tabSendMessageData(sender.tab, "promptForLogin");
return;
}
await this.saveOrUpdateCredentials(sender.tab, msg.folder);
break;
case 'bgNeverSave':
case "bgNeverSave":
await this.saveNever(sender.tab);
break;
case 'collectPageDetailsResponse':
case "collectPageDetailsResponse":
switch (msg.sender) {
case 'notificationBar':
case "notificationBar":
const forms = this.autofillService.getFormsWithPasswordFields(msg.details);
await BrowserApi.tabSendMessageData(msg.tab, 'notificationBarPageDetails', {
await BrowserApi.tabSendMessageData(msg.tab, "notificationBarPageDetails", {
details: msg.details,
forms: forms,
});
@ -152,20 +163,23 @@ export default class NotificationBackground {
}
for (let i = 0; i < this.notificationQueue.length; i++) {
if (this.notificationQueue[i].tabId !== tab.id || this.notificationQueue[i].domain !== tabDomain) {
if (
this.notificationQueue[i].tabId !== tab.id ||
this.notificationQueue[i].domain !== tabDomain
) {
continue;
}
if (this.notificationQueue[i].type === NotificationQueueMessageType.addLogin) {
BrowserApi.tabSendMessageData(tab, 'openNotificationBar', {
type: 'add',
BrowserApi.tabSendMessageData(tab, "openNotificationBar", {
type: "add",
typeData: {
isVaultLocked: this.notificationQueue[i].wasVaultLocked,
},
});
} else if (this.notificationQueue[i].type === NotificationQueueMessageType.changePassword) {
BrowserApi.tabSendMessageData(tab, 'openNotificationBar', {
type: 'change',
BrowserApi.tabSendMessageData(tab, "openNotificationBar", {
type: "change",
typeData: {
isVaultLocked: this.notificationQueue[i].wasVaultLocked,
},
@ -184,7 +198,7 @@ export default class NotificationBackground {
}
private async addLogin(loginInfo: AddLoginRuntimeMessage, tab: chrome.tabs.Tab) {
if (!await this.userService.isAuthenticated()) {
if (!(await this.userService.isAuthenticated())) {
return;
}
@ -198,13 +212,15 @@ export default class NotificationBackground {
normalizedUsername = normalizedUsername.toLowerCase();
}
const disabledAddLogin = await this.storageService.get<boolean>(ConstantsService.disableAddLoginNotificationKey);
const disabledAddLogin = await this.storageService.get<boolean>(
ConstantsService.disableAddLoginNotificationKey
);
if (await this.vaultTimeoutService.isLocked()) {
if (disabledAddLogin) {
return;
}
if (!await this.allowPersonalOwnership()) {
if (!(await this.allowPersonalOwnership())) {
return;
}
@ -213,22 +229,26 @@ export default class NotificationBackground {
}
const ciphers = await this.cipherService.getAllDecryptedForUrl(loginInfo.url);
const usernameMatches = ciphers.filter(c =>
c.login.username != null && c.login.username.toLowerCase() === normalizedUsername);
const usernameMatches = ciphers.filter(
(c) => c.login.username != null && c.login.username.toLowerCase() === normalizedUsername
);
if (usernameMatches.length === 0) {
if (disabledAddLogin) {
return;
}
if (!await this.allowPersonalOwnership()) {
if (!(await this.allowPersonalOwnership())) {
return;
}
this.pushAddLoginToQueue(loginDomain, loginInfo, tab);
} else if (usernameMatches.length === 1 && usernameMatches[0].login.password !== loginInfo.password) {
} else if (
usernameMatches.length === 1 &&
usernameMatches[0].login.password !== loginInfo.password
) {
const disabledChangePassword = await this.storageService.get<boolean>(
ConstantsService.disableChangedPasswordNotificationKey);
ConstantsService.disableChangedPasswordNotificationKey
);
if (disabledChangePassword) {
return;
}
@ -236,7 +256,12 @@ export default class NotificationBackground {
}
}
private async pushAddLoginToQueue(loginDomain: string, loginInfo: AddLoginRuntimeMessage, tab: chrome.tabs.Tab, isVaultLocked: boolean = false) {
private async pushAddLoginToQueue(
loginDomain: string,
loginInfo: AddLoginRuntimeMessage,
tab: chrome.tabs.Tab,
isVaultLocked: boolean = false
) {
// remove any old messages for this tab
this.removeTabFromNotificationQueue(tab);
const message: AddLoginQueueMessage = {
@ -246,7 +271,7 @@ export default class NotificationBackground {
domain: loginDomain,
uri: loginInfo.url,
tabId: tab.id,
expires: new Date((new Date()).getTime() + 5 * 60000), // 5 minutes
expires: new Date(new Date().getTime() + 5 * 60000), // 5 minutes
wasVaultLocked: isVaultLocked,
};
this.notificationQueue.push(message);
@ -267,7 +292,9 @@ export default class NotificationBackground {
let id: string = null;
const ciphers = await this.cipherService.getAllDecryptedForUrl(changeData.url);
if (changeData.currentPassword != null) {
const passwordMatches = ciphers.filter(c => c.login.password === changeData.currentPassword);
const passwordMatches = ciphers.filter(
(c) => c.login.password === changeData.currentPassword
);
if (passwordMatches.length === 1) {
id = passwordMatches[0].id;
}
@ -279,7 +306,13 @@ export default class NotificationBackground {
}
}
private async pushChangePasswordToQueue(cipherId: string, loginDomain: string, newPassword: string, tab: chrome.tabs.Tab, isVaultLocked: boolean = false) {
private async pushChangePasswordToQueue(
cipherId: string,
loginDomain: string,
newPassword: string,
tab: chrome.tabs.Tab,
isVaultLocked: boolean = false
) {
// remove any old messages for this tab
this.removeTabFromNotificationQueue(tab);
const message: AddChangePasswordQueueMessage = {
@ -288,7 +321,7 @@ export default class NotificationBackground {
newPassword: newPassword,
domain: loginDomain,
tabId: tab.id,
expires: new Date((new Date()).getTime() + 5 * 60000), // 5 minutes
expires: new Date(new Date().getTime() + 5 * 60000), // 5 minutes
wasVaultLocked: isVaultLocked,
};
this.notificationQueue.push(message);
@ -298,8 +331,11 @@ export default class NotificationBackground {
private async saveOrUpdateCredentials(tab: chrome.tabs.Tab, folderId?: string) {
for (let i = this.notificationQueue.length - 1; i >= 0; i--) {
const queueMessage = this.notificationQueue[i];
if (queueMessage.tabId !== tab.id ||
(queueMessage.type !== NotificationQueueMessageType.addLogin && queueMessage.type !== NotificationQueueMessageType.changePassword)) {
if (
queueMessage.tabId !== tab.id ||
(queueMessage.type !== NotificationQueueMessageType.addLogin &&
queueMessage.type !== NotificationQueueMessageType.changePassword)
) {
continue;
}
@ -309,10 +345,10 @@ export default class NotificationBackground {
}
this.notificationQueue.splice(i, 1);
BrowserApi.tabSendMessageData(tab, 'closeNotificationBar');
BrowserApi.tabSendMessageData(tab, "closeNotificationBar");
if (queueMessage.type === NotificationQueueMessageType.changePassword) {
const message = (queueMessage as AddChangePasswordQueueMessage);
const message = queueMessage as AddChangePasswordQueueMessage;
const cipher = await this.getDecryptedCipherById(message.cipherId);
if (cipher == null) {
return;
@ -326,11 +362,15 @@ export default class NotificationBackground {
}
// If the vault was locked, check if a cipher needs updating instead of creating a new one
if (queueMessage.type === NotificationQueueMessageType.addLogin && queueMessage.wasVaultLocked === true) {
const message = (queueMessage as AddLoginQueueMessage);
if (
queueMessage.type === NotificationQueueMessageType.addLogin &&
queueMessage.wasVaultLocked === true
) {
const message = queueMessage as AddLoginQueueMessage;
const ciphers = await this.cipherService.getAllDecryptedForUrl(message.uri);
const usernameMatches = ciphers.filter(c => c.login.username != null &&
c.login.username.toLowerCase() === message.username);
const usernameMatches = ciphers.filter(
(c) => c.login.username != null && c.login.username.toLowerCase() === message.username
);
if (usernameMatches.length >= 1) {
await this.updateCipher(usernameMatches[0], message.password);
@ -351,13 +391,13 @@ export default class NotificationBackground {
loginModel.password = queueMessage.password;
const model = new CipherView();
model.name = Utils.getHostname(queueMessage.uri) || queueMessage.domain;
model.name = model.name.replace(/^www\./, '');
model.name = model.name.replace(/^www\./, "");
model.type = CipherType.Login;
model.login = loginModel;
if (!Utils.isNullOrWhitespace(folderId)) {
const folders = await this.folderService.getAllDecrypted();
if (folders.some(x => x.id === folderId)) {
if (folders.some((x) => x.id === folderId)) {
model.folderId = folderId;
}
}
@ -385,7 +425,10 @@ export default class NotificationBackground {
private async saveNever(tab: chrome.tabs.Tab) {
for (let i = this.notificationQueue.length - 1; i >= 0; i--) {
const queueMessage = this.notificationQueue[i];
if (queueMessage.tabId !== tab.id || queueMessage.type !== NotificationQueueMessageType.addLogin) {
if (
queueMessage.tabId !== tab.id ||
queueMessage.type !== NotificationQueueMessageType.addLogin
) {
continue;
}
@ -395,7 +438,7 @@ export default class NotificationBackground {
}
this.notificationQueue.splice(i, 1);
BrowserApi.tabSendMessageData(tab, 'closeNotificationBar');
BrowserApi.tabSendMessageData(tab, "closeNotificationBar");
const hostname = Utils.getHostname(tab.url);
await this.cipherService.saveNeverDomain(hostname);
@ -404,7 +447,7 @@ export default class NotificationBackground {
private async getDataForTab(tab: chrome.tabs.Tab, responseCommand: string) {
const responseData: any = {};
if (responseCommand === 'notificationBarGetFoldersList') {
if (responseCommand === "notificationBarGetFoldersList") {
responseData.folders = await this.folderService.getAllDecrypted();
}
@ -412,6 +455,6 @@ export default class NotificationBackground {
}
private async allowPersonalOwnership(): Promise<boolean> {
return !await this.policyService.policyAppliesToUser(PolicyType.PersonalOwnership);
return !(await this.policyService.policyAppliesToUser(PolicyType.PersonalOwnership));
}
}

167
src/background/runtime.background.ts
View File

@ -1,21 +1,21 @@
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { LogService } from 'jslib-common/abstractions/log.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { NotificationsService } from 'jslib-common/abstractions/notifications.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { SystemService } from 'jslib-common/abstractions/system.service';
import { ConstantsService } from 'jslib-common/services/constants.service';
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { LogService } from "jslib-common/abstractions/log.service";
import { MessagingService } from "jslib-common/abstractions/messaging.service";
import { NotificationsService } from "jslib-common/abstractions/notifications.service";
import { StorageService } from "jslib-common/abstractions/storage.service";
import { SystemService } from "jslib-common/abstractions/system.service";
import { ConstantsService } from "jslib-common/services/constants.service";
import { AutofillService } from '../services/abstractions/autofill.service';
import BrowserPlatformUtilsService from '../services/browserPlatformUtils.service';
import { AutofillService } from "../services/abstractions/autofill.service";
import BrowserPlatformUtilsService from "../services/browserPlatformUtils.service";
import { BrowserApi } from '../browser/browserApi';
import { BrowserApi } from "../browser/browserApi";
import MainBackground from './main.background';
import MainBackground from "./main.background";
import { Utils } from 'jslib-common/misc/utils';
import LockedVaultPendingNotificationsItem from './models/lockedVaultPendingNotificationsItem';
import { Utils } from "jslib-common/misc/utils";
import LockedVaultPendingNotificationsItem from "./models/lockedVaultPendingNotificationsItem";
export default class RuntimeBackground {
private autofillTimeout: any;
@ -23,13 +23,18 @@ export default class RuntimeBackground {
private onInstalledReason: string = null;
private lockedVaultPendingNotifications: LockedVaultPendingNotificationsItem[] = [];
constructor(private main: MainBackground, private autofillService: AutofillService,
constructor(
private main: MainBackground,
private autofillService: AutofillService,
private platformUtilsService: BrowserPlatformUtilsService,
private storageService: StorageService, private i18nService: I18nService,
private notificationsService: NotificationsService, private systemService: SystemService,
private environmentService: EnvironmentService, private messagingService: MessagingService,
private logService: LogService) {
private storageService: StorageService,
private i18nService: I18nService,
private notificationsService: NotificationsService,
private systemService: SystemService,
private environmentService: EnvironmentService,
private messagingService: MessagingService,
private logService: LogService
) {
// onInstalled listener must be wired up before anything else, so we do it in the ctor
chrome.runtime.onInstalled.addListener((details: any) => {
this.onInstalledReason = details.reason;
@ -42,15 +47,18 @@ export default class RuntimeBackground {
}
await this.checkOnInstalled();
BrowserApi.messageListener('runtime.background', async (msg: any, sender: chrome.runtime.MessageSender, sendResponse: any) => {
BrowserApi.messageListener(
"runtime.background",
async (msg: any, sender: chrome.runtime.MessageSender, sendResponse: any) => {
await this.processMessage(msg, sender, sendResponse);
});
}
);
}
async processMessage(msg: any, sender: any, sendResponse: any) {
switch (msg.command) {
case 'loggedIn':
case 'unlocked':
case "loggedIn":
case "unlocked":
let item: LockedVaultPendingNotificationsItem;
if (this.lockedVaultPendingNotifications.length > 0) {
@ -64,59 +72,68 @@ export default class RuntimeBackground {
await this.main.setIcon();
await this.main.refreshBadgeAndMenu(false);
this.notificationsService.updateConnection(msg.command === 'unlocked');
this.notificationsService.updateConnection(msg.command === "unlocked");
this.systemService.cancelProcessReload();
if (item) {
await BrowserApi.tabSendMessageData(item.commandToRetry.sender.tab, 'unlockCompleted', item);
await BrowserApi.tabSendMessageData(
item.commandToRetry.sender.tab,
"unlockCompleted",
item
);
}
break;
case 'addToLockedVaultPendingNotifications':
case "addToLockedVaultPendingNotifications":
this.lockedVaultPendingNotifications.push(msg.data);
break;
case 'logout':
case "logout":
await this.main.logout(msg.expired);
break;
case 'syncCompleted':
case "syncCompleted":
if (msg.successfully) {
setTimeout(async () => await this.main.refreshBadgeAndMenu(), 2000);
}
break;
case 'openPopup':
case "openPopup":
await this.main.openPopup();
break;
case 'promptForLogin':
await BrowserApi.createNewTab('popup/index.html?uilocation=popout', true, true);
case "promptForLogin":
await BrowserApi.createNewTab("popup/index.html?uilocation=popout", true, true);
break;
case 'showDialogResolve':
case "showDialogResolve":
this.platformUtilsService.resolveDialogPromise(msg.dialogId, msg.confirmed);
break;
case 'bgCollectPageDetails':
case "bgCollectPageDetails":
await this.main.collectPageDetailsForContentScript(sender.tab, msg.sender, sender.frameId);
break;
case 'bgUpdateContextMenu':
case 'editedCipher':
case 'addedCipher':
case 'deletedCipher':
case "bgUpdateContextMenu":
case "editedCipher":
case "addedCipher":
case "deletedCipher":
await this.main.refreshBadgeAndMenu();
break;
case 'bgReseedStorage':
case "bgReseedStorage":
await this.main.reseedStorage();
break;
case 'collectPageDetailsResponse':
case "collectPageDetailsResponse":
switch (msg.sender) {
case 'autofiller':
case 'autofill_cmd':
const totpCode = await this.autofillService.doAutoFillActiveTab([{
case "autofiller":
case "autofill_cmd":
const totpCode = await this.autofillService.doAutoFillActiveTab(
[
{
frameId: sender.frameId,
tab: msg.tab,
details: msg.details,
}], msg.sender === 'autofill_cmd');
},
],
msg.sender === "autofill_cmd"
);
if (totpCode != null) {
this.platformUtilsService.copyToClipboard(totpCode, { window: window });
}
break;
case 'contextMenu':
case "contextMenu":
clearTimeout(this.autofillTimeout);
this.pageDetailsToAutoFill.push({
frameId: sender.frameId,
@ -129,7 +146,7 @@ export default class RuntimeBackground {
break;
}
break;
case 'authResult':
case "authResult":
const vaultUrl = this.environmentService.getWebVaultUrl();
if (msg.referrer == null || Utils.getHostname(vaultUrl) !== msg.referrer) {
@ -137,37 +154,45 @@ export default class RuntimeBackground {
}
try {
BrowserApi.createNewTab('popup/index.html?uilocation=popout#/sso?code=' +
encodeURIComponent(msg.code) + '&state=' + encodeURIComponent(msg.state));
}
catch {
this.logService.error('Unable to open sso popout tab');
BrowserApi.createNewTab(
"popup/index.html?uilocation=popout#/sso?code=" +
encodeURIComponent(msg.code) +
"&state=" +
encodeURIComponent(msg.state)
);
} catch {
this.logService.error("Unable to open sso popout tab");
}
break;
case 'webAuthnResult':
case "webAuthnResult":
const vaultUrl2 = this.environmentService.getWebVaultUrl();
if (msg.referrer == null || Utils.getHostname(vaultUrl2) !== msg.referrer) {
return;
}
const params = `webAuthnResponse=${encodeURIComponent(msg.data)};` +
const params =
`webAuthnResponse=${encodeURIComponent(msg.data)};` +
`remember=${encodeURIComponent(msg.remember)}`;
BrowserApi.createNewTab(`popup/index.html?uilocation=popout#/2fa;${params}`, undefined, false);
BrowserApi.createNewTab(
`popup/index.html?uilocation=popout#/2fa;${params}`,
undefined,
false
);
break;
case 'reloadPopup':
this.messagingService.send('reloadPopup');
case "reloadPopup":
this.messagingService.send("reloadPopup");
break;
case 'emailVerificationRequired':
this.messagingService.send('showDialog', {
dialogId: 'emailVerificationRequired',
title: this.i18nService.t('emailVerificationRequired'),
text: this.i18nService.t('emailVerificationRequiredDesc'),
confirmText: this.i18nService.t('ok'),
type: 'info',
case "emailVerificationRequired":
this.messagingService.send("showDialog", {
dialogId: "emailVerificationRequired",
title: this.i18nService.t("emailVerificationRequired"),
text: this.i18nService.t("emailVerificationRequiredDesc"),
confirmText: this.i18nService.t("ok"),
type: "info",
});
break;
case 'getClickedElementResponse':
case "getClickedElementResponse":
this.platformUtilsService.copyToClipboard(msg.identifier, { window: window });
default:
break;
@ -193,8 +218,8 @@ export default class RuntimeBackground {
private async checkOnInstalled() {
setTimeout(async () => {
if (this.onInstalledReason != null) {
if (this.onInstalledReason === 'install') {
BrowserApi.createNewTab('https://bitwarden.com/browser-start/');
if (this.onInstalledReason === "install") {
BrowserApi.createNewTab("https://bitwarden.com/browser-start/");
await this.setDefaultSettings();
}
@ -205,15 +230,19 @@ export default class RuntimeBackground {
private async setDefaultSettings() {
// Default timeout option to "on restart".
const currentVaultTimeout = await this.storageService.get<number>(ConstantsService.vaultTimeoutKey);
const currentVaultTimeout = await this.storageService.get<number>(
ConstantsService.vaultTimeoutKey
);
if (currentVaultTimeout == null) {
await this.storageService.save(ConstantsService.vaultTimeoutKey, -1);
}
// Default action to "lock".
const currentVaultTimeoutAction = await this.storageService.get<string>(ConstantsService.vaultTimeoutActionKey);
const currentVaultTimeoutAction = await this.storageService.get<string>(
ConstantsService.vaultTimeoutActionKey
);
if (currentVaultTimeoutAction == null) {
await this.storageService.save(ConstantsService.vaultTimeoutActionKey, 'lock');
await this.storageService.save(ConstantsService.vaultTimeoutActionKey, "lock");
}
}
}

28
src/background/tabs.background.ts
View File

@ -1,9 +1,11 @@
import MainBackground from './main.background';
import NotificationBackground from './notification.background';
import MainBackground from "./main.background";
import NotificationBackground from "./notification.background";
export default class TabsBackground {
constructor(private main: MainBackground, private notificationBackground: NotificationBackground) {
}
constructor(
private main: MainBackground,
private notificationBackground: NotificationBackground
) {}
async init() {
if (!chrome.tabs) {
@ -12,8 +14,8 @@ export default class TabsBackground {
chrome.tabs.onActivated.addListener(async (activeInfo: chrome.tabs.TabActiveInfo) => {
await this.main.refreshBadgeAndMenu();
this.main.messagingService.send('tabActivated');
this.main.messagingService.send('tabChanged');
this.main.messagingService.send("tabActivated");
this.main.messagingService.send("tabChanged");
});
chrome.tabs.onReplaced.addListener(async (addedTabId: number, removedTabId: number) => {
@ -23,19 +25,21 @@ export default class TabsBackground {
this.main.onReplacedRan = true;
await this.notificationBackground.checkNotificationQueue();
await this.main.refreshBadgeAndMenu();
this.main.messagingService.send('tabReplaced');
this.main.messagingService.send('tabChanged');
this.main.messagingService.send("tabReplaced");
this.main.messagingService.send("tabChanged");
});
chrome.tabs.onUpdated.addListener(async (tabId: number, changeInfo: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab) => {
chrome.tabs.onUpdated.addListener(
async (tabId: number, changeInfo: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab) => {
if (this.main.onUpdatedRan) {
return;
}
this.main.onUpdatedRan = true;
await this.notificationBackground.checkNotificationQueue(tab);
await this.main.refreshBadgeAndMenu();
this.main.messagingService.send('tabUpdated');
this.main.messagingService.send('tabChanged');
});
this.main.messagingService.send("tabUpdated");
this.main.messagingService.send("tabChanged");
}
);
}
}

40
src/background/webRequest.background.ts
View File

@ -1,16 +1,19 @@
import { CipherService } from 'jslib-common/abstractions/cipher.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
import { CipherService } from "jslib-common/abstractions/cipher.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
import { UriMatchType } from 'jslib-common/enums/uriMatchType';
import { UriMatchType } from "jslib-common/enums/uriMatchType";
export default class WebRequestBackground {
private pendingAuthRequests: any[] = [];
private webRequest: any;
private isFirefox: boolean;
constructor(platformUtilsService: PlatformUtilsService, private cipherService: CipherService,
private vaultTimeoutService: VaultTimeoutService) {
constructor(
platformUtilsService: PlatformUtilsService,
private cipherService: CipherService,
private vaultTimeoutService: VaultTimeoutService
) {
this.webRequest = (window as any).chrome.webRequest;
this.isFirefox = platformUtilsService.isFirefox();
}
@ -20,7 +23,8 @@ export default class WebRequestBackground {
return;
}
this.webRequest.onAuthRequired.addListener(async (details: any, callback: any) => {
this.webRequest.onAuthRequired.addListener(
async (details: any, callback: any) => {
if (!details.url || this.pendingAuthRequests.indexOf(details.requestId) !== -1) {
if (callback) {
callback();
@ -37,12 +41,20 @@ export default class WebRequestBackground {
} else {
await this.resolveAuthCredentials(details.url, callback, callback);
}
}, { urls: ['http://*/*', 'https://*/*'] }, [this.isFirefox ? 'blocking' : 'asyncBlocking']);
},
{ urls: ["http://*/*", "https://*/*"] },
[this.isFirefox ? "blocking" : "asyncBlocking"]
);
this.webRequest.onCompleted.addListener(
(details: any) => this.completeAuthRequest(details), { urls: ['http://*/*'] });
this.webRequest.onCompleted.addListener((details: any) => this.completeAuthRequest(details), {
urls: ["http://*/*"],
});
this.webRequest.onErrorOccurred.addListener(
(details: any) => this.completeAuthRequest(details), { urls: ['http://*/*'] });
(details: any) => this.completeAuthRequest(details),
{
urls: ["http://*/*"],
}
);
}
private async resolveAuthCredentials(domain: string, success: Function, error: Function) {
@ -52,7 +64,11 @@ export default class WebRequestBackground {
}
try {
const ciphers = await this.cipherService.getAllDecryptedForUrl(domain, null, UriMatchType.Host);
const ciphers = await this.cipherService.getAllDecryptedForUrl(
domain,
null,
UriMatchType.Host
);
if (ciphers == null || ciphers.length !== 1) {
error();
return;

6
src/background/windows.background.ts
View File

@ -1,4 +1,4 @@
import MainBackground from './main.background';
import MainBackground from "./main.background";
export default class WindowsBackground {
private windows: any;
@ -18,8 +18,8 @@ export default class WindowsBackground {
}
await this.main.refreshBadgeAndMenu();
this.main.messagingService.send('windowFocused');
this.main.messagingService.send('windowChanged');
this.main.messagingService.send("windowFocused");
this.main.messagingService.send("windowChanged");
});
}
}

72
src/browser/browserApi.ts
View File

@ -1,15 +1,16 @@
import { SafariApp } from './safariApp';
import { SafariApp } from "./safariApp";
import { Utils } from 'jslib-common/misc/utils';
import { Utils } from "jslib-common/misc/utils";
export class BrowserApi {
static isWebExtensionsApi: boolean = (typeof browser !== 'undefined');
static isSafariApi: boolean = navigator.userAgent.indexOf(' Safari/') !== -1 &&
navigator.userAgent.indexOf(' Chrome/') === -1 &&
navigator.userAgent.indexOf(' Chromium/') === -1;
static isChromeApi: boolean = !BrowserApi.isSafariApi && (typeof chrome !== 'undefined');
static isFirefoxOnAndroid: boolean = navigator.userAgent.indexOf('Firefox/') !== -1 &&
navigator.userAgent.indexOf('Android') !== -1;
static isWebExtensionsApi: boolean = typeof browser !== "undefined";
static isSafariApi: boolean =
navigator.userAgent.indexOf(" Safari/") !== -1 &&
navigator.userAgent.indexOf(" Chrome/") === -1 &&
navigator.userAgent.indexOf(" Chromium/") === -1;
static isChromeApi: boolean = !BrowserApi.isSafariApi && typeof chrome !== "undefined";
static isFirefoxOnAndroid: boolean =
navigator.userAgent.indexOf("Firefox/") !== -1 && navigator.userAgent.indexOf("Android") !== -1;
static async getTabFromCurrentWindowId(): Promise<chrome.tabs.Tab> | null {
return await BrowserApi.tabsQueryFirst({
@ -32,7 +33,7 @@ export class BrowserApi {
}
static async tabsQuery(options: chrome.tabs.QueryInfo): Promise<chrome.tabs.Tab[]> {
return new Promise(resolve => {
return new Promise((resolve) => {
chrome.tabs.query(options, (tabs: any[]) => {
resolve(tabs);
});
@ -48,7 +49,11 @@ export class BrowserApi {
return null;
}
static tabSendMessageData(tab: chrome.tabs.Tab, command: string, data: any = null): Promise<any[]> {
static tabSendMessageData(
tab: chrome.tabs.Tab,
command: string,
data: any = null
): Promise<any[]> {
const obj: any = {
command: command,
};
@ -60,12 +65,16 @@ export class BrowserApi {
return BrowserApi.tabSendMessage(tab, obj);
}
static async tabSendMessage(tab: chrome.tabs.Tab, obj: any, options: chrome.tabs.MessageSendOptions = null): Promise<any> {
static async tabSendMessage(
tab: chrome.tabs.Tab,
obj: any,
options: chrome.tabs.MessageSendOptions = null
): Promise<any> {
if (!tab || !tab.id) {
return;
}
return new Promise<void>(resolve => {
return new Promise<void>((resolve) => {
chrome.tabs.sendMessage(tab.id, obj, options, () => {
if (chrome.runtime.lastError) {
// Some error happened
@ -84,24 +93,29 @@ export class BrowserApi {
}
static async isPopupOpen(): Promise<boolean> {
return Promise.resolve(chrome.extension.getViews({ type: 'popup' }).length > 0);
return Promise.resolve(chrome.extension.getViews({ type: "popup" }).length > 0);
}
static createNewTab(url: string, extensionPage: boolean = false, active: boolean = true) {
chrome.tabs.create({ url: url, active: active });
}
static messageListener(name: string, callback: (message: any, sender: chrome.runtime.MessageSender, response: any) => void) {
chrome.runtime.onMessage.addListener((msg: any, sender: chrome.runtime.MessageSender, response: any) => {
static messageListener(
name: string,
callback: (message: any, sender: chrome.runtime.MessageSender, response: any) => void
) {
chrome.runtime.onMessage.addListener(
(msg: any, sender: chrome.runtime.MessageSender, response: any) => {
callback(msg, sender, response);
});
}
);
}
static async closeLoginTab() {
const tabs = await BrowserApi.tabsQuery({
active: true,
title: 'Bitwarden',
windowType: 'normal',
title: "Bitwarden",
windowType: "normal",
currentWindow: true,
});
@ -132,22 +146,26 @@ export class BrowserApi {
if (BrowserApi.isSafariApi) {
const type = blobOptions != null ? blobOptions.type : null;
let data: string = null;
if (type === 'text/plain' && typeof (blobData) === 'string') {
if (type === "text/plain" && typeof blobData === "string") {
data = blobData;
} else {
data = Utils.fromBufferToB64(blobData);
}
SafariApp.sendMessageToApp('downloadFile', JSON.stringify({
SafariApp.sendMessageToApp(
"downloadFile",
JSON.stringify({
blobData: data,
blobOptions: blobOptions,
fileName: fileName,
}), true);
}),
true
);
} else {
const blob = new Blob([blobData], blobOptions);
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
const a = win.document.createElement('a');
const a = win.document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = fileName;
win.document.body.appendChild(a);
@ -158,7 +176,7 @@ export class BrowserApi {
}
static gaFilter() {
return process.env.ENV !== 'production';
return process.env.ENV !== "production";
}
static getUILanguage(win: Window) {
@ -175,7 +193,9 @@ export class BrowserApi {
static reloadOpenWindows() {
const views = chrome.extension.getViews() as Window[];
views.filter(w => w.location.href != null).forEach(w => {
views
.filter((w) => w.location.href != null)
.forEach((w) => {
w.location.reload();
});
}
@ -201,7 +221,7 @@ export class BrowserApi {
if (BrowserApi.isWebExtensionsApi) {
return browser.runtime.getPlatformInfo();
}
return new Promise(resolve => {
return new Promise((resolve) => {
chrome.runtime.getPlatformInfo(resolve);
});
}

17
src/browser/safariApp.ts
View File

@ -1,21 +1,26 @@
import { BrowserApi } from './browserApi';
import { BrowserApi } from "./browserApi";
export class SafariApp {
static sendMessageToApp(command: string, data: any = null, resolveNow = false): Promise<any> {
if (!BrowserApi.isSafariApi) {
return Promise.resolve(null);
}
return new Promise(resolve => {
return new Promise((resolve) => {
const now = new Date();
const messageId = now.getTime().toString() + '_' + Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
(browser as any).runtime.sendNativeMessage('com.bitwarden.desktop', {
const messageId =
now.getTime().toString() + "_" + Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
(browser as any).runtime.sendNativeMessage(
"com.bitwarden.desktop",
{
id: messageId,
command: command,
data: data,
responseData: null,
}, (response: any) => {
},
(response: any) => {
resolve(response);
});
}
);
});
}
}

8
src/content/autofill.css
View File

@ -1,6 +1,6 @@
@-webkit-keyframes bitwardenfill {
0% {
-webkit-transform: scale(1.0, 1.0);
-webkit-transform: scale(1, 1);
}
50% {
@ -8,13 +8,13 @@
}
100% {
-webkit-transform: scale(1.0, 1.0);
-webkit-transform: scale(1, 1);
}
}
@-moz-keyframes bitwardenfill {
0% {
transform: scale(1.0, 1.0);
transform: scale(1, 1);
}
50% {
@ -22,7 +22,7 @@
}
100% {
transform: scale(1.0, 1.0);
transform: scale(1, 1);
}
}

10
src/content/autofiller.ts
View File

@ -1,16 +1,16 @@
document.addEventListener('DOMContentLoaded', event => {
document.addEventListener("DOMContentLoaded", (event) => {
let pageHref: string = null;
let filledThisHref = false;
let delayFillTimeout: number;
const enabledKey = 'enableAutoFillOnPageLoad';
const enabledKey = "enableAutoFillOnPageLoad";
chrome.storage.local.get(enabledKey, (obj: any) => {
if (obj != null && obj[enabledKey] === true) {
setInterval(() => doFillIfNeeded(), 500);
}
});
chrome.runtime.onMessage.addListener((msg: any, sender: any, sendResponse: Function) => {
if (msg.command === 'fillForm' && pageHref === msg.url) {
if (msg.command === "fillForm" && pageHref === msg.url) {
filledThisHref = true;
}
});
@ -33,8 +33,8 @@ document.addEventListener('DOMContentLoaded', event => {
pageHref = window.location.href;
const msg: any = {
command: 'bgCollectPageDetails',
sender: 'autofiller',
command: "bgCollectPageDetails",
sender: "autofiller",
};
chrome.runtime.sendMessage(msg);

30
src/content/contextMenuHandler.ts
View File

@ -1,8 +1,8 @@
const inputTags = ['input', 'textarea', 'select'];
const labelTags = ['label', 'span'];
const attributes = ['id', 'name', 'label-aria', 'placeholder'];
const invalidElement = chrome.i18n.getMessage('copyCustomFieldNameInvalidElement');
const noUniqueIdentifier = chrome.i18n.getMessage('copyCustomFieldNameNotUnique');
const inputTags = ["input", "textarea", "select"];
const labelTags = ["label", "span"];
const attributes = ["id", "name", "label-aria", "placeholder"];
const invalidElement = chrome.i18n.getMessage("copyCustomFieldNameInvalidElement");
const noUniqueIdentifier = chrome.i18n.getMessage("copyCustomFieldNameNotUnique");
let clickedEl: HTMLElement = null;
@ -18,10 +18,10 @@ function getClickedElementIdentifier() {
// Try to identify the input element (which may not be the clicked element)
if (labelTags.includes(clickedTag)) {
let inputId = null;
if (clickedTag === 'label') {
inputId = clickedEl.getAttribute('for');
if (clickedTag === "label") {
inputId = clickedEl.getAttribute("for");
} else {
inputId = clickedEl.closest('label')?.getAttribute('for');
inputId = clickedEl.closest("label")?.getAttribute("for");
}
inputEl = document.getElementById(inputId);
@ -35,7 +35,7 @@ function getClickedElementIdentifier() {
for (const attr of attributes) {
const attributeValue = inputEl.getAttribute(attr);
const selector = '[' + attr + '="' + attributeValue + '"]';
const selector = "[" + attr + '="' + attributeValue + '"]';
if (!isNullOrEmpty(attributeValue) && document.querySelectorAll(selector)?.length === 1) {
return attributeValue;
}
@ -44,22 +44,22 @@ function getClickedElementIdentifier() {
}
function isNullOrEmpty(s: string) {
return s == null || s === '';
return s == null || s === "";
}
// We only have access to the element that's been clicked when the context menu is first opened.
// Remember it for use later.
document.addEventListener('contextmenu', event => {
document.addEventListener("contextmenu", (event) => {
clickedEl = event.target as HTMLElement;
});
// Runs when the 'Copy Custom Field Name' context menu item is actually clicked.
chrome.runtime.onMessage.addListener(event => {
if (event.command === 'getClickedElement') {
chrome.runtime.onMessage.addListener((event) => {
if (event.command === "getClickedElement") {
const identifier = getClickedElementIdentifier();
chrome.runtime.sendMessage({
command: 'getClickedElementResponse',
sender: 'contextMenuHandler',
command: "getClickedElementResponse",
sender: "contextMenuHandler",
identifier: identifier,
});
}

23
src/content/message_handler.ts
View File

@ -1,8 +1,9 @@
window.addEventListener('message', event => {
if (event.source !== window)
return;
window.addEventListener(
"message",
(event) => {
if (event.source !== window) return;
if (event.data.command && (event.data.command === 'authResult')) {
if (event.data.command && event.data.command === "authResult") {
chrome.runtime.sendMessage({
command: event.data.command,
code: event.data.code,
@ -11,7 +12,7 @@ window.addEventListener('message', event => {
});
}
if (event.data.command && (event.data.command === 'webAuthnResult')) {
if (event.data.command && event.data.command === "webAuthnResult") {
chrome.runtime.sendMessage({
command: event.data.command,
data: event.data.data,
@ -19,11 +20,17 @@ window.addEventListener('message', event => {
referrer: event.source.location.hostname,
});
}
}, false);
},
false
);
const forwardCommands = ['promptForLogin', 'addToLockedVaultPendingNotifications', 'unlockCompleted'];
const forwardCommands = [
"promptForLogin",
"addToLockedVaultPendingNotifications",
"unlockCompleted",
];
chrome.runtime.onMessage.addListener(event => {
chrome.runtime.onMessage.addListener((event) => {
if (forwardCommands.includes(event.command)) {
chrome.runtime.sendMessage(event);
}

253
src/content/notificationBar.ts
View File

@ -1,8 +1,8 @@
import AddLoginRuntimeMessage from 'src/background/models/addLoginRuntimeMessage';
import ChangePasswordRuntimeMessage from 'src/background/models/changePasswordRuntimeMessage';
import AddLoginRuntimeMessage from "src/background/models/addLoginRuntimeMessage";
import ChangePasswordRuntimeMessage from "src/background/models/changePasswordRuntimeMessage";
document.addEventListener('DOMContentLoaded', event => {
if (window.location.hostname.indexOf('vault.bitwarden.com') > -1) {
document.addEventListener("DOMContentLoaded", (event) => {
if (window.location.hostname.indexOf("vault.bitwarden.com") > -1) {
return;
}
@ -11,29 +11,55 @@ document.addEventListener('DOMContentLoaded', event => {
let barType: string = null;
let pageHref: string = null;
let observer: MutationObserver = null;
const observeIgnoredElements = new Set(['a', 'i', 'b', 'strong', 'span', 'code', 'br', 'img', 'small', 'em', 'hr']);
const observeIgnoredElements = new Set([
"a",
"i",
"b",
"strong",
"span",
"code",
"br",
"img",
"small",
"em",
"hr",
]);
let domObservationCollectTimeout: number = null;
let collectIfNeededTimeout: number = null;
let observeDomTimeout: number = null;
const inIframe = isInIframe();
const cancelButtonNames = new Set(['cancel', 'close', 'back']);
const logInButtonNames = new Set(['log in', 'sign in', 'login', 'go', 'submit', 'continue', 'next']);
const changePasswordButtonNames = new Set(['save password', 'update password', 'change password', 'change']);
const changePasswordButtonContainsNames = new Set(['pass', 'change', 'contras', 'senha']);
const cancelButtonNames = new Set(["cancel", "close", "back"]);
const logInButtonNames = new Set([
"log in",
"sign in",
"login",
"go",
"submit",
"continue",
"next",
]);
const changePasswordButtonNames = new Set([
"save password",
"update password",
"change password",
"change",
]);
const changePasswordButtonContainsNames = new Set(["pass", "change", "contras", "senha"]);
let disabledAddLoginNotification = false;
let disabledChangedPasswordNotification = false;
chrome.storage.local.get('neverDomains', (ndObj: any) => {
chrome.storage.local.get("neverDomains", (ndObj: any) => {
const domains = ndObj.neverDomains;
if (domains != null && domains.hasOwnProperty(window.location.hostname)) {
return;
}
chrome.storage.local.get('disableAddLoginNotification', (disAddObj: any) => {
disabledAddLoginNotification = disAddObj != null && disAddObj.disableAddLoginNotification === true;
chrome.storage.local.get('disableChangedPasswordNotification', (disChangedObj: any) => {
disabledChangedPasswordNotification = disChangedObj != null &&
disChangedObj.disableChangedPasswordNotification === true;
chrome.storage.local.get("disableAddLoginNotification", (disAddObj: any) => {
disabledAddLoginNotification =
disAddObj != null && disAddObj.disableAddLoginNotification === true;
chrome.storage.local.get("disableChangedPasswordNotification", (disChangedObj: any) => {
disabledChangedPasswordNotification =
disChangedObj != null && disChangedObj.disableChangedPasswordNotification === true;
if (!disabledAddLoginNotification || !disabledChangedPasswordNotification) {
collectIfNeededWithTimeout();
}
@ -46,28 +72,28 @@ document.addEventListener('DOMContentLoaded', event => {
});
function processMessages(msg: any, sendResponse: Function) {
if (msg.command === 'openNotificationBar') {
if (msg.command === "openNotificationBar") {
if (inIframe) {
return;
}
closeExistingAndOpenBar(msg.data.type, msg.data.typeData);
sendResponse();
return true;
} else if (msg.command === 'closeNotificationBar') {
} else if (msg.command === "closeNotificationBar") {
if (inIframe) {
return;
}
closeBar(true);
sendResponse();
return true;
} else if (msg.command === 'adjustNotificationBar') {
} else if (msg.command === "adjustNotificationBar") {
if (inIframe) {
return;
}
adjustBar(msg.data);
sendResponse();
return true;
} else if (msg.command === 'notificationBarPageDetails') {
} else if (msg.command === "notificationBarPageDetails") {
pageDetails.push(msg.data.details);
watchForms(msg.data.forms);
sendResponse();
@ -84,9 +110,9 @@ document.addEventListener('DOMContentLoaded', event => {
}
function observeDom() {
const bodies = document.querySelectorAll('body');
const bodies = document.querySelectorAll("body");
if (bodies && bodies.length > 0) {
observer = new MutationObserver(mutations => {
observer = new MutationObserver((mutations) => {
if (mutations == null || mutations.length === 0 || pageHref !== window.location.href) {
return;
}
@ -105,18 +131,23 @@ document.addEventListener('DOMContentLoaded', event => {
}
const tagName = addedNode.tagName != null ? addedNode.tagName.toLowerCase() : null;
if (tagName != null && tagName === 'form' &&
(addedNode.dataset == null || !addedNode.dataset.bitwardenWatching)) {
if (
tagName != null &&
tagName === "form" &&
(addedNode.dataset == null || !addedNode.dataset.bitwardenWatching)
) {
doCollect = true;
break;
}
if ((tagName != null && observeIgnoredElements.has(tagName)) ||
addedNode.querySelectorAll == null) {
if (
(tagName != null && observeIgnoredElements.has(tagName)) ||
addedNode.querySelectorAll == null
) {
continue;
}
const forms = addedNode.querySelectorAll('form:not([data-bitwarden-watching])');
const forms = addedNode.querySelectorAll("form:not([data-bitwarden-watching])");
if (forms != null && forms.length > 0) {
doCollect = true;
break;
@ -172,8 +203,8 @@ document.addEventListener('DOMContentLoaded', event => {
function collect() {
sendPlatformMessage({
command: 'bgCollectPageDetails',
sender: 'notificationBar',
command: "bgCollectPageDetails",
sender: "notificationBar",
});
}
@ -185,16 +216,16 @@ document.addEventListener('DOMContentLoaded', event => {
forms.forEach((f: any) => {
const formId: string = f.form != null ? f.form.htmlID : null;
let formEl: HTMLFormElement = null;
if (formId != null && formId !== '') {
if (formId != null && formId !== "") {
formEl = document.getElementById(formId) as HTMLFormElement;
}
if (formEl == null) {
const index = parseInt(f.form.opid.split('__')[2], null);
formEl = document.getElementsByTagName('form')[index];
const index = parseInt(f.form.opid.split("__")[2], null);
formEl = document.getElementsByTagName("form")[index];
}
if (formEl != null && formEl.dataset.bitwardenWatching !== '1') {
if (formEl != null && formEl.dataset.bitwardenWatching !== "1") {
const formDataObj: any = {
data: f,
formEl: formEl,
@ -205,26 +236,31 @@ document.addEventListener('DOMContentLoaded', event => {
locateFields(formDataObj);
formData.push(formDataObj);
listen(formEl);
formEl.dataset.bitwardenWatching = '1';
formEl.dataset.bitwardenWatching = "1";
}
});
}
function listen(form: HTMLFormElement) {
form.removeEventListener('submit', formSubmitted, false);
form.addEventListener('submit', formSubmitted, false);
form.removeEventListener("submit", formSubmitted, false);
form.addEventListener("submit", formSubmitted, false);
const submitButton = getSubmitButton(form, logInButtonNames);
if (submitButton != null) {
submitButton.removeEventListener('click', formSubmitted, false);
submitButton.addEventListener('click', formSubmitted, false);
submitButton.removeEventListener("click", formSubmitted, false);
submitButton.addEventListener("click", formSubmitted, false);
}
}
function locateFields(formDataObj: any) {
const inputs = Array.from(document.getElementsByTagName('input'));
const inputs = Array.from(document.getElementsByTagName("input"));
formDataObj.usernameEl = locateField(formDataObj.formEl, formDataObj.data.username, inputs);
if (formDataObj.usernameEl != null && formDataObj.data.password != null) {
formDataObj.passwordEl = locatePassword(formDataObj.formEl, formDataObj.data.password, inputs, true);
formDataObj.passwordEl = locatePassword(
formDataObj.formEl,
formDataObj.data.password,
inputs,
true
);
} else if (formDataObj.data.passwords != null) {
formDataObj.passwordEls = [];
formDataObj.data.passwords.forEach((pData: any) => {
@ -239,10 +275,14 @@ document.addEventListener('DOMContentLoaded', event => {
}
}
function locatePassword(form: HTMLFormElement, passwordData: any, inputs: HTMLInputElement[],
doLastFallback: boolean) {
function locatePassword(
form: HTMLFormElement,
passwordData: any,
inputs: HTMLInputElement[],
doLastFallback: boolean
) {
let el = locateField(form, passwordData, inputs);
if (el != null && el.type !== 'password') {
if (el != null && el.type !== "password") {
el = null;
}
if (doLastFallback && el == null) {
@ -256,14 +296,14 @@ document.addEventListener('DOMContentLoaded', event => {
return;
}
let el: HTMLInputElement = null;
if (fieldData.htmlID != null && fieldData.htmlID !== '') {
if (fieldData.htmlID != null && fieldData.htmlID !== "") {
try {
el = form.querySelector('#' + fieldData.htmlID);
el = form.querySelector("#" + fieldData.htmlID);
} catch {
// Ignore error, we perform fallbacks below.
}
}
if (el == null && fieldData.htmlName != null && fieldData.htmlName !== '') {
if (el == null && fieldData.htmlName != null && fieldData.htmlName !== "") {
el = form.querySelector('input[name="' + fieldData.htmlName + '"]');
}
if (el == null && fieldData.elementNumber != null) {
@ -274,12 +314,12 @@ document.addEventListener('DOMContentLoaded', event => {
function formSubmitted(e: Event) {
let form: HTMLFormElement = null;
if (e.type === 'click') {
form = (e.target as HTMLElement).closest('form');
if (e.type === "click") {
form = (e.target as HTMLElement).closest("form");
if (form == null) {
const parentModal = (e.target as HTMLElement).closest('div.modal');
const parentModal = (e.target as HTMLElement).closest("div.modal");
if (parentModal != null) {
const modalForms = parentModal.querySelectorAll('form');
const modalForms = parentModal.querySelectorAll("form");
if (modalForms.length === 1) {
form = modalForms[0];
}
@ -289,7 +329,7 @@ document.addEventListener('DOMContentLoaded', event => {
form = e.target as HTMLFormElement;
}
if (form == null || form.dataset.bitwardenProcessed === '1') {
if (form == null || form.dataset.bitwardenProcessed === "1") {
return;
}
@ -305,11 +345,15 @@ document.addEventListener('DOMContentLoaded', event => {
url: document.URL,
};
if (login.username != null && login.username !== '' &&
login.password != null && login.password !== '') {
if (
login.username != null &&
login.username !== "" &&
login.password != null &&
login.password !== ""
) {
processedForm(form);
sendPlatformMessage({
command: 'bgAddLogin',
command: "bgAddLogin",
login: login,
});
break;
@ -317,7 +361,7 @@ document.addEventListener('DOMContentLoaded', event => {
}
if (!disabledChangedPasswordNotification && formData[i].passwordEls != null) {
const passwords: string[] = formData[i].passwordEls
.filter((el: HTMLInputElement) => el.value != null && el.value !== '')
.filter((el: HTMLInputElement) => el.value != null && el.value !== "")
.map((el: HTMLInputElement) => el.value);
let curPass: string = null;
@ -337,8 +381,9 @@ document.addEventListener('DOMContentLoaded', event => {
curPass = null;
} else {
const buttonText = getButtonText(getSubmitButton(form, changePasswordButtonNames));
const matches = Array.from(changePasswordButtonContainsNames)
.filter(n => buttonText.indexOf(n) > -1);
const matches = Array.from(changePasswordButtonContainsNames).filter(
(n) => buttonText.indexOf(n) > -1
);
if (matches.length > 0) {
curPass = passwords[0];
newPass = passwords[1];
@ -346,7 +391,7 @@ document.addEventListener('DOMContentLoaded', event => {
}
}
if (newPass != null && curPass != null || (newPassOnly && newPass != null)) {
if ((newPass != null && curPass != null) || (newPassOnly && newPass != null)) {
processedForm(form);
const changePasswordRuntimeMessage: ChangePasswordRuntimeMessage = {
@ -355,7 +400,7 @@ document.addEventListener('DOMContentLoaded', event => {
url: document.URL,
};
sendPlatformMessage({
command: 'bgChangedPassword',
command: "bgChangedPassword",
data: changePasswordRuntimeMessage,
});
break;
@ -369,12 +414,13 @@ document.addEventListener('DOMContentLoaded', event => {
return null;
}
const wrappingElIsForm = wrappingEl.tagName.toLowerCase() === 'form';
const wrappingElIsForm = wrappingEl.tagName.toLowerCase() === "form";
let submitButton = wrappingEl.querySelector('input[type="submit"], input[type="image"], ' +
'button[type="submit"]') as HTMLElement;
let submitButton = wrappingEl.querySelector(
'input[type="submit"], input[type="image"], ' + 'button[type="submit"]'
) as HTMLElement;
if (submitButton == null && wrappingElIsForm) {
submitButton = wrappingEl.querySelector('button:not([type])');
submitButton = wrappingEl.querySelector("button:not([type])");
if (submitButton != null) {
const buttonText = getButtonText(submitButton);
if (buttonText != null && cancelButtonNames.has(buttonText.trim().toLowerCase())) {
@ -383,18 +429,24 @@ document.addEventListener('DOMContentLoaded', event => {
}
}
if (submitButton == null) {
const possibleSubmitButtons = Array.from(wrappingEl.querySelectorAll('a, span, button[type="button"], ' +
'input[type="button"], button:not([type])')) as HTMLElement[];
const possibleSubmitButtons = Array.from(
wrappingEl.querySelectorAll(
'a, span, button[type="button"], ' + 'input[type="button"], button:not([type])'
)
) as HTMLElement[];
let typelessButton: HTMLElement = null;
possibleSubmitButtons.forEach(button => {
possibleSubmitButtons.forEach((button) => {
if (submitButton != null || button == null || button.tagName == null) {
return;
}
const buttonText = getButtonText(button);
if (buttonText != null) {
if (typelessButton != null && button.tagName.toLowerCase() === 'button' &&
button.getAttribute('type') == null &&
!cancelButtonNames.has(buttonText.trim().toLowerCase())) {
if (
typelessButton != null &&
button.tagName.toLowerCase() === "button" &&
button.getAttribute("type") == null &&
!cancelButtonNames.has(buttonText.trim().toLowerCase())
) {
typelessButton = button;
} else if (buttonNames.has(buttonText.trim().toLowerCase())) {
submitButton = button;
@ -407,9 +459,9 @@ document.addEventListener('DOMContentLoaded', event => {
}
if (submitButton == null && wrappingElIsForm) {
// Maybe it's in a modal?
const parentModal = wrappingEl.closest('div.modal') as HTMLElement;
const parentModal = wrappingEl.closest("div.modal") as HTMLElement;
if (parentModal != null) {
const modalForms = parentModal.querySelectorAll('form');
const modalForms = parentModal.querySelectorAll("form");
if (modalForms.length === 1) {
submitButton = getSubmitButton(parentModal, buttonNames);
}
@ -420,7 +472,7 @@ document.addEventListener('DOMContentLoaded', event => {
function getButtonText(button: HTMLElement) {
let buttonText: string = null;
if (button.tagName.toLowerCase() === 'input') {
if (button.tagName.toLowerCase() === "input") {
buttonText = (button as HTMLInputElement).value;
} else {
buttonText = button.innerText;
@ -429,26 +481,26 @@ document.addEventListener('DOMContentLoaded', event => {
}
function processedForm(form: HTMLFormElement) {
form.dataset.bitwardenProcessed = '1';
form.dataset.bitwardenProcessed = "1";
window.setTimeout(() => {
form.dataset.bitwardenProcessed = '0';
form.dataset.bitwardenProcessed = "0";
}, 500);
}
function closeExistingAndOpenBar(type: string, typeData: any) {
let barPage = 'notification/bar.html';
let barPage = "notification/bar.html";
switch (type) {
case 'add':
barPage = barPage + '?add=1&isVaultLocked=' + typeData.isVaultLocked;
case "add":
barPage = barPage + "?add=1&isVaultLocked=" + typeData.isVaultLocked;
break;
case 'change':
barPage = barPage + '?change=1&isVaultLocked=' + typeData.isVaultLocked;
case "change":
barPage = barPage + "?change=1&isVaultLocked=" + typeData.isVaultLocked;
break;
default:
break;
}
const frame = document.getElementById('bit-notification-bar-iframe') as HTMLIFrameElement;
const frame = document.getElementById("bit-notification-bar-iframe") as HTMLIFrameElement;
if (frame != null && frame.src.indexOf(barPage) >= 0) {
return;
}
@ -466,34 +518,35 @@ document.addEventListener('DOMContentLoaded', event => {
const barPageUrl: string = chrome.extension.getURL(barPage);
const iframe = document.createElement('iframe');
iframe.style.cssText = 'height: 42px; width: 100%; border: 0; min-height: initial;';
iframe.id = 'bit-notification-bar-iframe';
const iframe = document.createElement("iframe");
iframe.style.cssText = "height: 42px; width: 100%; border: 0; min-height: initial;";
iframe.id = "bit-notification-bar-iframe";
iframe.src = barPageUrl;
const frameDiv = document.createElement('div');
frameDiv.setAttribute('aria-live', 'polite');
frameDiv.id = 'bit-notification-bar';
frameDiv.style.cssText = 'height: 42px; width: 100%; top: 0; left: 0; padding: 0; position: fixed; ' +
'z-index: 2147483647; visibility: visible;';
const frameDiv = document.createElement("div");
frameDiv.setAttribute("aria-live", "polite");
frameDiv.id = "bit-notification-bar";
frameDiv.style.cssText =
"height: 42px; width: 100%; top: 0; left: 0; padding: 0; position: fixed; " +
"z-index: 2147483647; visibility: visible;";
frameDiv.appendChild(iframe);
document.body.appendChild(frameDiv);
(iframe.contentWindow.location as any) = barPageUrl;
const spacer = document.createElement('div');
spacer.id = 'bit-notification-bar-spacer';
spacer.style.cssText = 'height: 42px;';
const spacer = document.createElement("div");
spacer.id = "bit-notification-bar-spacer";
spacer.style.cssText = "height: 42px;";
document.body.insertBefore(spacer, document.body.firstChild);
}
function closeBar(explicitClose: boolean) {
const barEl = document.getElementById('bit-notification-bar');
const barEl = document.getElementById("bit-notification-bar");
if (barEl != null) {
barEl.parentElement.removeChild(barEl);
}
const spacerEl = document.getElementById('bit-notification-bar-spacer');
const spacerEl = document.getElementById("bit-notification-bar-spacer");
if (spacerEl) {
spacerEl.parentElement.removeChild(spacerEl);
}
@ -503,14 +556,14 @@ document.addEventListener('DOMContentLoaded', event => {
}
switch (barType) {
case 'add':
case "add":
sendPlatformMessage({
command: 'bgAddClose',
command: "bgAddClose",
});
break;
case 'change':
case "change":
sendPlatformMessage({
command: 'bgChangeClose',
command: "bgChangeClose",
});
break;
default:
@ -520,10 +573,10 @@ document.addEventListener('DOMContentLoaded', event => {
function adjustBar(data: any) {
if (data != null && data.height !== 42) {
const newHeight = data.height + 'px';
doHeightAdjustment('bit-notification-bar-iframe', newHeight);
doHeightAdjustment('bit-notification-bar', newHeight);
doHeightAdjustment('bit-notification-bar-spacer', newHeight);
const newHeight = data.height + "px";
doHeightAdjustment("bit-notification-bar-iframe", newHeight);
doHeightAdjustment("bit-notification-bar", newHeight);
doHeightAdjustment("bit-notification-bar-spacer", newHeight);
}
}

32
src/content/shortcuts.ts
View File

@ -1,9 +1,11 @@
import * as Mousetrap from 'mousetrap';
import * as Mousetrap from "mousetrap";
document.addEventListener('DOMContentLoaded', event => {
const isSafari = (typeof safari !== 'undefined') && navigator.userAgent.indexOf(' Safari/') !== -1 &&
navigator.userAgent.indexOf('Chrome') === -1;
const isVivaldi = !isSafari && navigator.userAgent.indexOf(' Vivaldi/') !== -1;
document.addEventListener("DOMContentLoaded", (event) => {
const isSafari =
typeof safari !== "undefined" &&
navigator.userAgent.indexOf(" Safari/") !== -1 &&
navigator.userAgent.indexOf("Chrome") === -1;
const isVivaldi = !isSafari && navigator.userAgent.indexOf(" Vivaldi/") !== -1;
if (!isSafari && !isVivaldi) {
return;
@ -17,31 +19,31 @@ document.addEventListener('DOMContentLoaded', event => {
return false;
};
let autofillCommand = ['mod+shift+l'];
let autofillCommand = ["mod+shift+l"];
if (isSafari) {
autofillCommand = ['mod+\\', 'mod+8', 'mod+shift+p'];
autofillCommand = ["mod+\\", "mod+8", "mod+shift+p"];
}
Mousetrap.bind(autofillCommand, () => {
sendMessage('autofill_login');
sendMessage("autofill_login");
});
if (isSafari) {
Mousetrap.bind('mod+shift+y', () => {
sendMessage('open_popup');
Mousetrap.bind("mod+shift+y", () => {
sendMessage("open_popup");
});
Mousetrap.bind('mod+shift+s', () => {
sendMessage('lock_vault');
Mousetrap.bind("mod+shift+s", () => {
sendMessage("lock_vault");
});
} else {
Mousetrap.bind('mod+shift+9', () => {
sendMessage('generate_password');
Mousetrap.bind("mod+shift+9", () => {
sendMessage("generate_password");
});
}
function sendMessage(shortcut: string) {
const msg: any = {
command: 'keyboardShortcutTriggered',
command: "keyboardShortcutTriggered",
shortcut: shortcut,
};

40
src/manifest.json
View File

@ -23,47 +23,25 @@
"content/notificationBar.js",
"content/contextMenuHandler.js"
],
"matches": [
"http://*/*",
"https://*/*",
"file:///*"
],
"matches": ["http://*/*", "https://*/*", "file:///*"],
"run_at": "document_start"
},
{
"all_frames": false,
"js": [
"content/shortcuts.js"
],
"matches": [
"http://*/*",
"https://*/*",
"file:///*"
],
"js": ["content/shortcuts.js"],
"matches": ["http://*/*", "https://*/*", "file:///*"],
"run_at": "document_start"
},
{
"all_frames": false,
"js": [
"content/message_handler.js"
],
"matches": [
"http://*/*",
"https://*/*",
"file:///*"
],
"js": ["content/message_handler.js"],
"matches": ["http://*/*", "https://*/*", "file:///*"],
"run_at": "document_start"
},
{
"all_frames": true,
"css": [
"content/autofill.css"
],
"matches": [
"http://*/*",
"https://*/*",
"file:///*"
],
"css": ["content/autofill.css"],
"matches": ["http://*/*", "https://*/*", "file:///*"],
"run_at": "document_end"
}
],
@ -92,9 +70,7 @@
"webRequest",
"webRequestBlocking"
],
"optional_permissions": [
"nativeMessaging"
],
"optional_permissions": ["nativeMessaging"],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"commands": {
"_execute_browser_action": {

10
src/models/autofillField.ts
View File

@ -6,11 +6,11 @@ export default class AutofillField {
htmlID: string;
htmlName: string;
htmlClass: string;
'label-left': string;
'label-right': string;
'label-top': string;
'label-tag': string;
'label-aria': string;
"label-left": string;
"label-right": string;
"label-top": string;
"label-tag": string;
"label-aria": string;
placeholder: string;
type: string;
value: string;

6
src/models/autofillPageDetails.ts
View File

@ -1,5 +1,5 @@
import AutofillField from './autofillField';
import AutofillForm from './autofillForm';
import AutofillField from "./autofillField";
import AutofillForm from "./autofillForm";
export default class AutofillPageDetails {
documentUUID: string;
@ -7,7 +7,7 @@ export default class AutofillPageDetails {
url: string;
documentUrl: string;
tabUrl: string;
forms: { [id: string]: AutofillForm; };
forms: { [id: string]: AutofillForm };
fields: AutofillField[];
collectedTimestamp: number;
}

4
src/notification/bar.html
View File

@ -1,6 +1,5 @@
<!DOCTYPE html>
<html>
<head>
<title>Bitwarden</title>
<meta charset="utf-8" />
@ -20,7 +19,7 @@
</button>
</div>
</div>
<div id="templates" style="display: none;">
<div id="templates" style="display: none">
<div class="inner-wrapper" id="template-add">
<div class="add-text"></div>
<div class="add-buttons">
@ -37,5 +36,4 @@
</div>
</div>
</body>
</html>

113
src/notification/bar.js
View File

@ -1,108 +1,109 @@
require('./bar.scss');
require("./bar.scss");
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener("DOMContentLoaded", () => {
var i18n = {};
var lang = window.navigator.language;
i18n.appName = chrome.i18n.getMessage('appName');
i18n.close = chrome.i18n.getMessage('close');
i18n.never = chrome.i18n.getMessage('never');
i18n.folder = chrome.i18n.getMessage('folder');
i18n.notificationAddSave = chrome.i18n.getMessage('notificationAddSave');
i18n.notificationAddDesc = chrome.i18n.getMessage('notificationAddDesc');
i18n.notificationChangeSave = chrome.i18n.getMessage('notificationChangeSave');
i18n.notificationChangeDesc = chrome.i18n.getMessage('notificationChangeDesc');
i18n.appName = chrome.i18n.getMessage("appName");
i18n.close = chrome.i18n.getMessage("close");
i18n.never = chrome.i18n.getMessage("never");
i18n.folder = chrome.i18n.getMessage("folder");
i18n.notificationAddSave = chrome.i18n.getMessage("notificationAddSave");
i18n.notificationAddDesc = chrome.i18n.getMessage("notificationAddDesc");
i18n.notificationChangeSave = chrome.i18n.getMessage("notificationChangeSave");
i18n.notificationChangeDesc = chrome.i18n.getMessage("notificationChangeDesc");
lang = chrome.i18n.getUILanguage();
// delay 50ms so that we get proper body dimensions
setTimeout(load, 50);
function load() {
const isVaultLocked = getQueryVariable('isVaultLocked') == 'true';
document.getElementById('logo').src = isVaultLocked
? chrome.runtime.getURL('images/icon38_locked.png')
: chrome.runtime.getURL('images/icon38.png');
const isVaultLocked = getQueryVariable("isVaultLocked") == "true";
document.getElementById("logo").src = isVaultLocked
? chrome.runtime.getURL("images/icon38_locked.png")
: chrome.runtime.getURL("images/icon38.png");
document.getElementById('logo-link').title = i18n.appName;
document.getElementById("logo-link").title = i18n.appName;
var neverButton = document.querySelector('#template-add .never-save');
var neverButton = document.querySelector("#template-add .never-save");
neverButton.textContent = i18n.never;
var selectFolder = document.querySelector('#template-add .select-folder');
selectFolder.setAttribute('aria-label', i18n.folder);
selectFolder.setAttribute('isVaultLocked', isVaultLocked.toString());
var selectFolder = document.querySelector("#template-add .select-folder");
selectFolder.setAttribute("aria-label", i18n.folder);
selectFolder.setAttribute("isVaultLocked", isVaultLocked.toString());
var addButton = document.querySelector('#template-add .add-save');
var addButton = document.querySelector("#template-add .add-save");
addButton.textContent = i18n.notificationAddSave;
var changeButton = document.querySelector('#template-change .change-save');
var changeButton = document.querySelector("#template-change .change-save");
changeButton.textContent = i18n.notificationChangeSave;
var closeIcon = document.getElementById('close');
closeIcon.src = chrome.runtime.getURL('images/close.png');
var closeIcon = document.getElementById("close");
closeIcon.src = chrome.runtime.getURL("images/close.png");
closeIcon.alt = i18n.close;
var closeButton = document.getElementById('close-button')
var closeButton = document.getElementById("close-button");
closeButton.title = i18n.close;
closeButton.setAttribute('aria-label', i18n.close);
closeButton.setAttribute("aria-label", i18n.close);
document.querySelector('#template-add .add-text').textContent = i18n.notificationAddDesc;
document.querySelector('#template-change .change-text').textContent = i18n.notificationChangeDesc;
document.querySelector("#template-add .add-text").textContent = i18n.notificationAddDesc;
document.querySelector("#template-change .change-text").textContent =
i18n.notificationChangeDesc;
if (getQueryVariable('add')) {
setContent(document.getElementById('template-add'));
if (getQueryVariable("add")) {
setContent(document.getElementById("template-add"));
var addButton = document.querySelector('#template-add-clone .add-save'),
neverButton = document.querySelector('#template-add-clone .never-save');
var addButton = document.querySelector("#template-add-clone .add-save"),
neverButton = document.querySelector("#template-add-clone .never-save");
addButton.addEventListener('click', (e) => {
addButton.addEventListener("click", (e) => {
e.preventDefault();
const folderId = document.querySelector('#template-add-clone .select-folder').value;
const folderId = document.querySelector("#template-add-clone .select-folder").value;
const bgAddSaveMessage = {
command: 'bgAddSave',
command: "bgAddSave",
folder: folderId,
};
sendPlatformMessage(bgAddSaveMessage);
});
neverButton.addEventListener('click', (e) => {
neverButton.addEventListener("click", (e) => {
e.preventDefault();
sendPlatformMessage({
command: 'bgNeverSave'
command: "bgNeverSave",
});
});
if (!isVaultLocked) {
const responseFoldersCommand = 'notificationBarGetFoldersList';
const responseFoldersCommand = "notificationBarGetFoldersList";
chrome.runtime.onMessage.addListener((msg) => {
if (msg.command === responseFoldersCommand && msg.data) {
fillSelectorWithFolders(msg.data.folders);
}
});
sendPlatformMessage({
command: 'bgGetDataForTab',
responseCommand: responseFoldersCommand
command: "bgGetDataForTab",
responseCommand: responseFoldersCommand,
});
}
} else if (getQueryVariable('change')) {
setContent(document.getElementById('template-change'));
var changeButton = document.querySelector('#template-change-clone .change-save');
changeButton.addEventListener('click', (e) => {
} else if (getQueryVariable("change")) {
setContent(document.getElementById("template-change"));
var changeButton = document.querySelector("#template-change-clone .change-save");
changeButton.addEventListener("click", (e) => {
e.preventDefault();
const bgChangeSaveMessage = {
command: 'bgChangeSave'
command: "bgChangeSave",
};
sendPlatformMessage(bgChangeSaveMessage);
});
}
closeButton.addEventListener('click', (e) => {
closeButton.addEventListener("click", (e) => {
e.preventDefault();
sendPlatformMessage({
command: 'bgCloseNotificationBar'
command: "bgCloseNotificationBar",
});
});
@ -112,10 +113,10 @@ document.addEventListener('DOMContentLoaded', () => {
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
var pair = vars[i].split("=");
if (pair[0] === variable) {
return pair[1];
}
@ -125,13 +126,13 @@ document.addEventListener('DOMContentLoaded', () => {
}
function setContent(element) {
const content = document.getElementById('content');
const content = document.getElementById("content");
while (content.firstChild) {
content.removeChild(content.firstChild);
}
var newElement = element.cloneNode(true);
newElement.id = newElement.id + '-clone';
newElement.id = newElement.id + "-clone";
content.appendChild(newElement);
}
@ -140,20 +141,20 @@ document.addEventListener('DOMContentLoaded', () => {
}
function fillSelectorWithFolders(folders) {
const select = document.querySelector('#template-add-clone .select-folder');
select.appendChild(new Option(chrome.i18n.getMessage('selectFolder'), null, true));
const select = document.querySelector("#template-add-clone .select-folder");
select.appendChild(new Option(chrome.i18n.getMessage("selectFolder"), null, true));
folders.forEach((folder) => {
//Select "No Folder" (id=null) folder by default
select.appendChild(new Option(folder.name, folder.id || '', false));
select.appendChild(new Option(folder.name, folder.id || "", false));
});
}
function adjustHeight() {
sendPlatformMessage({
command: 'bgAdjustNotificationBar',
command: "bgAdjustNotificationBar",
data: {
height: document.querySelector('body').scrollHeight
}
height: document.querySelector("body").scrollHeight,
},
});
}
});

12
src/notification/bar.scss
View File

@ -24,7 +24,8 @@
grid-template-columns: auto max-content;
}
.outer-wrapper > *, .inner-wrapper > * {
.outer-wrapper > *,
.inner-wrapper > * {
align-self: center;
}
@ -50,7 +51,7 @@ img {
button:not(.link),
button:not(.neutral) {
background-color: #175DDC;
background-color: #175ddc;
padding: 5px 15px;
border-radius: 3px;
color: #ffffff;
@ -66,7 +67,7 @@ button.link,
button.neutral {
background: none;
padding: 5px 15px;
color: #175DDC;
color: #175ddc;
border: 0;
&:hover {
@ -77,12 +78,12 @@ button.neutral {
}
.select-folder[isVaultLocked="true"] {
display: none
display: none;
}
@media screen and (max-width: 768px) {
.select-folder {
display: none
display: none;
}
}
@ -91,4 +92,3 @@ button.neutral {
display: none;
}
}

85
src/popup/accounts/environment.component.html
View File

@ -1,14 +1,14 @@
<form #form (ngSubmit)="submit()">
<header>
<div class="left">
<a routerLink="/home">{{'close' | i18n}}</a>
<a routerLink="/home">{{ "close" | i18n }}</a>
</div>
<h1 class="center">
<span class="title">{{'appName' | i18n}}</span>
<span class="title">{{ "appName" | i18n }}</span>
</h1>
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading">
<span [hidden]="form.loading">{{'save' | i18n}}</span>
<span [hidden]="form.loading">{{ "save" | i18n }}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
@ -16,51 +16,88 @@
<content>
<div class="box">
<h2 class="box-header">
{{'selfHostedEnvironment' | i18n}}
{{ "selfHostedEnvironment" | i18n }}
</h2>
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="baseUrl">{{'baseUrl' | i18n}}</label>
<input id="baseUrl" type="text" name="BaseUrl" [(ngModel)]="baseUrl"
placeholder="ex. https://bitwarden.company.com" appInputVerbatim>
<label for="baseUrl">{{ "baseUrl" | i18n }}</label>
<input
id="baseUrl"
type="text"
name="BaseUrl"
[(ngModel)]="baseUrl"
placeholder="ex. https://bitwarden.company.com"
appInputVerbatim
/>
</div>
</div>
<div class="box-footer">
{{'selfHostedEnvironmentFooter' | i18n}}
{{ "selfHostedEnvironmentFooter" | i18n }}
</div>
</div>
<div class="box">
<h2 class="box-header">
{{'customEnvironment' | i18n}}
{{ "customEnvironment" | i18n }}
</h2>
<div class="box-content" [hidden]="!showCustom">
<div class="box-content-row" appBoxRow>
<label for="webVaultUrl">{{'webVaultUrl' | i18n}}</label>
<input id="webVaultUrl" type="text" name="WebVaultUrl" [(ngModel)]="webVaultUrl" inputmode="url"
appInputVerbatim>
<label for="webVaultUrl">{{ "webVaultUrl" | i18n }}</label>
<input
id="webVaultUrl"
type="text"
name="WebVaultUrl"
[(ngModel)]="webVaultUrl"
inputmode="url"
appInputVerbatim
/>
</div>
<div class="box-content-row" appBoxRow>
<label for="apiUrl">{{'apiUrl' | i18n}}</label>
<input id="apiUrl" type="text" name="ApiUrl" [(ngModel)]="apiUrl" inputmode="url" appInputVerbatim>
<label for="apiUrl">{{ "apiUrl" | i18n }}</label>
<input
id="apiUrl"
type="text"
name="ApiUrl"
[(ngModel)]="apiUrl"
inputmode="url"
appInputVerbatim
/>
</div>
<div class="box-content-row" appBoxRow>
<label for="identityUrl">{{'identityUrl' | i18n}}</label>
<input id="identityUrl" type="text" name="IdentityUrl" [(ngModel)]="identityUrl" inputmode="url"
appInputVerbatim>
<label for="identityUrl">{{ "identityUrl" | i18n }}</label>
<input
id="identityUrl"
type="text"
name="IdentityUrl"
[(ngModel)]="identityUrl"
inputmode="url"
appInputVerbatim
/>
</div>
<div class="box-content-row" appBoxRow>
<label for="notificationsUrl">{{'notificationsUrl' | i18n}}</label>
<input id="notificationsUrl" type="text" name="NotificationsUrl" inputmode="url"
[(ngModel)]="notificationsUrl" appInputVerbatim>
<label for="notificationsUrl">{{ "notificationsUrl" | i18n }}</label>
<input
id="notificationsUrl"
type="text"
name="NotificationsUrl"
inputmode="url"
[(ngModel)]="notificationsUrl"
appInputVerbatim
/>
</div>
<div class="box-content-row" appBoxRow>
<label for="iconsUrl">{{'iconsUrl' | i18n}}</label>
<input id="iconsUrl" type="text" name="IconsUrl" [(ngModel)]="iconsUrl" inputmode="url"
appInputVerbatim>
<label for="iconsUrl">{{ "iconsUrl" | i18n }}</label>
<input
id="iconsUrl"
type="text"
name="IconsUrl"
[(ngModel)]="iconsUrl"
inputmode="url"
appInputVerbatim
/>
</div>
</div>
<div class="box-footer" [hidden]="!showCustom">
{{'customEnvironmentFooter' | i18n}}
{{ "customEnvironmentFooter" | i18n }}
</div>
</div>
</content>

26
src/popup/accounts/environment.component.ts
View File

@ -1,25 +1,29 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { EnvironmentComponent as BaseEnvironmentComponent } from 'jslib-angular/components/environment.component';
import { EnvironmentComponent as BaseEnvironmentComponent } from "jslib-angular/components/environment.component";
@Component({
selector: 'app-environment',
templateUrl: 'environment.component.html',
selector: "app-environment",
templateUrl: "environment.component.html",
})
export class EnvironmentComponent extends BaseEnvironmentComponent {
constructor(platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
i18nService: I18nService, private router: Router) {
constructor(
platformUtilsService: PlatformUtilsService,
environmentService: EnvironmentService,
i18nService: I18nService,
private router: Router
) {
super(platformUtilsService, environmentService, i18nService);
this.showCustom = true;
}
saved() {
super.saved();
this.router.navigate(['']);
this.router.navigate([""]);
}
}

22
src/popup/accounts/hint.component.html
View File

@ -1,14 +1,14 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<header>
<div class="left">
<a routerLink="/login">{{'cancel' | i18n}}</a>
<a routerLink="/login">{{ "cancel" | i18n }}</a>
</div>
<h1 class="center">
<span class="title">{{'passwordHint' | i18n}}</span>
<span class="title">{{ "passwordHint" | i18n }}</span>
</h1>
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading">
<span [hidden]="form.loading">{{'submit' | i18n}}</span>
<span [hidden]="form.loading">{{ "submit" | i18n }}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
@ -17,13 +17,21 @@
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="email">{{'emailAddress' | i18n}}</label>
<input id="email" type="text" name="Email" [(ngModel)]="email" required appAutofocus
inputmode="email" appInputVerbatim="false">
<label for="email">{{ "emailAddress" | i18n }}</label>
<input
id="email"
type="text"
name="Email"
[(ngModel)]="email"
required
appAutofocus
inputmode="email"
appInputVerbatim="false"
/>
</div>
</div>
<div class="box-footer">
{{'enterEmailToGetHint' | i18n}}
{{ "enterEmailToGetHint" | i18n }}
</div>
</div>
</content>

27
src/popup/accounts/hint.component.ts
View File

@ -1,20 +1,25 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { ApiService } from 'jslib-common/abstractions/api.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { LogService } from 'jslib-common/abstractions/log.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { ApiService } from "jslib-common/abstractions/api.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { LogService } from "jslib-common/abstractions/log.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { HintComponent as BaseHintComponent } from 'jslib-angular/components/hint.component';
import { HintComponent as BaseHintComponent } from "jslib-angular/components/hint.component";
@Component({
selector: 'app-hint',
templateUrl: 'hint.component.html',
selector: "app-hint",
templateUrl: "hint.component.html",
})
export class HintComponent extends BaseHintComponent {
constructor(router: Router, platformUtilsService: PlatformUtilsService,
i18nService: I18nService, apiService: ApiService, logService: LogService) {
constructor(
router: Router,
platformUtilsService: PlatformUtilsService,
i18nService: I18nService,
apiService: ApiService,
logService: LogService
) {
super(router, i18nService, apiService, platformUtilsService, logService);
}
}

12
src/popup/accounts/home.component.html
View File

@ -1,14 +1,16 @@
<div class="center-content">
<div class="content">
<div class="logo-image"></div>
<p class="lead text-center">{{'loginOrCreateNewAccount' | i18n}}</p>
<a class="btn primary block" routerLink="/login"><b>{{'login' | i18n}}</b></a>
<p class="lead text-center">{{ "loginOrCreateNewAccount" | i18n }}</p>
<a class="btn primary block" routerLink="/login"
><b>{{ "login" | i18n }}</b></a
>
<button type="button" (click)="launchSsoBrowser()" class="btn block">
<i class="fa fa-bank" aria-hidden="true"></i> {{'enterpriseSingleSignOn' | i18n}}
<i class="fa fa-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
</button>
<a class="btn block" routerLink="/register">{{'createAccount' | i18n}}</a>
<a class="btn block" routerLink="/register">{{ "createAccount" | i18n }}</a>
</div>
</div>
<a routerLink="/environment" class="settings-icon">
<i class="fa fa-cog fa-lg" aria-hidden="true"></i><span>&nbsp;{{'settings' | i18n}}</span>
<i class="fa fa-cog fa-lg" aria-hidden="true"></i><span>&nbsp;{{ "settings" | i18n }}</span>
</a>

55
src/popup/accounts/home.component.ts
View File

@ -1,28 +1,32 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
import { ConstantsService } from 'jslib-common/services/constants.service';
import { ConstantsService } from "jslib-common/services/constants.service";
import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { CryptoFunctionService } from "jslib-common/abstractions/cryptoFunction.service";
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { StorageService } from "jslib-common/abstractions/storage.service";
import { Utils } from 'jslib-common/misc/utils';
import { Utils } from "jslib-common/misc/utils";
@Component({
selector: 'app-home',
templateUrl: 'home.component.html',
selector: "app-home",
templateUrl: "home.component.html",
})
export class HomeComponent {
constructor(protected platformUtilsService: PlatformUtilsService,
private passwordGenerationService: PasswordGenerationService, private storageService: StorageService,
private cryptoFunctionService: CryptoFunctionService, private environmentService: EnvironmentService) { }
constructor(
protected platformUtilsService: PlatformUtilsService,
private passwordGenerationService: PasswordGenerationService,
private storageService: StorageService,
private cryptoFunctionService: CryptoFunctionService,
private environmentService: EnvironmentService
) {}
async launchSsoBrowser() {
// Generate necessary sso params
const passwordOptions: any = {
type: 'password',
type: "password",
length: 64,
uppercase: true,
lowercase: true,
@ -30,9 +34,11 @@ export class HomeComponent {
special: false,
};
const state = (await this.passwordGenerationService.generatePassword(passwordOptions)) + ':clientId=browser';
const state =
(await this.passwordGenerationService.generatePassword(passwordOptions)) +
":clientId=browser";
const codeVerifier = await this.passwordGenerationService.generatePassword(passwordOptions);
const codeVerifierHash = await this.cryptoFunctionService.hash(codeVerifier, 'sha256');
const codeVerifierHash = await this.cryptoFunctionService.hash(codeVerifier, "sha256");
const codeChallenge = Utils.fromBufferToUrlB64(codeVerifierHash);
await this.storageService.save(ConstantsService.ssoCodeVerifierKey, codeVerifier);
@ -40,14 +46,21 @@ export class HomeComponent {
let url = this.environmentService.getWebVaultUrl();
if (url == null) {
url = 'https://vault.bitwarden.com';
url = "https://vault.bitwarden.com";
}
const redirectUri = url + '/sso-connector.html';
const redirectUri = url + "/sso-connector.html";
// Launch browser
this.platformUtilsService.launchUri(url + '/#/sso?clientId=browser' +
'&redirectUri=' + encodeURIComponent(redirectUri) +
'&state=' + state + '&codeChallenge=' + codeChallenge);
this.platformUtilsService.launchUri(
url +
"/#/sso?clientId=browser" +
"&redirectUri=" +
encodeURIComponent(redirectUri) +
"&state=" +
state +
"&codeChallenge=" +
codeChallenge
);
}
}

59
src/popup/accounts/lock.component.html
View File

@ -2,10 +2,10 @@
<header>
<div class="left"></div>
<h1 class="center">
<span class="title">{{'verifyIdentity' | i18n}}</span>
<span class="title">{{ "verifyIdentity" | i18n }}</span>
</h1>
<div class="right">
<button type="submit" appBlurClick *ngIf="!hideInput">{{'unlock' | i18n}}</button>
<button type="submit" appBlurClick *ngIf="!hideInput">{{ "unlock" | i18n }}</button>
</div>
</header>
<content>
@ -13,37 +13,62 @@
<div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow *ngIf="!hideInput">
<div class="row-main" *ngIf="pinLock">
<label for="pin">{{'pin' | i18n}}</label>
<input id="pin" type="{{showPassword ? 'text' : 'password'}}" name="PIN" class="monospaced"
[(ngModel)]="pin" required appInputVerbatim>
<label for="pin">{{ "pin" | i18n }}</label>
<input
id="pin"
type="{{ showPassword ? 'text' : 'password' }}"
name="PIN"
class="monospaced"
[(ngModel)]="pin"
required
appInputVerbatim
/>
</div>
<div class="row-main" *ngIf="!pinLock">
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim>
<label for="masterPassword">{{ "masterPass" | i18n }}</label>
<input
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
class="monospaced"
[(ngModel)]="masterPassword"
required
appInputVerbatim
/>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" [attr.aria-pressed]="showPassword">
<i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
aria-hidden="true"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="togglePassword()"
[attr.aria-pressed]="showPassword"
>
<i
class="fa fa-lg"
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
aria-hidden="true"
></i>
</button>
</div>
</div>
</div>
<div class="box-footer">
<p>{{'yourVaultIsLocked' | i18n}}</p>
{{'loggedInAsOn' | i18n : email : webVaultHostname}}
<p>{{ "yourVaultIsLocked" | i18n }}</p>
{{ "loggedInAsOn" | i18n: email:webVaultHostname }}
</div>
</div>
<div class="box" *ngIf="biometricLock">
<div class="box-footer">
<button type="button" class="btn primary block" (click)="unlockBiometric()"
appStopClick>{{'unlockWithBiometrics' | i18n}}</button>
<button type="button" class="btn primary block" (click)="unlockBiometric()" appStopClick>
{{ "unlockWithBiometrics" | i18n }}
</button>
</div>
</div>
<p class="text-center">
<button type="button" appStopClick (click)="logOut()">{{'logOut' | i18n}}</button>
<button type="button" appStopClick (click)="logOut()">{{ "logOut" | i18n }}</button>
</p>
</content>
</form>

98
src/popup/accounts/lock.component.ts
View File

@ -1,55 +1,75 @@
import {
Component,
NgZone,
} from '@angular/core';
import { Router } from '@angular/router';
import Swal from 'sweetalert2';
import { Component, NgZone } from "@angular/core";
import { Router } from "@angular/router";
import Swal from "sweetalert2";
import { ConstantsService } from 'jslib-common/services/constants.service';
import { ConstantsService } from "jslib-common/services/constants.service";
import { ApiService } from 'jslib-common/abstractions/api.service';
import { CryptoService } from 'jslib-common/abstractions/crypto.service';
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
import { LogService } from 'jslib-common/abstractions/log.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { StateService } from 'jslib-common/abstractions/state.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
import { ApiService } from "jslib-common/abstractions/api.service";
import { CryptoService } from "jslib-common/abstractions/crypto.service";
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { KeyConnectorService } from "jslib-common/abstractions/keyConnector.service";
import { LogService } from "jslib-common/abstractions/log.service";
import { MessagingService } from "jslib-common/abstractions/messaging.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { StateService } from "jslib-common/abstractions/state.service";
import { StorageService } from "jslib-common/abstractions/storage.service";
import { UserService } from "jslib-common/abstractions/user.service";
import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
import { LockComponent as BaseLockComponent } from 'jslib-angular/components/lock.component';
import { LockComponent as BaseLockComponent } from "jslib-angular/components/lock.component";
@Component({
selector: 'app-lock',
templateUrl: 'lock.component.html',
selector: "app-lock",
templateUrl: "lock.component.html",
})
export class LockComponent extends BaseLockComponent {
private isInitialLockScreen: boolean;
constructor(router: Router, i18nService: I18nService,
platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
userService: UserService, cryptoService: CryptoService,
storageService: StorageService, vaultTimeoutService: VaultTimeoutService,
environmentService: EnvironmentService, stateService: StateService,
apiService: ApiService, logService: LogService, keyConnectorService: KeyConnectorService,
ngZone: NgZone) {
super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
storageService, vaultTimeoutService, environmentService, stateService, apiService, logService,
keyConnectorService, ngZone);
this.successRoute = '/tabs/current';
constructor(
router: Router,
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
messagingService: MessagingService,
userService: UserService,
cryptoService: CryptoService,
storageService: StorageService,
vaultTimeoutService: VaultTimeoutService,
environmentService: EnvironmentService,
stateService: StateService,
apiService: ApiService,
logService: LogService,
keyConnectorService: KeyConnectorService,
ngZone: NgZone
) {
super(
router,
i18nService,
platformUtilsService,
messagingService,
userService,
cryptoService,
storageService,
vaultTimeoutService,
environmentService,
stateService,
apiService,
logService,
keyConnectorService,
ngZone
);
this.successRoute = "/tabs/current";
this.isInitialLockScreen = (window as any).previousPopupUrl == null;
}
async ngOnInit() {
await super.ngOnInit();
const disableAutoBiometricsPrompt = await this.storageService.get<boolean>(
ConstantsService.disableAutoBiometricsPromptKey) ?? true;
const disableAutoBiometricsPrompt =
(await this.storageService.get<boolean>(ConstantsService.disableAutoBiometricsPromptKey)) ??
true;
window.setTimeout(async () => {
document.getElementById(this.pinLock ? 'pin' : 'masterPassword').focus();
document.getElementById(this.pinLock ? "pin" : "masterPassword").focus();
if (this.biometricLock && !disableAutoBiometricsPrompt && this.isInitialLockScreen) {
if (await this.vaultTimeoutService.isLocked()) {
await this.unlockBiometric();
@ -63,15 +83,15 @@ export class LockComponent extends BaseLockComponent {
return;
}
const div = document.createElement('div');
div.innerHTML = `<div class="swal2-text">${this.i18nService.t('awaitDesktop')}</div>`;
const div = document.createElement("div");
div.innerHTML = `<div class="swal2-text">${this.i18nService.t("awaitDesktop")}</div>`;
Swal.fire({
heightAuto: false,
buttonsStyling: false,
html: div,
showCancelButton: true,
cancelButtonText: this.i18nService.t('cancel'),
cancelButtonText: this.i18nService.t("cancel"),
showConfirmButton: false,
});

52
src/popup/accounts/login.component.html
View File

@ -1,14 +1,14 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<header>
<div class="left">
<a routerLink="/home">{{'cancel' | i18n}}</a>
<a routerLink="/home">{{ "cancel" | i18n }}</a>
</div>
<h1 class="center">
<span class="title">{{'appName' | i18n}}</span>
<span class="title">{{ "appName" | i18n }}</span>
</h1>
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading">
<span [hidden]="form.loading">{{'login' | i18n}}</span>
<span [hidden]="form.loading">{{ "login" | i18n }}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
@ -17,21 +17,45 @@
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="email">{{'emailAddress' | i18n}}</label>
<input id="email" type="text" name="Email" [(ngModel)]="email" required inputmode="email"
appInputVerbatim="false">
<label for="email">{{ "emailAddress" | i18n }}</label>
<input
id="email"
type="text"
name="Email"
[(ngModel)]="email"
required
inputmode="email"
appInputVerbatim="false"
/>
</div>
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim>
<label for="masterPassword">{{ "masterPass" | i18n }}</label>
<input
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
class="monospaced"
[(ngModel)]="masterPassword"
required
appInputVerbatim
/>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" [attr.aria-pressed]="showPassword">
<i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
aria-hidden="true"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="togglePassword()"
[attr.aria-pressed]="showPassword"
>
<i
class="fa fa-lg"
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
aria-hidden="true"
></i>
</button>
</div>
</div>
@ -41,7 +65,7 @@
</div>
</div>
<p class="text-center">
<a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a>
<a routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
</p>
</content>
</form>

70
src/popup/accounts/login.component.ts
View File

@ -1,42 +1,58 @@
import {
Component,
NgZone,
} from '@angular/core';
import { Router } from '@angular/router';
import { Component, NgZone } from "@angular/core";
import { Router } from "@angular/router";
import { AuthService } from 'jslib-common/abstractions/auth.service';
import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { LogService } from 'jslib-common/abstractions/log.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { StateService } from 'jslib-common/abstractions/state.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { SyncService } from 'jslib-common/abstractions/sync.service';
import { AuthService } from "jslib-common/abstractions/auth.service";
import { CryptoFunctionService } from "jslib-common/abstractions/cryptoFunction.service";
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { LogService } from "jslib-common/abstractions/log.service";
import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { StateService } from "jslib-common/abstractions/state.service";
import { StorageService } from "jslib-common/abstractions/storage.service";
import { SyncService } from "jslib-common/abstractions/sync.service";
import { LoginComponent as BaseLoginComponent } from 'jslib-angular/components/login.component';
import { LoginComponent as BaseLoginComponent } from "jslib-angular/components/login.component";
@Component({
selector: 'app-login',
templateUrl: 'login.component.html',
selector: "app-login",
templateUrl: "login.component.html",
})
export class LoginComponent extends BaseLoginComponent {
constructor(authService: AuthService, router: Router,
protected platformUtilsService: PlatformUtilsService, protected i18nService: I18nService,
protected stateService: StateService, protected environmentService: EnvironmentService,
constructor(
authService: AuthService,
router: Router,
protected platformUtilsService: PlatformUtilsService,
protected i18nService: I18nService,
protected stateService: StateService,
protected environmentService: EnvironmentService,
protected passwordGenerationService: PasswordGenerationService,
protected cryptoFunctionService: CryptoFunctionService, storageService: StorageService,
syncService: SyncService, logService: LogService, ngZone: NgZone) {
super(authService, router, platformUtilsService, i18nService, stateService, environmentService,
passwordGenerationService, cryptoFunctionService, storageService, logService, ngZone);
protected cryptoFunctionService: CryptoFunctionService,
storageService: StorageService,
syncService: SyncService,
logService: LogService,
ngZone: NgZone
) {
super(
authService,
router,
platformUtilsService,
i18nService,
stateService,
environmentService,
passwordGenerationService,
cryptoFunctionService,
storageService,
logService,
ngZone
);
super.onSuccessfulLogin = async () => {
await syncService.fullSync(true);
};
super.successRoute = '/tabs/vault';
super.successRoute = "/tabs/vault";
}
settings() {
this.router.navigate(['environment']);
this.router.navigate(["environment"]);
}
}

138
src/popup/accounts/register.component.html
View File

@ -1,14 +1,14 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<header>
<div class="left">
<a routerLink="/home">{{'cancel' | i18n}}</a>
<a routerLink="/home">{{ "cancel" | i18n }}</a>
</div>
<h1 class="center">
<span class="title">{{'createAccount' | i18n}}</span>
<span class="title">{{ "createAccount" | i18n }}</span>
</h1>
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading">
<span [hidden]="form.loading">{{'submit' | i18n}}</span>
<span [hidden]="form.loading">{{ "submit" | i18n }}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
@ -17,81 +17,141 @@
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="email">{{'emailAddress' | i18n}}</label>
<input id="email" type="text" name="Email" [(ngModel)]="email" required
[appAutofocus]="email === ''" inputmode="email" appInputVerbatim="false">
<label for="email">{{ "emailAddress" | i18n }}</label>
<input
id="email"
type="text"
name="Email"
[(ngModel)]="email"
required
[appAutofocus]="email === ''"
inputmode="email"
appInputVerbatim="false"
/>
</div>
<div class="box-content-row" appBoxRow>
<div class="box-content-row-flex">
<div class="row-main">
<label for="masterPassword">
{{'masterPass' | i18n}}
<strong class="sub-label text-{{masterPasswordScoreColor}}"
*ngIf="masterPasswordScoreText">
{{ "masterPass" | i18n }}
<strong
class="sub-label text-{{ masterPasswordScoreColor }}"
*ngIf="masterPasswordScoreText"
>
{{ masterPasswordScoreText }}
</strong>
</label>
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
[appAutofocus]="email !== ''" appInputVerbatim (input)="updatePasswordStrength()">
<input
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
class="monospaced"
[(ngModel)]="masterPassword"
required
[appAutofocus]="email !== ''"
appInputVerbatim
(input)="updatePasswordStrength()"
/>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)" [attr.aria-pressed]="showPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="togglePassword(false)"
[attr.aria-pressed]="showPassword"
>
<i
class="fa fa-lg"
aria-hidden="true"
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
></i>
</button>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-{{masterPasswordScoreColor}}" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: (masterPasswordScoreWidth + '%')}"
attr.aria-valuenow="{{masterPasswordScoreWidth}}"></div>
<div
class="progress-bar bg-{{ masterPasswordScoreColor }}"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
[ngStyle]="{ width: masterPasswordScoreWidth + '%' }"
attr.aria-valuenow="{{ masterPasswordScoreWidth }}"
></div>
</div>
</div>
</div>
<div class="box-footer">
{{'masterPassDesc' | i18n}}
{{ "masterPassDesc" | i18n }}
</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
<input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword" required
appInputVerbatim>
<label for="masterPasswordRetype">{{ "reTypeMasterPass" | i18n }}</label>
<input
id="masterPasswordRetype"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPasswordRetype"
class="monospaced"
[(ngModel)]="confirmMasterPassword"
required
appInputVerbatim
/>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)" [attr.aria-pressed]="showPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="togglePassword(true)"
[attr.aria-pressed]="showPassword"
>
<i
class="fa fa-lg"
aria-hidden="true"
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
></i>
</button>
</div>
</div>
<div class="box-content-row" appBoxRow>
<label for="hint">{{'masterPassHint' | i18n}}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint">
<label for="hint">{{ "masterPassHint" | i18n }}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint" />
</div>
</div>
<div class="box-footer">
{{'masterPassHintDesc' | i18n}}
{{ "masterPassHintDesc" | i18n }}
</div>
</div>
<div [hidden]="!showCaptcha()"><iframe id="hcaptcha_iframe" height="80"></iframe></div>
<div class="box last" *ngIf="showTerms">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox box-content-row-checkbox-left box-content-row-word-break"
appBoxRow>
<input type="checkbox" id="acceptPolicies" [(ngModel)]="acceptPolicies" name="AcceptPolicies">
<div
class="box-content-row box-content-row-checkbox box-content-row-checkbox-left box-content-row-word-break"
appBoxRow
>
<input
type="checkbox"
id="acceptPolicies"
[(ngModel)]="acceptPolicies"
name="AcceptPolicies"
/>
<label for="acceptPolicies">
{{'acceptPolicies' | i18n}}<br>
<a href="https://bitwarden.com/terms/" target="_blank"
rel="noopener">{{'termsOfService' | i18n}}</a>,
<a href="https://bitwarden.com/privacy/" target="_blank"
rel="noopener">{{'privacyPolicy' | i18n}}</a>
{{ "acceptPolicies" | i18n }}<br />
<a href="https://bitwarden.com/terms/" target="_blank" rel="noopener">{{
"termsOfService" | i18n
}}</a
>,
<a href="https://bitwarden.com/privacy/" target="_blank" rel="noopener">{{
"privacyPolicy" | i18n
}}</a>
</label>
</div>
</div>

59
src/popup/accounts/register.component.ts
View File

@ -1,29 +1,46 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { ApiService } from 'jslib-common/abstractions/api.service';
import { AuthService } from 'jslib-common/abstractions/auth.service';
import { CryptoService } from 'jslib-common/abstractions/crypto.service';
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { StateService } from 'jslib-common/abstractions/state.service';
import { ApiService } from "jslib-common/abstractions/api.service";
import { AuthService } from "jslib-common/abstractions/auth.service";
import { CryptoService } from "jslib-common/abstractions/crypto.service";
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { StateService } from "jslib-common/abstractions/state.service";
import { RegisterComponent as BaseRegisterComponent } from 'jslib-angular/components/register.component';
import { LogService } from 'jslib-common/abstractions/log.service';
import { RegisterComponent as BaseRegisterComponent } from "jslib-angular/components/register.component";
import { LogService } from "jslib-common/abstractions/log.service";
@Component({
selector: 'app-register',
templateUrl: 'register.component.html',
selector: "app-register",
templateUrl: "register.component.html",
})
export class RegisterComponent extends BaseRegisterComponent {
constructor(authService: AuthService, router: Router,
i18nService: I18nService, cryptoService: CryptoService,
apiService: ApiService, stateService: StateService, platformUtilsService: PlatformUtilsService,
passwordGenerationService: PasswordGenerationService, environmentService: EnvironmentService,
logService: LogService) {
super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
passwordGenerationService, environmentService, logService);
constructor(
authService: AuthService,
router: Router,
i18nService: I18nService,
cryptoService: CryptoService,
apiService: ApiService,
stateService: StateService,
platformUtilsService: PlatformUtilsService,
passwordGenerationService: PasswordGenerationService,
environmentService: EnvironmentService,
logService: LogService
) {
super(
authService,
router,
i18nService,
cryptoService,
apiService,
stateService,
platformUtilsService,
passwordGenerationService,
environmentService,
logService
);
}
}

36
src/popup/accounts/remove-password.component.html
View File

@ -1,7 +1,7 @@
<header>
<div class="left"></div>
<div class="center">
<span class="title">{{'removeMasterPassword' | i18n}}</span>
<span class="title">{{ "removeMasterPassword" | i18n }}</span>
</div>
<div class="right"></div>
</header>
@ -10,18 +10,38 @@
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<p>{{'convertOrganizationEncryptionDesc' | i18n : organization.name}}</p>
<p>{{ "convertOrganizationEncryptionDesc" | i18n: organization.name }}</p>
</div>
<div class="box-content-row">
<button type="button" class="btn block primary" (click)="convert()" [disabled]="actionPromise">
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true" *ngIf="continuing"></i>
{{'removeMasterPassword' | i18n}}
<button
type="button"
class="btn block primary"
(click)="convert()"
[disabled]="actionPromise"
>
<i
class="fa fa-spinner fa-spin"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
*ngIf="continuing"
></i>
{{ "removeMasterPassword" | i18n }}
</button>
</div>
<div class="box-content-row">
<button type="button" class="btn btn-outline-secondary block" (click)="leave()" [disabled]="actionPromise">
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true" *ngIf="leaving"></i>
{{'leaveOrganization' | i18n}}
<button
type="button"
class="btn btn-outline-secondary block"
(click)="leave()"
[disabled]="actionPromise"
>
<i
class="fa fa-spinner fa-spin"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
*ngIf="leaving"
></i>
{{ "leaveOrganization" | i18n }}
</button>
</div>
</div>

11
src/popup/accounts/remove-password.component.ts
View File

@ -1,10 +1,9 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
import { RemovePasswordComponent as BaseRemovePasswordComponent } from 'jslib-angular/components/remove-password.component';
import { RemovePasswordComponent as BaseRemovePasswordComponent } from "jslib-angular/components/remove-password.component";
@Component({
selector: 'app-remove-password',
templateUrl: 'remove-password.component.html',
selector: "app-remove-password",
templateUrl: "remove-password.component.html",
})
export class RemovePasswordComponent extends BaseRemovePasswordComponent {
}
export class RemovePasswordComponent extends BaseRemovePasswordComponent {}

120
src/popup/accounts/set-password.component.html
View File

@ -1,14 +1,14 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<header>
<div class="left">
<a routerLink="/home">{{'cancel' | i18n}}</a>
<a routerLink="/home">{{ "cancel" | i18n }}</a>
</div>
<h1 class="center">
<span class="title">{{'setMasterPassword' | i18n}}</span>
<span class="title">{{ "setMasterPassword" | i18n }}</span>
</h1>
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading">
<span [hidden]="form.loading">{{'submit' | i18n}}</span>
<span [hidden]="form.loading">{{ "submit" | i18n }}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
@ -19,12 +19,19 @@
</div>
<div *ngIf="!syncLoading">
<div class="box">
<app-callout type="tip">{{'ssoCompleteRegistration' | i18n}}</app-callout>
<app-callout type="warning" title="{{'resetPasswordPolicyAutoEnroll' | i18n}}"
*ngIf="resetPasswordAutoEnroll">
{{'resetPasswordAutoEnrollInviteWarning' | i18n}}
<app-callout type="tip">{{ "ssoCompleteRegistration" | i18n }}</app-callout>
<app-callout
type="warning"
title="{{ 'resetPasswordPolicyAutoEnroll' | i18n }}"
*ngIf="resetPasswordAutoEnroll"
>
{{ "resetPasswordAutoEnrollInviteWarning" | i18n }}
</app-callout>
<app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
<app-callout
type="info"
[enforcedPolicyOptions]="enforcedPolicyOptions"
*ngIf="enforcedPolicyOptions"
>
</app-callout>
</div>
<div class="box">
@ -32,35 +39,60 @@
<div class="box-content-row" appBoxRow>
<div class="box-content-row-flex">
<div class="row-main">
<label for="masterPassword">{{'masterPass' | i18n}}
<strong class="sub-label text-{{masterPasswordScoreColor}}"
*ngIf="masterPasswordScoreText">
<label for="masterPassword"
>{{ "masterPass" | i18n }}
<strong
class="sub-label text-{{ masterPasswordScoreColor }}"
*ngIf="masterPasswordScoreText"
>
{{ masterPasswordScoreText }}
</strong>
</label>
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
(input)="updatePasswordStrength()" appInputVerbatim>
<input
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
class="monospaced"
[(ngModel)]="masterPassword"
required
(input)="updatePasswordStrength()"
appInputVerbatim
/>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appBlurClick role="button"
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)" [attr.aria-pressed]="showPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="togglePassword(false)"
[attr.aria-pressed]="showPassword"
>
<i
class="fa fa-lg"
aria-hidden="true"
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
></i>
</button>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-{{masterPasswordScoreColor}}" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
[ngStyle]="{width: (masterPasswordScoreWidth + '%')}"
attr.aria-valuenow="{{masterPasswordScoreWidth}}">
</div>
<div
class="progress-bar bg-{{ masterPasswordScoreColor }}"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
[ngStyle]="{ width: masterPasswordScoreWidth + '%' }"
attr.aria-valuenow="{{ masterPasswordScoreWidth }}"
></div>
</div>
</div>
</div>
<div class="box-footer">
{{'masterPassDesc' | i18n}}
{{ "masterPassDesc" | i18n }}
</div>
</div>
<div class="box">
@ -68,16 +100,34 @@
<div class="box-content-row" appBoxRow>
<div class="box-content-row-flex">
<div class="row-main">
<label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
<input id="masterPasswordRetype" type="password" name="MasterPasswordRetype"
class="monospaced" [(ngModel)]="masterPasswordRetype" required appInputVerbatim
autocomplete="new-password">
<label for="masterPasswordRetype">{{ "reTypeMasterPass" | i18n }}</label>
<input
id="masterPasswordRetype"
type="password"
name="MasterPasswordRetype"
class="monospaced"
[(ngModel)]="masterPasswordRetype"
required
appInputVerbatim
autocomplete="new-password"
/>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appBlurClick role="button"
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)" [attr.aria-pressed]="showPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="togglePassword(true)"
[attr.aria-pressed]="showPassword"
>
<i
class="fa fa-lg"
aria-hidden="true"
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
></i>
</button>
</div>
</div>
@ -87,12 +137,12 @@
<div class="box last">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="hint">{{'masterPassHint' | i18n}}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint">
<label for="hint">{{ "masterPassHint" | i18n }}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint" />
</div>
</div>
<div class="box-footer">
{{'masterPassHintDesc' | i18n}}
{{ "masterPassHintDesc" | i18n }}
</div>
</div>
</div>

82
src/popup/accounts/set-password.component.ts
View File

@ -1,36 +1,50 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
import {
ActivatedRoute,
Router,
} from '@angular/router';
import { ActivatedRoute, Router } from "@angular/router";
import { ApiService } from 'jslib-common/abstractions/api.service';
import { CryptoService } from 'jslib-common/abstractions/crypto.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { PolicyService } from 'jslib-common/abstractions/policy.service';
import { SyncService } from 'jslib-common/abstractions/sync.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ApiService } from "jslib-common/abstractions/api.service";
import { CryptoService } from "jslib-common/abstractions/crypto.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { MessagingService } from "jslib-common/abstractions/messaging.service";
import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { PolicyService } from "jslib-common/abstractions/policy.service";
import { SyncService } from "jslib-common/abstractions/sync.service";
import { UserService } from "jslib-common/abstractions/user.service";
import {
SetPasswordComponent as BaseSetPasswordComponent,
} from 'jslib-angular/components/set-password.component';
import { SetPasswordComponent as BaseSetPasswordComponent } from "jslib-angular/components/set-password.component";
@Component({
selector: 'app-set-password',
templateUrl: 'set-password.component.html',
selector: "app-set-password",
templateUrl: "set-password.component.html",
})
export class SetPasswordComponent extends BaseSetPasswordComponent {
constructor(apiService: ApiService, i18nService: I18nService,
cryptoService: CryptoService, messagingService: MessagingService,
userService: UserService, passwordGenerationService: PasswordGenerationService,
platformUtilsService: PlatformUtilsService, policyService: PolicyService, router: Router,
syncService: SyncService, route: ActivatedRoute) {
super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
platformUtilsService, policyService, router, apiService, syncService, route);
constructor(
apiService: ApiService,
i18nService: I18nService,
cryptoService: CryptoService,
messagingService: MessagingService,
userService: UserService,
passwordGenerationService: PasswordGenerationService,
platformUtilsService: PlatformUtilsService,
policyService: PolicyService,
router: Router,
syncService: SyncService,
route: ActivatedRoute
) {
super(
i18nService,
cryptoService,
messagingService,
userService,
passwordGenerationService,
platformUtilsService,
policyService,
router,
apiService,
syncService,
route
);
}
get masterPasswordScoreWidth() {
@ -40,26 +54,26 @@ export class SetPasswordComponent extends BaseSetPasswordComponent {
get masterPasswordScoreColor() {
switch (this.masterPasswordScore) {
case 4:
return 'success';
return "success";
case 3:
return 'primary';
return "primary";
case 2:
return 'warning';
return "warning";
default:
return 'danger';
return "danger";
}
}
get masterPasswordScoreText() {
switch (this.masterPasswordScore) {
case 4:
return this.i18nService.t('strong');
return this.i18nService.t("strong");
case 3:
return this.i18nService.t('good');
return this.i18nService.t("good");
case 2:
return this.i18nService.t('weak');
return this.i18nService.t("weak");
default:
return this.masterPasswordScore != null ? this.i18nService.t('weak') : null;
return this.masterPasswordScore != null ? this.i18nService.t("weak") : null;
}
}
}

84
src/popup/accounts/sso.component.ts
View File

@ -1,45 +1,63 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
import {
ActivatedRoute,
Router,
} from '@angular/router';
import { ActivatedRoute, Router } from "@angular/router";
import { ApiService } from 'jslib-common/abstractions/api.service';
import { AuthService } from 'jslib-common/abstractions/auth.service';
import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { LogService } from 'jslib-common/abstractions/log.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { StateService } from 'jslib-common/abstractions/state.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { SyncService } from 'jslib-common/abstractions/sync.service';
import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
import { ApiService } from "jslib-common/abstractions/api.service";
import { AuthService } from "jslib-common/abstractions/auth.service";
import { CryptoFunctionService } from "jslib-common/abstractions/cryptoFunction.service";
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { LogService } from "jslib-common/abstractions/log.service";
import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { StateService } from "jslib-common/abstractions/state.service";
import { StorageService } from "jslib-common/abstractions/storage.service";
import { SyncService } from "jslib-common/abstractions/sync.service";
import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
import { SsoComponent as BaseSsoComponent } from 'jslib-angular/components/sso.component';
import { BrowserApi } from '../../browser/browserApi';
import { SsoComponent as BaseSsoComponent } from "jslib-angular/components/sso.component";
import { BrowserApi } from "../../browser/browserApi";
@Component({
selector: 'app-sso',
templateUrl: 'sso.component.html',
selector: "app-sso",
templateUrl: "sso.component.html",
})
export class SsoComponent extends BaseSsoComponent {
constructor(authService: AuthService, router: Router,
i18nService: I18nService, route: ActivatedRoute,
storageService: StorageService, stateService: StateService,
platformUtilsService: PlatformUtilsService, apiService: ApiService,
cryptoFunctionService: CryptoFunctionService, passwordGenerationService: PasswordGenerationService,
syncService: SyncService, environmentService: EnvironmentService, logService: LogService,
private vaultTimeoutService: VaultTimeoutService) {
super(authService, router, i18nService, route, storageService, stateService, platformUtilsService,
apiService, cryptoFunctionService, environmentService, passwordGenerationService, logService);
constructor(
authService: AuthService,
router: Router,
i18nService: I18nService,
route: ActivatedRoute,
storageService: StorageService,
stateService: StateService,
platformUtilsService: PlatformUtilsService,
apiService: ApiService,
cryptoFunctionService: CryptoFunctionService,
passwordGenerationService: PasswordGenerationService,
syncService: SyncService,
environmentService: EnvironmentService,
logService: LogService,
private vaultTimeoutService: VaultTimeoutService
) {
super(
authService,
router,
i18nService,
route,
storageService,
stateService,
platformUtilsService,
apiService,
cryptoFunctionService,
environmentService,
passwordGenerationService,
logService
);
const url = this.environmentService.getWebVaultUrl();
this.redirectUri = url + '/sso-connector.html';
this.clientId = 'browser';
this.redirectUri = url + "/sso-connector.html";
this.clientId = "browser";
super.onSuccessfulLogin = async () => {
await syncService.fullSync(true);
@ -48,7 +66,7 @@ export class SsoComponent extends BaseSsoComponent {
BrowserApi.reloadOpenWindows();
}
const thisWindow = window.open('', '_self');
const thisWindow = window.open("", "_self");
thisWindow.close();
};
}

16
src/popup/accounts/two-factor-options.component.html
View File

@ -1,22 +1,28 @@
<header>
<div class="left">
<a routerLink="/2fa">{{'close' | i18n}}</a>
<a routerLink="/2fa">{{ "close" | i18n }}</a>
</div>
<h1 class="center">
<span class="title">{{'twoStepOptions' | i18n}}</span>
<span class="title">{{ "twoStepOptions" | i18n }}</span>
</h1>
<div class="right"></div>
</header>
<content>
<div class="box">
<div class="box-content">
<button type="button" appStopClick *ngFor="let p of providers" class="box-content-row" (click)="choose(p)">
<button
type="button"
appStopClick
*ngFor="let p of providers"
class="box-content-row"
(click)="choose(p)"
>
<span class="text">{{ p.name }}</span>
<span class="detail">{{ p.description }}</span>
</button>
<button type="button" appStopClick class="box-content-row" (click)="recover()">
<span class="text">{{'recoveryCodeTitle' | i18n}}</span>
<span class="detail">{{'recoveryCodeDesc' | i18n}}</span>
<span class="text">{{ "recoveryCodeTitle" | i18n }}</span>
<span class="detail">{{ "recoveryCodeDesc" | i18n }}</span>
</button>
</div>
</div>

28
src/popup/accounts/two-factor-options.component.ts
View File

@ -1,27 +1,29 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { AuthService } from 'jslib-common/abstractions/auth.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { AuthService } from "jslib-common/abstractions/auth.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import {
TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent,
} from 'jslib-angular/components/two-factor-options.component';
import { TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent } from "jslib-angular/components/two-factor-options.component";
@Component({
selector: 'app-two-factor-options',
templateUrl: 'two-factor-options.component.html',
selector: "app-two-factor-options",
templateUrl: "two-factor-options.component.html",
})
export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
constructor(authService: AuthService, router: Router,
i18nService: I18nService, platformUtilsService: PlatformUtilsService) {
constructor(
authService: AuthService,
router: Router,
i18nService: I18nService,
platformUtilsService: PlatformUtilsService
) {
super(authService, router, i18nService, platformUtilsService, window);
}
choose(p: any) {
super.choose(p);
this.authService.selectedTwoFactorProviderType = p.type;
this.router.navigate(['2fa']);
this.router.navigate(["2fa"]);
}
}

99
src/popup/accounts/two-factor.component.html
View File

@ -1,60 +1,87 @@
<form id="two-factor-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<header>
<div class="left">
<a routerLink="/login">{{'back' | i18n}}</a>
<a routerLink="/login">{{ "back" | i18n }}</a>
</div>
<h1 class="center">
<span class="title">{{ title }}</span>
</h1>
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading" *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo &&
<button
type="submit"
appBlurClick
[disabled]="form.loading"
*ngIf="
selectedProviderType != null &&
selectedProviderType !== providerType.Duo &&
selectedProviderType !== providerType.OrganizationDuo &&
(selectedProviderType !== providerType.WebAuthn || form.loading)">
<span [hidden]="form.loading">{{'continue' | i18n}}</span>
(selectedProviderType !== providerType.WebAuthn || form.loading)
"
>
<span [hidden]="form.loading">{{ "continue" | i18n }}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
</header>
<content>
<ng-container *ngIf="selectedProviderType === providerType.Authenticator ||
selectedProviderType === providerType.Email">
<ng-container
*ngIf="
selectedProviderType === providerType.Authenticator ||
selectedProviderType === providerType.Email
"
>
<div class="content text-center">
<span *ngIf="selectedProviderType === providerType.Authenticator">
{{'enterVerificationCodeApp' | i18n}}
{{ "enterVerificationCodeApp" | i18n }}
</span>
<span *ngIf="selectedProviderType === providerType.Email">
{{'enterVerificationCodeEmail' | i18n : twoFactorEmail}}
{{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
</span>
</div>
<div class="box first">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code">{{'verificationCode' | i18n}}</label>
<input id="code" type="text" name="Code" [(ngModel)]="token" required appAutofocus
inputmode="tel" appInputVerbatim>
<label for="code">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="text"
name="Code"
[(ngModel)]="token"
required
appAutofocus
inputmode="tel"
appInputVerbatim
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{'rememberMe' | i18n}}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.Yubikey">
<div class="content text-center">
<p class="text-center">{{'insertYubiKey' | i18n}}</p>
<img src="../images/yubikey.jpg" class="img-rounded img-responsive" alt="">
<p class="text-center">{{ "insertYubiKey" | i18n }}</p>
<img src="../images/yubikey.jpg" class="img-rounded img-responsive" alt="" />
</div>
<div class="box first">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
<input id="code" type="password" name="Code" [(ngModel)]="token" required appAutofocus
appInputVerbatim>
<label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="password"
name="Code"
[(ngModel)]="token"
required
appAutofocus
appInputVerbatim
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{'rememberMe' | i18n}}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
@ -64,41 +91,49 @@
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{'rememberMe' | i18n}}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.WebAuthn && webAuthnNewTab">
<div class="content text-center" *ngIf="webAuthnNewTab">
<p class="text-center">{{'webAuthnNewTab' | i18n}}</p>
<button type="button" class="btn primary block" (click)="authWebAuthn()" appStopClick>{{'webAuthnNewTabOpen' | i18n}}</button>
<p class="text-center">{{ "webAuthnNewTab" | i18n }}</p>
<button type="button" class="btn primary block" (click)="authWebAuthn()" appStopClick>
{{ "webAuthnNewTabOpen" | i18n }}
</button>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.Duo ||
selectedProviderType === providerType.OrganizationDuo">
<ng-container
*ngIf="
selectedProviderType === providerType.Duo ||
selectedProviderType === providerType.OrganizationDuo
"
>
<div id="duo-frame"><iframe id="duo_iframe"></iframe></div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{'rememberMe' | i18n}}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<div class="content" *ngIf="selectedProviderType == null">
<p class="text-center">{{'noTwoStepProviders' | i18n}}</p>
<p class="text-center">{{'noTwoStepProviders2' | i18n}}</p>
<p class="text-center">{{ "noTwoStepProviders" | i18n }}</p>
<p class="text-center">{{ "noTwoStepProviders2" | i18n }}</p>
</div>
<div class="content no-vpad" *ngIf="selectedProviderType != null">
<p class="text-center">
<button type="button" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</button>
<button type="button" appStopClick (click)="anotherMethod()">
{{ "useAnotherTwoStepMethod" | i18n }}
</button>
</p>
<p *ngIf="selectedProviderType === providerType.Email" class="text-center">
<button type="button" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise">
{{'sendVerificationCodeEmailAgain' | i18n}}
{{ "sendVerificationCodeEmailAgain" | i18n }}
</button>
</p>
</div>

128
src/popup/accounts/two-factor.component.ts
View File

@ -1,66 +1,84 @@
import { Component } from '@angular/core';
import {
ActivatedRoute,
Router,
} from '@angular/router';
import { first } from 'rxjs/operators';
import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { first } from "rxjs/operators";
import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
import { ApiService } from 'jslib-common/abstractions/api.service';
import { AuthService } from 'jslib-common/abstractions/auth.service';
import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.service';
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { LogService } from 'jslib-common/abstractions/log.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { StateService } from 'jslib-common/abstractions/state.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { SyncService } from 'jslib-common/abstractions/sync.service';
import { ApiService } from "jslib-common/abstractions/api.service";
import { AuthService } from "jslib-common/abstractions/auth.service";
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { LogService } from "jslib-common/abstractions/log.service";
import { MessagingService } from "jslib-common/abstractions/messaging.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { StateService } from "jslib-common/abstractions/state.service";
import { StorageService } from "jslib-common/abstractions/storage.service";
import { SyncService } from "jslib-common/abstractions/sync.service";
import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib-angular/components/two-factor.component';
import { TwoFactorComponent as BaseTwoFactorComponent } from "jslib-angular/components/two-factor.component";
import { PopupUtilsService } from '../services/popup-utils.service';
import { PopupUtilsService } from "../services/popup-utils.service";
import { BrowserApi } from '../../browser/browserApi';
import { BrowserApi } from "../../browser/browserApi";
const BroadcasterSubscriptionId = 'TwoFactorComponent';
const BroadcasterSubscriptionId = "TwoFactorComponent";
@Component({
selector: 'app-two-factor',
templateUrl: 'two-factor.component.html',
selector: "app-two-factor",
templateUrl: "two-factor.component.html",
})
export class TwoFactorComponent extends BaseTwoFactorComponent {
showNewWindowMessage = false;
constructor(authService: AuthService, router: Router,
i18nService: I18nService, apiService: ApiService,
platformUtilsService: PlatformUtilsService, private syncService: SyncService,
environmentService: EnvironmentService, private broadcasterService: BroadcasterService,
private popupUtilsService: PopupUtilsService, stateService: StateService,
storageService: StorageService, route: ActivatedRoute, private messagingService: MessagingService,
logService: LogService) {
super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
stateService, storageService, route, logService);
constructor(
authService: AuthService,
router: Router,
i18nService: I18nService,
apiService: ApiService,
platformUtilsService: PlatformUtilsService,
private syncService: SyncService,
environmentService: EnvironmentService,
private broadcasterService: BroadcasterService,
private popupUtilsService: PopupUtilsService,
stateService: StateService,
storageService: StorageService,
route: ActivatedRoute,
private messagingService: MessagingService,
logService: LogService
) {
super(
authService,
router,
i18nService,
apiService,
platformUtilsService,
window,
environmentService,
stateService,
storageService,
route,
logService
);
super.onSuccessfulLogin = () => {
return syncService.fullSync(true);
};
super.successRoute = '/tabs/vault';
this.webAuthnNewTab = this.platformUtilsService.isFirefox() || this.platformUtilsService.isSafari();
super.successRoute = "/tabs/vault";
this.webAuthnNewTab =
this.platformUtilsService.isFirefox() || this.platformUtilsService.isSafari();
}
async ngOnInit() {
if (this.route.snapshot.paramMap.has('webAuthnResponse')) {
if (this.route.snapshot.paramMap.has("webAuthnResponse")) {
// WebAuthn fallback response
this.selectedProviderType = TwoFactorProviderType.WebAuthn;
this.token = this.route.snapshot.paramMap.get('webAuthnResponse');
this.token = this.route.snapshot.paramMap.get("webAuthnResponse");
super.onSuccessfulLogin = async () => {
this.syncService.fullSync(true);
this.messagingService.send('reloadPopup');
this.messagingService.send("reloadPopup");
window.close();
};
this.remember = this.route.snapshot.paramMap.get('remember') === 'true';
this.remember = this.route.snapshot.paramMap.get("remember") === "true";
await this.doSubmit();
return;
}
@ -72,24 +90,30 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
// WebAuthn prompt appears inside the popup on linux, and requires a larger popup width
// than usual to avoid cutting off the dialog.
if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && await this.isLinux()) {
document.body.classList.add('linux-webauthn');
if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && (await this.isLinux())) {
document.body.classList.add("linux-webauthn");
}
if (this.selectedProviderType === TwoFactorProviderType.Email &&
this.popupUtilsService.inPopup(window)) {
const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('popup2faCloseMessage'),
null, this.i18nService.t('yes'), this.i18nService.t('no'));
if (
this.selectedProviderType === TwoFactorProviderType.Email &&
this.popupUtilsService.inPopup(window)
) {
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t("popup2faCloseMessage"),
null,
this.i18nService.t("yes"),
this.i18nService.t("no")
);
if (confirmed) {
this.popupUtilsService.popOut(window);
}
}
this.route.queryParams.pipe(first()).subscribe(async qParams => {
if (qParams.sso === 'true') {
this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
if (qParams.sso === "true") {
super.onSuccessfulLogin = () => {
BrowserApi.reloadOpenWindows();
const thisWindow = window.open('', '_self');
const thisWindow = window.open("", "_self");
thisWindow.close();
return this.syncService.fullSync(true);
};
@ -100,17 +124,17 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
async ngOnDestroy() {
this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && await this.isLinux()) {
document.body.classList.remove('linux-webauthn');
if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && (await this.isLinux())) {
document.body.classList.remove("linux-webauthn");
}
super.ngOnDestroy();
}
anotherMethod() {
this.router.navigate(['2fa-options']);
this.router.navigate(["2fa-options"]);
}
async isLinux() {
return (await BrowserApi.getPlatformInfo()).os === 'linux';
return (await BrowserApi.getPlatformInfo()).os === "linux";
}
}

104
src/popup/accounts/update-temp-password.component.html
View File

@ -1,23 +1,27 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<header>
<div class="left">
<a (click)="logOut()">{{'logOut' | i18n}}</a>
<a (click)="logOut()">{{ "logOut" | i18n }}</a>
</div>
<h1 class="center">
<span class="title">{{'updateMasterPassword' | i18n}}</span>
<span class="title">{{ "updateMasterPassword" | i18n }}</span>
</h1>
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading">
<span [hidden]="form.loading">{{'submit' | i18n}}</span>
<span [hidden]="form.loading">{{ "submit" | i18n }}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
</header>
<content>
<app-callout type="warning" title="{{ 'updateMasterPassword' | i18n }}">
{{'updateMasterPasswordWarning' | i18n}}
{{ "updateMasterPasswordWarning" | i18n }}
</app-callout>
<app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
<app-callout
type="info"
[enforcedPolicyOptions]="enforcedPolicyOptions"
*ngIf="enforcedPolicyOptions"
>
</app-callout>
<div class="box">
<div class="box-content">
@ -25,29 +29,53 @@
<div class="box-content-row-flex">
<div class="row-main">
<label for="masterPassword">
{{'masterPass' | i18n}}
<strong class="sub-label text-{{masterPasswordScoreStyle.Color}}"
*ngIf="masterPasswordScoreStyle.Text">
{{ "masterPass" | i18n }}
<strong
class="sub-label text-{{ masterPasswordScoreStyle.Color }}"
*ngIf="masterPasswordScoreStyle.Text"
>
{{ masterPasswordScoreStyle.Text }}
</strong>
</label>
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
appInputVerbatim (input)="updatePasswordStrength()">
<input
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
class="monospaced"
[(ngModel)]="masterPassword"
required
appInputVerbatim
(input)="updatePasswordStrength()"
/>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)" [attr.aria-pressed]="showPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="togglePassword(false)"
[attr.aria-pressed]="showPassword"
>
<i
class="fa fa-lg"
aria-hidden="true"
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
></i>
</button>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-{{masterPasswordScoreStyle.Color}}" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
[ngStyle]="{width: (masterPasswordScoreStyle.Width + '%')}"
attr.aria-valuenow="{{masterPasswordScoreStyle.Width}}"></div>
<div
class="progress-bar bg-{{ masterPasswordScoreStyle.Color }}"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
[ngStyle]="{ width: masterPasswordScoreStyle.Width + '%' }"
attr.aria-valuenow="{{ masterPasswordScoreStyle.Width }}"
></div>
</div>
</div>
</div>
@ -56,16 +84,32 @@
<div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
<input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
name="MasterPasswordRetype" class="monospaced" [(ngModel)]="masterPasswordRetype" required
appInputVerbatim>
<label for="masterPasswordRetype">{{ "reTypeMasterPass" | i18n }}</label>
<input
id="masterPasswordRetype"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPasswordRetype"
class="monospaced"
[(ngModel)]="masterPasswordRetype"
required
appInputVerbatim
/>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)" [attr.aria-pressed]="showPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="togglePassword(true)"
[attr.aria-pressed]="showPassword"
>
<i
class="fa fa-lg"
aria-hidden="true"
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
></i>
</button>
</div>
</div>
@ -74,12 +118,12 @@
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="hint">{{'masterPassHint' | i18n}}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint">
<label for="hint">{{ "masterPassHint" | i18n }}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint" />
</div>
</div>
<div class="box-footer">
{{'masterPassHintDesc' | i18n}}
{{ "masterPassHintDesc" | i18n }}
</div>
</div>
</content>

75
src/popup/accounts/update-temp-password.component.ts
View File

@ -1,17 +1,17 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
import { ApiService } from 'jslib-common/abstractions/api.service';
import { CryptoService } from 'jslib-common/abstractions/crypto.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { LogService } from 'jslib-common/abstractions/log.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { PolicyService } from 'jslib-common/abstractions/policy.service';
import { SyncService } from 'jslib-common/abstractions/sync.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { ApiService } from "jslib-common/abstractions/api.service";
import { CryptoService } from "jslib-common/abstractions/crypto.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { LogService } from "jslib-common/abstractions/log.service";
import { MessagingService } from "jslib-common/abstractions/messaging.service";
import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { PolicyService } from "jslib-common/abstractions/policy.service";
import { SyncService } from "jslib-common/abstractions/sync.service";
import { UserService } from "jslib-common/abstractions/user.service";
import { UpdateTempPasswordComponent as BaseUpdateTempPasswordComponent } from 'jslib-angular/components/update-temp-password.component';
import { UpdateTempPasswordComponent as BaseUpdateTempPasswordComponent } from "jslib-angular/components/update-temp-password.component";
interface MasterPasswordScore {
Color: string;
@ -20,8 +20,8 @@ interface MasterPasswordScore {
}
@Component({
selector: 'app-update-temp-password',
templateUrl: 'update-temp-password.component.html',
selector: "app-update-temp-password",
templateUrl: "update-temp-password.component.html",
})
export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent {
get masterPasswordScoreStyle(): MasterPasswordScore {
@ -29,37 +29,54 @@ export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent
switch (this.masterPasswordScore) {
case 4:
return {
Color: 'bg-success',
Text: 'strong',
Color: "bg-success",
Text: "strong",
Width: scoreWidth,
};
case 3:
return {
Color: 'bg-primary',
Text: 'good',
Color: "bg-primary",
Text: "good",
Width: scoreWidth,
};
case 2:
return {
Color: 'bg-warning',
Text: 'weak',
Color: "bg-warning",
Text: "weak",
Width: scoreWidth,
};
default:
return {
Color: 'bg-danger',
Text: 'weak',
Color: "bg-danger",
Text: "weak",
Width: scoreWidth,
};
}
}
constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
passwordGenerationService: PasswordGenerationService, policyService: PolicyService,
cryptoService: CryptoService, userService: UserService,
messagingService: MessagingService, apiService: ApiService,
syncService: SyncService, logService: LogService) {
super(i18nService, platformUtilsService, passwordGenerationService, policyService, cryptoService,
userService, messagingService, apiService, syncService, logService);
constructor(
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
passwordGenerationService: PasswordGenerationService,
policyService: PolicyService,
cryptoService: CryptoService,
userService: UserService,
messagingService: MessagingService,
apiService: ApiService,
syncService: SyncService,
logService: LogService
) {
super(
i18nService,
platformUtilsService,
passwordGenerationService,
policyService,
cryptoService,
userService,
messagingService,
apiService,
syncService,
logService
);
}
}

236
src/popup/app-routing.animations.ts
View File

@ -1,139 +1,144 @@
import {
animate,
group,
query,
style,
transition,
trigger,
} from '@angular/animations';
import { animate, group, query, style, transition, trigger } from "@angular/animations";
import { BrowserApi } from '../browser/browserApi';
import { BrowserApi } from "../browser/browserApi";
const queryShown = query(':enter, :leave', [
style({ position: 'fixed', width: '100%', height: '100%' }),
], { optional: true });
const queryShown = query(
":enter, :leave",
[style({ position: "fixed", width: "100%", height: "100%" })],
{
optional: true,
}
);
// ref: https://github.com/angular/angular/issues/15477
const queryChildRoute = query('router-outlet ~ *', [
style({}),
animate(1, style({})),
], { optional: true });
const queryChildRoute = query("router-outlet ~ *", [style({}), animate(1, style({}))], {
optional: true,
});
const speed = '0.4s';
const speed = "0.4s";
export function queryTranslate(direction: string, axis: string, from: number, to: number, zIndex: number = 1000) {
return query(':' + direction, [
style({ transform: 'translate' + axis + '(' + from + '%)', zIndex: zIndex, boxShadow: '0 3px 2px -2px gray' }),
animate(speed + ' ease-in-out', style({ transform: 'translate' + axis + '(' + to + '%)' })),
], { optional: true });
export function queryTranslate(
direction: string,
axis: string,
from: number,
to: number,
zIndex: number = 1000
) {
return query(
":" + direction,
[
style({
transform: "translate" + axis + "(" + from + "%)",
zIndex: zIndex,
boxShadow: "0 3px 2px -2px gray",
}),
animate(speed + " ease-in-out", style({ transform: "translate" + axis + "(" + to + "%)" })),
],
{ optional: true }
);
}
export function queryTranslateX(direction: string, from: number, to: number, zIndex: number = 1000) {
return queryTranslate(direction, 'X', from, to, zIndex);
export function queryTranslateX(
direction: string,
from: number,
to: number,
zIndex: number = 1000
) {
return queryTranslate(direction, "X", from, to, zIndex);
}
export function queryTranslateY(direction: string, from: number, to: number, zIndex: number = 1000) {
return queryTranslate(direction, 'Y', from, to, zIndex);
export function queryTranslateY(
direction: string,
from: number,
to: number,
zIndex: number = 1000
) {
return queryTranslate(direction, "Y", from, to, zIndex);
}
const inSlideLeft = [
queryShown,
group([
queryTranslateX('enter', 100, 0),
queryTranslateX('leave', 0, -100),
queryChildRoute,
]),
group([queryTranslateX("enter", 100, 0), queryTranslateX("leave", 0, -100), queryChildRoute]),
];
const outSlideRight = [
queryShown,
group([
queryTranslateX('enter', -100, 0),
queryTranslateX('leave', 0, 100),
]),
group([queryTranslateX("enter", -100, 0), queryTranslateX("leave", 0, 100)]),
];
const inSlideUp = [
queryShown,
group([
queryTranslateY('enter', 100, 0, 1010),
queryTranslateY('leave', 0, 0),
queryChildRoute,
]),
group([queryTranslateY("enter", 100, 0, 1010), queryTranslateY("leave", 0, 0), queryChildRoute]),
];
const outSlideDown = [
queryShown,
group([
queryTranslateY('enter', 0, 0),
queryTranslateY('leave', 0, 100, 1010),
]),
group([queryTranslateY("enter", 0, 0), queryTranslateY("leave", 0, 100, 1010)]),
];
const inSlideDown = [
queryShown,
group([
queryTranslateY('enter', -100, 0, 1010),
queryTranslateY('leave', 0, 0),
queryChildRoute,
]),
group([queryTranslateY("enter", -100, 0, 1010), queryTranslateY("leave", 0, 0), queryChildRoute]),
];
const outSlideUp = [
queryShown,
group([
queryTranslateY('enter', 0, 0),
queryTranslateY('leave', 0, -100, 1010),
]),
group([queryTranslateY("enter", 0, 0), queryTranslateY("leave", 0, -100, 1010)]),
];
export function tabsToCiphers(fromState: string, toState: string) {
if (fromState == null || toState === null || toState.indexOf('ciphers_') === -1) {
if (fromState == null || toState === null || toState.indexOf("ciphers_") === -1) {
return false;
}
return (fromState.indexOf('ciphers_') === 0 && fromState.indexOf('ciphers_direction=b') === -1) ||
fromState === 'tabs';
return (
(fromState.indexOf("ciphers_") === 0 && fromState.indexOf("ciphers_direction=b") === -1) ||
fromState === "tabs"
);
}
export function ciphersToTabs(fromState: string, toState: string) {
if (fromState == null || toState === null || fromState.indexOf('ciphers_') === -1) {
if (fromState == null || toState === null || fromState.indexOf("ciphers_") === -1) {
return false;
}
return toState.indexOf('ciphers_direction=b') === 0 || toState === 'tabs';
return toState.indexOf("ciphers_direction=b") === 0 || toState === "tabs";
}
export function ciphersToView(fromState: string, toState: string) {
if (fromState == null || toState === null) {
return false;
}
return fromState.indexOf('ciphers_') === 0 &&
(toState === 'view-cipher' || toState === 'add-cipher' || toState === 'clone-cipher');
return (
fromState.indexOf("ciphers_") === 0 &&
(toState === "view-cipher" || toState === "add-cipher" || toState === "clone-cipher")
);
}
export function viewToCiphers(fromState: string, toState: string) {
if (fromState == null || toState === null) {
return false;
}
return (fromState === 'view-cipher' || fromState === 'add-cipher' || fromState === 'clone-cipher') &&
toState.indexOf('ciphers_') === 0;
return (
(fromState === "view-cipher" || fromState === "add-cipher" || fromState === "clone-cipher") &&
toState.indexOf("ciphers_") === 0
);
}
export const routerTransition = trigger('routerTransition', [
transition('void => home', inSlideLeft),
transition('void => tabs', inSlideLeft),
export const routerTransition = trigger("routerTransition", [
transition("void => home", inSlideLeft),
transition("void => tabs", inSlideLeft),
transition('home => environment, home => login, home => register', inSlideUp),
transition("home => environment, home => login, home => register", inSlideUp),
transition('login => home', outSlideDown),
transition('login => hint', inSlideUp),
transition('login => tabs, login => 2fa', inSlideLeft),
transition("login => home", outSlideDown),
transition("login => hint", inSlideUp),
transition("login => tabs, login => 2fa", inSlideLeft),
transition('hint => login, register => home, environment => home', outSlideDown),
transition("hint => login, register => home, environment => home", outSlideDown),
transition('2fa => login', outSlideRight),
transition('2fa => 2fa-options', inSlideUp),
transition('2fa-options => 2fa', outSlideDown),
transition('2fa => tabs', inSlideLeft),
transition("2fa => login", outSlideRight),
transition("2fa => 2fa-options", inSlideUp),
transition("2fa-options => 2fa", outSlideDown),
transition("2fa => tabs", inSlideLeft),
transition(tabsToCiphers, inSlideLeft),
transition(ciphersToTabs, outSlideRight),
@ -141,59 +146,68 @@ export const routerTransition = trigger('routerTransition', [
transition(ciphersToView, inSlideUp),
transition(viewToCiphers, outSlideDown),
transition('tabs => view-cipher', inSlideUp),
transition('view-cipher => tabs', outSlideDown),
transition("tabs => view-cipher", inSlideUp),
transition("view-cipher => tabs", outSlideDown),
transition('view-cipher => edit-cipher, view-cipher => cipher-password-history', inSlideUp),
transition('edit-cipher => view-cipher, cipher-password-history => view-cipher, edit-cipher => tabs', outSlideDown),
transition("view-cipher => edit-cipher, view-cipher => cipher-password-history", inSlideUp),
transition(
"edit-cipher => view-cipher, cipher-password-history => view-cipher, edit-cipher => tabs",
outSlideDown
),
transition('view-cipher => clone-cipher', inSlideUp),
transition('clone-cipher => view-cipher, clone-cipher => tabs', outSlideDown),
transition("view-cipher => clone-cipher", inSlideUp),
transition("clone-cipher => view-cipher, clone-cipher => tabs", outSlideDown),
transition('view-cipher => share-cipher', inSlideUp),
transition('share-cipher => view-cipher', outSlideDown),
transition("view-cipher => share-cipher", inSlideUp),
transition("share-cipher => view-cipher", outSlideDown),
transition('tabs => add-cipher', inSlideUp),
transition('add-cipher => tabs', outSlideDown),
transition("tabs => add-cipher", inSlideUp),
transition("add-cipher => tabs", outSlideDown),
transition('generator => generator-history, tabs => generator-history', inSlideLeft),
transition('generator-history => generator, generator-history => tabs', outSlideRight),
transition("generator => generator-history, tabs => generator-history", inSlideLeft),
transition("generator-history => generator, generator-history => tabs", outSlideRight),
transition('add-cipher => generator, edit-cipher => generator, clone-cipher => generator', inSlideUp),
transition('generator => add-cipher, generator => edit-cipher, generator => clone-cipher', outSlideDown),
transition(
"add-cipher => generator, edit-cipher => generator, clone-cipher => generator",
inSlideUp
),
transition(
"generator => add-cipher, generator => edit-cipher, generator => clone-cipher",
outSlideDown
),
transition('edit-cipher => attachments, edit-cipher => collections', inSlideLeft),
transition('attachments => edit-cipher, collections => edit-cipher', outSlideRight),
transition("edit-cipher => attachments, edit-cipher => collections", inSlideLeft),
transition("attachments => edit-cipher, collections => edit-cipher", outSlideRight),
transition('clone-cipher => attachments, clone-cipher => collections', inSlideLeft),
transition('attachments => clone-cipher, collections => clone-cipher', outSlideRight),
transition("clone-cipher => attachments, clone-cipher => collections", inSlideLeft),
transition("attachments => clone-cipher, collections => clone-cipher", outSlideRight),
transition('tabs => export', inSlideLeft),
transition('export => tabs', outSlideRight),
transition("tabs => export", inSlideLeft),
transition("export => tabs", outSlideRight),
transition('tabs => folders', inSlideLeft),
transition('folders => tabs', outSlideRight),
transition("tabs => folders", inSlideLeft),
transition("folders => tabs", outSlideRight),
transition('folders => edit-folder, folders => add-folder', inSlideUp),
transition('edit-folder => folders, add-folder => folders', outSlideDown),
transition("folders => edit-folder, folders => add-folder", inSlideUp),
transition("edit-folder => folders, add-folder => folders", outSlideDown),
transition('tabs => sync', inSlideLeft),
transition('sync => tabs', outSlideRight),
transition("tabs => sync", inSlideLeft),
transition("sync => tabs", outSlideRight),
transition('tabs => options', inSlideLeft),
transition('options => tabs', outSlideRight),
transition("tabs => options", inSlideLeft),
transition("options => tabs", outSlideRight),
transition('tabs => premium', inSlideLeft),
transition('premium => tabs', outSlideRight),
transition("tabs => premium", inSlideLeft),
transition("premium => tabs", outSlideRight),
transition('tabs => lock', inSlideDown),
transition("tabs => lock", inSlideDown),
transition('tabs => send-type', inSlideLeft),
transition('send-type => tabs', outSlideRight),
transition("tabs => send-type", inSlideLeft),
transition("send-type => tabs", outSlideRight),
transition('tabs => add-send, send-type => add-send', inSlideUp),
transition('add-send => tabs, add-send => send-type', outSlideDown),
transition("tabs => add-send, send-type => add-send", inSlideUp),
transition("add-send => tabs, add-send => send-type", outSlideDown),
transition('tabs => edit-send, send-type => edit-send', inSlideUp),
transition('edit-send => tabs, edit-send => send-type', outSlideDown),
transition("tabs => edit-send, send-type => edit-send", inSlideUp),
transition("edit-send => tabs, edit-send => send-type", outSlideDown),
]);

293
src/popup/app-routing.module.ts
View File

@ -1,320 +1,315 @@
import { Injectable, NgModule } from '@angular/core';
import {
ActivatedRouteSnapshot,
RouteReuseStrategy,
RouterModule,
Routes,
} from '@angular/router';
import { Injectable, NgModule } from "@angular/core";
import { ActivatedRouteSnapshot, RouteReuseStrategy, RouterModule, Routes } from "@angular/router";
import { AuthGuardService } from 'jslib-angular/services/auth-guard.service';
import { LockGuardService } from 'jslib-angular/services/lock-guard.service';
import { AuthGuardService } from "jslib-angular/services/auth-guard.service";
import { LockGuardService } from "jslib-angular/services/lock-guard.service";
import { DebounceNavigationService } from './services/debounceNavigationService';
import { LaunchGuardService } from './services/launch-guard.service';
import { DebounceNavigationService } from "./services/debounceNavigationService";
import { LaunchGuardService } from "./services/launch-guard.service";
import { EnvironmentComponent } from './accounts/environment.component';
import { HintComponent } from './accounts/hint.component';
import { HomeComponent } from './accounts/home.component';
import { LockComponent } from './accounts/lock.component';
import { LoginComponent } from './accounts/login.component';
import { RegisterComponent } from './accounts/register.component';
import { RemovePasswordComponent } from './accounts/remove-password.component';
import { SetPasswordComponent } from './accounts/set-password.component';
import { SsoComponent } from './accounts/sso.component';
import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
import { TwoFactorComponent } from './accounts/two-factor.component';
import { UpdateTempPasswordComponent } from './accounts/update-temp-password.component';
import { EnvironmentComponent } from "./accounts/environment.component";
import { HintComponent } from "./accounts/hint.component";
import { HomeComponent } from "./accounts/home.component";
import { LockComponent } from "./accounts/lock.component";
import { LoginComponent } from "./accounts/login.component";
import { RegisterComponent } from "./accounts/register.component";
import { RemovePasswordComponent } from "./accounts/remove-password.component";
import { SetPasswordComponent } from "./accounts/set-password.component";
import { SsoComponent } from "./accounts/sso.component";
import { TwoFactorOptionsComponent } from "./accounts/two-factor-options.component";
import { TwoFactorComponent } from "./accounts/two-factor.component";
import { UpdateTempPasswordComponent } from "./accounts/update-temp-password.component";
import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
import { PasswordGeneratorComponent } from './generator/password-generator.component';
import { PasswordGeneratorHistoryComponent } from "./generator/password-generator-history.component";
import { PasswordGeneratorComponent } from "./generator/password-generator.component";
import { PrivateModeComponent } from './private-mode.component';
import { TabsComponent } from './tabs.component';
import { PrivateModeComponent } from "./private-mode.component";
import { TabsComponent } from "./tabs.component";
import { ExcludedDomainsComponent } from './settings/excluded-domains.component';
import { ExportComponent } from './settings/export.component';
import { FolderAddEditComponent } from './settings/folder-add-edit.component';
import { FoldersComponent } from './settings/folders.component';
import { OptionsComponent } from './settings/options.component';
import { PremiumComponent } from './settings/premium.component';
import { SettingsComponent } from './settings/settings.component';
import { SyncComponent } from './settings/sync.component';
import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
import { ExportComponent } from "./settings/export.component";
import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
import { FoldersComponent } from "./settings/folders.component";
import { OptionsComponent } from "./settings/options.component";
import { PremiumComponent } from "./settings/premium.component";
import { SettingsComponent } from "./settings/settings.component";
import { SyncComponent } from "./settings/sync.component";
import { AddEditComponent } from './vault/add-edit.component';
import { AttachmentsComponent } from './vault/attachments.component';
import { CiphersComponent } from './vault/ciphers.component';
import { CollectionsComponent } from './vault/collections.component';
import { CurrentTabComponent } from './vault/current-tab.component';
import { GroupingsComponent } from './vault/groupings.component';
import { PasswordHistoryComponent } from './vault/password-history.component';
import { ShareComponent } from './vault/share.component';
import { ViewComponent } from './vault/view.component';
import { AddEditComponent } from "./vault/add-edit.component";
import { AttachmentsComponent } from "./vault/attachments.component";
import { CiphersComponent } from "./vault/ciphers.component";
import { CollectionsComponent } from "./vault/collections.component";
import { CurrentTabComponent } from "./vault/current-tab.component";
import { GroupingsComponent } from "./vault/groupings.component";
import { PasswordHistoryComponent } from "./vault/password-history.component";
import { ShareComponent } from "./vault/share.component";
import { ViewComponent } from "./vault/view.component";
import { SendAddEditComponent } from './send/send-add-edit.component';
import { SendGroupingsComponent } from './send/send-groupings.component';
import { SendTypeComponent } from './send/send-type.component';
import { SendAddEditComponent } from "./send/send-add-edit.component";
import { SendGroupingsComponent } from "./send/send-groupings.component";
import { SendTypeComponent } from "./send/send-type.component";
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
path: "",
redirectTo: "home",
pathMatch: "full",
},
{
path: 'vault',
redirectTo: '/tabs/vault',
pathMatch: 'full',
path: "vault",
redirectTo: "/tabs/vault",
pathMatch: "full",
},
{
path: 'home',
path: "home",
component: HomeComponent,
canActivate: [LaunchGuardService],
data: { state: 'home' },
data: { state: "home" },
},
{
path: 'login',
path: "login",
component: LoginComponent,
canActivate: [LaunchGuardService],
data: { state: 'login' },
data: { state: "login" },
},
{
path: 'lock',
path: "lock",
component: LockComponent,
canActivate: [LockGuardService],
data: { state: 'lock' },
data: { state: "lock" },
},
{
path: '2fa',
path: "2fa",
component: TwoFactorComponent,
canActivate: [LaunchGuardService],
data: { state: '2fa' },
data: { state: "2fa" },
},
{
path: '2fa-options',
path: "2fa-options",
component: TwoFactorOptionsComponent,
canActivate: [LaunchGuardService],
data: { state: '2fa-options' },
data: { state: "2fa-options" },
},
{
path: 'sso',
path: "sso",
component: SsoComponent,
canActivate: [LaunchGuardService],
data: { state: 'sso' },
data: { state: "sso" },
},
{
path: 'set-password',
path: "set-password",
component: SetPasswordComponent,
data: { state: 'set-password' },
data: { state: "set-password" },
},
{
path: 'remove-password',
path: "remove-password",
component: RemovePasswordComponent,
canActivate: [AuthGuardService],
data: { state: 'remove-password' },
data: { state: "remove-password" },
},
{
path: 'register',
path: "register",
component: RegisterComponent,
canActivate: [LaunchGuardService],
data: { state: 'register' },
data: { state: "register" },
},
{
path: 'hint',
path: "hint",
component: HintComponent,
canActivate: [LaunchGuardService],
data: { state: 'hint' },
data: { state: "hint" },
},
{
path: 'environment',
path: "environment",
component: EnvironmentComponent,
canActivate: [LaunchGuardService],
data: { state: 'environment' },
data: { state: "environment" },
},
{
path: 'ciphers',
path: "ciphers",
component: CiphersComponent,
canActivate: [AuthGuardService],
data: { state: 'ciphers' },
data: { state: "ciphers" },
},
{
path: 'view-cipher',
path: "view-cipher",
component: ViewComponent,
canActivate: [AuthGuardService],
data: { state: 'view-cipher' },
data: { state: "view-cipher" },
},
{
path: 'cipher-password-history',
path: "cipher-password-history",
component: PasswordHistoryComponent,
canActivate: [AuthGuardService],
data: { state: 'cipher-password-history' },
data: { state: "cipher-password-history" },
},
{
path: 'add-cipher',
path: "add-cipher",
component: AddEditComponent,
canActivate: [AuthGuardService, DebounceNavigationService],
data: { state: 'add-cipher' },
runGuardsAndResolvers: 'always',
data: { state: "add-cipher" },
runGuardsAndResolvers: "always",
},
{
path: 'edit-cipher',
path: "edit-cipher",
component: AddEditComponent,
canActivate: [AuthGuardService, DebounceNavigationService],
data: { state: 'edit-cipher' },
runGuardsAndResolvers: 'always',
data: { state: "edit-cipher" },
runGuardsAndResolvers: "always",
},
{
path: 'share-cipher',
path: "share-cipher",
component: ShareComponent,
canActivate: [AuthGuardService],
data: { state: 'share-cipher' },
data: { state: "share-cipher" },
},
{
path: 'collections',
path: "collections",
component: CollectionsComponent,
canActivate: [AuthGuardService],
data: { state: 'collections' },
data: { state: "collections" },
},
{
path: 'attachments',
path: "attachments",
component: AttachmentsComponent,
canActivate: [AuthGuardService],
data: { state: 'attachments' },
data: { state: "attachments" },
},
{
path: 'generator',
path: "generator",
component: PasswordGeneratorComponent,
canActivate: [AuthGuardService],
data: { state: 'generator' },
data: { state: "generator" },
},
{
path: 'generator-history',
path: "generator-history",
component: PasswordGeneratorHistoryComponent,
canActivate: [AuthGuardService],
data: { state: 'generator-history' },
data: { state: "generator-history" },
},
{
path: 'export',
path: "export",
component: ExportComponent,
canActivate: [AuthGuardService],
data: { state: 'export' },
data: { state: "export" },
},
{
path: 'folders',
path: "folders",
component: FoldersComponent,
canActivate: [AuthGuardService],
data: { state: 'folders' },
data: { state: "folders" },
},
{
path: 'add-folder',
path: "add-folder",
component: FolderAddEditComponent,
canActivate: [AuthGuardService],
data: { state: 'add-folder' },
data: { state: "add-folder" },
},
{
path: 'edit-folder',
path: "edit-folder",
component: FolderAddEditComponent,
canActivate: [AuthGuardService],
data: { state: 'edit-folder' },
data: { state: "edit-folder" },
},
{
path: 'sync',
path: "sync",
component: SyncComponent,
canActivate: [AuthGuardService],
data: { state: 'sync' },
data: { state: "sync" },
},
{
path: 'excluded-domains',
path: "excluded-domains",
component: ExcludedDomainsComponent,
canActivate: [AuthGuardService],
data: { state: 'excluded-domains' },
data: { state: "excluded-domains" },
},
{
path: 'premium',
path: "premium",
component: PremiumComponent,
canActivate: [AuthGuardService],
data: { state: 'premium' },
data: { state: "premium" },
},
{
path: 'options',
path: "options",
component: OptionsComponent,
canActivate: [AuthGuardService],
data: { state: 'options' },
data: { state: "options" },
},
{
path: 'private-mode',
path: "private-mode",
component: PrivateModeComponent,
data: { state: 'private-mode' },
data: { state: "private-mode" },
},
{
path: 'clone-cipher',
path: "clone-cipher",
component: AddEditComponent,
canActivate: [AuthGuardService],
data: { state: 'clone-cipher' },
data: { state: "clone-cipher" },
},
{
path: 'send-type',
path: "send-type",
component: SendTypeComponent,
canActivate: [AuthGuardService],
data: { state: 'send-type' },
data: { state: "send-type" },
},
{
path: 'add-send',
path: "add-send",
component: SendAddEditComponent,
canActivate: [AuthGuardService],
data: { state: 'add-send' },
data: { state: "add-send" },
},
{
path: 'edit-send',
path: "edit-send",
component: SendAddEditComponent,
canActivate: [AuthGuardService],
data: { state: 'edit-send' },
data: { state: "edit-send" },
},
{
path: 'update-temp-password',
path: "update-temp-password",
component: UpdateTempPasswordComponent,
canActivate: [AuthGuardService],
data: { state: 'update-temp-password' },
data: { state: "update-temp-password" },
},
{
path: 'tabs',
path: "tabs",
component: TabsComponent,
data: { state: 'tabs' },
data: { state: "tabs" },
children: [
{
path: '',
redirectTo: '/tabs/vault',
pathMatch: 'full',
path: "",
redirectTo: "/tabs/vault",
pathMatch: "full",
},
{
path: 'current',
path: "current",
component: CurrentTabComponent,
canActivate: [AuthGuardService],
data: { state: 'tabs_current' },
runGuardsAndResolvers: 'always',
data: { state: "tabs_current" },
runGuardsAndResolvers: "always",
},
{
path: 'vault',
path: "vault",
component: GroupingsComponent,
canActivate: [AuthGuardService],
data: { state: 'tabs_vault' },
data: { state: "tabs_vault" },
},
{
path: 'generator',
path: "generator",
component: PasswordGeneratorComponent,
canActivate: [AuthGuardService],
data: { state: 'tabs_generator' },
data: { state: "tabs_generator" },
},
{
path: 'settings',
path: "settings",
component: SettingsComponent,
canActivate: [AuthGuardService],
data: { state: 'tabs_settings' },
data: { state: "tabs_settings" },
},
{
path: 'send',
path: "send",
component: SendGroupingsComponent,
canActivate: [AuthGuardService],
data: { state: 'tabs_send' },
data: { state: "tabs_send" },
},
],
},
@ -326,7 +321,9 @@ export class NoRouteReuseStrategy implements RouteReuseStrategy {
return false;
}
store(route: ActivatedRouteSnapshot, handle: {}) { /* Nothing */ }
store(route: ActivatedRouteSnapshot, handle: {}) {
/* Nothing */
}
shouldAttach(route: ActivatedRouteSnapshot) {
return false;
@ -342,14 +339,14 @@ export class NoRouteReuseStrategy implements RouteReuseStrategy {
}
@NgModule({
imports: [RouterModule.forRoot(routes, {
imports: [
RouterModule.forRoot(routes, {
useHash: true,
onSameUrlNavigation: 'reload',
onSameUrlNavigation: "reload",
/*enableTracing: true,*/
})],
exports: [RouterModule],
providers: [
{ provide: RouteReuseStrategy, useClass: NoRouteReuseStrategy },
}),
],
exports: [RouterModule],
providers: [{ provide: RouteReuseStrategy, useClass: NoRouteReuseStrategy }],
})
export class AppRoutingModule {}

201
src/popup/app.component.ts
View File

@ -1,56 +1,49 @@
import {
ChangeDetectorRef,
Component,
NgZone,
OnInit,
SecurityContext,
} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import {
NavigationEnd,
Router,
RouterOutlet,
} from '@angular/router';
import {
IndividualConfig,
ToastrService,
} from 'ngx-toastr';
import Swal, { SweetAlertIcon } from 'sweetalert2/src/sweetalert2.js';
import { BrowserApi } from '../browser/browserApi';
import { ChangeDetectorRef, Component, NgZone, OnInit, SecurityContext } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
import { IndividualConfig, ToastrService } from "ngx-toastr";
import Swal, { SweetAlertIcon } from "sweetalert2/src/sweetalert2.js";
import { BrowserApi } from "../browser/browserApi";
import { AuthService } from 'jslib-common/abstractions/auth.service';
import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { StateService } from 'jslib-common/abstractions/state.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { AuthService } from "jslib-common/abstractions/auth.service";
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { KeyConnectorService } from "jslib-common/abstractions/keyConnector.service";
import { MessagingService } from "jslib-common/abstractions/messaging.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { StateService } from "jslib-common/abstractions/state.service";
import { StorageService } from "jslib-common/abstractions/storage.service";
import { ConstantsService } from 'jslib-common/services/constants.service';
import { ConstantsService } from "jslib-common/services/constants.service";
import { routerTransition } from './app-routing.animations';
import { routerTransition } from "./app-routing.animations";
@Component({
selector: 'app-root',
selector: "app-root",
styles: [],
animations: [routerTransition],
template: `
<main [@routerTransition]="getState(o)">
template: ` <main [@routerTransition]="getState(o)">
<router-outlet #o="outlet"></router-outlet>
</main>`,
})
export class AppComponent implements OnInit {
private lastActivity: number = null;
constructor(private toastrService: ToastrService, private storageService: StorageService,
private broadcasterService: BroadcasterService, private authService: AuthService,
private i18nService: I18nService, private router: Router,
private stateService: StateService, private messagingService: MessagingService,
private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone,
private sanitizer: DomSanitizer, private platformUtilsService: PlatformUtilsService,
private keyConnectoService: KeyConnectorService) { }
constructor(
private toastrService: ToastrService,
private storageService: StorageService,
private broadcasterService: BroadcasterService,
private authService: AuthService,
private i18nService: I18nService,
private router: Router,
private stateService: StateService,
private messagingService: MessagingService,
private changeDetectorRef: ChangeDetectorRef,
private ngZone: NgZone,
private sanitizer: DomSanitizer,
private platformUtilsService: PlatformUtilsService,
private keyConnectoService: KeyConnectorService
) {}
ngOnInit() {
if (BrowserApi.getBackgroundPage() == null) {
@ -66,52 +59,58 @@ export class AppComponent implements OnInit {
window.onkeypress = () => this.recordActivity();
});
(window as any).bitwardenPopupMainMessageListener = async (msg: any, sender: any, sendResponse: any) => {
if (msg.command === 'doneLoggingOut') {
(window as any).bitwardenPopupMainMessageListener = async (
msg: any,
sender: any,
sendResponse: any
) => {
if (msg.command === "doneLoggingOut") {
this.ngZone.run(async () => {
this.authService.logOut(() => {
if (msg.expired) {
this.showToast({
type: 'warning',
title: this.i18nService.t('loggedOut'),
text: this.i18nService.t('loginExpired'),
type: "warning",
title: this.i18nService.t("loggedOut"),
text: this.i18nService.t("loginExpired"),
});
}
this.router.navigate(['home']);
this.router.navigate(["home"]);
this.stateService.purge();
});
this.changeDetectorRef.detectChanges();
});
} else if (msg.command === 'authBlocked') {
} else if (msg.command === "authBlocked") {
this.ngZone.run(() => {
this.router.navigate(['home']);
this.router.navigate(["home"]);
});
} else if (msg.command === 'locked') {
} else if (msg.command === "locked") {
this.stateService.purge();
this.ngZone.run(() => {
this.router.navigate(['lock']);
this.router.navigate(["lock"]);
});
} else if (msg.command === 'showDialog') {
} else if (msg.command === "showDialog") {
await this.showDialog(msg);
} else if (msg.command === 'showToast') {
} else if (msg.command === "showToast") {
this.ngZone.run(() => {
this.showToast(msg);
});
} else if (msg.command === 'reloadProcess') {
const windowReload = this.platformUtilsService.isSafari() ||
this.platformUtilsService.isFirefox() || this.platformUtilsService.isOpera();
} else if (msg.command === "reloadProcess") {
const windowReload =
this.platformUtilsService.isSafari() ||
this.platformUtilsService.isFirefox() ||
this.platformUtilsService.isOpera();
if (windowReload) {
// Wait to make sure background has reloaded first.
window.setTimeout(() => BrowserApi.reloadExtension(window), 2000);
}
} else if (msg.command === 'reloadPopup') {
} else if (msg.command === "reloadPopup") {
this.ngZone.run(() => {
this.router.navigate(['/']);
this.router.navigate(["/"]);
});
} else if (msg.command === 'convertAccountToKeyConnector') {
} else if (msg.command === "convertAccountToKeyConnector") {
this.ngZone.run(async () => {
await this.keyConnectoService.setConvertAccountRequired(true);
this.router.navigate(['/remove-password']);
this.router.navigate(["/remove-password"]);
});
} else {
msg.webExtSender = sender;
@ -119,22 +118,25 @@ export class AppComponent implements OnInit {
}
};
BrowserApi.messageListener('app.component', (window as any).bitwardenPopupMainMessageListener);
BrowserApi.messageListener("app.component", (window as any).bitwardenPopupMainMessageListener);
this.router.events.subscribe(event => {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
const url = event.urlAfterRedirects || event.url || '';
if (url.startsWith('/tabs/') && (window as any).previousPopupUrl != null &&
(window as any).previousPopupUrl.startsWith('/tabs/')) {
this.stateService.remove('GroupingsComponent');
this.stateService.remove('GroupingsComponentScope');
this.stateService.remove('CiphersComponent');
this.stateService.remove('SendGroupingsComponent');
this.stateService.remove('SendGroupingsComponentScope');
this.stateService.remove('SendTypeComponent');
const url = event.urlAfterRedirects || event.url || "";
if (
url.startsWith("/tabs/") &&
(window as any).previousPopupUrl != null &&
(window as any).previousPopupUrl.startsWith("/tabs/")
) {
this.stateService.remove("GroupingsComponent");
this.stateService.remove("GroupingsComponentScope");
this.stateService.remove("CiphersComponent");
this.stateService.remove("SendGroupingsComponent");
this.stateService.remove("SendGroupingsComponentScope");
this.stateService.remove("SendTypeComponent");
}
if (url.startsWith('/tabs/')) {
this.stateService.remove('addEditCipherInfo');
if (url.startsWith("/tabs/")) {
this.stateService.remove("addEditCipherInfo");
}
(window as any).previousPopupUrl = url;
@ -149,18 +151,24 @@ export class AppComponent implements OnInit {
}
getState(outlet: RouterOutlet) {
if (outlet.activatedRouteData.state === 'ciphers') {
const routeDirection = (window as any).routeDirection != null ? (window as any).routeDirection : '';
return 'ciphers_direction=' + routeDirection + '_' +
(outlet.activatedRoute.queryParams as any).value.folderId + '_' +
(outlet.activatedRoute.queryParams as any).value.collectionId;
if (outlet.activatedRouteData.state === "ciphers") {
const routeDirection =
(window as any).routeDirection != null ? (window as any).routeDirection : "";
return (
"ciphers_direction=" +
routeDirection +
"_" +
(outlet.activatedRoute.queryParams as any).value.folderId +
"_" +
(outlet.activatedRoute.queryParams as any).value.collectionId
);
} else {
return outlet.activatedRouteData.state;
}
}
private async recordActivity() {
const now = (new Date()).getTime();
const now = new Date().getTime();
if (this.lastActivity != null && now - this.lastActivity < 250) {
return;
}
@ -170,17 +178,19 @@ export class AppComponent implements OnInit {
}
private showToast(msg: any) {
let message = '';
let message = "";
const options: Partial<IndividualConfig> = {};
if (typeof (msg.text) === 'string') {
if (typeof msg.text === "string") {
message = msg.text;
} else if (msg.text.length === 1) {
message = msg.text[0];
} else {
msg.text.forEach((t: string) =>
message += ('<p>' + this.sanitizer.sanitize(SecurityContext.HTML, t) + '</p>'));
msg.text.forEach(
(t: string) =>
(message += "<p>" + this.sanitizer.sanitize(SecurityContext.HTML, t) + "</p>")
);
options.enableHtml = true;
}
if (msg.options != null) {
@ -192,7 +202,7 @@ export class AppComponent implements OnInit {
}
}
this.toastrService.show(message, msg.title, options, 'toast-' + msg.type);
this.toastrService.show(message, msg.title, options, "toast-" + msg.type);
}
private async showDialog(msg: any) {
@ -201,17 +211,17 @@ export class AppComponent implements OnInit {
if (type != null) {
// If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed.
switch (type) {
case 'success':
iconClasses = 'fa-check text-success';
case "success":
iconClasses = "fa-check text-success";
break;
case 'warning':
iconClasses = 'fa-warning text-warning';
case "warning":
iconClasses = "fa-warning text-warning";
break;
case 'error':
iconClasses = 'fa-bolt text-danger';
case "error":
iconClasses = "fa-bolt text-danger";
break;
case 'info':
iconClasses = 'fa-info-circle text-info';
case "info":
iconClasses = "fa-info-circle text-info";
break;
default:
break;
@ -224,18 +234,19 @@ export class AppComponent implements OnInit {
heightAuto: false,
buttonsStyling: false,
icon: type as SweetAlertIcon, // required to be any of the SweetAlertIcons to output the iconHtml.
iconHtml: iconClasses != null ? `<i class="swal-custom-icon fa ${iconClasses}"></i>` : undefined,
iconHtml:
iconClasses != null ? `<i class="swal-custom-icon fa ${iconClasses}"></i>` : undefined,
text: msg.text,
html: msg.html,
titleText: msg.title,
showCancelButton: (cancelText != null),
showCancelButton: cancelText != null,
cancelButtonText: cancelText,
showConfirmButton: true,
confirmButtonText: confirmText == null ? this.i18nService.t('ok') : confirmText,
confirmButtonText: confirmText == null ? this.i18nService.t("ok") : confirmText,
timer: 300000,
});
this.messagingService.send('showDialogResolve', {
this.messagingService.send("showDialogResolve", {
dialogId: msg.dialogId,
confirmed: confirmed.value,
});

331
src/popup/app.module.ts
View File

@ -1,181 +1,177 @@
import { A11yModule } from '@angular/cdk/a11y';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { A11yModule } from "@angular/cdk/a11y";
import { DragDropModule } from "@angular/cdk/drag-drop";
import { ScrollingModule } from "@angular/cdk/scrolling";
import { AppRoutingModule } from './app-routing.module';
import { ServicesModule } from './services/services.module';
import { AppRoutingModule } from "./app-routing.module";
import { ServicesModule } from "./services/services.module";
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { EnvironmentComponent } from './accounts/environment.component';
import { HintComponent } from './accounts/hint.component';
import { HomeComponent } from './accounts/home.component';
import { LockComponent } from './accounts/lock.component';
import { LoginComponent } from './accounts/login.component';
import { RegisterComponent } from './accounts/register.component';
import { RemovePasswordComponent } from './accounts/remove-password.component';
import { SetPasswordComponent } from './accounts/set-password.component';
import { SsoComponent } from './accounts/sso.component';
import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
import { TwoFactorComponent } from './accounts/two-factor.component';
import { UpdateTempPasswordComponent } from './accounts/update-temp-password.component';
import { EnvironmentComponent } from "./accounts/environment.component";
import { HintComponent } from "./accounts/hint.component";
import { HomeComponent } from "./accounts/home.component";
import { LockComponent } from "./accounts/lock.component";
import { LoginComponent } from "./accounts/login.component";
import { RegisterComponent } from "./accounts/register.component";
import { RemovePasswordComponent } from "./accounts/remove-password.component";
import { SetPasswordComponent } from "./accounts/set-password.component";
import { SsoComponent } from "./accounts/sso.component";
import { TwoFactorOptionsComponent } from "./accounts/two-factor-options.component";
import { TwoFactorComponent } from "./accounts/two-factor.component";
import { UpdateTempPasswordComponent } from "./accounts/update-temp-password.component";
import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
import { PasswordGeneratorComponent } from './generator/password-generator.component';
import { PasswordGeneratorHistoryComponent } from "./generator/password-generator-history.component";
import { PasswordGeneratorComponent } from "./generator/password-generator.component";
import { AppComponent } from './app.component';
import { PrivateModeComponent } from './private-mode.component';
import { TabsComponent } from './tabs.component';
import { AppComponent } from "./app.component";
import { PrivateModeComponent } from "./private-mode.component";
import { TabsComponent } from "./tabs.component";
import { ExcludedDomainsComponent } from './settings/excluded-domains.component';
import { ExportComponent } from './settings/export.component';
import { FolderAddEditComponent } from './settings/folder-add-edit.component';
import { FoldersComponent } from './settings/folders.component';
import { OptionsComponent } from './settings/options.component';
import { PremiumComponent } from './settings/premium.component';
import { SettingsComponent } from './settings/settings.component';
import { SyncComponent } from './settings/sync.component';
import { VaultTimeoutInputComponent } from './settings/vault-timeout-input.component';
import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
import { ExportComponent } from "./settings/export.component";
import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
import { FoldersComponent } from "./settings/folders.component";
import { OptionsComponent } from "./settings/options.component";
import { PremiumComponent } from "./settings/premium.component";
import { SettingsComponent } from "./settings/settings.component";
import { SyncComponent } from "./settings/sync.component";
import { VaultTimeoutInputComponent } from "./settings/vault-timeout-input.component";
import { AddEditCustomFieldsComponent } from './vault/add-edit-custom-fields.component';
import { AddEditComponent } from './vault/add-edit.component';
import { AttachmentsComponent } from './vault/attachments.component';
import { CiphersComponent } from './vault/ciphers.component';
import { CollectionsComponent } from './vault/collections.component';
import { CurrentTabComponent } from './vault/current-tab.component';
import { GroupingsComponent } from './vault/groupings.component';
import { PasswordHistoryComponent } from './vault/password-history.component';
import { ShareComponent } from './vault/share.component';
import { ViewCustomFieldsComponent } from './vault/view-custom-fields.component';
import { ViewComponent } from './vault/view.component';
import { AddEditCustomFieldsComponent } from "./vault/add-edit-custom-fields.component";
import { AddEditComponent } from "./vault/add-edit.component";
import { AttachmentsComponent } from "./vault/attachments.component";
import { CiphersComponent } from "./vault/ciphers.component";
import { CollectionsComponent } from "./vault/collections.component";
import { CurrentTabComponent } from "./vault/current-tab.component";
import { GroupingsComponent } from "./vault/groupings.component";
import { PasswordHistoryComponent } from "./vault/password-history.component";
import { ShareComponent } from "./vault/share.component";
import { ViewCustomFieldsComponent } from "./vault/view-custom-fields.component";
import { ViewComponent } from "./vault/view.component";
import { EffluxDatesComponent as SendEffluxDatesComponent } from './send/efflux-dates.component';
import { SendAddEditComponent } from './send/send-add-edit.component';
import { SendGroupingsComponent } from './send/send-groupings.component';
import { SendTypeComponent } from './send/send-type.component';
import { EffluxDatesComponent as SendEffluxDatesComponent } from "./send/efflux-dates.component";
import { SendAddEditComponent } from "./send/send-add-edit.component";
import { SendGroupingsComponent } from "./send/send-groupings.component";
import { SendTypeComponent } from "./send/send-type.component";
import { A11yTitleDirective } from 'jslib-angular/directives/a11y-title.directive';
import { ApiActionDirective } from 'jslib-angular/directives/api-action.directive';
import { AutofocusDirective } from 'jslib-angular/directives/autofocus.directive';
import { BlurClickDirective } from 'jslib-angular/directives/blur-click.directive';
import { BoxRowDirective } from 'jslib-angular/directives/box-row.directive';
import { CipherListVirtualScroll } from 'jslib-angular/directives/cipherListVirtualScroll.directive';
import { FallbackSrcDirective } from 'jslib-angular/directives/fallback-src.directive';
import { InputVerbatimDirective } from 'jslib-angular/directives/input-verbatim.directive';
import { SelectCopyDirective } from 'jslib-angular/directives/select-copy.directive';
import { StopClickDirective } from 'jslib-angular/directives/stop-click.directive';
import { StopPropDirective } from 'jslib-angular/directives/stop-prop.directive';
import { TrueFalseValueDirective } from 'jslib-angular/directives/true-false-value.directive';
import { A11yTitleDirective } from "jslib-angular/directives/a11y-title.directive";
import { ApiActionDirective } from "jslib-angular/directives/api-action.directive";
import { AutofocusDirective } from "jslib-angular/directives/autofocus.directive";
import { BlurClickDirective } from "jslib-angular/directives/blur-click.directive";
import { BoxRowDirective } from "jslib-angular/directives/box-row.directive";
import { CipherListVirtualScroll } from "jslib-angular/directives/cipherListVirtualScroll.directive";
import { FallbackSrcDirective } from "jslib-angular/directives/fallback-src.directive";
import { InputVerbatimDirective } from "jslib-angular/directives/input-verbatim.directive";
import { SelectCopyDirective } from "jslib-angular/directives/select-copy.directive";
import { StopClickDirective } from "jslib-angular/directives/stop-click.directive";
import { StopPropDirective } from "jslib-angular/directives/stop-prop.directive";
import { TrueFalseValueDirective } from "jslib-angular/directives/true-false-value.directive";
import { ColorPasswordPipe } from 'jslib-angular/pipes/color-password.pipe';
import { I18nPipe } from 'jslib-angular/pipes/i18n.pipe';
import { SearchCiphersPipe } from 'jslib-angular/pipes/search-ciphers.pipe';
import { ColorPasswordPipe } from "jslib-angular/pipes/color-password.pipe";
import { I18nPipe } from "jslib-angular/pipes/i18n.pipe";
import { SearchCiphersPipe } from "jslib-angular/pipes/search-ciphers.pipe";
import { ActionButtonsComponent } from './components/action-buttons.component';
import { CipherRowComponent } from './components/cipher-row.component';
import { PasswordRepromptComponent } from './components/password-reprompt.component';
import { PopOutComponent } from './components/pop-out.component';
import { SendListComponent } from './components/send-list.component';
import { SetPinComponent } from './components/set-pin.component';
import { VerifyMasterPasswordComponent } from './components/verify-master-password.component';
import { ActionButtonsComponent } from "./components/action-buttons.component";
import { CipherRowComponent } from "./components/cipher-row.component";
import { PasswordRepromptComponent } from "./components/password-reprompt.component";
import { PopOutComponent } from "./components/pop-out.component";
import { SendListComponent } from "./components/send-list.component";
import { SetPinComponent } from "./components/set-pin.component";
import { VerifyMasterPasswordComponent } from "./components/verify-master-password.component";
import { CalloutComponent } from 'jslib-angular/components/callout.component';
import { IconComponent } from 'jslib-angular/components/icon.component';
import { BitwardenToastModule } from 'jslib-angular/components/toastr.component';
import { CalloutComponent } from "jslib-angular/components/callout.component";
import { IconComponent } from "jslib-angular/components/icon.component";
import { BitwardenToastModule } from "jslib-angular/components/toastr.component";
import {
CurrencyPipe,
DatePipe,
registerLocaleData,
} from '@angular/common';
import localeAz from '@angular/common/locales/az';
import localeBe from '@angular/common/locales/be';
import localeBg from '@angular/common/locales/bg';
import localeBn from '@angular/common/locales/bn';
import localeCa from '@angular/common/locales/ca';
import localeCs from '@angular/common/locales/cs';
import localeDa from '@angular/common/locales/da';
import localeDe from '@angular/common/locales/de';
import localeEl from '@angular/common/locales/el';
import localeEnGb from '@angular/common/locales/en-GB';
import localeEnIn from '@angular/common/locales/en-IN';
import localeEs from '@angular/common/locales/es';
import localeEt from '@angular/common/locales/et';
import localeFa from '@angular/common/locales/fa';
import localeFi from '@angular/common/locales/fi';
import localeFr from '@angular/common/locales/fr';
import localeHe from '@angular/common/locales/he';
import localeHr from '@angular/common/locales/hr';
import localeHu from '@angular/common/locales/hu';
import localeId from '@angular/common/locales/id';
import localeIt from '@angular/common/locales/it';
import localeJa from '@angular/common/locales/ja';
import localeKn from '@angular/common/locales/kn';
import localeKo from '@angular/common/locales/ko';
import localeLv from '@angular/common/locales/lv';
import localeMl from '@angular/common/locales/ml';
import localeNb from '@angular/common/locales/nb';
import localeNl from '@angular/common/locales/nl';
import localePl from '@angular/common/locales/pl';
import localePtBr from '@angular/common/locales/pt';
import localePtPt from '@angular/common/locales/pt-PT';
import localeRo from '@angular/common/locales/ro';
import localeRu from '@angular/common/locales/ru';
import localeSk from '@angular/common/locales/sk';
import localeSr from '@angular/common/locales/sr';
import localeSv from '@angular/common/locales/sv';
import localeTh from '@angular/common/locales/th';
import localeTr from '@angular/common/locales/tr';
import localeUk from '@angular/common/locales/uk';
import localeVi from '@angular/common/locales/vi';
import localeZhCn from '@angular/common/locales/zh-Hans';
import localeZhTw from '@angular/common/locales/zh-Hant';
import { CurrencyPipe, DatePipe, registerLocaleData } from "@angular/common";
import localeAz from "@angular/common/locales/az";
import localeBe from "@angular/common/locales/be";
import localeBg from "@angular/common/locales/bg";
import localeBn from "@angular/common/locales/bn";
import localeCa from "@angular/common/locales/ca";
import localeCs from "@angular/common/locales/cs";
import localeDa from "@angular/common/locales/da";
import localeDe from "@angular/common/locales/de";
import localeEl from "@angular/common/locales/el";
import localeEnGb from "@angular/common/locales/en-GB";
import localeEnIn from "@angular/common/locales/en-IN";
import localeEs from "@angular/common/locales/es";
import localeEt from "@angular/common/locales/et";
import localeFa from "@angular/common/locales/fa";
import localeFi from "@angular/common/locales/fi";
import localeFr from "@angular/common/locales/fr";
import localeHe from "@angular/common/locales/he";
import localeHr from "@angular/common/locales/hr";
import localeHu from "@angular/common/locales/hu";
import localeId from "@angular/common/locales/id";
import localeIt from "@angular/common/locales/it";
import localeJa from "@angular/common/locales/ja";
import localeKn from "@angular/common/locales/kn";
import localeKo from "@angular/common/locales/ko";
import localeLv from "@angular/common/locales/lv";
import localeMl from "@angular/common/locales/ml";
import localeNb from "@angular/common/locales/nb";
import localeNl from "@angular/common/locales/nl";
import localePl from "@angular/common/locales/pl";
import localePtBr from "@angular/common/locales/pt";
import localePtPt from "@angular/common/locales/pt-PT";
import localeRo from "@angular/common/locales/ro";
import localeRu from "@angular/common/locales/ru";
import localeSk from "@angular/common/locales/sk";
import localeSr from "@angular/common/locales/sr";
import localeSv from "@angular/common/locales/sv";
import localeTh from "@angular/common/locales/th";
import localeTr from "@angular/common/locales/tr";
import localeUk from "@angular/common/locales/uk";
import localeVi from "@angular/common/locales/vi";
import localeZhCn from "@angular/common/locales/zh-Hans";
import localeZhTw from "@angular/common/locales/zh-Hant";
registerLocaleData(localeAz, 'az');
registerLocaleData(localeBe, 'be');
registerLocaleData(localeBg, 'bg');
registerLocaleData(localeBn, 'bn');
registerLocaleData(localeCa, 'ca');
registerLocaleData(localeCs, 'cs');
registerLocaleData(localeDa, 'da');
registerLocaleData(localeDe, 'de');
registerLocaleData(localeEl, 'el');
registerLocaleData(localeEnGb, 'en-GB');
registerLocaleData(localeEnIn, 'en-IN');
registerLocaleData(localeEs, 'es');
registerLocaleData(localeEt, 'et');
registerLocaleData(localeFa, 'fa');
registerLocaleData(localeFi, 'fi');
registerLocaleData(localeFr, 'fr');
registerLocaleData(localeHe, 'he');
registerLocaleData(localeHr, 'hr');
registerLocaleData(localeHu, 'hu');
registerLocaleData(localeId, 'id');
registerLocaleData(localeIt, 'it');
registerLocaleData(localeJa, 'ja');
registerLocaleData(localeKo, 'ko');
registerLocaleData(localeKn, 'kn');
registerLocaleData(localeLv, 'lv');
registerLocaleData(localeMl, 'ml');
registerLocaleData(localeNb, 'nb');
registerLocaleData(localeNl, 'nl');
registerLocaleData(localePl, 'pl');
registerLocaleData(localePtBr, 'pt-BR');
registerLocaleData(localePtPt, 'pt-PT');
registerLocaleData(localeRo, 'ro');
registerLocaleData(localeRu, 'ru');
registerLocaleData(localeSk, 'sk');
registerLocaleData(localeSr, 'sr');
registerLocaleData(localeSv, 'sv');
registerLocaleData(localeTh, 'th');
registerLocaleData(localeTr, 'tr');
registerLocaleData(localeUk, 'uk');
registerLocaleData(localeVi, 'vi');
registerLocaleData(localeZhCn, 'zh-CN');
registerLocaleData(localeZhTw, 'zh-TW');
registerLocaleData(localeAz, "az");
registerLocaleData(localeBe, "be");
registerLocaleData(localeBg, "bg");
registerLocaleData(localeBn, "bn");
registerLocaleData(localeCa, "ca");
registerLocaleData(localeCs, "cs");
registerLocaleData(localeDa, "da");
registerLocaleData(localeDe, "de");
registerLocaleData(localeEl, "el");
registerLocaleData(localeEnGb, "en-GB");
registerLocaleData(localeEnIn, "en-IN");
registerLocaleData(localeEs, "es");
registerLocaleData(localeEt, "et");
registerLocaleData(localeFa, "fa");
registerLocaleData(localeFi, "fi");
registerLocaleData(localeFr, "fr");
registerLocaleData(localeHe, "he");
registerLocaleData(localeHr, "hr");
registerLocaleData(localeHu, "hu");
registerLocaleData(localeId, "id");
registerLocaleData(localeIt, "it");
registerLocaleData(localeJa, "ja");
registerLocaleData(localeKo, "ko");
registerLocaleData(localeKn, "kn");
registerLocaleData(localeLv, "lv");
registerLocaleData(localeMl, "ml");
registerLocaleData(localeNb, "nb");
registerLocaleData(localeNl, "nl");
registerLocaleData(localePl, "pl");
registerLocaleData(localePtBr, "pt-BR");
registerLocaleData(localePtPt, "pt-PT");
registerLocaleData(localeRo, "ro");
registerLocaleData(localeRu, "ru");
registerLocaleData(localeSk, "sk");
registerLocaleData(localeSr, "sr");
registerLocaleData(localeSv, "sv");
registerLocaleData(localeTh, "th");
registerLocaleData(localeTr, "tr");
registerLocaleData(localeUk, "uk");
registerLocaleData(localeVi, "vi");
registerLocaleData(localeZhCn, "zh-CN");
registerLocaleData(localeZhTw, "zh-TW");
@NgModule({
imports: [
@ -192,7 +188,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
maxOpened: 2,
autoDismiss: true,
closeButton: true,
positionClass: 'toast-bottom-full-width',
positionClass: "toast-bottom-full-width",
}),
],
declarations: [
@ -263,10 +259,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
RemovePasswordComponent,
],
entryComponents: [],
providers: [
CurrencyPipe,
DatePipe,
],
providers: [CurrencyPipe, DatePipe],
bootstrap: [AppComponent],
})
export class AppModule {}

76
src/popup/components/action-buttons.component.html
View File

@ -1,41 +1,87 @@
<span class="row-btn" (click)="view()" appStopClick appStopProp appA11yTitle="{{'view' | i18n}}" *ngIf="showView">
<span
class="row-btn"
(click)="view()"
appStopClick
appStopProp
appA11yTitle="{{ 'view' | i18n }}"
*ngIf="showView"
>
<i class="fa fa-lg fa-list-alt" aria-hidden="true"></i>
</span>
<ng-container *ngIf="cipher.type === cipherType.Login">
<span class="row-btn" appStopClick appStopProp appA11yTitle="{{'launch' | i18n}}" (click)="launchCipher()"
*ngIf="!showView" [ngClass]="{disabled: !cipher.login.canLaunch}">
<span
class="row-btn"
appStopClick
appStopProp
appA11yTitle="{{ 'launch' | i18n }}"
(click)="launchCipher()"
*ngIf="!showView"
[ngClass]="{ disabled: !cipher.login.canLaunch }"
>
<i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
</span>
<span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyUsername' | i18n}}"
<span
class="row-btn"
appStopClick
appStopProp
appA11yTitle="{{ 'copyUsername' | i18n }}"
(click)="copy(cipher, cipher.login.username, 'username', 'Username')"
[ngClass]="{disabled: !cipher.login.username}">
[ngClass]="{ disabled: !cipher.login.username }"
>
<i class="fa fa-lg fa-user" aria-hidden="true"></i>
</span>
<span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyPassword' | i18n}}"
<span
class="row-btn"
appStopClick
appStopProp
appA11yTitle="{{ 'copyPassword' | i18n }}"
(click)="copy(cipher, cipher.login.password, 'password', 'Password')"
[ngClass]="{disabled: (!cipher.login.password || !cipher.viewPassword)}">
[ngClass]="{ disabled: !cipher.login.password || !cipher.viewPassword }"
>
<i class="fa fa-lg fa-key" aria-hidden="true"></i>
</span>
<span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyVerificationCode' | i18n}}"
<span
class="row-btn"
appStopClick
appStopProp
appA11yTitle="{{ 'copyVerificationCode' | i18n }}"
(click)="copy(cipher, cipher.login.totp, 'verificationCodeTotp', 'TOTP')"
[ngClass]="{disabled: (!displayTotpCopyButton(cipher))}">
[ngClass]="{ disabled: !displayTotpCopyButton(cipher) }"
>
<i class="fa fa-lg fa-clock-o" aria-hidden="true"></i>
</span>
</ng-container>
<ng-container *ngIf="cipher.type === cipherType.Card">
<span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyNumber' | i18n}}"
(click)="copy(cipher, cipher.card.number, 'number', 'Card Number')" [ngClass]="{disabled: !cipher.card.number}">
<span
class="row-btn"
appStopClick
appStopProp
appA11yTitle="{{ 'copyNumber' | i18n }}"
(click)="copy(cipher, cipher.card.number, 'number', 'Card Number')"
[ngClass]="{ disabled: !cipher.card.number }"
>
<i class="fa fa-lg fa-hashtag" aria-hidden="true"></i>
</span>
<span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copySecurityCode' | i18n}}"
<span
class="row-btn"
appStopClick
appStopProp
appA11yTitle="{{ 'copySecurityCode' | i18n }}"
(click)="copy(cipher, cipher.card.code, 'securityCode', 'Security Code')"
[ngClass]="{disabled: !cipher.card.code}">
[ngClass]="{ disabled: !cipher.card.code }"
>
<i class="fa fa-lg fa-key" aria-hidden="true"></i>
</span>
</ng-container>
<ng-container *ngIf="cipher.type === cipherType.SecureNote">
<span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyNote' | i18n}}"
(click)="copy(cipher, cipher.notes, 'note', 'Note')" [ngClass]="{disabled: !cipher.notes}">
<span
class="row-btn"
appStopClick
appStopProp
appA11yTitle="{{ 'copyNote' | i18n }}"
(click)="copy(cipher, cipher.notes, 'note', 'Note')"
[ngClass]="{ disabled: !cipher.notes }"
>
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</span>
</ng-container>

68
src/popup/components/action-buttons.component.ts
View File

@ -1,26 +1,21 @@
import {
Component,
EventEmitter,
Input,
Output,
} from '@angular/core';
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { CipherRepromptType } from 'jslib-common/enums/cipherRepromptType';
import { CipherType } from 'jslib-common/enums/cipherType';
import { EventType } from 'jslib-common/enums/eventType';
import { CipherRepromptType } from "jslib-common/enums/cipherRepromptType";
import { CipherType } from "jslib-common/enums/cipherType";
import { EventType } from "jslib-common/enums/eventType";
import { CipherView } from 'jslib-common/models/view/cipherView';
import { CipherView } from "jslib-common/models/view/cipherView";
import { EventService } from 'jslib-common/abstractions/event.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { TotpService } from 'jslib-common/abstractions/totp.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { EventService } from "jslib-common/abstractions/event.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { PasswordRepromptService } from "jslib-common/abstractions/passwordReprompt.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { TotpService } from "jslib-common/abstractions/totp.service";
import { UserService } from "jslib-common/abstractions/user.service";
@Component({
selector: 'app-action-buttons',
templateUrl: 'action-buttons.component.html',
selector: "app-action-buttons",
templateUrl: "action-buttons.component.html",
})
export class ActionButtonsComponent {
@Output() onView = new EventEmitter<CipherView>();
@ -31,10 +26,14 @@ export class ActionButtonsComponent {
cipherType = CipherType;
userHasPremiumAccess = false;
constructor(private i18nService: I18nService,
private platformUtilsService: PlatformUtilsService, private eventService: EventService,
private totpService: TotpService, private userService: UserService,
private passwordRepromptService: PasswordRepromptService) { }
constructor(
private i18nService: I18nService,
private platformUtilsService: PlatformUtilsService,
private eventService: EventService,
private totpService: TotpService,
private userService: UserService,
private passwordRepromptService: PasswordRepromptService
) {}
async ngOnInit() {
this.userHasPremiumAccess = await this.userService.canAccessPremium();
@ -45,12 +44,15 @@ export class ActionButtonsComponent {
}
async copy(cipher: CipherView, value: string, typeI18nKey: string, aType: string) {
if (this.cipher.reprompt !== CipherRepromptType.None && this.passwordRepromptService.protectedFields().includes(aType) &&
!await this.passwordRepromptService.showPasswordPrompt()) {
if (
this.cipher.reprompt !== CipherRepromptType.None &&
this.passwordRepromptService.protectedFields().includes(aType) &&
!(await this.passwordRepromptService.showPasswordPrompt())
) {
return;
}
if (value == null || aType === 'TOTP' && !this.displayTotpCopyButton(cipher)) {
if (value == null || (aType === "TOTP" && !this.displayTotpCopyButton(cipher))) {
return;
} else if (value === cipher.login.totp) {
value = await this.totpService.getCode(value);
@ -61,19 +63,23 @@ export class ActionButtonsComponent {
}
this.platformUtilsService.copyToClipboard(value, { window: window });
this.platformUtilsService.showToast('info', null,
this.i18nService.t('valueCopied', this.i18nService.t(typeI18nKey)));
this.platformUtilsService.showToast(
"info",
null,
this.i18nService.t("valueCopied", this.i18nService.t(typeI18nKey))
);
if (typeI18nKey === 'password' || typeI18nKey === 'verificationCodeTotp') {
if (typeI18nKey === "password" || typeI18nKey === "verificationCodeTotp") {
this.eventService.collect(EventType.Cipher_ClientToggledHiddenFieldVisible, cipher.id);
} else if (typeI18nKey === 'securityCode') {
} else if (typeI18nKey === "securityCode") {
this.eventService.collect(EventType.Cipher_ClientCopiedCardCode, cipher.id);
}
}
displayTotpCopyButton(cipher: CipherView) {
return (cipher?.login?.hasTotp ?? false) &&
(cipher.organizationUseTotp || this.userHasPremiumAccess);
return (
(cipher?.login?.hasTotp ?? false) && (cipher.organizationUseTotp || this.userHasPremiumAccess)
);
}
view() {

29
src/popup/components/cipher-row.component.html
View File

@ -1,5 +1,11 @@
<button type="button" (click)="selectCipher(cipher)" (dblclick)="launchCipher(cipher)" appStopClick
title="{{title}} - {{cipher.name}}" class="box-content-row box-content-row-flex virtual-scroll-item">
<button
type="button"
(click)="selectCipher(cipher)"
(dblclick)="launchCipher(cipher)"
appStopClick
title="{{ title }} - {{ cipher.name }}"
class="box-content-row box-content-row-flex virtual-scroll-item"
>
<div class="row-main">
<app-vault-icon [cipher]="cipher"></app-vault-icon>
<div class="row-main-content">
@ -7,17 +13,26 @@
{{ cipher.name }}
<ng-container *ngIf="cipher.organizationId">
<i class="fa fa-cube text-muted" title="{{ 'shared' | i18n }}" aria-hidden="true"></i>
<span class="sr-only">{{'shared' | i18n}}</span>
<span class="sr-only">{{ "shared" | i18n }}</span>
</ng-container>
<ng-container *ngIf="cipher.hasAttachments">
<i class="fa fa-paperclip text-muted" title="{{'attachments' | i18n}}" aria-hidden="true"></i>
<span class="sr-only">{{'attachments' | i18n}}</span>
<i
class="fa fa-paperclip text-muted"
title="{{ 'attachments' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "attachments" | i18n }}</span>
</ng-container>
</span>
<span class="detail">{{ cipher.subTitle }}</span>
</div>
</div>
<app-action-buttons [cipher]="cipher" [showView]="showView" (onView)="viewCipher(cipher)" (launchEvent)="launchCipher(cipher)"
class="action-buttons">
<app-action-buttons
[cipher]="cipher"
[showView]="showView"
(onView)="viewCipher(cipher)"
(launchEvent)="launchCipher(cipher)"
class="action-buttons"
>
</app-action-buttons>
</button>

13
src/popup/components/cipher-row.component.ts
View File

@ -1,15 +1,10 @@
import {
Component,
EventEmitter,
Input,
Output,
} from '@angular/core';
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { CipherView } from 'jslib-common/models/view/cipherView';
import { CipherView } from "jslib-common/models/view/cipherView";
@Component({
selector: 'app-cipher-row',
templateUrl: 'cipher-row.component.html',
selector: "app-cipher-row",
templateUrl: "cipher-row.component.html",
})
export class CipherRowComponent {
@Output() onSelected = new EventEmitter<CipherView>();

40
src/popup/components/password-reprompt.component.html
View File

@ -3,34 +3,52 @@
<form class="modal-content" #form (ngSubmit)="submit()">
<div class="modal-body">
<div class="box">
<h1 class="box-header">{{'passwordConfirmation' | i18n}}</h1>
<h1 class="box-header">{{ "passwordConfirmation" | i18n }}</h1>
<div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
class="monospaced" [(ngModel)]="masterPassword" required appAutofocus>
<label for="masterPassword">{{ "masterPass" | i18n }}</label>
<input
id="masterPassword"
type="{{ showPassword ? 'text' : 'password' }}"
name="MasterPassword"
class="monospaced"
[(ngModel)]="masterPassword"
required
appAutofocus
/>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appBlurClick role="button"
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" [attr.aria-pressed]="showPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="togglePassword()"
[attr.aria-pressed]="showPassword"
>
<i
class="fa fa-lg"
aria-hidden="true"
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
></i>
</button>
</div>
</div>
</div>
<div class="box-footer">
{{'passwordConfirmationDesc' | i18n}}
{{ "passwordConfirmationDesc" | i18n }}
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit" appBlurClick>
<span>{{'ok' | i18n}}</span>
<span>{{ "ok" | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{'cancel' | i18n}}
{{ "cancel" | i18n }}
</button>
</div>
</form>

6
src/popup/components/password-reprompt.component.ts
View File

@ -1,8 +1,8 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
import { PasswordRepromptComponent as BasePasswordRepromptComponent } from 'jslib-angular/components/password-reprompt.component';
import { PasswordRepromptComponent as BasePasswordRepromptComponent } from "jslib-angular/components/password-reprompt.component";
@Component({
templateUrl: 'password-reprompt.component.html',
templateUrl: "password-reprompt.component.html",
})
export class PasswordRepromptComponent extends BasePasswordRepromptComponent {}

20
src/popup/components/pop-out.component.ts
View File

@ -1,22 +1,20 @@
import {
Component,
Input,
OnInit,
} from '@angular/core';
import { Component, Input, OnInit } from "@angular/core";
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { PopupUtilsService } from '../services/popup-utils.service';
import { PopupUtilsService } from "../services/popup-utils.service";
@Component({
selector: 'app-pop-out',
templateUrl: 'pop-out.component.html',
selector: "app-pop-out",
templateUrl: "pop-out.component.html",
})
export class PopOutComponent implements OnInit {
@Input() show = true;
constructor(private platformUtilsService: PlatformUtilsService,
private popupUtilsService: PopupUtilsService) { }
constructor(
private platformUtilsService: PlatformUtilsService,
private popupUtilsService: PopupUtilsService
) {}
ngOnInit() {
if (this.show) {

74
src/popup/components/send-list.component.html
View File

@ -1,5 +1,11 @@
<button type="button" *ngFor="let s of sends" (click)="selectSend(s)" appStopClick title="{{title}} - {{s.name}}"
class="box-content-row box-content-row-flex">
<button
type="button"
*ngFor="let s of sends"
(click)="selectSend(s)"
appStopClick
title="{{ title }} - {{ s.name }}"
class="box-content-row box-content-row-flex"
>
<div class="row-main">
<div class="app-vault-icon">
<div class="icon" aria-hidden="true">
@ -11,39 +17,73 @@
<span class="text">
{{ s.name }}
<ng-container *ngIf="s.disabled">
<i class="fa fa-warning text-muted" title="{{'disabled' | i18n}}" aria-hidden="true"></i>
<span class="sr-only">{{'disabled' | i18n}}</span>
<i
class="fa fa-warning text-muted"
title="{{ 'disabled' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "disabled" | i18n }}</span>
</ng-container>
<ng-container *ngIf="s.password">
<i class="fa fa-key text-muted" title="{{'passwordProtected' | i18n}}" aria-hidden="true"></i>
<span class="sr-only">{{'passwordProtected' | i18n}}</span>
<i
class="fa fa-key text-muted"
title="{{ 'passwordProtected' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "passwordProtected" | i18n }}</span>
</ng-container>
<ng-container *ngIf="s.maxAccessCountReached">
<i class="fa fa-ban text-muted" title="{{'maxAccessCountReached' | i18n}}" aria-hidden="true"></i>
<span class="sr-only">{{'maxAccessCountReached' | i18n}}</span>
<i
class="fa fa-ban text-muted"
title="{{ 'maxAccessCountReached' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "maxAccessCountReached" | i18n }}</span>
</ng-container>
<ng-container *ngIf="s.expired">
<i class="fa fa-clock-o text-muted" title="{{ 'expired' | i18n }}" aria-hidden="true"></i>
<span class="sr-only">{{'expired' | i18n}}</span>
<span class="sr-only">{{ "expired" | i18n }}</span>
</ng-container>
<ng-container *ngIf="s.pendingDelete">
<i class="fa fa-trash text-muted" title="{{'pendingDeletion' | i18n}}" aria-hidden="true"></i>
<span class="sr-only">{{'pendingDeletion' | i18n}}</span>
<i
class="fa fa-trash text-muted"
title="{{ 'pendingDeletion' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "pendingDeletion" | i18n }}</span>
</ng-container>
</span>
<span class="detail">{{s.deletionDate | date:'medium'}}</span>
<span class="detail">{{ s.deletionDate | date: "medium" }}</span>
</div>
</div>
<div class="action-buttons">
<span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copySendLink' | i18n}}"
(click)="copySendLink(s)">
<span
class="row-btn"
appStopClick
appStopProp
appA11yTitle="{{ 'copySendLink' | i18n }}"
(click)="copySendLink(s)"
>
<i class="fa fa-lg fa-copy" aria-hidden="true"></i>
</span>
<span class="row-btn" [ngClass]="{'disabled' : disabledByPolicy}" appStopClick appStopProp
appA11yTitle="{{'removePassword' | i18n}}" (click)="removePassword(s)" *ngIf="s.password">
<span
class="row-btn"
[ngClass]="{ disabled: disabledByPolicy }"
appStopClick
appStopProp
appA11yTitle="{{ 'removePassword' | i18n }}"
(click)="removePassword(s)"
*ngIf="s.password"
>
<i class="fa fa-lg fa-undo" aria-hidden="true"></i>
</span>
<span class="row-btn" appStopClick appStopProp appA11yTitle="{{'delete' | i18n}}" (click)="delete(s)">
<span
class="row-btn"
appStopClick
appStopProp
appA11yTitle="{{ 'delete' | i18n }}"
(click)="delete(s)"
>
<i class="fa fa-lg fa-trash-o" aria-hidden="true"></i>
</span>
</div>

15
src/popup/components/send-list.component.ts
View File

@ -1,17 +1,12 @@
import {
Component,
EventEmitter,
Input,
Output,
} from '@angular/core';
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { SendView } from 'jslib-common/models/view/sendView';
import { SendView } from "jslib-common/models/view/sendView";
import { SendType } from 'jslib-common/enums/sendType';
import { SendType } from "jslib-common/enums/sendType";
@Component({
selector: 'app-send-list',
templateUrl: 'send-list.component.html',
selector: "app-send-list",
templateUrl: "send-list.component.html",
})
export class SendListComponent {
@Input() sends: SendView[];

47
src/popup/components/set-pin.component.html
View File

@ -3,21 +3,38 @@
<form class="modal-content" #form (ngSubmit)="submit()">
<div class="modal-body">
<div>
{{'setYourPinCode' | i18n}}
{{ "setYourPinCode" | i18n }}
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="pin">{{'pin' | i18n}}</label>
<input id="pin" type="{{showPin ? 'text' : 'password'}}" name="Pin"
class="monospaced" [(ngModel)]="pin" required appInputVerbatim>
<label for="pin">{{ "pin" | i18n }}</label>
<input
id="pin"
type="{{ showPin ? 'text' : 'password' }}"
name="Pin"
class="monospaced"
[(ngModel)]="pin"
required
appInputVerbatim
/>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appBlurClick appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="toggleVisibility()" [attr.aria-pressed]="showPin">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPin, 'fa-eye-slash': showPin}"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="toggleVisibility()"
[attr.aria-pressed]="showPin"
>
<i
class="fa fa-lg"
aria-hidden="true"
[ngClass]="{ 'fa-eye': !showPin, 'fa-eye-slash': showPin }"
></i>
</button>
</div>
</div>
@ -25,18 +42,22 @@
</div>
<div class="checkbox" *ngIf="showMasterPassOnRestart">
<label for="masterPasswordOnRestart">
<input type="checkbox" id="masterPasswordOnRestart" name="MasterPasswordOnRestart"
[(ngModel)]="masterPassOnRestart">
<span>{{'lockWithMasterPassOnRestart' | i18n}}</span>
<input
type="checkbox"
id="masterPasswordOnRestart"
name="MasterPasswordOnRestart"
[(ngModel)]="masterPassOnRestart"
/>
<span>{{ "lockWithMasterPassOnRestart" | i18n }}</span>
</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit" appBlurClick>
<span>{{'ok' | i18n}}</span>
<span>{{ "ok" | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{'cancel' | i18n}}
{{ "cancel" | i18n }}
</button>
</div>
</form>

6
src/popup/components/set-pin.component.ts
View File

@ -1,8 +1,8 @@
import { Component } from '@angular/core';
import { Component } from "@angular/core";
import { SetPinComponent as BaseSetPinComponent } from 'jslib-angular/components/set-pin.component';
import { SetPinComponent as BaseSetPinComponent } from "jslib-angular/components/set-pin.component";
@Component({
templateUrl: 'set-pin.component.html',
templateUrl: "set-pin.component.html",
})
export class SetPinComponent extends BaseSetPinComponent {}

41
src/popup/components/verify-master-password.component.html
View File

@ -1,25 +1,46 @@
<ng-container *ngIf="!usesKeyConnector">
<div class="box-content-row" appBoxRow>
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
[formControl]="secret" required appAutofocus appInputVerbatim>
<label for="masterPassword">{{ "masterPass" | i18n }}</label>
<input
id="masterPassword"
type="password"
name="MasterPasswordHash"
class="form-control"
[formControl]="secret"
required
appAutofocus
appInputVerbatim
/>
</div>
</ng-container>
<ng-container *ngIf="usesKeyConnector">
<div class="box-content-row" appBoxRow>
<label class="d-block">{{'sendVerificationCode' | i18n}}</label>
<button type="button" class="btn btn-outline-secondary" (click)="requestOTP()" [disabled]="disableRequestOTP">
{{'sendCode' | i18n}}
<label class="d-block">{{ "sendVerificationCode" | i18n }}</label>
<button
type="button"
class="btn btn-outline-secondary"
(click)="requestOTP()"
[disabled]="disableRequestOTP"
>
{{ "sendCode" | i18n }}
</button>
<span class="ml-2 text-success" role="alert" @sent *ngIf="sentCode">
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
{{'codeSent' | i18n}}
{{ "codeSent" | i18n }}
</span>
</div>
<div class="box-content-row" appBoxRow>
<label for="verificationCode">{{'verificationCode' | i18n}}</label>
<input id="verificationCode" type="input" name="verificationCode" class="form-control"
[formControl]="secret" required appAutofocus appInputVerbatim>
<label for="verificationCode">{{ "verificationCode" | i18n }}</label>
<input
id="verificationCode"
type="input"
name="verificationCode"
class="form-control"
[formControl]="secret"
required
appAutofocus
appInputVerbatim
/>
</div>
</ng-container>

24
src/popup/components/verify-master-password.component.ts
View File

@ -1,17 +1,12 @@
import {
animate,
style,
transition,
trigger,
} from '@angular/animations';
import { Component } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { animate, style, transition, trigger } from "@angular/animations";
import { Component } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { VerifyMasterPasswordComponent as BaseComponent } from 'jslib-angular/components/verify-master-password.component';
import { VerifyMasterPasswordComponent as BaseComponent } from "jslib-angular/components/verify-master-password.component";
@Component({
selector: 'app-verify-master-password',
templateUrl: 'verify-master-password.component.html',
selector: "app-verify-master-password",
templateUrl: "verify-master-password.component.html",
providers: [
{
provide: NG_VALUE_ACCESSOR,
@ -20,11 +15,8 @@ import { VerifyMasterPasswordComponent as BaseComponent } from 'jslib-angular/co
},
],
animations: [
trigger('sent', [
transition(':enter', [
style({ opacity: 0 }),
animate('100ms', style({ opacity: 1 })),
]),
trigger("sent", [
transition(":enter", [style({ opacity: 0 }), animate("100ms", style({ opacity: 1 }))]),
]),
],
})

26
src/popup/generator/password-generator-history.component.html
View File

@ -2,15 +2,15 @@
<div class="left">
<button type="button" appBlurClick type="button" (click)="close()">
<span class="header-icon" aria-hidden="true"><i class="fa fa-chevron-left"></i></span>
<span>{{'back' | i18n}}</span>
<span>{{ "back" | i18n }}</span>
</button>
</div>
<h1 class="center">
<span class="title">{{'passwordHistory' | i18n}}</span>
<span class="title">{{ "passwordHistory" | i18n }}</span>
</h1>
<div class="right">
<button type="button" appBlurClick type="button" (click)="clear()">
{{'clear' | i18n}}
{{ "clear" | i18n }}
</button>
</div>
</header>
@ -20,14 +20,22 @@
<div class="box-content-row box-content-row-flex" *ngFor="let h of history">
<div class="row-main">
<div class="row-main-content">
<div class="monospaced password-wrapper" appSelectCopy
[innerHTML]="h.password | colorPassword"></div>
<span class="detail">{{h.date | date:'medium'}}</span>
<div
class="monospaced password-wrapper"
appSelectCopy
[innerHTML]="h.password | colorPassword"
></div>
<span class="detail">{{ h.date | date: "medium" }}</span>
</div>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
(click)="copy(h.password)">
<button
type="button"
class="row-btn"
appStopClick
appA11yTitle="{{ 'copyPassword' | i18n }}"
(click)="copy(h.password)"
>
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</button>
</div>
@ -35,6 +43,6 @@
</div>
</div>
<div class="no-items" *ngIf="!history || !history.length">
<p>{{'noPasswordsInList' | i18n}}</p>
<p>{{ "noPasswordsInList" | i18n }}</p>
</div>
</content>

26
src/popup/generator/password-generator-history.component.ts
View File

@ -1,21 +1,23 @@
import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { Location } from "@angular/common";
import { Component } from "@angular/core";
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import {
PasswordGeneratorHistoryComponent as BasePasswordGeneratorHistoryComponent,
} from 'jslib-angular/components/password-generator-history.component';
import { PasswordGeneratorHistoryComponent as BasePasswordGeneratorHistoryComponent } from "jslib-angular/components/password-generator-history.component";
@Component({
selector: 'app-password-generator-history',
templateUrl: 'password-generator-history.component.html',
selector: "app-password-generator-history",
templateUrl: "password-generator-history.component.html",
})
export class PasswordGeneratorHistoryComponent extends BasePasswordGeneratorHistoryComponent {
constructor(passwordGenerationService: PasswordGenerationService, platformUtilsService: PlatformUtilsService,
i18nService: I18nService, private location: Location) {
constructor(
passwordGenerationService: PasswordGenerationService,
platformUtilsService: PlatformUtilsService,
i18nService: I18nService,
private location: Location
) {
super(passwordGenerationService, platformUtilsService, i18nService, window);
}

193
src/popup/generator/password-generator.component.html
View File

@ -1,48 +1,73 @@
<header>
<div class="left">
<app-pop-out [show]="!showSelect"></app-pop-out>
<button type="button" appBlurClick (click)="close()" *ngIf="showSelect">{{'cancel' | i18n}}</button>
<button type="button" appBlurClick (click)="close()" *ngIf="showSelect">
{{ "cancel" | i18n }}
</button>
</div>
<h1 class="center">
<span class="title">{{'passGen' | i18n}}</span>
<span class="title">{{ "passGen" | i18n }}</span>
</h1>
<div class="right">
<button type="button" appBlurClick (click)="select()" *ngIf="showSelect">{{'select' | i18n}}</button>
<button type="button" appBlurClick (click)="select()" *ngIf="showSelect">
{{ "select" | i18n }}
</button>
</div>
</header>
<content>
<app-callout type="info" *ngIf="enforcedPolicyOptions?.inEffect()">
{{'passwordGeneratorPolicyInEffect' | i18n}}
{{ "passwordGeneratorPolicyInEffect" | i18n }}
</app-callout>
<div class="password-block">
<div class="password-wrapper" [innerHTML]="password | colorPassword" appSelectCopy></div>
</div>
<div class="box list">
<div class="box-content single-line">
<button type="button" class="box-content-row text-primary" appStopClick appBlurClick
(click)="regenerate()">{{'regeneratePassword' | i18n}}</button>
<button type="button" class="box-content-row text-primary" appStopClick appBlurClick
(click)="copy()">{{'copyPassword' | i18n}}</button>
<button
type="button"
class="box-content-row text-primary"
appStopClick
appBlurClick
(click)="regenerate()"
>
{{ "regeneratePassword" | i18n }}
</button>
<button
type="button"
class="box-content-row text-primary"
appStopClick
appBlurClick
(click)="copy()"
>
{{ "copyPassword" | i18n }}
</button>
</div>
</div>
<div class="box list">
<div class="box-content single-line">
<a class="box-content-row box-content-row-flex" routerLink="/generator-history">
<div class="row-main">{{'passwordHistory' | i18n}}</div>
<div class="row-main">{{ "passwordHistory" | i18n }}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="box">
<h2 class="box-header">
{{'options' | i18n}}
{{ "options" | i18n }}
</h2>
<div class="box-content">
<div class="box-content-row">
<label class="sr-only radio-header">{{'type' | i18n}}</label>
<label class="sr-only radio-header">{{ "type" | i18n }}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of passTypeOptions">
<input type="radio" [(ngModel)]="options.type" name="Type_{{o.value}}" id="type_{{o.value}}"
[value]="o.value" (change)="saveOptions()" [checked]="options.type === o.value">
<input
type="radio"
[(ngModel)]="options.type"
name="Type_{{ o.value }}"
id="type_{{ o.value }}"
[value]="o.value"
(change)="saveOptions()"
[checked]="options.type === o.value"
/>
<label for="type_{{ o.value }}">
{{ o.name }}
</label>
@ -53,24 +78,45 @@
<div class="box" *ngIf="options.type === 'passphrase'">
<div class="box-content">
<div class="box-content-row box-content-row-input" appBoxRow>
<label for="num-words">{{'numWords' | i18n}}</label>
<input id="num-words" type="number" min="3" max="20" (change)="saveOptions()"
[(ngModel)]="options.numWords">
<label for="num-words">{{ "numWords" | i18n }}</label>
<input
id="num-words"
type="number"
min="3"
max="20"
(change)="saveOptions()"
[(ngModel)]="options.numWords"
/>
</div>
<div class="box-content-row box-content-row-input" appBoxRow>
<label for="word-separator">{{'wordSeparator' | i18n}}</label>
<input id="word-separator" type="text" maxlength="1" (input)="saveOptions()"
[(ngModel)]="options.wordSeparator">
<label for="word-separator">{{ "wordSeparator" | i18n }}</label>
<input
id="word-separator"
type="text"
maxlength="1"
(input)="saveOptions()"
[(ngModel)]="options.wordSeparator"
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="capitalize">{{'capitalize' | i18n}}</label>
<input id="capitalize" type="checkbox" (change)="saveOptions()" [(ngModel)]="options.capitalize"
[disabled]="enforcedPolicyOptions?.capitalize">
<label for="capitalize">{{ "capitalize" | i18n }}</label>
<input
id="capitalize"
type="checkbox"
(change)="saveOptions()"
[(ngModel)]="options.capitalize"
[disabled]="enforcedPolicyOptions?.capitalize"
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="include-number">{{'includeNumber' | i18n}}</label>
<input id="include-number" type="checkbox" (change)="saveOptions()" [(ngModel)]="options.includeNumber"
[disabled]="enforcedPolicyOptions?.includeNumber">
<label for="include-number">{{ "includeNumber" | i18n }}</label>
<input
id="include-number"
type="checkbox"
(change)="saveOptions()"
[(ngModel)]="options.includeNumber"
[disabled]="enforcedPolicyOptions?.includeNumber"
/>
</div>
</div>
</div>
@ -78,49 +124,104 @@
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-slider" appBoxRow>
<label for="length">{{'length' | i18n}}</label>
<input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
(change)="saveOptions()">
<input id="lengthRange" type="range" min="5" max="128" step="1" [(ngModel)]="options.length"
(change)="sliderChanged()" (input)="sliderInput()">
<label for="length">{{ "length" | i18n }}</label>
<input
id="length"
type="number"
min="5"
max="128"
[(ngModel)]="options.length"
(change)="saveOptions()"
/>
<input
id="lengthRange"
type="range"
min="5"
max="128"
step="1"
[(ngModel)]="options.length"
(change)="sliderChanged()"
(input)="sliderInput()"
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="uppercase">A-Z</label>
<input id="uppercase" type="checkbox" (change)="saveOptions()" attr.aria-label="{{'uppercase' | i18n}}"
[disabled]="enforcedPolicyOptions.useUppercase" [(ngModel)]="options.uppercase">
<input
id="uppercase"
type="checkbox"
(change)="saveOptions()"
attr.aria-label="{{ 'uppercase' | i18n }}"
[disabled]="enforcedPolicyOptions.useUppercase"
[(ngModel)]="options.uppercase"
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="lowercase">a-z</label>
<input id="lowercase" type="checkbox" (change)="saveOptions()" attr.aria-label="{{'lowercase' | i18n}}"
[disabled]="enforcedPolicyOptions.useLowercase" [(ngModel)]="options.lowercase">
<input
id="lowercase"
type="checkbox"
(change)="saveOptions()"
attr.aria-label="{{ 'lowercase' | i18n }}"
[disabled]="enforcedPolicyOptions.useLowercase"
[(ngModel)]="options.lowercase"
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="numbers">0-9</label>
<input id="numbers" type="checkbox" (change)="saveOptions()" attr.aria-label="{{'numbers' | i18n}}"
[disabled]="enforcedPolicyOptions.useNumbers" [(ngModel)]="options.number">
<input
id="numbers"
type="checkbox"
(change)="saveOptions()"
attr.aria-label="{{ 'numbers' | i18n }}"
[disabled]="enforcedPolicyOptions.useNumbers"
[(ngModel)]="options.number"
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="special">!@#$%^&*</label>
<input id="special" type="checkbox" (change)="saveOptions()" attr.aria-label="{{'specialCharacters' | i18n}}"
[disabled]="enforcedPolicyOptions.useSpecial" [(ngModel)]="options.special">
<input
id="special"
type="checkbox"
(change)="saveOptions()"
attr.aria-label="{{ 'specialCharacters' | i18n }}"
[disabled]="enforcedPolicyOptions.useSpecial"
[(ngModel)]="options.special"
/>
</div>
</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-input" appBoxRow>
<label for="min-number">{{'minNumbers' | i18n}}</label>
<input id="min-number" type="number" min="0" max="9" (change)="saveOptions()"
[(ngModel)]="options.minNumber">
<label for="min-number">{{ "minNumbers" | i18n }}</label>
<input
id="min-number"
type="number"
min="0"
max="9"
(change)="saveOptions()"
[(ngModel)]="options.minNumber"
/>
</div>
<div class="box-content-row box-content-row-input" appBoxRow>
<label for="min-special">{{'minSpecial' | i18n}}</label>
<input id="min-special" type="number" min="0" max="9" (change)="saveOptions()"
[(ngModel)]="options.minSpecial">
<label for="min-special">{{ "minSpecial" | i18n }}</label>
<input
id="min-special"
type="number"
min="0"
max="9"
(change)="saveOptions()"
[(ngModel)]="options.minSpecial"
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="ambiguous">{{'avoidAmbChar' | i18n}}</label>
<input id="ambiguous" type="checkbox" (change)="saveOptions()" [(ngModel)]="avoidAmbiguous">
<label for="ambiguous">{{ "avoidAmbChar" | i18n }}</label>
<input
id="ambiguous"
type="checkbox"
(change)="saveOptions()"
[(ngModel)]="avoidAmbiguous"
/>
</div>
</div>
</div>

34
src/popup/generator/password-generator.component.ts
View File

@ -1,33 +1,35 @@
import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { Location } from "@angular/common";
import { Component } from "@angular/core";
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { StateService } from 'jslib-common/abstractions/state.service';
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { StateService } from "jslib-common/abstractions/state.service";
import { CipherView } from 'jslib-common/models/view/cipherView';
import { CipherView } from "jslib-common/models/view/cipherView";
import {
PasswordGeneratorComponent as BasePasswordGeneratorComponent,
} from 'jslib-angular/components/password-generator.component';
import { PasswordGeneratorComponent as BasePasswordGeneratorComponent } from "jslib-angular/components/password-generator.component";
@Component({
selector: 'app-password-generator',
templateUrl: 'password-generator.component.html',
selector: "app-password-generator",
templateUrl: "password-generator.component.html",
})
export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
private cipherState: CipherView;
constructor(passwordGenerationService: PasswordGenerationService, platformUtilsService: PlatformUtilsService,
i18nService: I18nService, private stateService: StateService,
private location: Location) {
constructor(
passwordGenerationService: PasswordGenerationService,
platformUtilsService: PlatformUtilsService,
i18nService: I18nService,
private stateService: StateService,
private location: Location
) {
super(passwordGenerationService, platformUtilsService, i18nService, window);
}
async ngOnInit() {
await super.ngOnInit();
const addEditCipherInfo = await this.stateService.get<any>('addEditCipherInfo');
const addEditCipherInfo = await this.stateService.get<any>("addEditCipherInfo");
if (addEditCipherInfo != null) {
this.cipherState = addEditCipherInfo.cipher;
}

6
src/popup/index.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html class="__BROWSER__">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bitwarden</title>
<base href="">
<base href="" />
</head>
<body>
<app-root>

10
src/popup/main.ts
View File

@ -1,12 +1,12 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
// tslint:disable-next-line
require('./scss/popup.scss');
require("./scss/popup.scss");
import { AppModule } from './app.module';
import { AppModule } from "./app.module";
if (process.env.ENV === 'production') {
if (process.env.ENV === "production") {
enableProdMode();
}

8
src/popup/polyfills.ts
View File

@ -1,6 +1,6 @@
/* tslint:disable */
import 'core-js/stable';
import 'date-input-polyfill';
import 'web-animations-js';
import 'zone.js/dist/zone';
import "core-js/stable";
import "date-input-polyfill";
import "web-animations-js";
import "zone.js/dist/zone";
/* tslint:enable */

19
src/popup/private-mode.component.ts
View File

@ -1,24 +1,23 @@
import { BrowserApi } from '../browser/browserApi';
import { BrowserApi } from "../browser/browserApi";
import {
Component,
OnInit,
} from '@angular/core';
import { Component, OnInit } from "@angular/core";
@Component({
selector: 'app-private-mode',
templateUrl: 'private-mode.component.html',
selector: "app-private-mode",
templateUrl: "private-mode.component.html",
})
export class PrivateModeComponent implements OnInit {
privateModeMessage: string;
learnMoreMessage: string;
ngOnInit() {
this.privateModeMessage = chrome.i18n.getMessage('privateModeMessage');
this.learnMoreMessage = chrome.i18n.getMessage('learnMore');
this.privateModeMessage = chrome.i18n.getMessage("privateModeMessage");
this.learnMoreMessage = chrome.i18n.getMessage("learnMore");
}
learnMore() {
BrowserApi.createNewTab('https://help.bitwarden.com/article/extension-wont-load-in-private-mode/');
BrowserApi.createNewTab(
"https://help.bitwarden.com/article/extension-wont-load-in-private-mode/"
);
}
}

109
src/popup/scss/base.scss
View File

@ -6,7 +6,8 @@
margin: 0;
}
html, body {
html,
body {
font-family: $font-family-sans-serif;
font-size: $font-size-base;
line-height: $line-height-base;
@ -21,8 +22,8 @@ body {
background-color: $background-color;
@include themify($themes) {
color: themed('textColor');
background-color: themed('backgroundColor');
color: themed("textColor");
background-color: themed("backgroundColor");
}
&.body-sm {
@ -41,7 +42,12 @@ body {
}
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-family-sans-serif;
font-size: $font-size-base;
font-weight: normal;
@ -51,7 +57,8 @@ p {
margin-bottom: 10px;
}
ul, ol {
ul,
ol {
margin-bottom: 10px;
}
@ -63,24 +70,30 @@ a {
text-decoration: none;
@include themify($themes) {
color: themed('primaryColor');
color: themed("primaryColor");
}
&:hover, &:focus {
&:hover,
&:focus {
@include themify($themes) {
color: darken(themed('primaryColor'), 6%);
color: darken(themed("primaryColor"), 6%);
}
}
}
input, select, textarea {
input,
select,
textarea {
@include themify($themes) {
color: themed('textColor');
background-color: themed('inputBackgroundColor');
color: themed("textColor");
background-color: themed("inputBackgroundColor");
}
}
input, select, textarea, button {
input,
select,
textarea,
button {
font-size: $font-size-base;
font-family: $font-family-sans-serif;
}
@ -98,7 +111,8 @@ main {
height: 100%;
}
content::-webkit-scrollbar, cdk-virtual-scroll-viewport::-webkit-scrollbar {
content::-webkit-scrollbar,
cdk-virtual-scroll-viewport::-webkit-scrollbar {
width: 10px;
height: 10px;
}
@ -109,21 +123,22 @@ content::-webkit-scrollbar-track {
cdk-virtual-scroll-viewport::-webkit-scrollbar-track {
@include themify($themes) {
background-color: themed('backgroundColor');
background-color: themed("backgroundColor");
}
}
content::-webkit-scrollbar-thumb, cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb {
content::-webkit-scrollbar-thumb,
cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb {
border-radius: 10px;
margin-right: 1px;
@include themify($themes) {
background-color: themed('scrollbarColor');
background-color: themed("scrollbarColor");
}
&:hover {
@include themify($themes) {
background-color: themed('scrollbarHoverColor');
background-color: themed("scrollbarHoverColor");
}
}
}
@ -135,12 +150,13 @@ header {
border-bottom: 1px solid #000000;
@include themify($themes) {
color: themed('headerColor');
background-color: themed('headerBackgroundColor');
border-bottom-color: themed('headerBorderColor');
color: themed("headerColor");
background-color: themed("headerBackgroundColor");
border-bottom-color: themed("headerBorderColor");
}
.left, .right {
.left,
.right {
flex: 1;
display: flex;
min-width: -webkit-min-content; /* Workaround to Chrome bug */
@ -160,7 +176,9 @@ header {
min-width: 0;
}
app-pop-out > button, div > button, div > a {
app-pop-out > button,
div > button,
div > a {
border: none;
padding: 0 10px;
text-decoration: none;
@ -170,14 +188,15 @@ header {
align-items: center;
@include themify($themes) {
color: themed('headerColor');
background-color: themed('headerBackgroundColor');
color: themed("headerColor");
background-color: themed("headerBackgroundColor");
}
&:hover, &:focus {
&:hover,
&:focus {
@include themify($themes) {
background-color: themed('headerBackgroundHoverColor');
color: themed('headerColor');
background-color: themed("headerBackgroundHoverColor");
color: themed("headerColor");
}
}
@ -219,7 +238,7 @@ header {
left: 20px;
@include themify($themes) {
color: themed('headerInputPlaceholderColor');
color: themed("headerInputPlaceholderColor");
}
}
@ -231,8 +250,8 @@ header {
border-radius: $border-radius;
@include themify($themes) {
background-color: themed('headerInputBackgroundColor');
color: themed('headerInputColor');
background-color: themed("headerInputBackgroundColor");
color: themed("headerInputColor");
}
&:focus {
@ -240,13 +259,13 @@ header {
outline: none;
@include themify($themes) {
background-color: themed('headerInputBackgroundFocusColor');
background-color: themed("headerInputBackgroundFocusColor");
}
}
&::-webkit-input-placeholder {
@include themify($themes) {
color: themed('headerInputPlaceholderColor');
color: themed("headerInputPlaceholderColor");
}
}
}
@ -280,8 +299,8 @@ header {
overflow: hidden;
@include themify($themes) {
background-color: themed('tabBackgroundColor');
border-top-color: themed('borderColor');
background-color: themed("tabBackgroundColor");
border-top-color: themed("borderColor");
}
ul {
@ -307,12 +326,13 @@ header {
text-overflow: ellipsis;
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
&:hover, &:focus {
&:hover,
&:focus {
@include themify($themes) {
background-color: themed('tabBackgroundHoverColor');
background-color: themed("tabBackgroundHoverColor");
}
}
@ -326,7 +346,7 @@ header {
&.active {
a {
@include themify($themes) {
color: themed('primaryColor');
color: themed("primaryColor");
}
}
}
@ -340,7 +360,7 @@ app-root {
height: 100%;
z-index: 980;
@include themify($themes) {
background-color: themed('backgroundColor');
background-color: themed("backgroundColor");
}
}
@ -380,7 +400,7 @@ content {
overflow-x: hidden;
@include themify($themes) {
background-color: themed('backgroundColor');
background-color: themed("backgroundColor");
}
&.no-header {
@ -404,7 +424,9 @@ content {
}
}
.center-content, .no-items, .full-loading-spinner {
.center-content,
.no-items,
.full-loading-spinner {
display: flex;
justify-content: center;
align-items: center;
@ -413,14 +435,15 @@ content {
flex-grow: 1;
}
.no-items, .full-loading-spinner {
.no-items,
.full-loading-spinner {
text-align: center;
.fa {
margin-bottom: 10px;
@include themify($themes) {
color: themed('disabledIconColor');
color: themed("disabledIconColor");
}
}
}

139
src/popup/scss/box.scss
View File

@ -15,7 +15,7 @@
display: flex;
@include themify($themes) {
color: themed('headingColor');
color: themed("headingColor");
}
}
@ -28,12 +28,14 @@
box-sizing: border-box;
@include themify($themes) {
color: themed('headingColor');
color: themed("headingColor");
}
&:hover, &:focus, &.active {
&:hover,
&:focus,
&.active {
@include themify($themes) {
background-color: themed('boxBackgroundHoverColor');
background-color: themed("boxBackgroundHoverColor");
}
}
@ -43,7 +45,7 @@
margin-left: 5px;
@include themify($themes) {
color: themed('headingColor');
color: themed("headingColor");
}
}
}
@ -53,21 +55,24 @@
border-bottom: 1px solid #000000;
@include themify($themes) {
background-color: themed('boxBackgroundColor');
border-color: themed('borderColor');
background-color: themed("boxBackgroundColor");
border-color: themed("borderColor");
}
&.box-content-padded {
padding: 10px 15px;
}
&.condensed .box-content-row, .box-content-row.condensed {
&.condensed .box-content-row,
.box-content-row.condensed {
padding-top: 5px;
padding-bottom: 5px;
}
&.no-hover .box-content-row, .box-content-row.no-hover {
&:hover, &:focus {
&.no-hover .box-content-row,
.box-content-row.no-hover {
&:hover,
&:focus {
background-color: initial !important;
}
}
@ -78,7 +83,7 @@
font-size: $font-size-small;
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
}
@ -89,7 +94,7 @@
text-decoration: none;
@include themify($themes) {
color: themed('textColor');
color: themed("textColor");
}
&.padded {
@ -97,9 +102,11 @@
padding-bottom: 10px;
}
&:hover, &:focus, &.active {
&:hover,
&:focus,
&.active {
@include themify($themes) {
background-color: themed('listItemBackgroundHoverColor');
background-color: themed("listItemBackgroundHoverColor");
}
}
@ -108,7 +115,7 @@
padding-left: 5px;
@include themify($themes) {
border-left-color: themed('mutedColor');
border-left-color: themed("mutedColor");
}
}
@ -119,7 +126,8 @@
}
}
.text:not(.no-ellipsis), .detail {
.text:not(.no-ellipsis),
.detail {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -172,7 +180,7 @@
padding-top: 10px;
@include themify($themes) {
border-color: themed('borderColor');
border-color: themed("borderColor");
}
}
@ -192,7 +200,7 @@
border-bottom: 1px solid #000000;
@include themify($themes) {
border-bottom-color: themed('boxBorderColor');
border-bottom-color: themed("boxBorderColor");
}
}
@ -206,7 +214,7 @@
&.last:last-child:before {
border-bottom: 1px solid #000000;
@include themify($themes) {
border-bottom-color: themed('boxBorderColor');
border-bottom-color: themed("boxBorderColor");
}
}
@ -216,9 +224,11 @@
clear: both;
}
&:hover, &:focus, &.active {
&:hover,
&:focus,
&.active {
@include themify($themes) {
background-color: themed('boxBackgroundHoverColor');
background-color: themed("boxBackgroundHoverColor");
}
}
@ -232,14 +242,15 @@
overflow-x: auto;
}
.row-label, label {
.row-label,
label {
font-size: $font-size-small;
display: block;
width: 100%;
margin-bottom: 5px;
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
.sub-label {
@ -254,7 +265,7 @@
margin-bottom: 5px;
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
> a {
@ -262,11 +273,12 @@
}
}
.text, .detail {
.text,
.detail {
display: block;
@include themify($themes) {
color: themed('textColor');
color: themed("textColor");
}
}
@ -274,7 +286,7 @@
font-size: $font-size-small;
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
}
@ -288,8 +300,12 @@
min-width: 0;
}
&.box-content-row-flex, .box-content-row-flex, &.box-content-row-checkbox,
&.box-content-row-input, &.box-content-row-slider, &.box-content-row-multi {
&.box-content-row-flex,
.box-content-row-flex,
&.box-content-row-checkbox,
&.box-content-row-input,
&.box-content-row-slider,
&.box-content-row-multi {
display: flex;
align-items: center;
word-break: break-all;
@ -316,37 +332,40 @@
margin: 0;
@include themify($themes) {
color: themed('dangerColor');
color: themed("dangerColor");
}
}
}
&.box-content-row-multi, &.box-content-row-newmulti {
&.box-content-row-multi,
&.box-content-row-newmulti {
padding-left: 10px;
}
&.box-content-row-newmulti {
@include themify($themes) {
color: themed('primaryColor');
color: themed("primaryColor");
}
}
&.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
label, .row-label {
&.box-content-row-checkbox,
&.box-content-row-input,
&.box-content-row-slider {
label,
.row-label {
font-size: $font-size-base;
display: block;
width: initial;
margin-bottom: 0;
@include themify($themes) {
color: themed('textColor');
color: themed("textColor");
}
}
> span {
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
}
@ -400,14 +419,15 @@
}
}
input:not([type="checkbox"]):not([type="radio"]), textarea {
input:not([type="checkbox"]):not([type="radio"]),
textarea {
border: none;
width: 100%;
background-color: transparent !important;
&::-webkit-input-placeholder {
@include themify($themes) {
color: themed('inputPlaceholderColor');
color: themed("inputPlaceholderColor");
}
}
@ -422,7 +442,7 @@
border-radius: $border-radius;
@include themify($themes) {
border-color: themed('inputBorderColor');
border-color: themed("inputBorderColor");
}
}
@ -437,25 +457,26 @@
border: none;
@include themify($themes) {
color: themed('boxRowButtonColor');
color: themed("boxRowButtonColor");
}
&:hover, &:focus {
&:hover,
&:focus {
@include themify($themes) {
color: themed('boxRowButtonHoverColor');
color: themed("boxRowButtonHoverColor");
}
}
&.disabled {
@include themify($themes) {
color: themed('disabledIconColor');
opacity: themed('disabledBoxOpacity');
color: themed("disabledIconColor");
opacity: themed("disabledBoxOpacity");
}
&:hover {
@include themify($themes) {
color: themed('disabledIconColor');
opacity: themed('disabledBoxOpacity');
color: themed("disabledIconColor");
opacity: themed("disabledBoxOpacity");
}
}
cursor: default !important;
@ -488,7 +509,7 @@
user-select: none;
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
}
@ -499,7 +520,7 @@
opacity: 0.8;
@include themify($themes) {
background-color: themed('boxBackgroundColor');
background-color: themed("boxBackgroundColor");
}
}
@ -508,9 +529,10 @@
width: calc(100% - 25px);
}
.row-sub-icon, .row-sub-label + i.fa {
.row-sub-icon,
.row-sub-label + i.fa {
@include themify($themes) {
color: themed('disabledIconColor');
color: themed("disabledIconColor");
}
}
@ -519,7 +541,7 @@
white-space: nowrap;
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
}
@ -531,7 +553,7 @@
margin-left: -5px;
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
&.icon-small {
@ -574,7 +596,7 @@
fill: none;
@include themify($themes) {
stroke: themed('totpStrokeColor');
stroke: themed("totpStrokeColor");
}
&.inner {
@ -592,15 +614,16 @@
}
&.low {
.totp-sec, .totp-code {
.totp-sec,
.totp-code {
@include themify($themes) {
color: themed('dangerColor');
color: themed("dangerColor");
}
}
.totp-circle {
@include themify($themes) {
stroke: themed('dangerColor');
stroke: themed("dangerColor");
}
}
}
@ -639,7 +662,7 @@
width: 100%;
@include themify($themes) {
color: themed('textColor');
color: themed("textColor");
}
}
}

24
src/popup/scss/buttons.scss
View File

@ -10,20 +10,20 @@
cursor: pointer;
@include themify($themes) {
background-color: themed('buttonBackgroundColor');
border-color: themed('buttonBorderColor');
color: themed('buttonColor');
background-color: themed("buttonBackgroundColor");
border-color: themed("buttonBorderColor");
color: themed("buttonColor");
}
&.primary {
@include themify($themes) {
color: themed('buttonPrimaryColor');
color: themed("buttonPrimaryColor");
}
}
&.danger {
@include themify($themes) {
color: themed('buttonDangerColor');
color: themed("buttonDangerColor");
}
}
@ -31,20 +31,20 @@
cursor: pointer;
@include themify($themes) {
background-color: darken(themed('buttonBackgroundColor'), 1.5%);
border-color: darken(themed('buttonBorderColor'), 17%);
color: darken(themed('buttonColor'), 10%);
background-color: darken(themed("buttonBackgroundColor"), 1.5%);
border-color: darken(themed("buttonBorderColor"), 17%);
color: darken(themed("buttonColor"), 10%);
}
&.primary {
@include themify($themes) {
color: darken(themed('buttonPrimaryColor'), 6%);
color: darken(themed("buttonPrimaryColor"), 6%);
}
}
&.danger {
@include themify($themes) {
color: darken(themed('buttonDangerColor'), 6%);
color: darken(themed("buttonDangerColor"), 6%);
}
}
}
@ -54,8 +54,8 @@
outline: 0;
@include themify($themes) {
background-color: darken(themed('buttonBackgroundColor'), 6%);
border-color: darken(themed('buttonBorderColor'), 25%);
background-color: darken(themed("buttonBackgroundColor"), 6%);
border-color: darken(themed("buttonBorderColor"), 25%);
}
}

69
src/popup/scss/misc.scss
View File

@ -1,78 +1,79 @@
@import "variables.scss";
small, .small {
small,
.small {
font-size: $font-size-small;
}
.bg-primary {
@include themify($themes) {
background-color: themed('primaryColor') !important;
background-color: themed("primaryColor") !important;
}
}
.bg-success {
@include themify($themes) {
background-color: themed('successColor') !important;
background-color: themed("successColor") !important;
}
}
.bg-danger {
@include themify($themes) {
background-color: themed('dangerColor') !important;
background-color: themed("dangerColor") !important;
}
}
.bg-info {
@include themify($themes) {
background-color: themed('infoColor') !important;
background-color: themed("infoColor") !important;
}
}
.bg-warning {
@include themify($themes) {
background-color: themed('warningColor') !important;
background-color: themed("warningColor") !important;
}
}
.text-primary {
@include themify($themes) {
color: themed('primaryColor') !important;
color: themed("primaryColor") !important;
}
}
.text-success {
@include themify($themes) {
color: themed('successColor') !important;
color: themed("successColor") !important;
}
}
.text-muted {
@include themify($themes) {
color: themed('mutedColor') !important;
color: themed("mutedColor") !important;
}
}
.text-default {
@include themify($themes) {
color: themed('textColor') !important;
color: themed("textColor") !important;
}
}
.text-danger {
@include themify($themes) {
color: themed('dangerColor') !important;
color: themed("dangerColor") !important;
}
}
.text-info {
@include themify($themes) {
color: themed('infoColor') !important;
color: themed("infoColor") !important;
}
}
.text-warning {
@include themify($themes) {
color: themed('warningColor') !important;
color: themed("warningColor") !important;
}
}
@ -153,18 +154,18 @@ p.lead {
.password-number {
@include themify($themes) {
color: themed('passwordNumberColor');
color: themed("passwordNumberColor");
}
}
.password-special {
@include themify($themes) {
color: themed('passwordSpecialColor');
color: themed("passwordSpecialColor");
}
}
#duo-frame {
background: url('../images/loading.svg') 0 0 no-repeat;
background: url("../images/loading.svg") 0 0 no-repeat;
width: 100%;
height: 470px;
margin-bottom: -10px;
@ -177,7 +178,7 @@ p.lead {
}
#web-authn-frame {
background: url('../images/loading.svg') 0 0 no-repeat;
background: url("../images/loading.svg") 0 0 no-repeat;
width: 100%;
height: 310px;
margin-bottom: -10px;
@ -215,7 +216,7 @@ app-root > #loading {
color: $text-muted;
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
}
@ -230,7 +231,7 @@ app-vault-icon {
background-size: 142px 21px;
background-repeat: no-repeat;
@include themify($themes) {
background-image: url('../images/logo-' + themed('logoSuffix') + '@2x.png');
background-image: url("../images/logo-" + themed("logoSuffix") + "@2x.png");
}
@media (min-width: 219px) {
width: 189px;
@ -259,8 +260,8 @@ app-vault-icon {
border-left-width: 5px;
border-radius: 3px;
@include themify($themes) {
border-color: themed('calloutBorderColor');
background-color: themed('calloutBackgroundColor');
border-color: themed("calloutBorderColor");
background-color: themed("calloutBackgroundColor");
}
.callout-heading {
@ -274,68 +275,70 @@ app-vault-icon {
&.callout-primary {
@include themify($themes) {
border-left-color: themed('primaryColor');
border-left-color: themed("primaryColor");
}
.callout-heading {
@include themify($themes) {
color: themed('primaryColor');
color: themed("primaryColor");
}
}
}
&.callout-info {
@include themify($themes) {
border-left-color: themed('infoColor');
border-left-color: themed("infoColor");
}
.callout-heading {
@include themify($themes) {
color: themed('infoColor');
color: themed("infoColor");
}
}
}
&.callout-danger {
@include themify($themes) {
border-left-color: themed('dangerColor');
border-left-color: themed("dangerColor");
}
.callout-heading {
@include themify($themes) {
color: themed('dangerColor');
color: themed("dangerColor");
}
}
}
&.callout-success {
@include themify($themes) {
border-left-color: themed('successColor');
border-left-color: themed("successColor");
}
.callout-heading {
@include themify($themes) {
color: themed('successColor');
color: themed("successColor");
}
}
}
&.callout-warning {
@include themify($themes) {
border-left-color: themed('warningColor');
border-left-color: themed("warningColor");
}
.callout-heading {
@include themify($themes) {
color: themed('warningColor');
color: themed("warningColor");
}
}
}
&.clickable {
&:hover, &:focus, &.active {
&:hover,
&:focus,
&.active {
@include themify($themes) {
background-color: themed('boxBackgroundHoverColor');
background-color: themed("boxBackgroundHoverColor");
}
}
}

33
src/popup/scss/modal.scss
View File

@ -7,7 +7,13 @@ $border-radius-lg: $border-radius;
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
@ -15,19 +21,19 @@ $zindex-modal: 1050 !default;
// Padding applied to the modal body
$modal-inner-padding: 10px !default;
$modal-dialog-margin: .5rem !default;
$modal-dialog-margin: 0.5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
//$modal-content-bg: $background-color-alt !default;
$modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-color: rgba($black, 0.2) !default;
$modal-content-border-width: 1px !default;
$modal-content-box-shadow-xs: none;
$modal-content-box-shadow-sm-up: none;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-backdrop-opacity: 0.5 !default;
$modal-header-border-color: $border-color-dark !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
@ -38,7 +44,7 @@ $modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
$modal-transition: transform .3s ease-out !default;
$modal-transition: transform 0.3s ease-out !default;
$close-font-size: $font-size-base * 1.5 !default;
$close-font-weight: bold !default;
@ -54,8 +60,7 @@ $close-text-shadow: 0 1px 0 $white !default;
@media (min-width: $min) {
@content;
}
}
@else {
} @else {
@content;
}
}
@ -96,7 +101,6 @@ $close-text-shadow: 0 1px 0 $white !default;
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and stuff
// Kill the scroll on the body
.modal-open {
overflow: hidden;
@ -168,7 +172,7 @@ $close-text-shadow: 0 1px 0 $white !default;
outline: 0;
@include themify($themes) {
background-color: themed('backgroundColorAlt');
background-color: themed("backgroundColorAlt");
}
}
@ -203,7 +207,7 @@ $close-text-shadow: 0 1px 0 $white !default;
//@include border-top-radius($border-radius-lg);
@include themify($themes) {
border-bottom-color: themed('borderColor');
border-bottom-color: themed("borderColor");
}
.close {
@ -249,7 +253,7 @@ $close-text-shadow: 0 1px 0 $white !default;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include themify($themes) {
border-top-color: themed('borderColor');
border-top-color: themed("borderColor");
}
// Easily place margin between footer elements
@ -313,12 +317,13 @@ $close-text-shadow: 0 1px 0 $white !default;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: .5;
opacity: 0.5;
&:hover, &:focus {
&:hover,
&:focus {
color: $close-color;
text-decoration: none;
opacity: .75;
opacity: 0.75;
}
// Opinionated: add "hand" cursor to non-disabled .close elements
&:not(:disabled):not(.disabled) {

10
src/popup/scss/pages.scss
View File

@ -47,7 +47,7 @@ app-home {
left: 10px;
@include themify($themes) {
color: themed('mutedColor');
color: themed("mutedColor");
}
&:not(:hover):not(:focus) {
@ -62,17 +62,19 @@ app-home {
}
}
&:hover, &:focus {
&:hover,
&:focus {
text-decoration: none;
@include themify($themes) {
color: themed('primaryColor');
color: themed("primaryColor");
}
}
}
}
body.body-sm, body.body-xs {
body.body-sm,
body.body-xs {
app-home {
.center-content {
margin-top: 0;

34
src/popup/scss/plugins.scss
View File

@ -1,6 +1,6 @@
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
@import '~ngx-toastr/toastr';
@import "~ngx-toastr/toastr";
@import "~sweetalert2/src/sweetalert2.scss";
@import "variables.scss";
@ -51,9 +51,10 @@ $fa-font-path: "~font-awesome/fonts";
}
}
&.toast-danger, &.toast-error {
&.toast-danger,
&.toast-error {
@include themify($themes) {
background-color: themed('dangerColor');
background-color: themed("dangerColor");
}
.icon i::before {
@ -63,7 +64,7 @@ $fa-font-path: "~font-awesome/fonts";
&.toast-warning {
@include themify($themes) {
background-color: themed('warningColor');
background-color: themed("warningColor");
}
.icon i::before {
@ -73,7 +74,7 @@ $fa-font-path: "~font-awesome/fonts";
&.toast-info {
@include themify($themes) {
background-color: themed('infoColor');
background-color: themed("infoColor");
}
.icon i:before {
@ -83,7 +84,7 @@ $fa-font-path: "~font-awesome/fonts";
&.toast-success {
@include themify($themes) {
background-color: themed('successColor');
background-color: themed("successColor");
}
.icon i:before {
@ -101,8 +102,8 @@ $fa-font-path: "~font-awesome/fonts";
width: 34em;
@include themify($themes) {
background-color: themed('backgroundColorAlt');
color: themed('textColor');
background-color: themed("backgroundColorAlt");
color: themed("textColor");
}
.swal2-icon {
@ -116,7 +117,7 @@ $fa-font-path: "~font-awesome/fonts";
margin: 0;
font-size: $font-size-base;
@include themify($themes) {
color: themed('textColor');
color: themed("textColor");
}
label.checkbox {
@ -130,7 +131,8 @@ $fa-font-path: "~font-awesome/fonts";
}
}
.swal2-input, .swal2-textarea {
.swal2-input,
.swal2-textarea {
border: 1px solid #000000;
border-radius: $border-radius;
margin-bottom: 0;
@ -143,13 +145,13 @@ $fa-font-path: "~font-awesome/fonts";
box-shadow: none;
}
@include themify($themes) {
border-color: themed('inputBorderColor');
color: themed('textColor');
background-color: themed('inputBackgroundColor');
border-color: themed("inputBorderColor");
color: themed("textColor");
background-color: themed("inputBackgroundColor");
}
&::-webkit-input-placeholder {
@include themify($themes) {
color: themed('inputPlaceholderColor');
color: themed("inputPlaceholderColor");
}
}
}
@ -167,7 +169,7 @@ $fa-font-path: "~font-awesome/fonts";
font-size: $font-size-large;
@include themify($themes) {
color: themed('textColor');
color: themed("textColor");
}
}
@ -176,7 +178,7 @@ $fa-font-path: "~font-awesome/fonts";
font-size: $font-size-base;
@include themify($themes) {
color: themed('textColor');
color: themed("textColor");
}
}

31
src/popup/scss/variables.scss
View File

@ -1,7 +1,7 @@
@import '~nord/src/sass/nord.scss';
@import "~nord/src/sass/nord.scss";
$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-size-base: 14px;
$font-size-large: 18px;
$font-size-small: 12px;
@ -18,12 +18,12 @@ $gray: #555;
$gray-light: #777;
$text-muted: $gray-light;
$brand-primary: #175DDC;
$brand-primary: #175ddc;
$brand-danger: #dd4b39;
$brand-success: #00a65a;
$brand-info: #555555;
$brand-warning: #bf7e16;
$brand-primary-accent: #1252A3;
$brand-primary-accent: #1252a3;
$background-color: #f0f0f0;
@ -60,8 +60,8 @@ $themes: (
borderColor: $border-color-dark,
backgroundColor: $background-color,
backgroundColorAlt: #ffffff,
scrollbarColor: rgba(100,100,100,.2),
scrollbarHoverColor: rgba(100,100,100,.4),
scrollbarColor: rgba(100, 100, 100, 0.2),
scrollbarHoverColor: rgba(100, 100, 100, 0.4),
boxBackgroundColor: $box-background-color,
boxBackgroundHoverColor: $box-background-hover-color,
boxBorderColor: $box-border-color,
@ -98,7 +98,7 @@ $themes: (
successColor: $brand-success,
infoColor: $brand-info,
warningColor: $brand-warning,
logoSuffix: 'dark',
logoSuffix: "dark",
passwordNumberColor: #007fde,
passwordSpecialColor: #c40800,
calloutBorderColor: $border-color-dark,
@ -147,7 +147,7 @@ $themes: (
successColor: $brand-success,
infoColor: $brand-info,
warningColor: $brand-warning,
logoSuffix: 'white',
logoSuffix: "white",
passwordNumberColor: #52bdfb,
passwordSpecialColor: #ff7c70,
calloutBorderColor: #111111,
@ -196,7 +196,7 @@ $themes: (
successColor: $nord14,
infoColor: $nord9,
warningColor: $nord12,
logoSuffix: 'white',
logoSuffix: "white",
passwordNumberColor: $nord8,
passwordSpecialColor: $nord12,
calloutBorderColor: $nord0,
@ -245,7 +245,7 @@ $themes: (
successColor: $solarizedDarkGreen,
infoColor: $solarizedDarkGreen,
warningColor: $solarizedDarkYellow,
logoSuffix: 'white',
logoSuffix: "white",
passwordNumberColor: $solarizedDarkCyan,
passwordSpecialColor: $solarizedDarkYellow,
calloutBorderColor: $solarizedDarkBase03,
@ -258,8 +258,13 @@ $themes: (
html.theme_#{$theme} & {
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
$value: map-get(map-get($themes, $theme), "#{$key}");
$theme-map: map-merge(
$theme-map,
(
$key: $value,
)
) !global;
}
@content;
$theme-map: null !global;

182
src/popup/send/efflux-dates.component.html
View File

@ -3,10 +3,14 @@
<div class="box-content">
<ng-container *ngIf="!editMode">
<div class="box-content-row" appBoxRow>
<label for="deletionDate">{{'deletionDate' | i18n}}</label>
<select id="deletionDate" name="DeletionDateSelect" formControlName="selectedDeletionDatePreset" required>
<option *ngFor="let o of deletionDatePresets" [ngValue]="o.value">{{o.name}}
</option>
<label for="deletionDate">{{ "deletionDate" | i18n }}</label>
<select
id="deletionDate"
name="DeletionDateSelect"
formControlName="selectedDeletionDatePreset"
required
>
<option *ngFor="let o of deletionDatePresets" [ngValue]="o.value">{{ o.name }}</option>
</select>
</div>
<div class="box-content-row" appBoxRow *ngIf="selectedDeletionDatePreset.value === 0">
@ -14,17 +18,22 @@
</div>
</ng-container>
<div class="box-content-row" appBoxRow *ngIf="editMode">
<label for="deletionDate">{{'deletionDate' | i18n}}</label>
<label for="deletionDate">{{ "deletionDate" | i18n }}</label>
<ng-container *ngTemplateOutlet="deletionDateCustom"></ng-container>
</div>
</div>
<div class="box-footer">
{{'deletionDateDesc' | i18n}}
{{ "deletionDateDesc" | i18n }}
<ng-container
*ngIf="(!inPopout && browserPath == 'firefox') && (editMode || (selectedDeletionDatePreset.value === 0 && !editMode))">
<br>{{'sendFirefoxCustomDatePopoutMessage1' | i18n}} <a
(click)="popOutWindow.emit()">{{'sendFirefoxCustomDatePopoutMessage2' | i18n}}</a>
{{'sendFirefoxCustomDatePopoutMessage3' | i18n}}
*ngIf="
!inPopout &&
browserPath == 'firefox' &&
(editMode || (selectedDeletionDatePreset.value === 0 && !editMode))
"
>
<br />{{ "sendFirefoxCustomDatePopoutMessage1" | i18n }}
<a (click)="popOutWindow.emit()">{{ "sendFirefoxCustomDatePopoutMessage2" | i18n }}</a>
{{ "sendFirefoxCustomDatePopoutMessage3" | i18n }}
</ng-container>
</div>
</div>
@ -32,10 +41,15 @@
<div class="box-content">
<ng-container *ngIf="!editMode">
<div class="box-content-row" *ngIf="!editMode" appBoxRow>
<label for="editExpirationDate">{{'expirationDate' | i18n}}</label>
<select id="expirationDate" name="ExpirationDateSelect"
formControlName="selectedExpirationDatePreset" required>
<option *ngFor="let o of expirationDatePresets" [ngValue]="o.value">{{o.name}}
<label for="editExpirationDate">{{ "expirationDate" | i18n }}</label>
<select
id="expirationDate"
name="ExpirationDateSelect"
formControlName="selectedExpirationDatePreset"
required
>
<option *ngFor="let o of expirationDatePresets" [ngValue]="o.value">
{{ o.name }}
</option>
</select>
</div>
@ -45,21 +59,26 @@
</ng-container>
<div class="box-content-row" *ngIf="editMode" appBoxRow>
<div class="flex-label">
<label>{{'expirationDate' | i18n}}</label>
<label>{{ "expirationDate" | i18n }}</label>
<button type="button" *ngIf="!disabled" appStopClick (click)="clearExpiration()">
{{'clear' | i18n}}
{{ "clear" | i18n }}
</button>
</div>
<ng-container *ngTemplateOutlet="expirationDateCustom"></ng-container>
</div>
</div>
<div class="box-footer">
{{'expirationDateDesc' | i18n}}
{{ "expirationDateDesc" | i18n }}
<ng-container
*ngIf="(!inPopout && browserPath == 'firefox') && (editMode || (selectedExpirationDatePreset.value === 0 && !editMode))">
<br>{{'sendFirefoxCustomDatePopoutMessage1' | i18n}} <a
(click)="popOutWindow.emit()">{{'sendFirefoxCustomDatePopoutMessage2' | i18n}}</a>
{{'sendFirefoxCustomDatePopoutMessage3' | i18n}}
*ngIf="
!inPopout &&
browserPath == 'firefox' &&
(editMode || (selectedExpirationDatePreset.value === 0 && !editMode))
"
>
<br />{{ "sendFirefoxCustomDatePopoutMessage1" | i18n }}
<a (click)="popOutWindow.emit()">{{ "sendFirefoxCustomDatePopoutMessage2" | i18n }}</a>
{{ "sendFirefoxCustomDatePopoutMessage3" | i18n }}
</ng-container>
</div>
</div>
@ -67,29 +86,59 @@
<ng-container [ngSwitch]="browserPath">
<ng-container *ngSwitchCase="'firefox'">
<div class="flex flex-grow">
<input id="deletionDateCustomFallback" type="date" name="DeletionDateFallback"
formControlName="fallbackDeletionDate" required placeholder="MM/DD/YYYY"
[readOnly]="disabled" data-date-format="mm/dd/yyyy">
<input id="deletionTimeCustomFallback" type="time" name="DeletionTimeDate"
formControlName="fallbackDeletionTime" required placeholder="HH:MM AM/PM"
[readOnly]="disabled">
<input
id="deletionDateCustomFallback"
type="date"
name="DeletionDateFallback"
formControlName="fallbackDeletionDate"
required
placeholder="MM/DD/YYYY"
[readOnly]="disabled"
data-date-format="mm/dd/yyyy"
/>
<input
id="deletionTimeCustomFallback"
type="time"
name="DeletionTimeDate"
formControlName="fallbackDeletionTime"
required
placeholder="HH:MM AM/PM"
[readOnly]="disabled"
/>
</div>
</ng-container>
<ng-container *ngSwitchCase="'safari'">
<div class="flex flex-grow">
<input id="deletionDateCustomFallback" type="date" name="DeletionDateFallback"
formControlName="fallbackDeletionDate" required placeholder="MM/DD/YYYY"
[readOnly]="disabled" data-date-format="mm/dd/yyyy">
<select id="deletionTimeCustomFallback" formControlName="fallbackDeletionTime"
name="SafariDeletionTime">
<option *ngFor="let o of safariDeletionTimePresetOptions" [ngValue]="o.twentyFourHour">{{o.twelveHour}}
<input
id="deletionDateCustomFallback"
type="date"
name="DeletionDateFallback"
formControlName="fallbackDeletionDate"
required
placeholder="MM/DD/YYYY"
[readOnly]="disabled"
data-date-format="mm/dd/yyyy"
/>
<select
id="deletionTimeCustomFallback"
formControlName="fallbackDeletionTime"
name="SafariDeletionTime"
>
<option *ngFor="let o of safariDeletionTimePresetOptions" [ngValue]="o.twentyFourHour">
{{ o.twelveHour }}
</option>
</select>
</div>
</ng-container>
<ng-container *ngSwitchDefault>
<input id="deletionDateCustom" type="datetime-local" name="DeletionDate"
formControlName="defaultDeletionDateTime" required placeholder="MM/DD/YYYY HH:MM AM/PM">
<input
id="deletionDateCustom"
type="datetime-local"
name="DeletionDate"
formControlName="defaultDeletionDateTime"
required
placeholder="MM/DD/YYYY HH:MM AM/PM"
/>
</ng-container>
</ng-container>
</ng-template>
@ -97,33 +146,64 @@
<ng-container [ngSwitch]="browserPath">
<ng-container *ngSwitchCase="'firefox'">
<div class="flex flex-grow">
<input id="expirationDateCustomFallback" type="date" name="ExpirationDateFallback"
formControlName="fallbackExpirationDate" [required]="!editMode" placeholder="MM/DD/YYYY"
[readOnly]="disabled" data-date-format="mm/dd/yyyy">
<input id="expirationTimeCustomFallback" type="time"
name="ExpirationTimeFallback" formControlName="fallbackExpirationTime"
[required]="!editMode" placeholder="HH:MM AM/PM" [readOnly]="disabled">
<input
id="expirationDateCustomFallback"
type="date"
name="ExpirationDateFallback"
formControlName="fallbackExpirationDate"
[required]="!editMode"
placeholder="MM/DD/YYYY"
[readOnly]="disabled"
data-date-format="mm/dd/yyyy"
/>
<input
id="expirationTimeCustomFallback"
type="time"
name="ExpirationTimeFallback"
formControlName="fallbackExpirationTime"
[required]="!editMode"
placeholder="HH:MM AM/PM"
[readOnly]="disabled"
/>
</div>
</ng-container>
<ng-container *ngSwitchCase="'safari'">
<div class="flex flex-grow">
<input id="expirationDateCustomFallback" type="date" name="ExpirationDateFallback"
formControlName="fallbackExpirationDate" [required]="!editMode" placeholder="MM/DD/YYYY"
[readOnly]="disabled" data-date-format="mm/dd/yyyy">
<select id="expirationTimeCustomFallback"
formControlName="fallbackExpirationTime" name="SafariExpirationTime">
<option *ngFor="let o of safariExpirationTimePresetOptions" [ngValue]="o.twentyFourHour">
<input
id="expirationDateCustomFallback"
type="date"
name="ExpirationDateFallback"
formControlName="fallbackExpirationDate"
[required]="!editMode"
placeholder="MM/DD/YYYY"
[readOnly]="disabled"
data-date-format="mm/dd/yyyy"
/>
<select
id="expirationTimeCustomFallback"
formControlName="fallbackExpirationTime"
name="SafariExpirationTime"
>
<option
*ngFor="let o of safariExpirationTimePresetOptions"
[ngValue]="o.twentyFourHour"
>
{{ o.twelveHour }}
</option>
</select>
</div>
</ng-container>
<ng-container *ngSwitchDefault>
<input id="expirationDateCustom" type="datetime-local" name="ExpirationDate"
formControlName="defaultExpirationDateTime" required placeholder="MM/DD/YYYY HH:MM AM/PM"
[readOnly]="disabled">
<input
id="expirationDateCustom"
type="datetime-local"
name="ExpirationDate"
formControlName="defaultExpirationDateTime"
required
placeholder="MM/DD/YYYY HH:MM AM/PM"
[readOnly]="disabled"
/>
</ng-container>
</ng-container>
</ng-template>
</ng-container>

28
src/popup/send/efflux-dates.component.ts
View File

@ -1,30 +1,28 @@
import { DatePipe } from '@angular/common';
import { DatePipe } from "@angular/common";
import {
Component,
EventEmitter,
Input,
Output,
} from '@angular/core';
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { ControlContainer, NgForm } from '@angular/forms';
import { ControlContainer, NgForm } from "@angular/forms";
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { EffluxDatesComponent as BaseEffluxDatesComponent } from 'jslib-angular/components/send/efflux-dates.component';
import { EffluxDatesComponent as BaseEffluxDatesComponent } from "jslib-angular/components/send/efflux-dates.component";
@Component({
selector: 'app-send-efflux-dates',
templateUrl: 'efflux-dates.component.html',
selector: "app-send-efflux-dates",
templateUrl: "efflux-dates.component.html",
viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
})
export class EffluxDatesComponent extends BaseEffluxDatesComponent {
@Input() readonly inPopout: boolean;
@Output() popOutWindow = new EventEmitter();
constructor(protected i18nService: I18nService, protected platformUtilsService: PlatformUtilsService,
protected datePipe: DatePipe) {
constructor(
protected i18nService: I18nService,
protected platformUtilsService: PlatformUtilsService,
protected datePipe: DatePipe
) {
super(i18nService, platformUtilsService, datePipe);
}
}

229
src/popup/send/send-add-edit.component.html
View File

@ -1,14 +1,14 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<header>
<div class="left">
<button type="button" appBlurClick (click)="cancel()">{{'cancel' | i18n}}</button>
<button type="button" appBlurClick (click)="cancel()">{{ "cancel" | i18n }}</button>
</div>
<h1 class="center">
<span class="title">{{ title }}</span>
</h1>
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading || disableSend">
<span [hidden]="form.loading">{{'save' | i18n}}</span>
<span [hidden]="form.loading">{{ "save" | i18n }}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
@ -16,41 +16,63 @@
<content *ngIf="send">
<!-- Policy Banner -->
<app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
{{'sendDisabledWarning' | i18n}}
{{ "sendDisabledWarning" | i18n }}
</app-callout>
<app-callout type="info" *ngIf="disableHideEmail && !disableSend">
{{'sendOptionsPolicyInEffect' | i18n}}
{{ "sendOptionsPolicyInEffect" | i18n }}
</app-callout>
<!-- File Warning -->
<app-callout type="warning" icon="fa fa-external-link fa-rotate-270 fa-fw" [clickable]="true"
<app-callout
type="warning"
icon="fa fa-external-link fa-rotate-270 fa-fw"
[clickable]="true"
title="{{ 'sendFileCalloutHeader' | i18n }}"
*ngIf="showFilePopoutMessage && send.type === sendType.File && !disableSend" (click)="popOutWindow()">
<div *ngIf="showChromiumFileWarning">{{'sendLinuxChromiumFileWarning' | i18n}}</div>
<div *ngIf="showFirefoxFileWarning">{{'sendFirefoxFileWarning' | i18n}}</div>
<div *ngIf="showSafariFileWarning">{{'sendSafariFileWarning' | i18n}}</div>
*ngIf="showFilePopoutMessage && send.type === sendType.File && !disableSend"
(click)="popOutWindow()"
>
<div *ngIf="showChromiumFileWarning">{{ "sendLinuxChromiumFileWarning" | i18n }}</div>
<div *ngIf="showFirefoxFileWarning">{{ "sendFirefoxFileWarning" | i18n }}</div>
<div *ngIf="showSafariFileWarning">{{ "sendSafariFileWarning" | i18n }}</div>
</app-callout>
<!-- Name -->
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="name">{{'name' | i18n}}</label>
<input id="name" type="text" name="Name" [(ngModel)]="send.name" [readonly]="disableSend">
<label for="name">{{ "name" | i18n }}</label>
<input
id="name"
type="text"
name="Name"
[(ngModel)]="send.name"
[readonly]="disableSend"
/>
</div>
</div>
<div class="box-footer">
{{'sendNameDesc' | i18n}}
{{ "sendNameDesc" | i18n }}
</div>
</div>
<!-- Type Options -->
<div class="box" *ngIf="!editMode">
<div class="box-content no-hover">
<div class="box-content-row">
<label for="sendTypeOptions">{{'sendTypeHeader' | i18n}}</label>
<div class="radio-group text-default" appBoxRow name="SendTypeOptions"
*ngFor="let o of typeOptions">
<input type="radio" [(ngModel)]="send.type" name="Type_{{o.value}}" id="type_{{o.value}}"
[value]="o.value" (change)="typeChanged()" [checked]="send.type === o.value"
[readonly]="disableSend">
<label for="sendTypeOptions">{{ "sendTypeHeader" | i18n }}</label>
<div
class="radio-group text-default"
appBoxRow
name="SendTypeOptions"
*ngFor="let o of typeOptions"
>
<input
type="radio"
[(ngModel)]="send.type"
name="Type_{{ o.value }}"
id="type_{{ o.value }}"
[value]="o.value"
(change)="typeChanged()"
[checked]="send.type === o.value"
[readonly]="disableSend"
/>
<label for="type_{{ o.value }}">
{{ o.name }}
</label>
@ -62,57 +84,77 @@
<div class="box" *ngIf="send.type === sendType.File && (editMode || showFileSelector)">
<div class="box-content no-hover">
<div class="box-content-row" *ngIf="editMode">
<label for="file">{{'file' | i18n}}</label>
<label for="file">{{ "file" | i18n }}</label>
<div class="row-main">{{ send.file.fileName }} ({{ send.file.sizeName }})</div>
</div>
<div class="box-content-row" *ngIf="showFileSelector">
<label for="file">{{'file' | i18n}}</label>
<input type="file" id="file" name="file" required [readonly]="disableSend">
<label for="file">{{ "file" | i18n }}</label>
<input type="file" id="file" name="file" required [readonly]="disableSend" />
</div>
</div>
<div class="box-footer" *ngIf="showFileSelector">
{{'sendFileDesc' | i18n}} {{'maxFileSize' | i18n}}
{{ "sendFileDesc" | i18n }} {{ "maxFileSize" | i18n }}
</div>
</div>
<!-- Text -->
<div class="box" *ngIf="send.type === sendType.Text">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="text">{{'sendTypeText' | i18n}}</label>
<textarea id="text" name="Text" rows="6" [(ngModel)]="send.text.text"
[readonly]="disableSend"></textarea>
<label for="text">{{ "sendTypeText" | i18n }}</label>
<textarea
id="text"
name="Text"
rows="6"
[(ngModel)]="send.text.text"
[readonly]="disableSend"
></textarea>
</div>
</div>
<div class="box-footer">
{{'sendTextDesc' | i18n}}
{{ "sendTextDesc" | i18n }}
</div>
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="hideText">{{'sendHideText' | i18n}}</label>
<input id="hideText" type="checkbox" name="HideText" [(ngModel)]="send.text.hidden"
[disabled]="disableSend">
<label for="hideText">{{ "sendHideText" | i18n }}</label>
<input
id="hideText"
type="checkbox"
name="HideText"
[(ngModel)]="send.text.hidden"
[disabled]="disableSend"
/>
</div>
</div>
</div>
<!-- Share -->
<div class="box">
<h2 class="box-header">
{{'share' | i18n}}
{{ "share" | i18n }}
</h2>
<div class="box-content">
<!-- Copy Link on Save -->
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="copyOnSave">{{'sendShareDesc' | i18n}}</label>
<input id="copyOnSave" type="checkbox" name="CopyOnSave" [(ngModel)]="copyLink"
[disabled]="disableSend">
<label for="copyOnSave">{{ "sendShareDesc" | i18n }}</label>
<input
id="copyOnSave"
type="checkbox"
name="CopyOnSave"
[(ngModel)]="copyLink"
[disabled]="disableSend"
/>
</div>
</div>
</div>
<!-- Options -->
<div class="box">
<h2>
<button type="button" class="box-header-expandable" (click)="showOptions = !showOptions" [attr.aria-expanded]="showOptions">
{{'options' | i18n}}
<button
type="button"
class="box-header-expandable"
(click)="showOptions = !showOptions"
[attr.aria-expanded]="showOptions"
>
{{ "options" | i18n }}
<i *ngIf="!showOptions" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
<i *ngIf="showOptions" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
</button>
@ -120,29 +162,45 @@
</div>
<div [hidden]="!showOptions">
<app-send-efflux-dates
[initialDeletionDate]="send.deletionDate" [initialExpirationDate]="send.expirationDate"
[editMode]="editMode" [disabled]="disableSend" (datesChanged)="setDates($event)" (popOutWindow)="popOutWindow()">
[initialDeletionDate]="send.deletionDate"
[initialExpirationDate]="send.expirationDate"
[editMode]="editMode"
[disabled]="disableSend"
(datesChanged)="setDates($event)"
(popOutWindow)="popOutWindow()"
>
</app-send-efflux-dates>
<!-- Maximum Access Count -->
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="maximumAccessCount">{{'maximumAccessCount' | i18n}}</label>
<input id="maximumAccessCount" min="1" type="number" name="MaximumAccessCount"
[(ngModel)]="send.maxAccessCount" [readonly]="disableSend">
<label for="maximumAccessCount">{{ "maximumAccessCount" | i18n }}</label>
<input
id="maximumAccessCount"
min="1"
type="number"
name="MaximumAccessCount"
[(ngModel)]="send.maxAccessCount"
[readonly]="disableSend"
/>
</div>
</div>
<div class="box-footer">
{{'maximumAccessCountDesc' | i18n}}
{{ "maximumAccessCountDesc" | i18n }}
</div>
</div>
<!-- Current Access Count -->
<div class="box" *ngIf="editMode">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="currentAccessCount">{{'currentAccessCount' | i18n}}</label>
<input id="currentAccessCount" readonly type="text" name="CurrentAccessCount"
[(ngModel)]="send.accessCount">
<label for="currentAccessCount">{{ "currentAccessCount" | i18n }}</label>
<input
id="currentAccessCount"
readonly
type="text"
name="CurrentAccessCount"
[(ngModel)]="send.accessCount"
/>
</div>
</div>
</div>
@ -151,44 +209,71 @@
<div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
<label for="password" *ngIf="!hasPassword">{{'password' | i18n}}</label>
<input id="password" type="{{showPassword ? 'text' : 'password'}}" name="Password"
class="monospaced" [(ngModel)]="password" appInputVerbatim [readonly]="disableSend">
<label for="password" *ngIf="hasPassword">{{ "newPassword" | i18n }}</label>
<label for="password" *ngIf="!hasPassword">{{ "password" | i18n }}</label>
<input
id="password"
type="{{ showPassword ? 'text' : 'password' }}"
name="Password"
class="monospaced"
[(ngModel)]="password"
appInputVerbatim
[readonly]="disableSend"
/>
</div>
<div class="action-buttons" *ngIf="!disableSend">
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePasswordVisible()" [attr.aria-pressed]="showPassword">
<i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"
aria-hidden="true"></i>
<button
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
(click)="togglePasswordVisible()"
[attr.aria-pressed]="showPassword"
>
<i
class="fa fa-lg"
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
aria-hidden="true"
></i>
</button>
</div>
</div>
</div>
<div class="box-footer">
{{'sendPasswordDesc' | i18n}}
{{ "sendPasswordDesc" | i18n }}
</div>
</div>
<!-- Notes -->
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="notes">{{'notes' | i18n}}</label>
<textarea id="notes" name="Notes" rows="6" [(ngModel)]="send.notes"
[readonly]="disableSend"></textarea>
<label for="notes">{{ "notes" | i18n }}</label>
<textarea
id="notes"
name="Notes"
rows="6"
[(ngModel)]="send.notes"
[readonly]="disableSend"
></textarea>
</div>
</div>
<div class="box-footer">
{{'sendNotesDesc' | i18n}}
{{ "sendNotesDesc" | i18n }}
</div>
</div>
<!-- Hide Email -->
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="hideEmail">{{'hideEmail' | i18n}}</label>
<input id="hideEmail" type="checkbox" name="HideEmail" [(ngModel)]="send.hideEmail"
[disabled]="(disableHideEmail && !send.hideEmail) || disableSend">
<label for="hideEmail">{{ "hideEmail" | i18n }}</label>
<input
id="hideEmail"
type="checkbox"
name="HideEmail"
[(ngModel)]="send.hideEmail"
[disabled]="(disableHideEmail && !send.hideEmail) || disableSend"
/>
</div>
</div>
</div>
@ -196,9 +281,14 @@
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="disableSend">{{'sendDisableDesc' | i18n}}</label>
<input id="disableSend" type="checkbox" name="DisableSend" [(ngModel)]="send.disabled"
[disabled]="disableSend">
<label for="disableSend">{{ "sendDisableDesc" | i18n }}</label>
<input
id="disableSend"
type="checkbox"
name="DisableSend"
[(ngModel)]="send.disabled"
[disabled]="disableSend"
/>
</div>
</div>
</div>
@ -206,14 +296,21 @@
<!-- Delete -->
<div class="box list" *ngIf="editMode">
<div class="box-content single-line">
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="delete()"
[appApiAction]="deletePromise" #deleteBtn>
<button
type="button"
class="box-content-row"
appStopClick
appBlurClick
(click)="delete()"
[appApiAction]="deletePromise"
#deleteBtn
>
<div class="row-main text-danger">
<div class="icon text-danger" aria-hidden="true">
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
</div>
<span>{{'deleteSend' | i18n}}</span>
<span>{{ "deleteSend" | i18n }}</span>
</div>
</button>
</div>

95
src/popup/send/send-add-edit.component.ts
View File

@ -1,33 +1,27 @@
import {
DatePipe,
Location,
} from '@angular/common';
import { DatePipe, Location } from "@angular/common";
import { Component } from '@angular/core';
import { Component } from "@angular/core";
import {
ActivatedRoute,
Router,
} from '@angular/router';
import { ActivatedRoute, Router } from "@angular/router";
import { first } from 'rxjs/operators';
import { first } from "rxjs/operators";
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { LogService } from 'jslib-common/abstractions/log.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { PolicyService } from 'jslib-common/abstractions/policy.service';
import { SendService } from 'jslib-common/abstractions/send.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { LogService } from "jslib-common/abstractions/log.service";
import { MessagingService } from "jslib-common/abstractions/messaging.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { PolicyService } from "jslib-common/abstractions/policy.service";
import { SendService } from "jslib-common/abstractions/send.service";
import { UserService } from "jslib-common/abstractions/user.service";
import { PopupUtilsService } from '../services/popup-utils.service';
import { PopupUtilsService } from "../services/popup-utils.service";
import { AddEditComponent as BaseAddEditComponent } from 'jslib-angular/components/send/add-edit.component';
import { AddEditComponent as BaseAddEditComponent } from "jslib-angular/components/send/add-edit.component";
@Component({
selector: 'app-send-add-edit',
templateUrl: 'send-add-edit.component.html',
selector: "app-send-add-edit",
templateUrl: "send-add-edit.component.html",
})
export class SendAddEditComponent extends BaseAddEditComponent {
// Options header
@ -39,13 +33,32 @@ export class SendAddEditComponent extends BaseAddEditComponent {
isLinux = false;
isUnsupportedMac = false;
constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
userService: UserService, messagingService: MessagingService, policyService: PolicyService,
environmentService: EnvironmentService, datePipe: DatePipe, sendService: SendService,
private route: ActivatedRoute, private router: Router, private location: Location,
private popupUtilsService: PopupUtilsService, logService: LogService) {
super(i18nService, platformUtilsService, environmentService, datePipe, sendService, userService,
messagingService, policyService, logService);
constructor(
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
userService: UserService,
messagingService: MessagingService,
policyService: PolicyService,
environmentService: EnvironmentService,
datePipe: DatePipe,
sendService: SendService,
private route: ActivatedRoute,
private router: Router,
private location: Location,
private popupUtilsService: PopupUtilsService,
logService: LogService
) {
super(
i18nService,
platformUtilsService,
environmentService,
datePipe,
sendService,
userService,
messagingService,
policyService,
logService
);
}
get showFileSelector(): boolean {
@ -53,7 +66,10 @@ export class SendAddEditComponent extends BaseAddEditComponent {
}
get showFilePopoutMessage(): boolean {
return !this.editMode && (this.showFirefoxFileWarning || this.showSafariFileWarning || this.showChromiumFileWarning);
return (
!this.editMode &&
(this.showFirefoxFileWarning || this.showSafariFileWarning || this.showChromiumFileWarning)
);
}
get showFirefoxFileWarning(): boolean {
@ -66,7 +82,11 @@ export class SendAddEditComponent extends BaseAddEditComponent {
// Only show this for Chromium based browsers in Linux and Mac > Big Sur
get showChromiumFileWarning(): boolean {
return (this.isLinux || this.isUnsupportedMac) && !this.isFirefox && !(this.inSidebar || this.inPopout);
return (
(this.isLinux || this.isUnsupportedMac) &&
!this.isFirefox &&
!(this.inSidebar || this.inPopout)
);
}
popOutWindow() {
@ -78,10 +98,11 @@ export class SendAddEditComponent extends BaseAddEditComponent {
this.isFirefox = this.platformUtilsService.isFirefox();
this.inPopout = this.popupUtilsService.inPopout(window);
this.inSidebar = this.popupUtilsService.inSidebar(window);
this.isLinux = window?.navigator?.userAgent.indexOf('Linux') !== -1;
this.isUnsupportedMac = this.platformUtilsService.isChrome() && window?.navigator?.appVersion.includes('Mac OS X 11');
this.isLinux = window?.navigator?.userAgent.indexOf("Linux") !== -1;
this.isUnsupportedMac =
this.platformUtilsService.isChrome() && window?.navigator?.appVersion.includes("Mac OS X 11");
this.route.queryParams.pipe(first()).subscribe(async params => {
this.route.queryParams.pipe(first()).subscribe(async (params) => {
if (params.sendId) {
this.sendId = params.sendId;
}
@ -94,7 +115,7 @@ export class SendAddEditComponent extends BaseAddEditComponent {
window.setTimeout(() => {
if (!this.editMode) {
document.getElementById('name').focus();
document.getElementById("name").focus();
}
}, 200);
}
@ -119,8 +140,8 @@ export class SendAddEditComponent extends BaseAddEditComponent {
cancel() {
// If true, the window was pop'd out on the add-send page. location.back will not work
if ((window as any).previousPopupUrl.startsWith('/add-send')) {
this.router.navigate(['tabs/send']);
if ((window as any).previousPopupUrl.startsWith("/add-send")) {
this.router.navigate(["tabs/send"]);
} else {
this.location.back();
}

87
src/popup/send/send-groupings.component.html
View File

@ -2,49 +2,80 @@
<div class="left" *ngIf="showLeftHeader">
<app-pop-out></app-pop-out>
</div>
<h1 class="sr-only">{{'send' | i18n}}</h1>
<h1 class="sr-only">{{ "send" | i18n }}</h1>
<div class="search">
<input type="search" placeholder="{{'searchSends' | i18n}}" id="search" [(ngModel)]="searchText"
(input)="search(200)" autocomplete="off" appAutofocus>
<input
type="search"
placeholder="{{ 'searchSends' | i18n }}"
id="search"
[(ngModel)]="searchText"
(input)="search(200)"
autocomplete="off"
appAutofocus
/>
<i class="fa fa-search"></i>
</div>
<div class="right">
<button type="button" appBlurClick (click)="addSend()" appA11yTitle="{{'addSend' | i18n}}" [disabled]="disableSend">
<button
type="button"
appBlurClick
(click)="addSend()"
appA11yTitle="{{ 'addSend' | i18n }}"
[disabled]="disableSend"
>
<i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
</button>
</div>
</header>
<content [ngClass]="{'flex' : disableSend, 'tab-page' : disableSend}">
<content [ngClass]="{ flex: disableSend, 'tab-page': disableSend }">
<app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
{{'sendDisabledWarning' | i18n}}
{{ "sendDisabledWarning" | i18n }}
</app-callout>
<div class="no-items" *ngIf="(!sends || !sends.length) && !showSearching()">
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
<ng-container *ngIf="loaded">
<i class="fa fa-frown-o fa-4x"></i>
<p>{{'noItemsInList' | i18n}}</p>
<button type="button" (click)="addSend()" class="btn block primary link"
[disabled]="disableSend">{{'addSend' | i18n}}</button>
<p>{{ "noItemsInList" | i18n }}</p>
<button
type="button"
(click)="addSend()"
class="btn block primary link"
[disabled]="disableSend"
>
{{ "addSend" | i18n }}
</button>
</ng-container>
</div>
<ng-container *ngIf="sends && sends.length && !showSearching()">
<div class="box list">
<h2 class="box-header">
{{'types' | i18n}}
{{ "types" | i18n }}
</h2>
<div class="box-content single-line">
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="selectType(sendType.Text)">
<button
type="button"
class="box-content-row"
appStopClick
appBlurClick
(click)="selectType(sendType.Text)"
>
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-file-text-o"></i></div>
<span class="text">{{'sendTypeText' | i18n}}</span>
<span class="text">{{ "sendTypeText" | i18n }}</span>
</div>
<span class="row-sub-label">{{ typeCounts.get(sendType.Text) || 0 }}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</button>
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="selectType(sendType.File)">
<button
type="button"
class="box-content-row"
appStopClick
appBlurClick
(click)="selectType(sendType.File)"
>
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-file-o"></i></div>
<span class="text">{{'sendTypeFile' | i18n}}</span>
<span class="text">{{ "sendTypeFile" | i18n }}</span>
</div>
<span class="row-sub-label">{{ typeCounts.get(sendType.File) || 0 }}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
@ -53,25 +84,37 @@
</div>
<div class="box list">
<h2 class="box-header">
{{'allSends' | i18n}}
{{ "allSends" | i18n }}
<div class="flex-right">{{ sends.length }}</div>
</h2>
<div class="box-content">
<app-send-list [sends]="sends" title="{{'editItem' | i18n}}" [disabledByPolicy]="disableSend"
(onSelected)="selectSend($event)" (onCopySendLink)="copy($event)"
(onRemovePassword)="removePassword($event)" (onDeleteSend)="delete($event)"></app-send-list>
<app-send-list
[sends]="sends"
title="{{ 'editItem' | i18n }}"
[disabledByPolicy]="disableSend"
(onSelected)="selectSend($event)"
(onCopySendLink)="copy($event)"
(onRemovePassword)="removePassword($event)"
(onDeleteSend)="delete($event)"
></app-send-list>
</div>
</div>
</ng-container>
<ng-container *ngIf="showSearching()">
<div class="no-items" *ngIf="!filteredSends || !filteredSends.length">
<p>{{'noItemsInList' | i18n}}</p>
<p>{{ "noItemsInList" | i18n }}</p>
</div>
<div class="box list full-list" *ngIf="filteredSends && filteredSends.length > 0">
<div class="box-content">
<app-send-list [sends]="filteredSends" title="{{'editItem' | i18n}}" [disabledByPolicy]="disableSend"
(onSelected)="selectSend($event)" (onCopySendLink)="copy($event)"
(onRemovePassword)="removePassword($event)" (onDeleteSend)="delete($event)">
<app-send-list
[sends]="filteredSends"
title="{{ 'editItem' | i18n }}"
[disabledByPolicy]="disableSend"
(onSelected)="selectSend($event)"
(onCopySendLink)="copy($event)"
(onRemovePassword)="removePassword($event)"
(onDeleteSend)="delete($event)"
>
</app-send-list>
</div>
</div>

105
src/popup/send/send-groupings.component.ts
View File

@ -1,39 +1,33 @@
import {
ChangeDetectorRef,
Component,
NgZone,
} from '@angular/core';
import { ChangeDetectorRef, Component, NgZone } from "@angular/core";
import {
Router,
} from '@angular/router';
import { Router } from "@angular/router";
import { SendView } from 'jslib-common/models/view/sendView';
import { SendView } from "jslib-common/models/view/sendView";
import { SendComponent as BaseSendComponent } from 'jslib-angular/components/send/send.component';
import { SendComponent as BaseSendComponent } from "jslib-angular/components/send/send.component";
import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.service';
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { LogService } from 'jslib-common/abstractions/log.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { PolicyService } from 'jslib-common/abstractions/policy.service';
import { SearchService } from 'jslib-common/abstractions/search.service';
import { SendService } from 'jslib-common/abstractions/send.service';
import { StateService } from 'jslib-common/abstractions/state.service';
import { SyncService } from 'jslib-common/abstractions/sync.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { LogService } from "jslib-common/abstractions/log.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { PolicyService } from "jslib-common/abstractions/policy.service";
import { SearchService } from "jslib-common/abstractions/search.service";
import { SendService } from "jslib-common/abstractions/send.service";
import { StateService } from "jslib-common/abstractions/state.service";
import { SyncService } from "jslib-common/abstractions/sync.service";
import { UserService } from "jslib-common/abstractions/user.service";
import { PopupUtilsService } from '../services/popup-utils.service';
import { PopupUtilsService } from "../services/popup-utils.service";
import { SendType } from 'jslib-common/enums/sendType';
import { SendType } from "jslib-common/enums/sendType";
const ComponentId = 'SendComponent';
const ScopeStateId = ComponentId + 'Scope';
const ComponentId = "SendComponent";
const ScopeStateId = ComponentId + "Scope";
@Component({
selector: 'app-send-groupings',
templateUrl: 'send-groupings.component.html',
selector: "app-send-groupings",
templateUrl: "send-groupings.component.html",
})
export class SendGroupingsComponent extends BaseSendComponent {
// Header
@ -45,15 +39,34 @@ export class SendGroupingsComponent extends BaseSendComponent {
scopeState: any;
private loadedTimeout: number;
constructor(sendService: SendService, i18nService: I18nService,
platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService, ngZone: NgZone,
policyService: PolicyService, userService: UserService, searchService: SearchService,
private popupUtils: PopupUtilsService, private stateService: StateService,
private router: Router, private syncService: SyncService,
private changeDetectorRef: ChangeDetectorRef, private broadcasterService: BroadcasterService,
logService: LogService) {
super(sendService, i18nService, platformUtilsService, environmentService, ngZone, searchService,
policyService, userService, logService);
constructor(
sendService: SendService,
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
environmentService: EnvironmentService,
ngZone: NgZone,
policyService: PolicyService,
userService: UserService,
searchService: SearchService,
private popupUtils: PopupUtilsService,
private stateService: StateService,
private router: Router,
private syncService: SyncService,
private changeDetectorRef: ChangeDetectorRef,
private broadcasterService: BroadcasterService,
logService: LogService
) {
super(
sendService,
i18nService,
platformUtilsService,
environmentService,
ngZone,
searchService,
policyService,
userService,
logService
);
super.onSuccessfulLoad = async () => {
this.calculateTypeCounts();
this.selectAll();
@ -62,9 +75,11 @@ export class SendGroupingsComponent extends BaseSendComponent {
async ngOnInit() {
// Determine Header details
this.showLeftHeader = !(this.popupUtils.inSidebar(window) && this.platformUtilsService.isFirefox());
this.showLeftHeader = !(
this.popupUtils.inSidebar(window) && this.platformUtilsService.isFirefox()
);
// Clear state of Send Type Component
this.stateService.remove('SendTypeComponent');
this.stateService.remove("SendTypeComponent");
// Let super class finish
await super.ngOnInit();
// Handle State Restore if necessary
@ -92,7 +107,7 @@ export class SendGroupingsComponent extends BaseSendComponent {
this.broadcasterService.subscribe(ComponentId, (message: any) => {
this.ngZone.run(async () => {
switch (message.command) {
case 'syncCompleted':
case "syncCompleted":
window.setTimeout(() => {
this.load();
}, 500);
@ -118,18 +133,18 @@ export class SendGroupingsComponent extends BaseSendComponent {
}
async selectType(type: SendType) {
this.router.navigate(['/send-type'], { queryParams: { type: type } });
this.router.navigate(["/send-type"], { queryParams: { type: type } });
}
async selectSend(s: SendView) {
this.router.navigate(['/edit-send'], { queryParams: { sendId: s.id } });
this.router.navigate(["/edit-send"], { queryParams: { sendId: s.id } });
}
async addSend() {
if (this.disableSend) {
return;
}
this.router.navigate(['/add-send']);
this.router.navigate(["/add-send"]);
}
async removePassword(s: SendView): Promise<boolean> {
@ -140,13 +155,15 @@ export class SendGroupingsComponent extends BaseSendComponent {
}
showSearching() {
return this.hasSearched || (!this.searchPending && this.searchService.isSearchable(this.searchText));
return (
this.hasSearched || (!this.searchPending && this.searchService.isSearchable(this.searchText))
);
}
private calculateTypeCounts() {
// Create type counts
const typeCounts = new Map<SendType, number>();
this.sends.forEach(s => {
this.sends.forEach((s) => {
if (typeCounts.has(s.type)) {
typeCounts.set(s.type, typeCounts.get(s.type) + 1);
} else {

50
src/popup/send/send-type.component.html
View File

@ -2,31 +2,49 @@
<div class="left">
<button type="button" appBlurClick (click)="back()">
<span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
<span>{{'back' | i18n}}</span>
<span>{{ "back" | i18n }}</span>
</button>
</div>
<h1 class="sr-only">{{'send' | i18n}}</h1>
<h1 class="sr-only">{{ "send" | i18n }}</h1>
<div class="search">
<input type="search" placeholder="{{'searchType' | i18n}}" id="search" [(ngModel)]="searchText"
(input)="search(200)" autocomplete="off" appAutofocus>
<input
type="search"
placeholder="{{ 'searchType' | i18n }}"
id="search"
[(ngModel)]="searchText"
(input)="search(200)"
autocomplete="off"
appAutofocus
/>
<i class="fa fa-search"></i>
</div>
<div class="right">
<button type="button" appBlurClick (click)="addSend()" appA11yTitle="{{'addSend' | i18n}}" [disabled]="disableSend">
<button
type="button"
appBlurClick
(click)="addSend()"
appA11yTitle="{{ 'addSend' | i18n }}"
[disabled]="disableSend"
>
<i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
</button>
</div>
</header>
<content [ngClass]="{'flex' : disableSend}">
<content [ngClass]="{ flex: disableSend }">
<app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
{{'sendDisabledWarning' | i18n}}
{{ "sendDisabledWarning" | i18n }}
</app-callout>
<div class="no-items" *ngIf="!filteredSends.length">
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
<ng-container *ngIf="loaded">
<p>{{'noItemsInList' | i18n}}</p>
<button type="button" (click)="addSend()" class="btn block primary link" [disabled]="disableSend">
{{'addSend' | i18n}}
<p>{{ "noItemsInList" | i18n }}</p>
<button
type="button"
(click)="addSend()"
class="btn block primary link"
[disabled]="disableSend"
>
{{ "addSend" | i18n }}
</button>
</ng-container>
</div>
@ -36,9 +54,15 @@
<span class="flex-right">{{ filteredSends.length }}</span>
</h2>
<div class="box-content">
<app-send-list [sends]="filteredSends" title="{{'editItem' | i18n}}" [disabledByPolicy]="disableSend"
(onSelected)="selectSend($event)" (onCopySendLink)="copy($event)"
(onRemovePassword)="removePassword($event)" (onDeleteSend)="delete($event)">
<app-send-list
[sends]="filteredSends"
title="{{ 'editItem' | i18n }}"
[disabledByPolicy]="disableSend"
(onSelected)="selectSend($event)"
(onCopySendLink)="copy($event)"
(onRemovePassword)="removePassword($event)"
(onDeleteSend)="delete($event)"
>
</app-send-list>
</div>
</div>

107
src/popup/send/send-type.component.ts
View File

@ -1,42 +1,35 @@
import {
ChangeDetectorRef,
Component,
NgZone,
} from '@angular/core';
import { ChangeDetectorRef, Component, NgZone } from "@angular/core";
import {
ActivatedRoute,
Router,
} from '@angular/router';
import { ActivatedRoute, Router } from "@angular/router";
import { first } from 'rxjs/operators';
import { first } from "rxjs/operators";
import { Location } from '@angular/common';
import { Location } from "@angular/common";
import { SendView } from 'jslib-common/models/view/sendView';
import { SendView } from "jslib-common/models/view/sendView";
import { SendComponent as BaseSendComponent } from 'jslib-angular/components/send/send.component';
import { SendComponent as BaseSendComponent } from "jslib-angular/components/send/send.component";
import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.service';
import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { LogService } from 'jslib-common/abstractions/log.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { PolicyService } from 'jslib-common/abstractions/policy.service';
import { SearchService } from 'jslib-common/abstractions/search.service';
import { SendService } from 'jslib-common/abstractions/send.service';
import { StateService } from 'jslib-common/abstractions/state.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
import { EnvironmentService } from "jslib-common/abstractions/environment.service";
import { I18nService } from "jslib-common/abstractions/i18n.service";
import { LogService } from "jslib-common/abstractions/log.service";
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
import { PolicyService } from "jslib-common/abstractions/policy.service";
import { SearchService } from "jslib-common/abstractions/search.service";
import { SendService } from "jslib-common/abstractions/send.service";
import { StateService } from "jslib-common/abstractions/state.service";
import { UserService } from "jslib-common/abstractions/user.service";
import { PopupUtilsService } from '../services/popup-utils.service';
import { PopupUtilsService } from "../services/popup-utils.service";
import { SendType } from 'jslib-common/enums/sendType';
import { SendType } from "jslib-common/enums/sendType";
const ComponentId = 'SendTypeComponent';
const ComponentId = "SendTypeComponent";
@Component({
selector: 'app-send-type',
templateUrl: 'send-type.component.html',
selector: "app-send-type",
templateUrl: "send-type.component.html",
})
export class SendTypeComponent extends BaseSendComponent {
groupingTitle: string;
@ -45,25 +38,47 @@ export class SendTypeComponent extends BaseSendComponent {
private refreshTimeout: number;
private applySavedState = true;
constructor(sendService: SendService, i18nService: I18nService,
platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService, ngZone: NgZone,
policyService: PolicyService, userService: UserService, searchService: SearchService,
private popupUtils: PopupUtilsService, private stateService: StateService,
private route: ActivatedRoute, private location: Location, private changeDetectorRef: ChangeDetectorRef,
private broadcasterService: BroadcasterService, private router: Router, logService: LogService) {
super(sendService, i18nService, platformUtilsService, environmentService, ngZone, searchService,
policyService, userService, logService);
constructor(
sendService: SendService,
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
environmentService: EnvironmentService,
ngZone: NgZone,
policyService: PolicyService,
userService: UserService,
searchService: SearchService,
private popupUtils: PopupUtilsService,
private stateService: StateService,
private route: ActivatedRoute,
private location: Location,
private changeDetectorRef: ChangeDetectorRef,
private broadcasterService: BroadcasterService,
private router: Router,
logService: LogService
) {
super(
sendService,
i18nService,
platformUtilsService,
environmentService,
ngZone,
searchService,
policyService,
userService,
logService
);
super.onSuccessfulLoad = async () => {
this.selectType(this.type);
};
this.applySavedState = (window as any).previousPopupUrl != null &&
!(window as any).previousPopupUrl.startsWith('/send-type');
this.applySavedState =
(window as any).previousPopupUrl != null &&
!(window as any).previousPopupUrl.startsWith("/send-type");
}
async ngOnInit() {
// Let super class finish
await super.ngOnInit();
this.route.queryParams.pipe(first()).subscribe(async params => {
this.route.queryParams.pipe(first()).subscribe(async (params) => {
if (this.applySavedState) {
this.state = (await this.stateService.get<any>(ComponentId)) || {};
if (this.state.searchText != null) {
@ -75,15 +90,15 @@ export class SendTypeComponent extends BaseSendComponent {
this.type = parseInt(params.type, null);
switch (this.type) {
case SendType.Text:
this.groupingTitle = this.i18nService.t('sendTypeText');
this.groupingTitle = this.i18nService.t("sendTypeText");
break;
case SendType.File:
this.groupingTitle = this.i18nService.t('sendTypeFile');
this.groupingTitle = this.i18nService.t("sendTypeFile");
break;
default:
break;
}
await this.load(s => s.type === this.type);
await this.load((s) => s.type === this.type);
}
// Restore state and remove reference
@ -97,7 +112,7 @@ export class SendTypeComponent extends BaseSendComponent {
this.broadcasterService.subscribe(ComponentId, (message: any) => {
this.ngZone.run(async () => {
switch (message.command) {
case 'syncCompleted':
case "syncCompleted":
if (message.successfully) {
this.refreshTimeout = window.setTimeout(() => {
this.refresh();
@ -125,14 +140,14 @@ export class SendTypeComponent extends BaseSendComponent {
}
async selectSend(s: SendView) {
this.router.navigate(['/edit-send'], { queryParams: { sendId: s.id } });
this.router.navigate(["/edit-send"], { queryParams: { sendId: s.id } });
}
async addSend() {
if (this.disableSend) {
return;
}
this.router.navigate(['/add-send'], { queryParams: { type: this.type } });
this.router.navigate(["/add-send"], { queryParams: { type: this.type } });
}
async removePassword(s: SendView): Promise<boolean> {
@ -143,7 +158,7 @@ export class SendTypeComponent extends BaseSendComponent {
}
back() {
(window as any).routeDirection = 'b';
(window as any).routeDirection = "b";
this.location.back();
}

Some files were not shown because too many files have changed in this diff Show More