The laravel custom exception doesn't work in the livewire component, but I don't know why.
This is the livewire blade:
<div>
<form method="POST" wire:submit.prevent="submit">
#csrf
<div x-data="{ id: #entangle('id') }">
<input id="id" type="text" wire:model="id" x-mask="*">
</input>
</div>
#isset($email)
your email is {{$email}}
#endisset
<button type="submit">submit</button>
</form>
</div>
This is the livewire component
class Form extends Component
{
public $id = '';
public $email;
public function submit()
{
$user = User::find($this->id);
if(!empty($user)){
return $this->email=$user->email;
}
throw new UserNotFoundException;
}
}
This is the UserNotFoundException
class UserNotFoundException extends Exception
{
public function render($request)
{
return response()->view('user-not-found');
}
}
After I submitted a wrong id, the browser didn't change to the 'user-not-found' view.
What do I miss? Any suggestion? Thank you!
Related
I'm trying to create a way to dynamically load Livewire nested components by having a main conntainer component like this:
ComponentContainer.php
class ComponentContainer extends Component
{
public $component = 'active';
protected $listeners = [
'switch'
];
public function switch(string $component)
{
$this->component = $component;
}
public function render()
{
return view('livewire.component-container', [
'component' => $this->component,
'key' => random_int(PHP_INT_MIN, PHP_INT_MAX),
]);
}
}
component-container.blade.php
<div>
<h1>Component Container</h1>
#livewire($component, key($key))
<button wire:click="$emit('switch', 'active')">
{{ __('Active') }}
</button>
<button wire:click="$emit('switch', 'expired')">
{{ __('Expired') }}
</button>
</div>
It's working insomuch as when I click "active" or "expired" it's loading one of these components:
Active.php
class Active extends Component
{
public function render()
{
return view('livewire.active');
}
}
active.blade.php
<div>
active
</div>
Expired.php
class Expired extends Component
{
public function render()
{
return view('livewire.expired');
}
}
expired.blade.php
<div>
expired
</div>
But it's giving the following error in the console log, and I don't understand why:
Livewire: Multiple root elements detected. This is not supported. See docs for more information https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-issues <div wire:id="jdHgW7KzB3wWUCl7vMI4">expired</div>
Doesn't seem to make sense as it's clearly just one root element. Interestingly it doesn't do it on the first load, regardless of whether I set $component to active or expired
The error is being caused by the final HTML comment (wire:end) being missing. For some reason, this only happens if the buttons are placed after the dynamic component call....
This displays the "multiple root elements detected" error
<div>
<h1>Component Container</h1>
#livewire($component, key($key))
<button wire:click="$emit('switch', 'active')">
{{ __('Active') }}
</button>
<button wire:click="$emit('switch', 'expired')">
{{ __('Expired') }}
</button>
</div>
But this works fine...
<div>
<h1>Component Container</h1>
<button wire:click="$emit('switch', 'active')">
{{ __('Active') }}
</button>
<button wire:click="$emit('switch', 'expired')">
{{ __('Expired') }}
</button>
#livewire($component, key($key))
</div>
I'm not sure if this is expected behaviour or if it's a bug, but this fixes the issue described.
After choosing the file, this error will be displayed in the console :
Blade file :
<form wire:submit.prevent="Insert" enctype="multipart/form-data">
<input type="file" wire:model.lazy="img" id="img" name="img"/>
#if ($img)
<img src="{{ $img->temporaryUrl() }}">
#endif
<div wire:loading wire:target="img">در حال آپلود ... </div>
<button type="submit"> Submit </button>
</form>
class livewire $img is model :
class Article extends Component
{
use WithFileUploads;
public $img;
public function Insert()
{
dd($this->img);
}
public function render()
{
return view('livewire.article');
}
}
My problem was solved by changing the value of upload_tmp_dir in php.ini
with livewire 1.3 / alpinejs 2.x.x I make listing of data with filter text
and selection inputs and clicking on “Search” button I need to run search when
“Search” button is clicked.
But search is run when text/selection input lose focus without clicking on “Search” button.
I see it by form's wire:loading block and 1 line in log file, which I trigger in render method
That is not what I need : I need to run render method only clicking on “Search” button.
I tried to use alpinejs, but failed...
In component app/Http/Livewire/Admin/AppNews.php I have:
<?php
namespace App\Http\Livewire\Admin;
use Carbon\Carbon;
use Livewire\Component;
use App\News;
use Livewire\WithPagination;
use Livewire\WithFileUploads;
class AppNews extends Component
{
use WithPagination;
use WithFileUploads;
public $filters = [
'title' => '',
'published' => '',
];
];
public $uploaded_file_name;
public $uploadedImageFilenameData;
public $uploadedNewsImage;
protected $listeners = ['fileUpload' => 'handleFileUpload'];
public $current_news_id;
public $updateMode = 'browse';
public function render()
{
\Log::info('-1 NewsRENDER $this->filters ::' . print_r($this->filters, true));
$news_rows_count = News
::getByTitle($this->filters['title'], true)
->getByPublished($this->filters['published'], true)
->count();
$backend_per_page = Settings::getValue('backend_per_page', CheckValueType::cvtInteger, 20);
$this->emit('app_news_opened', ['mode' => 'browse', 'id' => null]);
$newsPublishedValueArray = SetArrayHeader([['key' => '', 'label' => ' -Select published- ']], News::getNewsPublishedValueArray(true));
$newsDataRows = News
::getByTitle($this->filters['title'], true)
->getByPublished($this->filters['published'], true)
->with('creator')
->orderBy('news.created_at', 'desc')
->paginate($backend_per_page);
$newsDataIds = [];
foreach ($newsDataRows as $nextNews) {
$newsDataIds[] = $nextNews->id;
}
return view('livewire.admin.app-news.container', [
'newsDataRows' => $newsDataRows,
'newsDataIds' => $newsDataIds,
'form' => $this->form,
'news_rows_count' => $news_rows_count,
'newsPublishedValueArray' => $newsPublishedValueArray,
]);
}
and in the template resources/views/livewire/admin/app-news/container.blade.php :
<article class="admin_page_container">
<div class="card form-admin-news">
<div class="card-body card-block">
<div class="spinner-border" role="status" wire:loading>
<span class="sr-only">Loading...</span>
</div>
...
<fieldset class="bordered text-muted p-2 m-2" x-data="{ title: '{{$filters['title']}}', published: '{{$filters['published']}}' ,
publishedItems: <?php print str_replace('"',"'",json_encode( $newsPublishedValueArray) ) ?> } ">
<div> $filters::{{ var_dump($filters) }}</div>
title::<div x-html="title"></div>
published::<div x-html="published"></div>
<legend class="bordered">Filters</legend>
<dl class="block_2columns_md m-0 p-2">
<dt class="key_values_rows_label_13">
<label class="col-form-label" for="temp_filter_title">
By title
</label>
</dt>
<dd class="key_values_rows_value_13" >
<div class="content_with_right_button">
<div
class="content_with_right_button_left_content"
wire:model.lazy="filters.title"
>
<input
class="form-control admin_control_input"
type="text"
x-model="title"
x-on:blur="$dispatch('input', title)"
id="title"
>
</div>
<div class="content_with_right_button_right_button pl-2">
<button class="btn btn-outline-secondary nowrap_block" wire:click="makeSearch( )">
{!! $viewFuncs->showAppIcon('filter') !!}Search
</button>
</div>
</div>
</dd>
</dl>
<dl class="block_2columns_md m-0 p-2">
<dt class="key_values_rows_label_13">
<label class="col-form-label" for="temp_filter_published">
By published
</label>
</dt>
<dd
class="key_values_rows_value_13"
wire:model.lazy="filters.published"
>
<select
x-model="published"
x-on:blur="$dispatch('select', published)"
id="published"
class="form-control editable_field admin_control_input"
>
<template x-for="nextPublishedItem in publishedItems">
<option :value="nextPublishedItem.key" x-text="nextPublishedItem.label"></option>
</template>
</select>
#error('form.published')
<div class="validation_error">{{ clearValidationError($message,['form.'=>'']) }}</div> #enderror
</dd>
</dl>
</fieldset> <!-- Filters -->
...
#endif {{-- #if($updateMode=='browse')--}}
#endif {{-- #if($updateMode=='browse')--}}
#if(count($newsDataRows) > 0)
<div class="table-responsive table-wrapper-for-data-listing" x-data="selectedNewsIdsBoxXData()">
<table>
...
</table>
</div> <!-- <div class="table-responsive table-wrapper-for-data-listing"> -->
#endif {{-- #if(count($newsDataRows) > 0) --}}
#endif {{-- #if($updateMode=='browse') --}}
</div> <!-- <div class="card-body card-block"> -->
</div> <!-- <div class="card"> -->
</article> <!-- page_content_container -->
Which is the valid way?
Modified BLOCK 2:
I try another way with using of alpinejs2 : I try to use it in this case, as when public var of component is changed:
with dispatch methid when button “Search” is clicked
<div class="card form-admin-facilities" x-data="adminFacilitiesComponent()">
...
filter_name: {{$filter_name}}<br>
...
temp_filter_name: <span x-html="temp_filter_name"></span><br>
...
<fieldset class="bordered text-muted p-2 m-2">
<legend class="bordered">Filters</legend>
<div class="content_with_right_button" wire:model.lazy="filter_name">
<div class="content_with_right_button_left_content" >
<input
class="form-control admin_filter_input"
x-model="temp_filter_name"
type="text"
>
</div>
<div class="content_with_right_button_right_button pl-2" >
<button class="btn btn-outline-secondary" #click="$dispatch('input', temp_filter_name)" type="button">Search
</button>
<!-- In more complicated form can be several filter fields : text and select inputs -->
</div>
</div>
</fieldset> <!-- Filters -->
...
<script>
function adminFacilitiesComponent() {
return {
temp_filter_name:'',
and in the component I defined public $filter_name var, which is used in render method :
class Facilities extends Component
{
public $form= [
'name'=>'',
'descr'=> '',
'created_at'=> '',
'is_reopen' => false,
];
public $current_facility_id;
public $filter_name= '';
public $updateMode = 'browse';
public function render()
{
\Log::info( '-1 render Facilities $this->filter_name ::' . print_r( $this->filter_name, true ) );
$this->facility_rows_count = Facility
::getByName($this->filter_name, true)
->count();
$backend_per_page = Settings::getValue('backend_per_page', CheckValueType::cvtInteger, 20);
return view('livewire.admin.facilities.container', [
'facilityDataRows' => Facility
::orderBy('created_at', 'desc')
->getByName($this->filter_name, true)
->paginate($backend_per_page),
'facility_rows_count'=> $this->facility_rows_count
]);
}
But it does not work as I expect : entering value in text input when this input lose focus
form is rendered again. I expected form to be rendered only when I click on “Search” button
and form will be rendered with new entered value. I do not use blur event for text input and
do not understand why the form is rendered when this input lose focus?
Modified BLOCK 3:
Using x-ref= I do :
<div class="content_with_right_button" wire:model.lazy="filter_name">
<div class="content_with_right_button_left_content" >
<input
class="form-control admin_filter_input"
x-model="temp_filter_name"
x-ref="searched"
type="text"
> 1111111
</div>
<div class="content_with_right_button_right_button pl-2" >
<button class="btn btn-outline-secondary nowrap_block" wire:click="makeSearch(this.$refs.searched)" type="button">
Search
</button>
</div>
</div>
But I got error clicking on search button:
VM1983:6 Uncaught TypeError: Cannot read property 'searched' of undefined
at eval (eval at parseOutMethodAndParams (directive.js:55), <anonymous>:6:27)
at _default.parseOutMethodAndParams (directive.js:55)
Looks like it is impossible to use this.$refs. value in
wire:click="makeSearch .
I need to trigger component method
public function makeSearch($search_value='')
{
and send entered value into it.
Looks like the way I tried was invalid.
If there is a valid way?
Thanks!
In your modified block 2, you should use wire:ignore in base div of your AlpineJS component. This will make livewire ignore the component.
<div class="card form-admin-facilities" wire:ignore x-data="adminFacilitiesComponent()">
Your $dispatch() should handle setting the value when you click the button.
In order to make livewire ignore the component just add wire:ignore to your component's div in modified block 2 and then in your dispatch method you can write the logic that happens after clicking the button.
I am new and installed Laravel 5.5 and trying to work on login functionality. I am using custom fields to login; user_name and user_password. When I submit I am getting
The email field is required.
The password field is required.
but my fields are user_name and user_password in the user table
Login controller
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Session;
class LoginController extends Controller
{
use AuthenticatesUsers;
protected $redirectAfterLogout = '/';
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('guest', ['except' => 'logout']);
}
/**
* Logout, Clear Session, and Return.
*
* #return void
*/
public function logout()
{
$user = Auth::user();
Log::info('User Logged Out. ', [$user]);
Auth::logout();
Session::flush();
return redirect(property_exists($this, 'redirectAfterLogout') ? $this->redirectAfterLogout : '/');
}
protected function getCredentials(Request $request){
return $request->only('user_name', 'user_password');
}
}
View
#extends('layouts.app')
#section('content')
<div class="container">
<div>
<a class="hiddenanchor" id="signup"></a>
<a class="hiddenanchor" id="signin"></a>
<div class="login_wrapper">
<div class="animate form login_form">
<section class="login_content">
<form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<h1>Login Form</h1>
<div>
<input id="email" type="email" class="form-control" name="user_name" value="{{ old('user_name') }}" required autofocus>
</div>
<div>
<input id="password" type="password" class="form-control" name="user_password" required>
</div>
<div>
<button type="submit" name="login" class="btn btn-default submit">Log in</button>
<a class="reset_pass" href="#">Lost your password?</a>
</div>
<div class="clearfix"></div>
<div class="separator"></div>
</form>
</section>
</div>
</div>
</div>
You are using the trait AuthenticatesUsers and it is responsible for validating the data after the user submitted the form. If you take a look at this file, you will see this method:
/**
* Validate the user login request.
*
* #param \Illuminate\Http\Request $request
* #return void
*/
protected function validateLogin(Request $request)
{
$this->validate($request, [
$this->username() => 'required|string',
'password' => 'required|string',
]);
}
More specifically, as you can see, this method is in charge for calling the validator on the fields name "password" and by the method username(). If you only wanted to custom the username field, you could overwrite the username() method in LoginController class:
public function username()
{
return 'user_name';
}
But since you want to custom both the username field name and the password field name, I suggest that you overwrite the validateLogin() method in the LoginController class:
protected function validateLogin(Request $request)
{
$this->validate($request, [
'user_name' => 'required|string',
'user_password' => 'required|string',
]);
}
Hope that helps.
You must go to app/User.php and change
protected $fillable = [
'name', 'email', 'password',
];
to
protected $fillable = [
'name', 'user_email', 'user_password',
];
It will solve your problem. But i must suggest to you change your view form field to email, password instead of user_name, user_password
I am integrating Facebook Login in my New Laravel 5.1.The user will have the option to manually login by using Facebook Login or the traditional form login.So far I have no problem implementing traditional login
For the Laravel Socialite, I think I already set correctly
composer.json
"laravel/socialite": "^2.0",
config/app.php
'providers' => [
/*
* Laravel Framework Service Providers...
*/
.........
.........
Illuminate\Html\HtmlServiceProvider::class,
/*
* Application Service Providers...
*/
App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,
Laracasts\Flash\FlashServiceProvider::class,
Laracasts\Generators\GeneratorsServiceProvider::class,
AlgoliaSearch\Laravel\AlgoliaServiceProvider::class,
Laravel\Socialite\SocialiteServiceProvider::class,
],
AuthController
<?php
namespace App\Http\Controllers\Auth;
use Socialite;
//use Illuminate\Routing\Controller;
use App\User;
use Validator;
use Auth;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ThrottlesLogins;
use Illuminate\Foundation\Auth\AuthenticatesAndRegistersUsers;
class AuthController extends Controller
{
use AuthenticatesAndRegistersUsers, ThrottlesLogins;
protected $redirectTo = '/admin';
/**
* Create a new authentication controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('guest', ['except' => 'getLogout']);
}
//temporarily redirected to duterte-run.mendanielle.com
public function getRegister()
{
return view('auth.login');
}
/**
* Get a validator for an incoming registration request.
*
* #param array $data
* #return \Illuminate\Contracts\Validation\Validator
*/
protected function validator(array $data)
{
return Validator::make($data, [
'username' => 'required|max:255',
'email' => 'required|email|max:255|unique:users',
'password' => 'required|confirmed|min:6',
]);
}
/**
* Create a new user instance after a valid registration.
*
* #param array $data
* #return User
*/
protected function create(array $data)
{
return User::create([
'firstname' => $data['firstname'],
'lastname' => $data['lastname'],
'username' => $data['username'],
'email' => $data['email'],
'password' => bcrypt($data['password']),
]);
}
/**
* Redirect the user to the GitHub authentication page.
*
* #return Response
*/
public function redirectToProvider()
{
return Socialite::driver('facebook')->redirect();
}
/**
* Obtain the user information from GitHub.
*
* #return Response
*/
public function handleProviderCallback()
{
// try {
$user = Socialite::driver('facebook')->user();
// } catch (Exception $e) {
// return redirect('auth/facebook');
// }
// $authUser = $this->findOrCreateUser($user);
// Auth::login($authUser, true);
// return redirect()->route('home');
}
routes.php
Route::get('/auth/facebook', 'Auth\AuthController#redirectToProvider');
Route::get('/auth/facebook/callback', 'Auth\AuthController#handleProviderCallback');
// Logging in and out
get('/auth/login', 'Auth\AuthController#getLogin');
post('/auth/login', 'Auth\AuthController#postLogin');
get('/auth/logout', 'Auth\AuthController#getLogout');
login form
<form class="form-horizontal" role="form" method="POST" action="{{ url('/auth/login') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember Me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">Login</button>
<a class="btn btn-link" href="{{ url('/password/email') }}">Forgot Your Password?</a>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<a class="btn btn-link" href="{{ url('/auth/facebook') }}">Login With Facebook</a>
</div>
</div>
</form>
I followed the latest documentation at Laravel.com website,and inside services.php
'facebook' => [
'client_id' => env('FACEBOOK_CLIENT_ID'),
'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
'redirect' => env('CALL_BACK_URL'),
],
And the .env file
FACEBOOK_CLIENT_ID=1834566497828637244
FACEBOOK_CLIENT_SECRET=9505676d1f50bty7b613baa7b68786op5ba48
CALL_BACK_URL=http://localhost:9090/auth/login
The login button will redirect me to
localhost:9090/auth/facebook
NotFoundHttpException in Controller.php line 269:
Controller method not found.
at Controller->missingMethod('facebook')
at call_user_func_array(array(object(AuthController), 'missingMethod'), array('_missing' => 'facebook')) in Controller.php line 256
at Controller->callAction('missingMethod', array('_missing' => 'facebook')) in ControllerDispatcher.php line 164
at ControllerDispatcher->call(object(AuthController), object(Route), 'missingMethod') in ControllerDispatcher.php line 112
at ControllerDispatcher->Illuminate\Routing{closure}(object(Request))
at call_user_func(object(Closure), object(Request)) in Pipeline.php line 139
at Pipeline->Illuminate\Pipeline{closure}(object(Request)) in RedirectIfAuthenticated.php line 41
So what's the proper way? How do you integrate Socialite in Laravel 5.1?
update
I see this 'weird' result in php artisan route:list
GET|HEAD|POST|PUT|PATCH|DELETE | auth/{_missing} | App\Http\Controllers\Auth\AuthController#missingMethod | guest |
Just under the
| auth/facebook|App\Http\Controllers\Auth\AuthController#redirect
Got it
In controller, instead of
use App\Http\Controllers\Controller;
This is the correct controller
use Illuminate\Routing\Controller;
And I fixed the routes,
Route::get('/auth/facebook/callback','Auth\AuthController#handleProviderCallback');
Should match the call back_url listed in .env file which is
http://localhost:9090/admin
So to correct this
Route::get('/admin','Auth\AuthController#handleProviderCallback');
Needs some tweaks when saving if the user is not listed in database but it works when a registered user logs