Save and show previously filled steps

backend/app/Http/Controllers/Api/V1/OnboardingController.php

@@ -217,15 +217,17 @@ public function createFeed(Request $request): JsonResponse
             $url = 'https://www.belganewsagency.eu/';
         }
 
-        $feed = Feed::create([
+        $feed = Feed::firstOrCreate(
-            'name' => $validated['name'],
+            ['url' => $url],
-            'url' => $url,
+            [
-            'type' => $type,
+                'name' => $validated['name'],
-            'provider' => $provider,
+                'type' => $type,
-            'language_id' => $validated['language_id'],
+                'provider' => $provider,
-            'description' => $validated['description'] ?? null,
+                'language_id' => $validated['language_id'],
-            'is_active' => true,
+                'description' => $validated['description'] ?? null,
-        ]);
+                'is_active' => true,
+            ]
+        );
 
         return $this->sendResponse(
             new FeedResource($feed->load('language')),

backend/app/Http/Resources/FeedResource.php

@@ -19,6 +19,8 @@ public function toArray(Request $request): array
             'name' => $this->name,
             'url' => $this->url,
             'type' => $this->type,
+            'provider' => $this->provider,
+            'language_id' => $this->language_id,
             'is_active' => $this->is_active,
             'description' => $this->description,
             'created_at' => $this->created_at->toISOString(),

backend/app/Http/Resources/PlatformChannelResource.php

@@ -21,6 +21,7 @@ public function toArray(Request $request): array
             'name' => $this->name,
             'display_name' => $this->display_name,
             'description' => $this->description,
+            'language_id' => $this->language_id,
             'is_active' => $this->is_active,
             'created_at' => $this->created_at->toISOString(),
             'updated_at' => $this->updated_at->toISOString(),

backend/app/Listeners/LogExceptionToDatabase.php

@@ -10,18 +10,29 @@ class LogExceptionToDatabase
 
     public function handle(ExceptionOccurred $event): void
     {
-        $log = Log::create([
+        // Truncate the message to prevent database errors
-            'level' => $event->level,
+        $message = strlen($event->message) > 255 
-            'message' => $event->message,
+            ? substr($event->message, 0, 252) . '...' 
-            'context' => [
+            : $event->message;
-                'exception_class' => get_class($event->exception),
-                'file' => $event->exception->getFile(),
-                'line' => $event->exception->getLine(),
-                'trace' => $event->exception->getTraceAsString(),
-                ...$event->context
-            ]
-        ]);
 
-        ExceptionLogged::dispatch($log);
+        try {
+            $log = Log::create([
+                'level' => $event->level,
+                'message' => $message,
+                'context' => [
+                    'exception_class' => get_class($event->exception),
+                    'file' => $event->exception->getFile(),
+                    'line' => $event->exception->getLine(),
+                    'trace' => $event->exception->getTraceAsString(),
+                    ...$event->context
+                ]
+            ]);
+
+            ExceptionLogged::dispatch($log);
+        } catch (\Exception $e) {
+            // Prevent infinite recursion by not logging this exception
+            // Optionally log to file or other non-database destination
+            error_log("Failed to log exception to database: " . $e->getMessage());
+        }
     }
 }

frontend/src/lib/api.ts

@@ -55,6 +55,8 @@ export interface Feed {
   type: 'website' | 'rss';
   is_active: boolean;
   description: string | null;
+  language_id?: number;
+  provider?: string;
   created_at: string;
   updated_at: string;
   articles_count?: number;
@@ -78,6 +80,8 @@ export interface PlatformAccount {
   display_name: string | null;
   description: string | null;
   is_active: boolean;
+  instance_url?: string;
+  password?: string;
   created_at: string;
   updated_at: string;
 }
@@ -90,6 +94,7 @@ export interface PlatformChannel {
   display_name: string | null;
   description: string | null;
   is_active: boolean;
+  language_id?: number;
   created_at: string;
   updated_at: string;
   platform_instance?: PlatformInstance;
@@ -442,6 +447,10 @@ class ApiClient {
     const response = await axios.get<ApiResponse<PlatformAccount[]>>('/platform-accounts');
     return response.data.data;
   }
+
+  async deletePlatformAccount(id: number): Promise<void> {
+    await axios.delete(`/platform-accounts/${id}`);
+  }
 }
 
 export const apiClient = new ApiClient();

frontend/src/pages/onboarding/steps/ChannelStep.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { apiClient, type ChannelRequest, type Language, type PlatformInstance } from '../../../lib/api';
@@ -20,6 +20,26 @@ const ChannelStep: React.FC = () => {
     queryFn: () => apiClient.getOnboardingOptions()
   });
 
