From 50505d6fd820bba2445099c95cc130d6fec2d3de Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Mon, 7 Jul 2025 15:36:45 -0400
Subject: [PATCH] Add login/logout functionality

---
 src/App.tsx                     |  2 ++
 src/components/Login.tsx        | 26 ++++++++++++++++++++++++++
 src/components/styles/login.css | 11 +++++++++++
 src/configs/mapSettings.ts      |  4 ++++
 src/utils/fetchUtils.ts         |  5 +++++
 5 files changed, 48 insertions(+)
 create mode 100644 src/components/Login.tsx
 create mode 100644 src/components/styles/login.css

diff --git a/src/App.tsx b/src/App.tsx
index 9f904fe..1ac87ce 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,6 +18,7 @@ import { useQuery } from './hooks/useQuery';
 import { useHighlightBoxes } from './hooks/useHighlightBoxes';
 import { OpenLayersMap } from './components/OpenLayersMap';
 import { handleSelectChange } from './utils/layerUtils';
+import { Login } from './components/Login';
 
 function App() {
   /** contains useful state of the baselayer for tile requests and matplotlib color mapping */
@@ -167,6 +168,7 @@ function App() {
   const { activeBaselayer, internalBaselayersState } = baselayersState;
   return (
     <>
+      <Login />
       {activeBaselayer && internalBaselayersState && (
         <OpenLayersMap
           baselayersState={baselayersState}
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
new file mode 100644
index 0000000..2cfbca2
--- /dev/null
+++ b/src/components/Login.tsx
@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { LOGIN_URL, LOGOUT_URL } from '../configs/mapSettings';
+import { getCookie } from '../utils/fetchUtils';
+import './styles/login.css';
+
+export function Login() {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const hasAccessToken = getCookie('validate_access_token');
+    const hasRefreshToken = getCookie('valid_refresh_token');
+
+    setIsAuthenticated(!!hasAccessToken && !!hasRefreshToken);
+  }, []);
+
+  if (isAuthenticated === null) return null;
+
+  const linkText = isAuthenticated ? 'Log out' : 'Log in';
+  const href = isAuthenticated ? LOGOUT_URL : LOGIN_URL;
+
+  return (
+    <div className="login-container">
+      <a href={href}>{linkText}</a>
+    </div>
+  );
+}
diff --git a/src/components/styles/login.css b/src/components/styles/login.css
new file mode 100644
index 0000000..30ac69b
--- /dev/null
+++ b/src/components/styles/login.css
@@ -0,0 +1,11 @@
+.login-container {
+  position: absolute;
+  right: 11px;
+  top: 50px;
+  z-index: 999;
+}
+
+.login-container > a,
+.login-container > a:visited {
+  color: black;
+}
diff --git a/src/configs/mapSettings.ts b/src/configs/mapSettings.ts
index 216c521..d78190a 100644
--- a/src/configs/mapSettings.ts
+++ b/src/configs/mapSettings.ts
@@ -38,3 +38,7 @@ export const EXTERNAL_BASELAYERS: ExternalBaselayer[] = [
 // related to controls
 export const NUMBER_OF_FIXED_COORDINATE_DECIMALS = 5;
 export const NUMBER_OF_FIXED_GRATICULE_DECIMALS = 3;
+
+export const LOGIN_URL =
+  'https://identity.simonsobservatory.org/login/0686c201-b234-70fe-8000-3036b7a36d47';
+export const LOGOUT_URL = 'https://identity.simonsobservatory.org/logout';
diff --git a/src/utils/fetchUtils.ts b/src/utils/fetchUtils.ts
index 85b30d6..e8fd580 100644
--- a/src/utils/fetchUtils.ts
+++ b/src/utils/fetchUtils.ts
@@ -230,3 +230,8 @@ export async function deleteSubmapBox(
     console.error(e);
   }
 }
+
+export function getCookie(name: string): string | null {
+  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+  return match ? match[2] : null;
+}