Skip to content

Commit b7fe439

Browse files
VilkrinVilkrin
committed
Add Livewire avatar uploader component
Introduces a new Livewire AvatarUploader component with file upload and removal functionality. Updates profile page to use the new component and removes duplicate avatar upload markup. Also removes the Mission Board link from the main layout and adds a placeholder for Two-Factor Authentication in the profile view.
1 parent 06d11f0 commit b7fe439

File tree

4 files changed

+93
-33
lines changed

4 files changed

+93
-33
lines changed

‎app/Livewire/AvatarUploader.php‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<?php
2+
3+
namespace App\Livewire;
4+
5+
use Livewire\Component;
6+
use Livewire\WithFileUploads;
7+
use Livewire\Attributes\Validate;
8+
9+
class AvatarUploader extends Component
10+
{
11+
use WithFileUploads;
12+
13+
#[Validate('image|max:10240')] // 10MB Max
14+
public $photo;
15+
16+
public function render()
17+
{
18+
return view('livewire.avatar-uploader');
19+
}
20+
21+
public function removePhoto()
22+
{
23+
$this->photo->delete();
24+
$this->photo = null;
25+
}
26+
public function save()
27+
{
28+
$this->photo->store(path: 'photos');
29+
return $this->redirect('...');
30+
}
31+
}

‎resources/views/components/layouts/main.blade.php‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,6 @@
6666
</svg>
6767
<span class="font-exo">Fleet Roster</span>
6868
</a>
69-
<a href="{{ route('mission-board') }}" class="flex items-center space-x-2 transition-colors group {{ request()->routeIs('mission-board') ? 'text-amber-400' : 'text-slate-300 hover:text-amber-400' }}">
70-
<svg class="h-4 w-4 group-hover:text-amber-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
71-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
72-
</svg>
73-
<span class="font-exo">Mission Board</span>
74-
</a>
7569
<a href="{{ route('recruitment') }}" class="flex items-center space-x-2 transition-colors group {{ request()->routeIs('recruitment') ? 'text-amber-400' : 'text-slate-300 hover:text-amber-400' }}">
7670
<svg class="h-4 w-4 group-hover:text-amber-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7771
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>

‎resources/views/livewire/avatar-uploader.blade.php‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!-- Blade view: -->
2+
3+
<form wire:submit="save">
4+
<flux:file-upload wire:model="photo">
5+
<!-- Custom avatar uploader -->
6+
<div class="
7+
relative flex items-center justify-center size-20 rounded-full transition-colors cursor-pointer
8+
border border-zinc-200 dark:border-white/10 hover:border-zinc-300 dark:hover:border-white/10
9+
bg-zinc-100 hover:bg-zinc-200 dark:bg-white/10 hover:dark:bg-white/15 in-data-dragging:dark:bg-white/15
10+
">
11+
<!-- Show the uploaded file if it exists -->
12+
@if ($photo)
13+
<img src="{{ $photo?->temporaryUrl() }}" class="size-full object-cover rounded-full" />
14+
@else
15+
<!-- Show the default icon if no file is uploaded -->
16+
<flux:icon name="user" variant="solid" class="text-zinc-500 dark:text-zinc-400" />
17+
@endif
18+
19+
<!-- Corner upload icon -->
20+
<div class="absolute bottom-0 right-0 bg-white dark:bg-zinc-800 rounded-full">
21+
<flux:icon name="arrow-up-circle" variant="solid" class="text-zinc-500 dark:text-zinc-400" />
22+
</div>
23+
</div>
24+
</flux:file-upload>
25+
26+
<flux:file-upload wire:model="photo">
27+
28+
<div
29+
class="relative flex items-center justify-center h-24 w-24 rounded-full transition-colors cursor-pointer
30+
border border-amber-400/40 hover:border-amber-400/60
31+
bg-amber-400/20 hover:bg-amber-400/30
32+
dark:border-amber-400/20 dark:hover:border-amber-400/40
33+
dark:bg-amber-400/10 dark:hover:bg-amber-400/20"
34+
>
35+
@if ($photo)
36+
<!-- Preview uploaded avatar -->
37+
<img src="{{ $photo->temporaryUrl() }}" class="h-full w-full object-cover rounded-full" />
38+
@else
39+
<!-- Your existing fallback -->
40+
<div class="h-full w-full flex items-center justify-center rounded-full text-2xl font-bold text-amber-300">
41+
CS
42+
</div>
43+
@endif
44+
45+
<!-- Corner upload icon -->
46+
<div
47+
class="absolute bottom-0 right-0 bg-white dark:bg-zinc-800 p-1 rounded-full shadow
48+
border border-zinc-200 dark:border-zinc-700"
49+
>
50+
<flux:icon name="arrow-up-circle" variant="solid" class="h-5 w-5 text-amber-500 dark:text-amber-400" />
51+
</div>
52+
</div>
53+
</flux:file-upload>
54+
55+
{{-- <flux:button type="submit">Save</flux:button> --}}
56+
</form>
57+

‎resources/views/profile/index.blade.php‎

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,34 +31,8 @@
3131

3232
<div class="p-6 pt-0 space-y-6">
3333
<div class="flex justify-center mb-6">
34-
<flux:file-upload wire:model="photo">
35-
<div
36-
class="relative flex items-center justify-center h-24 w-24 rounded-full transition-colors cursor-pointer
37-
border border-amber-400/40 hover:border-amber-400/60
38-
bg-amber-400/20 hover:bg-amber-400/30
39-
dark:border-amber-400/20 dark:hover:border-amber-400/40
40-
dark:bg-amber-400/10 dark:hover:bg-amber-400/20"
41-
>
42-
@if ($photo)
43-
<!-- Preview uploaded avatar -->
44-
<img src="{{ $photo->temporaryUrl() }}" class="h-full w-full object-cover rounded-full" />
45-
@else
46-
<!-- Your existing fallback -->
47-
<div class="h-full w-full flex items-center justify-center rounded-full text-2xl font-bold text-amber-300">
48-
CS
49-
</div>
50-
@endif
51-
52-
<!-- Corner upload icon -->
53-
<div
54-
class="absolute bottom-0 right-0 bg-white dark:bg-zinc-800 p-1 rounded-full shadow
55-
border border-zinc-200 dark:border-zinc-700"
56-
>
57-
<flux:icon name="arrow-up-circle" variant="solid" class="h-5 w-5 text-amber-500 dark:text-amber-400" />
58-
</div>
59-
</div>
60-
</flux:file-upload>
6134

35+
<livewire:avatar-uploader />
6236

6337
</div>
6438
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -173,6 +147,10 @@ class="absolute bottom-0 right-0 bg-white dark:bg-zinc-800 p-1 rounded-full shad
173147

174148
<div class="pt-4 border-t border-slate-800">
175149
<label class="text-sm font-medium text-slate-200">Two-Factor Authentication</label>
150+
<div class="mt-2 flex items-center justify-between">
151+
<p class="text-sm text-slate-300">Coming Soon - Not implemented yet.</p>
152+
153+
</div>
176154
<div class="mt-2 flex items-center justify-between">
177155
<p class="text-sm text-slate-300">Add an extra layer of security to your account</p>
178156
<button class="inline-flex items-center justify-center h-9 px-4 border border-slate-700 bg-slate-900/50 rounded-md text-sm text-slate-300 hover:bg-slate-800/50">Enable 2FA</button>

0 commit comments

Comments
 (0)