AutoUnlock.tsx raw

   1  import { AlertTriangleIcon } from "lucide-react";
   2  import React from "react";
   3  
   4  import { toast } from "sonner";
   5  import Loading from "src/components/Loading";
   6  import PasswordInput from "src/components/password/PasswordInput";
   7  import SettingsHeader from "src/components/SettingsHeader";
   8  import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
   9  import { LoadingButton } from "src/components/ui/custom/loading-button";
  10  import { Label } from "src/components/ui/label";
  11  
  12  import { useInfo } from "src/hooks/useInfo";
  13  import { request } from "src/utils/request";
  14  
  15  export function AutoUnlock() {
  16    const { data: info, mutate: refetchInfo } = useInfo();
  17  
  18    const [unlockPassword, setUnlockPassword] = React.useState("");
  19    const [loading, setLoading] = React.useState(false);
  20  
  21    const onSubmit = async (e: React.FormEvent) => {
  22      e.preventDefault();
  23  
  24      try {
  25        setLoading(true);
  26        await request("/api/auto-unlock", {
  27          method: "PATCH",
  28          headers: {
  29            "Content-Type": "application/json",
  30          },
  31          body: JSON.stringify({
  32            unlockPassword,
  33          }),
  34        });
  35        await refetchInfo();
  36        setUnlockPassword("");
  37        toast(
  38          `Successfully ${unlockPassword ? "enabled" : "disabled"} auto-unlock`
  39        );
  40      } catch (error) {
  41        toast("Auto Unlock change failed", {
  42          description: (error as Error).message,
  43        });
  44      } finally {
  45        setLoading(false);
  46      }
  47    };
  48  
  49    if (!info) {
  50      return <Loading />;
  51    }
  52    if (!info.autoUnlockPasswordSupported) {
  53      return <p>Your Hub does not support this feature.</p>;
  54    }
  55  
  56    return (
  57      <>
  58        <SettingsHeader
  59          pageTitle="Auto Unlock"
  60          title="Auto Unlock"
  61          description="Configure Alby Hub will automatically unlock on start (e.g. after machine reboot)"
  62        />
  63        <div>
  64          <p className="text-muted-foreground">
  65            In some situations it can be impractical to manually unlock the wallet
  66            every time Alby Hub is started. In those cases you can save the unlock
  67            password in plaintext so that Alby Hub can auto-unlock itself.
  68          </p>
  69          <Alert className="mt-3">
  70            <AlertTriangleIcon />
  71            <AlertTitle>Attention</AlertTitle>
  72            <AlertDescription>
  73              Everyone who has access to the machine running this hub could read
  74              that password and take your funds. Use this only in a secure
  75              environment.
  76            </AlertDescription>
  77          </Alert>
  78          {!info.autoUnlockPasswordEnabled && (
  79            <>
  80              <form
  81                onSubmit={onSubmit}
  82                className="w-full md:w-96 flex flex-col gap-4 mt-4"
  83              >
  84                <div className="grid gap-2">
  85                  <Label htmlFor="unlock-password">Unlock Password</Label>
  86                  <PasswordInput
  87                    id="unlock-password"
  88                    autoFocus
  89                    onChange={setUnlockPassword}
  90                    value={unlockPassword}
  91                  />
  92                </div>
  93                <div>
  94                  <LoadingButton loading={loading}>
  95                    Enable Auto Unlock
  96                  </LoadingButton>
  97                </div>
  98              </form>
  99            </>
 100          )}
 101          {info.autoUnlockPasswordEnabled && (
 102            <>
 103              <form
 104                onSubmit={onSubmit}
 105                className="w-full md:w-96 flex flex-col gap-4 mt-4"
 106              >
 107                <div>
 108                  <LoadingButton loading={loading}>
 109                    Disable Auto Unlock
 110                  </LoadingButton>
 111                </div>
 112              </form>
 113            </>
 114          )}
 115        </div>
 116      </>
 117    );
 118  }
 119