feat: simplify account creation flow

src/components/AccountManager/GenerateNewAccount.tsx

@@ -1,85 +0,0 @@
-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'
-import { nsecEncode } from 'nostr-tools/nip19'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-export default function GenerateNewAccount({
-  back,
-  onLoginSuccess
-}: {
-  back: () => void
-  onLoginSuccess: () => void
-}) {
-  const { t } = useTranslation()
-  const { nsecLogin } = useNostr()
-  const [nsec, setNsec] = useState(generateNsec())
-  const [copied, setCopied] = useState(false)
-  const [password, setPassword] = useState('')
-
-  const handleLogin = () => {
-    nsecLogin(nsec, password, true).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="grid gap-2">
-        <Label>nsec</Label>
-        <div className="flex gap-2">
-          <Input value={nsec} />
-          <Button type="button" variant="secondary" onClick={() => setNsec(generateNsec())}>
-            <RefreshCcw />
-          </Button>
-          <Button
-            type="button"
-            onClick={() => {
-              navigator.clipboard.writeText(nsec)
-              setCopied(true)
-              setTimeout(() => setCopied(false), 2000)
-            }}
-          >
-            {copied ? <Check /> : <Copy />}
-          </Button>
-        </div>
-      </div>
-      <div className="grid gap-2">
-        <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" type="button" onClick={back}>
-          {t('Back')}
-        </Button>
-        <Button className="flex-1" type="submit">
-          {t('Login')}
-        </Button>
-      </div>
-    </form>
-  )
-}
-
-function generateNsec() {
-  const sk = generateSecretKey()
-  return nsecEncode(sk)
-}

src/components/AccountManager/Signup.tsx

