kjh2064
40cffb3beb
TaxBaik CI/CD / build-and-deploy (push) Successful in 2m26s
Problem: JavaScript login form saved tokens to localStorage but didn't notify CustomAuthenticationStateProvider, causing [Authorize] pages to remain in 'loading' state indefinitely. The provider only reads tokens when: 1. GetAuthenticationStateAsync() is called (page load) 2. NotifyAuthenticationStateChanged() is triggered (UI updates) But JavaScript login didn't trigger either, leaving the authentication state stale. Solution: Convert AdminLoginForm from HTML+JavaScript to pure Blazor component. Now the login flow is: 1. User enters credentials in Blazor form 2. HttpClient POST to /api/auth/login 3. Save tokens to localStorage 4. Call CustomAuthenticationStateProvider.LoginAsync() directly 5. Blazor detects auth state change and re-evaluates [Authorize] pages 6. Dashboard [Authorize] page renders successfully Result: Immediate authentication state update, no loading timeout on protected pages. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
197 lines
5.8 KiB
JavaScript
197 lines
5.8 KiB
JavaScript
import ApexCharts from '../thirdparty/apexchartsWrapper.js';
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
'use strict';
|
|
|
|
// Basic Box & Whisker Chart
|
|
if (document.getElementById('basic-box-whisker-chart')) {
|
|
const basicBoxOptions = {
|
|
series: [{
|
|
type: 'boxPlot',
|
|
data: [
|
|
{
|
|
x: 'Jan 2015',
|
|
y: [54, 66, 69, 75, 88]
|
|
},
|
|
{
|
|
x: 'Jan 2016',
|
|
y: [43, 65, 69, 76, 81]
|
|
},
|
|
{
|
|
x: 'Jan 2017',
|
|
y: [31, 39, 45, 51, 59]
|
|
},
|
|
{
|
|
x: 'Jan 2018',
|
|
y: [39, 46, 55, 65, 71]
|
|
},
|
|
{
|
|
x: 'Jan 2019',
|
|
y: [29, 31, 35, 39, 44]
|
|
},
|
|
{
|
|
x: 'Jan 2020',
|
|
y: [41, 49, 58, 61, 67]
|
|
},
|
|
{
|
|
x: 'Jan 2021',
|
|
y: [54, 59, 66, 71, 88]
|
|
}
|
|
]
|
|
}],
|
|
chart: {
|
|
type: 'boxPlot',
|
|
height: 350,
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
plotOptions: {
|
|
boxPlot: {
|
|
colors: {
|
|
upper: window.colorMap.primary[500].hex,
|
|
lower: window.colorMap.primary[300].hex
|
|
}
|
|
}
|
|
},
|
|
stroke: {
|
|
colors: [window.colorMap.bootstrapVars.bodyColor.hex]
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
padding: {
|
|
left: -5,
|
|
right: 0,
|
|
top: -20,
|
|
bottom: -5
|
|
},
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark'
|
|
}
|
|
};
|
|
|
|
const basicBoxChart = new ApexCharts(
|
|
document.getElementById('basic-box-whisker-chart'),
|
|
basicBoxOptions
|
|
);
|
|
basicBoxChart.render();
|
|
}
|
|
|
|
// Horizontal Boxplot Chart
|
|
if (document.getElementById('horizontal-boxplot-chart')) {
|
|
const horizontalBoxplotOptions = {
|
|
series: [{
|
|
data: [
|
|
{
|
|
x: 'Category A',
|
|
y: [54, 66, 69, 75, 88]
|
|
},
|
|
{
|
|
x: 'Category B',
|
|
y: [43, 65, 69, 76, 81]
|
|
},
|
|
{
|
|
x: 'Category C',
|
|
y: [31, 39, 45, 51, 59]
|
|
},
|
|
{
|
|
x: 'Category D',
|
|
y: [39, 46, 55, 65, 71]
|
|
},
|
|
{
|
|
x: 'Category E',
|
|
y: [29, 31, 35, 39, 44]
|
|
},
|
|
{
|
|
x: 'Category F',
|
|
y: [41, 49, 58, 61, 67]
|
|
},
|
|
{
|
|
x: 'Category G',
|
|
y: [54, 59, 66, 71, 88]
|
|
}
|
|
]
|
|
}],
|
|
chart: {
|
|
type: 'boxPlot',
|
|
height: 350,
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
barHeight: '50%'
|
|
},
|
|
boxPlot: {
|
|
colors: {
|
|
upper: window.colorMap.primary[500].hex,
|
|
lower: window.colorMap.primary[300].hex
|
|
},
|
|
horizontal: true
|
|
}
|
|
},
|
|
stroke: {
|
|
colors: [window.colorMap.bootstrapVars.bodyColor.hex]
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: window.colorMap.bootstrapVars.bodyColor.hex
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.08),
|
|
strokeDashArray: 5,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
theme: 'dark'
|
|
}
|
|
};
|
|
|
|
const horizontalBoxplotChart = new ApexCharts(
|
|
document.getElementById('horizontal-boxplot-chart'),
|
|
horizontalBoxplotOptions
|
|
);
|
|
horizontalBoxplotChart.render();
|
|
}
|
|
});
|