@lukso/up-connector 0.4.0-dev.a8c9315

package/dist/chunk-NWCNJSG3.js

@@ -0,0 +1,387 @@
+import {
+  CoreLitElement
+} from "./chunk-XGIT7YUY.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/backup-modal.ts
+import { downloadBackup } from "@lukso/passkey-auth";
+import { html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import zxcvbn from "zxcvbn";
+import "@lukso/web-components/dist/components/lukso-modal";
+import "@lukso/web-components/dist/components/lukso-button";
+import "@lukso/web-components/dist/components/lukso-input";
+var BackupModal = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.theme = "auto";
+    this.currentStep = 1 /* CHOICE */;
+    this.useEncryption = true;
+    this.password = "";
+    this.passwordConfirm = "";
+    this.passwordErrors = [];
+    this.isCreatingBackup = false;
+    this.generatedBackup = null;
+  }
+  /**
+   * Public method for parent to set backup result
+   * Called after parent handles the 'create' event
+   */
+  setBackupResult(backupFile, options) {
+    this.isCreatingBackup = false;
+    if (options?.error) {
+      this.passwordErrors = [options.error];
+      this.generatedBackup = null;
+    } else if (backupFile) {
+      this.generatedBackup = backupFile;
+      this.currentStep = 3 /* DOWNLOAD */;
+    }
+  }
+  render() {
+    return html`
+      <lukso-modal
+        ?is-open=${this.open}
+        size="medium"
+        @on-backdrop-click=${this.close}
+      >
+        <div class="p-6">
+          <!-- Header -->
+          <h2 class="m-0 mb-6 text-neutral-20 dark:text-white heading-inter-21-semi-bold">
+            ${this.getStepTitle()}
+          </h2>
+
+          <!-- Step content -->
+          ${this.renderStep()}
+        </div>
+      </lukso-modal>
+    `;
+  }
+  renderStep() {
+    switch (this.currentStep) {
+      case 1 /* CHOICE */:
+        return this.renderChoiceStep();
+      case 2 /* PASSWORD */:
+        return this.renderPasswordStep();
+      case 3 /* DOWNLOAD */:
+        return this.renderDownloadStep();
+      default:
+        return nothing;
+    }
+  }
+  renderChoiceStep() {
+    return html`
+      <div class="flex flex-col gap-3 mb-6">
+        <!-- Encrypted option (recommended) -->
+        <div
+          class="border-2 border-neutral-90 dark:border-neutral-70 rounded-lg p-4 cursor-pointer transition-all hover:border-neutral-60 dark:hover:border-neutral-60"
+          @click=${() => this.selectBackupType(true)}
+        >
+          <div class="flex items-center gap-3 mb-2">
+            <span class="text-neutral-10 dark:text-white heading-inter-16-semi-bold flex-1">
+              Encrypt backup file
+            </span>
+            <span class="text-xs text-neutral-50 dark:text-neutral-60 uppercase tracking-wide">
+              Recommended
+            </span>
+          </div>
+          <p class="m-0 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
+            Uses password-based encryption to protect the secrets in this file.
+          </p>
+        </div>
+
+        <!-- Unencrypted option -->
+        <div
+          class="border-2 border-neutral-90 dark:border-neutral-70 rounded-lg p-4 cursor-pointer transition-all hover:border-neutral-60 dark:hover:border-neutral-60"
+          @click=${() => this.selectBackupType(false)}
+        >
+          <div class="flex items-center gap-3 mb-2">
+            <span class="text-neutral-10 dark:text-white heading-inter-16-semi-bold flex-1">
+              Plain text backup
+            </span>
+            <span class="text-xs text-neutral-50 dark:text-neutral-60 uppercase tracking-wide">
+              For development only
+            </span>
+          </div>
+          <p class="m-0 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
+            Secrets will be stored in plain text.
+          </p>
+        </div>
+      </div>
+
+      <div class="flex justify-between gap-3">
+        <lukso-button variant="text" @click=${this.close}>
+          Cancel
+        </lukso-button>
+      </div>
+    `;
+  }
+  renderPasswordStep() {
+    const passwordStrength = this.password ? this.calculatePasswordStrength() : null;
+    const passwordsMatch = this.password && this.passwordConfirm && this.password === this.passwordConfirm;
+    const canProceed = this.password && this.passwordConfirm && passwordsMatch;
+    return html`
+      <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular">
+        Choose a strong password to encrypt your backup. You'll need this password to restore your wallet.
+      </p>
+
+      <div class="space-y-4">
+        <lukso-input
+          type="password"
+          label="Password"
+          placeholder="Enter a strong password"
+          .value=${this.password}
+          @on-input=${(e) => this.password = e.detail.value}
+          is-full-width
+          autofocus
+        ></lukso-input>
+
+        ${this.passwordErrors.map(
+      (error) => html`
+          <div class="mt-1 text-red-55 paragraph-inter-13-regular">${error}</div>
+        `
+    )}
+
+        ${passwordStrength ? html`
+          <div class="mt-3">
+            <div class="flex items-center justify-between mb-1">
+              <span class="paragraph-inter-13-regular text-neutral-40">Password strength:</span>
+              <span class="paragraph-inter-13-semi-bold ${passwordStrength.color}">${passwordStrength.label}</span>
+            </div>
+            <div class="h-1.5 bg-neutral-90 dark:bg-neutral-70 rounded-full overflow-hidden">
+              <div
+                class="h-full ${passwordStrength.bgColor} transition-all duration-300"
+                style="width: ${passwordStrength.width}%"
+              ></div>
+            </div>
+            <p class="mt-1 mb-0 text-neutral-40 paragraph-inter-12-regular">
+              Time to crack: ${passwordStrength.crackTime}
+            </p>
+            ${passwordStrength.feedback ? html`
+              <p class="mt-2 mb-0 text-neutral-40 paragraph-inter-12-regular">${passwordStrength.feedback}</p>
+            ` : nothing}
+          </div>
+        ` : nothing}
+
+        <lukso-input
+          type="password"
+          label="Confirm Password"
+          placeholder="Re-enter your password"
+          .value=${this.passwordConfirm}
+          @on-input=${(e) => this.passwordConfirm = e.detail.value}
+          is-full-width
+        ></lukso-input>
+
+        ${this.passwordConfirm ? html`
+          <div class="flex items-center justify-between mt-2">
+            <span class="paragraph-inter-13-regular text-neutral-40">Passwords match:</span>
+            <span class="paragraph-inter-13-semi-bold ${passwordsMatch ? "text-green-54" : "text-red-55"}">
+              ${passwordsMatch ? "Yes" : "No"}
+            </span>
+          </div>
+        ` : nothing}
+      </div>
+
+      <div class="flex justify-between gap-3 mt-6">
+        <div class="flex gap-3">
+          <lukso-button variant="text" @click=${this.close}>
+            Cancel
+          </lukso-button>
+          <lukso-button variant="secondary" @click=${this.goBack}>
+            Back
+          </lukso-button>
+        </div>
+        <lukso-button
+          variant="primary"
+          ?disabled=${!canProceed || this.isCreatingBackup}
+          ?is-loading=${this.isCreatingBackup}
+          @click=${this.createBackup}
+        >
+          Create Backup
+        </lukso-button>
+      </div>
+    `;
+  }
+  renderDownloadStep() {
+    return html`
+      <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular">
+        Your backup has been created${this.useEncryption ? " and encrypted" : ""}. Download it and keep it in a safe place.
+      </p>
+
+      ${!this.useEncryption ? html`
+        <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
+          This unencrypted backup is intended for development purposes. Use it when creating dapps that need access to the profile for testing.
+        </p>
+      ` : nothing}
+
+      <div class="flex justify-end gap-3">
+        <lukso-button variant="primary" @click=${this.handleDownload}>
+          Download Backup
+        </lukso-button>
+      </div>
+    `;
+  }
+  getStepTitle() {
+    switch (this.currentStep) {
+      case 1 /* CHOICE */:
+        return "Backup Wallet";
+      case 2 /* PASSWORD */:
+        return "Set Password";
+      case 3 /* DOWNLOAD */:
+        return "Download Backup";
+      default:
+        return "Backup Wallet";
+    }
+  }
+  selectBackupType(encrypted) {
+    this.useEncryption = encrypted;
+    if (encrypted) {
+      this.currentStep = 2 /* PASSWORD */;
+    } else {
+      this.createBackup();
+    }
+  }
+  async createBackup() {
+    this.isCreatingBackup = true;
+    this.passwordErrors = [];
+    const createEvent = new CustomEvent("create", {
+      detail: {
+        password: this.useEncryption ? this.password : void 0,
+        encrypted: this.useEncryption
+      },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    this.dispatchEvent(createEvent);
+    if (!createEvent.defaultPrevented) {
+      this.passwordErrors = [
+        'No backup handler configured. Please handle the "create" event.'
+      ];
+      this.isCreatingBackup = false;
+    }
+  }
+  handleDownload() {
+    if (this.generatedBackup) {
+      downloadBackup(this.generatedBackup);
+      this.dispatchEvent(
+        new CustomEvent("download", {
+          detail: this.generatedBackup,
+          bubbles: true,
+          composed: true
+        })
+      );
+      setTimeout(() => {
+        this.close();
+      }, 100);
+    }
+  }
+  goBack() {
+    if (this.currentStep === 2 /* PASSWORD */) {
+      this.currentStep = 1 /* CHOICE */;
+      this.password = "";
+      this.passwordConfirm = "";
+      this.passwordErrors = [];
+    }
+  }
+  close() {
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent("close", { bubbles: true, composed: true })
+    );
+    setTimeout(() => {
+      this.currentStep = 1 /* CHOICE */;
+      this.useEncryption = true;
+      this.password = "";
+      this.passwordConfirm = "";
+      this.passwordErrors = [];
+      this.isCreatingBackup = false;
+      this.generatedBackup = null;
+    }, 300);
+  }
+  calculatePasswordStrength() {
+    const result = zxcvbn(this.password);
+    const strengthMap = [
+      {
+        level: "very-weak",
+        label: "Very Weak",
+        color: "text-red-55",
+        bgColor: "bg-red-55",
+        width: 20
+      },
+      {
+        level: "weak",
+        label: "Weak",
+        color: "text-red-65",
+        bgColor: "bg-red-65",
+        width: 40
+      },
+      {
+        level: "fair",
+        label: "Fair",
+        color: "text-yellow-55",
+        bgColor: "bg-yellow-55",
+        width: 60
+      },
+      {
+        level: "good",
+        label: "Good",
+        color: "text-green-54",
+        bgColor: "bg-green-54",
+        width: 80
+      },
+      {
+        level: "strong",
+        label: "Strong",
+        color: "text-green-45",
+        bgColor: "bg-green-45",
+        width: 100
+      }
+    ];
+    const strength = strengthMap[result.score];
+    const feedback = result.feedback.suggestions.join(" ") || result.feedback.warning || "";
+    const crackTime = result.crack_times_display.offline_slow_hashing_1e4_per_second;
+    return {
+      ...strength,
+      feedback,
+      crackTime
+    };
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], BackupModal.prototype, "open", 2);
+__decorateClass([
+  property({ type: String })
+], BackupModal.prototype, "theme", 2);
+__decorateClass([
+  state()
+], BackupModal.prototype, "currentStep", 2);
+__decorateClass([
+  state()
+], BackupModal.prototype, "useEncryption", 2);
+__decorateClass([
+  state()
+], BackupModal.prototype, "password", 2);
+__decorateClass([
+  state()
+], BackupModal.prototype, "passwordConfirm", 2);
+__decorateClass([
+  state()
+], BackupModal.prototype, "passwordErrors", 2);
+__decorateClass([
+  state()
+], BackupModal.prototype, "isCreatingBackup", 2);
+__decorateClass([
+  state()
+], BackupModal.prototype, "generatedBackup", 2);
+BackupModal = __decorateClass([
+  customElement("backup-modal")
+], BackupModal);
+
+export {
+  BackupModal
+};
+//# sourceMappingURL=chunk-NWCNJSG3.js.map

