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,185 @@
+
+import ApexCharts from '../thirdparty/apexchartsWrapper.js';
+
+document.addEventListener('DOMContentLoaded', function () {
+    'use strict';
+
+    // Basic Polar Area Chart
+    if (document.getElementById('basic-polar-area-chart')) {
+        const basicPolarAreaOptions = {
+            series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
+            chart: {
+                height: 350,
+                type: 'polarArea',
+                toolbar: {
+                    show: true
+                }
+            },
+            stroke: {
+                colors: [window.colorMap.bootstrapVars.bodyBg.hex]
+            },
+            fill: {
+                opacity: 0.8
+            },
+            responsive: [{
+                breakpoint: 480,
+                options: {
+                    chart: {
+                        width: 200
+                    },
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            colors: window.colorMap.bootstrapVars.bodyColor.hex
+                        }
+                    }
+                }
+            }],
+            labels: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E', 'Category F', 'Category G', 'Category H', 'Category I'],
+            colors: [
+                window.colorMap.primary[50].hex,
+                window.colorMap.primary[100].hex,
+                window.colorMap.primary[200].hex,
+                window.colorMap.primary[300].hex,
+                window.colorMap.primary[400].hex,
+                window.colorMap.primary[500].hex,
+                window.colorMap.primary[600].hex,
+                window.colorMap.info[50].hex,
+                window.colorMap.info[100].hex
+            ],
+        };
+
+        const basicPolarAreaChart = new ApexCharts(
+            document.getElementById('basic-polar-area-chart'),
+            basicPolarAreaOptions
+        );
+        basicPolarAreaChart.render();
+    }
+
+    // Polar Area with Monochrome Theme
+    if (document.getElementById('monochrome-polar-area-chart')) {
+        const monochromePolarAreaOptions = {
+            series: [42, 47, 52, 58, 65],
+            chart: {
+                height: 350,
+                type: 'polarArea',
+                toolbar: {
+                    show: true
+                }
+            },
+            labels: ['Market Research', 'Direct Sales', 'Email Marketing', 'Social Media', 'Referrals'],
+            fill: {
+                opacity: 1
+            },
+            stroke: {
+                width: 1,
+                colors: undefined
+            },
+            yaxis: {
+                show: false
+            },
+            legend: {
+                position: 'bottom',
+            },
+            plotOptions: {
+                polarArea: {
+                    rings: {
+                        strokeWidth: 0
+                    },
+                    spokes: {
+                        strokeWidth: 0
+                    },
+                }
+            },
+            theme: {
+                monochrome: {
+                    enabled: true,
+                    shadeTo: 'light',
+                    shadeIntensity: 0.6,
+                    color: window.colorMap.primary[500].hex
+                }
+            }
+        };
+
+        const monochromePolarAreaChart = new ApexCharts(
+            document.getElementById('monochrome-polar-area-chart'),
+            monochromePolarAreaOptions
+        );
+        monochromePolarAreaChart.render();
+    }
+
+    // Polar Area with Gradient
+    if (document.getElementById('gradient-polar-area-chart')) {
+        const gradientPolarAreaOptions = {
+            series: [30, 40, 35, 50, 49, 60, 70, 91, 125],
+            chart: {
+                height: 350,
+                type: 'polarArea',
+                toolbar: {
+                    show: true
+                }
+            },
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+            fill: {
+                opacity: 1,
+                type: 'gradient',
+                gradient: {
+                    shade: 'light',
+                    type: 'vertical',
+                    shadeIntensity: 0.5,
+                    gradientToColors: undefined,
+                    inverseColors: false,
+                    opacityFrom: 0.8,
+                    opacityTo: 0.5,
+                    stops: [0, 100]
+                }
+            },
+            stroke: {
+                width: 1,
+                colors: [window.colorMap.bootstrapVars.bodyBg.hex]
+            },
+            yaxis: {
+                show: false
+            },
+            legend: {
+                position: 'bottom',
+            },
+            plotOptions: {
+                polarArea: {
+                    rings: {
+                        strokeWidth: 1,
+                        strokeColor: window.colorMap.bootstrapVars.bodyBg.hex
+                    },
+                    spokes: {
+                        strokeWidth: 1,
+                        connectorColors: window.colorMap.bootstrapVars.bodyBg.hex
+                    }
+                }
+            },
+            tooltip: {
+                y: {
+                    formatter: function (val) {
+                        return "$" + val + "K";
+                    }
+                }
+            },
+            colors: [
+                window.colorMap.primary[50].hex,
+                window.colorMap.primary[100].hex,
+                window.colorMap.primary[200].hex,
+                window.colorMap.primary[300].hex,
+                window.colorMap.primary[400].hex,
+                window.colorMap.primary[500].hex,
+                window.colorMap.primary[600].hex,
+                window.colorMap.primary[700].hex,
+                window.colorMap.primary[800].hex
+            ]
+        };
+
+        const gradientPolarAreaChart = new ApexCharts(
+            document.getElementById('gradient-polar-area-chart'),
+            gradientPolarAreaOptions
+        );
+        gradientPolarAreaChart.render();
+    }
+});