i am using laravel for authentication , my register works but login fails when i data dump the array for password and email is empty - laravel

I am new to laravel and seem to have issues with authentication. I created a custom login page and wanted to use the auth() function to allow registration and login. Here is my login controller it shows the connection to the blade file the registration has no issues but the login is giving me problems.
When I dd() it returns an empty array, the database seems fine proved by registration.
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use auth;
class LoginController extends Controller
{
public function index()
{
return view('auth.login');
}
public function store(Request $request)
{
if(!auth()->attempt($request->only('email','password'))) {
return back()->with('status','Invalid login Details');
}
dd($request->only('email','password'));
return redirect()->route('dashboard');
}
}
```
below is the blade file responsible for submitting the form to authenticate the user I suspected the session but without it I cant check
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="google-signin-client_id" content="407063748479-dbmn68b26gcbeln4hevvcr97qnrg6hrd.apps.googleusercontent.com">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../assets-Authenticate/css/RegistrationStyling.css" />
<title>Sign in & Sign up Form</title>
</head>
<body>
<div class="container">
<div class="forms-container">
<div class="signin-signup">
#if (session()->has('status'))
{{ session('status') }}
#endif
<!--Sign In Form-->
<form action="{{route('login')}}" class="sign-in-form" method="POST">
#csrf
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="User Email" required />
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"/>
</div>
<input type="submit" value="Login" class="btn solid" />
<div class="reset">
Forgot Password ?
</div>
</form>
```

You forgot to add a name to your inputs try:
<input type="password" name="password" placeholder="Password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"/>
And
<input type="text" name="email" placeholder="User Email" required />

You can't run auth without adding a name use this code in the input tag instead.
<input type="password" name="password" placeholder="Password"
required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase
letter, and at least 8 or more characters"/>
<input type="text" name="email" placeholder="User Email" required />

Related

Property or field 'userName' cannot be found on null

here is the code:-
form.html :
<div class="container">
<div class="row mt-5">
<div class="col-md-6 offset-md-3">
<form th:action="#{/process}" method="post" th:object="${loginData}">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input
type="text"
name="userName"
class="form-control"
th:value="${loginData.userName}"
id="exampleInputEmail1"
aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input
type="email"
name="email"
th:value="${loginData}"
class="form-control"
id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
MyController :
#GetMapping("/form")
public String formHandler(Model m ) {
System.out.println("opening form");
LoginData loginData = new LoginData();
if(loginData != null ) {
m.addAttribute("login", new LoginData());
System.out.println("YAY");
}else {
System.out.println("Bhag Bh*****ke");
}
return "form1";
}
//handler for process form
#PostMapping("/process")
public String processform(#ModelAttribute("loginData") LoginData loginData) {
System.out.println(loginData);
return"success";
}
success.html :
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Success</title>
</head>
<body>
<h1>Welcome to this success page</h1>
<h1 th:text="${LoginData.userName}"></h1>
<h1 th:text="${LoginData.email}"></h1>
</body>
</html>
saying error : Caused by: org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'userName' cannot be found on null
Login page is not ruuning because LoginData is empty at begining
You haven't exactly specified which of the 2 pages are causing the issue, but I'm going to guess that it is the first one.
I would first try replacing the th:value tag with th:field in the username input:
<input
type="text"
name="userName"
class="form-control"
th:field="*{userName}"
id="exampleInputEmail1"
aria-describedby="emailHelp">
Since you have already defined the loginData object within the form tag:
th:object="${loginData}
The next input tag could also cause some issues, I'm guessing that this should accept the user's password:
<input
type="email"
name="email"
th:value="${loginData}"
class="form-control"
id="exampleInputPassword1">
You would want to update it to something like:
<input
type="password"
th:field="*{password}"
class="form-control"
id="exampleInputPassword1">
The exception tells you that there is no model attribute with the name loginData. looking at the controller code after this that can be confirmed as you are adding a model attribute with name login not loginData m.addAttribute("login", new LoginData());
Also I'm not usre why you define a loginData variable in your controller, check if it's non null and than don't use it but create a new one
LoginData loginData = new LoginData();
if(loginData != null ) {
m.addAttribute("login", new LoginData());
System.out.println("YAY");
}

Preserve values in modified object Thymeleaf

I'm creating an Object in GET method and initialize it with nulls. Then I set some values and send it to the POST method, but after this process all of values that I set earlier are nulls. How could I repair it? I've tried to use hidden fields, but it didn't help.
HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" th:href="#{/styles.css}" />
</head>
<body>
<form method="POST" th:action="#{sendorder}" th:object="${details}">
<label for="name">Name: </label>
<input type="text" th:field="*{name}"/>
<br/>
<input type="hidden" th:field="*{order}" id="order"><label for="surname">Surname: </label>
<input type="text" th:field="*{surname}"/>
<br/><label for="room">Room: </label>
<input type="text" th:field="*{room}"/>
<br/>
<br/>
<h2>Please, choose your company:</h2>
<select th:field="*{company}">
<option th:each="i : ${companies}" th:value="${i.id}" th:text="${i.name}">
</option>
</select>
</div>
</div>
<input type="submit" value="Submit Order"/>
</form>
</body>
</html>

ErrorException Array to string conversion

