Merge pull request #63 from Jalen-Stephens/jalen/ui-fix-cloud

moved ui under resources and added ui to security protocol

Author: ikeschmack

client/config.js

@@ -6,6 +6,8 @@
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.core.annotation.Order;
+import org.springframework.http.HttpMethod;
 import org.springframework.security.config.Customizer;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
@@ -21,7 +23,6 @@
 import org.springframework.web.cors.CorsConfigurationSource;
 import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
 
-
 /**
  * Spring Security configuration for the MetaDetect service.
  * Defines authentication, authorization, and HTTP security policies.
@@ -34,20 +35,22 @@ public class SecurityConfig {
    * Security filter chain for API endpoints under /api/**.
    * Enforces JWT authentication via OAuth2 Resource Server.
    * Public endpoints (e.g. /api/health) are permitted without auth.
-   *
-   * @param http HttpSecury builder
-   * @return configured SecurityFilterChain
    */
   @Bean
+  @Order(1)
   public SecurityFilterChain apiSecurityFilterChain(HttpSecurity http) throws Exception {
     http
         // Only apply this chain to /api/** endpoints
         .securityMatcher("/api/**")
         .csrf(csrf -> csrf.disable())
         .cors(Customizer.withDefaults())
         .authorizeHttpRequests(auth -> auth
-            // Public API endpoints (if you have any under /api)
+            // Allow CORS preflight (OPTIONS) through without auth
+            .requestMatchers(HttpMethod.OPTIONS, "/api/**").permitAll()
+
+            // Public API endpoints
             .requestMatchers("/api/health", "/api/public/**").permitAll()
+
             // Everything else under /api/** requires auth
             .anyRequest().authenticated()
         )
@@ -56,14 +59,52 @@ public SecurityFilterChain apiSecurityFilterChain(HttpSecurity http) throws Exce
     return http.build();
   }
 
