CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

03 September, 2020

Laravel: Login and Register forms on the same page

 Programing Coderfunda     September 03, 2020     No comments   

Laravel: Login and Register forms on the same page

July 1, 2019
Quite often, especially in e-shop projects, you can see a page to login or register before finishing the purchase. But Laravel has these two routes as separate login and register pages. So how to merge them together and avoid conflicts?

Notice: at the end of this article, you will find a link to Github project with a simple Laravel checkout process.

This is the pre-checkout page we’re aiming for:

On the surface, it’s pretty easy – just copy/paste all the Blade code from /resources/views/auth/login.blade.php and /resources/views/auth/register.blade.php into one common, let’s say, /resources/views/checkout.blade.php. And that’s true, but that’s only one part of the story.

The problem arises because of the same names of fields.

Login form has this:

<input id="email" type="email"
       class="form-control @error('email') is-invalid @enderror" name="email"
       value="{{ old('email') }}" required autocomplete="email" autofocus>
Register form has this:

<input id="email" type="email"
       class="form-control @error('email') is-invalid @enderror" name="register_email"
       value="{{ old('email') }}" required autocomplete="email">
See the difference? I don’t either. Except for autofocus, which is irrelevant in our case.

And you would think that it’s ok, because those two forms POST to different URLs and perform different actions. But in case of failing validation, you get errors on both forms instead of one. For example, in case of invalid credentials when you login, you see this:


Step 1. Rename the fields in one of the form.
For this example, we will rename the fields in the registration part, adding “register_” prefix to them:

<input id="register_name" type="text"
       class="form-control @error('register_name') is-invalid @enderror" name="register_name"
       value="{{ old('register_name') }}" required autocomplete="name" autofocus>

@error('register_name')
    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

...

<input id="register_email" type="email"
       class="form-control @error('register_email') is-invalid @enderror" name="register_email"
       value="{{ old('register_email') }}" required autocomplete="email">

@error('register_email')
    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

...

<input id="register_password" type="password"
       class="form-control @error('register_password') is-invalid @enderror"
       name="register_password"
       required autocomplete="new-password">

@error('register_password')
    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

...

<input id="password-confirm" type="password" class="form-control"
    name="register_password_confirmation" required autocomplete="new-password">
Step 2. Override validator in RegisterController.
Here’s the method validator() from the original app/Http/Controllers/Auth/RegisterController.php, that comes from the framework itself:

protected function validator(array $data)
{
    return Validator::make($data, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'password' => ['required', 'string', 'min:8', 'confirmed'],
    ]);
}
So, we need to override that validator with our own, adding some rules to it. In fact, we just need to use the renamed fields from Step 1, and then assign their names properly. Here’s the code:

protected function validator(array $data)
{
    $validator = Validator::make($data, [
        'register_name' => ['required', 'string', 'max:255'],
        'register_email' => ['required', 'string', 'email', 'max:255', 'unique:users,email'],
        'register_password' => ['required', 'string', 'min:8', 'confirmed'],
    ]);
    $validator->setAttributeNames([
        'register_name' => 'name',
        'register_email' => 'email',
        'register_password' => 'password',
    ]);

    return $validator;
}
As you can see, we now use register_xxx fields instead of just xxx, but we also need to make sure they return validation errors with their “original” names, so for that we use less-known setAttributeNames() method. It’s not officially mentioned in documentation, but you see another example of its use in this StackOverflow thread.

And that’s it! Now, we have separate two forms on the same “checkout” page.

Bonus: E-shop Checkout Demo Project
As a part of this article, we actually created a typical checkout process mini-project, which is available on Github for you to see. Homepage contains list of products, you can buy each of them, and then session has your “cart” which you can checkout at any time, by clicking “Checkout” on top.
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Sitaare Zameen Par Full Movie Review
     Here’s a  complete Vue.js tutorial for beginners to master level , structured in a progressive and simple way. It covers all essential topi...
  • Writing and debugging Eloquent queries with Tinkerwell
    In this article, let's look into the options that you can use with Tinkerwell to write and debug Eloquent queries easier. The post Wr...
  • The token request was rejected by the remote server
    error:invalid_granterror_description:The token request was rejected by the remote server.error_uri: https://documentation.openiddict.com/err...
  • Laravel Search String
      Laravel Search String is a package by   Loris Leiva   that generates database queries based on one unique string using a simple and custom...
  • AI foot tracking model
    I am a student doing a graduation project. I urgently need to deal with this model (I am attaching a link). I've never worked with pytho...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda