@page "/"
@using System.ComponentModel.DataAnnotations
<style>
.login-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2rem;
position: relative;
overflow: hidden;
}
.login-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: moveBackground 20s linear infinite;
}
@@keyframes moveBackground {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(50px, 50px);
}
}
.login-card {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 3rem;
width: 100%;
max-width: 460px;
position: relative;
z-index: 1;
animation: slideUp 0.6s ease-out;
}
@@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.logo-circle {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
animation: pulse 2s ease-in-out infinite;
}
@@keyframes pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}
}
.logo-circle svg {
width: 40px;
height: 40px;
color: white;
}
.login-header h1 {
font-size: 2rem;
font-weight: 700;
color: #1a202c;
margin: 0 0 0.5rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.login-header p {
color: #718096;
font-size: 0.95rem;
margin: 0;
}
.login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-size: 0.875rem;
font-weight: 600;
color: #2d3748;
}
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.input-icon {
position: absolute;
left: 1rem;
width: 20px;
height: 20px;
color: #a0aec0;
pointer-events: none;
transition: color 0.3s ease;
}
.input-wrapper:focus-within .input-icon {
color: #667eea;
}
.form-input {
width: 100%;
padding: 0.875rem 1rem 0.875rem 3rem;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 0.95rem;
color: #2d3748;
background: white;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-input::placeholder {
color: #cbd5e0;
}
.toggle-password {
position: absolute;
right: 1rem;
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #a0aec0;
transition: color 0.3s ease;
}
.toggle-password:hover {
color: #667eea;
}
.toggle-password svg {
width: 20px;
height: 20px;
}
.validation-message {
color: #e53e3e;
font-size: 0.8rem;
margin-top: 0.25rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: -0.5rem;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #4a5568;
cursor: pointer;
}
.checkbox-wrapper input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #667eea;
}
.forgot-link {
font-size: 0.875rem;
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.forgot-link:hover {
color: #764ba2;
}
.error-alert {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: #fff5f5;
border: 1px solid #feb2b2;
border-radius: 12px;
color: #c53030;
font-size: 0.875rem;
animation: shake 0.4s ease-in-out;
}
@@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.error-alert svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.submit-button {
width: 100%;
padding: 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.submit-button:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
}
.submit-button:active:not(:disabled) {
transform: translateY(0);
}
.submit-button:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.submit-button svg {
width: 20px;
height: 20px;
}
.spinner {
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@@keyframes spin {
to {
transform: rotate(360deg);
}
}
.divider {
display: flex;
align-items: center;
margin: 2rem 0 1.5rem;
color: #a0aec0;
font-size: 0.875rem;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background: #e2e8f0;
}
.divider span {
padding: 0 1rem;
}
.social-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.social-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 0.5rem;
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
color: #4a5568;
cursor: pointer;
transition: all 0.3s ease;
}
.social-button:hover {
border-color: #667eea;
background: #f7fafc;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.social-button svg {
width: 24px;
height: 24px;
}
.signup-prompt {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #e2e8f0;
color: #718096;
font-size: 0.95rem;
}
.signup-prompt a {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.signup-prompt a:hover {
color: #764ba2;
}
@@media (max-width: 640px) {
.login-card {
padding: 2rem 1.5rem;
}
.login-header h1 {
font-size: 1.75rem;
}
.social-buttons {
grid-template-columns: 1fr;
}
}
</style>
<div class="login-container">
<div class="login-card">
<div class="login-header">
<div class="logo-circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<h1>Welcome Back</h1>
<p>Sign in to continue to your account</p>
</div>
<EditForm Model="@loginModel" OnValidSubmit="@HandleLogin" class="login-form">
<DataAnnotationsValidator />
<div class="form-group">
<label for="email">Email Address</label>
<div class="input-wrapper">
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
<InputText id="email" @bind-Value="loginModel.Email" class="form-input" placeholder="you@example.com" />
</div>
<ValidationMessage For="@(() => loginModel.Email)" class="validation-message" />
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-wrapper">
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
<InputText id="password" type="@passwordInputType" @bind-Value="loginModel.Password" class="form-input" placeholder="••••••••" />
<button type="button" class="toggle-password" @onclick="TogglePasswordVisibility">
@if (showPassword)
{
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
<line x1="1" y1="1" x2="23" y2="23"></line>
</svg>
}
else
{
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
}
</button>
</div>
<ValidationMessage For="@(() => loginModel.Password)" class="validation-message" />
</div>
<div class="form-options">
<label class="checkbox-wrapper">
<InputCheckbox @bind-Value="loginModel.RememberMe" />
<span>Remember me</span>
</label>
<a href="/forgot-password" class="forgot-link">Forgot password?</a>
</div>
@if (!string.IsNullOrEmpty(errorMessage))
{
<div class="error-alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<span>@errorMessage</span>
</div>
}
<button type="submit" class="submit-button" disabled="@isLoading">
@if (isLoading)
{
<span class="spinner"></span>
<span>Signing in...</span>
}
else
{
<span>Sign In</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
}
</button>
</EditForm>
<div class="divider">
<span>or continue with</span>
</div>
<div class="social-buttons">
<button class="social-button">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
</svg>
Google
</button>
<button class="social-button">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#1877F2">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
Facebook
</button>
<button class="social-button">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
GitHub
</button>
</div>
<div class="signup-prompt">
Don't have an account? <a href="/register">Sign up</a>
</div>
</div>
</div>
@code {
private LoginModel loginModel = new();
private bool showPassword = false;
private bool isLoading = false;
private string errorMessage = string.Empty;
private string passwordInputType => showPassword ? "text" : "password";
private void TogglePasswordVisibility()
{
showPassword = !showPassword;
}
private async Task HandleLogin()
{
isLoading = true;
errorMessage = string.Empty;
try
{
// Simulate API call - REPLACE THIS with your actual authentication logic
await Task.Delay(1500);
// Example: For demo purposes only
errorMessage = "Invalid email or password. Please try again.";
// In production, use something like:
// var result = await SignInManager.PasswordSignInAsync(loginModel.Email, loginModel.Password, loginModel.RememberMe, false);
// if (result.Succeeded) Navigation.NavigateTo("/dashboard");
}
catch (Exception ex)
{
errorMessage = "An error occurred. Please try again later." + ex.Message;
}
finally
{
isLoading = false;
}
}
public class LoginModel
{
[Required(ErrorMessage = "Email is required")]
[EmailAddress(ErrorMessage = "Invalid email address")]
public string Email { get; set; } = string.Empty;
[Required(ErrorMessage = "Password is required")]
[MinLength(6, ErrorMessage = "Password must be at least 6 characters")]
public string Password { get; set; } = string.Empty;
public bool RememberMe { get; set; }
}
}