feat: implement user interface and routing system

- Add Tailwind CSS configuration with custom theme and components
- Create responsive navbar with authentication-based navigation
- Implement user creation form with validation styling
- Configure protected routes with authorization middleware
- Add dashboard and user management routes
This commit is contained in:
LukiBeg 2025-10-28 17:32:50 -03:00
parent 04193b259c
commit 1c1a660663
4 changed files with 50 additions and 29 deletions

View File

@ -32,15 +32,13 @@ @layer components {
@apply border-b border-white shadow-md shadow-blue-400; @apply border-b border-white shadow-md shadow-blue-400;
} }
.nav-bar a:hover,
.nav-bar a { .nav-bar a {
@apply transition-all duration-300 transform hover:scale-105;
@apply mr-7; @apply mr-7;
@apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105; @apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105;
} }
.nav-bar a:hover {
@apply text-blue-400 transition-all duration-300 transform hover:scale-105;
}
.nav-bar-logo { .nav-bar-logo {
@apply absolute left-0; @apply absolute left-0;
/* Garantir que o container da logo seja posicionado corretamente */ /* Garantir que o container da logo seja posicionado corretamente */
@ -57,6 +55,11 @@ @layer components {
/* Mantém a proporção original da imagem */ /* Mantém a proporção original da imagem */
} }
.nav-bar>form>button {
@apply mr-7;
@apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform;
}
/*End Header - Navbar */ /*End Header - Navbar */
/* Container */ /* Container */
@ -71,16 +74,16 @@ @layer components {
@apply flex flex-col justify-center items-center w-full h-full mx-auto px-4 sm:px-6 lg:px-8; @apply flex flex-col justify-center items-center w-full h-full mx-auto px-4 sm:px-6 lg:px-8;
} }
form { .form-class {
@apply flex flex-col gap-4; @apply flex flex-col gap-4;
@apply mb-10; @apply mb-10;
} }
form input { .form-input-class {
@apply border border-gray-300 rounded-md p-2 outline-none; @apply border border-gray-300 rounded-md p-2 outline-none;
} }
form button { .form-button-class {
@apply bg-blue-500 text-white rounded-md p-2 cursor-pointer hover:bg-blue-800; @apply bg-blue-500 text-white rounded-md p-2 cursor-pointer hover:bg-blue-800;
} }

View File

@ -21,13 +21,20 @@
@auth @auth
<a href="{{ route('dashboard') }}">Início</a> <a href="{{ route('dashboard') }}">Início</a>
<a href="{{ route('login') }}">Login</a> <form action="{{ route('logout') }}" method="post">
@csrf
<button type="submit">
Logout
</button>
</form>
@endauth @endauth
@guest @guest
<a href="{{ route('users.create') }}">Início</a> <a href="{{ route('users.create') }}">Início</a>
<a href="{{ route('login') }}">Contato</a> <a href="{{ route('login') }}">Contato</a>
<a href="{{ route('users.create') }}">Sobre</a> <a href="{{ route('users.create') }}">Sobre</a>
@endguest @endguest
</nav> </nav>
</header> </header>

View File

@ -1,18 +1,17 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Create Users')
@section('content') @section('content')
<div class="container"> <div class="container">
<h1>Create Users</h1> <h1>Bem vindo a página de criação dos usuários, <span style="background-color:rgb(89, 255, 255); border-radius: 0.3em; padding: 0.2em">{{Auth::user()->name}}!</span></h1>
<form action="{{ route('users.create') }}" method="POST">
@csrf
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<button type="submit">Create User</button>
<form action="{{ route('users.create') }}" method="POST" class="form-class">
@csrf
<input type="text" name="name" placeholder="Nome do usuário" class="form-input-class">
<input type="email" name="email" placeholder="Email do usuário" class="form-input-class">
<input type="password" name="password" placeholder="8 a 20 caracteres" class="form-input-class">
<button type="submit" class="form-button-class">Criar usuário</button>
</form> </form>
</div> </div>

View File

@ -10,17 +10,29 @@
Route::middleware(['auth:sanctum'])->group(function () { Route::middleware(['auth:sanctum'])->group(function () {
Route::get('/dashboard', [UserController::class, 'dashboard'])->name('dashboard'); //Rotas LinePBX.
Route::get('/create-users', function () { });
return view('users.create-users');
})->name('users.create');
Route::post('/create-users', [CreateUserController::class, 'createUsers'])->name('users.create'); Route::middleware(['auth'])->group(function () {
Route::controller(UserController::class)->group(function () {
Route::get('/dashboard', 'dashboard')->name('dashboard');
Route::post('/create-users', 'createUsers')->name('users.create')->middleware('authorization');
});
Route::controller(LogoutController::class)->group(function () {
Route::post('/logout', [LogoutController::class, 'logout'])->name('logout'); Route::post('/logout', [LogoutController::class, 'logout'])->name('logout');
}); });
Route::get('/create-users', function () {
return view('users.create-users');
})->name('users.create')->middleware('authorization');
});
Route::controller(LoginController::class)->group(function () {
Route::get('/login', function () { Route::get('/login', function () {
return view('login'); return view('login');
})->name('login'); })->name('login');
Route::post('/login', [LoginController::class, 'login'])->name('login-post'); Route::post('/login', [LoginController::class, 'login'])->name('login-post');
});