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;
|
@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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue