OpenFlare/frontend/app/(main)/proxy-routes/detail/components/auth-section.tsx

'use client';

import {useEffect} from 'react';
import {zodResolver} from '@hookform/resolvers/zod';
import {useForm} from 'react-hook-form';
import {toast} from 'sonner';
import {z} from 'zod';

import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,} from '@/components/ui/form';
import {Input} from '@/components/ui/input';
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
import type {ProxyRouteItem} from '@/lib/services/openflare';

import {proxyRouteFormIds} from '../helpers';
import {useRouteSectionSave} from '../hooks/use-route-section-save';
import {SectionShell} from './section-shell';

const authSchema = z
  .object({
    auth_mode: z.enum(['none', 'basic']),
    basic_auth_username: z.string(),
    basic_auth_password: z.string(),
  })
  .superRefine((value, context) => {
    if (value.auth_mode !== 'basic') {
      return;
    }
    if (!value.basic_auth_username.trim()) {
      context.addIssue({
        code: z.ZodIssueCode.custom,
        path: ['basic_auth_username'],
        message: '请输入账号',
      });
    }
    if (!value.basic_auth_password.trim()) {
      context.addIssue({
        code: z.ZodIssueCode.custom,
        path: ['basic_auth_password'],
        message: '请输入密码',
      });
    }
  });

type AuthValues = z.infer<typeof authSchema>;

function resolveAuthMode(route: ProxyRouteItem): AuthValues['auth_mode'] {
  return route.basic_auth_enabled ? 'basic' : 'none';
}

interface AuthSectionProps {
  route: ProxyRouteItem;
  onRouteUpdate: (route: ProxyRouteItem) => void;
  onSavingChange?: (saving: boolean) => void;
}

export function AuthSection({ route, onRouteUpdate, onSavingChange }: AuthSectionProps) {
  const { saving, save } = useRouteSectionSave(route, onRouteUpdate, onSavingChange);

  const form = useForm<AuthValues>({
    resolver: zodResolver(authSchema),
    defaultValues: {
      auth_mode: resolveAuthMode(route),
      basic_auth_username: route.basic_auth_username || '',
      basic_auth_password: route.basic_auth_password || '',
    },
  });

  useEffect(() => {
    form.reset({
      auth_mode: resolveAuthMode(route),
      basic_auth_username: route.basic_auth_username || '',
      basic_auth_password: route.basic_auth_password || '',
    });
  }, [form, route]);

  const authMode = form.watch('auth_mode');

  return (
    <SectionShell
      title="认证配置"
      description="配置 Basic Auth 限制未授权访问。PoW 防护请在 WAF 规则组中配置。"
      formId={proxyRouteFormIds.auth}
      saving={saving}
    >
      <Form {...form}>
        <form
          id={proxyRouteFormIds.auth}
          className="space-y-5"
          onSubmit={form.handleSubmit(
            async (values) => {
              await save(
                {
                  basic_auth_enabled: values.auth_mode === 'basic',
                  basic_auth_username:
                    values.auth_mode === 'basic' ? values.basic_auth_username.trim() : '',
                  basic_auth_password:
                    values.auth_mode === 'basic' ? values.basic_auth_password.trim() : '',
                },
                '认证配置已保存',
              );
            },
            () => {
              toast.error('请检查认证配置表单');
            },
          )}
        >
          <FormField
            control={form.control}
            name="auth_mode"
            render={({ field }) => (
              <FormItem>
                <FormLabel>认证模式</FormLabel>
                <Select
                  value={field.value}
                  onValueChange={(mode) => {
                    field.onChange(mode);
                    if (mode !== 'basic') {
                      form.setValue('basic_auth_username', '');
                      form.setValue('basic_auth_password', '');
                    }
                  }}
                >
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="none">无认证</SelectItem>
                    <SelectItem value="basic">Basic Auth</SelectItem>
                  </SelectContent>
                </Select>
                <FormDescription>PoW 防护仅支持在 WAF 规则组中启用并绑定站点。</FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />

          {authMode === 'basic' ? (
            <>
              <FormField
                control={form.control}
                name="basic_auth_username"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>账号</FormLabel>
                    <FormControl>
                      <Input placeholder="admin" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="basic_auth_password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>密码</FormLabel>
                    <FormControl>
                      <Input type="text" placeholder="secret123" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </>
          ) : null}
        </form>
      </Form>
    </SectionShell>
  );
}