BeepLogin

Overview

BeepLogin provides a comprehensive, ready-to-use login interface with nine distinct view types to match any application design. From simple username/password forms to complex social authentication layouts, BeepLogin adapts to your specific authentication needs while maintaining consistency and professional appearance.

Built on the BeepControl foundation, BeepLogin features automatic layout management, social media integration buttons, avatar and logo support, remember me functionality, and comprehensive theming. Perfect for desktop applications, admin panels, and any software requiring user authentication.

Key Features

View Types

Visual Preview

Simple View

Social View

Modern View

Basic Usage

// Create a basic login control
var loginControl = new BeepLogin
{
    ViewType = LoginViewType.Simple,
    Size = new Size(300, 300),
    Location = new Point(50, 50),
    LogoPath = "Resources/company-logo.svg",
    AvatarPath = "Resources/user-avatar.svg"
};

// Handle login event
loginControl.LoginClick += (sender, e) =>
{
    string username = loginControl.Username;
    string password = loginControl.Password;
    bool rememberMe = loginControl.RememberMe;
    
    if (AuthenticateUser(username, password))
    {
        if (rememberMe)
        {
            SaveCredentials(username);
        }
        
        MessageBox.Show("Login successful!", "Success");
        // Navigate to main application
        OpenMainWindow();
    }
    else
    {
        MessageBox.Show("Invalid credentials", "Login Failed");
    }
};

this.Controls.Add(loginControl);

// Create social login control
var socialLogin = new BeepLogin
{
    ViewType = LoginViewType.Social,
    Size = new Size(450, 500),
    Location = new Point(50, 50)
};

// Handle different authentication methods
socialLogin.LoginClick += OnStandardLogin;
socialLogin.GoogleLoginClick += OnGoogleLogin;
socialLogin.FacebookLoginClick += OnFacebookLogin;
socialLogin.TwitterLoginClick += OnTwitterLogin;

this.Controls.Add(socialLogin);

private void OnStandardLogin(object sender, EventArgs e)
{
    var login = sender as BeepLogin;
    // Standard username/password authentication
    if (ValidateCredentials(login.Username, login.Password))
    {
        CompleteLogin(login.Username, "Standard");
    }
}