package/dist/chunk-NWCNJSG3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/backup-modal.ts"],"sourcesContent":["/**\n * Backup Modal - Lit Component\n *\n * Framework-agnostic backup modal for wallet data export.\n * Uses lukso-modal from @lukso/web-components for consistent UI.\n */\n\nimport type { BackupFile } from '@lukso/passkey-auth'\nimport { downloadBackup } from '@lukso/passkey-auth'\nimport { html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport zxcvbn from 'zxcvbn'\nimport { CoreLitElement } from './styles'\n\n// Import lukso web components\nimport '@lukso/web-components/dist/components/lukso-modal'\nimport '@lukso/web-components/dist/components/lukso-button'\nimport '@lukso/web-components/dist/components/lukso-input'\n\nenum Step {\n  CHOICE = 1,\n  PASSWORD = 2,\n  DOWNLOAD = 3,\n}\n\ninterface PasswordStrength {\n  level: string\n  label: string\n  color: string\n  bgColor: string\n  width: number\n  feedback: string\n  crackTime: string | number\n}\n\n@customElement('backup-modal')\nexport class BackupModal extends CoreLitElement {\n  // Public properties\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: String }) theme: 'light' | 'dark' | 'auto' = 'auto'\n\n  // Private state - wizard flow\n  @state() private currentStep: Step = Step.CHOICE\n  @state() private useEncryption = true\n  @state() private password = ''\n  @state() private passwordConfirm = ''\n  @state() private passwordErrors: string[] = []\n  @state() private isCreatingBackup = false\n  @state() private generatedBackup: BackupFile | null = null\n\n  /**\n   * Public method for parent to set backup result\n   * Called after parent handles the 'create' event\n   */\n  public setBackupResult(\n    backupFile: BackupFile | null,\n    options?: {\n      error?: string\n    }\n  ) {\n    this.isCreatingBackup = false\n\n    if (options?.error) {\n      this.passwordErrors = [options.error]\n      this.generatedBackup = null\n    } else if (backupFile) {\n      this.generatedBackup = backupFile\n      this.currentStep = Step.DOWNLOAD\n    }\n  }\n\n  render() {\n    return html`\n      <lukso-modal\n        ?is-open=${this.open}\n        size=\"medium\"\n        @on-backdrop-click=${this.close}\n      >\n        <div class=\"p-6\">\n          <!-- Header -->\n          <h2 class=\"m-0 mb-6 text-neutral-20 dark:text-white heading-inter-21-semi-bold\">\n            ${this.getStepTitle()}\n          </h2>\n\n          <!-- Step content -->\n          ${this.renderStep()}\n        </div>\n      </lukso-modal>\n    `\n  }\n\n  private renderStep() {\n    switch (this.currentStep) {\n      case Step.CHOICE:\n        return this.renderChoiceStep()\n      case Step.PASSWORD:\n        return this.renderPasswordStep()\n      case Step.DOWNLOAD:\n        return this.renderDownloadStep()\n      default:\n        return nothing\n    }\n  }\n\n  private renderChoiceStep() {\n    return html`\n      <div class=\"flex flex-col gap-3 mb-6\">\n        <!-- Encrypted option (recommended) -->\n        <div\n          class=\"border-2 border-neutral-90 dark:border-neutral-70 rounded-lg p-4 cursor-pointer transition-all hover:border-neutral-60 dark:hover:border-neutral-60\"\n          @click=${() => this.selectBackupType(true)}\n        >\n          <div class=\"flex items-center gap-3 mb-2\">\n            <span class=\"text-neutral-10 dark:text-white heading-inter-16-semi-bold flex-1\">\n              Encrypt backup file\n            </span>\n            <span class=\"text-xs text-neutral-50 dark:text-neutral-60 uppercase tracking-wide\">\n              Recommended\n            </span>\n          </div>\n          <p class=\"m-0 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular\">\n            Uses password-based encryption to protect the secrets in this file.\n          </p>\n        </div>\n\n        <!-- Unencrypted option -->\n        <div\n          class=\"border-2 border-neutral-90 dark:border-neutral-70 rounded-lg p-4 cursor-pointer transition-all hover:border-neutral-60 dark:hover:border-neutral-60\"\n          @click=${() => this.selectBackupType(false)}\n        >\n          <div class=\"flex items-center gap-3 mb-2\">\n            <span class=\"text-neutral-10 dark:text-white heading-inter-16-semi-bold flex-1\">\n              Plain text backup\n            </span>\n            <span class=\"text-xs text-neutral-50 dark:text-neutral-60 uppercase tracking-wide\">\n              For development only\n            </span>\n          </div>\n          <p class=\"m-0 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular\">\n            Secrets will be stored in plain text.\n          </p>\n        </div>\n      </div>\n\n      <div class=\"flex justify-between gap-3\">\n        <lukso-button variant=\"text\" @click=${this.close}>\n          Cancel\n        </lukso-button>\n      </div>\n    `\n  }\n\n  private renderPasswordStep() {\n    const passwordStrength = this.password\n      ? this.calculatePasswordStrength()\n      : null\n    const passwordsMatch =\n      this.password &&\n      this.passwordConfirm &&\n      this.password === this.passwordConfirm\n    const canProceed = this.password && this.passwordConfirm && passwordsMatch\n\n    return html`\n      <p class=\"mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular\">\n        Choose a strong password to encrypt your backup. You'll need this password to restore your wallet.\n      </p>\n\n      <div class=\"space-y-4\">\n        <lukso-input\n          type=\"password\"\n          label=\"Password\"\n          placeholder=\"Enter a strong password\"\n          .value=${this.password}\n          @on-input=${(e: CustomEvent) => (this.password = e.detail.value)}\n          is-full-width\n          autofocus\n        ></lukso-input>\n\n        ${this.passwordErrors.map(\n          (error) => html`\n          <div class=\"mt-1 text-red-55 paragraph-inter-13-regular\">${error}</div>\n        `\n        )}\n\n        ${\n          passwordStrength\n            ? html`\n          <div class=\"mt-3\">\n            <div class=\"flex items-center justify-between mb-1\">\n              <span class=\"paragraph-inter-13-regular text-neutral-40\">Password strength:</span>\n              <span class=\"paragraph-inter-13-semi-bold ${passwordStrength.color}\">${passwordStrength.label}</span>\n            </div>\n            <div class=\"h-1.5 bg-neutral-90 dark:bg-neutral-70 rounded-full overflow-hidden\">\n              <div\n                class=\"h-full ${passwordStrength.bgColor} transition-all duration-300\"\n                style=\"width: ${passwordStrength.width}%\"\n              ></div>\n            </div>\n            <p class=\"mt-1 mb-0 text-neutral-40 paragraph-inter-12-regular\">\n              Time to crack: ${passwordStrength.crackTime}\n            </p>\n            ${\n              passwordStrength.feedback\n                ? html`\n              <p class=\"mt-2 mb-0 text-neutral-40 paragraph-inter-12-regular\">${passwordStrength.feedback}</p>\n            `\n                : nothing\n            }\n          </div>\n        `\n            : nothing\n        }\n\n        <lukso-input\n          type=\"password\"\n          label=\"Confirm Password\"\n          placeholder=\"Re-enter your password\"\n          .value=${this.passwordConfirm}\n          @on-input=${(e: CustomEvent) => (this.passwordConfirm = e.detail.value)}\n          is-full-width\n        ></lukso-input>\n\n        ${\n          this.passwordConfirm\n            ? html`\n          <div class=\"flex items-center justify-between mt-2\">\n            <span class=\"paragraph-inter-13-regular text-neutral-40\">Passwords match:</span>\n            <span class=\"paragraph-inter-13-semi-bold ${passwordsMatch ? 'text-green-54' : 'text-red-55'}\">\n              ${passwordsMatch ? 'Yes' : 'No'}\n            </span>\n          </div>\n        `\n            : nothing\n        }\n      </div>\n\n      <div class=\"flex justify-between gap-3 mt-6\">\n        <div class=\"flex gap-3\">\n          <lukso-button variant=\"text\" @click=${this.close}>\n            Cancel\n          </lukso-button>\n          <lukso-button variant=\"secondary\" @click=${this.goBack}>\n            Back\n          </lukso-button>\n        </div>\n        <lukso-button\n          variant=\"primary\"\n          ?disabled=${!canProceed || this.isCreatingBackup}\n          ?is-loading=${this.isCreatingBackup}\n          @click=${this.createBackup}\n        >\n          Create Backup\n        </lukso-button>\n      </div>\n    `\n  }\n\n  private renderDownloadStep() {\n    return html`\n      <p class=\"mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular\">\n        Your backup has been created${this.useEncryption ? ' and encrypted' : ''}. Download it and keep it in a safe place.\n      </p>\n\n      ${\n        !this.useEncryption\n          ? html`\n        <p class=\"mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular\">\n          This unencrypted backup is intended for development purposes. Use it when creating dapps that need access to the profile for testing.\n        </p>\n      `\n          : nothing\n      }\n\n      <div class=\"flex justify-end gap-3\">\n        <lukso-button variant=\"primary\" @click=${this.handleDownload}>\n          Download Backup\n        </lukso-button>\n      </div>\n    `\n  }\n\n  private getStepTitle(): string {\n    switch (this.currentStep) {\n      case Step.CHOICE:\n        return 'Backup Wallet'\n      case Step.PASSWORD:\n        return 'Set Password'\n      case Step.DOWNLOAD:\n        return 'Download Backup'\n      default:\n        return 'Backup Wallet'\n    }\n  }\n\n  private selectBackupType(encrypted: boolean) {\n    this.useEncryption = encrypted\n    if (encrypted) {\n      this.currentStep = Step.PASSWORD\n    } else {\n      // Unencrypted backup - create immediately\n      this.createBackup()\n    }\n  }\n\n  private async createBackup() {\n    this.isCreatingBackup = true\n    this.passwordErrors = []\n\n    // Emit create event with password (if encrypted)\n    // Parent should handle backup creation\n    const createEvent = new CustomEvent('create', {\n      detail: {\n        password: this.useEncryption ? this.password : undefined,\n        encrypted: this.useEncryption,\n      },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    })\n\n    this.dispatchEvent(createEvent)\n\n    // If parent didn't prevent default, show error\n    if (!createEvent.defaultPrevented) {\n      this.passwordErrors = [\n        'No backup handler configured. Please handle the \"create\" event.',\n      ]\n      this.isCreatingBackup = false\n    }\n    // Otherwise, parent will call setBackupResult()\n  }\n\n  private handleDownload() {\n    if (this.generatedBackup) {\n      downloadBackup(this.generatedBackup)\n\n      // Dispatch download event\n      this.dispatchEvent(\n        new CustomEvent('download', {\n          detail: this.generatedBackup,\n          bubbles: true,\n          composed: true,\n        })\n      )\n\n      // Close modal after download\n      setTimeout(() => {\n        this.close()\n      }, 100)\n    }\n  }\n\n  private goBack() {\n    if (this.currentStep === Step.PASSWORD) {\n      this.currentStep = Step.CHOICE\n      this.password = ''\n      this.passwordConfirm = ''\n      this.passwordErrors = []\n    }\n  }\n\n  private close() {\n    this.open = false\n    this.dispatchEvent(\n      new CustomEvent('close', { bubbles: true, composed: true })\n    )\n\n    // Reset state after animation\n    setTimeout(() => {\n      this.currentStep = Step.CHOICE\n      this.useEncryption = true\n      this.password = ''\n      this.passwordConfirm = ''\n      this.passwordErrors = []\n      this.isCreatingBackup = false\n      this.generatedBackup = null\n    }, 300)\n  }\n\n  private calculatePasswordStrength(): PasswordStrength {\n    const result = zxcvbn(this.password)\n\n    const strengthMap = [\n      {\n        level: 'very-weak',\n        label: 'Very Weak',\n        color: 'text-red-55',\n        bgColor: 'bg-red-55',\n        width: 20,\n      },\n      {\n        level: 'weak',\n        label: 'Weak',\n        color: 'text-red-65',\n        bgColor: 'bg-red-65',\n        width: 40,\n      },\n      {\n        level: 'fair',\n        label: 'Fair',\n        color: 'text-yellow-55',\n        bgColor: 'bg-yellow-55',\n        width: 60,\n      },\n      {\n        level: 'good',\n        label: 'Good',\n        color: 'text-green-54',\n        bgColor: 'bg-green-54',\n        width: 80,\n      },\n      {\n        level: 'strong',\n        label: 'Strong',\n        color: 'text-green-45',\n        bgColor: 'bg-green-45',\n        width: 100,\n      },\n    ]\n\n    const strength = strengthMap[result.score]\n    const feedback =\n      result.feedback.suggestions.join(' ') || result.feedback.warning || ''\n    const crackTime =\n      result.crack_times_display.offline_slow_hashing_1e4_per_second\n\n    return {\n      ...strength,\n      feedback,\n      crackTime,\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'backup-modal': BackupModal\n  }\n}\n"],"mappings":"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","names":[]}