Fix error handling for mailgateway forms

app/View/Form/Select.php

@@ -33,7 +33,7 @@ class Select extends Component
                 @endif
 
                 <div class="relative flex-none flex">
-                    <select {{$attributes}} @if($disabled) disabled @endif name="{{$name}}"
+                    <select {{$attributes}} @if($disabled) disabled @endif name="{{$name}}" id="{{$id}}"
                         class="
                             w-full h-[var(--height)] border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg
                             group-[.size-default]:border-2 group-[.size-sm]:border
@@ -47,6 +47,7 @@ class Select extends Component
                         <option value="{{$option['id']}}">{{ $option['name'] }}</option>
                         @endforeach
                     </select>
+                    <x-ui::errors :for="$name" />
                     @if($hint)
                     <x-form::hint class="right-6">{{$hint}}</x-form::hint>
                     @endif

app/View/Form/Text.php

@@ -32,13 +32,6 @@ class Text extends Component
                 @endif
                 <div class="relative flex-none flex">
                     <input
-                        @error($name) x-init="tippy($el, {
-                            content: () => '@error($name){{$message}}@enderror',
-                            showOnCreate: true,
-                            theme: 'danger',
-                            placement: 'top-end',
-                            delay: [0, 3000],
-                        })" @enderror
                         id="{{$id}}"
                         type="{{$type}}"
                         @if ($type === 'password') autocomplete="off" @endif
@@ -51,6 +44,7 @@ class Text extends Component
                         "
                         {{ $attributes }}
                     />
+                    <x-ui::errors :for="$name" />
                     @if($hint)
                     <x-form::hint>{{$hint}}</x-form::hint>
                     @endif

app/View/Ui/Errors.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\View\Ui;
+
+use Illuminate\View\Component;
+
+class Errors extends Component
+{
+
+    public function __construct(
+        public string $for,
+    ) {
+    }
+
+    public function id(): string
+    {
+        return 'errors-' . str_replace('.', '--', $this->for);
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            @error($for)
+            <div x-data="{error: ''}" x-init="window.setTimeout(() => document.querySelector('#{{$id()}}') ? document.querySelector('#{{$id()}}').remove() : null, 2000)" class="absolute bottom-[calc(100%+0.5rem)] right-0" id="{{$id}}">
+                <div class="tippy-box" tabindex="-1" data-theme="danger" data-placement="top">
+                    <div class="tippy-content">{{$message}}</div>
+                    <div class="tippy-arrow absolute right-0 mr-2"></div>
+                </div>
+            </div>
+            @enderror
+        HTML;
+    }
+}

modules/Mailgateway/Components/Form.php

@@ -36,7 +36,7 @@ class Form extends Component
             'type' => 'Typ',
             'name' => 'Beschreibung',
             'domain' => 'Domain',
-            ...$this->type ? collect($this->type::fieldNames())->mapWithKeys(fn ($attribute, $key) => ["params.{$key}" => $attribute]) : [],
+            ...$this->type ? collect($this->type::fieldNames())->mapWithKeys(fn ($attribute, $key) => ["type.{$key}" => $attribute]) : [],
         ];
     }
 
@@ -104,11 +104,11 @@ class Form extends Component
                     <x-form::select name="typeClass" wire:model.live="typeClass" label="Typ" :options="$types" required />
                     @foreach($this->fields() as $index => $field)
                         <x-form::text
-                            wire:key="index"
+                            wire:key="$index"
                             wire:model="type.{{$field['name']}}"
                             :label="$field['label']"
                             :type="$field['type']"
-                            :name="$field['name']"
+                            :name="'type.'.$field['name']"
                             :required="str_contains('required', $field['validator'])"
                         ></x-form::text>
                     @endforeach

modules/Nami/Components/SettingView.php

@@ -14,7 +14,7 @@ class SettingView extends Component
 
     public $settingClass = NamiSettings::class;
 
-    #[Validate('required|string|min:4')]
+    #[Validate('required|string')]
     public string $password = '';
     #[Validate('required|string')]
     public string $mglnr = '';

resources/livewire-js/app.js

@@ -6,34 +6,14 @@ import 'tippy.js/dist/tippy.css';
 import 'tippy.js/animations/shift-toward.css';
 import '../css/tooltip.css';
 import {error, success} from './toastify.js';
-import tippy from 'tippy.js';
 
-const defaultTippy = {
+Alpine.plugin(
+    Tooltip.defaultProps({
         theme: 'primary',
         animation: 'shift-toward',
-};
+    })
-
+);
-Alpine.plugin(Tooltip.defaultProps(defaultTippy));
 
 window.addEventListener('success', (event) => success(event.detail[0]));
 
-document.addEventListener('alpine:init', () => {
-    Alpine.directive('error', function (el, {value, modifiers, expression}, {Alpine, effect, cleanup, evaluateLater}) {
-        let getThingToLog = evaluateLater(expression);
-
-        // el._x_custom_tippy = new tippy(el, {
-        //     ...defaultTippy,
-        //     content: '',
-        // });
-
-        effect(() => {
-            getThingToLog((thingToLog) => {
-                console.log(thingToLog);
-            });
-        });
-    });
-});
-
-window.tippy = tippy;
-
 Livewire.start();

routes/web.php

@@ -76,7 +76,6 @@ use App\Membership\Actions\MembershipStoreAction;
 use App\Membership\Actions\MembershipUpdateAction;
 use App\Payment\SubscriptionController;
 
-Route::get('/lala', fn () => auth()->login(\App\User::first()));
 Route::group(['namespace' => 'App\\Http\\Controllers'], function (): void {
     Auth::routes(['register' => false]);
 });