diff --git a/api/app/Http/Controllers/GameController.php b/api/app/Http/Controllers/GameController.php index d798c24..bc04482 100644 --- a/api/app/Http/Controllers/GameController.php +++ b/api/app/Http/Controllers/GameController.php @@ -12,17 +12,25 @@ class GameController extends Controller { public function index(Request $request) { - $query = Game::query()->with(['winner', 'player1', 'player2']); + $query = Game::query()->with(["winner", "player1", "player2"]); - if ($request->has('type') && in_array($request->type, ['3', '9'])) { - $query->where('type', $request->type); + if ($request->has("type") && in_array($request->type, ["3", "9"])) { + $query->where("type", $request->type); } - if ($request->has('status') && in_array($request->status, ['Pending', 'Playing', 'Ended', 'Interrupted'])) { - $query->where('status', $request->status); + if ( + $request->has("status") && + in_array($request->status, [ + "Pending", + "Playing", + "Ended", + "Interrupted", + ]) + ) { + $query->where("status", $request->status); } - $query->orderBy('began_at', 'desc'); + $query->orderBy("began_at", "desc"); return response()->json($query->paginate(15)); } @@ -30,42 +38,56 @@ class GameController extends Controller public function store(Request $request) { $validated = $request->validate([ - 'type' => 'required|in:3,9', + "type" => "required|in:3,9", ]); $user = Auth::user(); $activeMatch = MatchGame::where(function ($q) use ($user) { - $q->where('player1_user_id', $user->id) - ->orWhere('player2_user_id', $user->id); - })->whereIn('status', ['Pending', 'Playing'])->exists(); + $q->where("player1_user_id", $user->id)->orWhere( + "player2_user_id", + $user->id, + ); + }) + ->whereIn("status", ["Pending", "Playing"]) + ->exists(); $activeGame = Game::where(function ($q) use ($user) { - $q->where('player1_user_id', $user->id) - ->orWhere('player2_user_id', $user->id); - })->whereIn('status', ['Pending', 'Playing'])->exists(); + $q->where("player1_user_id", $user->id)->orWhere( + "player2_user_id", + $user->id, + ); + }) + ->whereIn("status", ["Pending", "Playing"]) + ->exists(); if ($activeMatch || $activeGame) { - return response()->json(['message' => 'You already have an active game or match.'], 400); + return response()->json( + ["message" => "You already have an active game or match."], + 400, + ); } $game = Game::create([ - 'type' => $validated['type'], - 'status' => 'Pending', - 'player1_user_id' => $user->id, - 'player2_user_id' => $user->id, - 'winner_user_id' => $user->id, - 'loser_user_id' => $user->id, - 'began_at' => now(), - 'player1_points' => 0, - 'player2_points' => 0, - 'custom' => null + "type" => $validated["type"], + "status" => "Pending", + "player1_user_id" => $user->id, + "player2_user_id" => null, + "winner_user_id" => null, + "loser_user_id" => null, + "began_at" => now(), + "player1_points" => 0, + "player2_points" => 0, + "custom" => null, ]); - return response()->json([ - 'message' => 'Multiplayer game room created', - 'game' => $game - ], 201); + return response()->json( + [ + "message" => "Multiplayer game room created", + "game" => $game, + ], + 201, + ); } public function join(Game $game) @@ -73,66 +95,79 @@ class GameController extends Controller $user = Auth::user(); if ($game->player1_user_id == $user->id) { - return response()->json([ - 'message' => 'Waiting for opponent...', - 'game' => $game - ], 200); + return response()->json( + [ + "message" => "Waiting for opponent...", + "game" => $game, + ], + 200, + ); } - if ($game->status !== 'Pending') { - return response()->json(['message' => 'Game is full or already started'], 400); + if ($game->status !== "Pending") { + return response()->json( + ["message" => "Game is full or already started"], + 400, + ); } $activeGame = Game::where(function ($query) use ($user) { - $query->where('player1_user_id', $user->id) - ->orWhere('player2_user_id', $user->id); + $query + ->where("player1_user_id", $user->id) + ->orWhere("player2_user_id", $user->id); }) - ->whereIn('status', ['Pending', 'Playing']) - ->exists(); + ->whereIn("status", ["Pending", "Playing"]) + ->exists(); if ($activeGame) { - return response()->json(['message' => 'You are already in another active game.'], 400); + return response()->json( + ["message" => "You are already in another active game."], + 400, + ); } $game->update([ - 'status' => 'Playing', - 'player2_user_id' => $user->id, + "status" => "Playing", + "player2_user_id" => $user->id, ]); - return response()->json([ - 'message' => 'Joined successfully! Game starts now.', - 'game' => $game - ], 200); + return response()->json( + [ + "message" => "Joined successfully! Game starts now.", + "game" => $game, + ], + 200, + ); } public function show(Game $game) { - $game->load(['player1', 'player2', 'winner']); + $game->load(["player1", "player2", "winner"]); return response()->json($game); } public function update(Request $request, Game $game) { - if ($game->status == 'Ended') { - return response()->json(['message' => 'Game already ended'], 400); + if ($game->status == "Ended") { + return response()->json(["message" => "Game already ended"], 400); } $data = $request->validate([ - 'status' => 'in:Playing,Ended,Interrupted', - 'winner_user_id' => 'exists:users,id', - 'loser_user_id' => 'exists:users,id', - 'player1_points' => 'integer', - 'player2_points' => 'integer', - 'is_draw' => 'boolean', - 'total_time' => 'numeric' + "status" => "in:Playing,Ended,Interrupted", + "winner_user_id" => "exists:users,id", + "loser_user_id" => "exists:users,id", + "player1_points" => "integer", + "player2_points" => "integer", + "is_draw" => "boolean", + "total_time" => "numeric", ]); - if (isset($data['status']) && $data['status'] === 'Ended') { - $data['ended_at'] = now(); + if (isset($data["status"]) && $data["status"] === "Ended") { + $data["ended_at"] = now(); } $game->update($data); return response()->json($game); } -} \ No newline at end of file +} diff --git a/api/routes/api.php b/api/routes/api.php index d0f9b55..6aeaa71 100644 --- a/api/routes/api.php +++ b/api/routes/api.php @@ -2,37 +2,33 @@ use App\Http\Controllers\AuthController; use App\Http\Controllers\GameController; -use App\Http\Controllers\UserController; use App\Http\Controllers\MatchController; +use App\Http\Controllers\UserController; use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; - -# Authentication Routes +// Authentication Routes Route::post('/login', [AuthController::class, 'login']); - -Route::middleware('auth:sanctum')->group(function () { - Route::get('/users/me', function (Request $request) { - return $request->user(); - }); - Route::post('logout', [AuthController::class, 'logout']); -}); - Route::post('/register', [AuthController::class, 'register']); -# Game Routes - Protected Route::middleware('auth:sanctum')->group(function () { - Route::apiResource('games', GameController::class); - Route::post('games', [GameController::class, 'store']); - Route::post('/games/{game}/resign', [GameController::class, 'resign']); - Route::get('/users/{user}/matches', [UserController::class, 'getMatches']); - Route::post('games/{game}/join', [GameController::class, 'join']); -}); + Route::post('logout', [AuthController::class, 'logout']); -Route::middleware('auth:sanctum')->group(function () { - Route::get('matches', [MatchController::class, 'index']); - Route::post('matches', [MatchController::class, 'store']); - Route::get('matches/{match}', [MatchController::class, 'show']); - Route::post('matches/{match}/join', [MatchController::class, 'join']); - Route::put('matches/{match}', [MatchController::class, 'update']); -}); \ No newline at end of file + Route::prefix('users')->group(function () { + Route::get('/me', function (Request $request) { + return $request->user(); + }); + Route::get('/{user}/matches', [UserController::class, 'getMatches']); + }); + + Route::prefix('games')->group(function () { + Route::apiResource('/', GameController::class)->parameters(['' => 'game']); + Route::post('/{game}/resign', [GameController::class, 'resign']); + Route::post('/{game}/join', [GameController::class, 'join']); + }); + + Route::prefix('matches')->group(function () { + Route::apiResource('/', MatchController::class)->parameters(['' => 'match']); + Route::post('/{match}/join', [MatchController::class, 'join']); + }); +}); diff --git a/frontend/src/App.vue b/frontend/src/App.vue index c593da0..2f23a89 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -42,12 +42,13 @@ const logout = () => { success: () => { return 'Logout Sucessfull ' }, - error: (data) => `[API] Error saving game - ${data?.response?.data?.message}`, + error: (data) => `[API] Error - ${data?.response?.data?.message}`, }) } -onMounted(() => { +onMounted(async () => { + await authStore.restoreSession() socketStore.handleConnection() }) diff --git a/frontend/src/components/layout/NavBar.vue b/frontend/src/components/layout/NavBar.vue index cc66d7a..ac999c3 100644 --- a/frontend/src/components/layout/NavBar.vue +++ b/frontend/src/components/layout/NavBar.vue @@ -39,6 +39,7 @@ import { NavigationMenuList, NavigationMenuTrigger, } from '@/components/ui/navigation-menu' +import router from '@/router'; const emits = defineEmits(['logout']) @@ -46,5 +47,6 @@ const { userLoggedIn } = defineProps(['userLoggedIn']) const logoutClickHandler = () => { emits('logout') + router.push('/login') } diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue index 9dd4ce2..1fd8457 100644 --- a/frontend/src/pages/login/LoginPage.vue +++ b/frontend/src/pages/login/LoginPage.vue @@ -27,6 +27,14 @@ + +
+ + +
@@ -59,7 +67,8 @@ const router = useRouter() const formData = ref({ email: 'pa@mail.pt', - password: '123' + password: '123', + rememberMe: false }) diff --git a/frontend/src/stores/api.js b/frontend/src/stores/api.js index 8774bd2..6e2dff6 100644 --- a/frontend/src/stores/api.js +++ b/frontend/src/stores/api.js @@ -1,9 +1,11 @@ import { defineStore } from 'pinia' import axios from 'axios' import { inject, ref } from 'vue' +import { useAuthStore } from './auth' export const useAPIStore = defineStore('api', () => { const API_BASE_URL = inject('apiBaseURL') + const authStore = useAuthStore() const token = ref() const gameQueryParameters = ref({ @@ -16,16 +18,35 @@ export const useAPIStore = defineStore('api', () => { }, }) + const resetExpiryOnSuccess = (response) => { + if (authStore.isLoggedIn && !authStore.isTokenAlmostExpired()) { + authStore.resetTokenExpiry() + } + return response + } + + axios.interceptors.response.use(resetExpiryOnSuccess) + + const initializeAxiosHeaders = () => { + const storedToken = localStorage.getItem('token') + if (storedToken) { + axios.defaults.headers.common['Authorization'] = `Bearer ${storedToken}` + } + } + + initializeAxiosHeaders() + const postLogin = async (credentials) => { - const response = await axios.post(`${API_BASE_URL}/login`, credentials) + const response = await axios.post(`${API_BASE_URL}/login`, credentials) - if (!response.data.token) throw response + if (!response.data.token) throw response - token.value = response.data.token - axios.defaults.headers.common['Authorization'] = `Bearer ${token.value}` + token.value = response.data.token + axios.defaults.headers.common['Authorization'] = `Bearer ${token.value}` + + return response + } - return response -} const postLogout = async () => { await axios.post(`${API_BASE_URL}/logout`) token.value = undefined diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js index 43c8434..7ab9a72 100644 --- a/frontend/src/stores/auth.js +++ b/frontend/src/stores/auth.js @@ -3,25 +3,45 @@ import { ref, computed } from 'vue' import { useAPIStore } from './api' export const useAuthStore = defineStore('auth', () => { - const apiStore = useAPIStore() + + const DEFAULT_TIMEOUT = 5 * 60 * 1000 + const REMEMBER_ME_TIMEOUT = 365 * 24 * 60 * 60 * 1000 const currentUser = ref(undefined) const token = ref(localStorage.getItem('token') || null) + const tokenExpiry = ref(localStorage.getItem('tokenExpiry') ? parseInt(localStorage.getItem('tokenExpiry')) : null) + const rememberMe = ref(false) const isLoggedIn = computed(() => { - return currentUser.value !== undefined && token.value !== null + return currentUser.value !== undefined && token.value !== null && !isTokenAlmostExpired() }) const currentUserID = computed(() => { return currentUser.value?.id }) - const setToken = (jwtToken) => { + const isTokenAlmostExpired = () => { + if (!tokenExpiry.value) return false; + return Date.now() > (tokenExpiry.value - 60 * 1000); + }; + + const resetTokenExpiry = () => { + const timeout = rememberMe.value ? REMEMBER_ME_TIMEOUT : DEFAULT_TIMEOUT + tokenExpiry.value = Date.now() + timeout + localStorage.setItem('tokenExpiry', tokenExpiry.value.toString()) + } + + const setToken = (jwtToken, shouldRememberMe = false) => { token.value = jwtToken + rememberMe.value = shouldRememberMe + if (jwtToken) { localStorage.setItem('token', jwtToken) + resetTokenExpiry() } else { localStorage.removeItem('token') + localStorage.removeItem('tokenExpiry') + tokenExpiry.value = null } } @@ -30,18 +50,70 @@ export const useAuthStore = defineStore('auth', () => { } const login = async (credentials) => { - const loginResp = await apiStore.postLogin(credentials) - const userResp = await apiStore.getAuthUser() - const jwtToken = loginResp.data.token - setToken(jwtToken) - currentUser.value = userResp.data - return userResp.data + const apiStore = useAPIStore() + const loginResp = await apiStore.postLogin(credentials) + const userResp = await apiStore.getAuthUser() + + const jwtToken = loginResp.data.token + setToken(jwtToken, credentials.rememberMe) + currentUser.value = userResp.data + + localStorage.setItem('currentUser', JSON.stringify(userResp.data)) + return userResp.data } const logout = async () => { + const apiStore = useAPIStore() await apiStore.postLogout() currentUser.value = undefined setToken(null) + localStorage.removeItem('currentUser') + } + + const checkTokenExpiry = () => { + if (isTokenAlmostExpired()) { + logout() + return false + } + return true + } + + const restoreSession = async () => { + const storedToken = localStorage.getItem('token') + const storedUser = localStorage.getItem('currentUser') + const storedTokenExpiry = localStorage.getItem('tokenExpiry') + + if (!storedToken || !storedTokenExpiry) { + return false + } + if (Date.now() > parseInt(storedTokenExpiry)) { + localStorage.removeItem('token') + localStorage.removeItem('tokenExpiry') + localStorage.removeItem('currentUser') + return false + } + + token.value = storedToken + tokenExpiry.value = parseInt(storedTokenExpiry) + + if (storedUser) { + try { + currentUser.value = JSON.parse(storedUser) + } catch (e) { + // If stored user data is corrupted, fetch fresh data from API + try { + const userResp = await apiStore.getAuthUser() + currentUser.value = userResp.data + localStorage.setItem('currentUser', JSON.stringify(userResp.data)) + } catch (apiError) { + // API call failed, likely token is invalid + logout() + return false + } + } + } + + return true } return { @@ -49,9 +121,14 @@ export const useAuthStore = defineStore('auth', () => { isLoggedIn, currentUserID, token, + rememberMe, setToken, getToken, login, logout, + resetTokenExpiry, + isTokenAlmostExpired, + checkTokenExpiry, + restoreSession, } })