Update VATSIM auth, logos, and header UI

Author: sebastiankrll

apps/web/app/auth/[...nextauth]/route.ts

@@ -71,6 +71,11 @@ export const authOptions: NextAuthOptions = {
 
 	callbacks: {
 		async jwt({ token, account, profile }) {
+			// Block Navigraph if no VATSIM identity exists yet
+			if (account?.provider === "navigraph" && !token.vatsim) {
+				return token;
+			}
+
 			if (account?.provider === "vatsim" && profile?.data) {
 				token.vatsim = {
 					cid: profile.data.cid,

apps/web/app/policy/page.tsx

@@ -302,6 +302,28 @@ export default function Page() {
 					und § 25 Abs. 1 TDDDG, soweit die Einwilligung die Speicherung von Cookies oder den Zugriff auf Informationen im Endgerät des
 					Nutzers (z. B. Device-Fingerprinting) im Sinne des TDDDG umfasst. Die Einwilligung ist jederzeit widerrufbar.
 				</p>
+				<h3>VATSIM</h3>
+				<p>
+					Wir nutzen VATSIM International für die Authentifizierung und Benutzerverwaltung. Dies ermöglicht Ihnen, sich mit Ihrem VATSIM-Konto
+					anzumelden.
+				</p>
+				<p>
+					Beim Login über VATSIM erhalten wir ausschließlich Ihre VATSIM-Benutzer-ID (CID). Diese nutzen wir, um Ihr Benutzerkonto eindeutig zu
+					identifizieren und Ihre Einstellungen auf unserem Server unter Ihrem VATSIM-Benutzer zu speichern. Weitere personenbezogene Daten von VATSIM
+					werden von uns nicht verarbeitet.
+				</p>
+				<p>
+					Die Verarbeitung erfolgt auf Grundlage von Art. 6 Abs. 1 lit. a DSGVO aufgrund Ihrer Einwilligung zur Anmeldung über VATSIM. Sie können
+					diese Einwilligung jederzeit durch eine schriftliche Mitteilung an
+					<a href="mailto:mail@simradar21.com">mail@simradar21.com</a> widerrufen.
+				</p>
+				<p>
+					VATSIM verfügt über geeignete Datenschutzmaßnahmen und bietet ein angemessenes Datenschutzniveau. Weitere Informationen finden Sie in der{" "}
+					<a href="https://vatsim.net/docs/policy/overview" target="_blank" rel="noopener noreferrer">
+						Datenschutzerklärung von VATSIM
+					</a>
+					.
+				</p>
 				<h3>Cloudflare</h3>
 				<p>
 					Wir nutzen Cloudflare, Inc., 101 Townsend St, San Francisco, CA 94107, USA, als Content Delivery Network (CDN) und f&uuml;r
@@ -322,7 +344,7 @@ export default function Page() {
 				<p>
 					Cloudflare verf&uuml;gt &uuml;ber eine Zertifizierung nach dem &bdquo;EU-US Data Privacy Framework&ldquo; (DPF) und bietet somit ein
 					angemessenes Datenschutzniveau. Weitere Informationen finden Sie in der{" "}
-					<a href="https://www.cloudflare.com/de-de/privacy/" target="_blank" rel="noopener noreferrer">
+					<a href="https://www.cloudflare.com/de-de/privacypolicy/" target="_blank" rel="noopener noreferrer">
 						Datenschutzerkl&auml;rung von Cloudflare
 					</a>
 					.

apps/web/assets/images/logos/Navigraph_Logo_Landscape.png

@@ -6,7 +6,7 @@ footer {
 	height: 1.5rem;
 	display: flex;
 	align-items: center;
-	padding: 0 1rem;
+	padding-left: 1rem;
 	box-sizing: border-box;
 	background: linear-gradient(0deg, rgba(77, 95, 131, 0.3) 0%, rgba(77, 95, 131, 0) 120%);
 	border-top: 1px solid var(--color-border);

…ps/web/assets/images/simradar24_logo.svg …/assets/images/logos/Simradar21_Logo.svgapps/web/assets/images/simradar24_logo.svg renamed to apps/web/assets/images/logos/Simradar21_Logo.svg apps/web/assets/images/simradar24_logo.svg renamed to apps/web/assets/images/logos/Simradar21_Logo.svg

@@ -51,13 +51,28 @@ header {
 }
 
 #header-user {
+	position: relative;
 	height: 2rem;
 	width: 2rem;
 	border-radius: 50%;
 	background: white;
 	color: var(--color-green);
 	font-weight: 700;
 	z-index: 5;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#header-user span {
+	position: absolute;
+	right: 0rem;
+	bottom: 0rem;
+	height: 10px;
+	width: 10px;
+	border-radius: 50%;
+	background-color: rgb(150, 150, 150);
+	border: 1px solid white;
 }
 
 #header-nav {

apps/web/assets/images/logos/VATSIM_Logo_No_Tagline.png

@@ -3,9 +3,10 @@
 import Search from "./Search";
 import "./Header.css";
 import Image from "next/image";
-import { signIn, signOut, useSession } from "next-auth/react";
+import { signIn, useSession } from "next-auth/react";
 import { useEffect, useRef, useState } from "react";
-import simradar24Logo from "@/assets/images/simradar24_logo.svg";
+import simradar24Logo from "@/assets/images/logos/Simradar21_Logo.svg";
+import VatsimLogo from "@/assets/images/logos/VATSIM_Logo_Only.png";
 import Navigation from "./Navigation";
 
 export default function Header() {
@@ -35,15 +36,10 @@ export default function Header() {
 				<Image src={simradar24Logo} alt="simradar24 logo" height={40} width={200} priority />
 			</figure>
 			<Search />
-			{session ? (
-				<button type="button" id="header-user" onClick={() => signOut()}>
-					👤
-				</button>
-			) : (
-				<button type="button" id="header-user" onClick={() => signIn("vatsim")}>
-					🔒
-				</button>
-			)}
+			<button type="button" id="header-user" onClick={() => signIn("vatsim")} aria-label="Sign In/Out">
+				<Image src={VatsimLogo} alt="VATSIM logo" height={30} width={30} />
+				<span style={{ backgroundColor: session ? "var(--color-green)" : "var(--color-red)" }}></span>
+			</button>
 			<button type="button" id="header-nav" aria-label="Navigation" onClick={() => setOpen(!open)}>
 				{open ? "✕" : "☰"}
 			</button>

apps/web/assets/images/logos/VATSIM_Logo_Only.png

@@ -20,6 +20,38 @@ nav.open {
 	width: 20rem;
 }
 
+#nav-auth {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+#nav-auth button {
+	background: white;
+	display: flex;
+	align-items: center;
+	height: 32px;
+	border-radius: 1rem;
+	padding-right: 16px;
+	border: 1px solid var(--color-border);
+	gap: 8px;
+}
+
+#nav-auth button span {
+	background-color: black;
+	height: 28px;
+	width: 28px;
+	border-radius: 50%;
+	margin: 2px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#nav-auth button span.active {
+	background-color: var(--color-green);
+}
+
 nav ul {
 	list-style: none;
 	height: 100%;