Laravel 5 authentication on home page - authentication

I have tried authentication before, but it has always been with views in my auth folder. I am now doing something different and cant seem to get it working. So I have this route which displays my homepage
Route::get('/', function () {
return view('index');
});
On my homepage, I have my register and login forms. I wont show everything, but my register form looks like the following
<form class="form-horizontal" role="form" method="POST" action="/">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control" name="first_name" value="{{ old('first_name') }}" placeholder="First Name">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control" name="last_name" value="{{ old('last_name') }}" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-primary">
Register
</button>
</div>
</div>
</form>
I then tried adding my routes for the registration
Route::get('/register', 'Auth\AuthController#getRegister');
Route::post('/register', 'Auth\AuthController#postRegister');
Because this is using the built in authentication, looking at the Traits, things like getRegister return a view in the auth folder. So in my AuthController, I have added
public function getRegister()
{
return view('/');
}
However, if I try to register, I still get a MethodNotAllowedHttpException.
What would be the stages I need to go through in order to get registration and login onto my homepage?
Thanks

Be careful with the action of your form. You action is "/" but you registered the route Route::post('/register'....
So, your action for the form must be: action="/register"
It is going to make the request in the right rout.
Hope it helps.
PS: Check this course: Learn Laravel. There are explained step-by-step some concepts like this.
Best wishes.

Related

asp- Tags are not highlighted in Blazor server side app

I have created a new server sided blazor app with no prebuild in authentication. Now I want to implement my own authentication with a custom AppDbContext.
The database is configured so far. Now I want to create a register page. I added a Razorpage to my Pages folder named Register.cshtml. I have already added the background C# logic and now I want to create a simple register form. But I have no clue why all asp- tags are not highlighted correctly as they do in a blank Blazor app with pre configured in app authentication.
Here is my form:
<form asp-route-returnUrl="#Model.ReturnUrl" method="post">
<h4>Account erstellen</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input."></label>
<input asp-for="Input." class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.ConfirmPassword"></label>
<input asp-for="Input.ConfirmPassword" class="form-control" />
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
In the prebuild app all asp- tags are bold in dark purple. In mine they look like default html tags. Moreover there is no Intellisense available.
Does anybody know what I did wrong here?
Also could someone explain me when I should create a rezor component instead of a razor page?
Thanks in advance!
Best
Marvin
I found a solution for the problem. I need to add
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
To my Razorpage file.

How to hide some textfields in razor view in asp.net core

I'm implementing a project by asp.net core. I have a selectlist item which its options are loaded from a model and it has 2 items. My problem is, I want in the razor view, according to the selected option in selectlist, some TextFields be shown to the user. For example if the user choose the first option, three of the fields be shown to the user and if the user selects the second option, other fields be shown to the user meanwhile the other three field be hidden. For doing this. I have tried some code like below in my Create view:
#model CSDDashboard.Models.ApplicantViewModel
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
<script>
$(document).ready(function () {
$('#applicantvm.ApplicantType').change(function () {
var value = $(this).val();
if (value == '1') {
$(".legal").hide();
} else {
$(".person").show();
}
});
});
</script>
#{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<h4>Applicant</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="applicantvm.ApplicantType" class="control-label"></label>
<select asp-for="applicantvm.ApplicantType" class="form-control" asp-items="ViewBag.ApplicantType"></select>
</div>
<div class="form-group">
<label asp-for="applicantvm.Address" class="control-label"></label>
<input asp-for="applicantvm.Address" class="form-control" />
<span asp-validation-for="applicantvm.Address" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="applicantvm.Description" class="control-label"></label>
<input asp-for="applicantvm.Description" class="form-control" />
<span asp-validation-for="applicantvm.Description" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="applicantvm.Name" class="control-label"></label>
<input asp-for="applicantvm.Name" class="form-control" />
<span asp-validation-for="applicantvm.Name" class="text-danger"></span>
</div>
<div class="form-group legal">
<label asp-for="legalapplicantvm.EconomicCode" class="control-label"></label>
<input asp-for="legalapplicantvm.EconomicCode" class="form-control" />
<span asp-validation-for="legalapplicantvm.EconomicCode" class="text-danger"></span>
</div>
<div class="form-group legal">
<label asp-for="legalapplicantvm.NationalCode" class="control-label"></label>
<input asp-for="legalapplicantvm.NationalCode" class="form-control" />
<span asp-validation-for="legalapplicantvm.NationalCode" class="text-danger"></span>
</div>
<div class="form-group legal">
<label asp-for="legalapplicantvm.RegisterNo" class="control-label"></label>
<input asp-for="legalapplicantvm.RegisterNo" class="form-control" />
<span asp-validation-for="legalapplicantvm.RegisterNo" class="text-danger"></span>
</div>
<div class="form-group person">
<label asp-for="personapplicantvm.BirthCertificateNo" class="control-label"></label>
<input asp-for="personapplicantvm.BirthCertificateNo" class="form-control" />
<span asp-validation-for="personapplicantvm.BirthCertificateNo" class="text-danger"></span>
</div>
<div class="form-group person">
<label asp-for="personapplicantvm.IssuePlace" class="control-label"></label>
<input asp-for="personapplicantvm.IssuePlace" class="form-control"/>
<span asp-validation-for="personapplicantvm.IssuePlace" class="text-danger"></span>
</div>
<div class="form-group person">
<label asp-for="personapplicantvm.NationalCode" class="control-label"></label>
<input asp-for="personapplicantvm.NationalCode" class="form-control" />
<span asp-validation-for="personapplicantvm.NationalCode" class="text-danger"></span>
</div>
<div class="form-group person">
<label asp-for="personapplicantvm.Username" class="control-label"></label>
<input asp-for="personapplicantvm.Username" class="form-control" />
<span asp-validation-for="personapplicantvm.Username" class="text-danger"></span>
</div>
}
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back To List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
After running the project, the view is the same as before and all the fields will be visible. I appreciate if anyone suggest me a solution.
asp-for="applicantvm.ApplicantType" render the id and name in the html like id="applicantvm_ApplicantType" name="applicantvm.ApplicantType" ,you could use the developer tools to check the Source code.
So you should change your javascript as shown:
<script>
$(document).ready(function () {
$(".person").hide();
$(".legal").hide();
$('#applicantvm_ApplicantType').change(function () {
var value = $(this).val();
if (value == '1') {
$(".legal").show();
if ($(".person").show()) {
$(".person").hide();
}
} else {
$(".person").show();
if ($(".legal").show()) {
$(".legal").hide();
}
}
});
});
</script>
Result:
In Simple terms,
Write ONCHANGE Event in the drop down and invoke a JavaScript function.
From JavaScript, based on the drop down values, show and hide the controls.