@@ -0,0 +1,227 @@
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { useNostr } from '@/providers/NostrProvider'
+import { Check, Copy, Download, RefreshCcw } from 'lucide-react'
+import { generateSecretKey } from 'nostr-tools'
+import { nsecEncode } from 'nostr-tools/nip19'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import InfoCard from '../InfoCard'
+
+type Step = 'generate' | 'password'
+
+export default function Signup({
+  back,
+  onSignupSuccess
+}: {
+  back: () => void
+  onSignupSuccess: () => void
+}) {
+  const { t } = useTranslation()
+  const { nsecLogin } = useNostr()
+  const [step, setStep] = useState<Step>('generate')
+  const [nsec, setNsec] = useState(generateNsec())
+  const [checkedSaveKey, setCheckedSaveKey] = useState(false)
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [copied, setCopied] = useState(false)
+
+  const handleDownload = () => {
+    const blob = new Blob([nsec], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'nostr-private-key.txt'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  const handleSignup = async () => {
+    await nsecLogin(nsec, password || undefined, true)
+    onSignupSuccess()
+  }
+
+  const passwordsMatch = password === confirmPassword
+  const canSubmit = !password || passwordsMatch
+
+  const renderStepIndicator = () => (
+    <div className="flex items-center justify-center gap-2">
+      {(['generate', 'password'] as Step[]).map((s, index) => (
+        <div key={s} className="flex items-center">
+          <div
+            className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${
+              step === s
+                ? 'bg-primary text-primary-foreground'
+                : step === 'password' && s === 'generate'
+                  ? 'bg-primary/20 text-primary'
+                  : 'bg-muted text-muted-foreground'
+            }`}
+          >
+            {index + 1}
+          </div>
+          {index < 1 && <div className="w-12 h-0.5 bg-muted mx-1" />}
+        </div>
+      ))}
+    </div>
+  )
+
+  if (step === 'generate') {
+    return (
+      <div className="space-y-6">
+        {renderStepIndicator()}
+
+        <div className="text-center">
+          <h3 className="text-lg font-semibold mb-2">{t('Create Your Nostr Account')}</h3>
+          <p className="text-sm text-muted-foreground">
+            {t('Generate your unique private key. This is your digital identity.')}
+          </p>
+        </div>
+
+        <InfoCard
+          variant="alert"
+          title={t('Critical: Save Your Private Key')}
+          content={t(
+            'Your private key IS your account. There is no password recovery. If you lose it, you lose your account forever. Please save it in a secure location.'
+          )}
+        />
+
+        <div className="space-y-1">
+          <Label>{t('Your Private Key')}</Label>
+          <div className="flex gap-2">
+            <Input
+              value={nsec}
+              readOnly
+              className="font-mono text-sm"
+              onClick={(e) => e.currentTarget.select()}
+            />
+            <Button
+              type="button"
+              variant="secondary"
+              size="icon"
+              onClick={() => setNsec(generateNsec())}
+              title={t('Generate new key')}
+            >
+              <RefreshCcw />
+            </Button>
+          </div>
+        </div>
+
+        <div className="w-full flex gap-2 items-center">
+          <Button onClick={handleDownload} className="w-full">
+            <Download />
+            {t('Download Backup File')}
+          </Button>
+          <Button
+            onClick={() => {
+              navigator.clipboard.writeText(nsec)
+              setCopied(true)
+              setTimeout(() => setCopied(false), 2000)
+            }}
+            variant="secondary"
+            className="w-full"
+          >
+            {copied ? <Check /> : <Copy />}
+            {copied ? t('Copied to Clipboard') : t('Copy to Clipboard')}
+          </Button>
+        </div>
+
+        <div className="flex items-center gap-2 ml-2">
+          <Checkbox
+            id="acknowledge-checkbox"
+            checked={checkedSaveKey}
+            onCheckedChange={(c) => setCheckedSaveKey(!!c)}
+          />
+          <Label htmlFor="acknowledge-checkbox" className="cursor-pointer">
+            {t('I have safely backed up my private key')}
+          </Label>
+        </div>
+
+        <div className="flex gap-2">
+          <Button variant="secondary" onClick={back} className="w-fit px-6">
+            {t('Back')}
+          </Button>
+
+          <Button onClick={() => setStep('password')} className="flex-1" disabled={!checkedSaveKey}>
+            {t('Continue')}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  // step === 'password'
+  return (
+    <div className="space-y-6">
+      {renderStepIndicator()}
+
+      <div className="text-center">
+        <h3 className="text-lg font-semibold mb-2">{t('Secure Your Account')}</h3>
+        <p className="text-sm text-muted-foreground">
+          {t('Add an extra layer of protection with a password')}
+        </p>
+      </div>
+
+      <InfoCard
+        title={t('Password Protection (Recommended)')}
+        content={t(
+          'Add a password to encrypt your private key in this browser. This is optional but strongly recommended for better security.'
+        )}
+      />
+
+      <div className="space-y-2">
+        <div className="space-y-1">
+          <Label htmlFor="password-input">{t('Password (Optional)')}</Label>
+          <Input
+            id="password-input"
+            type="password"
+            placeholder={t('Create a password (or skip)')}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </div>
+
+        {password && (
+          <div className="space-y-1">
+            <Label htmlFor="confirm-password-input">{t('Confirm Password')}</Label>
+            <Input
+              id="confirm-password-input"
+              type="password"
+              placeholder={t('Enter your password again')}
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+            />
+            {confirmPassword && !passwordsMatch && (
+              <p className="text-xs text-red-500">{t('Passwords do not match')}</p>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="w-full flex gap-2">
+        <Button
+          variant="secondary"
+          onClick={() => {
+            setStep('generate')
+            setPassword('')
+            setConfirmPassword('')
+          }}
+          className="w-fit px-6"
+        >
+          {t('Back')}
+        </Button>
+        <Button onClick={handleSignup} className="flex-1" disabled={!canSubmit}>
+          {t('Complete Signup')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function generateNsec() {
+  const sk = generateSecretKey()
+  return nsecEncode(sk)
+}

src/components/AccountManager/index.tsx

@@ -2,17 +2,15 @@ import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { isDevEnv } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
-import { useTheme } from '@/providers/ThemeProvider'
-import { NstartModal } from 'nstart-modal'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AccountList from '../AccountList'
-import GenerateNewAccount from './GenerateNewAccount'
 import NostrConnectLogin from './NostrConnectionLogin'
 import NpubLogin from './NpubLogin'
 import PrivateKeyLogin from './PrivateKeyLogin'
+import Signup from './Signup'
 
-type TAccountManagerPage = 'nsec' | 'bunker' | 'generate' | 'npub' | null
+type TAccountManagerPage = 'nsec' | 'bunker' | 'npub' | 'signup' | null
 
 export default function AccountManager({ close }: { close?: () => void }) {
   const [page, setPage] = useState<TAccountManagerPage>(null)
@@ -23,10 +21,10 @@ export default function AccountManager({ close }: { close?: () => void }) {
         <PrivateKeyLogin back={() => setPage(null)} onLoginSuccess={() => close?.()} />
       ) : page === 'bunker' ? (
         <NostrConnectLogin back={() => setPage(null)} onLoginSuccess={() => close?.()} />
-      ) : page === 'generate' ? (
-        <GenerateNewAccount back={() => setPage(null)} onLoginSuccess={() => close?.()} />
       ) : page === 'npub' ? (
         <NpubLogin back={() => setPage(null)} onLoginSuccess={() => close?.()} />
+      ) : page === 'signup' ? (
+        <Signup back={() => setPage(null)} onSignupSuccess={() => close?.()} />
       ) : (
         <AccountManagerNav setPage={setPage} close={close} />
       )}
@@ -41,9 +39,8 @@ function AccountManagerNav({
   setPage: (page: TAccountManagerPage) => void
   close?: () => void
 }) {
-  const { t, i18n } = useTranslation()
-  const { themeSetting } = useTheme()
-  const { nip07Login, bunkerLogin, nsecLogin, ncryptsecLogin, accounts } = useNostr()
+  const { t } = useTranslation()
+  const { nip07Login, accounts } = useNostr()
 
   return (
     <div onClick={(e) => e.stopPropagation()} className="flex flex-col gap-8">
@@ -75,38 +72,8 @@ function AccountManagerNav({
         <div className="text-center text-muted-foreground text-sm font-semibold">
           {t("Don't have an account yet?")}
         </div>
-        <Button
-          onClick={() => {
-            const wizard = new NstartModal({
-              baseUrl: 'https://nstart.me',
-              an: 'Jumble',
-              am: themeSetting === 'pure-black' ? 'dark' : themeSetting,
-              al: i18n.language.slice(0, 2),
-              onComplete: ({ nostrLogin }) => {
-                if (!nostrLogin) return
-
-                if (nostrLogin.startsWith('bunker://')) {
-                  bunkerLogin(nostrLogin)
-                } else if (nostrLogin.startsWith('ncryptsec')) {
-                  ncryptsecLogin(nostrLogin)
-                } else if (nostrLogin.startsWith('nsec')) {
-                  nsecLogin(nostrLogin)
-                }
-              }
-            })
-            close?.()
-            wizard.open()
-          }}
-          className="w-full mt-4"
-        >
-          {t('Sign up')}
-        </Button>
-        <Button
-          variant="link"
-          onClick={() => setPage('generate')}
-          className="w-full text-muted-foreground py-0 h-fit mt-1"
-        >
-          {t('or simply generate a private key')}
+        <Button onClick={() => setPage('signup')} className="w-full mt-4">
+          {t('Create New Account')}
         </Button>
       </div>
       {accounts.length > 0 && (