BigBlocks

Cloud Backup Prompt

Dialog prompting users to set up encrypted cloud backup with password strength validation and confirmation

Click to open the cloud backup setup dialog

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { CloudBackupPrompt } from "@/registry/bigblocks/blocks/cloud-backup-prompt"

export function CloudBackupPromptDemo() {
  const [open, setOpen] = useState(false)

  async function handleSave(password: string): Promise<void> {
    // In a real application, you would:
    //
    // 1. Get the backup data from localStorage
    //    const backup = localStorage.getItem("encrypted-backup")
    //
    // 2. Re-encrypt with the user-chosen password
    //    const encrypted = await encryptBackup(backup, password)
    //
    // 3. Upload to your cloud backup API
    //    await fetch("/api/backup", {
    //      method: "POST",
    //      body: JSON.stringify({ data: encrypted }),
    //    })

    // Demo: simulate a 2-second save
    await new Promise((resolve) => setTimeout(resolve, 2000))

    // Uncomment to test error state:
    // throw new Error("Network error: could not reach backup server")

    console.log("Backup saved with password of length:", password.length)
  }

  return (
    <div className="flex flex-col items-center gap-4">
      <Button onClick={() => setOpen(true)}>
        Open Backup Prompt
      </Button>
      <p className="text-sm text-muted-foreground">
        Click to open the cloud backup setup dialog
      </p>

      <CloudBackupPrompt
        open={open}
        onOpenChange={setOpen}
        onSave={handleSave}
        onRemindLater={() => console.log("User chose remind later")}
        onSuccess={() => console.log("Backup enabled successfully")}
        onError={(error) => console.error("Backup error:", error)}
      />
    </div>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/cloud-backup-prompt.json

Usage

The block is agnostic about how encryption and upload are performed. You provide an onSave callback that receives the chosen password and handles the rest.

import { useState } from "react"
import { CloudBackupPrompt } from "@/components/blocks/cloud-backup-prompt"
 
export default function App() {
  const [open, setOpen] = useState(true)
 
  return (
    <CloudBackupPrompt
      open={open}
      onOpenChange={setOpen}
      onSave={async (password) => {
        const backup = localStorage.getItem("encrypted-backup")
        if (!backup) throw new Error("No backup found")
        await uploadBackup(backup, password)
      }}
      onRemindLater={() => console.log("Remind later")}
      onSuccess={() => console.log("Backup saved")}
    />
  )
}

Features

Password strength meter with visual feedback (Weak, Fair, Good, Strong)
Confirm password field with mismatch validation
End-to-end encryption explainer with feature icons
Success state confirming backup is enabled
"Remind Me Later" option for deferred setup
Auto-focus on password field when dialog opens

Props

CloudBackupPrompt

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the dialog is open (required)
`onOpenChange`	`(open: boolean) => void`	—	Called when the dialog open state changes (required)
`onSave`	`(password: string) => Promise<void>`	—	Callback that performs the encryption and upload (required)
`onRemindLater`	`() => void`	—	Called when "Remind Me Later" is clicked
`onSuccess`	`() => void`	—	Called on successful save
`onError`	`(error: Error) => void`	—	Called on error
`minPasswordLength`	`number`	`8`	Minimum password length
`className`	`string`	—	Optional CSS class for the dialog content

Hook

useCloudBackup can be used independently for a custom backup UI.

import { useCloudBackup } from "@/components/blocks/cloud-backup-prompt"
 
function CustomBackupForm() {
  const hook = useCloudBackup({
    onSave: async (password) => {
      await encryptAndUpload(password)
    },
    minPasswordLength: 10,
  })
 
  return (
    <form onSubmit={(e) => { e.preventDefault(); hook.save() }}>
      <input
        type="password"
        value={hook.password}
        onChange={(e) => hook.setPassword(e.target.value)}
      />
      <input
        type="password"
        value={hook.confirmPassword}
        onChange={(e) => hook.setConfirmPassword(e.target.value)}
      />
      <p>Strength: {hook.validation.strengthLabel}</p>
      <button disabled={!hook.validation.isValid || hook.status === "saving"}>
        {hook.status === "saving" ? "Saving..." : "Save Backup"}
      </button>
    </form>
  )
}

Buy Listing Connect Wallet