From 46fadd93df70e730764c16c6e0bb4f728d8457c4 Mon Sep 17 00:00:00 2001 From: sigurd98 Date: Thu, 15 Oct 2026 13:10:03 +0200 Subject: [PATCH 1/4] =?UTF-8?q?lagt=20inn=20url=20til=20logg=20inn=20knapp?= =?UTF-8?q?en=20p=C3=A5=20headeren,=20slik=20at=20man=20kommer=20til=20en?= =?UTF-8?q?=20ferdig=20formert=20side=20for=20logg=20inn=20git=20commit=20?= =?UTF-8?q?-m=20lagt=20inn=20url=20til=20logg=20inn=20knappen=20p=C3=A5=20?= =?UTF-8?q?headeren,=20slik=20at=20man=20kommer=20til=20en=20ferdig=20form?= =?UTF-8?q?ert=20logg=20inn=20side?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrameRate/package-lock.json | 84 ++++++++++++-------- FrameRate/package.json | 3 +- FrameRate/src/App.tsx | 16 +++- FrameRate/src/components/layout/Header.tsx | 6 +- FrameRate/src/main.tsx | 5 +- FrameRate/src/pages/LoginPage.css | 90 ++++++++++++++++++++++ FrameRate/src/pages/LoginPage.tsx | 46 +++++++++++ 7 files changed, 212 insertions(+), 38 deletions(-) create mode 100644 FrameRate/src/pages/LoginPage.css create mode 100644 FrameRate/src/pages/LoginPage.tsx diff --git a/FrameRate/package-lock.json b/FrameRate/package-lock.json index d00450f..b8c4b89 100644 --- a/FrameRate/package-lock.json +++ b/FrameRate/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^19.2.8", - "react-dom": "^19.2.8" + "react-dom": "^19.2.8", + "react-router": "^8.4.0" }, "devDependencies": { "@babel/core": "^7.29.7", @@ -66,6 +67,7 @@ "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", @@ -644,6 +646,12 @@ "url": "https://opencollective.com/pkgr" } }, + "node_modules/@remix-run/route-pattern": { + "version": "0.22.1", + "resolved": "https://registry.npmjs.org/@remix-run/route-pattern/-/route-pattern-0.22.1.tgz", + "integrity": "sha512-czdGJWh09Lapvcqt7Vb09KlrU2PhRJ8xQaI+AItTuD9aDJ5MAgxnS38lnys6Ll+6RJEqPiaUqTwIQhVLwFvv+w==", + "license": "MIT" + }, "node_modules/@rolldown/binding-android-arm-eabi": { "version": "1.2.12", "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.12.tgz", @@ -754,9 +762,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -774,9 +779,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -794,9 +796,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -814,9 +813,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -834,9 +830,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -854,9 +847,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -923,6 +913,7 @@ "integrity": "sha512-ygmm2j/mN+aCvstHo0x3IOu4uc6LqXT9SJ3q4kpfG/+Yhfz0B+E47FITcC0FljZADwUFARP6E2kiE+Lc26D8wg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "picomatch": "^4.0.7" }, @@ -1038,6 +1029,7 @@ "integrity": "sha512-aS3/DG0oM05K0RIXXP+hKjinGG5IgSSVGzswZxW3O0sS3pH4/fycXundUC9XsszgKCk4gHXylTEK6hyFxVxnoQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } @@ -1048,6 +1040,7 @@ "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1107,6 +1100,7 @@ "integrity": "sha512-CG4nPk1f2zc8yw4pALqHsFYH2hdo+h1T9daSp21+Hnxi9LOE3GT9hAfTKJCBXVNM2GmYs1eMEP615wPoeOgk3A==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.71.0", "@typescript-eslint/types": "8.71.0", @@ -1379,6 +1373,7 @@ "integrity": "sha512-oJlA3XiRm7Cyk6qFD2Jn8ak9B7jSy0qy00ADO3+8dpT0LSjFihQYv4C02LFCSYJV3Q37xYwwRy5m+IpIiUzqWw==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1615,6 +1610,7 @@ "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/types": "^7.26.0" } @@ -1675,6 +1671,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.11.26", "caniuse-lite": "^1.0.30001813", @@ -1831,6 +1828,12 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie-es": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-3.1.1.tgz", + "integrity": "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==", + "license": "MIT" + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -2222,6 +2225,7 @@ "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -2282,6 +2286,7 @@ "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", "dev": true, "license": "MIT", + "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -3729,9 +3734,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3753,9 +3755,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3777,9 +3776,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3801,9 +3797,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -4244,6 +4237,7 @@ "integrity": "sha512-skGHTH1Yb9QvaTC4hWnRTzEYtCpApF0UMBPz+t/0ZPzP8ihefo/btKd+QA7pUE0fEwA1SbS/NmhyEcstdXOIdA==", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -4282,6 +4276,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz", "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -4291,6 +4286,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz", "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.28.0" }, @@ -4298,6 +4294,28 @@ "react": "^19.3.0" } }, + "node_modules/react-router": { + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-8.4.0.tgz", + "integrity": "sha512-JtydAkBvU9UTEe5qNC+POhu+ZBNM7rlKY2IegwXc7Idj7xfRG16x5RZrw3mju+XlqBxfvb2ky9P3jUp9WyWC1g==", + "license": "MIT", + "dependencies": { + "@remix-run/route-pattern": "^0.22.1", + "cookie-es": "^3.1.1" + }, + "engines": { + "node": ">=22.22.0" + }, + "peerDependencies": { + "react": ">=19.2.7", + "react-dom": ">=19.2.7" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -4358,6 +4376,7 @@ "integrity": "sha512-8wafseiaG80xmXSfqidUNqZcylTlhmPZZt+za2m+js2sFZ8dTNlhIOV2WcbIPx2hgwPBJpEUGFAMZ9bgBBLTSQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@oxc-project/types": "=0.152.0", "@rolldown/pluginutils": "^1.0.0" @@ -4900,6 +4919,7 @@ "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -5005,6 +5025,7 @@ "integrity": "sha512-SQr1x6W5vVSbROg7vsyXIaxK9b0G7zsT68acdWWRmnBUsgDieLCRG+Rep9WdZgcposvv/GSnr4GUUBqB3vXq6w==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "lightningcss": "^1.33.0", "picomatch": "^4.0.7", @@ -5314,6 +5335,7 @@ "integrity": "sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/FrameRate/package.json b/FrameRate/package.json index ab4dade..5a1fc5b 100644 --- a/FrameRate/package.json +++ b/FrameRate/package.json @@ -13,7 +13,8 @@ }, "dependencies": { "react": "^19.2.8", - "react-dom": "^19.2.8" + "react-dom": "^19.2.8", + "react-router": "^8.4.0" }, "devDependencies": { "@babel/core": "^7.29.7", diff --git a/FrameRate/src/App.tsx b/FrameRate/src/App.tsx index d80a585..f3b5914 100644 --- a/FrameRate/src/App.tsx +++ b/FrameRate/src/App.tsx @@ -1,12 +1,22 @@ import './index.css'; +import { Route, Routes } from 'react-router'; +import LoginPage from './pages/LoginPage'; import { Layout } from './components/layout/Layout'; import { FeaturedMovie } from './components/FeaturedMovie'; function App() { return ( - - - + + + + + } + /> + } /> + ); } diff --git a/FrameRate/src/components/layout/Header.tsx b/FrameRate/src/components/layout/Header.tsx index 1e7a485..d76feb6 100644 --- a/FrameRate/src/components/layout/Header.tsx +++ b/FrameRate/src/components/layout/Header.tsx @@ -1,3 +1,5 @@ +import { Link } from 'react-router'; + // ---------- Lyset i menyen ---------- /** Flytter lyset i menyen til en x-posisjon (piksler fra venstre kant av menyen). */ @@ -63,9 +65,9 @@ export function Header() { Min liste - + Logg inn - + ); } diff --git a/FrameRate/src/main.tsx b/FrameRate/src/main.tsx index df655ea..cfb690d 100644 --- a/FrameRate/src/main.tsx +++ b/FrameRate/src/main.tsx @@ -1,10 +1,13 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; +import { BrowserRouter } from 'react-router'; import './index.css'; import App from './App.tsx'; createRoot(document.getElementById('root')!).render( - + + + ); diff --git a/FrameRate/src/pages/LoginPage.css b/FrameRate/src/pages/LoginPage.css new file mode 100644 index 0000000..d2e06ab --- /dev/null +++ b/FrameRate/src/pages/LoginPage.css @@ -0,0 +1,90 @@ +.login-page { + min-height: 100svh; + display: grid; + place-items: center; + padding: 2rem 1rem; + box-sizing: border-box; + background: radial-gradient(ellipse at top, rgba(242, 182, 48, 0.09), transparent 65%), #0b0c10; +} +.login-card { + width: 100%; + max-width: 27rem; + padding: clamp(1.5rem, 5vw, 3rem); + box-sizing: border-box; + border: 1px solid #2a2d35; + border-radius: 12px; + background: #15171c; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); +} +.login-brand { + color: white; + font: + bold 1.75rem Georgia, + serif; + text-decoration: none; +} +.login-eyebrow { + margin: 0.5rem 0 2rem; + color: #f2b630; + font-style: italic; +} +.login-card h1 { + margin: 0 0 0.75rem; + font: + bold 2rem Georgia, + serif; +} +.login-intro, +.login-message { + color: #a0a4ad; + line-height: 1.6; +} +.login-form { + display: flex; + flex-direction: column; + margin-top: 2rem; +} +.login-form label { + margin-bottom: 0.5rem; + font-weight: 600; +} +.login-form input { + min-width: 0; + margin-bottom: 1.25rem; + padding: 0.85rem 1rem; + border: 1px solid #3a3e48; + border-radius: 8px; + background: #0b0c10; + color: white; + font: inherit; +} +.login-form input:focus-visible { + outline: 2px solid #f2b630; + outline-offset: 2px; +} +.login-form button { + margin-top: 0.5rem; + padding: 0.85rem 1rem; + border: none; + border-radius: 8px; + background: #f2b630; + color: #0b0c10; + font: inherit; + font-weight: bold; + cursor: pointer; +} +.login-form button:hover { + background: #ffca50; +} +.login-message { + margin: 0.75rem 0; +} +.login-back { + display: inline-block; + margin-top: 1rem; + color: #a0a4ad; + text-decoration: none; +} +.login-back:hover { + color: white; +} diff --git a/FrameRate/src/pages/LoginPage.tsx b/FrameRate/src/pages/LoginPage.tsx new file mode 100644 index 0000000..c81a824 --- /dev/null +++ b/FrameRate/src/pages/LoginPage.tsx @@ -0,0 +1,46 @@ +import { useState } from 'react'; +import { Link } from 'react-router'; +import './LoginPage.css'; + +function LoginPage() { + const [message, setMessage] = useState(''); + return ( +
+
+ + Frame Rate + +