Can I use bootstrap form class outside form tag

This question is about best practice. Can I use form-horizontal class on a <div> element. I am trying to use style that these form class provides but I don't want to use form tag.
Is it good practice ?
<div class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</div>

ValidationSummary.ModelOnly fails but ValidationSummary.All works

This is strange. For some reason, this fails:
<div asp-validation-summary="ValidationSummary.ModelOnly"></div>
But this one works just fine:
<div asp-validation-summary="All"></div>
Any one would know why? Here is entire code snippet:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>Login</h3>
<form method="post" novalidate>
<div asp-validation-summary="All"></div>
#*<div asp-validation-summary="ValidationSummary.ModelOnly"></div>*#
<div class="form-group">
<label asp-for="Username"></label>
<input type="text" asp-for="Username" class="form-control" />
<span asp-validation-for="Username"></span>
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input type="password" asp-for="Password" class="form-control" />
<span asp-validation-for="Password"></span>
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn btn-success" />
</div>
</form>
</div>
I'm assuming you are using asp.net core 1.0. The value for the validation-summary tag helper was changed from
<div asp-validation-summary="ValidationSummary.ModelOnly"></div>
to simply
<div asp-validation-summary="ModelOnly"></div>
You did it correclty with All ;-)
asp.net core docs

Two input field next to each other bootstrap 3

I'm new to bootstrap and have a problem placing two input fields next to each other. I've searched on the internet (and bootstrap.com), but couldn't find the anser.
Code:
Result. But I need the input fields and button next to each other in one row:
I tried using columns... didn't work
You can follow : Display two fields side by side in a Bootstrap Form
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
You can try below code
<div class="container content">
<div class='row'>
<form role="form" class="form-horizontal" method="post">
<div class='col-xs-12 col-sm-4'>
<div class="form-group">
<input class="form-control" name="" placeholder="Search from this date">
</div>
</div>
<div class='col-xs-12 col-sm-4'>
<div class="form-group">
<input class="form-control" name="" placeholder="Search till this date">
</div>
</div>
<div class='col-xs-12'>
<div class="form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
<div class='col-xs-12'>
<div class="form-group">
Back
</div>
</div>
</form>
</div>
</div>