Bplus/SuperAdmin/SuperAdmin/Views/Home/Login.cshtml

@{
    ViewData["Title"] = "Login";
    Layout = "~/Views/Shared/_NothingLayout.cshtml";
}

<link rel="stylesheet" href="~/css/login.css" />

<div class="login-background"></div>
<div class="login-grid"></div>

<div class="login-container">
    <div class="login-form-card">
        <div class="login-header">
            @* <div class="logo-circle">
                <i class="ft-lock" style="font-size: 36px; color: #333;"></i>
            </div> *@
            <h2 class="login-title">BALANCE PLUS MYTEL</h2>
        </div>
        
        <div class="form-section">
            <form class="form-horizontal" id="loginForm" action="@ViewBag.MyConfig.MyValue/Home/LoginAction" method="post">
                <div class="input-wrapper">
                    <input type="text" class="input-enhanced" id="user-name" placeholder="USERNAME" name="account">
                    <i class="ft-user input-icon"></i>
                </div>
                
                <div class="input-wrapper">
                    <input type="password" class="input-enhanced input-password" id="user-password" placeholder="PASSWORD" name="password">
                    <i class="fa fa-key input-icon"></i>
                    <span class="toggle-password" id="togglePassword" title="Show/Hide Password">👁</span>
                </div>
                
                <div class="error-message">
                    <span class="text-danger" id="errorMessage">@(TempData["ErrorMessage"]?.ToString())</span>
                </div>
                
                <button type="submit" class="btn-login">
                    <i class="ft-unlock" style="margin-right: 8px;"></i>
                    Login
                </button>
            </form>
        </div>
        
        <script>
            // Toggle password visibility
            document.getElementById('togglePassword').addEventListener('click', function() {
                var passwordInput = document.getElementById('user-password');
                var toggleIcon = document.getElementById('togglePassword');
                
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    toggleIcon.textContent = '🙈';
                    toggleIcon.title = 'Hide Password';
                } else {
                    passwordInput.type = 'password';
                    toggleIcon.textContent = '👁';
                    toggleIcon.title = 'Show Password';
                }
            });
            
            // Form validation
            document.getElementById('loginForm').addEventListener('submit', function(e) {
                var account = document.getElementById('user-name').value.trim();
                var password = document.getElementById('user-password').value.trim();
                var errorMessage = document.getElementById('errorMessage');
                
                // Clear previous error
                errorMessage.textContent = '';
                document.getElementById('user-name').classList.remove('input-error');
                document.getElementById('user-password').classList.remove('input-error');
                
                // Validate account
                if (!account) {
                    e.preventDefault();
                    errorMessage.textContent = 'Please enter infomation in this field';
                    document.getElementById('user-name').classList.add('input-error');
                    document.getElementById('user-name').focus();
                    return false;
                }
                
                // Validate password
                if (!password) {
                    e.preventDefault();
                    errorMessage.textContent = 'Please enter password';
                    document.getElementById('user-password').classList.add('input-error');
                    document.getElementById('user-password').focus();
                    return false;
                }
                
                return true;
            });
        </script>
        
        <style>
            .input-error {
                border-color: #dc3545 !important;
                box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
            }
            .error-message {
                min-height: 20px;
                margin-bottom: 10px;
            }
            .error-message .text-danger {
                font-size: 14px;
                display: block;
            }
            .input-password {
                padding-right: 50px !important;
            }
            .toggle-password {
                position: absolute;
                right: 18px;
                top: 50%;
                transform: translateY(-50%);
                color: #666666;
                font-size: 18px;
                cursor: pointer;
                z-index: 2;
                transition: opacity 0.3s ease;
                pointer-events: auto;
                user-select: none;
                display: inline-block;
                line-height: 1;
            }
            .toggle-password:hover {
                opacity: 0.7;
            }
            .input-wrapper {
                position: relative;
            }
        </style>
        
        <div class="security-note">
            ⚡ Protected Access - Authorized Personnel Only
        </div>
    </div>
</div>