Skip to content

Commit

Permalink
feat: improved onboarding
Browse files Browse the repository at this point in the history
  • Loading branch information
@lewislarsen
lewislarsen committed Jun 15, 2024
1 parent fab5b05 commit 2ed68ca
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 51 deletions.
6 changes: 5 additions & 1 deletion resources/views/dashboard.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
@section('title', 'Overview')
@if (Auth::user()->backupTasks->isNotEmpty())
@section('title', 'Overview')
@else
@section('title', 'Steps to Get Started')
@endif
<x-app-layout>
@if (Auth::user()->backupTasks->isNotEmpty())
<x-slot name="header">
Expand Down
87 changes: 58 additions & 29 deletions resources/views/livewire/layout/navigation.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
use App\Livewire\Actions\Logout;
use Livewire\Volt\Component;
new class extends Component
{
new class extends Component {
public function logout(Logout $logout): void
{
$logout();
Expand All @@ -21,42 +20,65 @@ public function logout(Logout $logout): void
<!-- Logo -->
<div class="shrink-0 flex items-center">
<a href="{{ route('overview') }}" wire:navigate>
<x-application-logo class="block h-14 w-auto fill-current text-white mt-2" />
<x-application-logo class="block h-14 w-auto fill-current text-white mt-2"/>
</a>
</div>

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<x-nav-link :href="route('overview')" :active="request()->routeIs('overview')" wire:navigate>
@svg('heroicon-o-book-open', 'h-5 w-5 text-gray-50 dark:text-gray-200 mr-2')
{{ __('Overview') }}
</x-nav-link>
<x-nav-link :href="route('backup-tasks.index')" :active="request()->routeIs('backup-tasks.*')" wire:navigate>
@svg('heroicon-o-archive-box', 'h-5 w-5 text-gray-50 dark:text-gray-200 mr-2')
{{ __('Backup Tasks') }}
</x-nav-link>
<x-nav-link :href="route('backup-destinations.index')" :active="request()->routeIs('backup-destinations.*')" wire:navigate>
@svg('heroicon-o-globe-europe-africa', 'h-5 w-5 text-gray-50 dark:text-gray-200 mr-2')
{{ __('Backup Destinations') }}
</x-nav-link>
<x-nav-link :href="route('remote-servers.index')" :active="request()->routeIs('remote-servers.*')" wire:navigate>
@svg('heroicon-o-server-stack', 'h-5 w-5 text-gray-50 dark:text-gray-200 mr-2')
{{ __('Remote Servers') }}
</x-nav-link>
@if (Auth::user()->backupTasks->isNotEmpty())
<x-nav-link :href="route('overview')" :active="request()->routeIs('overview')" wire:navigate>
@svg('heroicon-o-book-open', 'h-5 w-5 text-gray-50 dark:text-gray-200 mr-2')
{{ __('Overview') }}
</x-nav-link>
@else
<x-nav-link :href="route('overview')" :active="request()->routeIs('overview')" wire:navigate>
@svg('heroicon-o-rocket-launch', 'h-5 w-5 text-gray-50 dark:text-gray-200 mr-2')
{{ __('Steps to Get Started') }}
</x-nav-link>
@endif
@if (Auth::user()->backupTasks->isNotEmpty())
<x-nav-link :href="route('backup-tasks.index')" :active="request()->routeIs('backup-tasks.*')"
wire:navigate>
@svg('heroicon-o-archive-box', 'h-5 w-5 text-gray-50 dark:text-gray-200 mr-2')
{{ __('Backup Tasks') }}
</x-nav-link>
@endif
@if (Auth::user()->backupDestinations->isNotEmpty())
<x-nav-link :href="route('backup-destinations.index')"
:active="request()->routeIs('backup-destinations.*')" wire:navigate>
@svg('heroicon-o-globe-europe-africa', 'h-5 w-5 text-gray-50 dark:text-gray-200 mr-2')
{{ __('Backup Destinations') }}
</x-nav-link>
@endif
@if (Auth::user()->remoteServers->isNotEmpty())
<x-nav-link :href="route('remote-servers.index')"
:active="request()->routeIs('remote-servers.*')" wire:navigate>
@svg('heroicon-o-server-stack', 'h-5 w-5 text-gray-50 dark:text-gray-200 mr-2')
{{ __('Remote Servers') }}
</x-nav-link>
@endif
</div>
</div>

<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ms-6">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-50 bg-transparent hover:text-gray-100 focus:outline-none transition ease-in-out duration-150">
<img class="h-8 w-8 rounded-full mr-2 border border-gray-950" src="{{ \Illuminate\Support\Facades\Auth::user()->gravatar() }}" alt="{{ \Illuminate\Support\Facades\Auth::user()->name }}" />
<div x-data="{{ json_encode(['name' => auth()->user()->first_name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
<button
class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-50 bg-transparent hover:text-gray-100 focus:outline-none transition ease-in-out duration-150">
<img class="h-8 w-8 rounded-full mr-2 border border-gray-950"
src="{{ \Illuminate\Support\Facades\Auth::user()->gravatar() }}"
alt="{{ \Illuminate\Support\Facades\Auth::user()->name }}"/>
<div x-data="{{ json_encode(['name' => auth()->user()->first_name]) }}" x-text="name"
x-on:profile-updated.window="name = $event.detail.name"></div>

<div class="ms-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"/>
</svg>
</div>
</button>
Expand Down Expand Up @@ -92,10 +114,14 @@ public function logout(Logout $logout): void

<!-- Hamburger -->
<div class="-me-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
<button @click="open = ! open"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"/>
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
Expand All @@ -105,7 +131,8 @@ public function logout(Logout $logout): void
<!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('remote-servers.index')" :active="request()->routeIs('remote-servers.*')" wire:navigate>
<x-responsive-nav-link :href="route('remote-servers.index')"
:active="request()->routeIs('remote-servers.*')" wire:navigate>
@svg('heroicon-o-server-stack', 'h-5 w-5 text-gray-50 dark:text-gray-200 mr-2')
{{ __('Remote Servers') }}
</x-responsive-nav-link>
Expand All @@ -114,7 +141,9 @@ public function logout(Logout $logout): void
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
<div class="px-4">
<div class="font-medium text-base text-gray-800 dark:text-gray-200" x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
<div class="font-medium text-base text-gray-800 dark:text-gray-200"
x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name"
x-on:profile-updated.window="name = $event.detail.name"></div>
<div class="font-medium text-sm text-gray-500">{{ auth()->user()->email }}</div>
</div>

Expand Down
66 changes: 46 additions & 20 deletions resources/views/partials/steps-to-get-started/view.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="col-span-1">
<h2 class="text-4xl font-bold mb-8">Steps to Get Started</h2>
<hr class="border-2 border-white w-20 mb-12" />
<hr class="border-2 border-white w-20 mb-12"/>
</div>
</div>
<div class="grid md:grid-cols-12 gap-6 md:space-x-3">
Expand All @@ -16,20 +16,20 @@
{{ __('Link your first Remote Server') }}
</p>
<div class="p-3 my-4 flex justify-between space-x-4">
<x-icons.ubuntu class="h-14 w-14" />
<x-icons.debian class="h-14 w-14" />
<x-icons.tux class="h-14 w-14" />
<x-icons.ubuntu class="h-14 w-14"/>
<x-icons.debian class="h-14 w-14"/>
<x-icons.tux class="h-14 w-14"/>
</div>
<div class="text-sm">
{{ __('We support Ubuntu and Debian distributions primarily.') }}
</div>
<div>
<a href="{{ route('remote-servers.create') }}" wire:navigate>
<x-primary-button class="mt-4" centered fat>
{{ __('Link Remote Server') }}
@svg('heroicon-o-arrow-right', 'h-5 w-5 ml-2')
</x-primary-button>
</a>
<a href="{{ route('remote-servers.create') }}" wire:navigate>
<x-primary-button class="mt-4" centered fat>
{{ __('Link Remote Server') }}
@svg('heroicon-o-arrow-right', 'h-5 w-5 ml-2')
</x-primary-button>
</a>
</div>
</div>
<div class="bg-white rounded-[0.70rem] px-5 py-5 text-gray-950 col-span-4">
Expand All @@ -40,20 +40,32 @@
{{ __('Connect a Backup Destination') }}
</p>
<div class="p-3 my-4 flex justify-between space-x-4">
<x-icons.aws class="h-14 w-14" />
<x-icons.upcloud class="h-14 w-14" />
<x-icons.gcp class="h-14 w-14" />
<x-icons.aws class="h-14 w-14"/>
<x-icons.upcloud class="h-14 w-14"/>
<x-icons.gcp class="h-14 w-14"/>
</div>
<div class="text-sm">
{{ __('Add your S3 bucket API details to store your backups safely.') }}
</div>
<div>
<a href="{{ route('backup-destinations.create') }}" wire:navigate>
<x-primary-button class="mt-4" centered fat>
@if (Auth::user()->remoteServers->isEmpty())
<div class="my-3 bg-red-50 rounded-lg p-2.5">
@svg('heroicon-o-exclamation-triangle', 'h-5 w-5 text-red-500 mr-2 inline')
<span class="text-red-500 text-sm">{{ __('You need to link a Remote Server first.') }}</span>
</div>
<x-primary-button
class="mt-4 cursor-not-allowed bg-opacity-50 hover:bg-opacity-50 focus:bg-opacity-50"
centered fat disabled>
{{ __('Add your Backup Destination') }}
@svg('heroicon-o-arrow-right', 'h-5 w-5 ml-2')
</x-primary-button>
</a>
@else
<a href="{{ route('backup-destinations.create') }}" wire:navigate>
<x-primary-button class="mt-4" centered fat>
{{ __('Add another Backup Destination') }}
@svg('heroicon-o-arrow-right', 'h-5 w-5 ml-2')
</x-primary-button>
@endif
</div>
</div>
<div class="bg-white rounded-[0.70rem] px-5 py-5 text-gray-950 col-span-4">
Expand All @@ -70,17 +82,31 @@
{{ __('Easily control when your backups run and be notified of their progress.') }}
</div>
<div>
<a href="{{ route('backup-tasks.create') }}" wire:navigate>
<x-primary-button class="mt-6" centered fat>
@if (Auth::user()->remoteServers->isEmpty() || Auth::user()->backupDestinations->isEmpty())
<div class="my-3 bg-red-50 rounded-lg p-2.5">
@svg('heroicon-o-exclamation-triangle', 'h-5 w-5 text-red-500 mr-2 inline')
<span
class="text-red-500 text-sm">{{ __('You need to link a Backup Destination first.') }}</span>
</div>
<x-primary-button
class="mt-4 cursor-not-allowed bg-opacity-50 hover:bg-opacity-50 focus:bg-opacity-50"
centered fat disabled>
{{ __('Create your first Backup Task') }}
@svg('heroicon-o-arrow-right', 'h-5 w-5 ml-2')
</x-primary-button>
</a>
@else
<a href="{{ route('backup-tasks.create') }}" wire:navigate>
<x-primary-button class="mt-6" centered fat>
{{ __('Create your first Backup Task') }}
@svg('heroicon-o-arrow-right', 'h-5 w-5 ml-2')
</x-primary-button>
</a>
@endif
</div>
</div>
</div>
<div class="text-center md:my-16">
<x-application-logo class="h-32 w-32 inline" />
<x-application-logo class="h-32 w-32 inline"/>
</div>
</div>
</div>
Expand Down
7 changes: 6 additions & 1 deletion routes/breadcrumbs.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;

Breadcrumbs::for('overview', function (BreadcrumbTrail $trail) {
$trail->push(__('Overview'), route('overview'));

if (Auth::user()?->backupTasks()->exists()) {
$trail->push(__('Overview'), route('overview'));
} else {
$trail->push(__('Steps to Get Started'), route('overview'));
}
});

Breadcrumbs::for('frequently-asked-questions', function (BreadcrumbTrail $trail) {
Expand Down

0 comments on commit 2ed68ca

Please sign in to comment.