2 de diciembre
Crearemos un formulario sencillo de registro, para eso primero creamos una entrada en nuestro routes/web.php
<?php
use Laravel\Fortify\Features;
$enableViews = config('fortify.views', true);
// Registration...
if (Features::enabled(Features::registration())) {
if ($enableViews) {
Route::get('/register', [RegisterController::class, 'create'])
->middleware(
[
'guest:'.config('fortify.guard')
]
)
->name('register');
}
Route::post('/register', [RegisterController::class, 'store'])
->middleware(
[
'guest:'.config('fortify.guard')
]
);
}Ahora modificaremos nuestro archivo config/fortify.php para que incluya este feature
'features' => [
Features::registration(),
],Ahora procederemos a crear nuestro controlador de Registro
<?php
namespace App\Http\Controllers\Auth;
use Laravel\Fortify\Http\Controllers\RegisteredUserController;
use Illuminate\Auth\Events\Registered;
use Illuminate\Contracts\Auth\StatefulGuard;
use Illuminate\Http\Request;
use Illuminate\Routing\Controller;
use Laravel\Fortify\Contracts\CreatesNewUsers;
use Laravel\Fortify\Contracts\RegisterResponse;
use Laravel\Fortify\Contracts\RegisterViewResponse;
class RegisterController extends RegisteredUserController{
// public function __construct(StatefulGuard $guard)
// {
// parent::__construct($guard);
// }
/**
* Show the registration view.
*
* @param \Illuminate\Http\Request $request
* @return \Laravel\Fortify\Contracts\RegisterViewResponse
*/
public function create(Request $request): RegisterViewResponse
{
return parent::create($request);
}
/**
* Create a new registered user.
*
* @param \Illuminate\Http\Request $request
* @param \Laravel\Fortify\Contracts\CreatesNewUsers $creator
* @return \Laravel\Fortify\Contracts\RegisterResponse
*/
public function store(Request $request, CreatesNewUsers $creator): RegisterResponse
{
return parent::store($request,$creator);
}
}Este controlador es una implementación que básicamente usa todas las funcionalidades de RegisteredUserController de Fortify, pero nos da la flexibilidad de poder cambiar o extenderlas. De momento lo dejo como está.
Ahora crearemos un formulario de registro, (que es una copia burda de nuestro formulario de registro pero con un campo extra que es el nombre y el campo de contraseña
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Formulario Login, mascotas Perdidas">
<meta name="author" content="Login,Mascotas Perdidas">
<title>Register</title>
@vite('resources/js/app.js')
<!-- Favicons -->
{{-- <link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"> --}}
<meta name="theme-color" content="#712cf9">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
<style>
/* sign-in */
html,body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 330px;
padding: 15px;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
<!-- Custom styles for this template -->
<link href="sign-in.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin w-100 m-auto">
<form method="POST" action="{{route('register')}}">
@csrf
{{-- <img class="mb-4" src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> --}}
<h1 class="h3 mb-3 fw-normal">Registro</h1>
@if(Session::has('result'))
@if(Session::get('result'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ nl2br(Session::get('message')) }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@else
<div class="alert alert-danger alert-dismissible fade show" role="alert">
{{ nl2br(Session::get('message')) }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@endif
<div class="form-floating">
<input type="text" class="form-control" id="floatingInput" placeholder="john doe" value="{{old('email')}}" name="name">
<label for="floatingInput">Name</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" value="{{old('email')}}" name="email">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" name="password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password Confirmation" name="password_confirmation">
<label for="floatingPassword">Password Confirmation</label>
</div>
<div class="form-check mb-3">
<label>
<input type="checkbox" class="form-check-input" name="accept_term_conditions" >I Accept the <a href="#">Terms and conditions</a>
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Register</button>
<p class="mt-5 mb-3 text-muted">© 2017–2022</p>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
</form>
</main>
</body>
</html>A nuestras rutas de web.php agregaremos las características de verificación de email
// Email Verification...
if (Features::enabled(Features::emailVerification())) {
if ($enableViews) {
Route::get('/email/verify', [EmailVerificationPromptController::class, '__invoke'])
->middleware([config('fortify.auth_middleware', 'auth').':'.config('fortify.guard')])
->name('verification.notice');
}
Route::get('/email/verify/{id}/{hash}', [VerifyEmailController::class, '__invoke'])
->middleware([config('fortify.auth_middleware', 'auth').':'.config('fortify.guard'), 'signed', 'throttle:'.$verificationLimiter])
->name('verification.verify');
Route::post('/email/verification-notification', [EmailVerificationNotificationController::class, 'store'])
->middleware([config('fortify.auth_middleware', 'auth').':'.config('fortify.guard'), 'throttle:'.$verificationLimiter])
->name('verification.send');
}A nuestro modelo de User.php le diremos que debe implementar la verificación de email MustVerifyEmail
<?php
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable implements MustVerifyEmail
{
use HasApiTokens, HasFactory, Notifiable;A nuestro Actions/Fortify/CreateNewUser.php le agregaremos la regla de que debe aceptar los terminos y condiciones (accept_term_conditions’=>[‘accepted’], )
<?php
namespace App\Actions\Fortify;
use App\Models\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\Rule;
use Laravel\Fortify\Contracts\CreatesNewUsers;
class CreateNewUser implements CreatesNewUsers
{
use PasswordValidationRules;
/**
* Validate and create a newly registered user.
*
* @param array<string, string> $input
*/
public function create(array $input): User
{
Validator::make($input, [
'name' => ['required', 'string', 'max:255'],
'email' => [
'required',
'string',
'email',
'max:255',
Rule::unique(User::class),
],
'accept_term_conditions'=>['accepted'],
'password' => $this->passwordRules(),
])->validate();
return User::create([
'name' => $input['name'],
'email' => $input['email'],
'password' => Hash::make($input['password']),
]);
}
}
En nuestro archivo config/fortify.php activamos el feature de emailVerification
'features' => [
Features::registration(),
//Features::resetPasswords(),
Features::emailVerification(),
// Features::updateProfileInformation(),
// Features::updatePasswords(),
// Features::twoFactorAuthentication([
// 'confirm' => true,
// 'confirmPassword' => true,
// // 'window' => 0,
// ]),
],También crearemos la vista que muestra el enlace para enviar el enlace de verificación
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Formulario Login, mascotas Perdidas">
<meta name="author" content="Login,Mascotas Perdidas">
<title>Signin Template · Bootstrap v5.3</title>
@vite('resources/js/app.js')
<!-- Favicons -->
{{-- <link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"> --}}
<meta name="theme-color" content="#712cf9">
<!-- Custom styles for this template -->
<link href="sign-in.css" rel="stylesheet">
</head>
<body class="text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Verify Your Email Address') }}</div>
<div class="card-body">
@if (session('resent'))
<div class="alert alert-success" role="alert">
{{ __('A fresh verification link has been sent to your email address.') }}
</div>
@endif
{{ __('Before proceeding, please check your email for a verification link.') }}
{{ __('If you did not receive the email') }},
<form class="d-inline" method="POST" action="{{ route('verification.send') }}">
@csrf
<button type="submit" class="btn btn-link p-0 m-0 align-baseline">{{ __('click here to request another') }}</button>.
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Por último y para probar estas características les recomendaría que contraten un servicio gratuito como mailtrap.io que permite simular el envío de emails y guardarlo en el .env del proyecto
MAIL_HOST=sandbox.smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=xxxUserxxx
MAIL_PASSWORD=xxxPassxxxLuego de eso podrán ver un mail como este luego de un registro exitoso
En la siguiente entrada prepararemos un layout que podamos usar para ver los reportes de nuestros usuarios.