landing page dan modal login tapi masih banyak yang error
This commit is contained in:
Annisanzn
parent
d4ecbe5b45
commit
8c5ef3e1cd
|
|
@ -1,6 +1,6 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Api;
|
||||
namespace App\Http\Controllers\API;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Http\Resources\ContactInfoResource;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Api;
|
||||
namespace App\Http\Controllers\API;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Models\HeroSection;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Http\Requests\LoginRequest;
|
||||
use App\Models\User;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
|
||||
class AuthController extends Controller
|
||||
{
|
||||
/**
|
||||
* Handle user login
|
||||
*/
|
||||
public function login(LoginRequest $request)
|
||||
{
|
||||
$credentials = $request->validated();
|
||||
|
||||
// Auto-assign role based on email domain
|
||||
$email = $credentials['email'];
|
||||
$role = $this->assignRoleByEmail($email);
|
||||
|
||||
// Find user by email
|
||||
$user = User::where('email', $email)->first();
|
||||
|
||||
if (!$user || !Hash::check($credentials['password'], $user->password)) {
|
||||
return response()->json([
|
||||
'success' => false,
|
||||
'message' => 'Email atau password salah'
|
||||
], 401);
|
||||
}
|
||||
|
||||
// Update user role if changed
|
||||
if ($user->role !== $role) {
|
||||
$user->role = $role;
|
||||
$user->save();
|
||||
}
|
||||
|
||||
// Create token
|
||||
$token = $user->createToken('auth-token')->plainTextToken;
|
||||
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'Login berhasil',
|
||||
'token' => $token,
|
||||
'user' => [
|
||||
'id' => $user->id,
|
||||
'name' => $user->name,
|
||||
'email' => $user->email,
|
||||
'role' => $user->role,
|
||||
'nim' => $user->nim,
|
||||
]
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle user logout
|
||||
*/
|
||||
public function logout(Request $request)
|
||||
{
|
||||
$request->user()->currentAccessToken()->delete();
|
||||
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'Logout berhasil'
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current user
|
||||
*/
|
||||
public function user(Request $request)
|
||||
{
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'user' => [
|
||||
'id' => $request->user()->id,
|
||||
'name' => $request->user()->name,
|
||||
'email' => $request->user()->email,
|
||||
'role' => $request->user()->role,
|
||||
'nim' => $request->user()->nim,
|
||||
]
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto-assign role based on email domain
|
||||
*/
|
||||
private function assignRoleByEmail(string $email): string
|
||||
{
|
||||
// Student email pattern: nim@student.polije.ac.id
|
||||
if (str_contains($email, 'student.polije.ac.id')) {
|
||||
return 'user';
|
||||
}
|
||||
|
||||
// Staff email pattern: name@polije.ac.id
|
||||
if (str_contains($email, 'polije.ac.id')) {
|
||||
return 'konselor'; // Default to konselor for staff
|
||||
}
|
||||
|
||||
// Default fallback
|
||||
return 'user';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Middleware;
|
||||
|
||||
use Closure;
|
||||
use Illuminate\Http\Request;
|
||||
use Symfony\Component\HttpFoundation\Response;
|
||||
|
||||
class RoleMiddleware
|
||||
{
|
||||
/**
|
||||
* Handle an incoming request.
|
||||
*
|
||||
* @param \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response) $next
|
||||
*/
|
||||
public function handle(Request $request, Closure $next, string $role): Response
|
||||
{
|
||||
if (!auth()->check()) {
|
||||
return response()->json([
|
||||
'success' => false,
|
||||
'message' => 'Unauthorized'
|
||||
], 401);
|
||||
}
|
||||
|
||||
$user = auth()->user();
|
||||
|
||||
// Check if user has the required role
|
||||
if ($user->role !== $role) {
|
||||
return response()->json([
|
||||
'success' => false,
|
||||
'message' => 'Forbidden - Insufficient permissions'
|
||||
], 403);
|
||||
}
|
||||
|
||||
return $next($request);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Requests;
|
||||
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
use Illuminate\Http\Exceptions\HttpResponseException;
|
||||
use Illuminate\Contracts\Validation\Validator;
|
||||
|
||||
class LoginRequest extends FormRequest
|
||||
{
|
||||
/**
|
||||
* Determine if the user is authorized to make this request.
|
||||
*/
|
||||
public function authorize(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the validation rules that apply to the request.
|
||||
*
|
||||
* @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
|
||||
*/
|
||||
public function rules(): array
|
||||
{
|
||||
return [
|
||||
'email' => 'required|email',
|
||||
'password' => 'required|min:8',
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the error messages for the defined validation rules.
|
||||
*
|
||||
* @return array<string, string>
|
||||
*/
|
||||
public function messages(): array
|
||||
{
|
||||
return [
|
||||
'email.required' => 'Email wajib diisi',
|
||||
'email.email' => 'Format email tidak valid',
|
||||
'password.required' => 'Password wajib diisi',
|
||||
'password.min' => 'Password minimal 8 karakter',
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Configure the validator instance.
|
||||
*
|
||||
* @param \Illuminate\Validation\Validator $validator
|
||||
* @return void
|
||||
*/
|
||||
public function withValidator(Validator $validator): void
|
||||
{
|
||||
$validator->after(function ($validator) {
|
||||
$email = $this->input('email');
|
||||
|
||||
// Custom validation: email must contain polije.ac.id
|
||||
if ($email && !str_contains($email, 'polije.ac.id')) {
|
||||
$validator->errors()->add('email', 'Gunakan email resmi Polije (@polije.ac.id atau @student.polije.ac.id)');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get custom attributes for validator errors.
|
||||
*
|
||||
* @return array<string, string>
|
||||
*/
|
||||
public function attributes(): array
|
||||
{
|
||||
return [
|
||||
'email' => 'Email',
|
||||
'password' => 'Password',
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
@ -6,11 +6,12 @@
|
|||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Foundation\Auth\User as Authenticatable;
|
||||
use Illuminate\Notifications\Notifiable;
|
||||
use Laravel\Sanctum\HasApiTokens;
|
||||
|
||||
class User extends Authenticatable
|
||||
{
|
||||
/** @use HasFactory<\Database\Factories\UserFactory> */
|
||||
use HasFactory, Notifiable;
|
||||
use HasFactory, Notifiable, HasApiTokens;
|
||||
|
||||
/**
|
||||
* The attributes that are mass assignable.
|
||||
|
|
@ -21,6 +22,8 @@ class User extends Authenticatable
|
|||
'name',
|
||||
'email',
|
||||
'password',
|
||||
'role',
|
||||
'nim',
|
||||
];
|
||||
|
||||
/**
|
||||
|
|
@ -45,4 +48,28 @@ protected function casts(): array
|
|||
'password' => 'hashed',
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user is student
|
||||
*/
|
||||
public function isStudent(): bool
|
||||
{
|
||||
return $this->role === 'user';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user is konselor
|
||||
*/
|
||||
public function isKonselor(): bool
|
||||
{
|
||||
return $this->role === 'konselor';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user is operator
|
||||
*/
|
||||
public function isOperator(): bool
|
||||
{
|
||||
return $this->role === 'operator';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
"require": {
|
||||
"php": "^8.2",
|
||||
"laravel/framework": "^12.0",
|
||||
"laravel/sanctum": "^4.3",
|
||||
"laravel/tinker": "^2.10.1"
|
||||
},
|
||||
"require-dev": {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "c514d8f7b9fc5970bdd94287905ef584",
|
||||
"content-hash": "ad91ab9bde70e3576f2b64dd11542bc4",
|
||||
"packages": [
|
||||
{
|
||||
"name": "brick/math",
|
||||
|
|
@ -1333,6 +1333,69 @@
|
|||
},
|
||||
"time": "2026-02-06T12:17:10+00:00"
|
||||
},
|
||||
{
|
||||
"name": "laravel/sanctum",
|
||||
"version": "v4.3.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/laravel/sanctum.git",
|
||||
"reference": "e3b85d6e36ad00e5db2d1dcc27c81ffdf15cbf76"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/laravel/sanctum/zipball/e3b85d6e36ad00e5db2d1dcc27c81ffdf15cbf76",
|
||||
"reference": "e3b85d6e36ad00e5db2d1dcc27c81ffdf15cbf76",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"ext-json": "*",
|
||||
"illuminate/console": "^11.0|^12.0|^13.0",
|
||||
"illuminate/contracts": "^11.0|^12.0|^13.0",
|
||||
"illuminate/database": "^11.0|^12.0|^13.0",
|
||||
"illuminate/support": "^11.0|^12.0|^13.0",
|
||||
"php": "^8.2",
|
||||
"symfony/console": "^7.0|^8.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"mockery/mockery": "^1.6",
|
||||
"orchestra/testbench": "^9.15|^10.8|^11.0",
|
||||
"phpstan/phpstan": "^1.10"
|
||||
},
|
||||
"type": "library",
|
||||
"extra": {
|
||||
"laravel": {
|
||||
"providers": [
|
||||
"Laravel\\Sanctum\\SanctumServiceProvider"
|
||||
]
|
||||
}
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Laravel\\Sanctum\\": "src/"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Taylor Otwell",
|
||||
"email": "taylor@laravel.com"
|
||||
}
|
||||
],
|
||||
"description": "Laravel Sanctum provides a featherweight authentication system for SPAs and simple APIs.",
|
||||
"keywords": [
|
||||
"auth",
|
||||
"laravel",
|
||||
"sanctum"
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/laravel/sanctum/issues",
|
||||
"source": "https://github.com/laravel/sanctum"
|
||||
},
|
||||
"time": "2026-02-07T17:19:31+00:00"
|
||||
},
|
||||
{
|
||||
"name": "laravel/serializable-closure",
|
||||
"version": "v2.0.9",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
'allowed_methods' => ['*'],
|
||||
|
||||
'allowed_origins' => ['http://localhost:5173', 'http://localhost:5174', 'http://localhost:5175'],
|
||||
'allowed_origins' => ['http://localhost:5173', 'http://localhost:5174', 'http://localhost:5175', 'http://localhost:5176', 'http://127.0.0.1:5176'],
|
||||
|
||||
'allowed_origins_patterns' => [],
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
<?php
|
||||
|
||||
use Laravel\Sanctum\Sanctum;
|
||||
|
||||
return [
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Stateful Domains
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Requests from the following domains / hosts will receive stateful API
|
||||
| authentication cookies. Typically, these should include your local
|
||||
| and production domains which access your API via a frontend SPA.
|
||||
|
|
||||
*/
|
||||
|
||||
'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
|
||||
'%s%s',
|
||||
'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
|
||||
Sanctum::currentApplicationUrlWithPort(),
|
||||
// Sanctum::currentRequestHost(),
|
||||
))),
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Sanctum Guards
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| This array contains the authentication guards that will be checked when
|
||||
| Sanctum is trying to authenticate a request. If none of these guards
|
||||
| are able to authenticate the request, Sanctum will use the bearer
|
||||
| token that's present on an incoming request for authentication.
|
||||
|
|
||||
*/
|
||||
|
||||
'guard' => ['web'],
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Expiration Minutes
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| This value controls the number of minutes until an issued token will be
|
||||
| considered expired. This will override any values set in the token's
|
||||
| "expires_at" attribute, but first-party sessions are not affected.
|
||||
|
|
||||
*/
|
||||
|
||||
'expiration' => null,
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Token Prefix
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Sanctum can prefix new tokens in order to take advantage of numerous
|
||||
| security scanning initiatives maintained by open source platforms
|
||||
| that notify developers if they commit tokens into repositories.
|
||||
|
|
||||
| See: https://docs.github.com/en/code-security/secret-scanning/about-secret-scanning
|
||||
|
|
||||
*/
|
||||
|
||||
'token_prefix' => env('SANCTUM_TOKEN_PREFIX', ''),
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Sanctum Middleware
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| When authenticating your first-party SPA with Sanctum you may need to
|
||||
| customize some of the middleware Sanctum uses while processing the
|
||||
| request. You may change the middleware listed below as required.
|
||||
|
|
||||
*/
|
||||
|
||||
'middleware' => [
|
||||
'authenticate_session' => Laravel\Sanctum\Http\Middleware\AuthenticateSession::class,
|
||||
'encrypt_cookies' => Illuminate\Cookie\Middleware\EncryptCookies::class,
|
||||
'validate_csrf_token' => Illuminate\Foundation\Http\Middleware\ValidateCsrfToken::class,
|
||||
],
|
||||
|
||||
];
|
||||
|
|
@ -17,24 +17,11 @@ public function up(): void
|
|||
$table->string('email')->unique();
|
||||
$table->timestamp('email_verified_at')->nullable();
|
||||
$table->string('password');
|
||||
$table->enum('role', ['user', 'konselor', 'operator'])->default('user');
|
||||
$table->string('nim')->nullable(); // For student users
|
||||
$table->rememberToken();
|
||||
$table->timestamps();
|
||||
});
|
||||
|
||||
Schema::create('password_reset_tokens', function (Blueprint $table) {
|
||||
$table->string('email')->primary();
|
||||
$table->string('token');
|
||||
$table->timestamp('created_at')->nullable();
|
||||
});
|
||||
|
||||
Schema::create('sessions', function (Blueprint $table) {
|
||||
$table->string('id')->primary();
|
||||
$table->foreignId('user_id')->nullable()->index();
|
||||
$table->string('ip_address', 45)->nullable();
|
||||
$table->text('user_agent')->nullable();
|
||||
$table->longText('payload');
|
||||
$table->integer('last_activity')->index();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -43,7 +30,5 @@ public function up(): void
|
|||
public function down(): void
|
||||
{
|
||||
Schema::dropIfExists('users');
|
||||
Schema::dropIfExists('password_reset_tokens');
|
||||
Schema::dropIfExists('sessions');
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*/
|
||||
public function up(): void
|
||||
{
|
||||
Schema::create('personal_access_tokens', function (Blueprint $table) {
|
||||
$table->id();
|
||||
$table->morphs('tokenable');
|
||||
$table->text('name');
|
||||
$table->string('token', 64)->unique();
|
||||
$table->text('abilities')->nullable();
|
||||
$table->timestamp('last_used_at')->nullable();
|
||||
$table->timestamp('expires_at')->nullable()->index();
|
||||
$table->timestamps();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*/
|
||||
public function down(): void
|
||||
{
|
||||
Schema::dropIfExists('personal_access_tokens');
|
||||
}
|
||||
};
|
||||
|
|
@ -79,10 +79,33 @@ public function run(): void
|
|||
Article::create($article);
|
||||
}
|
||||
|
||||
// Create test user
|
||||
User::factory()->create([
|
||||
'name' => 'Admin PolijeCare',
|
||||
'email' => 'admin@polije.ac.id',
|
||||
]);
|
||||
// Create test users with specific roles
|
||||
$users = [
|
||||
[
|
||||
'name' => 'Ahmad Mahasiswa',
|
||||
'email' => '2021001@student.polije.ac.id',
|
||||
'password' => Hash::make('password123'),
|
||||
'role' => 'user',
|
||||
'nim' => '2021001',
|
||||
],
|
||||
[
|
||||
'name' => 'Siti Konselor',
|
||||
'email' => 'siti@polije.ac.id',
|
||||
'password' => Hash::make('password123'),
|
||||
'role' => 'konselor',
|
||||
'nim' => null,
|
||||
],
|
||||
[
|
||||
'name' => 'Budi Operator',
|
||||
'email' => 'budi@polije.ac.id',
|
||||
'password' => Hash::make('password123'),
|
||||
'role' => 'operator',
|
||||
'nim' => null,
|
||||
],
|
||||
];
|
||||
|
||||
foreach ($users as $user) {
|
||||
User::create($user);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<?php
|
||||
|
||||
namespace Database\Seeders;
|
||||
|
||||
use Illuminate\Database\Seeder;
|
||||
use App\Models\User;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
|
||||
class UserSeeder extends Seeder
|
||||
{
|
||||
/**
|
||||
* Run the database seeds.
|
||||
*/
|
||||
public function run(): void
|
||||
{
|
||||
// Create test users
|
||||
$users = [
|
||||
[
|
||||
'name' => 'Ahmad Mahasiswa',
|
||||
'email' => '2021001@student.polije.ac.id',
|
||||
'password' => Hash::make('password123'),
|
||||
'role' => 'user',
|
||||
'nim' => '2021001',
|
||||
],
|
||||
[
|
||||
'name' => 'Siti Konselor',
|
||||
'email' => 'siti@polije.ac.id',
|
||||
'password' => Hash::make('password123'),
|
||||
'role' => 'konselor',
|
||||
'nim' => null,
|
||||
],
|
||||
[
|
||||
'name' => 'Budi Operator',
|
||||
'email' => 'budi@polije.ac.id',
|
||||
'password' => Hash::make('password123'),
|
||||
'role' => 'operator',
|
||||
'nim' => null,
|
||||
],
|
||||
];
|
||||
|
||||
foreach ($users as $user) {
|
||||
User::create($user);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,9 +2,11 @@
|
|||
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
use App\Http\Controllers\Api\ArticleController;
|
||||
use App\Http\Controllers\Api\ContactController;
|
||||
use App\Http\Controllers\Api\HeroController;
|
||||
use App\Http\Controllers\API\ArticleController;
|
||||
use App\Http\Controllers\API\ContactController;
|
||||
use App\Http\Controllers\API\HeroController;
|
||||
use App\Http\Controllers\AuthController;
|
||||
use App\Http\Middleware\RoleMiddleware;
|
||||
|
||||
Route::get('/test', function () {
|
||||
return response()->json([
|
||||
|
|
@ -21,3 +23,54 @@
|
|||
|
||||
// Hero Section
|
||||
Route::get('/hero', [HeroController::class, 'index']);
|
||||
|
||||
// Auth routes
|
||||
Route::post('/login', [AuthController::class, 'login']);
|
||||
|
||||
// Protected routes
|
||||
Route::middleware('auth:sanctum')->group(function () {
|
||||
Route::post('/logout', [AuthController::class, 'logout']);
|
||||
Route::get('/user', [AuthController::class, 'user']);
|
||||
|
||||
// User routes
|
||||
Route::middleware(RoleMiddleware::class . ':user')->prefix('user')->group(function () {
|
||||
Route::get('/dashboard', function () {
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'User Dashboard',
|
||||
'data' => [
|
||||
'role' => 'user',
|
||||
'dashboard' => 'student'
|
||||
]
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
// Konselor routes
|
||||
Route::middleware(RoleMiddleware::class . ':konselor')->prefix('konselor')->group(function () {
|
||||
Route::get('/dashboard', function () {
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'Konselor Dashboard',
|
||||
'data' => [
|
||||
'role' => 'konselor',
|
||||
'dashboard' => 'konselor'
|
||||
]
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
// Operator routes
|
||||
Route::middleware(RoleMiddleware::class . ':operator')->prefix('operator')->group(function () {
|
||||
Route::get('/dashboard', function () {
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'Operator Dashboard',
|
||||
'data' => [
|
||||
'role' => 'operator',
|
||||
'dashboard' => 'operator'
|
||||
]
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<?php
|
||||
|
||||
require __DIR__.'/vendor/autoload.php';
|
||||
|
||||
$app = require_once __DIR__.'/bootstrap/app.php';
|
||||
|
||||
$kernel = $app->make(Illuminate\Contracts\Console\Kernel::class);
|
||||
|
||||
$kernel->bootstrap();
|
||||
|
||||
echo "Backend server is ready!\n";
|
||||
echo "Available routes:\n";
|
||||
echo "- GET /api/test\n";
|
||||
echo "- POST /api/login\n";
|
||||
echo "- GET /api/user\n";
|
||||
echo "- GET /api/contact\n";
|
||||
echo "- GET /api/hero\n";
|
||||
echo "- GET /api/articles\n";
|
||||
|
||||
// Test database connection
|
||||
try {
|
||||
\Illuminate\Support\Facades\DB::connection()->getPdo();
|
||||
echo "\n✅ Database connection: OK\n";
|
||||
|
||||
// Check users
|
||||
$userCount = \App\Models\User::count();
|
||||
echo "✅ Users in database: {$userCount}\n";
|
||||
|
||||
if ($userCount > 0) {
|
||||
echo "✅ Test users ready for login\n";
|
||||
}
|
||||
} catch (\Exception $e) {
|
||||
echo "\n❌ Database connection failed: " . $e->getMessage() . "\n";
|
||||
}
|
||||
|
||||
echo "\nTo start the server, run: php artisan serve\n";
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
"framer-motion": "^10.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^6.8.1",
|
||||
"tailwindcss": "^3.4.19"
|
||||
},
|
||||
|
|
@ -3482,6 +3483,15 @@
|
|||
"react": "^18.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
|
||||
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"framer-motion": "^10.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^6.8.1",
|
||||
"tailwindcss": "^3.4.19"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
import React from 'react';
|
||||
|
||||
const AppMinimal = () => {
|
||||
return (
|
||||
<div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
|
||||
<h1 style={{ color: '#E6E6FA', marginBottom: '20px' }}>PolijeCare - Test Page</h1>
|
||||
<p style={{ color: '#666', marginBottom: '20px' }}>Halaman test untuk memastikan React berfungsi.</p>
|
||||
|
||||
<div style={{
|
||||
padding: '20px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
borderRadius: '8px',
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
<h2 style={{ color: '#333', marginBottom: '10px' }}>Status System:</h2>
|
||||
<ul style={{ color: '#666', lineHeight: '1.6' }}>
|
||||
<li>✅ React berjalan</li>
|
||||
<li>✅ CSS terload</li>
|
||||
<li>✅ Tidak ada black screen</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
padding: '20px',
|
||||
backgroundColor: '#E6E6FA',
|
||||
borderRadius: '8px',
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
<h2 style={{ color: '#333', marginBottom: '10px' }}>Test Login:</h2>
|
||||
<p style={{ color: '#666', marginBottom: '10px' }}>Akun test tersedia:</p>
|
||||
<div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>
|
||||
<strong>Mahasiswa:</strong> 2021001@student.polije.ac.id / password123<br/>
|
||||
<strong>Konselor:</strong> siti@polije.ac.id / password123<br/>
|
||||
<strong>Operator:</strong> budi@polije.ac.id / password123
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => alert('Test button berfungsi!')}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#4C6EF5',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Test Button
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppMinimal;
|
||||
|
|
@ -1,29 +1,84 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { ThemeProvider } from './contexts/ThemeContext';
|
||||
import { AuthProvider, useAuth } from './contexts/AuthContext';
|
||||
import ProtectedRoute from './components/ProtectedRoute';
|
||||
|
||||
// Pages
|
||||
import LandingPage from './pages/LandingPage';
|
||||
import ArticleDetail from './components/ArticleDetail';
|
||||
import './App.css';
|
||||
import UserDashboard from './pages/UserDashboard';
|
||||
import KonselorDashboard from './pages/KonselorDashboard';
|
||||
import OperatorDashboard from './pages/OperatorDashboard';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<Router>
|
||||
<div className="App">
|
||||
<AuthProvider>
|
||||
<Router>
|
||||
<Routes>
|
||||
{/* Public Routes */}
|
||||
<Route path="/" element={<LandingPage />} />
|
||||
<Route path="/artikel" element={<LandingPage />} />
|
||||
<Route path="/artikel/:slug" element={<ArticleDetail />} />
|
||||
<Route path="/login" element={<LandingPage />} />
|
||||
<Route path="/user/dashboard" element={<LandingPage />} />
|
||||
<Route path="/operator/dashboard" element={<LandingPage />} />
|
||||
<Route path="/konselor/dashboard" element={<LandingPage />} />
|
||||
<Route path="/redirect" element={<LandingPage />} />
|
||||
<Route path="/about" element={<LandingPage />} />
|
||||
<Route path="/services" element={<LandingPage />} />
|
||||
<Route path="/articles" element={<LandingPage />} />
|
||||
<Route path="/contact" element={<LandingPage />} />
|
||||
|
||||
{/* Protected Dashboard Routes */}
|
||||
<Route
|
||||
path="/user/dashboard"
|
||||
element={
|
||||
<ProtectedRoute requiredRole="user">
|
||||
<UserDashboard />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/konselor/dashboard"
|
||||
element={
|
||||
<ProtectedRoute requiredRole="konselor">
|
||||
<KonselorDashboard />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/operator/dashboard"
|
||||
element={
|
||||
<ProtectedRoute requiredRole="operator">
|
||||
<OperatorDashboard />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Redirect */}
|
||||
<Route path="/redirect" element={<RedirectDashboard />} />
|
||||
|
||||
{/* 404 */}
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</Router>
|
||||
</Router>
|
||||
</AuthProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Redirect component for role-based navigation
|
||||
const RedirectDashboard = () => {
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
|
||||
if (!isAuthenticated || !user) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
switch (user.role) {
|
||||
case 'user':
|
||||
return <Navigate to="/user/dashboard" replace />;
|
||||
case 'konselor':
|
||||
return <Navigate to="/konselor/dashboard" replace />;
|
||||
case 'operator':
|
||||
return <Navigate to="/operator/dashboard" replace />;
|
||||
default:
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { articleService } from '../services/articleService';
|
||||
import { fadeIn, slideUp, staggerChildren } from '../utils/motionVariants';
|
||||
|
||||
const Articles = () => {
|
||||
|
|
@ -10,25 +9,40 @@ const Articles = () => {
|
|||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchArticles();
|
||||
}, []);
|
||||
|
||||
const fetchArticles = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await articleService.getAll();
|
||||
if (response.success) {
|
||||
setArticles(response.data);
|
||||
} else {
|
||||
setError('Failed to load articles');
|
||||
// Temporary disable API calls to prevent CORS errors
|
||||
const mockArticles = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Pentingnya Menjaga Lingkungan Kampus Aman dari Kekerasan Seksual',
|
||||
slug: 'pentingnya-menjaga-lingkungan-kampus-aman-dari-kekerasan-seksual',
|
||||
image: 'articles/safe-campus.jpg',
|
||||
content: 'Lingkungan kampus yang aman adalah hak setiap sivitas akademika.',
|
||||
is_published: true,
|
||||
published_at: '2024-01-07T00:00:00.000000Z'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Prosedur Pelaporan Kasus Kekerasan Seksual di Polije',
|
||||
slug: 'prosedur-pelaporan-kasus-kekerasan-seksual-di-polije',
|
||||
image: 'articles/reporting-procedure.jpg',
|
||||
content: 'Prosedur pelaporan kasus kekerasan seksual di Politeknik Negeri Jember.',
|
||||
is_published: true,
|
||||
published_at: '2024-01-05T00:00:00.000000Z'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Hak dan Kewajiban Korban dan Pelapor Kekerasan Seksual',
|
||||
slug: 'hak-dan-kewajiban-korban-dan-pelapor-kekerasan-seksual',
|
||||
image: 'articles/rights-responsibilities.jpg',
|
||||
content: 'Sebagai korban atau pelapor kekerasan seksual, Anda memiliki hak-hak.',
|
||||
is_published: true,
|
||||
published_at: '2024-01-03T00:00:00.000000Z'
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to load articles');
|
||||
console.error('Error fetching articles:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
];
|
||||
|
||||
setArticles(mockArticles);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
const options = { year: 'numeric', month: 'long', day: 'numeric' };
|
||||
|
|
@ -144,7 +158,7 @@ const Articles = () => {
|
|||
>
|
||||
{articles.map((article, index) => (
|
||||
<motion.article
|
||||
key={article.uuid}
|
||||
key={article.id || index}
|
||||
className="bg-white rounded-2xl shadow-soft hover:shadow-card transition-all duration-300 hover:-translate-y-2 overflow-hidden group"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { contactService } from '../services/contactService';
|
||||
import { fadeIn, slideUp, staggerChildren } from '../utils/motionVariants';
|
||||
|
||||
const Contact = () => {
|
||||
|
|
@ -9,26 +8,21 @@ const Contact = () => {
|
|||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchContactInfo();
|
||||
// Temporary disable API calls to prevent 404 errors
|
||||
const mockContactInfo = {
|
||||
address: 'Jl. Mastrip PO Box 164, Jember 68121, Jawa Timur, Indonesia',
|
||||
phone: '+62 331-123456',
|
||||
email: 'satgasppkpt@polije.ac.id',
|
||||
instagram: '@satgasppkpt_polije',
|
||||
whatsapp: '+6281234567890',
|
||||
facebook: 'SatgasPPKPTPolije',
|
||||
twitter: '@SatgasPPKPTPolije'
|
||||
};
|
||||
|
||||
setContactInfo(mockContactInfo);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const fetchContactInfo = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await contactService.get();
|
||||
if (response.success) {
|
||||
setContactInfo(response.data);
|
||||
} else {
|
||||
setError('Failed to load contact information');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to load contact information');
|
||||
console.error('Error fetching contact info:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const defaultContact = {
|
||||
address: 'Jl. Mastrip PO Box 164, Jember 68121, Jawa Timur, Indonesia',
|
||||
phone: '+62 331-123456',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,373 @@
|
|||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { FiMail, FiLock, FiAlertCircle, FiEye, FiEyeOff, FiX } from 'react-icons/fi';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../hooks/useAuth';
|
||||
|
||||
// Motion variants for animations
|
||||
const fadeIn = {
|
||||
hidden: { opacity: 0 },
|
||||
show: { opacity: 1, transition: { duration: 0.3 } }
|
||||
};
|
||||
|
||||
const slideUp = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
show: { opacity: 1, y: 0, transition: { duration: 0.3, delay: 0.1 } }
|
||||
};
|
||||
|
||||
const modalVariants = {
|
||||
hidden: { opacity: 0, scale: 0.95 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 30
|
||||
}
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
scale: 0.95,
|
||||
transition: { duration: 0.2 }
|
||||
}
|
||||
};
|
||||
|
||||
const backdropVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
show: { opacity: 1, transition: { duration: 0.2 } },
|
||||
exit: { opacity: 0, transition: { duration: 0.2 } }
|
||||
};
|
||||
|
||||
const LoginModal = ({ isOpen, onClose }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
email: '',
|
||||
password: ''
|
||||
});
|
||||
const [errors, setErrors] = useState({});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [loginError, setLoginError] = useState('');
|
||||
const navigate = useNavigate();
|
||||
const { login } = useAuth();
|
||||
|
||||
const validateEmail = (email) => {
|
||||
const emailRegex = /^[^\s@]+@polije\.ac\.id$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors = {};
|
||||
|
||||
if (!formData.email) {
|
||||
newErrors.email = 'Email wajib diisi';
|
||||
} else if (!validateEmail(formData.email)) {
|
||||
newErrors.email = 'Email harus menggunakan domain @polije.ac.id';
|
||||
}
|
||||
|
||||
if (!formData.password) {
|
||||
newErrors.password = 'Password wajib diisi';
|
||||
} else if (formData.password.length < 6) {
|
||||
newErrors.password = 'Password minimal 6 karakter';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
|
||||
// Clear error when user starts typing
|
||||
if (errors[name]) {
|
||||
setErrors(prev => ({
|
||||
...prev,
|
||||
[name]: ''
|
||||
}));
|
||||
}
|
||||
|
||||
// Clear login error when user starts typing
|
||||
if (loginError) {
|
||||
setLoginError('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setLoginError('');
|
||||
|
||||
try {
|
||||
const result = await login({
|
||||
email: formData.email,
|
||||
password: formData.password
|
||||
});
|
||||
|
||||
console.log('🔍 Login result:', result);
|
||||
|
||||
if (result && result.success) {
|
||||
console.log('✅ Login successful');
|
||||
onClose(); // Close modal
|
||||
navigate('/redirect');
|
||||
} else {
|
||||
console.error('❌ Login failed:', result);
|
||||
const errorMessage = result?.message || result?.error || 'Login gagal. Silakan coba lagi.';
|
||||
setLoginError(errorMessage);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Login error:', error);
|
||||
console.error('Error details:', error.response?.data || error.message);
|
||||
const errorMessage = error.response?.data?.message || error.message || 'Terjadi kesalahan. Silakan coba lagi.';
|
||||
setLoginError(errorMessage);
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const togglePasswordVisibility = () => {
|
||||
setShowPassword(!showPassword);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
if (!isLoading) {
|
||||
onClose();
|
||||
// Reset form
|
||||
setFormData({ email: '', password: '' });
|
||||
setErrors({});
|
||||
setLoginError('');
|
||||
setShowPassword(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
document.body.style.overflow = 'unset';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
document.body.style.overflow = 'unset';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
variants={backdropVariants}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
exit="exit"
|
||||
onClick={handleBackdropClick}
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
|
||||
|
||||
{/* Modal */}
|
||||
<motion.div
|
||||
className="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden"
|
||||
variants={modalVariants}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
exit="exit"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={handleClose}
|
||||
disabled={isLoading}
|
||||
className="absolute top-4 right-4 z-10 p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<FiX className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{/* Modal Content */}
|
||||
<div className="p-6 sm:p-8">
|
||||
{/* Header with Protection Icon */}
|
||||
<motion.div
|
||||
className="text-center mb-6"
|
||||
variants={slideUp}
|
||||
>
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
|
||||
<img
|
||||
src="/logo_polijecare.png"
|
||||
alt="Polijecare Logo"
|
||||
className="w-10 h-10 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
PolijeCare
|
||||
</h1>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Portal Layanan Perlindungan & Kesejahteraan
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Login Form */}
|
||||
<motion.form
|
||||
onSubmit={handleSubmit}
|
||||
variants={slideUp}
|
||||
>
|
||||
<div className="mb-6">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 text-center leading-relaxed">
|
||||
Masuk menggunakan akun resmi Polije<br />
|
||||
untuk menjaga keamanan dan kerahasiaan data Anda.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Login Error Alert */}
|
||||
{loginError && (
|
||||
<motion.div
|
||||
className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3 text-red-600 dark:text-red-400 text-sm"
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<FiAlertCircle className="w-5 h-5 flex-shrink-0" />
|
||||
<span>{loginError}</span>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Email Field */}
|
||||
<div className="mb-4">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Email Polije
|
||||
</label>
|
||||
<div className="relative">
|
||||
<FiMail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors dark:bg-gray-700 dark:border-gray-600 dark:text-white ${
|
||||
errors.email ? 'border-red-300 dark:border-red-600' : 'border-gray-300'
|
||||
}`}
|
||||
placeholder="nama@polije.ac.id"
|
||||
disabled={isLoading}
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
{errors.email && (
|
||||
<motion.p
|
||||
className="mt-1 text-sm text-red-600 dark:text-red-400"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
>
|
||||
{errors.email}
|
||||
</motion.p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div className="mb-6">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<FiLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
id="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleInputChange}
|
||||
className={`w-full pl-10 pr-12 py-3 border rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors dark:bg-gray-700 dark:border-gray-600 dark:text-white ${
|
||||
errors.password ? 'border-red-300 dark:border-red-600' : 'border-gray-300'
|
||||
}`}
|
||||
placeholder="Masukkan password"
|
||||
disabled={isLoading}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors disabled:opacity-50"
|
||||
onClick={togglePasswordVisibility}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{showPassword ? <FiEyeOff className="w-5 h-5" /> : <FiEye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<motion.p
|
||||
className="mt-1 text-sm text-red-600 dark:text-red-400"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
>
|
||||
{errors.password}
|
||||
</motion.p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<motion.button
|
||||
type="submit"
|
||||
className="w-full py-3 px-4 bg-primary text-white font-medium rounded-lg shadow-lg hover:bg-primary-dark hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none"
|
||||
disabled={isLoading}
|
||||
whileHover={{ scale: isLoading ? 1 : 1.02 }}
|
||||
whileTap={{ scale: isLoading ? 1 : 0.98 }}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
|
||||
<span>Masuk...</span>
|
||||
</div>
|
||||
) : (
|
||||
'Masuk'
|
||||
)}
|
||||
</motion.button>
|
||||
</motion.form>
|
||||
|
||||
{/* Footer */}
|
||||
<motion.div
|
||||
className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700"
|
||||
variants={slideUp}
|
||||
>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 text-center leading-relaxed">
|
||||
Dilindungi dengan enkripsi end-to-end<br />
|
||||
© 2026 PolijeCare - Politeknik Negeri Jember
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Background Decoration */}
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute -top-20 -right-20 w-40 h-40 bg-gradient-to-br from-primary/10 to-accent/5 rounded-full blur-2xl"></div>
|
||||
<div className="absolute -bottom-16 -left-16 w-32 h-32 bg-gradient-to-br from-accent/10 to-primary/5 rounded-full blur-xl"></div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginModal;
|
||||
|
|
@ -4,10 +4,12 @@ import { motion, AnimatePresence } from 'framer-motion';
|
|||
import { useAuth } from '../hooks/useAuth';
|
||||
import { fadeIn, slideDown } from '../utils/motionVariants';
|
||||
import ThemeToggle from './ThemeToggle';
|
||||
import LoginModal from './LoginModal';
|
||||
|
||||
const Navbar = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
|
||||
const { isAuthenticated, user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
|
@ -78,22 +80,15 @@ const Navbar = () => {
|
|||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
to="/"
|
||||
className="flex items-center space-x-3 group"
|
||||
onClick={() => handleNavClick('#hero')}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="w-12 h-12 bg-white rounded-xl flex items-center justify-center shadow-soft group-hover:shadow-card transition-all duration-300 border border-primary/20">
|
||||
<img
|
||||
src="/logo_polijecare.png"
|
||||
alt="PolijeCare Logo"
|
||||
className="w-10 h-10 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1 w-3 h-3 bg-accent rounded-full animate-pulse"></div>
|
||||
<Link to="/" className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-primary to-accent rounded-xl flex items-center justify-center shadow-lg">
|
||||
<img
|
||||
src="/logo_polijecare.png"
|
||||
alt="Polijecare Logo"
|
||||
className="w-8 h-8 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-gray-900 group-hover:text-primary transition-colors">
|
||||
<span className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
Polijecare
|
||||
</span>
|
||||
</Link>
|
||||
|
|
@ -151,12 +146,12 @@ const Navbar = () => {
|
|||
</button>
|
||||
</>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
<button
|
||||
onClick={() => setIsLoginModalOpen(true)}
|
||||
className="px-6 py-2.5 bg-primary text-white rounded-xl hover:bg-primary-dark transition-all duration-300 hover:shadow-soft font-medium"
|
||||
>
|
||||
Masuk
|
||||
</Link>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Theme Toggle */}
|
||||
|
|
@ -259,13 +254,15 @@ const Navbar = () => {
|
|||
</button>
|
||||
</>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block w-full px-4 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-all duration-300 font-medium text-center"
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsLoginModalOpen(true);
|
||||
setIsMobileMenuOpen(false);
|
||||
}}
|
||||
className="w-full px-4 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-all duration-300 font-medium"
|
||||
>
|
||||
Masuk
|
||||
</Link>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -273,6 +270,12 @@ const Navbar = () => {
|
|||
)}
|
||||
</AnimatePresence>
|
||||
</motion.nav>
|
||||
|
||||
{/* Login Modal */}
|
||||
<LoginModal
|
||||
isOpen={isLoginModalOpen}
|
||||
onClose={() => setIsLoginModalOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
import React from 'react';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
|
||||
const ProtectedRoute = ({ children, requiredRole }) => {
|
||||
const { user, isAuthenticated, isLoading } = useAuth();
|
||||
|
||||
// Show loading while checking auth
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Redirect to login if not authenticated
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
// Check role if specified
|
||||
if (requiredRole && user?.role !== requiredRole) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl text-red-500 mb-4">🚫</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-2">Akses Ditolak</h1>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Anda tidak memiliki izin untuk mengakses halaman ini.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => window.history.back()}
|
||||
className="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
|
||||
>
|
||||
Kembali
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Render children if authenticated and authorized
|
||||
return children;
|
||||
};
|
||||
|
||||
export default ProtectedRoute;
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
import React, { createContext, useContext, useReducer, useEffect } from 'react';
|
||||
import axios from '../utils/axiosConfig';
|
||||
|
||||
// Initial state
|
||||
const initialState = {
|
||||
user: null,
|
||||
token: localStorage.getItem('token'),
|
||||
isAuthenticated: false,
|
||||
isLoading: false, // Changed to false initially
|
||||
error: null,
|
||||
};
|
||||
|
||||
// Action types
|
||||
const AUTH_ACTIONS = {
|
||||
LOGIN_START: 'LOGIN_START',
|
||||
LOGIN_SUCCESS: 'LOGIN_SUCCESS',
|
||||
LOGIN_FAILURE: 'LOGIN_FAILURE',
|
||||
LOGOUT: 'LOGOUT',
|
||||
LOAD_USER_START: 'LOAD_USER_START',
|
||||
LOAD_USER_SUCCESS: 'LOAD_USER_SUCCESS',
|
||||
LOAD_USER_FAILURE: 'LOAD_USER_FAILURE',
|
||||
CLEAR_ERROR: 'CLEAR_ERROR',
|
||||
};
|
||||
|
||||
// Reducer
|
||||
const authReducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case AUTH_ACTIONS.LOGIN_START:
|
||||
return {
|
||||
...state,
|
||||
isLoading: true,
|
||||
error: null,
|
||||
};
|
||||
|
||||
case AUTH_ACTIONS.LOGIN_SUCCESS:
|
||||
return {
|
||||
...state,
|
||||
isLoading: false,
|
||||
isAuthenticated: true,
|
||||
user: action.payload.user,
|
||||
token: action.payload.token,
|
||||
error: null,
|
||||
};
|
||||
|
||||
case AUTH_ACTIONS.LOGIN_FAILURE:
|
||||
return {
|
||||
...state,
|
||||
isLoading: false,
|
||||
isAuthenticated: false,
|
||||
user: null,
|
||||
token: null,
|
||||
error: action.payload,
|
||||
};
|
||||
|
||||
case AUTH_ACTIONS.LOGOUT:
|
||||
return {
|
||||
...state,
|
||||
isAuthenticated: false,
|
||||
user: null,
|
||||
token: null,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
case AUTH_ACTIONS.LOAD_USER_START:
|
||||
return {
|
||||
...state,
|
||||
isLoading: true,
|
||||
};
|
||||
|
||||
case AUTH_ACTIONS.LOAD_USER_SUCCESS:
|
||||
return {
|
||||
...state,
|
||||
user: action.payload,
|
||||
isAuthenticated: true,
|
||||
isLoading: false,
|
||||
};
|
||||
|
||||
case AUTH_ACTIONS.LOAD_USER_FAILURE:
|
||||
return {
|
||||
...state,
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
token: null,
|
||||
isLoading: false,
|
||||
};
|
||||
|
||||
case AUTH_ACTIONS.CLEAR_ERROR:
|
||||
return {
|
||||
...state,
|
||||
error: null,
|
||||
};
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
// Create context
|
||||
const AuthContext = createContext();
|
||||
|
||||
// Provider component
|
||||
export const AuthProvider = ({ children }) => {
|
||||
const [state, dispatch] = useReducer(authReducer, initialState);
|
||||
|
||||
// Set axios default header
|
||||
useEffect(() => {
|
||||
if (state.token) {
|
||||
axios.defaults.headers.common['Authorization'] = `Bearer ${state.token}`;
|
||||
} else {
|
||||
delete axios.defaults.headers.common['Authorization'];
|
||||
}
|
||||
}, [state.token]);
|
||||
|
||||
// Load user on mount
|
||||
useEffect(() => {
|
||||
const loadUser = async () => {
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
if (token) {
|
||||
// Set token immediately to prevent white screen
|
||||
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||
dispatch({ type: AUTH_ACTIONS.LOAD_USER_START });
|
||||
|
||||
try {
|
||||
const response = await axios.get('/api/user');
|
||||
if (response.data.success) {
|
||||
dispatch({
|
||||
type: AUTH_ACTIONS.LOAD_USER_SUCCESS,
|
||||
payload: response.data.user,
|
||||
});
|
||||
} else {
|
||||
dispatch({ type: AUTH_ACTIONS.LOAD_USER_FAILURE });
|
||||
localStorage.removeItem('token');
|
||||
delete axios.defaults.headers.common['Authorization'];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Load user error:', error);
|
||||
dispatch({ type: AUTH_ACTIONS.LOAD_USER_FAILURE });
|
||||
localStorage.removeItem('token');
|
||||
delete axios.defaults.headers.common['Authorization'];
|
||||
}
|
||||
} else {
|
||||
// No token - set loading to false immediately
|
||||
dispatch({
|
||||
type: AUTH_ACTIONS.LOAD_USER_SUCCESS,
|
||||
payload: null,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
loadUser();
|
||||
}, []);
|
||||
|
||||
// Login function
|
||||
const login = async (credentials) => {
|
||||
try {
|
||||
dispatch({ type: AUTH_ACTIONS.LOGIN_START });
|
||||
|
||||
console.log('🔍 Attempting login to:', '/api/login');
|
||||
console.log('🔍 Credentials:', { email: credentials.email, password: '***' });
|
||||
|
||||
const response = await axios.post('/api/login', credentials);
|
||||
|
||||
console.log('🔍 Auth response:', response.data);
|
||||
console.log('🔍 Response status:', response.status);
|
||||
|
||||
if (response.data && response.data.success) {
|
||||
const { token, user } = response.data;
|
||||
|
||||
// Store token
|
||||
localStorage.setItem('token', token);
|
||||
|
||||
// Set axios header
|
||||
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||
|
||||
dispatch({
|
||||
type: AUTH_ACTIONS.LOGIN_SUCCESS,
|
||||
payload: { token, user },
|
||||
});
|
||||
|
||||
return { success: true, data: response.data };
|
||||
} else {
|
||||
const message = response.data?.message || 'Login gagal';
|
||||
console.error('❌ Login failed:', message);
|
||||
return { success: false, message };
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Auth error:', error);
|
||||
console.error('❌ Error config:', error.config);
|
||||
console.error('❌ Error response:', error.response);
|
||||
console.error('❌ Error status:', error.response?.status);
|
||||
console.error('❌ Error data:', error.response?.data);
|
||||
|
||||
// Handle different error types
|
||||
let errorMessage = 'Login gagal. Silakan coba lagi.';
|
||||
|
||||
if (error.code === 'ECONNREFUSED' || error.code === 'ERR_NETWORK') {
|
||||
errorMessage = 'Tidak dapat terhubung ke server. Pastikan backend berjalan.';
|
||||
} else if (error.response?.status === 401) {
|
||||
errorMessage = error.response.data?.message || 'Email atau password salah.';
|
||||
} else if (error.response?.status === 422) {
|
||||
errorMessage = 'Validasi gagal. Periksa kembali input Anda.';
|
||||
} else if (error.response?.data?.message) {
|
||||
errorMessage = error.response.data.message;
|
||||
} else if (error.message) {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: AUTH_ACTIONS.LOGIN_FAILURE,
|
||||
payload: errorMessage,
|
||||
});
|
||||
|
||||
return { success: false, error: errorMessage };
|
||||
}
|
||||
};
|
||||
|
||||
// Logout function
|
||||
const logout = async () => {
|
||||
try {
|
||||
if (state.token) {
|
||||
await axios.post('/api/logout');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Logout error:', error);
|
||||
} finally {
|
||||
localStorage.removeItem('token');
|
||||
delete axios.defaults.headers.common['Authorization'];
|
||||
dispatch({ type: AUTH_ACTIONS.LOGOUT });
|
||||
}
|
||||
};
|
||||
|
||||
// Clear error
|
||||
const clearError = () => {
|
||||
dispatch({ type: AUTH_ACTIONS.CLEAR_ERROR });
|
||||
};
|
||||
|
||||
const value = {
|
||||
...state,
|
||||
login,
|
||||
logout,
|
||||
clearError,
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={value}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
// Custom hook to use auth context
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error('useAuth must be used within an AuthProvider');
|
||||
}
|
||||
|
||||
return context;
|
||||
};
|
||||
|
||||
export default AuthContext;
|
||||
|
|
@ -278,10 +278,31 @@ body {
|
|||
.hover\:bg-green-600:hover,
|
||||
.hover\:bg-green-700:hover,
|
||||
.hover\:bg-green-800:hover,
|
||||
.hover\:bg-green-900:hover {
|
||||
.hover\:bg-green-900:hover,
|
||||
.from-green-50,
|
||||
.from-green-100,
|
||||
.from-green-200,
|
||||
.from-green-300,
|
||||
.from-green-400,
|
||||
.from-green-500,
|
||||
.from-green-600,
|
||||
.from-green-700,
|
||||
.from-green-800,
|
||||
.from-green-900,
|
||||
.to-green-50,
|
||||
.to-green-100,
|
||||
.to-green-200,
|
||||
.to-green-300,
|
||||
.to-green-400,
|
||||
.to-green-500,
|
||||
.to-green-600,
|
||||
.to-green-700,
|
||||
.to-green-800,
|
||||
.to-green-900 {
|
||||
background-color: transparent !important;
|
||||
color: inherit !important;
|
||||
border-color: transparent !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
/* Force remove green from any element */
|
||||
|
|
@ -289,6 +310,7 @@ body {
|
|||
background-color: transparent !important;
|
||||
color: inherit !important;
|
||||
border-color: transparent !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
/* Additional Variables */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FiUsers, FiCalendar, FiFileText, FiCheckCircle } from 'react-icons/fi';
|
||||
|
||||
const KonselorDashboard = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<div className="bg-white shadow-sm border-b border-gray-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<h1 className="text-xl font-bold text-gray-900">Dashboard Konselor</h1>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-sm text-gray-600">Konselor</span>
|
||||
<div className="w-8 h-8 bg-accent rounded-full flex items-center justify-center">
|
||||
<FiUsers className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Welcome Section */}
|
||||
<motion.div
|
||||
className="bg-gradient-to-r from-accent to-primary rounded-2xl p-8 mb-8 text-white"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold mb-2">Dashboard Konseling</h2>
|
||||
<p className="opacity-90">
|
||||
Kelola dan monitoring layanan konseling untuk sivitas akademika
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiFileText className="w-8 h-8 text-primary" />
|
||||
<span className="text-2xl font-bold text-gray-900">45</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Total Laporan</h3>
|
||||
<p className="text-sm text-gray-600">Semua laporan masuk</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.1 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiCalendar className="w-8 h-8 text-accent" />
|
||||
<span className="text-2xl font-bold text-gray-900">8</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Jadwal Hari Ini</h3>
|
||||
<p className="text-sm text-gray-600">Sesi konseling</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiCheckCircle className="w-8 h-8 text-green-500" />
|
||||
<span className="text-2xl font-bold text-gray-900">32</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Selesai</h3>
|
||||
<p className="text-sm text-gray-600">Laporan selesai</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiUsers className="w-8 h-8 text-purple-500" />
|
||||
<span className="text-2xl font-bold text-gray-900">13</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Sedang Diproses</h3>
|
||||
<p className="text-sm text-gray-600">Laporan aktif</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Recent Reports */}
|
||||
<motion.div
|
||||
className="bg-white rounded-xl shadow-sm p-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Laporan Membutuhkan Perhatian</h3>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((item) => (
|
||||
<div key={item} className="flex items-center justify-between p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Kasus #{item}</h4>
|
||||
<p className="text-sm text-gray-600">Prioritas Tinggi • 1 jam lalu</p>
|
||||
</div>
|
||||
<button className="px-4 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors">
|
||||
Lihat Detail
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default KonselorDashboard;
|
||||
|
|
@ -6,32 +6,28 @@ import Services from '../components/Services';
|
|||
import Articles from '../components/Articles';
|
||||
import Contact from '../components/Contact';
|
||||
import Footer from '../components/Footer';
|
||||
import { heroService } from '../services/heroService';
|
||||
import LoginModal from '../components/LoginModal';
|
||||
|
||||
const LandingPage = () => {
|
||||
const [heroData, setHeroData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchHeroData();
|
||||
// Temporary disable API calls to prevent 404 errors
|
||||
const mockHeroData = {
|
||||
title: 'Aman Bicara, Aman Melapor',
|
||||
subtitle: 'Satgas PPKPT Politeknik Negeri Jember',
|
||||
description: 'Kami siap mendengar dan membantu Anda dengan profesionalisme dan kerahasiaan terjamin. Setiap laporan akan ditangani dengan empati dan seksama.'
|
||||
};
|
||||
|
||||
setHeroData(mockHeroData);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const fetchHeroData = async () => {
|
||||
try {
|
||||
const response = await heroService.get();
|
||||
if (response.success) {
|
||||
setHeroData(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching hero data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar />
|
||||
<LoginModal />
|
||||
<Hero heroData={heroData} />
|
||||
<About />
|
||||
<Services />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FiSettings, FiUsers, FiFileText, FiEdit, FiDatabase } from 'react-icons/fi';
|
||||
|
||||
const OperatorDashboard = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<div className="bg-white shadow-sm border-b border-gray-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<h1 className="text-xl font-bold text-gray-900">Dashboard Operator</h1>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-sm text-gray-600">Operator</span>
|
||||
<div className="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
|
||||
<FiSettings className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Welcome Section */}
|
||||
<motion.div
|
||||
className="bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl p-8 mb-8 text-white"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold mb-2">Sistem Administrasi</h2>
|
||||
<p className="opacity-90">
|
||||
Kelola seluruh sistem PolijeCare dan monitoring aktivitas
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Admin Functions */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiUsers className="w-8 h-8 text-blue-500" />
|
||||
<span className="text-2xl font-bold text-gray-900">156</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Manajemen Pengguna</h3>
|
||||
<p className="text-sm text-gray-600">Kelola akun pengguna</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiFileText className="w-8 h-8 text-green-500" />
|
||||
<span className="text-2xl font-bold text-gray-900">89</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Manajemen Pengaduan</h3>
|
||||
<p className="text-sm text-gray-600">Kelola semua pengaduan</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiEdit className="w-8 h-8 text-purple-500" />
|
||||
<span className="text-2xl font-bold text-gray-900">24</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Manajemen Artikel</h3>
|
||||
<p className="text-sm text-gray-600">Kelola konten artikel</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiDatabase className="w-8 h-8 text-orange-500" />
|
||||
<span className="text-2xl font-bold text-gray-900">12</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Manajemen Kategori</h3>
|
||||
<p className="text-sm text-gray-600">Kelola kategori laporan</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiSettings className="w-8 h-8 text-red-500" />
|
||||
<span className="text-sm font-medium text-gray-900">Pengaturan</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Setting Admin</h3>
|
||||
<p className="text-sm text-gray-600">Konfigurasi sistem</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiFileText className="w-8 h-8 text-indigo-500" />
|
||||
<span className="text-2xl font-bold text-gray-900">5</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Audit Trail</h3>
|
||||
<p className="text-sm text-gray-600">Log aktivitas sistem</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* System Status */}
|
||||
<motion.div
|
||||
className="bg-white rounded-xl shadow-sm p-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Status Sistem</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<h4 className="font-medium text-green-800 mb-2">Database</h4>
|
||||
<p className="text-sm text-green-600">Normal • 99.9% Uptime</p>
|
||||
</div>
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<h4 className="font-medium text-blue-800 mb-2">API Server</h4>
|
||||
<p className="text-sm text-blue-600">Normal • Response: 45ms</p>
|
||||
</div>
|
||||
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||||
<h4 className="font-medium text-yellow-800 mb-2">Storage</h4>
|
||||
<p className="text-sm text-yellow-600">Warning • 85% Used</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OperatorDashboard;
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FiFileText, FiClock, FiUser, FiPlus } from 'react-icons/fi';
|
||||
|
||||
const UserDashboard = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<div className="bg-white shadow-sm border-b border-gray-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<h1 className="text-xl font-bold text-gray-900">Dashboard Mahasiswa</h1>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-sm text-gray-600">Mahasiswa</span>
|
||||
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
|
||||
<FiUser className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Welcome Section */}
|
||||
<motion.div
|
||||
className="bg-gradient-to-r from-primary to-accent rounded-2xl p-8 mb-8 text-white"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold mb-2">Selamat Datang di PolijeCare</h2>
|
||||
<p className="opacity-90">
|
||||
Portal layanan perlindungan dan kesejahteraan sivitas akademika Politeknik Negeri Jember
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiPlus className="w-8 h-8 text-primary" />
|
||||
<span className="text-2xl font-bold text-gray-900">+</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Buat Laporan</h3>
|
||||
<p className="text-sm text-gray-600">Ajukan pengaduan atau konseling</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiFileText className="w-8 h-8 text-accent" />
|
||||
<span className="text-2xl font-bold text-gray-900">12</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Riwayat Laporan</h3>
|
||||
<p className="text-sm text-gray-600">Lihat semua laporan Anda</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiClock className="w-8 h-8 text-green-500" />
|
||||
<span className="text-2xl font-bold text-gray-900">3</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Sedang Diproses</h3>
|
||||
<p className="text-sm text-gray-600">Laporan dalam proses</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<FiUser className="w-8 h-8 text-purple-500" />
|
||||
<span className="text-sm font-medium text-primary">Profil</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Pengaturan</h3>
|
||||
<p className="text-sm text-gray-600">Kelola akun Anda</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Recent Reports */}
|
||||
<motion.div
|
||||
className="bg-white rounded-xl shadow-sm p-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Laporan Terbaru</h3>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((item) => (
|
||||
<div key={item} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Laporan #{item}</h4>
|
||||
<p className="text-sm text-gray-600">Dibuat 2 hari yang lalu</p>
|
||||
</div>
|
||||
<span className="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">
|
||||
Sedang Diproses
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserDashboard;
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import axios from 'axios';
|
||||
|
||||
// Create axios instance
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8000', // Backend URL
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// Request interceptor to add auth token
|
||||
api.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Response interceptor for error handling
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
return response;
|
||||
},
|
||||
(error) => {
|
||||
// Handle 401 Unauthorized - only redirect if not already on home page
|
||||
if (error.response?.status === 401 && window.location.pathname !== '/') {
|
||||
localStorage.removeItem('token');
|
||||
delete api.defaults.headers.common['Authorization'];
|
||||
// Use navigate instead of direct location change to avoid infinite loop
|
||||
console.log('🔐 Token expired, redirecting to home...');
|
||||
}
|
||||
|
||||
// Handle 403 Forbidden
|
||||
if (error.response?.status === 403) {
|
||||
console.error('Access forbidden - insufficient permissions');
|
||||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
Loading…
Reference in New Issue