NpubLogin.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { Input } from '@/components/ui/input'
   3  import { useNostr } from '@/providers/NostrProvider'
   4  import { Loader } from 'lucide-react'
   5  import { useState } from 'react'
   6  import { useTranslation } from 'react-i18next'
   7  
   8  export default function NpubLogin({
   9    back,
  10    onLoginSuccess
  11  }: {
  12    back: () => void
  13    onLoginSuccess: () => void
  14  }) {
  15    const { t } = useTranslation()
  16    const { npubLogin } = useNostr()
  17    const [pending, setPending] = useState(false)
  18    const [npubInput, setNpubInput] = useState('')
  19    const [errMsg, setErrMsg] = useState<string | null>(null)
  20  
  21    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  22      setNpubInput(e.target.value)
  23      setErrMsg(null)
  24    }
  25  
  26    const handleLogin = () => {
  27      if (npubInput === '') return
  28  
  29      setPending(true)
  30      npubLogin(npubInput)
  31        .then(() => onLoginSuccess())
  32        .catch((err) => setErrMsg(err.message))
  33        .finally(() => setPending(false))
  34    }
  35  
  36    return (
  37      <>
  38        <div className="space-y-1">
  39          <Input
  40            placeholder="npub..."
  41            value={npubInput}
  42            onChange={handleInputChange}
  43            className={errMsg ? 'border-destructive' : ''}
  44          />
  45          {errMsg && <div className="text-xs text-destructive pl-3">{errMsg}</div>}
  46        </div>
  47        <Button onClick={handleLogin} disabled={pending}>
  48          <Loader className={pending ? 'animate-spin' : 'hidden'} />
  49          {t('Login')}
  50        </Button>
  51        <Button variant="secondary" onClick={back}>
  52          {t('Back')}
  53        </Button>
  54      </>
  55    )
  56  }
  57