private void OnGoogleLogin(object sender, EventArgs e)
{
    // Integrate with Google OAuth
    try
    {
        var googleUser = GoogleAuth.Authenticate();
        if (googleUser != null)
        {
            CompleteLogin(googleUser.Email, "Google");
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show($"Google login failed: {ex.Message}", "Error");
    }
}

private void OnFacebookLogin(object sender, EventArgs e)
{
    // Integrate with Facebook OAuth
    try
    {
        var facebookUser = FacebookAuth.Authenticate();
        if (facebookUser != null)
        {
            CompleteLogin(facebookUser.Email, "Facebook");
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show($"Facebook login failed: {ex.Message}", "Error");
    }
}

private void OnTwitterLogin(object sender, EventArgs e)
{
    // Integrate with Twitter OAuth
    try
    {
        var twitterUser = TwitterAuth.Authenticate();
        if (twitterUser != null)
        {
            CompleteLogin(twitterUser.ScreenName, "Twitter");
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show($"Twitter login failed: {ex.Message}", "Error");
    }
}

private void CompleteLogin(string userIdentifier, string authMethod)
{
    // Common login completion logic
    SessionManager.Instance.StartSession(userIdentifier, authMethod);
    this.Hide();
    new MainApplicationForm().Show();
}

public class LoginForm : Form
{
    private BeepLogin loginControl;
    private ComboBox viewSelector;

    public LoginForm()
    {
        InitializeLoginForm();
    }

    private void InitializeLoginForm()
    {
        this.Size = new Size(600, 700);
        this.Text = "Login Demo";
        this.StartPosition = FormStartPosition.CenterScreen;

        // View selector
        viewSelector = new ComboBox
        {
            DropDownStyle = ComboBoxStyle.DropDownList,
            Location = new Point(20, 20),
            Width = 150
        };

        // Populate with view types
        foreach (LoginViewType viewType in Enum.GetValues())
        {
            viewSelector.Items.Add(viewType);
        }
        viewSelector.SelectedIndex = 0;
        viewSelector.SelectedIndexChanged += OnViewTypeChanged;

        // Create login control
        loginControl = new BeepLogin
        {
            ViewType = LoginViewType.Simple,
            Location = new Point(20, 60),
            LogoPath = "Resources/logo.svg",
            AvatarPath = "Resources/avatar.svg"
        };

        // Set up events
        loginControl.LoginClick += OnLogin;
        loginControl.GoogleLoginClick += OnSocialLogin;
        loginControl.FacebookLoginClick += OnSocialLogin;
        loginControl.TwitterLoginClick += OnSocialLogin;

        this.Controls.AddRange(new Control[] { viewSelector, loginControl });
    }

    private void OnViewTypeChanged(object sender, EventArgs e)
    {
        if (viewSelector.SelectedItem is LoginViewType selectedView)
        {
            loginControl.ViewType = selectedView;
            
            // Adjust form size based on view type
            AdjustFormSize(selectedView);
        }
    }

    private void AdjustFormSize(LoginViewType viewType)
    {
        Size newSize = viewType switch
        {
            LoginViewType.Compact => new Size(600, 400),
            LoginViewType.Minimal => new Size(400, 450),
            LoginViewType.Social => new Size(550, 700),
            LoginViewType.SocialView2 => new Size(450, 600),
            LoginViewType.Modern => new Size(500, 500),
            LoginViewType.Avatar => new Size(400, 500),
            LoginViewType.Extended => new Size(600, 400),
            LoginViewType.Full => new Size(600, 550),
            _ => new Size(400, 450) // Simple
        };
        
        this.Size = newSize;
    }

    private void OnLogin(object sender, EventArgs e)
    {
        if (ValidateLogin(loginControl.Username, loginControl.Password))
        {
            this.DialogResult = DialogResult.OK;
            this.Close();
        }
        else
        {
            MessageBox.Show("Invalid credentials", "Login Failed", 
                          MessageBoxButtons.OK, MessageBoxIcon.Warning);
        }
    }

    private void OnSocialLogin(object sender, EventArgs e)
    {
        string provider = sender == loginControl.GoogleLoginClick ? "Google" :
                         sender == loginControl.FacebookLoginClick ? "Facebook" : "Twitter";
        
        MessageBox.Show($"Initiating {provider} login...", "Social Login");
        // Implement actual social login logic here
    }

    private bool ValidateLogin(string username, string password)
    {
        // Implement your authentication logic
        return !string.IsNullOrEmpty(username) && !string.IsNullOrEmpty(password);
    }
}

Properties

Core Properties

Visual Properties

LoginViewType Enumeration

Events

var loginControl = new BeepLogin();

// Standard login authentication
loginControl.LoginClick += async (sender, e) =>
{
    try
    {
        // Show loading state
        loginControl.Enabled = false;
        
        // Validate input
        if (string.IsNullOrWhiteSpace(loginControl.Username))
        {
            MessageBox.Show("Please enter your username or email.", "Validation Error");
            return;
        }
        
        if (string.IsNullOrWhiteSpace(loginControl.Password))
        {
            MessageBox.Show("Please enter your password.", "Validation Error");
            return;
        }
        
        // Attempt authentication
        var result = await AuthenticationService.LoginAsync(
            loginControl.Username, 
            loginControl.Password);
            
        if (result.Success)
        {
            // Handle remember me
            if (loginControl.RememberMe)
            {
                UserPreferences.SaveUsername(loginControl.Username);
            }
            
            // Login successful
            OnLoginSuccess(result.User);
        }
        else
        {
            MessageBox.Show(result.ErrorMessage, "Login Failed");
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show($"Login error: {ex.Message}", "Error");
    }
    finally
    {
        loginControl.Enabled = true;
    }
};

// Social authentication handlers
loginControl.GoogleLoginClick += async (sender, e) =>
{
    await HandleSocialLogin("Google", GoogleAuthProvider.Instance);
};

loginControl.FacebookLoginClick += async (sender, e) =>
{
    await HandleSocialLogin("Facebook", FacebookAuthProvider.Instance);
};

loginControl.TwitterLoginClick += async (sender, e) =>
{
    await HandleSocialLogin("Twitter", TwitterAuthProvider.Instance);
};

private async Task HandleSocialLogin(string provider, ISocialAuthProvider authProvider)
{
    try
    {
        loginControl.Enabled = false;
        
        var socialUser = await authProvider.AuthenticateAsync();
        if (socialUser != null)
        {
            var result = await AuthenticationService.SocialLoginAsync(provider, socialUser);
            if (result.Success)
            {
                OnLoginSuccess(result.User);
            }
            else
            {
                MessageBox.Show($"{provider} login failed: {result.ErrorMessage}", "Social Login Error");
            }
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show($"{provider} authentication failed: {ex.Message}", "Error");
    }
    finally
    {
        loginControl.Enabled = true;
    }
}

private void OnLoginSuccess(User user)
{
    // Store user session
    CurrentSession.User = user;
    
    // Navigate to main application
    this.Hide();
    var mainForm = new MainApplicationForm();
    mainForm.Show();
}

Examples

public class LoginForm : Form
{
    private BeepLogin loginControl;
    private ProgressBar progressBar;
    private Label statusLabel;
    private AuthenticationService authService;

    public User AuthenticatedUser { get; private set; }

    public LoginForm()
    {
        InitializeComponents();
        SetupValidation();
        LoadSavedCredentials();
    }

    private void InitializeComponents()
    {
        this.Text = "Application Login";
        this.Size = new Size(500, 600);
        this.StartPosition = FormStartPosition.CenterScreen;
        this.FormBorderStyle = FormBorderStyle.FixedDialog;
        this.MaximizeBox = false;

        authService = new AuthenticationService();

        // Create login control
        loginControl = new BeepLogin
        {
            ViewType = LoginViewType.Modern,
            Location = new Point(50, 50),
            Size = new Size(400, 400),
            LogoPath = "Resources/company-logo.svg"
        };

        // Progress bar for loading state
        progressBar = new ProgressBar
        {
            Location = new Point(50, 460),
            Size = new Size(400, 10),
            Style = ProgressBarStyle.Marquee,
            Visible = false
        };

        // Status label
        statusLabel = new Label
        {
            Location = new Point(50, 480),
            Size = new Size(400, 30),
            TextAlign = ContentAlignment.MiddleCenter,
            ForeColor = Color.Red
        };

        // Setup event handlers
        loginControl.LoginClick += OnLoginAttempt;
        loginControl.GoogleLoginClick += OnGoogleLogin;
        loginControl.FacebookLoginClick += OnFacebookLogin;

        this.Controls.AddRange(new Control[] 
        { 
            loginControl, progressBar, statusLabel 
        });
    }

    private void SetupValidation()
    {
        // Real-time validation
        var usernameTextBox = GetUsernameTextBox();
        var passwordTextBox = GetPasswordTextBox();

        if (usernameTextBox != null)
        {
            usernameTextBox.TextChanged += ValidateInput;
        }

        if (passwordTextBox != null)
        {
            passwordTextBox.TextChanged += ValidateInput;
        }
    }

    private void ValidateInput(object sender, EventArgs e)
    {
        statusLabel.Text = "";
        statusLabel.ForeColor = Color.Black;

        // Validate email format if it looks like an email
        if (loginControl.Username.Contains("@"))
        {
            if (!IsValidEmail(loginControl.Username))
            {
                statusLabel.Text = "Please enter a valid email address";
                statusLabel.ForeColor = Color.Red;
                return;
            }
        }

        // Password strength indicator
        if (!string.IsNullOrEmpty(loginControl.Password))
        {
            var strength = GetPasswordStrength(loginControl.Password);
            statusLabel.Text = $"Password strength: {strength}";
            statusLabel.ForeColor = strength switch
            {
                "Weak" => Color.Red,
                "Medium" => Color.Orange,
                "Strong" => Color.Green,
                _ => Color.Black
            };
        }
    }

    private async void OnLoginAttempt(object sender, EventArgs e)
    {
        if (!ValidateCredentials())
            return;

        SetLoadingState(true);

        try
        {
            var result = await authService.AuthenticateAsync(
                loginControl.Username, 
                loginControl.Password);

            if (result.IsSuccess)
            {
                AuthenticatedUser = result.User;

                // Save credentials if remember me is checked
                if (loginControl.RememberMe)
                {
                    SaveCredentials();
                }

                statusLabel.Text = "Login successful!";
                statusLabel.ForeColor = Color.Green;

                // Brief delay to show success message
                await Task.Delay(1000);

                this.DialogResult = DialogResult.OK;
                this.Close();
            }
            else
            {
                statusLabel.Text = result.ErrorMessage;
                statusLabel.ForeColor = Color.Red;

                // Clear password on failed attempt
                loginControl.Password = "";
            }
        }
        catch (Exception ex)
        {
            statusLabel.Text = "Login failed. Please try again.";
            statusLabel.ForeColor = Color.Red;
            
            // Log the actual error
          //  Console.WriteLine($"Login error: {ex.Message}");
        }
        finally
        {
            SetLoadingState(false);
        }
    }

    private async void OnGoogleLogin(object sender, EventArgs e)
    {
        SetLoadingState(true);
        statusLabel.Text = "Connecting to Google...";

        try
        {
            var googleResult = await GoogleAuthService.AuthenticateAsync();
            if (googleResult.IsSuccess)
            {
                var result = await authService.SocialAuthenticateAsync("Google", googleResult.Token);
                if (result.IsSuccess)
                {
                    AuthenticatedUser = result.User;
                    this.DialogResult = DialogResult.OK;
                    this.Close();
                }
                else
                {
                    statusLabel.Text = "Google login failed";
                    statusLabel.ForeColor = Color.Red;
                }
            }
        }
        catch (Exception ex)
        {
            statusLabel.Text = "Google authentication error";
            statusLabel.ForeColor = Color.Red;
        }
        finally
        {
            SetLoadingState(false);
        }
    }

    private async void OnFacebookLogin(object sender, EventArgs e)
    {
        // Similar implementation to Google login
        SetLoadingState(true);
        statusLabel.Text = "Connecting to Facebook...";

        try
        {
            var facebookResult = await FacebookAuthService.AuthenticateAsync();
            if (facebookResult.IsSuccess)
            {
                var result = await authService.SocialAuthenticateAsync("Facebook", facebookResult.Token);
                if (result.IsSuccess)
                {
                    AuthenticatedUser = result.User;
                    this.DialogResult = DialogResult.OK;
                    this.Close();
                }
                else
                {
                    statusLabel.Text = "Facebook login failed";
                    statusLabel.ForeColor = Color.Red;
                }
            }
        }
        catch (Exception ex)
        {
            statusLabel.Text = "Facebook authentication error";
            statusLabel.ForeColor = Color.Red;
        }
        finally
        {
            SetLoadingState(false);
        }
    }

    private bool ValidateCredentials()
    {
        if (string.IsNullOrWhiteSpace(loginControl.Username))
        {
            statusLabel.Text = "Please enter your username or email";
            statusLabel.ForeColor = Color.Red;
            return false;
        }

        if (string.IsNullOrWhiteSpace(loginControl.Password))
        {
            statusLabel.Text = "Please enter your password";
            statusLabel.ForeColor = Color.Red;
            return false;
        }

        if (loginControl.Username.Contains("@") && !IsValidEmail(loginControl.Username))
        {
            statusLabel.Text = "Please enter a valid email address";
            statusLabel.ForeColor = Color.Red;
            return false;
        }

        return true;
    }

    private void SetLoadingState(bool isLoading)
    {
        loginControl.Enabled = !isLoading;
        progressBar.Visible = isLoading;
        
        if (!isLoading)
        {
            statusLabel.Text = "";
        }
    }

    private void LoadSavedCredentials()
    {
        var savedUsername = UserPreferences.GetSavedUsername();
        if (!string.IsNullOrEmpty(savedUsername))
        {
            loginControl.Username = savedUsername;
            loginControl.RememberMe = true;
        }
    }

    private void SaveCredentials()
    {
        UserPreferences.SaveUsername(loginControl.Username);
    }

    // Helper methods
    private BeepTextBox GetUsernameTextBox() { /* Find username textbox in loginControl */ return null; }
    private BeepTextBox GetPasswordTextBox() { /* Find password textbox in loginControl */ return null; }
    private bool IsValidEmail(string email) { /* Email validation logic */ return true; }
    private string GetPasswordStrength(string password) { /* Password strength logic */ return "Medium"; }
}

Theming

BeepLogin provides specialized theming with dedicated login-specific theme properties:

var loginControl = new BeepLogin
{
    Theme = "DarkTheme",
    ViewType = LoginViewType.Modern
};

// Theme automatically applies specialized login colors:
// - LoginPopoverBackgroundColor: Main login panel background
// - LoginTitleColor: Title and label text
// - LoginSubtitleColor: Subtitle and secondary text
// - LoginLinkColor: Forgot password and register links
// - LoginButtonBackgroundColor: Login and social buttons
// - LoginButtonTextColor: Button text
// - LoginLogoBackgroundColor: Logo and avatar backgrounds

// Apply theme manually if needed
loginControl.ApplyTheme();

Login Theme Properties

• LoginPopoverBackgroundColor - Main login panel background
• LoginTitleColor - Primary text (titles, labels, input text)
• LoginSubtitleColor - Secondary text (subtitles, descriptions)
• LoginLinkColor - Hyperlinks (forgot password, register)
• LoginButtonBackgroundColor - All button backgrounds
• LoginButtonTextColor - All button text
• LoginLogoBackgroundColor - Logo and avatar containers

// Create custom theme for login
var customTheme = new BeepTheme
{
    LoginPopoverBackgroundColor = Color.FromArgb(248, 250, 252),
    LoginTitleColor = Color.FromArgb(30, 41, 59),
    LoginSubtitleColor = Color.FromArgb(100, 116, 139),
    LoginLinkColor = Color.FromArgb(59, 130, 246),
    LoginButtonBackgroundColor = Color.FromArgb(59, 130, 246),
    LoginButtonTextColor = Color.White,
    LoginLogoBackgroundColor = Color.FromArgb(241, 245, 249)
};

// Apply to login control
BeepThemesManager.AddTheme("CustomLogin", customTheme);
loginControl.Theme = "CustomLogin";
loginControl.ApplyTheme();

Best Practices

🔐 Security

• Password handling: Never store plain text passwords; always hash and salt
• Input validation: Validate credentials both client-side and server-side
• Rate limiting: Implement login attempt rate limiting to prevent brute force attacks
• Secure communication: Always use HTTPS for authentication

🎨 User Experience

• View selection: Choose view types that match your application's design language
• Error messaging: Provide clear, helpful error messages without revealing security details
• Loading states: Show progress indicators during authentication
• Remember me: Implement secure credential storage for remember me functionality

📱 Layout Guidelines

• Simple/Minimal: Best for desktop applications with simple authentication
• Social views: Ideal for applications with social media integration
• Modern: Perfect for contemporary business applications
• Extended/Full: Suitable for complex enterprise applications

🔗 Integration

• Social authentication: Properly implement OAuth flows for social providers
• Logo branding: Use high-quality SVG logos for crisp appearance
• Avatar support: Allow users to customize their avatar images
• Form validation: Implement real-time validation with helpful feedback