Rate the frames

+

Velkommen tilbake

+

Logg inn for å samle filmene og anmeldelsene dine.

+
{ + event.preventDefault(); + setMessage('Innlogging er ikke koblet til ennå.'); + }} + > + + + + + +

+ {message} +

+
+ + ← Tilbake til forsiden + +
+
+ ); +} + +export default LoginPage; From cbfedffd9f7ec71851b8a7e7fc929ab24068a8c7 Mon Sep 17 00:00:00 2001 From: poOmOoq Date: Thu, 15 Oct 2026 11:47:16 +0200 Subject: [PATCH 2/4] chore: formatert med prettier --- FrameRate/package-lock.json | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/FrameRate/package-lock.json b/FrameRate/package-lock.json index b8c4b89..51b3d29 100644 --- a/FrameRate/package-lock.json +++ b/FrameRate/package-lock.json @@ -67,7 +67,6 @@ "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", @@ -913,7 +912,6 @@ "integrity": "sha512-ygmm2j/mN+aCvstHo0x3IOu4uc6LqXT9SJ3q4kpfG/+Yhfz0B+E47FITcC0FljZADwUFARP6E2kiE+Lc26D8wg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "picomatch": "^4.0.7" }, @@ -1029,7 +1027,6 @@ "integrity": "sha512-aS3/DG0oM05K0RIXXP+hKjinGG5IgSSVGzswZxW3O0sS3pH4/fycXundUC9XsszgKCk4gHXylTEK6hyFxVxnoQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } @@ -1040,7 +1037,6 @@ "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1100,7 +1096,6 @@ "integrity": "sha512-CG4nPk1f2zc8yw4pALqHsFYH2hdo+h1T9daSp21+Hnxi9LOE3GT9hAfTKJCBXVNM2GmYs1eMEP615wPoeOgk3A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.71.0", "@typescript-eslint/types": "8.71.0", @@ -1373,7 +1368,6 @@ "integrity": "sha512-oJlA3XiRm7Cyk6qFD2Jn8ak9B7jSy0qy00ADO3+8dpT0LSjFihQYv4C02LFCSYJV3Q37xYwwRy5m+IpIiUzqWw==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1610,7 +1604,6 @@ "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/types": "^7.26.0" } @@ -1671,7 +1664,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.11.26", "caniuse-lite": "^1.0.30001813", @@ -2225,7 +2217,6 @@ "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -2286,7 +2277,6 @@ "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", "dev": true, "license": "MIT", - "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -4237,7 +4227,6 @@ "integrity": "sha512-skGHTH1Yb9QvaTC4hWnRTzEYtCpApF0UMBPz+t/0ZPzP8ihefo/btKd+QA7pUE0fEwA1SbS/NmhyEcstdXOIdA==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -4276,7 +4265,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz", "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4286,7 +4274,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz", "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.28.0" }, @@ -4376,7 +4363,6 @@ "integrity": "sha512-8wafseiaG80xmXSfqidUNqZcylTlhmPZZt+za2m+js2sFZ8dTNlhIOV2WcbIPx2hgwPBJpEUGFAMZ9bgBBLTSQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@oxc-project/types": "=0.152.0", "@rolldown/pluginutils": "^1.0.0" @@ -4919,7 +4905,6 @@ "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -5025,7 +5010,6 @@ "integrity": "sha512-SQr1x6W5vVSbROg7vsyXIaxK9b0G7zsT68acdWWRmnBUsgDieLCRG+Rep9WdZgcposvv/GSnr4GUUBqB3vXq6w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "lightningcss": "^1.33.0", "picomatch": "^4.0.7", @@ -5335,7 +5319,6 @@ "integrity": "sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } From 586c3345918d641ad39f69068f45aa86ffecfdd2 Mon Sep 17 00:00:00 2001 From: poOmOoq Date: Thu, 15 Oct 2026 11:49:10 +0200 Subject: [PATCH 3/4] chore: fiksa format --- docs/AI_Deklarasjon/AI_Deklarasjon.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/AI_Deklarasjon/AI_Deklarasjon.md b/docs/AI_Deklarasjon/AI_Deklarasjon.md index 90dbab4..750fec6 100644 --- a/docs/AI_Deklarasjon/AI_Deklarasjon.md +++ b/docs/AI_Deklarasjon/AI_Deklarasjon.md @@ -23,12 +23,13 @@ Her dokumenterer vi bruk av KI-verktøy i prosjektet, med én del per pull reque - Bestemt arkitektur og datamodell i planleggingsdokumentet: hvilke funksjoner appen skal ha, hvilke data som trengs, og at filmene importeres fra TMDB én gang til vår egen database - Sammenlignet databasen med planleggingsdokumentet - Kodegjennomgang (review) av et annet gruppemedlem, som førte til endringer i hvilke felter som lagres -# PR #21 - Setup av Prettier og linter + +## PR #21 - Setup av Prettier og linter **Vertøy:** Claude (Sonnet 5.5) via claude.ai **Brukt av:** Kevin -## Hva KI ble brukt til +### Hva KI ble brukt til - Finne riktige komandoer From a2fa0ae4f00548bb41916bdeb5c959a9350224f3 Mon Sep 17 00:00:00 2001 From: sigurd98 Date: Sat, 17 Oct 2026 17:26:29 +0200 Subject: [PATCH 4/4] =?UTF-8?q?la=20til=20opprett=20konto=20p=C3=A5=20innl?= =?UTF-8?q?oggingssiden?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrameRate/src/pages/LoginPage.css | 28 +++++++++++ FrameRate/src/pages/LoginPage.tsx | 79 +++++++++++++++++++++++++++++-- 2 files changed, 102 insertions(+), 5 deletions(-) diff --git a/FrameRate/src/pages/LoginPage.css b/FrameRate/src/pages/LoginPage.css index d2e06ab..e0213dd 100644 --- a/FrameRate/src/pages/LoginPage.css +++ b/FrameRate/src/pages/LoginPage.css @@ -79,6 +79,34 @@ .login-message { margin: 0.75rem 0; } +.login-hint { + margin: -0.75rem 0 1.25rem; + color: #a0a4ad; + font-size: 0.875rem; + line-height: 1.6; +} +.login-switch { + color: #a0a4ad; + line-height: 1.6; +} +.login-switch button { + padding: 0; + border: none; + background: none; + color: #f2b630; + font: inherit; + font-weight: 600; + cursor: pointer; +} +.login-switch button:hover { + color: #ffca50; + text-decoration: underline; +} +.login-switch button:focus-visible, +.login-form button:focus-visible { + outline: 2px solid #f2b630; + outline-offset: 4px; +} .login-back { display: inline-block; margin-top: 1rem; diff --git a/FrameRate/src/pages/LoginPage.tsx b/FrameRate/src/pages/LoginPage.tsx index c81a824..1872e67 100644 --- a/FrameRate/src/pages/LoginPage.tsx +++ b/FrameRate/src/pages/LoginPage.tsx @@ -3,6 +3,7 @@ import { Link } from 'react-router'; import './LoginPage.css'; function LoginPage() { + const [isSignUp, setIsSignUp] = useState(false); const [message, setMessage] = useState(''); return (
@@ -11,30 +12,98 @@ function LoginPage() { Frame Rate

Rate the frames

-

Velkommen tilbake

-

Logg inn for å samle filmene og anmeldelsene dine.

+

{isSignUp ? 'Opprett konto' : 'Velkommen tilbake'}

+

+ {isSignUp + ? 'Bli med og samle filmene og anmeldelsene dine på ett sted.' + : 'Logg inn for å samle filmene og anmeldelsene dine.'} +

{ event.preventDefault(); - setMessage('Innlogging er ikke koblet til ennå.'); + setMessage( + isSignUp + ? 'Oppretting av konto er ikke koblet til ennå.' + : 'Innlogging er ikke koblet til ennå.' + ); }} > + {isSignUp && ( + <> + + + + )} { + const confirmation = event.currentTarget.form?.elements.namedItem('confirm-password'); + if (confirmation instanceof HTMLInputElement) { + confirmation.setCustomValidity( + confirmation.value && confirmation.value !== event.currentTarget.value + ? 'Passordene må være like.' + : '' + ); + } + }} required /> - + {isSignUp && ( + <> +

+ Bruk minst 8 tegn. +

+ + { + const input = event.currentTarget; + const password = input.form?.elements.namedItem('password'); + input.setCustomValidity( + password instanceof HTMLInputElement && input.value !== password.value + ? 'Passordene må være like.' + : '' + ); + }} + onInvalid={event => { + const input = event.currentTarget; + if (input.validity.valueMissing) + input.setCustomValidity('Bekreft passordet ditt.'); + }} + /> + + )} +

{message}

+

+ {isSignUp ? 'Har du allerede konto?' : 'Har du ikke konto?'}{' '} + +

← Tilbake til forsiden