网站首页 网站源码
website
站点相关全部源代码，隐藏了一些关于服务器的信息
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="zh-Hans">
<head>
    <title>解绑双因素验证 - 认证中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="@Url.Content("~/css/global.css")" asp-append-version="true"/>
</head>
<body class="twofactor-page">
    <div class="container">
        <div class="header">
            <h1>解绑双因素验证</h1>
            <p>请输入当前验证码以确认解绑操作</p>
        </div>
        
        <form method="post" asp-action="HandleUnbindTwoFactor" autocomplete="off" data-submit-loading="true">
            <input type="hidden" name="returnUrl" value="@Context.Request.Query["returnUrl"]"/>
            
            <!-- 安全警告区域 -->
            <div class="warning-section">
                <div class="warning-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
                        <line x1="12" y1="9" x2="12" y2="13"></line>
                        <line x1="12" y1="17" x2="12.01" y2="17"></line>
                    </svg>
                </div>
                <div class="warning-content">
                    <h3>安全提醒</h3>
                    <p>解绑双因素验证将会降低您的账户安全性。建议您在确保账户安全的情况下再进行此操作。</p>
                </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 class="input-hint">
                    请从您的身份验证应用中获取当前验证码
                </div>
            </div>
            
            @if (TempData["Msg"] is string message)
            {
                <div class="error-message">
                    @message
                </div>
            }
            
            <!-- 操作按钮区域 -->
            <div class="action-buttons">
                <button type="submit" class="danger-button" data-loading-text="解绑中..." onclick="return confirmUnbind()">
                    确认解绑
                </button>
                <a href="/" class="cancel-button">
                    取消操作
                </a>
            </div>
        </form>
        
        <div class="footer">
            <p>解绑后，您可以随时重新绑定双因素验证来保护账户安全</p>
        </div>
    </div>

    <script src="@Url.Content("~/js/ui-components.js")" asp-append-version="true"></script>
    <script>
        // 确认解绑操作
        function confirmUnbind() {
            const pinCode = document.getElementById('pinCode').value;
            if (!pinCode || pinCode.length !== 6) {
                showToast('请输入6位验证码', 'error');
                return false;
            }
            
            return confirm('您确定要解绑双因素验证吗？\n\n这将会降低您的账户安全性。解绑后，您将无法使用双因素验证来保护您的账户。');
        }

        // 简单的提示消息
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.textContent = message;
            
            const bgColor = type === 'error' ? '#EF4444' : 'var(--primary-color)';
            
            toast.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: ${bgColor};
                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(() => {
                    if (document.body.contains(toast)) {
                        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);

        // 输入框格式化和验证
        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>
loading