Introduzione primi input gestiti tramite Blade

app/Http/Controllers/Auth/RegisteredUserController.php

@@ -1,50 +0,0 @@
-<?php
-
-namespace App\Http\Controllers\Auth;
-
-use App\Http\Controllers\Controller;
-use App\Models\User;
-use App\Providers\RouteServiceProvider;
-use Illuminate\Auth\Events\Registered;
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Hash;
-
-class RegisteredUserController extends Controller
-{
-    /**
-     * Display the registration view.
-     *
-     * @return \Illuminate\View\View
-     */
-    public function create()
-    {
-        return view('auth.register');
-    }
-
-    /**
-     * Handle an incoming registration request.
-     *
-     * @throws \Illuminate\Validation\ValidationException
-     *
-     * @return \Illuminate\Http\RedirectResponse
-     */
-    public function store(Request $request)
-    {
-        $request->validate([
-            'name' => 'required|string|max:255',
-            'email' => 'required|string|email|max:255|unique:users',
-            'password' => 'required|string|confirmed|min:8',
-        ]);
-
-        Auth::login($user = User::create([
-            'name' => $request->name,
-            'email' => $request->email,
-            'password' => Hash::make($request->password),
-        ]));
-
-        event(new Registered($user));
-
-        return redirect(RouteServiceProvider::HOME);
-    }
-}

app/View/Components/Input.php

@@ -0,0 +1,69 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class Input extends Component
+{
+    public $unique_id;
+
+    public $id;
+    public $name;
+    public $required;
+    public $label;
+    public $placeholder;
+
+    public $class;
+
+    /**
+     * Create a new component instance.
+     *
+     * @param string $name
+     * @param null $id
+     * @param bool $required
+     * @param null $label
+     * @param null $placeholder
+     */
+    public function __construct(
+        $name,
+        $id = null,
+        $required = false,
+        $label = null,
+        $placeholder = null
+    ) {
+        $this->id = isset($id) ? $id : $name;
+        $this->name = $name;
+
+        $this->required = is_string($required) ? $required == 'true' : (bool) $required;
+        $this->label = $label;
+        $this->placeholder = $placeholder;
+
+        $rand = rand(0, 9999);
+        $this->unique_id = $id.$rand;
+
+        $this->class = 'form-control openstamanager-input';
+
+        // Label e placeholder corretti in base al contenuti obbligatorio o meno
+        if ($this->required) {
+            if (!empty($this->label)) {
+                $this->label .= '*';
+            }
+
+            // Aggiunta
+            elseif (!empty($this->placeholder)) {
+                $this->placeholder .= '*';
+            }
+        }
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.input');
+    }
+}

app/View/Components/Inputs/File.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\View\Components\Inputs;
+
+use App\View\Components\Input;
+use Illuminate\View\Component;
+
+class File extends Input
+{
+    public $type = 'file';
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.inputs.file');
+    }
+}

app/View/Components/Inputs/Password.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\View\Components\Inputs;
+
+use App\View\Components\Input;
+
+class Password extends Input
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.inputs.password');
+    }
+}

app/View/Components/Inputs/Text.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\View\Components\Inputs;
+
+use App\View\Components\Input;
+use Illuminate\View\Component;
+
+class Text extends Input
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.inputs.text');
+    }
+}

resources/views/auth/login.blade.php

@@ -18,10 +18,24 @@
                 <div class="box-body login-box-body">
                     <h4 class="login-box-msg">{{ tr('Accedi') }}</h4>
 
-                    {[ "type": "text", "name": "username", "autocomplete": "username", "placeholder": "{{ tr('Username') }}", "value": "{{ old('username') }}", "icon-before": "<i class=\"fa fa-user\"></i>", "required": 1 ]}
+                    <x-inputs.text :placeholder="tr('Username')" name="username" :value="old('username')" autocomplete="username" required>
+                        <x-slot name="before">
+                            <span class="input-group-addon before">
+                                <i class="fa fa-user"></i>
+                            </span>
+                        </x-slot>
+                    </x-inputs.text>
+
                     <div class="mb-3" style="margin-bottom: 1rem !important;"></div>
 
-                    {[ "type": "password", "name": "password", "autocomplete": "current-password", "placeholder": "{{ tr('Password') }}", "icon-before": "<i class=\"fa fa-lock\"></i>" ]}
+                    <x-inputs.password :placeholder="tr('Password')" name="password" autocomplete="current-password" required>
+                        <x-slot name="before">
+                            <span class="input-group-addon before">
+                                <i class="fa fa-lock"></i>
+                            </span>
+                        </x-slot>
+                    </x-inputs.password>
+
                     <div class="mb-3" style="margin-bottom: 1rem !important;"></div>
 
                     @if (Route::has('password.request'))

resources/views/components/input.blade.php

