fix: implement Blazor-native login form to properly update authentication state

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>
2026-07-03 13:03:53 +09:00
parent 041d3cae96
commit 40cffb3beb
326 changed files with 327714 additions and 47 deletions
@@ -0,0 +1,161 @@
+
+import ApexCharts from '../thirdparty/apexchartsWrapper.js';
+
+document.addEventListener('DOMContentLoaded', function() {
+    'use strict';
+
+    // Basic Radar Chart
+    if (document.getElementById('basic-radar-chart')) {
+        const basicRadarOptions = {
+            series: [{
+                name: 'Basic Radar',
+                data: [80, 50, 30, 40, 100, 20],
+            }],
+            chart: {
+                height: 350,
+                type: 'radar',
+                toolbar: {
+                    show: true
+                }
+            },
+            xaxis: {
+                categories: ['January', 'February', 'March', 'April', 'May', 'June'],
+            },
+            colors: [window.colorMap.primary[500].hex],
+            tooltip: {
+                y: {
+                    formatter: function(val) {
+                        return val;
+                    }
+                }
+            },
+            markers: {
+                size: 4,
+                colors: [window.colorMap.primary[500].hex],
+                strokeColors: '#fff',
+                strokeWidth: 2
+            },
+        };
+
+        const basicRadarChart = new ApexCharts(
+            document.getElementById('basic-radar-chart'),
+            basicRadarOptions
+        );
+        basicRadarChart.render();
+    }
+
+    // Multi-series Radar Chart
+    if (document.getElementById('multi-series-radar-chart')) {
+        const multiSeriesRadarOptions = {
+            series: [{
+                name: 'Series 1',
+                data: [80, 50, 30, 40, 100, 20],
+            }, {
+                name: 'Series 2',
+                data: [20, 30, 40, 80, 20, 80],
+            }, {
+                name: 'Series 3',
+                data: [44, 76, 78, 13, 43, 10],
+            }],
+            chart: {
+                height: 350,
+                type: 'radar',
+                dropShadow: {
+                    enabled: true,
+                    blur: 1,
+                    left: 1,
+                    top: 1
+                },
+                toolbar: {
+                    show: true
+                }
+            },
+            stroke: {
+                width: 2
+            },
+            fill: {
+                opacity: 0.1
+            },
+            markers: {
+                size: 0
+            },
+            xaxis: {
+                categories: ['January', 'February', 'March', 'April', 'May', 'June'],
+            },
+            colors: [window.colorMap.primary[500].hex, window.colorMap.primary[300].hex, window.colorMap.primary[200].hex],
+            tooltip: {
+                y: {
+                    formatter: function(val) {
+                        return val;
+                    }
+                }
+            },
+            legend: {
+                position: 'top',
+            }
+        };
+
+        const multiSeriesRadarChart = new ApexCharts(
+            document.getElementById('multi-series-radar-chart'),
+            multiSeriesRadarOptions
+        );
+        multiSeriesRadarChart.render();
+    }
+
+    // Polygon Fill Radar Chart
+    if (document.getElementById('polygon-fill-radar-chart')) {
+        const polygonFillRadarOptions = {
+            series: [{
+                name: 'Series 1',
+                data: [20, 100, 40, 30, 50, 80, 33],
+            }],
+            chart: {
+                height: 350,
+                type: 'radar',
+                toolbar: {
+                    show: true
+                }
+            },
+            dataLabels: {
+                enabled: true
+            },
+            plotOptions: {
+                radar: {
+                    size: 140,
+                    polygons: {
+                        strokeColors: window.colorMap.bootstrapVars.bodyColor.rgba(0.2),
+                        fill: {
+                            colors: [window.colorMap.bootstrapVars.bodyBg.rgba(0.1), '#fff']
+                        }
+                    }
+                }
+            },
+            colors: [window.colorMap.primary[500].hex],
+            markers: {
+                size: 4,
+                colors: [window.colorMap.primary[500].hex],
+                strokeColors: '#fff',
+                strokeWidth: 2
+            },
+            tooltip: {
+                y: {
+                    formatter: function(val) {
+                        return val;
+                    }
+                }
+            },
+            xaxis: {
+                categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+            },
+            yaxis: {
+                tickAmount: 7,
+            }
+        };
+
+        const polygonFillRadarChart = new ApexCharts(
+            document.getElementById('polygon-fill-radar-chart'),
+            polygonFillRadarOptions
+        );
+        polygonFillRadarChart.render();
+    }
+});