2026-01-23 00:56:01 +01:00
< div class = " w-full max-w-2xl px-4 sm:px-6 lg:px-8 " >
< div class = " w-full bg-white rounded-2xl shadow-xl p-8 " >
2026-01-22 23:38:00 +01:00
{{ -- Step 1 : Welcome -- }}
@ if ( $step === 1 )
< div class = " text-center " >
< h1 class = " text-3xl font-bold text-gray-900 mb-2 " > Welcome to FFR </ h1 >
< p class = " text-gray-600 mb-8 " >
Let 's get you set up! We' ll help you configure your Lemmy account , add your first feed , and create a channel for posting .
</ p >
< div class = " space-y-4 text-left " >
< div class = " flex items-center text-sm text-gray-600 " >
< div class = " w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 text-xs font-semibold " > 1 </ div >
< span > Connect your Lemmy account </ span >
</ div >
< div class = " flex items-center text-sm text-gray-600 " >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold " > 2 </ div >
2026-02-25 21:13:42 +01:00
< span > Configure a channel </ span >
2026-01-22 23:38:00 +01:00
</ div >
< div class = " flex items-center text-sm text-gray-600 " >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold " > 3 </ div >
2026-02-25 21:13:42 +01:00
< span > Add your first feed </ span >
2026-01-22 23:38:00 +01:00
</ div >
< div class = " flex items-center text-sm text-gray-600 " >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold " > 4 </ div >
< span > Create a route </ span >
</ div >
< div class = " flex items-center text-sm text-gray-600 " >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold " > 5 </ div >
< span > You ' re ready to go !</ span >
</ div >
</ div >
< div class = " mt-8 " >
< button
wire : click = " nextStep "
class = " w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition duration-200 "
>
Get Started
</ button >
</ div >
</ div >
@ endif
{{ -- Step 2 : Platform Account -- }}
@ if ( $step === 2 )
< div class = " text-center mb-8 " >
< h1 class = " text-2xl font-bold text-gray-900 mb-2 " > Connect Your Lemmy Account </ h1 >
< p class = " text-gray-600 " >
{{ $existingAccount ? 'Your connected Lemmy account' : 'Enter your Lemmy instance details and login credentials' }}
</ p >
{{ -- Progress indicator -- }}
< div class = " flex justify-center mt-6 space-x-2 " >
< div class = " w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > 1 </ div >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold " > 2 </ div >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold " > 3 </ div >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold " > 4 </ div >
</ div >
2026-01-23 00:56:01 +01:00
@ if ( ! empty ( $formErrors [ 'general' ]))
2026-01-22 23:38:00 +01:00
< div class = " p-3 bg-red-50 border border-red-200 rounded-md mt-6 " >
2026-01-23 00:56:01 +01:00
< p class = " text-red-600 text-sm " > {{ $formErrors [ 'general' ] }} </ p >
2026-01-22 23:38:00 +01:00
</ div >
@ endif
@ if ( $existingAccount )
{{ -- Account Card -- }}
< div class = " mt-8 " >
< div class = " bg-green-50 border border-green-200 rounded-lg p-6 text-left " >
< div class = " flex items-start justify-between " >
< div class = " flex items-center " >
< div class = " w-12 h-12 bg-green-500 text-white rounded-full flex items-center justify-center " >
< svg class = " w-6 h-6 " fill = " none " stroke = " currentColor " viewBox = " 0 0 24 24 " >
< path stroke - linecap = " round " stroke - linejoin = " round " stroke - width = " 2 " d = " M5 13l4 4L19 7 " ></ path >
</ svg >
</ div >
< div class = " ml-4 " >
< h3 class = " text-lg font-semibold text-gray-900 " > Account Connected </ h3 >
< div class = " text-sm text-gray-600 mt-1 " >
< p >< strong > Username :</ strong > {{ $existingAccount [ 'username' ] }} </ p >
< p >< strong > Instance :</ strong > {{ str_replace ( 'https://' , '' , $existingAccount [ 'instance_url' ]) }} </ p >
</ div >
</ div >
</ div >
< button
wire : click = " deleteAccount "
wire : confirm = " Are you sure you want to remove this account? You will need to re-enter your credentials. "
class = " text-red-600 hover:text-red-800 p-2 "
title = " Remove account "
>
< svg class = " w-5 h-5 " fill = " none " stroke = " currentColor " viewBox = " 0 0 24 24 " >
< path stroke - linecap = " round " stroke - linejoin = " round " stroke - width = " 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 class = " flex justify-between mt-6 " >
< button wire : click = " previousStep " class = " px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200 " >
← Back
</ button >
< button
wire : click = " continueWithExistingAccount "
class = " bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 "
>
Continue
</ button >
</ div >
</ div >
@ else
{{ -- Login Form -- }}
< form wire : submit = " createPlatformAccount " class = " space-y-6 mt-8 text-left " >
< div >
< label for = " instanceUrl " class = " block text-sm font-medium text-gray-700 mb-2 " >
Lemmy Instance Domain
</ label >
< input
type = " text "
id = " instanceUrl "
wire : model = " instanceUrl "
placeholder = " lemmy.world "
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
required
>
< p class = " text-sm text-gray-500 mt-1 " > Enter just the domain name ( e . g . , lemmy . world , belgae . social ) </ p >
@ error ( 'instanceUrl' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
</ div >
< div >
< label for = " username " class = " block text-sm font-medium text-gray-700 mb-2 " >
Username
</ label >
< input
type = " text "
id = " username "
wire : model = " username "
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
required
>
@ error ( 'username' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
</ div >
< div >
< label for = " password " class = " block text-sm font-medium text-gray-700 mb-2 " >
Password
</ label >
< input
type = " password "
id = " password "
wire : model = " password "
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
required
>
@ error ( 'password' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
</ div >
< div class = " flex justify-between " >
< button type = " button " wire : click = " previousStep " class = " px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200 " >
← Back
</ button >
< button
type = " submit "
@ disabled ( $isLoading )
class = " bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50 "
>
{{ $isLoading ? 'Connecting...' : 'Continue' }}
</ button >
</ div >
</ form >
@ endif
</ div >
@ endif
2026-02-25 21:13:42 +01:00
{{ -- Step 3 : Channel -- }}
2026-01-22 23:38:00 +01:00
@ if ( $step === 3 )
< div class = " text-center mb-8 " >
2026-02-25 21:13:42 +01:00
< h1 class = " text-2xl font-bold text-gray-900 mb-2 " > Configure Your Channel </ h1 >
2026-01-22 23:38:00 +01:00
< p class = " text-gray-600 " >
2026-02-25 21:13:42 +01:00
Set up a Lemmy community where articles will be posted
2026-01-22 23:38:00 +01:00
</ p >
{{ -- Progress indicator -- }}
< div class = " flex justify-center mt-6 space-x-2 " >
< div class = " w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > ✓ </ div >
< div class = " w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > 2 </ div >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold " > 3 </ div >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold " > 4 </ div >
</ div >
2026-02-25 21:13:42 +01:00
< form wire : submit = " createChannel " class = " space-y-6 mt-8 text-left " >
2026-01-23 00:56:01 +01:00
@ if ( ! empty ( $formErrors [ 'general' ]))
2026-01-22 23:38:00 +01:00
< div class = " p-3 bg-red-50 border border-red-200 rounded-md " >
2026-01-23 00:56:01 +01:00
< p class = " text-red-600 text-sm " > {{ $formErrors [ 'general' ] }} </ p >
2026-01-22 23:38:00 +01:00
</ div >
@ endif
< div >
2026-02-25 21:13:42 +01:00
< label for = " channelName " class = " block text-sm font-medium text-gray-700 mb-2 " >
Community Name
2026-01-22 23:38:00 +01:00
</ label >
< input
type = " text "
2026-02-25 21:13:42 +01:00
id = " channelName "
wire : model = " channelName "
placeholder = " technology "
2026-01-22 23:38:00 +01:00
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
required
>
2026-02-25 21:13:42 +01:00
< p class = " text-sm text-gray-500 mt-1 " > Enter the community name ( without the @ or instance ) </ p >
@ error ( 'channelName' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
2026-01-22 23:38:00 +01:00
</ div >
< div >
2026-02-25 21:13:42 +01:00
< label for = " platformInstanceId " class = " block text-sm font-medium text-gray-700 mb-2 " >
Platform Instance
2026-01-22 23:38:00 +01:00
</ label >
< select
2026-02-25 21:13:42 +01:00
id = " platformInstanceId "
wire : model = " platformInstanceId "
2026-01-22 23:38:00 +01:00
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
required
>
2026-02-25 21:13:42 +01:00
< option value = " " > Select platform instance </ option >
@ foreach ( $platformInstances as $instance )
< option value = " { { $instance->id }} " > {{ $instance -> name }} ({{ $instance -> url }}) </ option >
2026-01-22 23:38:00 +01:00
@ endforeach
</ select >
2026-02-25 21:13:42 +01:00
@ error ( 'platformInstanceId' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
2026-01-22 23:38:00 +01:00
</ div >
< div >
2026-02-25 21:13:42 +01:00
< label for = " channelLanguageId " class = " block text-sm font-medium text-gray-700 mb-2 " >
2026-01-22 23:38:00 +01:00
Language
</ label >
< select
2026-02-25 21:13:42 +01:00
id = " channelLanguageId "
wire : model = " channelLanguageId "
2026-01-22 23:38:00 +01:00
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
required
>
< option value = " " > Select language </ option >
2026-03-07 10:43:48 +01:00
@ foreach ( $wizardLanguages as $language )
2026-01-22 23:38:00 +01:00
< option value = " { { $language->id }} " > {{ $language -> name }} </ option >
@ endforeach
</ select >
2026-02-25 21:13:42 +01:00
@ error ( 'channelLanguageId' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
2026-01-22 23:38:00 +01:00
</ div >
< div >
2026-02-25 21:13:42 +01:00
< label for = " channelDescription " class = " block text-sm font-medium text-gray-700 mb-2 " >
2026-01-22 23:38:00 +01:00
Description ( Optional )
</ label >
< textarea
2026-02-25 21:13:42 +01:00
id = " channelDescription "
wire : model = " channelDescription "
2026-01-22 23:38:00 +01:00
rows = " 3 "
2026-02-25 21:13:42 +01:00
placeholder = " Brief description of this channel "
2026-01-22 23:38:00 +01:00
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
></ textarea >
2026-02-25 21:13:42 +01:00
@ error ( 'channelDescription' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
2026-01-22 23:38:00 +01:00
</ div >
< div class = " flex justify-between " >
< button type = " button " wire : click = " previousStep " class = " px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200 " >
← Back
</ button >
< button
type = " submit "
@ disabled ( $isLoading )
class = " bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50 "
>
{{ $isLoading ? 'Creating...' : 'Continue' }}
</ button >
</ div >
</ form >
</ div >
@ endif
2026-02-25 21:13:42 +01:00
{{ -- Step 4 : Feed -- }}
2026-01-22 23:38:00 +01:00
@ if ( $step === 4 )
< div class = " text-center mb-8 " >
2026-02-25 21:13:42 +01:00
< h1 class = " text-2xl font-bold text-gray-900 mb-2 " > Add Your First Feed </ h1 >
2026-01-22 23:38:00 +01:00
< p class = " text-gray-600 " >
2026-02-25 21:13:42 +01:00
Choose from our supported news providers to monitor for new articles
2026-01-22 23:38:00 +01:00
</ p >
{{ -- Progress indicator -- }}
< div class = " flex justify-center mt-6 space-x-2 " >
< div class = " w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > ✓ </ div >
< div class = " w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > ✓ </ div >
< div class = " w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > 3 </ div >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold " > 4 </ div >
</ div >
2026-02-25 21:13:42 +01:00
< form wire : submit = " createFeed " class = " space-y-6 mt-8 text-left " >
2026-01-23 00:56:01 +01:00
@ if ( ! empty ( $formErrors [ 'general' ]))
2026-01-22 23:38:00 +01:00
< div class = " p-3 bg-red-50 border border-red-200 rounded-md " >
2026-01-23 00:56:01 +01:00
< p class = " text-red-600 text-sm " > {{ $formErrors [ 'general' ] }} </ p >
2026-01-22 23:38:00 +01:00
</ div >
@ endif
< div >
2026-02-25 21:13:42 +01:00
< label for = " feedName " class = " block text-sm font-medium text-gray-700 mb-2 " >
Feed Name
2026-01-22 23:38:00 +01:00
</ label >
< input
type = " text "
2026-02-25 21:13:42 +01:00
id = " feedName "
wire : model = " feedName "
placeholder = " My News Feed "
2026-01-22 23:38:00 +01:00
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
required
>
2026-02-25 21:13:42 +01:00
@ error ( 'feedName' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
2026-01-22 23:38:00 +01:00
</ div >
2026-03-07 10:43:48 +01:00
< div >
< label for = " feedLanguageId " class = " block text-sm font-medium text-gray-700 mb-2 flex items-center " >
Language
< span class = " ml-2 text-gray-400 cursor-help " title = " Language matches your channel. Additional languages can be configured from the dashboard after setup. " >
< svg class = " w-4 h-4 " fill = " none " stroke = " currentColor " viewBox = " 0 0 24 24 " >
< path stroke - linecap = " round " stroke - linejoin = " round " stroke - width = " 2 " d = " M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z " ></ path >
</ svg >
</ span >
</ label >
< select
id = " feedLanguageId "
disabled
class = " w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100 text-gray-600 cursor-not-allowed "
>
< option > {{ $channelLanguage ? -> name ? ? 'Unknown' }} </ option >
</ select >
< p class = " text-sm text-gray-500 mt-1 " > Inherited from your channel </ p >
</ div >
2026-01-22 23:38:00 +01:00
< div >
2026-02-25 21:13:42 +01:00
< label for = " feedProvider " class = " block text-sm font-medium text-gray-700 mb-2 " >
News Provider
2026-01-22 23:38:00 +01:00
</ label >
< select
2026-02-25 21:13:42 +01:00
id = " feedProvider "
wire : model = " feedProvider "
2026-01-22 23:38:00 +01:00
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
required
>
2026-02-25 21:13:42 +01:00
< option value = " " > Select news provider </ option >
@ foreach ( $feedProviders as $provider )
< option value = " { { $provider['code'] }} " > {{ $provider [ 'name' ] }} </ option >
2026-01-22 23:38:00 +01:00
@ endforeach
</ select >
2026-03-07 10:43:48 +01:00
@ if ( $feedProviders -> isEmpty ())
< p class = " text-sm text-amber-600 mt-1 " > No providers available for this language .</ p >
@ endif
2026-02-25 21:13:42 +01:00
@ error ( 'feedProvider' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
2026-01-22 23:38:00 +01:00
</ div >
< div >
2026-02-25 21:13:42 +01:00
< label for = " feedDescription " class = " block text-sm font-medium text-gray-700 mb-2 " >
2026-01-22 23:38:00 +01:00
Description ( Optional )
</ label >
< textarea
2026-02-25 21:13:42 +01:00
id = " feedDescription "
wire : model = " feedDescription "
2026-01-22 23:38:00 +01:00
rows = " 3 "
2026-02-25 21:13:42 +01:00
placeholder = " Brief description of this feed "
2026-01-22 23:38:00 +01:00
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
></ textarea >
2026-02-25 21:13:42 +01:00
@ error ( 'feedDescription' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
2026-01-22 23:38:00 +01:00
</ div >
< div class = " flex justify-between " >
< button type = " button " wire : click = " previousStep " class = " px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200 " >
← Back
</ button >
< button
type = " submit "
2026-03-07 10:43:48 +01:00
@ disabled ( $isLoading || $feedProviders -> isEmpty ())
2026-01-22 23:38:00 +01:00
class = " bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50 "
>
{{ $isLoading ? 'Creating...' : 'Continue' }}
</ button >
</ div >
</ form >
</ div >
@ endif
{{ -- Step 5 : Route -- }}
@ if ( $step === 5 )
< div class = " text-center mb-8 " >
< h1 class = " text-2xl font-bold text-gray-900 mb-2 " > Create Your First Route </ h1 >
< p class = " text-gray-600 " >
Connect your feed to a channel by creating a route . This tells FFR which articles to post where .
</ p >
{{ -- Progress indicator -- }}
< div class = " flex justify-center mt-6 space-x-2 " >
< div class = " w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > ✓ </ div >
< div class = " w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > ✓ </ div >
< div class = " w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > ✓ </ div >
< div class = " w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > 4 </ div >
< div class = " w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold " > 5 </ div >
</ div >
< form wire : submit = " createRoute " class = " space-y-6 mt-8 text-left " >
2026-01-23 00:56:01 +01:00
@ if ( ! empty ( $formErrors [ 'general' ]))
2026-01-22 23:38:00 +01:00
< div class = " p-3 bg-red-50 border border-red-200 rounded-md " >
2026-01-23 00:56:01 +01:00
< p class = " text-red-600 text-sm " > {{ $formErrors [ 'general' ] }} </ p >
2026-01-22 23:38:00 +01:00
</ div >
@ endif
< div >
< label for = " routeFeedId " class = " block text-sm font-medium text-gray-700 mb-2 " >
Select Feed
</ label >
< select
id = " routeFeedId "
wire : model = " routeFeedId "
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
required
>
< option value = " " > Select a feed </ option >
@ foreach ( $feeds as $feed )
2026-03-07 10:43:48 +01:00
< option value = " { { $feed->id }} " > {{ $feed -> name }} ({{ $feed -> language ? -> short_code ? ? '?' }}) </ option >
2026-01-22 23:38:00 +01:00
@ endforeach
</ select >
@ error ( 'routeFeedId' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
</ div >
< div >
< label for = " routeChannelId " class = " block text-sm font-medium text-gray-700 mb-2 " >
Select Channel
</ label >
< select
id = " routeChannelId "
wire : model = " routeChannelId "
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
required
>
< option value = " " > Select a channel </ option >
@ foreach ( $channels as $channel )
2026-03-07 10:43:48 +01:00
< option value = " { { $channel->id }} " > {{ $channel -> display_name ? ? $channel -> name }} ({{ $channel -> language ? -> short_code ? ? '?' }}) </ option >
2026-01-22 23:38:00 +01:00
@ endforeach
</ select >
@ if ( $channels -> isEmpty ())
< p class = " text-sm text-gray-500 mt-1 " >
No channels available . Please create a channel first .
</ p >
@ endif
@ error ( 'routeChannelId' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
</ div >
< div >
< label for = " routePriority " class = " block text-sm font-medium text-gray-700 mb-2 " >
Priority ( 1 - 100 )
</ label >
< input
type = " number "
id = " routePriority "
wire : model = " routePriority "
min = " 1 "
max = " 100 "
placeholder = " 50 "
class = " w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 "
>
< p class = " text-sm text-gray-500 mt-1 " >
Higher priority routes are processed first ( default : 50 )
</ p >
@ error ( 'routePriority' ) < p class = " text-red-600 text-sm mt-1 " > {{ $message }} </ p > @ enderror
</ div >
< div class = " flex justify-between " >
< button type = " button " wire : click = " previousStep " class = " px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200 " >
← Back
</ button >
< button
type = " submit "
@ disabled ( $isLoading || $channels -> isEmpty ())
class = " bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50 "
>
{{ $isLoading ? 'Creating...' : 'Continue' }}
</ button >
</ div >
</ form >
</ div >
@ endif
{{ -- Step 6 : Complete -- }}
@ if ( $step === 6 )
< div class = " text-center " >
< div class = " mb-6 " >
< div class = " w-16 h-16 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 " >
< svg class = " w-8 h-8 " fill = " none " stroke = " currentColor " viewBox = " 0 0 24 24 " >
< path stroke - linecap = " round " stroke - linejoin = " round " stroke - width = " 2 " d = " M5 13l4 4L19 7 " ></ path >
</ svg >
</ div >
< h1 class = " text-3xl font-bold text-gray-900 mb-2 " > Setup Complete !</ h1 >
< p class = " text-gray-600 mb-6 " >
Great ! You ' ve successfully configured FFR . Your feeds will now be monitored and articles will be automatically posted to your configured channels .
</ p >
</ div >
{{ -- Progress indicator -- }}
< div class = " flex justify-center mb-8 space-x-2 " >
< div class = " w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > ✓ </ div >
< div class = " w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > ✓ </ div >
< div class = " w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > ✓ </ div >
< div class = " w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold " > ✓ </ div >
</ div >
< div class = " space-y-4 mb-8 " >
< div class = " bg-blue-50 border border-blue-200 rounded-lg p-4 " >
< h3 class = " font-semibold text-blue-900 mb-2 " > What happens next ? </ h3 >
< ul class = " text-sm text-blue-800 space-y-1 text-left " >
< li > • Your feeds will be checked regularly for new articles </ li >
< li > • New articles will be automatically posted to your channels </ li >
< li > • You can monitor activity in the Articles and other sections </ li >
</ ul >
</ div >
< div class = " bg-yellow-50 border border-yellow-200 rounded-lg p-4 " >
< h3 class = " font-semibold text-yellow-900 mb-2 " > Want more control ? </ h3 >
< p class = " text-sm text-yellow-800 text-left mb-2 " >
You can add more feeds , channels , and configure settings from the dashboard .
</ p >
</ div >
</ div >
< div class = " space-y-3 " >
< button
wire : click = " completeOnboarding "
@ disabled ( $isLoading )
class = " w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50 "
>
{{ $isLoading ? 'Finishing...' : 'Go to Dashboard' }}
</ button >
< div class = " text-sm text-gray-500 " >
< a href = " { { route('articles') }} " class = " hover:text-blue-600 " > View Articles </ a >
•
< a href = " { { route('feeds') }} " class = " hover:text-blue-600 " > Manage Feeds </ a >
•
< a href = " { { route('settings') }} " class = " hover:text-blue-600 " > Settings </ a >
</ div >
</ div >
</ div >
@ endif
</ div >
</ div >
