I got two different registration & login interfaces, one for employees and the other one for external people.
I just copied the code from the employee pages and changed the routes, so everything is identical.
But for some reason on the external login & registration pages my background doesn’t load with 404 error code, I have no idea why?
Has someone any idea why that is?
Here is the page where it is working:
@extends('layouts.app')
@section('content')
<div class="flex justify-center">
<div class="w-3/6 bg-gray-400 bg-opacity-70 p-8 rounded-lg font-serif text-2xl font-bold">
@if (session('status'))
<div class="text justify-center bg-red-500 p-4 rounded-lg mb-6 text-white text-center">
{{ session('status') }}
</div>
@endif
<form action="{{ route('login') }}" method="post">
@csrf
<div class="mb-4">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Email"
class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('vorname') border-red-500 @enderror" value="{{ old('email') }}">
@error('email')
<div class="text-red-500 mt-2 text-sm">
{{ $message }}
</div>
@enderror
</div>
<div class="mb-4">
<label for="password" class="sr-only">Passwort</label>
<input type="password" name="password" id="password" placeholder="Passwort"
class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('vorname') border-red-500 @enderror" value="">
@error('password')
<div class="text-red-500 mt-2 text-sm">
{{ $message }}
</div>
@enderror
</div>
<div class="mb-4">
<div class="flex items-center">
<input type="checkbox" name="remember" id="remember" class="mr-3">
<label for="remember">Remember me</label>
</div>
</div>
<div>
<button type="submit" class="bg-gradient-to-r from-green-400 to-blue-500 text-white px-4 py-3 rounded font-medium w-full">Login</button>
</div>
</form>
</div>
</div>
@endsection
here is the page where it is not working:
@extends('layouts.app')
@section('content')
<div class="flex justify-center">
<div class="w-3/6 bg-gray-400 bg-opacity-70 p-8 rounded-lg font-serif text-2xl font-bold">
@if (session('status'))
<div class="text justify-center bg-red-500 p-4 rounded-lg mb-6 text-white text-center">
{{ session('status') }}
</div>
@endif
<form action="{{ route('portal_login') }}" method="post">
@csrf
<div class="mb-4">
<h1 class="flex justify-center mb-10"> Bewerbungsportal Login </h1>
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Email"
class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('vorname') border-red-500 @enderror" value="{{ old('email') }}">
@error('email')
<div class="text-red-500 mt-2 text-sm">
{{ $message }}
</div>
@enderror
</div>
<div class="mb-4">
<label for="password" class="sr-only">Passwort</label>
<input type="password" name="password" id="password" placeholder="Passwort"
class="bg-gray-100 border-2 w-full p-4 rounded-lg @error('vorname') border-red-500 @enderror" value="">
@error('password')
<div class="text-red-500 mt-2 text-sm">
{{ $message }}
</div>
@enderror
</div>
<div class="mb-4">
<div class="flex items-center">
<input type="checkbox" name="remember" id="remember" class="mr-3">
<label for="remember">Remember me</label>
</div>
</div>
<div>
<button type="submit" class="bg-gradient-to-r from-green-400 to-blue-500 text-white px-4 py-3 rounded font-medium w-full">Login</button>
</div>
</form>
</div>
</div>
@endsection
Here is the default layout from app.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Finanzraketen</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<style>
.hintergrund{
background: url('background.jpeg');
background-size: cover;
}
</style>
</head>
<body class="hintergrund">
<!-- Navbar goes here -->
<nav class="bg-white shadow-lg bg-gradient-to-r from-green-400 to-blue-500 mb-10">
<div class="max-w-full mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
<!-- Website Logo -->
<a href="#" class="flex items-center py-4 px-2">
<img src="rakete-2.png" alt="Logo" class="h-8 w-8 mr-2">
<span class="font-semibold text-black text-lg">Finanzraketen</span>
</a>
</div>
<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-3 ">
<ul class="flex items-center pl-10 grid grid-cols-6 gap-10">
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href="{{ route('home') }}" class="p-3">Home</a>
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href="{{ route('overview') }}" class="p-3">Stellenanzeigen</a>
@auth()
<a href="{{ route('dashboard') }}" class="col-start-3 py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Dashboard</a>
<a href="" class="col-start-4 py-2 px-2 font-medium text-black rounded shadow transition border-gray-500
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">{{ auth()->user()->email }}</a>
<form action="{{ route('logout') }}" method="post" >
@csrf
<button type="submit" class="col-start-5 py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Logout</button>
</form>
@endauth
@guest
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href="{{ route('login') }}" class="p-3">Mitarbeiter Login</a>
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href="{{ route('register') }}" class="p-3">Registrieren</a>
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href="{{ route('portal_login') }}" class="p-3">Portal Login</a>
<a class="py-2 px-2 font-medium text-black rounded shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" href="{{ route('portal_register') }}" class="p-3">Portal Registrieren</a>
@endguest
</ul>
</div>
</div>
<!-- Mobile menu button -->
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<svg class=" w-6 h-6 text-black hover:text-green-400"
x-show="!showMenu"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- mobile menu -->
<div class="hidden mobile-menu">
<ul class="">
<li> <a class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" href="{{ route('home') }}">Home</a></li>
<li> <a class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" href="{{ route('overview') }}">Stellenanzeigen</a> </li>
@auth()
<li>
<a href="{{ route('dashboard') }}" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Dashboard</a>
</li>
<li>
<a href="" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">{{ auth()->user()->email }}</a>
</li>
<li>
<form action="{{ route('logout') }}" method="post" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">
@csrf
<button type="submit">Logout</button>
</form>
</li>
@endauth
@guest
<li>
<a class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" href="{{ route('login') }}" class="p-3">Mitarbeiter Login</a>
</li>
<li>
<a class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" href="{{ route('register') }}" class="p-3">Registrieren</a>
</li>
<li>
<a class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" href="{{ route('portal_register') }}" class="p-3">Bewerbungsportal Login</a>
</li>
@endguest
</ul>
</div>
<script>
const btn = document.querySelector("button.mobile-menu-button");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
menu.classList.toggle("hidden");
});
</script>
</nav>
@yield('content')
</body>
</html>
They are the same code wise, oney the route differs. They are even in the same directory
>Solution :
The new pages where it didn’t work had a "double" uri, like so:
Route::get('/portal/login', [PortalLoginController::class, 'showLoginForm'])->name('portal_login');
The pages where it worked had a single uri, like so:
Route::get('/login', [LoginController::class, 'index'])->name('login');
I just had to add an additional / to style tag:
From
<style>
.hintergrund{
background-image: url('background.jpeg');
background-size: cover;
}
</style>
to:
<style>
.hintergrund{
background-image: url('/background.jpeg');
background-size: cover;
}
</style>