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:
parent
04193b259c
commit
1c1a660663
|
|
@ -32,15 +32,13 @@ @layer components {
|
|||
@apply border-b border-white shadow-md shadow-blue-400;
|
||||
}
|
||||
|
||||
.nav-bar a:hover,
|
||||
.nav-bar a {
|
||||
@apply transition-all duration-300 transform hover:scale-105;
|
||||
@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;
|
||||
}
|
||||
|
||||
.nav-bar a:hover {
|
||||
@apply text-blue-400 transition-all duration-300 transform hover:scale-105;
|
||||
}
|
||||
|
||||
.nav-bar-logo {
|
||||
@apply absolute left-0;
|
||||
/* Garantir que o container da logo seja posicionado corretamente */
|
||||
|
|
@ -57,11 +55,16 @@ @layer components {
|
|||
/* 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 */
|
||||
|
||||
/* Container */
|
||||
.container-title {
|
||||
@apply text-2xl absolute top-20 ;
|
||||
@apply text-2xl absolute top-20;
|
||||
@apply text-black font-semibold;
|
||||
@apply border-b border-blue-500 rounded-md shadow-md shadow-blue-400;
|
||||
@apply p-4 transition-all duration-300 transform hover:scale-105;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
form {
|
||||
.form-class {
|
||||
@apply flex flex-col gap-4;
|
||||
@apply mb-10;
|
||||
}
|
||||
|
||||
form input {
|
||||
.form-input-class {
|
||||
@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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,13 +21,20 @@
|
|||
|
||||
@auth
|
||||
<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
|
||||
|
||||
@guest
|
||||
<a href="{{ route('users.create') }}">Início</a>
|
||||
<a href="{{ route('login') }}">Contato</a>
|
||||
<a href="{{ route('users.create') }}">Sobre</a>
|
||||
@endguest
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Create Users')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="container">
|
||||
<h1>Create Users</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>
|
||||
<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" 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>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,17 +10,29 @@
|
|||
|
||||
|
||||
Route::middleware(['auth:sanctum'])->group(function () {
|
||||
Route::get('/dashboard', [UserController::class, 'dashboard'])->name('dashboard');
|
||||
Route::get('/create-users', function () {
|
||||
return view('users.create-users');
|
||||
})->name('users.create');
|
||||
|
||||
Route::post('/create-users', [CreateUserController::class, 'createUsers'])->name('users.create');
|
||||
Route::post('/logout', [LogoutController::class, 'logout'])->name('logout');
|
||||
//Rotas LinePBX.
|
||||
});
|
||||
|
||||
Route::get('/login', function () {
|
||||
return view('login');
|
||||
})->name('login');
|
||||
Route::middleware(['auth'])->group(function () {
|
||||
|
||||
Route::post('/login', [LoginController::class, 'login'])->name('login-post');
|
||||
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::get('/create-users', function () {
|
||||
return view('users.create-users');
|
||||
})->name('users.create')->middleware('authorization');
|
||||
});
|
||||
|
||||
|
||||
Route::controller(LoginController::class)->group(function () {
|
||||
Route::get('/login', function () {
|
||||
return view('login');
|
||||
})->name('login');
|
||||
Route::post('/login', [LoginController::class, 'login'])->name('login-post');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue