TelegramBotAdmin/admin-web/src/pages/Login.tsx

import { LoginFormPage, ProFormText } from '@ant-design/pro-components';
import { Alert, Typography, message } from 'antd';
import { Bot, LockKeyhole, UserRound } from 'lucide-react';
import { history } from '@umijs/max';
import { useState } from 'react';

import { apiRequest, jsonOptions, setCsrfToken } from '@/services/api';
import type { AdminUser } from '@/types';

export default function LoginPage() {
  const [error, setError] = useState('');

  return (
    <div className="login-stage">
      <span className="login-orbit login-orbit--one" aria-hidden="true" />
      <span className="login-orbit login-orbit--two" aria-hidden="true" />
    <LoginFormPage
      logo={<Bot size={34} color="#168acd" />}
      title="Telegram 群管"
      subTitle="BOT OPERATIONS / CONTROL PLANE"
      containerStyle={{
        minHeight: 420,
        border: '1px solid rgba(255, 255, 255, 0.7)',
        borderRadius: 24,
        boxShadow: '0 32px 80px rgba(20, 55, 78, 0.16)',
      }}
      onFinish={async (values) => {
        setError('');
        try {
          const user = await apiRequest<AdminUser>(
            '/auth/login',
            jsonOptions('POST', values),
          );
          setCsrfToken(user.csrf_token);
          message.success('登录成功');
          history.replace(user.must_change_password ? '/change-password' : '/dashboard');
          return true;
        } catch (requestError) {
          const text = requestError instanceof Error ? requestError.message : '登录失败';
          setError(text);
          return false;
        }
      }}
      submitter={{ searchConfig: { submitText: '登录' }, submitButtonProps: { block: true } }}
    >
      {error ? <Alert type="error" showIcon message={error} style={{ marginBottom: 16 }} /> : null}
      <ProFormText
        name="username"
        label="用户名"
        initialValue="admin"
        fieldProps={{ prefix: <UserRound size={17} />, autoComplete: 'username', size: 'large' }}
        rules={[{ required: true, message: '请输入用户名' }]}
      />
      <ProFormText.Password
        name="password"
        label="密码"
        fieldProps={{ prefix: <LockKeyhole size={17} />, autoComplete: 'current-password', size: 'large' }}
        rules={[{ required: true, message: '请输入密码' }]}
      />
      <Typography.Text type="secondary">
        默认账号 admin；首次登录后必须修改初始密码。
      </Typography.Text>
    </LoginFormPage>
    </div>
  );
}