feat: improve private key login

src/components/AccountManager/GenerateNewAccount.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import { useNostr } from '@/providers/NostrProvider'
 import { Check, Copy, RefreshCcw } from 'lucide-react'
 import { generateSecretKey } from 'nostr-tools'
@@ -18,38 +19,62 @@ export default function GenerateNewAccount({
   const { nsecLogin } = useNostr()
   const [nsec, setNsec] = useState(generateNsec())
   const [copied, setCopied] = useState(false)
+  const [password, setPassword] = useState('')
 
   const handleLogin = () => {
-    nsecLogin(nsec).then(() => onLoginSuccess())
+    nsecLogin(nsec, password).then(() => onLoginSuccess())
   }
 
   return (
-    <>
+    <form
+      className="space-y-4"
+      onSubmit={(e) => {
+        e.preventDefault()
+        handleLogin()
+      }}
+    >
       <div className="text-orange-400">
         {t(
           'This is a private key. Do not share it with anyone. Keep it safe and secure. You will not be able to recover it if you lose it.'
         )}
       </div>
+      <div className="space-y-1">
+        <Label>nsec</Label>
+        <div className="flex gap-2">
+          <Input value={nsec} />
+          <Button variant="secondary" onClick={() => setNsec(generateNsec())}>
+            <RefreshCcw />
+          </Button>
+          <Button
+            onClick={() => {
+              navigator.clipboard.writeText(nsec)
+              setCopied(true)
+              setTimeout(() => setCopied(false), 2000)
+            }}
+          >
+            {copied ? <Check /> : <Copy />}
+          </Button>
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor="password-input">{t('password')}</Label>
+        <Input
+          id="password-input"
+          type="password"
+          placeholder={t('optional: encrypt nsec')}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </div>
       <div className="flex gap-2">
-        <Input value={nsec} />
-        <Button variant="secondary" onClick={() => setNsec(generateNsec())}>
-          <RefreshCcw />
+        <Button className="w-fit px-8" variant="secondary" onClick={back}>
+          {t('Back')}
         </Button>
-        <Button
-          onClick={() => {
-            navigator.clipboard.writeText(nsec)
-            setCopied(true)
-            setTimeout(() => setCopied(false), 2000)
-          }}
-        >
-          {copied ? <Check /> : <Copy />}
+        <Button className="flex-1" type="submit">
+          {t('Login')}
         </Button>
       </div>
-      <Button onClick={handleLogin}>{t('Login')}</Button>
-      <Button variant="secondary" onClick={back}>
-        {t('Back')}
-      </Button>
-    </>
+    </form>
   )
 }
 

src/components/AccountManager/PrivateKeyLogin.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useNostr } from '@/providers/NostrProvider'
 import { useState } from 'react'
@@ -51,39 +52,49 @@ function NsecLogin({ back, onLoginSuccess }: { back: () => void; onLoginSuccess:
   }
 
   return (
-    <div className="space-y-4">
+    <form
+      className="space-y-4"
+      onSubmit={(e) => {
+        e.preventDefault()
+        handleLogin()
+      }}
+    >
       <div className="text-orange-400">
         {t(
-          'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.'
+          'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x. If you must use a private key, please set a password for encryption at minimum.'
         )}
       </div>
       <div className="space-y-1">
-        <div className="text-muted-foreground text-sm font-semibold">nsec or hex</div>
+        <Label htmlFor="nsec-input">nsec or hex</Label>
         <Input
+          id="nsec-input"
           type="password"
           placeholder="nsec1.. or hex"
           value={nsecOrHex}
           onChange={handleInputChange}
           className={errMsg ? 'border-destructive' : ''}
         />
-        {errMsg && <div className="text-xs text-destructive pl-3">{errMsg}</div>}
+        {errMsg && <div className="text-xs text-destructive">{errMsg}</div>}
       </div>
       <div className="space-y-1">
-        <div className="text-muted-foreground text-sm font-semibold">{t('password')}</div>
+        <Label htmlFor="password-input">{t('password')}</Label>
         <Input
+          id="password-input"
           type="password"
           placeholder={t('optional: encrypt nsec')}
           value={password}
           onChange={(e) => setPassword(e.target.value)}
         />
       </div>
-      <Button className="w-full" onClick={handleLogin}>
-        {t('Login')}
-      </Button>
-      <Button className="w-full" variant="secondary" onClick={back}>
-        {t('Back')}
-      </Button>
-    </div>
+      <div className="flex gap-2">
+        <Button className="w-fit px-8" variant="secondary" onClick={back}>
+          {t('Back')}
+        </Button>
+        <Button className="flex-1" type="submit">
+          {t('Login')}
+        </Button>
+      </div>
+    </form>
   )
 }
 
@@ -115,28 +126,33 @@ function NcryptsecLogin({
   }
 
   return (
-    <div className="space-y-4">
-      <div className="text-orange-400">
-        {t(
-          'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.'
-        )}
-      </div>
+    <form
+      className="space-y-4"
+      onSubmit={(e) => {
+        e.preventDefault()
+        handleLogin()
+      }}
+    >
       <div className="space-y-1">
+        <Label htmlFor="ncryptsec-input">ncryptsec</Label>
         <Input
+          id="ncryptsec-input"
           type="password"
           placeholder="ncryptsec1.."
           value={ncryptsec}
           onChange={handleInputChange}
           className={errMsg ? 'border-destructive' : ''}
         />
-        {errMsg && <div className="text-xs text-destructive pl-3">{errMsg}</div>}
+        {errMsg && <div className="text-xs text-destructive">{errMsg}</div>}
       </div>
-      <Button className="w-full" onClick={handleLogin}>
-        {t('Login')}
-      </Button>
-      <Button className="w-full" variant="secondary" onClick={back}>
-        {t('Back')}
-      </Button>
-    </div>
+      <div className="flex gap-2">
+        <Button className="w-fit px-8" variant="secondary" onClick={back}>
+          {t('Back')}
+        </Button>
+        <Button className="flex-1" type="submit">
+          {t('Login')}
+        </Button>
+      </div>
+    </form>
   )
 }