@lukso/up-connector 0.4.0-dev.a8c9315

package/src/backup-modal.ts

@@ -0,0 +1,439 @@
+/**
+ * Backup Modal - Lit Component
+ *
+ * Framework-agnostic backup modal for wallet data export.
+ * Uses lukso-modal from @lukso/web-components for consistent UI.
+ */
+
+import type { BackupFile } from '@lukso/passkey-auth'
+import { downloadBackup } from '@lukso/passkey-auth'
+import { html, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import zxcvbn from 'zxcvbn'
+import { CoreLitElement } from './styles'
+
+// Import lukso web components
+import '@lukso/web-components/dist/components/lukso-modal'
+import '@lukso/web-components/dist/components/lukso-button'
+import '@lukso/web-components/dist/components/lukso-input'
+
+enum Step {
+  CHOICE = 1,
+  PASSWORD = 2,
+  DOWNLOAD = 3,
+}
+
+interface PasswordStrength {
+  level: string
+  label: string
+  color: string
+  bgColor: string
+  width: number
+  feedback: string
+  crackTime: string | number
+}
+
+@customElement('backup-modal')
+export class BackupModal extends CoreLitElement {
+  // Public properties
+  @property({ type: Boolean, reflect: true }) open = false
+  @property({ type: String }) theme: 'light' | 'dark' | 'auto' = 'auto'
+
+  // Private state - wizard flow
+  @state() private currentStep: Step = Step.CHOICE
+  @state() private useEncryption = true
+  @state() private password = ''
+  @state() private passwordConfirm = ''
+  @state() private passwordErrors: string[] = []
+  @state() private isCreatingBackup = false
+  @state() private generatedBackup: BackupFile | null = null
+
+  /**
+   * Public method for parent to set backup result
+   * Called after parent handles the 'create' event
+   */
+  public setBackupResult(
+    backupFile: BackupFile | null,
+    options?: {
+      error?: string
+    }
+  ) {
+    this.isCreatingBackup = false
+
+    if (options?.error) {
+      this.passwordErrors = [options.error]
+      this.generatedBackup = null
+    } else if (backupFile) {
+      this.generatedBackup = backupFile
+      this.currentStep = Step.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>
+    `
+  }
+
+  private renderStep() {
+    switch (this.currentStep) {
+      case Step.CHOICE:
+        return this.renderChoiceStep()
+      case Step.PASSWORD:
+        return this.renderPasswordStep()
+      case Step.DOWNLOAD:
+        return this.renderDownloadStep()
+      default:
+        return nothing
+    }
+  }
+
+  private 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>
+    `
+  }
+
+  private 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: CustomEvent) => (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: CustomEvent) => (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>
+    `
+  }
+
+  private 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>
+    `
+  }
+
+  private getStepTitle(): string {
+    switch (this.currentStep) {
+      case Step.CHOICE:
+        return 'Backup Wallet'
+      case Step.PASSWORD:
+        return 'Set Password'
+      case Step.DOWNLOAD:
+        return 'Download Backup'
+      default:
+        return 'Backup Wallet'
+    }
+  }
+
+  private selectBackupType(encrypted: boolean) {
+    this.useEncryption = encrypted
+    if (encrypted) {
+      this.currentStep = Step.PASSWORD
+    } else {
+      // Unencrypted backup - create immediately
+      this.createBackup()
+    }
+  }
+
+  private async createBackup() {
+    this.isCreatingBackup = true
+    this.passwordErrors = []
+
+    // Emit create event with password (if encrypted)
+    // Parent should handle backup creation
+    const createEvent = new CustomEvent('create', {
+      detail: {
+        password: this.useEncryption ? this.password : undefined,
+        encrypted: this.useEncryption,
+      },
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    })
+
+    this.dispatchEvent(createEvent)
+
+    // If parent didn't prevent default, show error
+    if (!createEvent.defaultPrevented) {
+      this.passwordErrors = [
+        'No backup handler configured. Please handle the "create" event.',
+      ]
+      this.isCreatingBackup = false
+    }
+    // Otherwise, parent will call setBackupResult()
+  }
+
+  private handleDownload() {
+    if (this.generatedBackup) {
+      downloadBackup(this.generatedBackup)
+
+      // Dispatch download event
+      this.dispatchEvent(
+        new CustomEvent('download', {
+          detail: this.generatedBackup,
+          bubbles: true,
+          composed: true,
+        })
+      )
+
+      // Close modal after download
+      setTimeout(() => {
+        this.close()
+      }, 100)
+    }
+  }
+
+  private goBack() {
+    if (this.currentStep === Step.PASSWORD) {
+      this.currentStep = Step.CHOICE
+      this.password = ''
+      this.passwordConfirm = ''
+      this.passwordErrors = []
+    }
+  }
+
+  private close() {
+    this.open = false
+    this.dispatchEvent(
+      new CustomEvent('close', { bubbles: true, composed: true })
+    )
+
+    // Reset state after animation
+    setTimeout(() => {
+      this.currentStep = Step.CHOICE
+      this.useEncryption = true
+      this.password = ''
+      this.passwordConfirm = ''
+      this.passwordErrors = []
+      this.isCreatingBackup = false
+      this.generatedBackup = null
+    }, 300)
+  }
+
+  private calculatePasswordStrength(): PasswordStrength {
+    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,
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'backup-modal': BackupModal
+  }
+}