@@ -0,0 +1,44 @@
+@php
+$is_input_group = !empty($before) || !empty($after);
+@endphp
+
+<div class="form-group">
+    @if(!empty($label))
+    <label for="{{ $attributes->get('id') }}">
+        @if($attributes->has('help'))
+            <span class="tip" title="{{ $attributes->get('help') }}">
+                {{ $label }} <i class="fa fa-question-circle-o"></i>
+            </span>
+        @else
+            {{ $label }}
+        @endif
+    </label>
+    @endif
+
+    @if($is_input_group)
+        <div class="input-group has-feedback">
+    @endif
+
+    {{-- Icona prima dell'input --}}
+    @if(isset($before))
+        {{ $before }}
+    @endif
+
+    {{-- Contenuti dell'input --}}
+    {{ $slot }}
+
+    {{-- Icona dopo l'input --}}
+    @if(isset($after))
+        {{ $after }}
+    @endif
+
+    @if($is_input_group)
+        </div>
+    @endif
+
+    @if($attributes->has('help') and $attributes->has('show-help'))
+        <span class="help-block pull-left"><small>{{ $attributes->get('help') }}</small></span>
+    @endif
+
+    <div id="{{ $unique_id }}-errors"></div>
+</div>

resources/views/components/inputs/file.blade.php

@@ -0,0 +1,6 @@
+<x-input :name="$name" :id="$id" :unique_id="$unique_id" :label="$label">
+    @include('components.inputs.standard-input')
+
+    <x-slot name="before">{{ isset($before) ? $before : null }}</x-slot>
+    <x-slot name="after">{{ isset($after) ? $after : null }}</x-slot>
+</x-input>

resources/views/components/inputs/password.blade.php

@@ -0,0 +1,86 @@
+@php
+    $strength = $attributes->has('strength-trigger');
+@endphp
+
+<x-input :name="$name" :id="$id" :unique_id="$unique_id" :label="$label">
+    @include('components.inputs.standard-input')
+
+    <x-slot name="after">
+        <span class="input-group-addon after">
+            <i onclick="togglePassword_{{ $id }}()" class="clickable fa" id="{{ $id }}_toggle"></i>
+        </span>
+    </x-slot>
+
+    <x-slot name="before">{{ isset($before) ? $before : null }}</x-slot>
+</x-input>
+
+<script>
+    function togglePassword_{{ $id }}() {
+        var button = $("#{{ $id }}_toggle");
+
+        if (button.hasClass("fa-eye")) {
+            $("#{{ $id }}").attr("type", "text");
+            button.removeClass("fa-eye").addClass("fa-eye-slash");
+            button.attr("title", "'.tr('Nascondi password').'");
+        } else {
+            $("#{{ $id }}").attr("type", "password");
+            button.removeClass("fa-eye-slash").addClass("fa-eye");
+            button.attr("title", "'.tr('Visualizza password').'");
+        }
+    }
+
+    $(document).ready(function(){
+        togglePassword_{{ $id }}();
+    });
+</script>
+
+@if($attributes->has('strength-trigger'))
+    <div id="{{ $id }}_viewport_progress"></div>
+
+    <script src="{{ base_url()  }}/assets/dist/password-strength/password.min.js"></script>
+    <script>
+        $(document).ready(function(){
+            $("#{{ $id }}").pwstrength({
+                ui: {
+                    bootstrap3: true,
+                    showVerdictsInsideProgressBar: true,
+                    viewports: {
+                        progress: "#{{ $id }}_viewport_progress",
+                    },
+                    progressBarExtraCssClasses: "progress-bar-striped active",
+                    showPopover: true,
+                    showProgressBar: false,
+                    popoverPlacement: "top",
+                    showStatus: true,
+                    showErrors: true,
+                    showVerdicts: true,
+                    useVerdictCssClass: false,
+                    showScore: false,
+                    progressBarMinWidth: 50,
+                    colorClasses: ["danger", "danger", "warning", "warning", "success", "success"],
+                },
+                i18n: {
+                    t: function (key) {
+                        var result = globals.translations.password[key];
+
+                        return result === key ? \'\' : result;
+                    }
+                },
+                common: {
+                    minChar: 6,
+                    onKeyUp: function(event, data) {
+                        var len = $("#{{ $id }}").val().length;
+
+                        if(len < 6) {
+                            $("{{ $attributes->get('strength-trigger') }}").attr("disabled", true).addClass("disabled");
+                        } else {
+                            $("{{ $attributes->get('strength-trigger') }}").attr("disabled", false).removeClass("disabled");
+                        }
+                    }
+                },
+            });
+
+            $("#{{ $id }}_viewport_progress").insertAfter($("#{{ $id }}").closest(".form-group").find("div[id$=-errors]")).css("margin-top", "5px");
+        });
+    </script>
+@endif

resources/views/components/inputs/standard-input.blade.php

@@ -0,0 +1,9 @@
+<input {{ $attributes->merge([
+    'type' => isset($type) ? $type : 'text',
+    'name' => $name,
+    'id' => $id,
+    'required' => $required,
+    'placeholder' => $placeholder,
+    'class' => $class,
+    'data-parsley-errors-container' => '#'.$unique_id.'-errors'
+ ]) }} autocomplete="{{ $attributes->get('autocomplete', 'off') }}">

resources/views/components/inputs/text.blade.php

@@ -0,0 +1,6 @@
+<x-input :name="$name" :id="$id" :unique_id="$unique_id" :label="$label">
+    @include('components.inputs.standard-input')
+
+    <x-slot name="before">{{ isset($before) ? $before : null }}</x-slot>
+    <x-slot name="after">{{ isset($after) ? $after : null }}</x-slot>
+</x-input>