src/Dpz.Core.Web/Views/Home/BindTwoFactor.cshtml 网站源码

站点相关全部源代码，隐藏了一些关于服务器的信息
@model Dpz.Core.Authenticator.SetupCode

@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="zh-Hans">
<head>
    <title>双因素绑定</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-color: #4F46E5;
            --primary-hover: #4338CA;
            --secondary-color: #F3F4F6;
            --text-primary: #1F2937;
            --text-secondary: #6B7280;
            --text-muted: #9CA3AF;
            --border-color: #E5E7EB;
            --bg-primary: #FFFFFF;
            --bg-secondary: #F9FAFB;
            --bg-card: #FFFFFF;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --radius: 12px;
            --radius-sm: 8px;
        }

        @@media (prefers-color-scheme: dark) {
            :root {
                --primary-color: #6366F1;
                --primary-hover: #5B21B6;
                --secondary-color: #374151;
                --text-primary: #F9FAFB;
                --text-secondary: #D1D5DB;
                --text-muted: #9CA3AF;
                --border-color: #4B5563;
                --bg-primary: #111827;
                --bg-secondary: #1F2937;
                --bg-card: #1F2937;
                --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
                --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
            }
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .container {
            width: 100%;
            max-width: 480px;
            background: var(--bg-card);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            padding: 40px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .header h1 {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .header p {
            font-size: 16px;
            color: var(--text-secondary);
        }

        .qr-section {
            text-align: center;
            margin-bottom: 32px;
        }

        .qr-wrapper {
            display: inline-block;
            padding: 20px;
            background: var(--bg-secondary);
            border-radius: var(--radius);
            border: 2px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .qr-wrapper:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .qr-image {
            width: 200px;
            height: 200px;
            border-radius: var(--radius-sm);
            display: block;
        }

        .manual-key-section {
            margin-bottom: 32px;
        }

        .manual-key-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 8px;
            display: block;
        }

        .manual-key-container {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s ease;
        }

        .manual-key-container:hover {
            border-color: var(--primary-color);
        }

        .manual-key {
            flex: 1;
            font-family: 'Courier New', monospace;
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            word-break: break-all;
            user-select: all;
        }

        .copy-button {
            background: none;
            border: none;
            color: var(--primary-color);
            cursor: pointer;
            padding: 8px;
            border-radius: var(--radius-sm);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            height: 40px;
        }

        .copy-button:hover {
            background: var(--primary-color);
            color: white;
        }

        .input-section {
            margin-bottom: 32px;
        }

        .input-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 8px;
            display: block;
        }

        .input-wrapper {
            position: relative;
        }

        .pin-input {
            width: 100%;
            height: 56px;
            padding: 16px;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-sm);
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            letter-spacing: 4px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            transition: all 0.3s ease;
            outline: none;
        }

        .pin-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }

        .pin-input::placeholder {
            color: var(--text-muted);
            letter-spacing: normal;
        }

        .pin-input::-webkit-outer-spin-button,
        .pin-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .pin-input[type=number] {
            -moz-appearance: textfield;
        }

        .error-message {
            background: #FEF2F2;
            color: #DC2626;
            padding: 12px 16px;
            border-radius: var(--radius-sm);
            margin-bottom: 24px;
            border: 1px solid #FECACA;
            font-size: 14px;
            font-weight: 500;
        }

        @@media (prefers-color-scheme: dark) {
            .error-message {
                background: #1F1818;
                color: #FCA5A5;
                border-color: #7F1D1D;
            }
        }

        .submit-button {
            width: 100%;
            height: 56px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .submit-button:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .submit-button:active {
            transform: translateY(0);
        }

        .submit-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
        }

        .submit-button:active::before {
            width: 300px;
            height: 300px;
        }

        .skip-section {
            text-align: center;
            margin-top: 20px;
        }

        .skip-link {
            display: inline-block;
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            padding: 12px 24px;
            border-radius: var(--radius-sm);
            transition: all 0.3s ease;
            position: relative;
            border: 1px solid var(--border-color);
            background: var(--bg-secondary);
        }

        .skip-link:hover {
            color: var(--text-primary);
            background: var(--bg-primary);
            border-color: var(--primary-color);
            transform: translateY(-1px);
            box-shadow: var(--shadow);
        }

        .skip-link:active {
            transform: translateY(0);
        }

        .skip-link::before {
            content: '←';
            margin-right: 8px;
            font-size: 16px;
            transition: transform 0.3s ease;
        }

        .skip-link:hover::before {
            transform: translateX(-2px);
        }

        .footer {
            text-align: center;
            margin-top: 32px;
            padding-top: 24px;
            border-top: 1px solid var(--border-color);
        }

        .footer p {
            font-size: 14px;
            color: var(--text-muted);
        }

        .footer a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        /* 移动端适配 */
        @@media (max-width: 640px) {
            .container {
                padding: 24px;
                margin: 10px;
                max-width: none;
            }

            .header h1 {
                font-size: 24px;
            }

            .header p {
                font-size: 14px;
            }

            .qr-image {
                width: 160px;
                height: 160px;
            }

            .qr-wrapper {
                padding: 16px;
            }

            .manual-key {
                font-size: 14px;
            }

            .pin-input {
                height: 48px;
                font-size: 16px;
                letter-spacing: 2px;
            }

            .submit-button {
                height: 48px;
            }

            .skip-link {
                font-size: 13px;
                padding: 10px 20px;
            }
        }

        /* 平板端适配 */
        @@media (min-width: 641px) and (max-width: 1024px) {
            .container {
                max-width: 560px;
            }
        }

        /* 高分辨率适配 */
        @@media (min-width: 1440px) {
            .container {
                max-width: 520px;
            }
        }

        /* 动画效果 */
        @@keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .container {
            animation: fadeIn 0.6s ease-out;
        }

        /* 无障碍支持 */
        @@media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* 高对比度模式 */
        @@media (prefers-contrast: high) {
            :root {
                --border-color: #000000;
                --text-muted: #000000;
            }
        }

        /* 打印样式 */
        @@media print {
            body {
                background: white;
                color: black;
            }
            
            .container {
                box-shadow: none;
                border: 1px solid #000;
            }
            
            .submit-button {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>双因素身份验证</h1>
            <p>请使用您的身份验证应用扫描二维码</p>
        </div>
        
        <form method="post" asp-action="HandleBindTwoFactor" autocomplete="off">
            <input type="hidden" name="fromUrl" value="@TempData["FromUrl"]"/>
            
            <div class="qr-section">
                <div class="qr-wrapper">
                    <img class="qr-image" alt="双因素验证二维码" src="@Model.QrCodeSetupImageUrl"/>
                </div>
            </div>
            
            <div class="manual-key-section">
                <label class="manual-key-label">手动输入密钥</label>
                <div class="manual-key-container">
                    <span class="manual-key">@Model.ManualEntryKey</span>
                    <button type="button" class="copy-button" onclick="copyToClipboard('@Model.ManualEntryKey')" title="复制密钥">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                        </svg>
                    </button>
                </div>
            </div>
            
            <div class="input-section">
                <label class="input-label" for="pinCode">验证码</label>
                <div class="input-wrapper">
                    <input 
                        id="pinCode"
                        name="pinCode" 
                        type="text" 
                        class="pin-input" 
                        placeholder="请输入6位验证码"
                        pattern="[0-9]{6}"
                        maxlength="6"
                        minlength="6"
                        required
                        autocomplete="one-time-code"
                        inputmode="numeric"
                    />
                </div>
            </div>
            
            @if (TempData["Msg"] is string message)
            {
                <div class="error-message">
                    @message
                </div>
            }
            
            <button type="submit" class="submit-button">
                验证并绑定
            </button>
            
            <div class="skip-section">
                <a href="@(TempData["FromUrl"] ?? "/")" class="skip-link" onclick="return confirmSkip()">
                    暂不绑定，返回原页面
                </a>
            </div>
        </form>
        
        <div class="footer">
            <p>请确保您的设备时间准确，验证码每30秒更新一次</p>
        </div>
    </div>

    <script>
        // 复制到剪贴板功能
        function copyToClipboard(text) {
            if (navigator.clipboard) {
                navigator.clipboard.writeText(text).then(function() {
                    showToast('密钥已复制到剪贴板');
                }).catch(function(err) {
                    fallbackCopyTextToClipboard(text);
                });
            } else {
                fallbackCopyTextToClipboard(text);
            }
        }

        function fallbackCopyTextToClipboard(text) {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-999999px';
            textArea.style.top = '-999999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            
            try {
                const successful = document.execCommand('copy');
                if (successful) {
                    showToast('密钥已复制到剪贴板');
                } else {
                    showToast('复制失败，请手动复制');
                }
            } catch (err) {
                showToast('复制失败，请手动复制');
            }
            
            document.body.removeChild(textArea);
        }

        // 简单的提示消息
        function showToast(message) {
            const toast = document.createElement('div');
            toast.textContent = message;
            toast.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: var(--primary-color);
                color: white;
                padding: 12px 24px;
                border-radius: 8px;
                box-shadow: var(--shadow-lg);
                z-index: 1000;
                font-size: 14px;
                font-weight: 500;
                animation: slideIn 0.3s ease-out;
            `;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.animation = 'slideOut 0.3s ease-in';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 3000);
        }

        // 添加动画样式
        const style = document.createElement('style');
        style.textContent = `
            @@keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            @@keyframes slideOut {
                from { transform: translateX(0); opacity: 1; }
                to { transform: translateX(100%); opacity: 0; }
            }
        `;
        document.head.appendChild(style);

        // 确认跳过绑定
        function confirmSkip() {
            return confirm('暂不绑定双因素验证将会降低您的账户安全性。\n\n您确定要跳过绑定并返回原页面吗？');
        }

        // 输入框格式化
        document.addEventListener('DOMContentLoaded', function() {
            const pinInput = document.getElementById('pinCode');
            
            pinInput.addEventListener('input', function(e) {
                // 只允许数字输入
                this.value = this.value.replace(/[^0-9]/g, '');
                
                // 自动聚焦到下一个输入或提交
                if (this.value.length === 6) {
                    this.blur();
                }
            });
            
            // 自动聚焦
            pinInput.focus();
        });
    </script>
</body>
</html>