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,18 +19,27 @@ 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())}>
@@ -45,11 +55,26 @@ export default function GenerateNewAccount({
             {copied ? <Check /> : <Copy />}
           </Button>
         </div>
-      <Button onClick={handleLogin}>{t('Login')}</Button>
-      <Button variant="secondary" onClick={back}>
+      </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">
+        <Button className="w-fit px-8" variant="secondary" onClick={back}>
           {t('Back')}
         </Button>
-    </>
+        <Button className="flex-1" type="submit">
+          {t('Login')}
+        </Button>
+      </div>
+    </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}>
+      <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}>
+      <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>
   )
 }

src/i18n/locales/ar.ts

@@ -81,8 +81,8 @@ export default {
     Replies: 'الردود',
     Notifications: 'الإشعارات',
     'no more notifications': 'لا توجد إشعارات إضافية',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      'استخدام تسجيل الدخول بالمفتاح الخاص غير آمن. يُنصح باستخدام إضافة المتصفح مثل alby أو nostr-keyx أو 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.':
+      'استخدام تسجيل الدخول بالمفتاح الخاص غير آمن. يُوصى باستخدام إضافة متصفح لتسجيل الدخول، مثل alby أو nostr-keyx أو nos2x. إذا كان يجب عليك استخدام مفتاح خاص، يرجى تعيين كلمة مرور للتشفير على الأقل.',
     'Login with Browser Extension': 'تسجيل الدخول باستخدام إضافة المتصفح',
     'Login with Bunker': 'تسجيل الدخول باستخدام Bunker',
     'Login with Private Key': 'تسجيل الدخول باستخدام المفتاح الخاص',

src/i18n/locales/de.ts

@@ -82,8 +82,8 @@ export default {
     Replies: 'Antworten',
     Notifications: 'Benachr.',
     'no more notifications': 'keine weiteren Benachrichtigungen',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      'Die Anmeldung mit privatem Schlüssel ist unsicher. Es wird empfohlen, eine Browsererweiterung wie alby, nostr-keyx oder nos2x zu verwenden.',
+    '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.':
+      'Die Anmeldung mit privatem Schlüssel ist unsicher. Es wird empfohlen, eine Browser-Erweiterung wie alby, nostr-keyx oder nos2x zu verwenden. Wenn du einen privaten Schlüssel verwenden musst, solltest du mindestens ein Passwort zur Verschlüsselung festlegen.',
     'Login with Browser Extension': 'Mit Browser-Erweiterung anmelden',
     'Login with Bunker': 'Mit Bunker anmelden',
     'Login with Private Key': 'Mit privatem Schlüssel anmelden',

src/i18n/locales/en.ts

@@ -81,8 +81,8 @@ export default {
     Replies: 'Replies',
     Notifications: 'Notifications',
     'no more notifications': 'no more notifications',
-    '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.',
+    '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.':
+      '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.',
     'Login with Browser Extension': 'Login with Browser Extension',
     'Login with Bunker': 'Login with Bunker',
     'Login with Private Key': 'Login with Private Key',

src/i18n/locales/es.ts

@@ -82,8 +82,8 @@ export default {
     Replies: 'Respuestas',
     Notifications: 'Notificaciones',
     'no more notifications': 'no hay más notificaciones',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      'Iniciar sesión con clave privada no es seguro. Se recomienda usar una extensión del navegador para iniciar sesión, como alby, nostr-keyx o 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.':
+      'Usar el inicio de sesión con clave privada es inseguro. Se recomienda usar una extensión de navegador para iniciar sesión, como alby, nostr-keyx o nos2x. Si debes usar una clave privada, establece al menos una contraseña para cifrarla.',
     'Login with Browser Extension': 'Iniciar sesión con extensión de navegador',
     'Login with Bunker': 'Iniciar sesión con Bunker',
     'Login with Private Key': 'Iniciar sesión con clave privada',

src/i18n/locales/fr.ts

@@ -82,8 +82,8 @@ export default {
     Replies: 'Réponses',
     Notifications: 'Notifications',
     'no more notifications': 'plus de notifications',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      "La connexion par clé privée n'est pas sécurisée. Il est recommandé d'utiliser une extension de navigateur pour se connecter, comme alby, nostr-keyx ou 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.':
+      "L'utilisation de la connexion par clé privée n'est pas sécurisée. Il est recommandé d'utiliser une extension de navigateur pour la connexion, comme alby, nostr-keyx ou nos2x. Si vous devez utiliser une clé privée, veuillez au moins définir un mot de passe pour le chiffrement.",
     'Login with Browser Extension': 'Connexion avec une extension de navigateur',
     'Login with Bunker': 'Connexion avec Bunker',
     'Login with Private Key': 'Connexion avec clé privée',

src/i18n/locales/it.ts

@@ -81,8 +81,8 @@ export default {
     Replies: 'Repliche',
     Notifications: 'Notifiche',
     'no more notifications': 'niente più notifiche',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      'Usare la chiave privata per il login è insicuro. Si consiglia di utilizzare una estensione del browser per il login, come alby, nostr-keyx o 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.':
+      "L'accesso con chiave privata non è sicuro. Si consiglia di utilizzare un'estensione del browser per l'accesso, come alby, nostr-keyx o nos2x. Se devi utilizzare una chiave privata, imposta almeno una password per la crittografia.",
     'Login with Browser Extension': 'Accedi con una estensione del Browser',
     'Login with Bunker': 'Accedi con Bunker',
     'Login with Private Key': 'Accedi con la Chiave Privata',

src/i18n/locales/ja.ts

@@ -82,8 +82,8 @@ export default {
     Replies: '返信',
     Notifications: '通知',
     'no more notifications': 'これ以上通知はありません',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      '秘密鍵によるログインは安全ではありません。alby、nostr-keyx、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.':
+      '秘密鍵でのログインは安全ではありません。alby、nostr-keyx、nos2xなどのブラウザ拡張機能を使用してログインすることをお勧めします。秘密鍵を使用する場合は、少なくとも暗号化のためにパスワードを設定してください。',
     'Login with Browser Extension': 'ブラウザ拡張でログイン',
     'Login with Bunker': 'Bunkerでログイン',
     'Login with Private Key': '秘密鍵でログイン',

src/i18n/locales/pl.ts

@@ -81,8 +81,8 @@ export default {
     Replies: 'Komentarze',
     Notifications: 'Powiadomienia',
     'no more notifications': 'Koniec powiadomień',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      'Korzystanie z logowania za pomocą klucza prywatnego może nie być bezpieczne. Zaleca się używanie rozszerzenia przeglądarki do logowania, takiego jak Alby, Keys.Band lub 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.':
+      'Logowanie za pomocą prywatnego klucza jest niebezpieczne. Zaleca się korzystanie z rozszerzenia przeglądarki, takiego jak alby, nostr-keyx lub nos2x. Jeśli musisz użyć prywatnego klucza, ustaw co najmniej hasło do szyfrowania.',
     'Login with Browser Extension': 'Logowanie z rozszerzeniem przeglądarki',
     'Login with Bunker': 'Logowanie z bunkrem',
     'Login with Private Key': 'Logowanie z prywatnym kluczem (nsec)',

src/i18n/locales/pt-BR.ts

@@ -81,8 +81,8 @@ export default {
     Replies: 'Respostas',
     Notifications: 'Notificações',
     'no more notifications': 'não há mais notificações',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      'Usar login com chave privada é inseguro. Recomenda-se utilizar uma extensão do navegador, como alby, nostr-keyx ou 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.':
+      'O uso de login com chave privada é inseguro. Recomenda-se usar uma extensão do navegador para login, como alby, nostr-keyx ou nos2x. Se você precisar usar uma chave privada, defina uma senha para criptografia no mínimo.',
     'Login with Browser Extension': 'Entrar com extensão do navegador',
     'Login with Bunker': 'Entrar com Bunker',
     'Login with Private Key': 'Entrar com chave privada',

src/i18n/locales/pt-PT.ts

@@ -82,8 +82,8 @@ export default {
     Replies: 'Respostas',
     Notifications: 'Notificações',
     'no more notifications': 'não há mais notificações',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      'Usar login com chave privada é inseguro. Recomenda-se utilizar uma extensão do navegador, como alby, nostr-keyx ou 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.Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
+      'O uso de login com chave privada é inseguro. Recomenda-se usar uma extensão de navegador para login, como alby, nostr-keyx ou nos2x. Se você precisar usar uma chave privada, defina uma senha para criptografia pelo menos.',
     'Login with Browser Extension': 'Entrar com Extensão do Navegador',
     'Login with Bunker': 'Entrar com Bunker',
     'Login with Private Key': 'Entrar com Chave Privada',

src/i18n/locales/ru.ts

@@ -82,8 +82,8 @@ export default {
     Replies: 'Ответы',
     Notifications: 'Уведомления',
     'no more notifications': 'нет новых уведомлений',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      'Вход с использованием приватного ключа небезопасен. Рекомендуется использовать расширение браузера для входа, например alby, nostr-keyx или 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.':
+      'Использование входа с приватным ключом небезопасно. Рекомендуется использовать расширение браузера для входа, такое как alby, nostr-keyx или nos2x. Если вы всё же хотите использовать приватный ключ, установите хотя бы пароль для шифрования.',
     'Login with Browser Extension': 'Войти через расширение браузера',
     'Login with Bunker': 'Войти через Bunker',
     'Login with Private Key': 'Войти с приватным ключом',

src/i18n/locales/th.ts

@@ -81,8 +81,8 @@ export default {
     Replies: 'การตอบกลับ',
     Notifications: 'การแจ้งเตือน',
     'no more notifications': 'ไม่มีการแจ้งเตือนเพิ่มเติม',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      'การเข้าสู่ระบบด้วยคีย์ส่วนตัวไม่ปลอดภัย แนะนำให้ใช้ส่วนขยายเบราว์เซอร์ เช่น alby, nostr-keyx หรือ 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.':
+      'การเข้าสู่ระบบด้วยคีย์ส่วนตัวไม่ปลอดภัย แนะนำให้ใช้ส่วนขยายเบราว์เซอร์สำหรับการเข้าสู่ระบบ เช่น alby, nostr-keyx หรือ nos2x หากคุณต้องใช้คีย์ส่วนตัว โปรดตั้งรหัสผ่านเพื่อเข้ารหัสอย่างน้อย',
     'Login with Browser Extension': 'เข้าสู่ระบบด้วยส่วนขยายเบราว์เซอร์',
     'Login with Bunker': 'เข้าสู่ระบบด้วย Bunker',
     'Login with Private Key': 'เข้าสู่ระบบด้วยคีย์ส่วนตัว',

src/i18n/locales/zh.ts

@@ -80,8 +80,8 @@ export default {
     Replies: '回复',
     Notifications: '通知',
     'no more notifications': '到底了',
-    'Using private key login is insecure. It is recommended to use a browser extension for login, such as alby, nostr-keyx or nos2x.':
-      '使用私钥登录是不安全的。建议使用浏览器插件进行登录，例如 alby、nostr-keyx 或 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.':
+      '使用私钥登录不安全。建议使用浏览器插件登录，如 alby、nostr-keyx 或 nos2x。如果必须使用私钥，请至少设置一个密码进行加密。',
     'Login with Browser Extension': '浏览器插件登录',
     'Login with Bunker': 'Bunker 登录',
     'Login with Private Key': '私钥登录',