Sanitize username input by replacing invalid characters with underscores

Author: Irvan789

app/Livewire/Profile.php

@@ -102,6 +102,8 @@ public function updateProfileInformation(): void
     {
         $validated = $this->validate($this->profileRules($this->user->id));
 
+        $validated['username'] = preg_replace('/[^a-zA-Z0-9]/', '_', $validated['username']);
+
         $this->user->fill($validated);
 
         if ($this->user->isDirty('email')) {

app/Livewire/Users/Profile.php

@@ -100,6 +100,8 @@ public function updateProfileInformation(): void
     {
         $validated = $this->validate($this->profileRules($this->user->id));
 
+        $validated['username'] = preg_replace('/[^a-zA-Z0-9]/', '_', $validated['username']);
+
         $this->user->fill($validated);
 
         if ($this->user->isDirty('email')) {

resources/views/livewire/profile.blade.php

@@ -57,6 +57,7 @@ class="cursor-pointer hover:underline"
         label="Username"
         type="text"
         wire:model="username"
+        x-on:input="username"
       />
 
       <x-input-text
@@ -163,3 +164,9 @@ class="xs:max-w-30 ml-auto w-full text-xs/3"
     </x-form>
   </div>
 </x-contents>
+
+<script lang="js">
+  const username = (event) => {
+    event.target.value = event.target.value.replaceAll(/[^a-zA-Z0-9_]/g, "_").toLowerCase()
+  }
+</script>

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

@@ -29,6 +29,7 @@ class="size-24 rounded-full"
         label="Username"
         type="text"
         wire:model="username"
+        x-on:input="username"
       />
 
       <x-input-text
@@ -140,3 +141,9 @@ class="xs:max-w-30 ml-auto w-full text-xs/3"
     </x-button>
   </div>
 </x-contents>
+
+<script lang="js">
+  const username = (event) => {
+    event.target.value = event.target.value.replaceAll(/[^a-zA-Z0-9_]/g, "_").toLowerCase()
+  }
+</script>