2

Tengo un problema con mi código y es que tengo un menú con boostrap, y en los cuales tengo un botón de Login y otro de Register. El problema resulta que cuando selecciono Login si me muestra la pagina de Login como se ve en la imagen.

introducir la descripción de la imagen aquí

A la hora de darle clic al boton de Register me aparece todo en blanco como se muestra en la imagen

introducir la descripción de la imagen aquí

Ingresaré parte del codigo para que se pueda validar e indicar que puedo estar haciendo mal.

app.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">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name') }}</title>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@yield('css')
</head>
<header>

<!-- Aquí empieza el menu -->
<nav class="navbar navbar-expand-md navbar-light ">
    <a class="navbar-brand" href="{{ url('/') }}">
        {{ config('app.name') }}
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <ul class="nav nav-tabs ml-auto" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false">Register</a>
      </li>
    </ul>

</nav>
</header>
<body >

<main class="py-4">
<!-- Aquí empieza debe hacer los cambios de pestaña -->
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="home-tab">
            @yield('login')
        </div>
        <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="profile-tab">
            @yield('register')
        </div>
    </div>
</main>

login.blade.php

@extends('layouts.app')
@section('css')
<link href="{{ asset('css/auth.css') }}" rel="stylesheet">
@endsection
@section('login')
<div class="login-form">
    <div class="main-div">
        <div class="panel">
            <h2>Admin Login</h2>
            <p>Please enter your email and password</p>
        </div>
        <form id="Login">
            <div class="form-group">
                <input type="email" name="email" id="email" class="form-control" placeholder="Email Address" required autofocus>
            </div>
            <div class="form-group">   
                <input type="password" name="password"class="form-control" id="password" placeholder="Password" required>
            </div>
            <button type="button" class="btn btn-primary">Login</button>
        </form>
    </div>
    <p class="botto-text"> Designed by Sunil Rajput</p>
</div>


@endsection

Aquí es donde se hace el llamado al registro register.blade.php

@extends('layouts.app')
@section('register')
<div class="login-form">
    <div class="main-div">
        <div class="panel">
            <h2>Register</h2>
            <p>Please enter your email and password</p>
        </div>
        <form id="Register">
            <div class="form-group">
                <input type="email" name="email" id="email" class="form-control" placeholder="Email Address" required autofocus>
            </div>
            <div class="form-group">   
                <input type="password" name="password"class="form-control" id="password" placeholder="Password" required>
            </div>
            <button type="button" class="btn btn-primary">Register</button>
        </form>
    </div>
    <p class="botto-text"> Designed by Sunil Rajput</p>
</div>
@endsection

Si en el app.blade.php quito el @yield('register') e ingreso solo código y si me muestra ese codigo que ahí escribo

3
  • 2
    ¿Cuál es el nombre de la vista que llamas desde el controlador?
    – Shaz
    Commented el 2 sept. 2019 a las 23:17
  • Yo creo que simplemente tiene usaste un CSS que por defecto tiene el display de la sección de register en none. Si no importas los css veras que todo esta correcto (pero sin formato). Commented el 3 sept. 2019 a las 6:17
  • @Shaz En mi route tengo esto Route::get('/', function () { return view('auth.login'); }); Commented el 3 sept. 2019 a las 14:20

2 respuestas 2

2

Estás mezclando un poco los conceptos y voy a intentar explicarlos con el mayor detalle posible.

Tienes dos vistas que extienden una «vista» genérica o layout llamado app. Las dos vistas que lo extienden (en este caso) son login y register.

Lo que estás haciendo en la ruta Route::get('/', function () { return view('auth.login'); }); es llamar a la ruta auth.login, la cual contiene el formulario de login que vemos en el archivo login.blade.php que nos muestras, y extiende el layout app.


Si comparas los archivos login.blade.php y register.blade.php, encontrarás que tienen una estructura similar:

  1. Los dos extienden el layout app
  2. Los dos imprimen contenido en secciones de dicho layout

Esto quiere decir que tanto login como register son dos vistas independientes, por así decirlo (extienden el mismo layout), y normalmente no pueden ser mezcladas en la misma vista (de la forma como los creaste).


Soluciones al problema

Dependiendo de lo que busques o cómo lo quieras hacer, puedes solucionar tu problema de dos formas distintas (como mínimo):

  1. Solución rápida: Redefinir la vista register.blade.php para que pueda ser usada con la directiva @include al momento de llamar la vista login:

    register.blade.php

    <div class="login-form">
    <div class="main-div">
        <div class="panel">
            <h2>Register</h2>
            <p>Please enter your email and password</p>
        </div>
        <form id="Register">
            <div class="form-group">
                <input type="email" name="email" id="email" class="form-control" placeholder="Email Address" required autofocus>
            </div>
            <div class="form-group">   
                <input type="password" name="password"class="form-control" id="password" placeholder="Password" required>
            </div>
            <button type="button" class="btn btn-primary">Register</button>
        </form>
    </div>
    <p class="botto-text"> Designed by Sunil Rajput</p>
    </div>
    

    En app.blade.php, harías esta modificación:

    <main class="py-4">
    <!-- Aquí empieza debe hacer los cambios de pestaña -->
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="home-tab">
            @yield('login')
        </div>
        <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="profile-tab">
            @include('register')
        </div>
    </div>
    </main>
    
  2. Hacer un rediseño de la solución:

    No le encuentro mucha utilidad a lo que intentas hacer, puesto que no es reutilizable desde ningún punto de vista, para mí no es más que una vista estática que podría ser fácilmente reemplazada por un solo archivo de Blade.

    Sin embargo, algo sencillo sería replantear un poco el layout base (app) y utilizar una sola vista principal (se podría llamar auth-forms) en la cuál se encuentre todo el contenido relacionado con las dos tabs y los dos formularios, y así el layout base podría ser reutilizado en otras partes de la aplicación.

0

al utilizar la autenticacion de laravel, para poder utilizar correctamente el extends y yield hay que entender que la plantilla maestra sera la que devuelve el AuthenticatedSessionController dentro de app/http/controllers/Auth , el apartado HOME redirecciona la pagina dashboard (HOME = 7dasboard) por lo tanto para que funcione en vez de utilizar el @extends('layout.app') se utilizaria @extends('dashboard') , con los section tal cual los estas usando. es un poco tarde pero espero que a alguien le sirva..

@extends('dashboard')

@section('contenido')
    
    <h1>hola estoy en contenidos</h1>
    @csrf
@stop
1
  • no hace falta agregar @csrf . Commented el 16 abr. 2022 a las 7:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.