i am facing ErrorException Array to string conversion, I am new in laravel. please help me in detail if you can,please help me in detail if you can please help me in detail if you can please help me in detail if you can please help me in detail if you can please help me in detail if you can please help me in detail if you can please help me in detail if you can
This is my code
<?php
namespace App\Http\Controllers;
use Redirect,Response;
use Illuminate\Http\Request;
use App\Models\Test;
use File;
class JsonController extends Controller
{
public function index()
{
return view('json_form');
}
public function download(Request $request)
{
$data = $request->only('name','email','mobile_number');
$test['token'] = time();
$test['data'] = json_encode($data);
Test::insert($test);
$fileName = $test['token']. '_datafile.json';
File::put(public_path('/upload/json/'.$fileName),$test);
//return download(public_path('/upload/jsonfile/'.$fileName));
$headers = [ 'Content-Type' => 'application/json', ];
return response()->download($test, 'filename.json', $headers);
//return response()->download(public_path('file_path/from_public_dir.pdf'));
}
}
This is my jeson.blade.php
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel Store Data To Json Format In Database - Tutsmake.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<style>
.error{ color:red; }
</style>
</head>
<body>
<div class="container">
<h2 style="margin-top: 10px;">Laravel Store Data To Json Format In Database - Tutsmake.com</h2>
<br>
<br>
#if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
<br>
#endif
<form id="laravel_json" method="post" action="json-file-download">
#csrf
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" name="name" class="form-control" id="formGroupExampleInput" placeholder="Please enter name">
</div>
<div class="form-group">
<label for="email">Email Id</label>
<input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
</div>
<div class="form-group">
<label for="mobile_number">Mobile Number</label>
<input type="text" name="mobile_number" class="form-control" id="mobile_number" placeholder="Please enter mobile number">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</body>
</html>

How to submit Laravel VueJS dynamic form data?

I am new to Vue.js. I am trying to make a form dynamic (only a certain part of the form dynamic.). A user can have multiple guarantors. So I made the Guarantor form Dynamic with VueJS. When I submit the form and return the request, I see only the last array. Its always the last array, all others are lost.
This is the blade file.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ asset('css/app.css')}}">
<title>Laravel</title>
</head>
<body>
<div id="app">
<div class="container pt-5">
<form action="{{ route('submit.store')}}" method="post">
#csrf
<div class="card-body">
<h4 class="card-title">User Detail</h4>
<input type="text" class="form-control mb-1" name="user_name" id="user_name" placeholder="Name" />
<input type="email" class="form-control mb-1" name="user_email" id="user_email"
placeholder="Email" />
<textarea name="about" class="form-control" id="about" cols="30" rows="10"
placeholder="About"></textarea>
</div>
<dynamic-form></dynamic-form>
</form>
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
And this is how the VueComponent looks.
<template>
<div>
<button class="btn btn-success mb-3" #click.prevent="addNewUser">Add User</button>
<div class="card mb-3" v-for="(user, index) in users" :key="index">
<div class="card-body">
<span class="float-right" style="cursor:pointer" #click.prevent="removeForm(index)" >X</span>
<h4 class="card-title">Guarantor No: {{ index }}</h4>
<input type="text" class="form-control mb-1" name="name" id="name" placeholder="Name" v-model="user.name" />
<input type="email" class="form-control mb-1" name="email" id="email" placeholder="Email" v-model="user.email"/>
<textarea name="about" class="form-control" id="about" cols="30" rows="10" placeholder="About" v-model="user.about"></textarea>
</div>
</div>
<input type="submit" class="btn btn-primary" value="submit">
</div>
</template>
<script>
export default {
name: 'dynamic-form',
data() {
return{
users: [
{
name: '',
email: '',
about: ''
}
]
}
},
methods: {
addNewUser: function() {
this.users.push({
name: '',
email: '',
about: ''
});
},
removeForm: function(index) {
this.users.splice(index, 1);
}
}
}
</script>
How can I tackle this problem?
In PHP, values with the same name attribute value will get overwritten. (See the "How do I get all the results from a select multiple HTML tag?" section here).
You can create arrays of values by adding a bracket to the name. For example, if you made the name of the "name" input name[], name will be an array of names in PHP.
In your case, you could use this format: name="guarantors[][name]". That way you will get an array in PHP under the key guarantors (e.g. $request->guarantors) and each of the values in guarantors will be an array with the values name, email, etc.

Get value of hidden field in form

Here is my login form with hidden field name "callbackUrl". How can i get the value of this hidden field in controller? User's attributes are username and password. callbackUrl is not.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<link href="/resources/css/common.css" rel="stylesheet">
<title>Authentication Service</title>
</head>
<body>
<form method="POST" action="/login" modelAttribute="userFormLogin" class="form-signin">
<h2 class="form-heading">Log in</h2>
<input name="username" type="text" class="form-control" placeholder="Username"
autofocus="true"/>
<input name="password" type="password" class="form-control" placeholder="Password"/>
<input name="callbackUrl" type= "hidden" id="callbackUrl">
<h2>${error}</h2>
<br/>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log In</button>
<h4 class="text-center">Create an account</h4>
</form>
</body>
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("callbackUrl");
console.log(c);
document.getElementById("callbackUrl").value = c;
</script>
</html>
add #RequestParam("callbackUrl") String callBackUrl to the method in your controller.
Like so:
public String myMethod(#RequestParam("callbackUrl") String callBackUrl, …) {
System.out.println(callBackUrl); //this will print the url to console
}

Resources