+  // Fetch existing channels to pre-fill form when going back
+  const { data: channels } = useQuery({
+    queryKey: ['platform-channels'],
+    queryFn: () => apiClient.getPlatformChannels(),
+    retry: false,
+  });
+
+  // Pre-fill form with existing data
+  useEffect(() => {
+    if (channels && channels.length > 0) {
+      const firstChannel = channels[0];
+      setFormData({
+        name: firstChannel.name || '',
+        platform_instance_id: firstChannel.platform_instance_id || 0,
+        language_id: firstChannel.language_id || 0,
+        description: firstChannel.description || ''
+      });
+    }
+  }, [channels]);
+
   const createChannelMutation = useMutation({
     mutationFn: (data: ChannelRequest) => apiClient.createChannelForOnboarding(data),
     onSuccess: () => {

frontend/src/pages/onboarding/steps/FeedStep.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { apiClient, type FeedRequest, type Language, type FeedProvider } from '../../../lib/api';
@@ -19,6 +19,26 @@ const FeedStep: React.FC = () => {
     queryFn: () => apiClient.getOnboardingOptions()
   });
 
+  // Fetch existing feeds to pre-fill form when going back
+  const { data: feeds } = useQuery({
+    queryKey: ['feeds'],
+    queryFn: () => apiClient.getFeeds(),
+    retry: false,
+  });
+
+  // Pre-fill form with existing data
+  useEffect(() => {
+    if (feeds && feeds.length > 0) {
+      const firstFeed = feeds[0];
+      setFormData({
+        name: firstFeed.name || '',
+        provider: firstFeed.provider || 'vrt',
+        language_id: firstFeed.language_id ?? 0,
+        description: firstFeed.description || ''
+      });
+    }
+  }, [feeds]);
+
   const createFeedMutation = useMutation({
     mutationFn: (data: FeedRequest) => apiClient.createFeedForOnboarding(data),
     onSuccess: () => {

frontend/src/pages/onboarding/steps/PlatformStep.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { apiClient, type PlatformAccountRequest } from '../../../lib/api';
 
 const PlatformStep: React.FC = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const [formData, setFormData] = useState<PlatformAccountRequest>({
     instance_url: '',
     username: '',
@@ -13,9 +14,17 @@ const PlatformStep: React.FC = () => {
   });
   const [errors, setErrors] = useState<Record<string, string[]>>({});
 
+  // Fetch existing platform accounts
+  const { data: platformAccounts, isLoading } = useQuery({
+    queryKey: ['platform-accounts'],
+    queryFn: () => apiClient.getPlatformAccounts(),
+    retry: false,
+  });
+
   const createPlatformMutation = useMutation({
     mutationFn: (data: PlatformAccountRequest) => apiClient.createPlatformAccount(data),
     onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['platform-accounts'] });
       navigate('/onboarding/feed');
     },
     onError: (error: any) => {
@@ -27,6 +36,17 @@ const PlatformStep: React.FC = () => {
     }
   });
 
+  const deletePlatformMutation = useMutation({
+    mutationFn: (accountId: number) => apiClient.deletePlatformAccount(accountId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['platform-accounts'] });
+      setErrors({});
+    },
+    onError: (error: any) => {
+      setErrors({ general: [error.response?.data?.message || 'Failed to delete account'] });
+    }
+  });
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     setErrors({});
@@ -41,11 +61,28 @@ const PlatformStep: React.FC = () => {
     }
   };
 
+  const handleDeleteAccount = (accountId: number) => {
+    if (confirm('Are you sure you want to remove this account? You will need to re-enter your credentials.')) {
+      deletePlatformMutation.mutate(accountId);
+    }
+  };
+
+  const handleContinueWithExisting = () => {
+    navigate('/onboarding/feed');
+  };
+
+  // Show loading state
+  if (isLoading) {
+    return <div className="text-center">Loading...</div>;
+  }
+
+  const existingAccount = platformAccounts && platformAccounts.length > 0 ? platformAccounts[0] : null;
+
   return (
     <div className="text-center mb-8">
       <h1 className="text-2xl font-bold text-gray-900 mb-2">Connect Your Lemmy Account</h1>
       <p className="text-gray-600">
-        Enter your Lemmy instance details and login credentials
+        {existingAccount ? 'Your connected Lemmy account' : 'Enter your Lemmy instance details and login credentials'}
       </p>
       
       {/* Progress indicator */}
@@ -56,82 +93,133 @@ const PlatformStep: React.FC = () => {
         <div className="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">4</div>
       </div>
 
-      <form onSubmit={handleSubmit} className="space-y-6 mt-8 text-left">
+      {/* Show errors */}
-        {errors.general && (
+      {errors.general && (
-          <div className="p-3 bg-red-50 border border-red-200 rounded-md">
+        <div className="p-3 bg-red-50 border border-red-200 rounded-md mt-6">
-            <p className="text-red-600 text-sm">{errors.general[0]}</p>
+          <p className="text-red-600 text-sm">{errors.general[0]}</p>
+        </div>
+      )}
+
+      {existingAccount ? (
+        /* Account Card */
+        <div className="mt-8">
+          <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-left">
+            <div className="flex items-start justify-between">
+              <div className="flex items-center">
+                <div className="w-12 h-12 bg-green-500 text-white rounded-full flex items-center justify-center">
+                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <div className="ml-4">
+                  <h3 className="text-lg font-semibold text-gray-900">Account Connected</h3>
+                  <div className="text-sm text-gray-600 mt-1">
+                    <p><strong>Username:</strong> {existingAccount.username}</p>
+                    <p><strong>Instance:</strong> {existingAccount.instance_url?.replace('https://', '')}</p>
+                  </div>
+                </div>
+              </div>
+              <button
+                onClick={() => handleDeleteAccount(existingAccount.id)}
+                disabled={deletePlatformMutation.isPending}
+                className="text-red-600 hover:text-red-800 p-2 disabled:opacity-50"
+                title="Remove account"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          
+          <div className="flex justify-between mt-6">
+            <Link 
+              to="/onboarding"
+              className="px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200"
+            >
+              ← Back
+            </Link>
+            <button 
+              onClick={handleContinueWithExisting}
+              className="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200"
+            >
+              Continue
+            </button>
           </div>
-        )}
-        
-        <div>
-          <label htmlFor="instance_url" className="block text-sm font-medium text-gray-700 mb-2">
-            Lemmy Instance Domain
-          </label>
-          <input 
-            type="text" 
-            id="instance_url" 
-            value={formData.instance_url}
-            onChange={(e) => handleChange('instance_url', e.target.value)}
-            placeholder="lemmy.world"
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            required
-          />
-          <p className="text-sm text-gray-500 mt-1">Enter just the domain name (e.g., lemmy.world, belgae.social)</p>
-          {errors.instance_url && (
-            <p className="text-red-600 text-sm mt-1">{errors.instance_url[0]}</p>
-          )}
         </div>
-        
+      ) : (
-        <div>
+        /* Login Form */
-          <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-2">
+        <form onSubmit={handleSubmit} className="space-y-6 mt-8 text-left">
-            Username
+          <div>
-          </label>
+            <label htmlFor="instance_url" className="block text-sm font-medium text-gray-700 mb-2">
-          <input 
+              Lemmy Instance Domain
-            type="text" 
+            </label>
-            id="username" 
+            <input 
-            value={formData.username}
+              type="text" 
-            onChange={(e) => handleChange('username', e.target.value)}
+              id="instance_url" 
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              value={formData.instance_url}
-            required
+              onChange={(e) => handleChange('instance_url', e.target.value)}
-          />
+              placeholder="lemmy.world"
-          {errors.username && (
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            <p className="text-red-600 text-sm mt-1">{errors.username[0]}</p>
+              required
-          )}
+            />
-        </div>
+            <p className="text-sm text-gray-500 mt-1">Enter just the domain name (e.g., lemmy.world, belgae.social)</p>
-        
+            {errors.instance_url && (
-        <div>
+              <p className="text-red-600 text-sm mt-1">{errors.instance_url[0]}</p>
-          <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+            )}
-            Password
+          </div>
-          </label>
+          
-          <input 
+          <div>
-            type="password" 
+            <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-2">
-            id="password" 
+              Username
-            value={formData.password}
+            </label>
-            onChange={(e) => handleChange('password', e.target.value)}
+            <input 
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              type="text" 
-            required
+              id="username" 
-          />
+              value={formData.username}
-          {errors.password && (
+              onChange={(e) => handleChange('username', e.target.value)}
-            <p className="text-red-600 text-sm mt-1">{errors.password[0]}</p>
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          )}
+              required
-        </div>
+            />
-        
+            {errors.username && (
-        <div className="flex justify-between">
+              <p className="text-red-600 text-sm mt-1">{errors.username[0]}</p>
-          <Link 
+            )}
-            to="/onboarding"
+          </div>
-            className="px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200"
+          
-          >
+          <div>
-            ← Back
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
-          </Link>
+              Password
-          <button 
+            </label>
-            type="submit" 
+            <input 
-            disabled={createPlatformMutation.isPending}
+              type="password" 
-            className="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50"
+              id="password" 
-          >
+              value={formData.password}
-            {createPlatformMutation.isPending ? 'Connecting...' : 'Continue'}
+              onChange={(e) => handleChange('password', e.target.value)}
-          </button>
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-        </div>
+              required
-      </form>
+            />
+            {errors.password && (
+              <p className="text-red-600 text-sm mt-1">{errors.password[0]}</p>
+            )}
+          </div>
+          
+          <div className="flex justify-between">
+            <Link 
+              to="/onboarding"
+              className="px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200"
+            >
+              ← Back
+            </Link>
+            <button 
+              type="submit" 
+              disabled={createPlatformMutation.isPending}
+              className="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50"
+            >
+              {createPlatformMutation.isPending ? 'Connecting...' : 'Continue'}
+            </button>
+          </div>
+        </form>
+      )}
     </div>
   );
 };

frontend/src/pages/onboarding/steps/RouteStep.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { apiClient, type RouteRequest, type Feed, type PlatformChannel } from '../../../lib/api';
@@ -19,6 +19,25 @@ const RouteStep: React.FC = () => {
     queryFn: () => apiClient.getOnboardingOptions()
   });
 
