chatroom/resources/views/admin/smtp/edit.blade.php

@extends('admin.layouts.app')

@section('title', '发件系统 (SMTP) 配置')

@section('content')
    <div class="bg-amber-50 border border-amber-200 rounded-xl mb-6 p-4 flex gap-4 shadow-sm items-start">
        <div class="text-amber-500 text-xl mt-0.5">⚠️</div>
        <div>
            <h3 class="font-bold text-amber-800">重要安全警示：最高安全级别配置</h3>
            <p class="text-sm text-amber-700 mt-1">
                本页面用于配置支持全站消息推送、密码找回等关键业务的底层 SMTP 邮件网关接口。<br>
                由于涉及关键的授权密码/秘钥安全，**该界面已被系统强制锁定仅允许 ID=1 的系统创始人操作**。请确保填写的服务器、账号、授权码准确无误。
            </p>
        </div>
    </div>

    <div class="flex flex-col md:flex-row gap-6">

        <!-- 配置表单区 -->
        <div class="flex-1 bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-5 border-b border-gray-100 bg-gray-50">
                <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                    <span>📧</span> 编辑 SMTP 发件参数
                </h2>
            </div>
            <div class="p-6">
                <form action="{{ route('admin.smtp.update') }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="space-y-6">
                        <!-- 系统邮件总开关 -->
                        <div
                            class="bg-indigo-50/50 p-4 rounded-lg border border-indigo-100 flex items-center justify-between">
                            <div>
                                <h4 class="font-bold text-gray-800">全站邮件业务总开关 <span
                                        class="text-xs font-normal text-gray-500 ml-1">[smtp_enabled]</span></h4>
                                <p class="text-sm text-gray-500 mt-1">控制前台是否开启“通过邮箱找回密码”等依赖邮件系统的入口功能。</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <!-- 隐藏的 input 用来确保未勾选时提交 0 -->
                                <input type="hidden" name="smtp_enabled" value="0">
                                <input type="checkbox" name="smtp_enabled" value="1" class="sr-only peer"
                                    {{ ($params['smtp_enabled'] ?? '0') === '1' ? 'checked' : '' }}>
                                <div
                                    class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600">
                                </div>
                            </label>
                        </div>

                        <!-- 华丽分割线 -->
                        <div class="border-t border-gray-100 pt-3"></div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-1">
                                    SMTP 服务器地址 <span class="text-gray-400 font-normal ml-1">[smtp_host]</span>
                                </label>
                                <input type="text" name="smtp_host" value="{{ $params['smtp_host'] ?? '' }}"
                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border bg-gray-50"
                                    placeholder="例如: smtp.qq.com">
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-1">
                                    SMTP 端口号 <span class="text-gray-400 font-normal ml-1">[smtp_port]</span>
                                </label>
                                <input type="text" name="smtp_port" value="{{ $params['smtp_port'] ?? '465' }}"
                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border bg-gray-50"
                                    placeholder="例如: 465 或 25">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-1">
                                    发件邮箱账号 <span class="text-gray-400 font-normal ml-1">[smtp_username]</span>
                                </label>
                                <input type="text" name="smtp_username" value="{{ $params['smtp_username'] ?? '' }}"
                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border bg-gray-50"
                                    placeholder="例如: xxx@qq.com">
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-1">
                                    授权密码 <span class="text-gray-400 font-normal ml-1">[smtp_password]</span>
                                </label>
                                <input type="password" name="smtp_password" value="{{ $params['smtp_password'] ?? '' }}"
                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border bg-gray-50"
                                    placeholder="如果是 QQ 邮箱请填写授权码">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-1">
                                    发送者标记邮箱 <span class="text-gray-400 font-normal ml-1">[smtp_from_address]</span>
                                </label>
                                <input type="text" name="smtp_from_address"
                                    value="{{ $params['smtp_from_address'] ?? '' }}"
                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border bg-gray-50"
                                    placeholder="通常填与账号一样的邮箱">
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-1">
                                    发送者昵称 <span class="text-gray-400 font-normal ml-1">[smtp_from_name]</span>
                                </label>
                                <input type="text" name="smtp_from_name"
                                    value="{{ $params['smtp_from_name'] ?? '飘落流星聊天室' }}"
                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border bg-gray-50"
                                    placeholder="邮件中显示的发送者名字">
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-1">
                                加密方式 <span class="text-gray-400 font-normal ml-1">[smtp_encryption]</span>
                            </label>
                            <select name="smtp_encryption"
                                class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border bg-gray-50">
                                <option value="ssl" {{ ($params['smtp_encryption'] ?? '') === 'ssl' ? 'selected' : '' }}>
                                    SSL加密 (推荐)</option>
                                <option value="tls" {{ ($params['smtp_encryption'] ?? '') === 'tls' ? 'selected' : '' }}>
                                    TLS加密</option>
                                <option value="" {{ ($params['smtp_encryption'] ?? '') === '' ? 'selected' : '' }}>
                                    无加密
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="mt-8 pt-5 border-t">
                        <button type="submit"
                            class="px-5 py-2.5 bg-indigo-600 text-white rounded-md font-bold hover:bg-indigo-700 shadow-sm transition w-full md:w-auto">
                            💾 保存 SMTP 发件设置
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 连通性测试区 -->
        <div class="w-full md:w-1/3 bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden self-start">
            <div class="p-5 border-b border-gray-100 bg-gray-50">
                <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                    <span>📡</span> 线路连通性测试
                </h2>
            </div>
            <div class="p-6">
                <p class="text-sm text-gray-500 mb-4 line-clamp-3">
                    配置保存完毕后，请在下方输入一个你能立即查收的外部邮箱地址（如网易/新浪等），系统将尝试发送一封包含成功验证的测试函。</p>
                <form action="{{ route('admin.smtp.test') }}" method="POST">
                    @csrf
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">接收测试邮件的地址</label>
                        <input type="email" name="test_email" required
                            class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border bg-gray-50 mb-3"
                            placeholder="例如: test@163.com">
                        <button type="submit"
                            class="w-full px-4 py-2 border border-indigo-600 text-indigo-600 rounded-md font-bold hover:bg-indigo-50 transition flex justify-center items-center gap-2">
                            <span>🚀 立即发送测试邮件</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection