413 lines
13 KiB
Plaintext
413 lines
13 KiB
Plaintext
@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: 1.5rem;
|
|
}
|
|
|
|
.page-header h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.page-header p {
|
|
font-size: 0.8125rem;
|
|
color: #64748b;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ===== FORM LABELS ===== */
|
|
.form-label {
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
margin-bottom: 0.375rem;
|
|
display: block;
|
|
}
|
|
|
|
.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.75rem;
|
|
color: #64748b;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.forgot-link:hover {
|
|
color: #6366F1;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ===== REMEMBER ROW ===== */
|
|
.remember-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* ===== 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;
|
|
}
|
|
|
|
/* ===== AUTH LINK ===== */
|
|
.auth-link {
|
|
color: #6366F1;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.auth-link:hover {
|
|
color: #4f51d4;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ===== GOOGLE BUTTON ===== */
|
|
.btn-google {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1rem;
|
|
background: transparent;
|
|
color: #6366F1;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
border: 1.5px solid #c7c3ff;
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
font-family: "Poppins", sans-serif;
|
|
}
|
|
|
|
.btn-google:hover {
|
|
border-color: #6366F1;
|
|
background: #f5f3ff;
|
|
}
|
|
|
|
/* ===== MISC ===== */
|
|
.w-100 { width: 100%; }
|
|
.mb-2 { margin-bottom: 0.5rem; }
|
|
.mb-4 { margin-bottom: 1rem; }
|
|
.mb-5 { margin-bottom: 1.25rem; }
|
|
.mb-6 { margin-bottom: 1.5rem; }
|
|
.mt-4 { margin-top: 1rem; }
|
|
.text-center { text-align: center; }
|
|
.text-muted { 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))" Class="w-100">
|
|
|
|
<span class="form-label">Email Address</span>
|
|
<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)"
|
|
Class="mb-4"
|
|
Style="border-radius: 0.5rem;" />
|
|
|
|
<div class="form-label-row">
|
|
<span class="form-label">Password</span>
|
|
<MudLink Href="/account/forgot-password" Class="forgot-link">Forgot password?</MudLink>
|
|
</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)"
|
|
Class="mb-5"
|
|
Style="border-radius: 0.5rem;" />
|
|
|
|
<div class="remember-row mb-5">
|
|
<MudCheckBox T="bool"
|
|
@bind-Value="rememberMe"
|
|
Label="Remember me"
|
|
Color="Color.Primary"
|
|
Dense="true" />
|
|
</div>
|
|
|
|
<MudButton Variant="Variant.Filled"
|
|
Color="Color.Primary"
|
|
Size="Size.Large"
|
|
FullWidth="true"
|
|
Disabled="!success || isProcessing"
|
|
OnClick="HandleLogin"
|
|
Style="text-transform:none; border-radius: 0.5rem; height: 48px; font-weight: 600;">
|
|
@if (isProcessing)
|
|
{
|
|
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" Color="Color.Inherit" />
|
|
<span class="ms-2">Signing in...</span>
|
|
}
|
|
else
|
|
{
|
|
<span>Sign In</span>
|
|
<svg class="ms-2" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="13 7 18 12 13 17" />
|
|
<polyline points="6 12 18 12" />
|
|
</svg>
|
|
}
|
|
</MudButton>
|
|
|
|
@if (IdentityOptions.Value.SsoFirebase.IsUsed)
|
|
{
|
|
<div class="divider-or">
|
|
<span>Or continue with</span>
|
|
</div>
|
|
|
|
<MudButton Variant="Variant.Outlined"
|
|
FullWidth="true"
|
|
Size="Size.Large"
|
|
Disabled="isProcessing"
|
|
OnClick="HandleFirebaseGoogleLogin"
|
|
StartIcon="@Icons.Custom.Brands.Google"
|
|
Style="text-transform:none; border-radius: 0.5rem; height: 44px; border: 1.5px solid #c7c3ff; color: #6366F1; font-weight: 500;"
|
|
Class="mb-2">
|
|
Sign in with Google
|
|
</MudButton>
|
|
}
|
|
</MudForm>
|
|
|
|
<div class="text-center mt-4">
|
|
<MudText Typo="Typo.body2">
|
|
Don't have an account?
|
|
<MudLink Href="/account/register" Style="color: #6366F1; font-weight: 600; margin-left: 0.25rem;">Create one</MudLink>
|
|
</MudText>
|
|
</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> |