feat(pav-6): replace Facebook button with LinkedIn in login/register

- Add handleLinkedinLogin handler in RigthSide and RegisterSide
- Replace Facebook button with LinkedIn button using inline SVG icon
- Add tests for LinkedIn button click triggering OAuth redirect

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 2 people

frontend/src/components/login/RegisterSide.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { register, getGoogleAuthUrl } from "@/services/authService";
+import { register, getGoogleAuthUrl, getLinkedinAuthUrl } from "@/services/authService";
 import { Image } from "@unpic/react";
 import { motion } from "framer-motion";
 import { ArrowLeft, Eye, EyeOff } from "lucide-react";
@@ -75,6 +75,18 @@ export default function RegisterSide() {
     }
   };
 
+  const handleLinkedinLogin = async () => {
+    setIsLoading(true);
+    setApiError("");
+    try {
+      const url = await getLinkedinAuthUrl();
+      window.location.href = url;
+    } catch (err: any) {
+      setApiError(err.message || "Erro ao iniciar login com LinkedIn.");
+      setIsLoading(false);
+    }
+  };
+
   const handleRevealPassword = () => setShowPassword((prev) => !prev);
 
   const formatCpf = (value: string) => {
@@ -230,8 +242,10 @@ export default function RegisterSide() {
           <button type="button" onClick={handleGoogleLogin} disabled={isLoading} className="flex justify-center items-center py-3 px-4 border border-gray-200 dark:border-neutral-800 rounded-xl bg-white/50 dark:bg-neutral-800/50 hover:bg-gray-50 dark:hover:bg-neutral-700/50 transition-all shadow-sm cursor-pointer disabled:opacity-50">
             <Image src="/google.png" alt="Google" width={20} height={20} className="object-contain" />
           </button>
-          <button type="button" disabled={isLoading} className="flex justify-center items-center py-3 px-4 border border-gray-200 dark:border-neutral-800 rounded-xl bg-white/50 dark:bg-neutral-800/50 hover:bg-gray-50 dark:hover:bg-neutral-700/50 transition-all shadow-sm cursor-pointer disabled:opacity-50">
-            <Image src="/facebook.png" alt="Facebook" width={20} height={20} className="object-contain" />
+          <button type="button" onClick={handleLinkedinLogin} disabled={isLoading} aria-label="LinkedIn" className="flex justify-center items-center py-3 px-4 border border-gray-200 dark:border-neutral-800 rounded-xl bg-white/50 dark:bg-neutral-800/50 hover:bg-gray-50 dark:hover:bg-neutral-700/50 transition-all shadow-sm cursor-pointer disabled:opacity-50">
+            <svg className="h-5 w-5 fill-[#0A66C2]" viewBox="0 0 24 24">
+              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+            </svg>
           </button>
           <button type="button" disabled={isLoading} className="flex justify-center items-center py-3 px-4 border border-gray-200 dark:border-neutral-800 rounded-xl bg-white/50 dark:bg-neutral-800/50 hover:bg-gray-50 dark:hover:bg-neutral-700/50 transition-all shadow-sm cursor-pointer disabled:opacity-50">
             <svg className="h-5 w-5 fill-gray-900 dark:fill-white transition-colors" viewBox="0 0 24 24">

frontend/src/components/login/RigthSide.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { login, getGoogleAuthUrl } from "@/services/authService";
+import { login, getGoogleAuthUrl, getLinkedinAuthUrl } from "@/services/authService";
 import { Image } from "@unpic/react";
 import { motion } from "framer-motion";
 import { ArrowLeft, Eye, EyeOff } from "lucide-react";
@@ -67,6 +67,18 @@ export default function RightSide() {
     }
   };
 
+  const handleLinkedinLogin = async () => {
+    setIsLoading(true);
+    setApiError("");
+    try {
+      const url = await getLinkedinAuthUrl();
+      window.location.href = url;
+    } catch (err: any) {
+      setApiError(err.message || "Erro ao iniciar login com LinkedIn.");
+      setIsLoading(false);
+    }
+  };
+
   const handleRevealPassword = () => setShowPassword((prev) => !prev);
 
   const handleSubmit = async (e: FormEvent) => {
@@ -233,8 +245,10 @@ export default function RightSide() {
           <button type="button" onClick={handleGoogleLogin} disabled={isLoading} className="flex justify-center items-center py-3 px-4 border border-gray-200 dark:border-neutral-800 rounded-xl bg-white/50 dark:bg-neutral-800/50 hover:bg-gray-50 dark:hover:bg-neutral-700/50 transition-all shadow-sm cursor-pointer disabled:opacity-50">
             <Image src="/google.png" alt="Google" width={20} height={20} className="object-contain" />
           </button>
-          <button type="button" disabled={isLoading} className="flex justify-center items-center py-3 px-4 border border-gray-200 dark:border-neutral-800 rounded-xl bg-white/50 dark:bg-neutral-800/50 hover:bg-gray-50 dark:hover:bg-neutral-700/50 transition-all shadow-sm cursor-pointer disabled:opacity-50">
-            <Image src="/facebook.png" alt="Facebook" width={20} height={20} className="object-contain" />
+          <button type="button" onClick={handleLinkedinLogin} disabled={isLoading} aria-label="LinkedIn" className="flex justify-center items-center py-3 px-4 border border-gray-200 dark:border-neutral-800 rounded-xl bg-white/50 dark:bg-neutral-800/50 hover:bg-gray-50 dark:hover:bg-neutral-700/50 transition-all shadow-sm cursor-pointer disabled:opacity-50">
+            <svg className="h-5 w-5 fill-[#0A66C2]" viewBox="0 0 24 24">
+              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+            </svg>
           </button>
           <button type="button" disabled={isLoading} className="flex justify-center items-center py-3 px-4 border border-gray-200 dark:border-neutral-800 rounded-xl bg-white/50 dark:bg-neutral-800/50 hover:bg-gray-50 dark:hover:bg-neutral-700/50 transition-all shadow-sm cursor-pointer disabled:opacity-50">
             <svg className="h-5 w-5 fill-gray-900 dark:fill-white transition-colors" viewBox="0 0 24 24">

frontend/tests/unit/components/login/RegisterSide.test.tsx

@@ -3,8 +3,11 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const mockRegister = vi.fn();
+const mockGetLinkedinAuthUrl = vi.fn();
+
 vi.mock("@/services/authService", () => ({
   register: (...args: any[]) => mockRegister(...args),
+  getLinkedinAuthUrl: (...args: any[]) => mockGetLinkedinAuthUrl(...args),
 }));
 
 vi.mock("@unpic/react", () => ({
@@ -37,6 +40,7 @@ describe("RegisterSide", () => {
 
   beforeEach(() => {
     mockRegister.mockReset();
+    mockGetLinkedinAuthUrl.mockReset();
     Object.defineProperty(window, "location", {
       configurable: true,
       value: { href: "" },
@@ -148,4 +152,22 @@ describe("RegisterSide", () => {
       expect(passwordInput).toBeDisabled();
     });
   });
+
+  it("redireciona para LinkedIn OAuth ao clicar no botao LinkedIn", async () => {
+    mockGetLinkedinAuthUrl.mockResolvedValueOnce(
+      "https://www.linkedin.com/oauth/v2/authorization?state=abc"
+    );
+
+    render(<RegisterSide />);
+
+    const linkedinButton = screen.getByRole("button", { name: /linkedin/i });
+    fireEvent.click(linkedinButton);
+
+    await waitFor(() => {
+      expect(mockGetLinkedinAuthUrl).toHaveBeenCalled();
+      expect(window.location.href).toBe(
+        "https://www.linkedin.com/oauth/v2/authorization?state=abc"
+      );
+    });
+  });
 });

frontend/tests/unit/components/login/RigthSide.test.tsx

@@ -4,9 +4,11 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const mockLogin = vi.fn();
+const mockGetLinkedinAuthUrl = vi.fn();
 
 vi.mock("@/services/authService", () => ({
   login: (...args: any[]) => mockLogin(...args),
+  getLinkedinAuthUrl: (...args: any[]) => mockGetLinkedinAuthUrl(...args),
 }));
 
 vi.mock("@unpic/react", () => ({
@@ -31,6 +33,7 @@ describe("RigthSide", () => {
 
   beforeEach(() => {
     mockLogin.mockReset();
+    mockGetLinkedinAuthUrl.mockReset();
     Object.defineProperty(window, "location", {
       configurable: true,
       value: { href: "" },
@@ -157,4 +160,22 @@ describe("RigthSide", () => {
     render(<RigthSide />);
     expect(screen.getByText(/esqueceu a senha/i)).toBeInTheDocument();
   });
+
+  it("redireciona para LinkedIn OAuth ao clicar no botao LinkedIn", async () => {
+    mockGetLinkedinAuthUrl.mockResolvedValueOnce(
+      "https://www.linkedin.com/oauth/v2/authorization?state=abc"
+    );
+
+    render(<RigthSide />);
+
+    const linkedinButton = screen.getByRole("button", { name: /linkedin/i });
+    fireEvent.click(linkedinButton);
+
+    await waitFor(() => {
+      expect(mockGetLinkedinAuthUrl).toHaveBeenCalled();
+      expect(window.location.href).toBe(
+        "https://www.linkedin.com/oauth/v2/authorization?state=abc"
+      );
+    });
+  });
 });