add name change support & adjust profile list view

app/Http/Controllers/AuthController.php

@@ -18,12 +18,16 @@ class AuthController extends Controller
 		$user = Socialite::driver('authentik')->user();
 
 		$authUser = User::updateOrCreate(
-			[ 'email' => $user->getEmail() ],
+			[ 'email' => $user->getEmail() ]
-			[ 'name' => $user->getName() ]
 		);
 
 		if ($authUser)
 		{
+			if ($authUser->name == '')
+			{
+				$authUser->name = $user->getName();
+				$authUser->save();
+			}
 			Auth::login($authUser);
 			return redirect('/');
 		}

app/Livewire/Pages/Profile.php

@@ -4,6 +4,7 @@ namespace App\Livewire\Pages;
 
 use App\Models\User;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
 use Livewire\Attributes\Validate;
 use Livewire\Component;
 use Livewire\WithFileUploads;
@@ -14,15 +15,39 @@ class Profile extends Component
 
 	public User $user;
 
-	#[Validate('image|max:10240')]
 	public $avatar = null;
+	public string $name = '';
+
+	public function mount(User $user)
+	{
+		$this->user = $user;
+		$this->name = $user->name;
+	}
 
     public function render()
     {
         return view('livewire.pages.profile')->title($this->user->name);
     }
 
-	public function updated()
+	public function rules()
+	{
+		return [
+			'avatar' => [
+				'nullable',
+				'image',
+				'max:10240',
+			],
+			'name' => [
+				'required',
+				'string',
+				'min:2',
+				'max:80',
+				Rule::unique('users', 'name')->ignore($this->user),
+			],
+		];
+	}
+
+	public function updated($name, $value)
 	{
 		if (Auth::id() != $this->user->id)
 		{
@@ -31,10 +56,16 @@ class Profile extends Component
 
 		$this->validate();
 
-		$this->user->avatarExt = $this->avatar->getClientOriginalExtension();
+		$this->user->update([$name => $value]);
-		$this->user->save();
+
+		if (isset($this->avatar))
+		{
+			$this->user->avatarExt = $this->avatar->getClientOriginalExtension();
+			$this->user->save();
+
+			$this->avatar->storeAs('avatars', $this->user->id);
+			return $this->redirect("/profiles/{$this->user->id}");
+		}
 
-		$this->avatar->storeAs('avatars', $this->user->id);
-		return $this->redirect("/profiles/{$this->user->id}");
 	}
 }

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "photos",
+    "name": "nyaabooru",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {

resources/views/livewire/app/pfp.blade.php

@@ -5,4 +5,6 @@
 	label="avatar for {{ $user->name }}"
 	shape="{{ $shape }}"
 	style="--size: {{ $size }}"
-></wa-avatar>
+>
+	<livewire:app.icon name="question" slot="icon" style="font-size: 2.5rem;" />
+</wa-avatar>

resources/views/livewire/app/user-card.blade.php

@@ -1,13 +1,11 @@
-<article class="wa-stack nyaabooru-pfp">
+<wa-card>
-	<a class="wa-frame wa-border-radius-l" style="inline-size: 15rem;" href="{{ url("/profiles/$user->id") }}" wire:navigate.hover>
+	<a class="wa-stack nyaabooru-pfp wa-link-plain" href="{{ url("/profiles/$user->id") }}" wire:navigate.hover>
-		@if (\Illuminate\Support\Facades\Storage::has("avatars/$user->id"))
+		<div class="wa-frame wa-border-radius-l" style="inline-size: 10rem;">
-			<img src="{{ $user->getAvatarBase64() }}"/>
+			<livewire:app.pfp :$user size="10rem" />
-		@else
+		</div>
-			<livewire:app.icon name="user" />
+		<div class="wa-stack wa-gap-3xs">
-		@endif
+			<span class="wa-heading-s">{{ $user->name }}</span>
+			<span class="wa-caption-m">Joined <wa-format-date value="{{ $user->created_at }}"></wa-format-date></span>
+		</div>
 	</a>
-	<div class="wa-stack wa-gap-3xs">
+</wa-card>
-		<span class="wa-heading-s">{{ $user->name }}</span>
-		<span class="wa-caption-m">Joined <wa-format-date value="{{ $user->created_at }}"></wa-format-date></span>
-	</div>
-</article>

resources/views/livewire/pages/profile.blade.php

@@ -23,13 +23,26 @@
 			<h2>User settings</h2>
 			<form wire:submit>
 				<wa-card>
-					<div class="wa-stack">
+					<div class="wa-stack wa-gap-l">
-						<span class="wa-heading-m">Profile picture</span>
+						<div class="wa-stack">
-						<input type="file" wire:model.live="avatar" wire:loading.attr="disabled" />
+							<span class="wa-heading-s">Profile picture</span>
-						@error('avatar')
+							<input type="file" wire:model.live="avatar" wire:loading.attr="disabled" />
+							@error('avatar')
+								<span class="wa-caption-m">{{ $message }}</span>
+							@enderror
+						</div>
+
+						<wa-divider></wa-divider>
+
+						<wa-input label="Display name" wire:model.live="name">
+							<livewire:app.icon name="user-tag" slot="start" />
+						</wa-input>
+						@error('name')
 							<span class="wa-caption-m">{{ $message }}</span>
 						@enderror
+
 					</div>
+
 				</wa-card>
 			</form>
 		</div>