feat: improve migrate node UI (#269)

getAlby · Jul 13, 2024 · 4a4d8d9 · 4a4d8d9
1 parent 9de731d
commit 4a4d8d9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/frontend/src/components/layouts/SettingsLayout.tsx b/frontend/src/components/layouts/SettingsLayout.tsx
@@ -106,7 +106,7 @@ export default function SettingsLayout() {
               <MenuItem to="/settings/key-backup">Key Backup</MenuItem>
             )}
             {hasNodeBackup && (
-              <MenuItem to="/settings/node-backup">Node Backup</MenuItem>
+              <MenuItem to="/settings/node-backup">Migrate Node</MenuItem>
             )}
             <MenuItem to="/debug-tools">
               Debug Tools

diff --git a/frontend/src/screens/BackupNode.tsx b/frontend/src/screens/BackupNode.tsx
@@ -1,8 +1,11 @@
+import { InfoCircledIcon } from "@radix-ui/react-icons";
+import { AlertTriangleIcon } from "lucide-react";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import Container from "src/components/Container";
 import SettingsHeader from "src/components/SettingsHeader";
+import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
 import { Button } from "src/components/ui/button";
 import { Input } from "src/components/ui/input";
 import { Label } from "src/components/ui/label";
@@ -80,9 +83,27 @@ export function BackupNode() {
   return (
     <>
       <SettingsHeader
-        title="Backup Your Node"
-        description="Your Alby Hub will be stopped and you will receive a backup file you can import on another host or machine"
+        title="Migrate Your Node"
+        description="Your Alby Hub will be stopped and you will receive a backup file you can import on another host or machine."
       />
+      <Alert>
+        <AlertTriangleIcon className="h-4 w-4" />
+        <AlertTitle>Do not run your node on multiple devices</AlertTitle>
+        <AlertDescription>
+          Your node maintains channel state with your channel partners. After
+          you create this backup, do not restart Alby Hub on this device.
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <InfoCircledIcon className="h-4 w-4" />
+        <AlertTitle>What Happens Next</AlertTitle>
+        <AlertDescription>
+          You'll need to enter your unlock password to download and decrypt a
+          backup of your Alby Hub data. After your backup is downloaded, we'll
+          give you instructions on how to import the backup file on another host
+          or machine.
+        </AlertDescription>
+      </Alert>
       {showPasswordScreen ? (
         <Container>
           <h1 className="text-xl font-medium">Enter unlock password</h1>
@@ -114,9 +135,10 @@ export function BackupNode() {
             type="submit"
             disabled={loading}
             size="lg"
+            className="w-full"
             onClick={() => setShowPasswordScreen(true)}
           >
-            Create Backup
+            Create Backup To Migrate Node
           </Button>
         </div>
       )}