+  /**
+   * Security filter chain for non-API endpoints:
+   * Serves static assets, HTML pages, and allows public access to the Pulse client.
+   */
+  @Bean
+  @Order(2)
+  public SecurityFilterChain webSecurityFilterChain(HttpSecurity http) throws Exception {
+    http
+          .csrf(csrf -> csrf.disable())
+          .cors(Customizer.withDefaults())
+          .authorizeHttpRequests(auth -> auth
+              // Public pages (served from src/main/resources/static)
+              .requestMatchers(
+                  "/",
+                  "/index.html",
+                  "/login.html",
+                  "/signup.html",
+                  "/compose.html"
+              ).permitAll()
+
+              // Static assets – list concrete files and folders
+              .requestMatchers(
+                  "/styles.css",
+                  "/compose.css",
+                  "/config.js",
+                  "/app.js",
+                  "/compose.js",
+                  "/css/**",
+                  "/js/**",
+                  "/images/**",
+                  "/fonts/**",
+                  "/webjars/**"
+              ).permitAll()
+
+              // Everything else (non-API) is allowed
+              .anyRequest().permitAll()
+        );
+
+    return http.build();
+  }
+
+
   /**
    * JWT decoder configured to validate Supabase-issued access tokens.
    * Uses the project's JWT secret for HS256 signature validation
    * and enforces the correct issuer URL.
-   *
-   * @param jwtSecret Supabase project's JWT secret
-   * @param projectBaseUrl Supabase project base URL
-   * @return configured JwtDecoder
    */
   @Bean
   JwtDecoder jwtDecoder(
@@ -91,8 +132,6 @@ JwtDecoder jwtDecoder(
   /**
    * CORS configuration allowing requests from any origin.
    * Allows common HTTP methods and headers.
-   *
-   * @return configured CorsConfigurationSource
    */
   @Bean
   CorsConfigurationSource corsConfigurationSource() {

src/main/java/dev/coms4156/project/metadetect/config/SecurityConfig.java

@@ -1,7 +1,6 @@
 (() => {
-  const DEFAULT_CONFIG = { apiBaseUrl: 'http://localhost:8080' };
-  const config = Object.assign({}, DEFAULT_CONFIG, window.APP_CONFIG || {});
-  const apiBase = config.apiBaseUrl?.replace(/\/$/, '') || DEFAULT_CONFIG.apiBaseUrl;
+  // Since frontend is now served by Spring Boot, just use same-origin API calls.
+  const apiBase = ''; // empty prefix = same domain + same port
   const TOKEN_STORAGE_KEY = 'pulse-demo-token';
 
   const tabs = document.querySelectorAll('.tab');
@@ -12,7 +11,8 @@
   const copyButton = document.getElementById('copy-response');
   const instanceLabel = document.getElementById('instance-label');
 
-  instanceLabel.textContent = apiBase.replace(/^https?:\/\//, '');
+  // Show current origin (e.g., meta-detect.herokuapp.com)
+  instanceLabel.textContent = window.location.host;
 
   const setMode = (mode) => {
     tabs.forEach((tab) => {
@@ -56,7 +56,9 @@
   };
 
   const postJson = async (path, body) => {
+    // path example: "/auth/login"
     const url = `${apiBase}${path}`;
+
     const response = await fetch(url, {
       method: 'POST',
       headers: {
@@ -67,28 +69,27 @@
 
     const text = await response.text();
     let parsed = text;
+
     try {
       parsed = JSON.parse(text);
-    } catch (err) {
-      // plain text; leave as-is
-    }
+    } catch (_) {}
 
     return { response, parsed };
   };
 
   const saveAccessTokenIfPresent = (payload) => {
-    if (!payload || typeof payload !== 'object') {
-      return false;
-    }
+    if (!payload || typeof payload !== 'object') return false;
+
     const direct = payload.access_token || payload.accessToken;
     const nested = payload.session?.access_token || payload.session?.accessToken;
     const token = direct || nested;
+
     if (token) {
       try {
         localStorage.setItem(TOKEN_STORAGE_KEY, token);
         return true;
       } catch (err) {
-        console.warn('Unable to persist token', err);
+        console.warn('Cannot store token', err);
       }
     }
     return false;
@@ -97,6 +98,7 @@
   const handleAuthSubmit = async (event, mode) => {
     event.preventDefault();
     const form = event.currentTarget;
+
     const data = new FormData(form);
     const email = (data.get('email') || '').toString().trim();
     const password = data.get('password')?.toString();
@@ -109,7 +111,7 @@
     if (mode === 'signup') {
       const confirm = data.get('confirm')?.toString();
       if (password !== confirm) {
-        updateStatus('Passwords must match before continuing.', 'error');
+        updateStatus('Passwords must match.', 'error');
         return;
       }
     }
@@ -120,9 +122,11 @@
     try {
       const path = mode === 'login' ? '/auth/login' : '/auth/signup';
       const { response, parsed } = await postJson(path, { email, password });
+
       const tokenSaved = response.ok ? saveAccessTokenIfPresent(parsed) : false;
       const prefix = response.ok ? 'Success' : `Error ${response.status}`;
-      const suffix = tokenSaved ? ' — access token saved for Pulse Studio' : '';
+      const suffix = tokenSaved ? ' — token saved for Pulse Studio' : '';
+
       updateStatus(`${prefix}: ${response.statusText}${suffix}`, response.ok ? 'success' : 'error');
       updateResponse(parsed);
 
@@ -131,30 +135,26 @@
           window.location.href = './compose.html';
         }, 600);
       }
-    } catch (error) {
-      console.error(error);
-      updateStatus('Network error — confirm the API is running on the configured host.', 'error');
-      updateResponse(error.message);
+    } catch (err) {
+      console.error(err);
+      updateStatus('Network error — backend is not reachable.', 'error');
+      updateResponse(err.message);
     } finally {
       toggleFormDisabled(form, false);
     }
   };
 
-  loginForm.addEventListener('submit', (event) => handleAuthSubmit(event, 'login'));
-  signupForm.addEventListener('submit', (event) => handleAuthSubmit(event, 'signup'));
+  loginForm.addEventListener('submit', (e) => handleAuthSubmit(e, 'login'));
+  signupForm.addEventListener('submit', (e) => handleAuthSubmit(e, 'signup'));
 
   copyButton.addEventListener('click', async () => {
     try {
       await navigator.clipboard.writeText(responseOutput.textContent);
       copyButton.textContent = 'Copied!';
-      setTimeout(() => {
-        copyButton.textContent = 'Copy';
-      }, 1500);
+      setTimeout(() => { copyButton.textContent = 'Copy'; }, 1500);
     } catch (err) {
       copyButton.textContent = 'Unable to copy';
-      setTimeout(() => {
-        copyButton.textContent = 'Copy';
-      }, 1500);
+      setTimeout(() => { copyButton.textContent = 'Copy'; }, 1500);
     }
   });
 

client/app.js src/main/resources/static/app.jsclient/app.js renamed to src/main/resources/static/app.js

@@ -7,9 +7,11 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="./compose.css">
-  <script defer src="./config.js"></script>
-  <script defer src="./compose.js"></script>
+
+  <!-- Static assets served from src/main/resources/static -->
+  <link rel="stylesheet" href="/compose.css">
+  <script defer src="/config.js"></script>
+  <script defer src="/compose.js"></script>
 </head>
 <body>
   <div class="gradient-glow"></div>

client/compose.css src/main/resources/static/compose.cssclient/compose.css renamed to src/main/resources/static/compose.css

@@ -1,7 +1,6 @@
 (() => {
-  const DEFAULT_CONFIG = { apiBaseUrl: 'http://localhost:8080' };
-  const config = Object.assign({}, DEFAULT_CONFIG, window.APP_CONFIG || {});
-  const apiBase = config.apiBaseUrl?.replace(/\/$/, '') || DEFAULT_CONFIG.apiBaseUrl;
+  // Use same-origin API base (works locally and on Heroku)
+  const apiBase = '';
   const TOKEN_STORAGE_KEY = 'pulse-demo-token';
 
   const fileInput = document.getElementById('file-input');

client/compose.html src/main/resources/static/compose.htmlclient/compose.html renamed to src/main/resources/static/compose.html

@@ -0,0 +1,3 @@
+window.APP_CONFIG = {
+  apiBaseUrl: "",
+};

client/compose.js src/main/resources/static/compose.jsclient/compose.js renamed to src/main/resources/static/compose.js

@@ -7,9 +7,11 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="./styles.css">
-  <script defer src="./config.js"></script>
-  <script defer src="./app.js"></script>
+
+  <!-- Static assets served from src/main/resources/static -->
+  <link rel="stylesheet" href="/styles.css">
+  <script defer src="/config.js"></script>
+  <script defer src="/app.js"></script>
 </head>
 <body>
   <div class="noise"></div>