+  // Fetch existing routes to pre-fill form when going back
+  const { data: routes } = useQuery({
+    queryKey: ['routes'],
+    queryFn: () => apiClient.getRoutes(),
+    retry: false,
+  });
+
+  // Pre-fill form with existing data
+  useEffect(() => {
+    if (routes && routes.length > 0) {
+      const firstRoute = routes[0];
+      setFormData({
+        feed_id: firstRoute.feed_id || 0,
+        platform_channel_id: firstRoute.platform_channel_id || 0,
+        priority: firstRoute.priority || 50
+      });
+    }
+  }, [routes]);
+
   const createRouteMutation = useMutation({
     mutationFn: (data: RouteRequest) => apiClient.createRouteForOnboarding(data),
     onSuccess: () => {

frontend/src/pages/onboarding/steps/WelcomeStep.tsx

@@ -1,23 +1,7 @@
 import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
-import { useMutation } from '@tanstack/react-query';
-import { apiClient } from '../../../lib/api';
 
 const WelcomeStep: React.FC = () => {
-  const navigate = useNavigate();
-  
-  const skipMutation = useMutation({
-    mutationFn: () => apiClient.skipOnboarding(),
-    onSuccess: () => {
-      navigate('/dashboard');
-    },
-  });
-
-  const handleSkip = () => {
-    if (confirm('Are you sure you want to skip the setup? You can configure FFR later from the settings page.')) {
-      skipMutation.mutate();
-    }
-  };
 
   return (
     <div className="text-center">
@@ -49,21 +33,13 @@ const WelcomeStep: React.FC = () => {
         </div>
       </div>
       
-      <div className="mt-8 space-y-3">
+      <div className="mt-8">
         <Link 
           to="/onboarding/platform"
           className="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition duration-200 inline-block"
         >
           Get Started
         </Link>
-        
-        <button
-          onClick={handleSkip}
-          disabled={skipMutation.isPending}
-          className="w-full text-gray-500 hover:text-gray-700 py-2 px-4 text-sm transition duration-200 disabled:opacity-50"
-        >
-          {skipMutation.isPending ? 'Skipping...' : 'Skip for now'}
-        </button>
       </div>
     </div>
   );