better passphrase auth

components/Modals/Login.tsx

@@ -18,6 +18,7 @@ export default function LoginModal() {
   const { loginWithPubkey, currentUser } = useCurrentUser();
   const [isLoading, setIsLoading] = useState(false);
   const [showExtensionLogin, setShowExtensionLogin] = useState(true);
+  const [showPassphraseLogin, setShowPassphraseLogin] = useState(false);
   const [nsec, setNsec] = useState("");
   const [passphrase, setPassphrase] = useState("");
   const [encryptedNsec, setEncryptedNsec] = useState("");
@@ -61,6 +62,7 @@ export default function LoginModal() {
     };
     if (encryptedNsec_) {
       setEncryptedNsec(encryptedNsec_);
+      setShowPassphraseLogin(true);
     } else if (shouldReconnect === "true") {
       getConnected(shouldReconnect);
     }
@@ -91,7 +93,7 @@ export default function LoginModal() {
     modal?.hide();
   }
   async function handleLoginPassphrase() {
-    if (!encryptedNsec || passphrase) return;
+    if (!encryptedNsec || !passphrase) return;
     setIsLoading(true);
 
     const decryptedNsec = decryptMessage(encryptedNsec, passphrase);
@@ -136,13 +138,14 @@ export default function LoginModal() {
             Connect with extension
           </Button>
         )}
-        {!!encryptedNsec && (
+        {showPassphraseLogin ? (
           <div className="space-y-3">
             <Label>Passphrase</Label>
             <Input
-              value={nsec}
+              value={passphrase}
               onChange={(e) => setPassphrase(e.target.value)}
               placeholder="passphrase..."
+              type="password"
               className="text-[16px]"
             />
             <Button
@@ -153,8 +156,18 @@ export default function LoginModal() {
             >
               Login with Passphrase
             </Button>
+            <div className="center">
+              <Button
+                variant={"link"}
+                size={"sm"}
+                className="h-0 pt-1"
+                onClick={() => setShowPassphraseLogin(false)}
+              >
+                Or, use Nsec
+              </Button>
             </div>
-        )}
+          </div>
+        ) : (
           <div className="space-y-3">
             <Label>Nsec</Label>
             <Input
@@ -171,7 +184,20 @@ export default function LoginModal() {
             >
               Connect with Nsec
             </Button>
+            {!!encryptedNsec && (
+              <div className="center">
+                <Button
+                  variant={"link"}
+                  size={"sm"}
+                  className="h-0 pt-1"
+                  onClick={() => setShowPassphraseLogin(true)}
+                >
+                  Or, use Passphrase
+                </Button>
               </div>
+            )}
+          </div>
+        )}
       </div>
     </Template>
   );