initial commit
This commit is contained in:
@@ -0,0 +1,451 @@
|
||||
@page "/account/login"
|
||||
@layout AuthenticationLayout
|
||||
@using Indotalent.Shared.Consts
|
||||
@using Microsoft.JSInterop
|
||||
@using Indotalent.Infrastructure.Authentication.Identity
|
||||
@using Microsoft.Extensions.Options
|
||||
@inject IJSRuntime JSRuntime
|
||||
@inject IOptions<IdentitySettingsModel> IdentityOptions
|
||||
@inject NavigationManager Navigation
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<PageTitle>Sign In - @GlobalConsts.AppInitial</PageTitle>
|
||||
|
||||
<style>
|
||||
/* ===== PAGE HEADER ===== */
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1E293B;
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 0.875rem;
|
||||
color: #94A3B8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===== FORM LABEL ===== */
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.form-label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.form-label-row .form-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.forgot-link {
|
||||
font-size: 0.8125rem;
|
||||
color: #8B5CF6;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.forgot-link:hover {
|
||||
color: #7C3AED;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ===== REMEMBER ME ROW ===== */
|
||||
.remember-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* ===== SIGN IN BUTTON ===== */
|
||||
.btn-signin {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.75rem;
|
||||
background: #8B5CF6;
|
||||
color: #ffffff;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
width: 100%;
|
||||
font-family: "Poppins", sans-serif;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.btn-signin:hover:not(:disabled) {
|
||||
background: #7C3AED;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-signin:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ===== DIVIDER ===== */
|
||||
.divider-or {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.divider-or::before,
|
||||
.divider-or::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: #E2E8F0;
|
||||
}
|
||||
|
||||
.divider-or span {
|
||||
font-size: 0.75rem;
|
||||
color: #94A3B8;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* ===== GOOGLE BUTTON ===== */
|
||||
.btn-google {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.625rem 1rem;
|
||||
background: transparent;
|
||||
color: #1E293B;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
border: 1.5px solid #E2E8F0;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
font-family: "Poppins", sans-serif;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.btn-google:hover:not(:disabled) {
|
||||
border-color: #8B5CF6;
|
||||
background: rgba(139, 92, 246, 0.03);
|
||||
}
|
||||
|
||||
.btn-google:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-google svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
/* ===== FOOTER LINK ===== */
|
||||
.auth-link {
|
||||
color: #8B5CF6;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.auth-link:hover {
|
||||
color: #7C3AED;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
color: #64748B;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="page-header">
|
||||
<h2>Sign In</h2>
|
||||
<p>Enter your credentials to access your account</p>
|
||||
</div>
|
||||
|
||||
<MudForm @ref="form"
|
||||
@bind-IsValid="@success"
|
||||
Validation="@(new Func<EditContext, Task<bool>>(ValidateForm))">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||
<div>
|
||||
<label class="form-label" for="email-field">Email Address</label>
|
||||
<MudTextField T="string"
|
||||
@bind-Value="model.Email"
|
||||
Variant="Variant.Outlined"
|
||||
Placeholder="you@company.com"
|
||||
Margin="Margin.Dense"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Email"
|
||||
Required="true"
|
||||
For="@(() => model.Email)"
|
||||
id="email-field" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="form-label-row">
|
||||
<label class="form-label" for="password-field">Password</label>
|
||||
<a class="forgot-link" href="/account/forgot-password">Forgot password?</a>
|
||||
</div>
|
||||
<MudTextField T="string"
|
||||
@bind-Value="model.Password"
|
||||
Variant="Variant.Outlined"
|
||||
Placeholder="Enter your password"
|
||||
Margin="Margin.Dense"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Lock"
|
||||
InputType="@(showPassword ? InputType.Text : InputType.Password)"
|
||||
AdornmentEndIcon="@(showPassword ? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
|
||||
OnAdornmentEndClick="() => showPassword = !showPassword"
|
||||
Required="true"
|
||||
For="@(() => model.Password)"
|
||||
id="password-field" />
|
||||
</div>
|
||||
|
||||
<div class="remember-row">
|
||||
<MudCheckBox T="bool"
|
||||
@bind-Value="rememberMe"
|
||||
Label="Remember me"
|
||||
Color="Color.Primary"
|
||||
Dense="true" />
|
||||
</div>
|
||||
|
||||
<button class="btn-signin" type="button" disabled="@(!success || isProcessing)" @onclick="HandleLogin">
|
||||
@if (isProcessing)
|
||||
{
|
||||
<svg class="spinner" style="width: 1rem; height: 1rem;" fill="none" viewBox="0 0 24 24">
|
||||
<circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||||
<path style="opacity: 0.75;" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
|
||||
</svg>
|
||||
<span>Signing in...</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>Sign In</span>
|
||||
<svg style="width: 1rem; height: 1rem;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (IdentityOptions.Value.SsoFirebase.IsUsed)
|
||||
{
|
||||
<div class="divider-or"><span>Or continue with</span></div>
|
||||
|
||||
<button class="btn-google" type="button" disabled="@isProcessing" @onclick="HandleFirebaseGoogleLogin">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
</svg>
|
||||
Sign in with Google
|
||||
</button>
|
||||
}
|
||||
</MudForm>
|
||||
|
||||
<div class="auth-footer">
|
||||
Don't have an account?
|
||||
<a class="auth-link" href="/account/register">Create one</a>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private MudForm form = default!;
|
||||
private bool success;
|
||||
private bool isProcessing;
|
||||
private bool showPassword;
|
||||
private bool rememberMe;
|
||||
private LoginModel model = new();
|
||||
|
||||
private async Task<bool> ValidateForm(EditContext context) => await Task.FromResult(true);
|
||||
|
||||
private async Task HandleLogin()
|
||||
{
|
||||
await form.Validate();
|
||||
if (!success) return;
|
||||
isProcessing = true;
|
||||
StateHasChanged();
|
||||
|
||||
var result = await JSRuntime.InvokeAsync<ApiJSRuntimeResponse>("apiAccountSignIn", model.Email, model.Password, rememberMe);
|
||||
ProcessLoginResult(result);
|
||||
}
|
||||
|
||||
private async Task HandleFirebaseGoogleLogin()
|
||||
{
|
||||
isProcessing = true;
|
||||
StateHasChanged();
|
||||
|
||||
var firebaseUser = await JSRuntime.InvokeAsync<FirebaseUserResponse>("signInWithGoogle");
|
||||
|
||||
if (firebaseUser == null || string.IsNullOrEmpty(firebaseUser.Email))
|
||||
{
|
||||
Snackbar.Add("Google Sign-In failed or cancelled.", Severity.Error);
|
||||
isProcessing = false;
|
||||
return;
|
||||
}
|
||||
|
||||
var checkResult = await JSRuntime.InvokeAsync<ActiveCheckResponse>("apiCheckActiveUser", firebaseUser.Email);
|
||||
bool openForPublic = IdentityOptions.Value.SsoFirebase.OpenForPublic;
|
||||
|
||||
if (checkResult.Exists)
|
||||
{
|
||||
if (checkResult.IsActive)
|
||||
{
|
||||
await ExecuteSsoSignIn(firebaseUser.Email);
|
||||
}
|
||||
else
|
||||
{
|
||||
Snackbar.Add("Account is registered but not active.", Severity.Warning);
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
var registerResult = await JSRuntime.InvokeAsync<ApiJSRuntimeResponse>(
|
||||
"apiAccountSignUpSso",
|
||||
firebaseUser.Email,
|
||||
firebaseUser.Email,
|
||||
openForPublic
|
||||
);
|
||||
|
||||
if (registerResult.Status == 200)
|
||||
{
|
||||
if (openForPublic)
|
||||
{
|
||||
await ExecuteSsoSignIn(firebaseUser.Email);
|
||||
}
|
||||
else
|
||||
{
|
||||
Snackbar.Add("Registration successful. Please wait for admin approval.", Severity.Info);
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
Snackbar.Add("Failed to auto-register account.", Severity.Error);
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async Task ExecuteSsoSignIn(string email)
|
||||
{
|
||||
var result = await JSRuntime.InvokeAsync<ApiJSRuntimeResponse>("apiAccountSsoSignIn", email);
|
||||
ProcessLoginResult(result);
|
||||
}
|
||||
|
||||
private void ProcessLoginResult(ApiJSRuntimeResponse result)
|
||||
{
|
||||
if (result.Status == 200)
|
||||
{
|
||||
Snackbar.Add(result.Title ?? "Login successful!", Severity.Success);
|
||||
Task.Run(async () =>
|
||||
{
|
||||
await Task.Delay(500);
|
||||
Navigation.NavigateTo("/home", forceLoad: true);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
Snackbar.Add(result.Title ?? "Sign in failed.", Severity.Error);
|
||||
isProcessing = false;
|
||||
}
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private class ApiJSRuntimeResponse { public int? Status { get; set; } public string? Title { get; set; } public string? Message { get; set; } }
|
||||
private class FirebaseUserResponse { public string? Email { get; set; } }
|
||||
private class ActiveCheckResponse { public bool Exists { get; set; } public bool IsActive { get; set; } }
|
||||
private class LoginModel { public string Email { get; set; } = ""; public string Password { get; set; } = ""; }
|
||||
}
|
||||
|
||||
<script>
|
||||
window.apiAccountSignIn = async (email, password, rememberMe) => {
|
||||
try {
|
||||
const response = await fetch('/api/account/signin', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password, rememberMe }),
|
||||
credentials: 'include'
|
||||
});
|
||||
const result = await response.json();
|
||||
return { status: response.status, title: result.title };
|
||||
} catch (error) {
|
||||
return { status: 500, title: 'Network error' };
|
||||
}
|
||||
};
|
||||
|
||||
window.apiCheckActiveUser = async (email) => {
|
||||
try {
|
||||
const response = await fetch(`/api/account/active-user-exists?email=${encodeURIComponent(email)}`);
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
return { exists: false, isActive: false };
|
||||
}
|
||||
};
|
||||
|
||||
window.apiAccountSignUpSso = async (email, fullName, isOpenForPublic) => {
|
||||
try {
|
||||
const response = await fetch('/api/account/signup', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
email: email,
|
||||
fullName: fullName,
|
||||
password: 'SSO_AUTO_GENERATED_PASSWORD_123!',
|
||||
isActive: isOpenForPublic,
|
||||
emailConfirmed: isOpenForPublic
|
||||
})
|
||||
});
|
||||
const result = await response.json();
|
||||
return { status: response.status, message: result.message };
|
||||
} catch (error) {
|
||||
return { status: 500 };
|
||||
}
|
||||
};
|
||||
|
||||
window.apiAccountSsoSignIn = async (email) => {
|
||||
try {
|
||||
const response = await fetch(`/api/account/signin-sso?email=${encodeURIComponent(email)}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include'
|
||||
});
|
||||
const result = await response.json();
|
||||
return { status: response.status, title: result.title };
|
||||
} catch (error) {
|
||||
return { status: 500, title: 'SSO Network error' };
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,74 @@
|
||||
using Indotalent.ConfigFrontEnd.Service;
|
||||
using Indotalent.Data.Entities;
|
||||
using Indotalent.Infrastructure.Authentication.Identity;
|
||||
using MediatR;
|
||||
using Microsoft.AspNetCore.Identity;
|
||||
using Microsoft.Extensions.Options;
|
||||
|
||||
namespace Indotalent.Features.Account.Login.Cqrs;
|
||||
|
||||
public class LoginRequest
|
||||
{
|
||||
public string Email { get; set; } = string.Empty;
|
||||
public string Password { get; set; } = string.Empty;
|
||||
public bool RememberMe { get; set; }
|
||||
}
|
||||
|
||||
public class LoginResponse
|
||||
{
|
||||
public bool Succeeded { get; set; }
|
||||
public string Message { get; set; } = string.Empty;
|
||||
public bool IsNotAllowed { get; set; }
|
||||
public string? Token { get; set; }
|
||||
public string? RefreshToken { get; set; }
|
||||
}
|
||||
|
||||
public record LoginCommand(LoginRequest Data) : IRequest<LoginResponse>;
|
||||
|
||||
public class LoginHandler : IRequestHandler<LoginCommand, LoginResponse>
|
||||
{
|
||||
private readonly SignInManager<ApplicationUser> _signInManager;
|
||||
private readonly UserManager<ApplicationUser> _userManager;
|
||||
private readonly JwtSettingsModel _jwtSettings;
|
||||
|
||||
public LoginHandler(
|
||||
SignInManager<ApplicationUser> signInManager,
|
||||
UserManager<ApplicationUser> userManager,
|
||||
IOptions<JwtSettingsModel> jwtSettings)
|
||||
{
|
||||
_signInManager = signInManager;
|
||||
_userManager = userManager;
|
||||
_jwtSettings = jwtSettings.Value;
|
||||
}
|
||||
|
||||
public async Task<LoginResponse> Handle(LoginCommand request, CancellationToken cancellationToken)
|
||||
{
|
||||
var user = await _userManager.FindByEmailAsync(request.Data.Email);
|
||||
if (user == null) return new LoginResponse { Succeeded = false, Message = "Invalid credentials" };
|
||||
|
||||
var result = await _signInManager.PasswordSignInAsync(user, request.Data.Password, request.Data.RememberMe, false);
|
||||
|
||||
if (result.Succeeded)
|
||||
{
|
||||
var token = JwtService.GenerateNewJwt(user, _jwtSettings);
|
||||
|
||||
var refreshToken = Guid.NewGuid().ToString().Replace("-", "");
|
||||
|
||||
user.RefreshToken = refreshToken;
|
||||
user.LastLoginAt = DateTime.Now;
|
||||
await _userManager.UpdateAsync(user);
|
||||
|
||||
return new LoginResponse
|
||||
{
|
||||
Succeeded = true,
|
||||
Message = "Login successful",
|
||||
Token = token,
|
||||
RefreshToken = refreshToken
|
||||
};
|
||||
}
|
||||
|
||||
return new LoginResponse { Succeeded = false, Message = "Invalid credentials" };
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user