Index: backend/requirements.txt =================================================================== --- backend/requirements.txt (revision 74a3ebcd0dae1a0baa744b0bb598de6a6da46fda) +++ backend/requirements.txt (revision 2df0abec99f7defe9005e18d19f6afddde172463) @@ -13,4 +13,4 @@ psycopg2-binary>=2.9.10 dj-rest-auth>=7.0.1 -django-allauth>=65.9.0 +django-allauth==65.3.0 cryptography>=45.0.4 Index: frontend/src/components/Navbar.tsx =================================================================== --- frontend/src/components/Navbar.tsx (revision 74a3ebcd0dae1a0baa744b0bb598de6a6da46fda) +++ frontend/src/components/Navbar.tsx (revision 2df0abec99f7defe9005e18d19f6afddde172463) @@ -1,4 +1,2 @@ -import { useGoogleLogin } from "@react-oauth/google"; -import axios from "axios"; import { useEffect, useRef, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; @@ -13,5 +11,4 @@ const [profileMenuOpen, setProfileMenuOpen] = useState(false); const [, setRecommendations] = useRecommendations(); - const { login } = useAuth(); const { isAuthenticated, logout, user } = useAuth(); const { setFavoriteIds, setLikedIds, setDislikedIds } = usePreferences(); @@ -44,30 +41,4 @@ toast.success("Успешно сте одјавени!"); }; - - const googleLogin = useGoogleLogin({ - onSuccess: async (tokenResponse) => { - const accessToken = tokenResponse.access_token; - try { - const response = await axios.post<{ - access: string; - refresh: string; - full_name: string; - user_type: string; - }>("http://localhost:8000/auth/google/login/", { - access_token: accessToken, - }); - const { access, refresh, full_name, user_type } = response.data; - login(access, refresh, { full_name, user_type }); - navigate("/"); - toast.success("Успешно сте најавени!"); - } catch (err: any) { - console.error("Login failed:", err.response?.data || err.message); - } - }, - onError: () => { - console.error("Login Failed"); - }, - flow: "implicit", - }); // const testAccountLogin = async () => { @@ -186,7 +157,4 @@ )} -
- -
Index: frontend/src/components/PasswordInput.tsx =================================================================== --- frontend/src/components/PasswordInput.tsx (revision 74a3ebcd0dae1a0baa744b0bb598de6a6da46fda) +++ frontend/src/components/PasswordInput.tsx (revision 2df0abec99f7defe9005e18d19f6afddde172463) @@ -1,52 +1,52 @@ import { useState } from "react"; +import eyeOffIcon from "../assets/eye-off.svg"; import eyeIcon from "../assets/eye.svg"; -import eyeOffIcon from "../assets/eye-off.svg"; interface PasswordInputProps { - name: string; - value: string; - placeholder: string; - onChange: (e: React.ChangeEvent) => void; - error?: string; + name: string; + value: string; + placeholder: string; + onChange: (e: React.ChangeEvent) => void; + error?: string; } const PasswordInput: React.FC = ({ - name, - value, - placeholder, - onChange, - error, + name, + value, + placeholder, + onChange, + error, }) => { - const [showPassword, setShowPassword] = useState(false); + const [showPassword, setShowPassword] = useState(false); - const togglePasswordVisibility = () => { - setShowPassword(!showPassword); - }; + const togglePasswordVisibility = () => { + setShowPassword(!showPassword); + }; - return ( -
- - - {error &&

{error}

} -
- ); + return ( +
+ + + {error &&

{error}

} +
+ ); }; Index: frontend/src/context/AuthContext.tsx =================================================================== --- frontend/src/context/AuthContext.tsx (revision 74a3ebcd0dae1a0baa744b0bb598de6a6da46fda) +++ frontend/src/context/AuthContext.tsx (revision 2df0abec99f7defe9005e18d19f6afddde172463) @@ -1,2 +1,3 @@ +import { OverridableTokenClientConfig } from "@react-oauth/google"; import { createContext, Dispatch, SetStateAction } from "react"; import { StudentData } from "../components/types"; @@ -17,4 +18,8 @@ sessionInitialized: boolean; setUser: Dispatch>; + customGoogleLogin: ( + overrideConfig?: OverridableTokenClientConfig | undefined + ) => void; + googleLoginLoading: boolean; } Index: frontend/src/context/AuthProvider.tsx =================================================================== --- frontend/src/context/AuthProvider.tsx (revision 74a3ebcd0dae1a0baa744b0bb598de6a6da46fda) +++ frontend/src/context/AuthProvider.tsx (revision 2df0abec99f7defe9005e18d19f6afddde172463) @@ -1,3 +1,4 @@ -import { AxiosError, AxiosRequestConfig } from "axios"; +import { useGoogleLogin } from "@react-oauth/google"; +import axios, { AxiosError, AxiosRequestConfig } from "axios"; import { jwtDecode } from "jwt-decode"; import React, { @@ -52,4 +53,5 @@ const [loading, setLoading] = useState(true); const [sessionInitialized, setSessionInitialized] = useState(false); + const [googleLoginLoading, setGoogleLoginLoading] = useState(false); const proactiveRefreshTimeoutId = useRef(null); @@ -212,4 +214,36 @@ ); + const customGoogleLogin = useGoogleLogin({ + onSuccess: async (tokenResponse) => { + setGoogleLoginLoading(true); + const accessToken = tokenResponse.access_token; + try { + const response = await axios.post<{ + access: string; + refresh: string; + full_name: string; + user_type: string; + }>("http://localhost:8000/auth/google/login/", { + access_token: accessToken, + }); + const { access, refresh, full_name, user_type } = response.data; + await login(access, refresh, { full_name, user_type }); + toast.success("Успешно сте најавени!"); + window.dispatchEvent(new CustomEvent("googleLoginSuccess")); + } catch (err: any) { + console.error("Login failed:", err.response?.data || err.message); + toast.error("Грешка при најавување со Google"); + } finally { + setGoogleLoginLoading(false); + } + }, + onError: () => { + console.error("Login Failed"); + setGoogleLoginLoading(false); + toast.error("Грешка при најавување со Google"); + }, + flow: "implicit", + }); + useEffect(() => { (async () => { @@ -234,4 +268,6 @@ sessionInitialized, setUser, + customGoogleLogin, + googleLoginLoading, }; Index: frontend/src/pages/Login.tsx =================================================================== --- frontend/src/pages/Login.tsx (revision 74a3ebcd0dae1a0baa744b0bb598de6a6da46fda) +++ frontend/src/pages/Login.tsx (revision 2df0abec99f7defe9005e18d19f6afddde172463) @@ -1,6 +1,7 @@ import axios, { AxiosError } from "axios"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { toast } from "react-toastify"; +import googleLogo from "../assets/google-logo.png"; import PasswordInput from "../components/PasswordInput"; import { useAuth } from "../hooks/useAuth"; @@ -20,6 +21,21 @@ >({}); const navigate = useNavigate(); - const { login } = useAuth(); + const { login, customGoogleLogin, googleLoginLoading } = useAuth(); const [isLogging, setIsLogging] = useState(false); + + useEffect(() => { + const handleGoogleLoginSuccess = () => { + navigate("/"); + }; + + window.addEventListener("googleLoginSuccess", handleGoogleLoginSuccess); + + return () => { + window.removeEventListener( + "googleLoginSuccess", + handleGoogleLoginSuccess + ); + }; + }, [navigate]); const handleChange = (e: React.ChangeEvent) => { @@ -70,12 +86,16 @@ }; return ( -
+
-

Најава

+

+ Најава +

{errors.detail && ( -
{errors.detail[0]}.
+
+ {errors.detail[0]}. +
)} {errors.email && ( -

{errors.email[0]}

+

{errors.email[0]}

)} -

+

Немаш профил?{" "} @@ -111,4 +131,27 @@ {isLogging ? "Се најавува..." : "Најави се"} + +

+
+
+
+
+
+ или +
+
+
+ +
Index: frontend/src/pages/Register.tsx =================================================================== --- frontend/src/pages/Register.tsx (revision 74a3ebcd0dae1a0baa744b0bb598de6a6da46fda) +++ frontend/src/pages/Register.tsx (revision 2df0abec99f7defe9005e18d19f6afddde172463) @@ -1,6 +1,7 @@ import axios, { AxiosError } from "axios"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { toast } from "react-toastify"; +import googleLogo from "../assets/google-logo.png"; import PasswordInput from "../components/PasswordInput"; import { User } from "../context/AuthContext"; @@ -28,5 +29,5 @@ >({}); const navigate = useNavigate(); - const { login } = useAuth(); + const { login, customGoogleLogin, googleLoginLoading } = useAuth(); const handleChange = (e: React.ChangeEvent) => { @@ -36,4 +37,19 @@ }); }; + + useEffect(() => { + const handleGoogleLoginSuccess = () => { + navigate("/"); + }; + + window.addEventListener("googleLoginSuccess", handleGoogleLoginSuccess); + + return () => { + window.removeEventListener( + "googleLoginSuccess", + handleGoogleLoginSuccess + ); + }; + }, [navigate]); const handleRegister = async (e: React.FormEvent) => { @@ -82,12 +98,14 @@ }; return ( -
+
-

Регистрација

+

+ Регистрација +

{errors.non_field_errors && ( -
+
{errors.non_field_errors[0]}
@@ -100,8 +118,8 @@ onChange={handleChange} placeholder="Email" - className="w-full mb-3 p-2 border rounded" + className="w-full mb-2 sm:mb-3 p-2 border rounded" /> {errors.email && ( -

+

Постои корисник со оваа адреса.

@@ -125,5 +143,7 @@ /> {errors.confirmPassword && ( -

Лозинките не се совпаѓаат

+

+ Лозинките не се совпаѓаат +

)} -

+

Имаш профил?{" "} @@ -151,4 +171,26 @@ {loading ? "Се регистрира..." : "Регистрирај се"} +

+
+
+
+
+
+ или +
+
+
+ +