mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-09-11 06:30:21 +00:00
95 lines
3.3 KiB
TypeScript
Vendored
95 lines
3.3 KiB
TypeScript
Vendored
/*
|
|
Copyright (C) 2023-2026 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
import { Send } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { Dialog } from '@/components/dialog'
|
|
import { Alert, AlertDescription } from '@/components/ui/alert'
|
|
|
|
// ============================================================================
|
|
// Telegram Bind Dialog Component
|
|
// ============================================================================
|
|
|
|
interface TelegramBindDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
botName: string
|
|
onSuccess: () => void
|
|
}
|
|
|
|
export function TelegramBindDialog({
|
|
open,
|
|
onOpenChange,
|
|
botName,
|
|
}: TelegramBindDialogProps) {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
title={t('Bind Telegram Account')}
|
|
description={t('Click the button below to bind your Telegram account')}
|
|
contentClassName='sm:max-w-md'
|
|
contentHeight='auto'
|
|
bodyClassName='space-y-4'
|
|
>
|
|
<div className='space-y-4 py-4'>
|
|
<Alert>
|
|
<Send className='h-4 w-4' />
|
|
<AlertDescription>
|
|
{t(
|
|
'You will be redirected to Telegram to complete the binding process.'
|
|
)}
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<div className='flex flex-col items-center justify-center gap-4 rounded-lg border p-6'>
|
|
<div className='flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 dark:bg-blue-900'>
|
|
<Send className='h-6 w-6 text-blue-600 dark:text-blue-400' />
|
|
</div>
|
|
|
|
<div className='text-center'>
|
|
<p className='text-muted-foreground text-sm'>
|
|
{t('Bot:')}{' '}
|
|
<span className='font-mono font-semibold'>@{botName}</span>
|
|
</p>
|
|
<p className='text-muted-foreground mt-1 text-xs'>
|
|
{t(
|
|
"After clicking the button, you'll be asked to authorize the bot"
|
|
)}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Telegram Login Widget will be injected here by react-telegram-login */}
|
|
<div id='telegram-login-widget' className='flex justify-center'>
|
|
{/* This would require the react-telegram-login library */}
|
|
<div className='text-muted-foreground rounded-lg border border-dashed px-6 py-3 text-sm'>
|
|
{t('Telegram Login Widget')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className='text-muted-foreground text-center text-xs'>
|
|
{t('The binding will complete automatically after authorization')}
|
|
</p>
|
|
</div>
|
|
</Dialog>
|
|
)
|
|
}
|