mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
interface TelegramLoginButtonProps {
|
|
botUsername: string
|
|
}
|
|
|
|
export default function TelegramLoginButton({
|
|
botUsername,
|
|
}: TelegramLoginButtonProps) {
|
|
const { t } = useTranslation()
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
|
|
// Load widget script
|
|
useEffect(() => {
|
|
if (!containerRef.current || !botUsername) return
|
|
|
|
// Clear previous widget using safe DOM API
|
|
while (containerRef.current.firstChild) {
|
|
containerRef.current.removeChild(containerRef.current.firstChild)
|
|
}
|
|
|
|
// Get current URL for redirect
|
|
const redirectUrl = `${window.location.origin}/auth/telegram/callback`
|
|
|
|
// Create script element for Telegram Login Widget
|
|
const script = document.createElement('script')
|
|
script.src = 'https://telegram.org/js/telegram-widget.js?22'
|
|
script.setAttribute('data-telegram-login', botUsername)
|
|
script.setAttribute('data-size', 'large')
|
|
script.setAttribute('data-radius', '8')
|
|
script.setAttribute('data-auth-url', redirectUrl)
|
|
script.setAttribute('data-request-access', 'write')
|
|
script.async = true
|
|
|
|
containerRef.current.appendChild(script)
|
|
}, [botUsername])
|
|
|
|
if (!botUsername || botUsername === 'your_bot') {
|
|
return (
|
|
<div className="text-center text-gray-500 text-sm py-4">
|
|
{t('auth.telegramNotConfigured')}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center space-y-4">
|
|
{/* Telegram Widget will be inserted here */}
|
|
<div ref={containerRef} className="flex justify-center" />
|
|
|
|
{/* Fallback link for mobile */}
|
|
<div className="text-center">
|
|
<p className="text-xs text-gray-500 mb-2">{t('auth.orOpenInApp')}</p>
|
|
<a
|
|
href={`https://t.me/${botUsername}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center text-sm text-telegram-blue hover:underline"
|
|
>
|
|
<svg className="w-4 h-4 mr-1" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
|
|
</svg>
|
|
@{botUsername}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|