fix signup page

Author: aurelianware

src/portal/CloudHealthOffice.Portal/Pages/Signup.razor

@@ -129,10 +129,16 @@
                 <div class="form-section">
                     <h2>Payment Information</h2>
                     <p class="payment-note">💳 Secure payment powered by Stripe. Your card will be charged after the 14-day trial.</p>
-                    
+
                     <div class="form-group">
                         <label for="card-element">Credit Card *</label>
-                        <div id="card-element" class="stripe-element">
+                        @if (!string.IsNullOrEmpty(_stripeInitError))
+                        {
+                            <div class="alert alert-warning mt-2">
+                                <strong>Payment system unavailable:</strong> @_stripeInitError
+                            </div>
+                        }
+                        <div id="card-element" class="stripe-element" style="@(!string.IsNullOrEmpty(_stripeInitError) ? "display:none" : "")">
                             <!-- Stripe Element will be inserted here -->
                         </div>
                         <div id="card-errors" class="payment-error" role="alert"></div>
@@ -161,7 +167,7 @@
 
                     <div class="alert alert-info mt-3">
                         <strong>14-Day Free Trial</strong><br/>
-                        Start using the platform immediately. Your card won't be charged until February 23, 2026.
+                        Start using the platform immediately. Your card won't be charged until @DateTime.Now.AddDays(14).ToString("MMMM d, yyyy").
                     </div>
                 </div>
 
@@ -170,7 +176,7 @@
                     <div class="alert alert-danger">@errorMessage</div>
                 }
 
-                <button type="submit" class="btn btn-primary btn-lg" disabled="@isSubmitting">
+                <button type="submit" class="btn btn-primary btn-lg" disabled="@(isSubmitting || !string.IsNullOrEmpty(_stripeInitError))">
                     @if (isSubmitting)
                     {
                         <span>Creating account...</span>
@@ -228,6 +234,8 @@
     private bool enableAttachments = false;
     private bool enableEnrollment = false;
 
+    private string? _stripeInitError;
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
@@ -240,13 +248,32 @@
     {
         try
         {
-            var stripePublishableKey = Configuration["Stripe:PublishableKey"] ?? "pk_test_placeholder";
-            await JSRuntime.InvokeVoidAsync("StripeHandler.initialize", stripePublishableKey);
-            Logger.LogInformation("Stripe initialized successfully");
+            var stripePublishableKey = Configuration["Stripe:PublishableKey"];
+            if (string.IsNullOrEmpty(stripePublishableKey))
+            {
+                _stripeInitError = "Payment system is not configured. Please contact support@cloudhealthoffice.com.";
+                Logger.LogError("Stripe:PublishableKey is not configured");
+                StateHasChanged();
+                return;
+            }
+
+            var initError = await JSRuntime.InvokeAsync<string?>("StripeHandler.initialize", stripePublishableKey);
+            if (initError != null)
+            {
+                _stripeInitError = initError;
+                Logger.LogError("Stripe initialization failed: {Error}", initError);
+                StateHasChanged();
+            }
+            else
+            {
+                Logger.LogInformation("Stripe initialized successfully");
+            }
         }
         catch (Exception ex)
         {
+            _stripeInitError = "Failed to load payment form. Please refresh the page and try again.";
             Logger.LogError(ex, "Failed to initialize Stripe");
+            StateHasChanged();
         }
     }
 

src/portal/CloudHealthOffice.Portal/wwwroot/js/stripe-handler.js

@@ -4,19 +4,23 @@ window.StripeHandler = {
     cardElement: null,
 
     initialize: function(publishableKey) {
-        //console.log('Initializing Stripe with key:', publishableKey.substring(0, 10) + '...');
-        
         // Check if Stripe is already loaded
         if (typeof Stripe === 'undefined') {
             console.error('Stripe.js not loaded');
-            return;
+            return 'Stripe.js failed to load. Please disable any ad blockers and reload the page.';
         }
 
         // Initialize Stripe only once
         if (!this.stripe) {
-            this.stripe = Stripe(publishableKey);
+            try {
+                this.stripe = Stripe(publishableKey);
+            } catch (ex) {
+                console.error('Stripe() constructor failed:', ex);
+                return 'Payment system could not be initialized: ' + ex.message;
+            }
+
             const elements = this.stripe.elements();
-            
+
             this.cardElement = elements.create('card', {
                 style: {
                     base: {
@@ -32,25 +36,21 @@ window.StripeHandler = {
             const cardElementDiv = document.getElementById('card-element');
             if (cardElementDiv) {
                 this.cardElement.mount('#card-element');
-                console.log('Card element mounted successfully');
             } else {
                 console.error('Card element div not found');
+                return 'Payment form element not found. Please reload the page.';
             }
 
             // Listen for card validation errors
             this.cardElement.on('change', function(event) {
                 const displayError = document.getElementById('card-errors');
                 if (displayError) {
-                    if (event.error) {
-                        displayError.textContent = event.error.message;
-                    } else {
-                        displayError.textContent = '';
-                    }
+                    displayError.textContent = event.error ? event.error.message : '';
                 }
             });
-        } else {
-            console.log('Stripe already initialized');
         }
+
+        return null; // null = success
     },
 
     createPaymentMethod: async function(name, email) {