22 de Enero
A continuación necesitamos crear las vistas para login y register pues al intentar entrar veremos un error similar a este:
Para las vistas usaré bootstrap, es una especie de framework para front-end, permite normalizar algunas características visuales dentro del navegador, para diferentes etiquetas y componentes de formulario, sin mencionar que nos facilita hacer responsive nuestra página.
Para integrar bootstrapa a nuestro proyecto, debemos incluir dentro del proyecto usando vite que viene con laravel para ello seguirmos en parte esta guía para instalar entre los paquetes que usa con node y npm.
npm i --save bootstrap @popperjs/core
npm i --save-dev sass
Agregamos al archivo resources/js/app.js
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;Al archivo resources/js/bootstrap.js agregamos:
// Import our custom CSS
import '../sass/app.scss'
import '../css/app.css'Al archivo vite.config.js queda como:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/js/app.js'
],
refresh: true,
}),
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});Ejecutamos este comando para que se compile las versiones minificadas con vite de bootstrap:
npm run build
Ahora para probar, modificamos temporalmente el archivo routes/web.php para probar una vista que incluya las librerias de bootstrap:
Route::get('/', function () {
return view('test');
});Y aqui creamos la vista para probarla resources/views/test.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Bootstrap</title>
@vite('resources/js/app.js')
</head>
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, Bootstrap and Vite!</h1>
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>
Y todo funciona! podemos ver algo como esto
si bootstrap no funcionara, veriamos algo como:
Asi que con eso concluimos la parte de incluir bootstrap en el proyecto, ahora procederemos a hacer un formulario de login.
Creamos un archivo en resources/views/auth/login.blade.php
<!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">
<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>
{{-- <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">Iniciar Sesion</h1>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017–2022</p>
</form>
</main>
</body>
</html>Lo que debería mostrarnos una vista como esta:
Con esto concluimos esta entrada, tenemos bootstrap instalado y una vista de login (aún no funcional, pero de acá en adelante iremos un poco más rápido y lo que haré será agregar las entradas a los commit donde pueden ver los cambios que subo) por ahora cierro acá.
Referencias:
- la vista del login fue extraida de los ejemplos de bootstrap
- Los datos de vite de la documentacion de laravel sobre vite
Link a cambios realizados en github: 6dd05767c7db79d91cc9eb920b2065f6dc99ea7c:
Por ahora lo dejo aqui, en el siguiente post haremos los siguientes cambios:
- actualizaremos este formulario de login
- crearemos un formulario de registro
- tambien comprobaremos el envio de email al crear una cuenta
Saludos