Merge pull request #493 from padloc/feature/richtext-markdown-notes
Feature/richtext markdown notes
This commit is contained in:
Martin Kleinschrodt
GitHub
commit
07f6f0ed10
File diff suppressed because it is too large
Load Diff
|
|
@ -24,17 +24,21 @@
|
|||
"@padloc/locale": "4.0.0",
|
||||
"@simplewebauthn/browser": "4.0.0",
|
||||
"@simplewebauthn/typescript-types": "4.0.0",
|
||||
"@tiptap/core": "2.0.0-beta.182",
|
||||
"@tiptap/starter-kit": "2.0.0-beta.191",
|
||||
"@types/autosize": "4.0.1",
|
||||
"@types/dompurify": "2.3.1",
|
||||
"@types/marked": "4.0.3",
|
||||
"@types/papaparse": "5.2.5",
|
||||
"@types/qrcode": "1.4.1",
|
||||
"@types/turndown": "5.0.1",
|
||||
"@types/ua-parser-js": "0.7.36",
|
||||
"@types/workbox-precaching": "4.3.1",
|
||||
"@types/workbox-sw": "4.3.1",
|
||||
"@types/workbox-window": "4.3.3",
|
||||
"@types/zxcvbn": "4.4.1",
|
||||
"@webcomponents/webcomponentsjs": "2.5.0",
|
||||
"autosize": "5.0.0",
|
||||
"autosize": "5.0.1",
|
||||
"date-fns": "2.22.1",
|
||||
"dompurify": "2.3.3",
|
||||
"event-target-shim": "6.0.2",
|
||||
|
|
@ -43,10 +47,11 @@
|
|||
"jszip": "3.10.0",
|
||||
"lit": "2.0.2",
|
||||
"localforage": "1.9.0",
|
||||
"marked": "4.0.12",
|
||||
"marked": "4.0.18",
|
||||
"papaparse": "5.3.1",
|
||||
"qrcode": "1.5.0",
|
||||
"reflect-metadata": "0.1.13",
|
||||
"turndown": "7.1.1",
|
||||
"typescript": "4.4.3",
|
||||
"ua-parser-js": "0.7.28",
|
||||
"workbox-precaching": "6.2.0",
|
||||
|
|
|
|||
|
|
@ -200,6 +200,7 @@ export abstract class BaseInput extends LitElement {
|
|||
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.input-element {
|
||||
|
|
@ -260,7 +261,7 @@ export abstract class BaseInput extends LitElement {
|
|||
const { focused, value, placeholder } = this;
|
||||
return html`
|
||||
${this._renderAbove()}
|
||||
<div class="horizontal center-aligning layout">
|
||||
<div class="horizontal center-aligning layout fill-vertically">
|
||||
${this._renderBefore()}
|
||||
|
||||
<div class="input-container stretch">
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import "./scroller";
|
|||
import "./button";
|
||||
import { customElement, query, state } from "lit/decorators.js";
|
||||
import { css, html } from "lit";
|
||||
import "./icon";
|
||||
import { checkFeatureDisabled } from "../lib/provisioning";
|
||||
|
||||
@customElement("pl-create-item-dialog")
|
||||
export class CreateItemDialog extends Dialog<Vault, VaultItem> {
|
||||
|
|
@ -23,6 +25,10 @@ export class CreateItemDialog extends Dialog<Vault, VaultItem> {
|
|||
@state()
|
||||
private _suggestedTemplate: ItemTemplate | null = null;
|
||||
|
||||
private get _org() {
|
||||
return this._vault?.org && app.getOrg(this._vault.org.id);
|
||||
}
|
||||
|
||||
readonly preventDismiss = true;
|
||||
|
||||
static styles = [
|
||||
|
|
@ -54,7 +60,7 @@ export class CreateItemDialog extends Dialog<Vault, VaultItem> {
|
|||
value: v,
|
||||
disabled: !app.isEditable(v),
|
||||
}))}
|
||||
@change=${() => (this._vault = this._vaultSelect.value)}
|
||||
@change=${this._vaultSelected}
|
||||
></pl-select>
|
||||
|
||||
<div class="double-margined text-centering">${$l("What kind of item you would like to add?")}</div>
|
||||
|
|
@ -64,7 +70,7 @@ export class CreateItemDialog extends Dialog<Vault, VaultItem> {
|
|||
(template) => html`
|
||||
<pl-button
|
||||
class="horizontal center-aligning text-left-aligning spacing layout template ghost"
|
||||
@click=${() => (this._template = template)}
|
||||
@click=${() => this._selectTemplate(template)}
|
||||
.toggled=${this._template === template}
|
||||
>
|
||||
${template.iconSrc
|
||||
|
|
@ -89,6 +95,43 @@ export class CreateItemDialog extends Dialog<Vault, VaultItem> {
|
|||
`;
|
||||
}
|
||||
|
||||
private _checkAttachmentsDisabled() {
|
||||
return this._org
|
||||
? checkFeatureDisabled(app.getOrgFeatures(this._org).attachments, this._org.isOwner(app.account!))
|
||||
: checkFeatureDisabled(app.getAccountFeatures().attachments);
|
||||
}
|
||||
|
||||
private _checkTotpDisabled() {
|
||||
return this._org
|
||||
? checkFeatureDisabled(app.getOrgFeatures(this._org).totpField, this._org.isOwner(app.account!))
|
||||
: checkFeatureDisabled(app.getAccountFeatures().totpField);
|
||||
}
|
||||
|
||||
private _checkNotesDisabled() {
|
||||
return this._org
|
||||
? checkFeatureDisabled(app.getOrgFeatures(this._org).notesField, this._org.isOwner(app.account!))
|
||||
: checkFeatureDisabled(app.getAccountFeatures().notesField);
|
||||
}
|
||||
|
||||
private _vaultSelected() {
|
||||
this._vault = this._vaultSelect.value;
|
||||
this._template = this._suggestedTemplate || ITEM_TEMPLATES[0];
|
||||
}
|
||||
|
||||
private _selectTemplate(template: ItemTemplate) {
|
||||
if (template.attachment && this._checkAttachmentsDisabled()) {
|
||||
return;
|
||||
}
|
||||
if (template.fields.some((field) => field.type === FieldType.Note) && this._checkNotesDisabled()) {
|
||||
return;
|
||||
}
|
||||
if (template.fields.some((field) => field.type === FieldType.Totp) && this._checkTotpDisabled()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._template = template;
|
||||
}
|
||||
|
||||
private async _enter() {
|
||||
const vault = this._vault;
|
||||
|
||||
|
|
|
|||
|
|
@ -12,10 +12,15 @@ import { Drawer } from "./drawer";
|
|||
import { customElement, property, query, state } from "lit/decorators.js";
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { generatePassphrase } from "@padloc/core/src/diceware";
|
||||
import { randomString, charSets } from "@padloc/core/src/util";
|
||||
import { randomString, charSets, wait } from "@padloc/core/src/util";
|
||||
import { app } from "../globals";
|
||||
import { descriptionForAudit, iconForAudit, titleTextForAudit } from "../lib/audit";
|
||||
import "./popover";
|
||||
import "./rich-input";
|
||||
import "./rich-content";
|
||||
import { RichInput } from "./rich-input";
|
||||
import { singleton } from "../lib/singleton";
|
||||
import { NoteDialog } from "./note-dialog";
|
||||
|
||||
@customElement("pl-field")
|
||||
export class FieldElement extends LitElement {
|
||||
|
|
@ -52,23 +57,38 @@ export class FieldElement extends LitElement {
|
|||
@query(".drawer")
|
||||
private _drawer: Drawer;
|
||||
|
||||
@singleton("pl-note-dialog")
|
||||
private _noteDialog: NoteDialog;
|
||||
|
||||
private get _fieldDef() {
|
||||
return FIELD_DEFS[this.field.type] || FIELD_DEFS.text;
|
||||
}
|
||||
|
||||
private get _fieldActions() {
|
||||
const actions = [
|
||||
...(this._fieldDef.actions || []),
|
||||
{ icon: "copy", label: $l("Copy"), action: () => this.dispatchEvent(new CustomEvent("copy-clipboard")) },
|
||||
{
|
||||
icon: "edit",
|
||||
label: $l("Edit"),
|
||||
action: () => {
|
||||
this.dispatchEvent(new CustomEvent("edit"));
|
||||
this._drawer.collapsed = true;
|
||||
},
|
||||
const actions = [...(this._fieldDef.actions || [])];
|
||||
|
||||
if (this.field.type === FieldType.Note) {
|
||||
actions.push({
|
||||
icon: "expand",
|
||||
label: $l("Expand"),
|
||||
action: () => this._editNoteFullscreen(),
|
||||
});
|
||||
} else {
|
||||
actions.push({
|
||||
icon: "copy",
|
||||
label: $l("Copy"),
|
||||
action: () => this.dispatchEvent(new CustomEvent("copy-clipboard")),
|
||||
});
|
||||
}
|
||||
|
||||
actions.push({
|
||||
icon: "edit",
|
||||
label: $l("Edit"),
|
||||
action: () => {
|
||||
this.dispatchEvent(new CustomEvent("edit"));
|
||||
this._drawer.collapsed = true;
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
if (this._fieldDef.mask && !app.settings.unmaskFieldsOnHover) {
|
||||
actions.unshift({
|
||||
|
|
@ -179,6 +199,18 @@ export class FieldElement extends LitElement {
|
|||
}, 50);
|
||||
}
|
||||
|
||||
private async _editNoteFullscreen() {
|
||||
const value = await this._noteDialog.show(this.field.value);
|
||||
if (typeof value === "string" && value !== this.field.value) {
|
||||
if (!this.editing) {
|
||||
this.dispatchEvent(new CustomEvent("edit"));
|
||||
await wait(100);
|
||||
await this.updateComplete;
|
||||
}
|
||||
this._valueInput.value = this.field.value = value;
|
||||
}
|
||||
}
|
||||
|
||||
static styles = [
|
||||
shared,
|
||||
css`
|
||||
|
|
@ -215,13 +247,21 @@ export class FieldElement extends LitElement {
|
|||
}
|
||||
|
||||
.value-display {
|
||||
display: block;
|
||||
margin: 0 0.4em 0.4em 1.5em;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
user-select: text;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
pre.value-display {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.value-display.small {
|
||||
margin-left: 1.8em;
|
||||
}
|
||||
|
||||
.move-button {
|
||||
display: flex;
|
||||
--button-padding: 0 0.5em;
|
||||
|
|
@ -253,6 +293,12 @@ export class FieldElement extends LitElement {
|
|||
return html` <pre class="value-display mono">${format(this.field.value, this._masked)}</pre> `;
|
||||
case "totp":
|
||||
return html` <pl-totp class="mono value-display" .secret=${this.field.value}></pl-totp> `;
|
||||
case "note":
|
||||
return html` <pl-rich-content
|
||||
class="small value-display"
|
||||
type="markdown"
|
||||
.content=${this.field.value}
|
||||
></pl-rich-content>`;
|
||||
default:
|
||||
return html` <pre class="value-display">${format(this.field.value, this._masked)}</pre> `;
|
||||
}
|
||||
|
|
@ -260,16 +306,25 @@ export class FieldElement extends LitElement {
|
|||
|
||||
private _renderEditValue() {
|
||||
switch (this.field.type) {
|
||||
case "note":
|
||||
case "text":
|
||||
return html`
|
||||
<pl-textarea
|
||||
class="value-input"
|
||||
.placeholder=${$l("Enter Notes Here")}
|
||||
@input=${() => (this.field.value = this._valueInput.value)}
|
||||
autosize
|
||||
.value=${this.field.value}
|
||||
@input=${() => (this.field.value = this._valueInput.value)}
|
||||
></pl-textarea>
|
||||
`;
|
||||
|
||||
case "note":
|
||||
return html`
|
||||
<pl-rich-input
|
||||
class="small value-input"
|
||||
@input=${(e: Event) => (this.field.value = (e.target! as RichInput).value)}
|
||||
.value=${this.field.value}
|
||||
@toggle-fullscreen=${this._editNoteFullscreen}
|
||||
>
|
||||
</pl-textarea>
|
||||
</pl-rich-input>
|
||||
`;
|
||||
|
||||
case "totp":
|
||||
|
|
|
|||
|
|
@ -423,7 +423,7 @@ export class PlIcon extends LitElement {
|
|||
}
|
||||
|
||||
:host([icon="note"]) > div::before {
|
||||
content: "\\f036";
|
||||
content: "\\e1da";
|
||||
}
|
||||
|
||||
:host([icon="custom"]) > div::before {
|
||||
|
|
@ -581,6 +581,78 @@ export class PlIcon extends LitElement {
|
|||
:host([icon="field"]) > div::before {
|
||||
content: "\\e211";
|
||||
}
|
||||
|
||||
:host([icon="heading"]) > div::before {
|
||||
content: "\\f1dc";
|
||||
}
|
||||
|
||||
:host([icon="heading-1"]) > div::before {
|
||||
content: "\\f313";
|
||||
}
|
||||
|
||||
:host([icon="heading-2"]) > div::before {
|
||||
content: "\\f314";
|
||||
}
|
||||
|
||||
:host([icon="heading-3"]) > div::before {
|
||||
content: "\\f315";
|
||||
}
|
||||
|
||||
:host([icon="text"]) > div::before {
|
||||
content: "\\f893";
|
||||
}
|
||||
|
||||
:host([icon="bold"]) > div::before {
|
||||
content: "\\f032";
|
||||
}
|
||||
|
||||
:host([icon="italic"]) > div::before {
|
||||
content: "\\f033";
|
||||
}
|
||||
|
||||
:host([icon="strikethrough"]) > div::before {
|
||||
content: "\\f0cc";
|
||||
}
|
||||
|
||||
:host([icon="list"]) > div::before {
|
||||
content: "\\f03a";
|
||||
}
|
||||
|
||||
:host([icon="list-ul"]) > div::before {
|
||||
content: "\\f0ca";
|
||||
}
|
||||
|
||||
:host([icon="list-ol"]) > div::before {
|
||||
content: "\\f0cb";
|
||||
}
|
||||
|
||||
:host([icon="list-check"]) > div::before {
|
||||
content: "\\f0ae";
|
||||
}
|
||||
|
||||
:host([icon="blockquote"]) > div::before {
|
||||
content: "\\e0b5";
|
||||
}
|
||||
|
||||
:host([icon="line"]) > div::before {
|
||||
content: "\\f86c";
|
||||
}
|
||||
|
||||
:host([icon="expand"]) > div::before {
|
||||
content: "\\f320";
|
||||
}
|
||||
|
||||
:host([icon="collapse"]) > div::before {
|
||||
content: "\\f326";
|
||||
}
|
||||
|
||||
:host([icon="markdown"]) > div::before {
|
||||
content: "\\f354";
|
||||
}
|
||||
|
||||
:host([icon="code"]) > div::before {
|
||||
content: "\\f121";
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import "./item-icon";
|
|||
import "./popover";
|
||||
import { until } from "lit/directives/until.js";
|
||||
import { repeat } from "lit/directives/repeat.js";
|
||||
import { VaultItemID, Field, FieldDef, FIELD_DEFS, VaultItem } from "@padloc/core/src/item";
|
||||
import { VaultItemID, Field, FieldDef, FIELD_DEFS, VaultItem, FieldType } from "@padloc/core/src/item";
|
||||
import { translate as $l } from "@padloc/locale/src/translate";
|
||||
import { AttachmentInfo } from "@padloc/core/src/attachment";
|
||||
import { parseURL } from "@padloc/core/src/otp";
|
||||
|
|
@ -171,19 +171,31 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
|
|||
}
|
||||
|
||||
async addAttachment() {
|
||||
if (this._checkAttachmentsDiabled()) {
|
||||
if (this._checkAttachmentsDisabled()) {
|
||||
return;
|
||||
}
|
||||
await this.updateComplete;
|
||||
this._fileInput.click();
|
||||
}
|
||||
|
||||
private _checkAttachmentsDiabled() {
|
||||
private _checkAttachmentsDisabled() {
|
||||
return this._org
|
||||
? checkFeatureDisabled(app.getOrgFeatures(this._org).attachments, this._org.isOwner(app.account!))
|
||||
: checkFeatureDisabled(app.getAccountFeatures().attachments);
|
||||
}
|
||||
|
||||
private _checkTotpDisabled() {
|
||||
return this._org
|
||||
? checkFeatureDisabled(app.getOrgFeatures(this._org).totpField, this._org.isOwner(app.account!))
|
||||
: checkFeatureDisabled(app.getAccountFeatures().totpField);
|
||||
}
|
||||
|
||||
private _checkNotesDisabled() {
|
||||
return this._org
|
||||
? checkFeatureDisabled(app.getOrgFeatures(this._org).notesField, this._org.isOwner(app.account!))
|
||||
: checkFeatureDisabled(app.getAccountFeatures().notesField);
|
||||
}
|
||||
|
||||
private _moveField(index: number, target: "up" | "down" | number) {
|
||||
const field = this._fields[index];
|
||||
this._fields.splice(index, 1);
|
||||
|
|
@ -634,11 +646,15 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
|
|||
}
|
||||
|
||||
private async _addField(fieldDef: FieldDef) {
|
||||
// const fieldDef = await this._fieldTypeDialog.show();
|
||||
//
|
||||
// if (!fieldDef) {
|
||||
// return;
|
||||
// }
|
||||
if (fieldDef.type === FieldType.Totp) {
|
||||
if (this._checkTotpDisabled()) {
|
||||
return;
|
||||
}
|
||||
} else if (fieldDef.type === FieldType.Note) {
|
||||
if (this._checkNotesDisabled()) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this._fields.push(new Field({ name: fieldDef.name, value: "", type: fieldDef.type }));
|
||||
this.requestUpdate();
|
||||
|
|
@ -669,7 +685,7 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
|
|||
}
|
||||
|
||||
private async _addFileAttachment(file: File) {
|
||||
if (this._checkAttachmentsDiabled()) {
|
||||
if (this._checkAttachmentsDisabled()) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { VaultItem, Field, Tag, AuditType } from "@padloc/core/src/item";
|
||||
import { VaultItem, Field, Tag, AuditType, FieldType } from "@padloc/core/src/item";
|
||||
import { Vault, VaultID } from "@padloc/core/src/vault";
|
||||
import { translate as $l } from "@padloc/locale/src/translate";
|
||||
import { debounce, wait, escapeRegex, truncate } from "@padloc/core/src/util";
|
||||
|
|
@ -22,6 +22,8 @@ import { cache } from "lit/directives/cache.js";
|
|||
import { Button } from "./button";
|
||||
import "./item-icon";
|
||||
import { iconForAudit, noItemsTextForAudit, titleTextForAudit } from "../lib/audit";
|
||||
import { singleton } from "../lib/singleton";
|
||||
import { NoteDialog } from "./note-dialog";
|
||||
|
||||
export interface ListItem {
|
||||
item: VaultItem;
|
||||
|
|
@ -87,6 +89,9 @@ export class VaultItemListItem extends LitElement {
|
|||
@query(".move-right-button")
|
||||
private _moveRightButton: Button;
|
||||
|
||||
@singleton("pl-note-dialog")
|
||||
private _noteDialog: NoteDialog;
|
||||
|
||||
updated() {
|
||||
this._scroll();
|
||||
}
|
||||
|
|
@ -119,6 +124,16 @@ export class VaultItemListItem extends LitElement {
|
|||
e.stopPropagation();
|
||||
|
||||
const field = item.fields[index];
|
||||
|
||||
if (field.type === FieldType.Note) {
|
||||
const value = await this._noteDialog.show(field.value);
|
||||
if (value !== field.value) {
|
||||
field.value = value;
|
||||
await app.updateItem(item, { fields: item.fields });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
setClipboard(await field.transform(), `${item.name} / ${field.name}`);
|
||||
const fieldEl = e.target as HTMLElement;
|
||||
fieldEl.classList.add("copied");
|
||||
|
|
@ -733,7 +748,7 @@ export class ItemsList extends StateMixin(LitElement) {
|
|||
|
||||
<div class="horizontal layout">
|
||||
<pl-button class="slim transparent" @click=${() => (this.multiSelect = true)}>
|
||||
<pl-icon icon="checked"></pl-icon>
|
||||
<pl-icon icon="list-check"></pl-icon>
|
||||
</pl-button>
|
||||
|
||||
<pl-button
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
import { mixins } from "../styles";
|
||||
import { Dialog } from "./dialog";
|
||||
import "./icon";
|
||||
import { css, html } from "lit";
|
||||
import { customElement, query } from "lit/decorators.js";
|
||||
import "./button";
|
||||
import "./rich-input";
|
||||
import { RichInput } from "./rich-input";
|
||||
// import { VaultItem } from "./vault-item";
|
||||
// import { View } from "./view";
|
||||
|
||||
@customElement("pl-note-dialog")
|
||||
export class NoteDialog extends Dialog<string, string> {
|
||||
@query("pl-rich-input")
|
||||
_input: RichInput;
|
||||
|
||||
static styles = [
|
||||
...Dialog.styles,
|
||||
css`
|
||||
.inner {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
${mixins.fullbleed()};
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
:host([open]) .scrim {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
pl-rich-input {
|
||||
border: none;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
async show(value: string) {
|
||||
const promise = super.show();
|
||||
await this.updateComplete;
|
||||
this._input.value = value;
|
||||
setTimeout(() => this._input.focus(), 100);
|
||||
return promise;
|
||||
}
|
||||
|
||||
done(val?: string) {
|
||||
return super.done(val || this._input.value);
|
||||
}
|
||||
|
||||
renderContent() {
|
||||
return html`
|
||||
<pl-rich-input
|
||||
class="fullbleed"
|
||||
isFullscreen
|
||||
@toggle-fullscreen=${() => this.done(this._input.value)}
|
||||
></pl-rich-input>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import { openExternalUrl } from "@padloc/core/src/platform";
|
||||
import { sanitize } from "dompurify";
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { html, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
||||
import { mardownToHtml } from "../lib/markdown";
|
||||
import { mixins, shared } from "../styles";
|
||||
import { markdownToLitTemplate } from "../lib/markdown";
|
||||
import { content, shared } from "../styles";
|
||||
import { icons } from "../styles/icons";
|
||||
|
||||
@customElement("pl-rich-content")
|
||||
|
|
@ -12,75 +12,13 @@ export class RichContent extends LitElement {
|
|||
@property()
|
||||
content = "";
|
||||
|
||||
@property()
|
||||
type: "plain" | "markdown" | "html" = "markdown";
|
||||
|
||||
@property({ type: Boolean })
|
||||
sanitize = true;
|
||||
|
||||
static styles = [
|
||||
shared,
|
||||
icons,
|
||||
css`
|
||||
h1 {
|
||||
font-size: var(--font-size-big);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-large);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-default);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
ul.plain {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: var(--button-padding, 0.7em);
|
||||
background: var(--button-background);
|
||||
color: var(--button-color, currentColor);
|
||||
border-width: var(--button-border-width);
|
||||
border-style: var(--button-border-style);
|
||||
border-color: var(--button-border-color);
|
||||
border-radius: var(--button-border-radius, 0.5em);
|
||||
font-weight: inherit;
|
||||
text-align: inherit;
|
||||
transition: transform 0.2s cubic-bezier(0.05, 0.7, 0.03, 3) 0s;
|
||||
--focus-outline-color: var(--button-focus-outline-color);
|
||||
box-shadow: var(--button-shadow);
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--button-primary-background, var(--button-background));
|
||||
color: var(--button-primary-color, var(--button-color));
|
||||
}
|
||||
|
||||
a.plain {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
${mixins.click("button")};
|
||||
${mixins.hover("button")};
|
||||
`,
|
||||
];
|
||||
static styles = [shared, icons, content];
|
||||
|
||||
updated() {
|
||||
for (const anchor of [...this.renderRoot.querySelectorAll("a[href]")] as HTMLAnchorElement[]) {
|
||||
|
|
@ -99,7 +37,7 @@ export class RichContent extends LitElement {
|
|||
render() {
|
||||
switch (this.type) {
|
||||
case "markdown":
|
||||
return mardownToHtml(this.content, this.sanitize);
|
||||
return markdownToLitTemplate(this.content, this.sanitize);
|
||||
case "html":
|
||||
const content = this.sanitize
|
||||
? sanitize(this.content, { ADD_TAGS: ["pl-icon"], ADD_ATTR: ["icon"] })
|
||||
|
|
|
|||
|
|
@ -0,0 +1,297 @@
|
|||
import { css, customElement, html, LitElement, property, query } from "lit-element";
|
||||
import { Editor } from "@tiptap/core";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import { shared, content } from "../styles";
|
||||
import "./button";
|
||||
import "./icon";
|
||||
import "./list";
|
||||
import "./popover";
|
||||
import { htmlToMarkdown, markdownToHtml } from "../lib/markdown";
|
||||
import { $l } from "@padloc/locale/src/translate";
|
||||
import "./textarea";
|
||||
import { Textarea } from "./textarea";
|
||||
import "./select";
|
||||
import { customScrollbar } from "../styles/mixins";
|
||||
|
||||
@customElement("pl-rich-input")
|
||||
export class RichInput extends LitElement {
|
||||
get value() {
|
||||
return this._markdownInput?.value || "";
|
||||
}
|
||||
|
||||
set value(md: string) {
|
||||
// Disallow updating the value while we're editing
|
||||
if (this._editor.isFocused || this._markdownInput?.focused) {
|
||||
return;
|
||||
}
|
||||
const html = markdownToHtml(md).replace(/\n/g, "");
|
||||
console.log(md, html);
|
||||
this._editor.commands.clearContent();
|
||||
this._editor.commands.insertContent(html);
|
||||
(async () => {
|
||||
await this.updateComplete;
|
||||
this._markdownInput.value = md;
|
||||
})();
|
||||
}
|
||||
|
||||
@property()
|
||||
mode: "wysiwyg" | "markdown" = "wysiwyg";
|
||||
|
||||
@property({ type: Boolean })
|
||||
isFullscreen = false;
|
||||
|
||||
@query("pl-textarea")
|
||||
_markdownInput: Textarea;
|
||||
|
||||
private _editor = new Editor({
|
||||
extensions: [StarterKit],
|
||||
onTransaction: () => {
|
||||
if (this.mode === "wysiwyg") {
|
||||
if (this._markdownInput) {
|
||||
this._markdownInput.value = htmlToMarkdown(this._editor.getHTML());
|
||||
}
|
||||
this.dispatchEvent(new CustomEvent("input"));
|
||||
this.requestUpdate();
|
||||
}
|
||||
},
|
||||
onFocus: () => this.classList.add("focused"),
|
||||
onBlur: () => this.classList.remove("focused"),
|
||||
});
|
||||
|
||||
firstUpdated() {
|
||||
this.renderRoot.querySelector(".container")!.append(this._editor.options.element);
|
||||
this.addEventListener("click", () => this._editor.commands.focus());
|
||||
}
|
||||
|
||||
focus() {
|
||||
if (this.mode === "wysiwyg") {
|
||||
if (!this._editor.isFocused) {
|
||||
this._editor.commands.focus();
|
||||
}
|
||||
} else {
|
||||
if (!this._markdownInput.focused) {
|
||||
this._markdownInput.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async _toggleMarkdown() {
|
||||
if (this.mode === "markdown") {
|
||||
this.mode = "wysiwyg";
|
||||
await this.updateComplete;
|
||||
const html = markdownToHtml(this._markdownInput.value).replace(/\n/g, "");
|
||||
this._editor.commands.clearContent();
|
||||
this._editor.commands.insertContent(html);
|
||||
this._editor.commands.focus();
|
||||
} else {
|
||||
this.mode = "markdown";
|
||||
await this.updateComplete;
|
||||
this._markdownInput.updated();
|
||||
this._markdownInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
static styles = [
|
||||
shared,
|
||||
content,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: text;
|
||||
border: solid 1px var(--color-shade-1);
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
:host(.focused) {
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
${customScrollbar(".container")}
|
||||
|
||||
pl-textarea {
|
||||
border: none;
|
||||
--input-padding: calc(2 * var(--spacing));
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 0.9em;
|
||||
line-height: 1.3em;
|
||||
min-height: 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="vertical layout fit-vertically">
|
||||
<div class="small padded double-spacing horizontal layout border-bottom">
|
||||
<div class="half-spacing wrapping horizontal layout stretch" ?disabled=${this.mode !== "wysiwyg"}>
|
||||
<pl-button class="transparent slim" title="${$l("Text Mode")}">
|
||||
${this._editor?.isActive("heading", { level: 1 })
|
||||
? html` <pl-icon icon="heading-1"></pl-icon> `
|
||||
: this._editor?.isActive("heading", { level: 2 })
|
||||
? html` <pl-icon icon="heading-2"></pl-icon> `
|
||||
: this._editor?.isActive("heading", { level: 3 })
|
||||
? html` <pl-icon icon="heading-3"></pl-icon> `
|
||||
: html` <pl-icon icon="text"></pl-icon> `}
|
||||
|
||||
<pl-icon class="small" icon="dropdown"></pl-icon>
|
||||
</pl-button>
|
||||
|
||||
<pl-popover hide-on-click>
|
||||
<pl-list>
|
||||
<div
|
||||
class="small double-padded centering horizontal layout list-item hover click"
|
||||
@click=${() => this._editor.chain().focus().setHeading({ level: 1 }).run()}
|
||||
>
|
||||
<pl-icon icon="heading-1"></pl-icon>
|
||||
</div>
|
||||
<div
|
||||
class="small double-padded centering horizontal layout list-item hover click"
|
||||
@click=${() => this._editor.chain().focus().setHeading({ level: 2 }).run()}
|
||||
>
|
||||
<pl-icon icon="heading-2"></pl-icon>
|
||||
</div>
|
||||
<div
|
||||
class="small double-padded centering horizontal layout list-item hover click"
|
||||
@click=${() => this._editor.chain().focus().setHeading({ level: 3 }).run()}
|
||||
>
|
||||
<pl-icon icon="heading-3"></pl-icon>
|
||||
</div>
|
||||
<div
|
||||
class="small double-padded centering horizontal layout list-item hover click"
|
||||
@click=${() => this._editor.chain().focus().setParagraph().run()}
|
||||
>
|
||||
<pl-icon icon="text"></pl-icon>
|
||||
</div>
|
||||
</pl-list>
|
||||
</pl-popover>
|
||||
|
||||
<div class="border-left"></div>
|
||||
|
||||
<pl-button
|
||||
class="transparent slim"
|
||||
.toggled=${this._editor?.isActive("bold")}
|
||||
@click=${() => this._editor.chain().focus().toggleBold().run()}
|
||||
title="${$l("Bold")}"
|
||||
>
|
||||
<pl-icon icon="bold"></pl-icon>
|
||||
</pl-button>
|
||||
|
||||
<pl-button
|
||||
class="transparent slim"
|
||||
.toggled=${this._editor?.isActive("italic")}
|
||||
@click=${() => this._editor.chain().focus().toggleItalic().run()}
|
||||
title="${$l("Italic")}"
|
||||
>
|
||||
<pl-icon icon="italic"></pl-icon>
|
||||
</pl-button>
|
||||
|
||||
<pl-button
|
||||
class="transparent slim"
|
||||
.toggled=${this._editor?.isActive("strike")}
|
||||
@click=${() => this._editor.chain().focus().toggleStrike().run()}
|
||||
title="${$l("Strikethrough")}"
|
||||
>
|
||||
<pl-icon icon="strikethrough"></pl-icon>
|
||||
</pl-button>
|
||||
|
||||
<div class="border-left"></div>
|
||||
|
||||
<pl-button
|
||||
class="transparent slim"
|
||||
.toggled=${this._editor?.isActive("bulletList")}
|
||||
@click=${() => this._editor.chain().focus().toggleBulletList().run()}
|
||||
title="${$l("Unordered List")}"
|
||||
>
|
||||
<pl-icon icon="list"></pl-icon>
|
||||
</pl-button>
|
||||
|
||||
<pl-button
|
||||
class="transparent slim"
|
||||
.toggled=${this._editor?.isActive("orderedList")}
|
||||
@click=${() => this._editor.chain().focus().toggleOrderedList().run()}
|
||||
title="${$l("Ordered List")}"
|
||||
>
|
||||
<pl-icon icon="list-ol"></pl-icon>
|
||||
</pl-button>
|
||||
|
||||
<pl-button
|
||||
class="transparent slim"
|
||||
.toggled=${this._editor?.isActive("blockquote")}
|
||||
@click=${() => this._editor.chain().focus().toggleBlockquote().run()}
|
||||
title="${$l("Blockquote")}"
|
||||
>
|
||||
<pl-icon icon="blockquote"></pl-icon>
|
||||
</pl-button>
|
||||
|
||||
<pl-button
|
||||
class="transparent slim"
|
||||
.toggled=${this._editor?.isActive("codeBlock")}
|
||||
@click=${() => this._editor.chain().focus().toggleCodeBlock().run()}
|
||||
title="${$l("Code Block")}"
|
||||
>
|
||||
<pl-icon icon="code"></pl-icon>
|
||||
</pl-button>
|
||||
|
||||
<div class="border-left"></div>
|
||||
|
||||
<pl-button
|
||||
class="transparent slim"
|
||||
@click=${() => this._editor.chain().focus().setHorizontalRule().run()}
|
||||
title="${$l("Insert Horizontal Line")}"
|
||||
>
|
||||
<pl-icon icon="line"></pl-icon>
|
||||
</pl-button>
|
||||
</div>
|
||||
<div class="half-spacing left-padded horizontal layout border-left">
|
||||
<pl-select
|
||||
class="slim"
|
||||
.value=${this.mode as any}
|
||||
.options=${[
|
||||
{
|
||||
label: "WYSIWYG",
|
||||
value: "wysiwyg",
|
||||
},
|
||||
{
|
||||
label: "Markdown",
|
||||
value: "markdown",
|
||||
},
|
||||
]}
|
||||
hidden
|
||||
></pl-select>
|
||||
|
||||
<pl-button
|
||||
class="transparent slim"
|
||||
style="line-height: 1.2em"
|
||||
@click=${() => this._toggleMarkdown()}
|
||||
.toggled=${this.mode === "markdown"}
|
||||
>
|
||||
<div>M</div>
|
||||
<pl-icon icon="markdown"></pl-icon>
|
||||
</pl-button>
|
||||
|
||||
<pl-button
|
||||
class="transparent slim"
|
||||
@click=${() => this.dispatchEvent(new CustomEvent("toggle-fullscreen"))}
|
||||
>
|
||||
<pl-icon icon="${this.isFullscreen ? "cancel" : "expand"}"></pl-icon>
|
||||
</pl-button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="double-padded container scroller stretch"
|
||||
@click=${(e: Event) => e.stopPropagation()}
|
||||
?hidden=${this.mode !== "wysiwyg"}
|
||||
></div>
|
||||
<div class="scrolling stretch">
|
||||
<pl-textarea autosize ?hidden=${this.mode !== "markdown"} class="fill-vertically"></pl-textarea>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
// @ts-ignore
|
||||
import autosize from "autosize/src/autosize";
|
||||
import autosize from "autosize";
|
||||
import { css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { BaseInput } from "./base-input";
|
||||
|
|
@ -12,13 +11,17 @@ export class Textarea extends BaseInput {
|
|||
|
||||
updated() {
|
||||
if (this.autosize) {
|
||||
setTimeout(() => autosize(this._inputElement));
|
||||
setTimeout(() => autosize.update(this._inputElement));
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.addEventListener("keydown", (e: KeyboardEvent) => this._keydown(e));
|
||||
if (this.autosize) {
|
||||
await this.updateComplete;
|
||||
autosize(this._inputElement);
|
||||
}
|
||||
}
|
||||
|
||||
static styles = [
|
||||
|
|
|
|||
|
|
@ -1,8 +1,75 @@
|
|||
import { addHook, sanitize } from "dompurify";
|
||||
import { marked } from "marked";
|
||||
import TurnDown from "turndown";
|
||||
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
||||
import { html } from "lit";
|
||||
|
||||
marked.use({
|
||||
renderer: {
|
||||
code(content: string) {
|
||||
return `<pre><code>${content.replace("\n", "<br>")}</code></pre>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const turndown = new TurnDown({
|
||||
headingStyle: "atx",
|
||||
bulletListMarker: "-",
|
||||
hr: "---",
|
||||
codeBlockStyle: "fenced",
|
||||
});
|
||||
|
||||
turndown.addRule("p", {
|
||||
filter: "p",
|
||||
replacement: (content, node) => {
|
||||
if (node.nextSibling && !["OL", "UL"].includes(node.nextSibling.nodeName)) {
|
||||
content = content + "\n\n";
|
||||
}
|
||||
if (node.previousSibling) {
|
||||
content = "\n\n" + content;
|
||||
}
|
||||
return content;
|
||||
},
|
||||
});
|
||||
|
||||
turndown.addRule("strikethrough", {
|
||||
filter: ["s"],
|
||||
replacement: function (content) {
|
||||
return "~" + content + "~";
|
||||
},
|
||||
});
|
||||
|
||||
turndown.addRule("li", {
|
||||
filter: "li",
|
||||
replacement: (content, node, options) => {
|
||||
content = content
|
||||
.replace(/^\n+/, "") // remove leading newlines
|
||||
.replace(/\n+$/, "\n") // replace trailing newlines with just a single one
|
||||
.replace(/\n/gm, "\n "); // indent
|
||||
|
||||
var prefix = options.bulletListMarker + " ";
|
||||
var parent = node.parentNode as HTMLElement | null;
|
||||
if (parent?.nodeName === "OL") {
|
||||
var start = parent.getAttribute("start");
|
||||
var index = Array.prototype.indexOf.call(parent.children, node);
|
||||
prefix = (start ? Number(start) + index : index + 1) + ". ";
|
||||
}
|
||||
return prefix + content + (node.nextSibling && !/\n$/.test(content) ? "\n" : "");
|
||||
},
|
||||
});
|
||||
|
||||
// turndown.addRule("lists", {
|
||||
// filter: ["ul", "ol"],
|
||||
// replacement: (content, node) => {
|
||||
// const parent = node.parentNode;
|
||||
// if (parent.nodeName === "LI" && parent.lastElementChild === node) {
|
||||
// return "\n" + content;
|
||||
// } else {
|
||||
// return "\n\n" + content + "\n\n";
|
||||
// }
|
||||
// },
|
||||
// });
|
||||
|
||||
// Add a hook to make all links open a new window
|
||||
addHook("afterSanitizeAttributes", function (node) {
|
||||
// set all elements owning target to target=_blank
|
||||
|
|
@ -11,12 +78,23 @@ addHook("afterSanitizeAttributes", function (node) {
|
|||
}
|
||||
});
|
||||
|
||||
export function mardownToHtml(md: string, san = true) {
|
||||
export function markdownToHtml(md: string, san = true) {
|
||||
let markup = marked(md, {
|
||||
headerIds: false,
|
||||
gfm: true,
|
||||
breaks: true,
|
||||
});
|
||||
if (san) {
|
||||
markup = sanitize(markup);
|
||||
}
|
||||
return markup;
|
||||
}
|
||||
|
||||
export function htmlToMarkdown(html: string) {
|
||||
return turndown.turndown(html);
|
||||
}
|
||||
|
||||
export function markdownToLitTemplate(md: string, san = true) {
|
||||
const markup = markdownToHtml(md, san);
|
||||
return html`${unsafeHTML(markup)}`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
import { css } from "lit";
|
||||
import { click, hover } from "./mixins";
|
||||
|
||||
export const content = css`
|
||||
h1 {
|
||||
font-size: var(--font-size-big);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-large);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-default);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p:not(:last-child),
|
||||
blockquote:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ol ol,
|
||||
ul ol,
|
||||
ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ol > li > ol {
|
||||
list-style: lower-roman;
|
||||
}
|
||||
|
||||
ol > li > ol > li > ol {
|
||||
list-style: lower-alpha;
|
||||
}
|
||||
|
||||
ul > li > ul {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
ul > li > ul > li > ul {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
ul.plain {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li p:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: var(--button-padding, 0.7em);
|
||||
background: var(--button-background);
|
||||
color: var(--button-color, currentColor);
|
||||
border-width: var(--button-border-width);
|
||||
border-style: var(--button-border-style);
|
||||
border-color: var(--button-border-color);
|
||||
border-radius: var(--button-border-radius, 0.5em);
|
||||
font-weight: inherit;
|
||||
text-align: inherit;
|
||||
transition: transform 0.2s cubic-bezier(0.05, 0.7, 0.03, 3) 0s;
|
||||
--focus-outline-color: var(--button-focus-outline-color);
|
||||
box-shadow: var(--button-shadow);
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--button-primary-background, var(--button-background));
|
||||
color: var(--button-primary-color, var(--button-color));
|
||||
}
|
||||
|
||||
${click("button")};
|
||||
${hover("button")};
|
||||
|
||||
a.plain {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: solid 2px var(--color-shade-3);
|
||||
padding: 0.25em 0 0.25em 0.5em;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: solid 1px var(--color-shade-3);
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
display: block;
|
||||
border: solid 1px var(--color-shade-1);
|
||||
background: var(--color-shade-1);
|
||||
padding: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 0.5em;
|
||||
overflow-x: auto;
|
||||
}
|
||||
`;
|
||||
|
|
@ -7,6 +7,7 @@ import { layout } from "./layout";
|
|||
import { animation } from "./animation";
|
||||
import { responsive } from "./responsive";
|
||||
import { misc } from "./misc";
|
||||
import { content } from "./content";
|
||||
|
||||
export const shared = css`
|
||||
${reset}
|
||||
|
|
@ -17,4 +18,4 @@ export const shared = css`
|
|||
${misc}
|
||||
`;
|
||||
|
||||
export { mixins, config, reset, base, layout, animation, responsive, misc };
|
||||
export { mixins, config, reset, base, layout, animation, responsive, misc, content };
|
||||
|
|
|
|||
|
|
@ -141,6 +141,14 @@ export const misc = css`
|
|||
border-top: solid 1px var(--border-color);
|
||||
}
|
||||
|
||||
.border-left {
|
||||
border-left: solid 1px var(--border-color);
|
||||
}
|
||||
|
||||
.border-right {
|
||||
border-right: solid 1px var(--border-color);
|
||||
}
|
||||
|
||||
:not(:hover) > .reveal-on-parent-hover:not(:focus-within) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,6 +117,10 @@ export class PBES2Container extends BaseContainer {
|
|||
this.keyParams.salt = await getProvider().randomBytes(16);
|
||||
}
|
||||
this._key = await getProvider().deriveKey(stringToBytes(password), this.keyParams);
|
||||
// If this container has data already, make sure the derived key properly decrypts it.
|
||||
if (this.encryptedData) {
|
||||
await this.getData();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -154,20 +154,6 @@ export const FIELD_DEFS: { [t in FieldType]: FieldDef } = {
|
|||
return parts.join(" ");
|
||||
},
|
||||
},
|
||||
[FieldType.Totp]: {
|
||||
type: FieldType.Totp,
|
||||
pattern: /^([A-Z2-7=]{8})+$/i,
|
||||
matchPattern: /^([A-Z2-7=]{8})+$/i,
|
||||
mask: false,
|
||||
multiline: false,
|
||||
icon: "totp",
|
||||
get name() {
|
||||
return $l("2FA Token");
|
||||
},
|
||||
async transform(value: string) {
|
||||
return await totp(base32ToBytes(value));
|
||||
},
|
||||
},
|
||||
[FieldType.Phone]: {
|
||||
type: FieldType.Phone,
|
||||
pattern: /.*/,
|
||||
|
|
@ -193,6 +179,17 @@ export const FIELD_DEFS: { [t in FieldType]: FieldDef } = {
|
|||
return masked ? value.replace(/./g, "\u2022") : value;
|
||||
},
|
||||
},
|
||||
[FieldType.Text]: {
|
||||
type: FieldType.Text,
|
||||
pattern: /.*/,
|
||||
matchPattern: /.*/,
|
||||
mask: false,
|
||||
multiline: true,
|
||||
icon: "text",
|
||||
get name() {
|
||||
return $l("Plain Text");
|
||||
},
|
||||
},
|
||||
[FieldType.Note]: {
|
||||
type: FieldType.Note,
|
||||
pattern: /.*/,
|
||||
|
|
@ -201,18 +198,24 @@ export const FIELD_DEFS: { [t in FieldType]: FieldDef } = {
|
|||
multiline: true,
|
||||
icon: "note",
|
||||
get name() {
|
||||
return $l("Note");
|
||||
return $l("Richtext / Markdown");
|
||||
},
|
||||
format(value: string) {
|
||||
return value.split("\n")[0] || "";
|
||||
},
|
||||
},
|
||||
[FieldType.Text]: {
|
||||
type: FieldType.Text,
|
||||
pattern: /.*/,
|
||||
matchPattern: /.*/,
|
||||
[FieldType.Totp]: {
|
||||
type: FieldType.Totp,
|
||||
pattern: /^([A-Z2-7=]{8})+$/i,
|
||||
matchPattern: /^([A-Z2-7=]{8})+$/i,
|
||||
mask: false,
|
||||
multiline: false,
|
||||
icon: "text",
|
||||
icon: "totp",
|
||||
get name() {
|
||||
return $l("Other");
|
||||
return $l("One-Time Password");
|
||||
},
|
||||
async transform(value: string) {
|
||||
return await totp(base32ToBytes(value));
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -569,6 +572,18 @@ export const ITEM_TEMPLATES: ItemTemplate[] = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
toString: () => $l("Authenticator"),
|
||||
icon: "totp",
|
||||
fields: [
|
||||
{
|
||||
get name() {
|
||||
return $l("One-Time Password");
|
||||
},
|
||||
type: FieldType.Totp,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
toString: () => $l("Document"),
|
||||
icon: "attachment",
|
||||
|
|
|
|||
|
|
@ -87,6 +87,12 @@ export class AccountFeatures extends Serializable {
|
|||
|
||||
@AsSerializable(Feature)
|
||||
billing: Feature = new Feature();
|
||||
|
||||
@AsSerializable(Feature)
|
||||
totpField: Feature = new Feature();
|
||||
|
||||
@AsSerializable(Feature)
|
||||
notesField: Feature = new Feature();
|
||||
}
|
||||
|
||||
export class OrgFeatures extends Serializable {
|
||||
|
|
@ -112,6 +118,12 @@ export class OrgFeatures extends Serializable {
|
|||
|
||||
@AsSerializable(OrgFeature)
|
||||
directorySync: OrgFeature = new OrgFeature();
|
||||
|
||||
@AsSerializable(OrgFeature)
|
||||
totpField: OrgFeature = new OrgFeature();
|
||||
|
||||
@AsSerializable(OrgFeature)
|
||||
notesField: OrgFeature = new OrgFeature();
|
||||
}
|
||||
|
||||
export class AccountProvisioning extends Storable {
|
||||
|
|
|
|||
|
|
@ -51,8 +51,7 @@ suite("Container", () => {
|
|||
container = new PBES2Container().fromRaw(container.toRaw());
|
||||
|
||||
// Trying to decrypt with a different key should throw an error
|
||||
await container.unlock("wrong password");
|
||||
await assertReject(assert, async () => container.getData(), ErrorCode.DECRYPTION_FAILED);
|
||||
await assertReject(assert, async () => container.unlock("wrong password"), ErrorCode.DECRYPTION_FAILED);
|
||||
|
||||
// Using the correct key should allow us to retreive the original message
|
||||
await container.unlock(password);
|
||||
|
|
|
|||
|
|
@ -90,6 +90,8 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
"Shared vaults",
|
||||
"Encrypted file storage",
|
||||
"Security Report",
|
||||
"Built-in Authenticator / One-Time Passwords",
|
||||
"Rich text notes with markdown support",
|
||||
],
|
||||
},
|
||||
[Tier.Premium]: {
|
||||
|
|
@ -104,6 +106,8 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
"Multi-Factor Authentication",
|
||||
"Up to 1GB encrypted file storage",
|
||||
"Security Report",
|
||||
"Built-in Authenticator / One-Time Passwords",
|
||||
"Rich text notes with markdown support",
|
||||
],
|
||||
disabledFeatures: ["Shared Vaults"],
|
||||
},
|
||||
|
|
@ -119,6 +123,9 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
"Multi-Factor Authentication",
|
||||
"Up to 1GB encrypted file storage",
|
||||
"Security Report",
|
||||
"Built-in Authenticator / One-Time Passwords",
|
||||
"Rich text notes with markdown support",
|
||||
"Share data between up to 5 users",
|
||||
"Up to 5 Shared Vaults",
|
||||
],
|
||||
disabledFeatures: [],
|
||||
|
|
@ -127,7 +134,7 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
order: 3,
|
||||
name: "Team",
|
||||
description: "Powerful collaborative password management for your team.",
|
||||
minSeats: 5,
|
||||
minSeats: 2,
|
||||
maxSeats: 50,
|
||||
features: [
|
||||
"Unlimited Vault Items",
|
||||
|
|
@ -135,6 +142,8 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
"Multi-Factor Authentication",
|
||||
"Up to 5GB encrypted file storage",
|
||||
"Security Report",
|
||||
"Built-in Authenticator / One-Time Passwords",
|
||||
"Rich text notes with markdown support",
|
||||
"Up to 20 Shared Vaults",
|
||||
"Up to 10 groups for easier permission management",
|
||||
],
|
||||
|
|
@ -152,6 +161,8 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
"Multi-Factor Authentication",
|
||||
"Up to 20GB encrypted file storage",
|
||||
"Security Report",
|
||||
"Built-in Authenticator / One-Time Passwords",
|
||||
"Rich text notes with markdown support",
|
||||
"Unlimited Vaults",
|
||||
"Unlimited Groups",
|
||||
"Directory Sync / Automatic Provisioning",
|
||||
|
|
@ -282,7 +293,7 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
|
||||
private async _loadPlans() {
|
||||
this._products.clear();
|
||||
for await (const price of this._stripe.prices.list({ expand: ["data.product"] })) {
|
||||
for await (const price of this._stripe.prices.list({ active: true, expand: ["data.product"] })) {
|
||||
const product = price.product as Stripe.Product;
|
||||
const tier = product.metadata.tier as Tier | undefined;
|
||||
if (!tier) {
|
||||
|
|
@ -418,6 +429,24 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
true,
|
||||
"File Storage"
|
||||
);
|
||||
features.totpField.disabled = true;
|
||||
features.totpField.message = await this._getUpgradeMessage(
|
||||
customer,
|
||||
[Tier.Premium, Tier.Family, Tier.Team, Tier.Business],
|
||||
undefined,
|
||||
undefined,
|
||||
true,
|
||||
"Authenticator"
|
||||
);
|
||||
features.notesField.disabled = true;
|
||||
features.notesField.message = await this._getUpgradeMessage(
|
||||
customer,
|
||||
[Tier.Premium, Tier.Family, Tier.Team, Tier.Business],
|
||||
undefined,
|
||||
undefined,
|
||||
true,
|
||||
"Rich text notes with markdown support"
|
||||
);
|
||||
features.securityReport.disabled = true;
|
||||
features.securityReport.message = await this._getUpgradeMessage(
|
||||
customer,
|
||||
|
|
@ -913,10 +942,17 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
const { priceMonthly, priceAnnual } = prod;
|
||||
const { subscription, item, price, tier: currentTier } = this._getSubscriptionInfo(cus);
|
||||
const isCurrent = currentTier === tier;
|
||||
const perSeat = [Tier.Family, Tier.Team, Tier.Business].includes(tier);
|
||||
const perSeat = [Tier.Team, Tier.Business].includes(tier);
|
||||
const info = this._tiers[tier];
|
||||
const hf = highlightFeature?.toLowerCase();
|
||||
|
||||
let monthlyQuote = priceMonthly?.unit_amount || 0;
|
||||
let annualQuote = priceAnnual?.unit_amount || 0;
|
||||
if (tier === Tier.Family) {
|
||||
monthlyQuote *= 5;
|
||||
annualQuote *= 5;
|
||||
}
|
||||
|
||||
const res = html`
|
||||
<div class="box vertical layout">
|
||||
<div class="padded bg-dark border-bottom">
|
||||
|
|
@ -928,7 +964,7 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
${priceMonthly && (!price || price.recurring?.interval === "month")
|
||||
? html`
|
||||
<span class="highlighted nowrap uppercase">
|
||||
<span class="bold large">$${(priceMonthly.unit_amount! / 100).toFixed(2)}</span>
|
||||
<span class="bold large">$${(monthlyQuote / 100).toFixed(2)}</span>
|
||||
${perSeat ? "/ seat " : ""} / month
|
||||
</span>
|
||||
`
|
||||
|
|
@ -937,7 +973,7 @@ export class StripeProvisioner extends BasicProvisioner {
|
|||
? html`
|
||||
${priceMonthly ? html`<span class="small">or </span>` : ""}
|
||||
<span class="highlighted nowrap uppercase">
|
||||
<span class="bold large">$${(priceAnnual.unit_amount! / 100).toFixed(2)}</span>
|
||||
<span class="bold large">$${(annualQuote / 100).toFixed(2)}</span>
|
||||
${perSeat ? "/ seat " : ""} / year
|
||||
</span>
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue