From aa380824faec37e60417d41264bf9bc5abd37d8e Mon Sep 17 00:00:00 2001 From: Mari Zhevagin Date: Thu, 8 Oct 2026 23:32:40 +0200 Subject: [PATCH 1/3] fikset google innlogging --- client/.env.example | 5 ++++- client/package.json | 1 + client/src/main.tsx | 18 +++++++++++------- client/src/routes/LoginPage.tsx | 20 +++++++++++++------- 4 files changed, 29 insertions(+), 15 deletions(-) diff --git a/client/.env.example b/client/.env.example index 0ba98e5..7f304b1 100644 --- a/client/.env.example +++ b/client/.env.example @@ -1,2 +1,5 @@ # Adressen til Graphql backend. Kopier dette til .env.local -VITE_GRAPHQL_URL=/project2/graphql \ No newline at end of file +VITE_GRAPHQL_URL=/project2/graphql +# Client ID fra Google Cloud +# jeg trenger en google bruker fra dere hvis dere ønsker å teste google innlogging +VITE_GOOGLE_CLIENT_ID= \ No newline at end of file diff --git a/client/package.json b/client/package.json index 6e56449..3eb3c18 100644 --- a/client/package.json +++ b/client/package.json @@ -13,6 +13,7 @@ "@apollo/client": "^4.3.1", "@mui/icons-material": "^9.4.0", "@radix-ui/react-dialog": "^1.1.23", + "@react-oauth/google": "^0.13.5", "@tailwindcss/vite": "^4.3.3", "embla-carousel-autoplay": "^8.6.0", "embla-carousel-react": "^8.6.0", diff --git a/client/src/main.tsx b/client/src/main.tsx index 86a78ef..8ffbbbb 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -2,18 +2,22 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router'; import { ApolloProvider } from '@apollo/client/react'; +import { GoogleOAuthProvider } from '@react-oauth/google'; import './index.css'; import client from './lib/apolloClient.ts'; import App from './App.tsx'; createRoot(document.getElementById('root')!).render( - {/* Gir tilgang til Apollo klienten */} - - {/* gjør at basename matcher base i vite config */} - - - - + {/* gir tilgang til google innlogging */} + + {/* Gir tilgang til Apollo klienten */} + + {/* gjør at basename matcher base i vite config */} + + + + + , ); diff --git a/client/src/routes/LoginPage.tsx b/client/src/routes/LoginPage.tsx index 97731a4..babe3b2 100644 --- a/client/src/routes/LoginPage.tsx +++ b/client/src/routes/LoginPage.tsx @@ -1,10 +1,16 @@ import { useNavigate } from 'react-router'; import { Button } from '../components/ui/Button'; +import { GoogleLogin, type CredentialResponse } from '@react-oauth/google'; // Innloggingsside export default function LoginPage() { const navigate = useNavigate(); + //Midlertidig. token skal sendes til backend senere + function handleGoogleSuccess(response: CredentialResponse) { + console.log('Google-token:', response.credential); + } + return (

Velkommen tilbake

@@ -14,13 +20,13 @@ export default function LoginPage() { {/* Midlertidig: Google og gjest kobles til backend senere */}
- +
+ console.log('Google innlogging feilet')} + text="signin_with" + /> +

Lagre favorittene dine og del egne oppskrifter.

From 5fb3cc24ff7e5279e2307dc56e0747b311f90f0a Mon Sep 17 00:00:00 2001 From: Mari Zhevagin Date: Fri, 9 Oct 2026 00:12:05 +0200 Subject: [PATCH 2/3] =?UTF-8?q?fikset=20google=20knapp=20til=20=C3=A5=20ti?= =?UTF-8?q?lpasse=20st=C3=B8rrelse=20p=C3=A5=20vindu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/main.tsx | 5 ++++- client/src/routes/LoginPage.tsx | 27 +++++++++++++++++++++++++-- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/client/src/main.tsx b/client/src/main.tsx index 8ffbbbb..2eb4526 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -10,7 +10,10 @@ import App from './App.tsx'; createRoot(document.getElementById('root')!).render( {/* gir tilgang til google innlogging */} - + {/* Gir tilgang til Apollo klienten */} {/* gjør at basename matcher base i vite config */} diff --git a/client/src/routes/LoginPage.tsx b/client/src/routes/LoginPage.tsx index babe3b2..30299f9 100644 --- a/client/src/routes/LoginPage.tsx +++ b/client/src/routes/LoginPage.tsx @@ -1,6 +1,7 @@ import { useNavigate } from 'react-router'; import { Button } from '../components/ui/Button'; import { GoogleLogin, type CredentialResponse } from '@react-oauth/google'; +import { useEffect, useRef, useState } from 'react'; // Innloggingsside export default function LoginPage() { @@ -11,6 +12,25 @@ export default function LoginPage() { console.log('Google-token:', response.credential); } + // for å måle bredden rundt google kanpp + const googleBoxRef = useRef(null); + const [googleButtonWidth, setGoogleButtonWidth] = useState(400); + + // måler hver gang den endrer størrelse + useEffect(() => { + const box = googleBoxRef.current; + if (!box) return; + + const observer = new ResizeObserver(() => { + // google tillater maks 400 px + setGoogleButtonWidth(Math.min(box.offsetWidth, 400)); + }); + observer.observe(box); + + // slutter å måle når man forlater siden + return () => observer.disconnect(); + }, []); + return (

Velkommen tilbake

@@ -20,11 +40,14 @@ export default function LoginPage() { {/* Midlertidig: Google og gjest kobles til backend senere */}
-
+
console.log('Google innlogging feilet')} text="signin_with" + size="large" + width={googleButtonWidth} + shape="rectangular" />

@@ -41,7 +64,7 @@ export default function LoginPage() {