SetupPassword.tsx raw

   1  import React, { useState } from "react";
   2  import { useNavigate, useSearchParams } from "react-router";
   3  import useSetupStore from "src/state/SetupStore";
   4  
   5  import { toast } from "sonner";
   6  import PasswordInput from "src/components/password/PasswordInput";
   7  import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
   8  import { Button } from "src/components/ui/button";
   9  import { Checkbox } from "src/components/ui/checkbox";
  10  import { Label } from "src/components/ui/label";
  11  import { useInfo } from "src/hooks/useInfo";
  12  
  13  export function SetupPassword() {
  14    const navigate = useNavigate();
  15    const store = useSetupStore();
  16    const { data: info } = useInfo();
  17    const [confirmPassword, setConfirmPassword] = React.useState("");
  18    const [isPasswordSecured, setIsPasswordSecured] = useState<boolean>(false);
  19    const [isPasswordSecured2, setIsPasswordSecured2] = useState<boolean>(false);
  20  
  21    const [searchParams] = useSearchParams();
  22    const wallet = searchParams.get("wallet") || "new";
  23    const node = searchParams.get("node") || "";
  24  
  25    function onSubmit(e: React.FormEvent) {
  26      e.preventDefault();
  27      if (!info) {
  28        return;
  29      }
  30      if (!isPasswordSecured || !isPasswordSecured2) {
  31        toast.error("Please confirm you have saved your password");
  32        return;
  33      }
  34      if (store.unlockPassword !== confirmPassword) {
  35        toast.error("Passwords don't match");
  36        return;
  37      }
  38  
  39      if (wallet === "import") {
  40        useSetupStore.getState().updateNodeInfo({
  41          backendType: "LDK",
  42        });
  43        navigate(`/setup/import-mnemonic`);
  44      } else if (node) {
  45        navigate(`/setup/node/${node}`);
  46      } else {
  47        navigate(`/setup/node`);
  48      }
  49    }
  50  
  51    return (
  52      <div className="grid max-w-sm">
  53        <form onSubmit={onSubmit} className="flex flex-col items-center w-full">
  54          <div className="grid gap-4">
  55            <TwoColumnLayoutHeader
  56              title="Create Password"
  57              pageTitle="Create Password"
  58              description="Your password is used to access your wallet, and it can't be reset or recovered if you lose it."
  59            />
  60            <div className="grid gap-4 w-full">
  61              <div className="grid gap-1.5">
  62                <Label htmlFor="unlock-password">Password</Label>
  63                <PasswordInput
  64                  id="unlock-password"
  65                  onChange={store.setUnlockPassword}
  66                  autoComplete="new-password"
  67                  placeholder="Enter a password"
  68                  autoFocus
  69                  value={store.unlockPassword}
  70                />
  71              </div>
  72              <div className="grid gap-1.5">
  73                <Label htmlFor="confirm-password">Repeat Password</Label>
  74                <PasswordInput
  75                  id="confirm-password"
  76                  autoComplete="new-password"
  77                  placeholder="Re-enter the password"
  78                  onChange={setConfirmPassword}
  79                  value={confirmPassword}
  80                />
  81              </div>
  82            </div>
  83            <div className="grid gap-6">
  84              <div className="flex items-center">
  85                <Checkbox
  86                  id="securePassword"
  87                  required
  88                  onCheckedChange={() => setIsPasswordSecured(!isPasswordSecured)}
  89                />
  90                <Label
  91                  htmlFor="securePassword"
  92                  className="ml-2 leading-4 cursor-pointer"
  93                >
  94                  I've secured this password in a safe place
  95                </Label>
  96              </div>
  97              {isPasswordSecured && (
  98                <div className="flex items-center">
  99                  <Checkbox
 100                    id="securePassword2"
 101                    required
 102                    onCheckedChange={() =>
 103                      setIsPasswordSecured2(!isPasswordSecured2)
 104                    }
 105                  />
 106                  <Label
 107                    htmlFor="securePassword2"
 108                    className="ml-2 leading-4 cursor-pointer"
 109                  >
 110                    I understand this password cannot be recovered
 111                  </Label>
 112                </div>
 113              )}
 114              <Button type="submit">Create Password</Button>
 115            </div>
 116          </div>
 117        </form>
 118      </div>
 119    );
 120  }
 121