.gitignore

@@ -0,0 +1 @@
+.vscode/

backend/build.gradle.kts

@@ -27,6 +27,7 @@ extra["springAiVersion"] = "2.0.0-M3"
 
 dependencies {
 	implementation("org.springframework.boot:spring-boot-starter-data-jpa")
+	implementation("org.springframework.boot:spring-boot-starter-session-jdbc")
 	// implementation("org.springframework.boot:spring-boot-starter-security")
 	implementation("org.springframework.boot:spring-boot-starter-validation")
 	implementation("org.springframework.boot:spring-boot-starter-webmvc")
@@ -40,7 +41,8 @@ dependencies {
 	testImplementation("org.springframework.boot:spring-boot-starter-validation-test")
 	testImplementation("org.springframework.boot:spring-boot-starter-webmvc-test")
 	testRuntimeOnly("org.junit.platform:junit-platform-launcher")
-	testImplementation("org.wiremock:wiremock-standalone:3.12.0")}
+	testImplementation("org.wiremock:wiremock-standalone:3.12.0")
+	testImplementation("org.springframework.boot:spring-boot-starter-session-jdbc-test")}
 
 dependencyManagement {
 	imports {
@@ -48,6 +50,10 @@ dependencyManagement {
 	}
 }
 
+tasks.withType<JavaCompile> {
+	options.compilerArgs.add("-parameters")
+}
+
 tasks.withType<Test> {
 	useJUnitPlatform()
 }

backend/src/main/java/com/vaessl/app/config/CorsConfig.java

@@ -0,0 +1,22 @@
+package com.vaessl.app.config;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+public class CorsConfig implements WebMvcConfigurer {
+
+    @Value("${vaessl.frontend-url}")
+    private String frontendUrl;
+
+    @Override
+    public void addCorsMappings(CorsRegistry registry) {
+        registry.addMapping("/**")
+                .allowedOrigins(frontendUrl, "http://192.168.1.208:5173", "https://5173.code-server.kasuns.website")
+                .allowedMethods("GET", "POST", "DELETE", "OPTIONS")
+                .allowedHeaders("Content-Type", "Accept")
+                .allowCredentials(true);
+    }
+}

backend/src/main/java/com/vaessl/app/config/SessionConfig.java

@@ -0,0 +1,19 @@
+package com.vaessl.app.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.session.web.http.CookieSerializer;
+import org.springframework.session.web.http.DefaultCookieSerializer;
+
+@Configuration
+public class SessionConfig {
+
+    @Bean
+    public CookieSerializer cookieSerializer() {
+        DefaultCookieSerializer serializer = new DefaultCookieSerializer();
+        serializer.setCookieMaxAge(Integer.MAX_VALUE);
+        serializer.setUseHttpOnlyCookie(true);
+        serializer.setSameSite("Lax");
+        return serializer;
+    }
+}

backend/src/main/java/com/vaessl/app/connection/ConnectionController.java

@@ -1,13 +1,26 @@
 package com.vaessl.app.connection;
 
+import java.time.Instant;
+import java.time.temporal.ChronoUnit;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
 import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RestController;
 
+import com.vaessl.app.dto.AuthResponse;
 import com.vaessl.app.dto.ConnectionRequest;
-import com.vaessl.app.dto.ConnectionResponse;
+import com.vaessl.app.dto.ConnectionStatusResponse;
+import com.vaessl.app.dto.LoginResult;
 
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpSession;
 import jakarta.validation.Valid;
 import lombok.RequiredArgsConstructor;
 
@@ -15,10 +28,63 @@ import lombok.RequiredArgsConstructor;
 @RequiredArgsConstructor
 public class ConnectionController {
 
+    private static final String SUFFIX = "_CONNECTION_ID";
+
     private final ConnectionService connectionService;
 
     @PostMapping("/login")
-    public ResponseEntity<ConnectionResponse> loginResponse(@Valid @RequestBody ConnectionRequest request) {
+    public ResponseEntity<AuthResponse> login(
-        return ResponseEntity.ok(connectionService.login(request));
+            @Valid @RequestBody ConnectionRequest request,
+            HttpServletRequest httpReq) {
+
+        LoginResult result = connectionService.login(request);
+
+        HttpSession session = httpReq.getSession(true);
+        session.setAttribute(request.serviceType() + SUFFIX, result.connectionId());
+
+        if (result.expiresAt() != null) {
+            long secs = Instant.now().until(result.expiresAt(), ChronoUnit.SECONDS);
+            session.setMaxInactiveInterval((int) Math.max(secs, 300));
+        }
+
+        return ResponseEntity.ok(new AuthResponse(request.serviceType(), result.expiresAt()));
+    }
+
+    @GetMapping("/connections/status")
+    public ResponseEntity<List<ConnectionStatusResponse>> getStatus(HttpServletRequest httpReq) {
+        HttpSession session = httpReq.getSession(false);
+        if (session == null) {
+            return ResponseEntity.ok(List.of());
+        }
+
+        List<ConnectionStatusResponse> statuses = new ArrayList<>();
+        Collections.list(session.getAttributeNames()).stream()
+                .filter(k -> k.endsWith(SUFFIX))
+                .forEach(k -> {
+                    String serviceType = k.replace(SUFFIX, "");
+                    Long id = (Long) session.getAttribute(k);
+                    ConnectionStatusResponse status = connectionService.getConnectionStatus(serviceType, id);
+                    if (status != null) statuses.add(status);
+                });
+
+        return ResponseEntity.ok(statuses);
+    }
+
+    @DeleteMapping("/connections/{serviceType}")
+    public ResponseEntity<Void> logout(
+            @PathVariable("serviceType") String serviceType,
+            HttpServletRequest httpReq) {
+
+        HttpSession session = httpReq.getSession(false);
+        if (session != null) {
+            session.removeAttribute(serviceType + SUFFIX);
+            boolean hasMore = Collections.list(session.getAttributeNames()).stream()
+                    .anyMatch(k -> k.endsWith(SUFFIX));
+            if (!hasMore) {
+                session.invalidate();
+            }
+        }
+
+        return ResponseEntity.noContent().build();
     }
 }

backend/src/main/java/com/vaessl/app/connection/ConnectionProvider.java

@@ -1,5 +1,7 @@
 package com.vaessl.app.connection;
 
+import java.time.Instant;
+
 import com.vaessl.app.dto.ConnectionRequest;
 import com.vaessl.app.dto.ConnectionResponse;
 
@@ -16,4 +18,8 @@ public interface ConnectionProvider {
     ConnectionEntity connectionToEntity(ConnectionRequest request, ConnectionResponse response);
 
     void updateToRepository(ConnectionEntity existing, ConnectionResponse response);
+
+    default Instant getTokenExpiry(ConnectionEntity entity) {
+        return null;
+    }
 }

backend/src/main/java/com/vaessl/app/connection/ConnectionService.java

@@ -1,5 +1,6 @@
 package com.vaessl.app.connection;
 
+import java.time.Instant;
 import java.util.List;
 import java.util.Map;
 import java.util.stream.Collectors;
@@ -8,6 +9,8 @@ import org.springframework.stereotype.Service;
 
 import com.vaessl.app.dto.ConnectionRequest;
 import com.vaessl.app.dto.ConnectionResponse;
+import com.vaessl.app.dto.ConnectionStatusResponse;
+import com.vaessl.app.dto.LoginResult;
 import com.vaessl.app.exception.WrongServiceTypeException;
 
 @Service
@@ -23,7 +26,7 @@ public class ConnectionService {
         this.cRepository = cRepository;
     }
 
-    public ConnectionResponse login(ConnectionRequest request) {
+    public LoginResult login(ConnectionRequest request) {
 
         ConnectionProvider provider = providerRegistry.get(request.serviceType());
 
@@ -37,13 +40,27 @@ public class ConnectionService {
 
         ConnectionEntity existing = provider.findUniqueConnectionEntry(request);
 
+        ConnectionEntity saved;
         if (existing != null) {
             provider.updateToRepository(existing, response);
+            saved = existing;
         } else {
             ConnectionEntity newEntity = provider.connectionToEntity(request, response);
-            cRepository.save(newEntity);
+            saved = cRepository.save(newEntity);
         }
 
-        return response;
+        return new LoginResult(saved.getId(), response.expiresAt());
     }
-}
+
+    public ConnectionStatusResponse getConnectionStatus(String serviceType, Long connectionId) {
+        ConnectionEntity entity = cRepository.findById(connectionId).orElse(null);
+        if (entity == null) return null;
+
+        ConnectionProvider provider = providerRegistry.get(serviceType);
+        Instant expiresAt = (provider != null) ? provider.getTokenExpiry(entity) : null;
+        boolean connected = expiresAt == null || expiresAt.isAfter(Instant.now());
+
+        return new ConnectionStatusResponse(serviceType, entity.getAppUrl(),
+                entity.getUsername(), expiresAt, connected);
+    }
+}

backend/src/main/java/com/vaessl/app/connection/Endpoint.java

@@ -1,7 +1,9 @@
 package com.vaessl.app.connection;
 
 public enum Endpoint {
-    HOMEBOX_LOGIN("/api/v1/users/login"), LOGIN("/login");
+    HOMEBOX_LOGIN("/api/v1/users/login"),
+    LOGIN("/login"),
+    CONNECTION_STATUS("/connections/status");
 
     private final String value;
 

backend/src/main/java/com/vaessl/app/connection/HomeBoxConnectionProvider.java

@@ -97,6 +97,11 @@ public class HomeBoxConnectionProvider implements ConnectionProvider {
         }
     }
 
+    @Override
+    public Instant getTokenExpiry(ConnectionEntity entity) {
+        return (entity instanceof HomeboxEntity he) ? he.getExpiresAt() : null;
+    }
+
     private record HomeboxLoginResponse(String token, String attachmentToken, Instant expiresAt) {
     }
 

backend/src/main/java/com/vaessl/app/dto/AuthResponse.java

@@ -0,0 +1,5 @@
+package com.vaessl.app.dto;
+
+import java.time.Instant;
+
+public record AuthResponse(String serviceType, Instant expiresAt) {}

backend/src/main/java/com/vaessl/app/dto/ConnectionStatusResponse.java

@@ -0,0 +1,10 @@
+package com.vaessl.app.dto;
+
+import java.time.Instant;
+
+public record ConnectionStatusResponse(
+        String serviceType,
+        String appUrl,
+        String username,
+        Instant expiresAt,
+        boolean connected) {}

backend/src/main/java/com/vaessl/app/dto/LoginResult.java

@@ -0,0 +1,5 @@
+package com.vaessl.app.dto;
+
+import java.time.Instant;
+
+public record LoginResult(Long connectionId, Instant expiresAt) {}

backend/src/main/resources/META-INF/additional-spring-configuration-metadata.json

@@ -0,0 +1,12 @@
+{"properties": [
+  {
+    "name": "spring.session.store-type",
+    "type": "java.lang.String",
+    "description": "A description for 'spring.session.store-type'"
+  },
+  {
+    "name": "vaessl.frontend-url",
+    "type": "java.lang.String",
+    "description": "A description for 'vaessl.frontend-url'"
+  }
+]}

backend/src/main/resources/application.yaml

@@ -22,6 +22,12 @@ spring:
       chat:
         options:
           model: gpt-4o-mini
+  session:
+    store-type: jdbc
+    jdbc:
+      initialize-schema: always
 server:
   servlet:
     context-path: /api
+vaessl:
+  frontend-url: ${FRONTEND_URL:http://192.168.1.208:5173/}

backend/src/test/java/com/vaessl/app/connection/ConnectionControllerTest.java

@@ -0,0 +1,157 @@
+package com.vaessl.app.connection;
+
+import static com.vaessl.app.connection.Endpoint.*;
+import static com.vaessl.app.connection.ServiceType.*;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.*;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;
+
+import com.github.tomakehurst.wiremock.client.WireMock;
+import com.github.tomakehurst.wiremock.junit5.WireMockRuntimeInfo;
+import com.github.tomakehurst.wiremock.junit5.WireMockTest;
+
+import jakarta.servlet.http.Cookie;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.webmvc.test.autoconfigure.AutoConfigureMockMvc;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MockMvc;
+import org.springframework.test.web.servlet.MvcResult;
+
+@SpringBootTest
+@AutoConfigureMockMvc
+@WireMockTest
+class ConnectionControllerTest {
+
+    @Autowired
+    MockMvc mockMvc;
+
+    private static final String TEST_USER = "admin";
+    private static final String TEST_PASS = "pw";
+    private static final String LOGIN_PATH = LOGIN.getValue();
+    private static final String STATUS_PATH = CONNECTION_STATUS.getValue();
+    private static final String LOGOUT_PATH = "/connections/HOMEBOX";
+
+    private static final String VALID_HOMEBOX_RESPONSE = """
+            {
+                "token": "fake-jwt-token",
+                "attachmentToken": "fake-attach",
+                "expiresAt": "2099-01-01T00:00:00Z"
+            }
+            """;
+
+    private static final String EXPIRED_HOMEBOX_RESPONSE = """
+            {
+                "token": "expired-token",
+                "attachmentToken": "fake-attach",
+                "expiresAt": "2000-01-01T00:00:00Z"
+            }
+            """;
+
+    @Test
+    void shouldReturnEmptyListWhenNoActiveSession() throws Exception {
+        mockMvc.perform(get(STATUS_PATH))
+                .andExpect(status().isOk())
+                .andExpect(content().json("[]"));
+    }
+
+    @Test
+    void shouldReturnConnectionStatusWithConnectedTrueAfterLogin(WireMockRuntimeInfo wm) throws Exception {
+        WireMock.stubFor(WireMock.post(HOMEBOX_LOGIN.getValue()).willReturn(WireMock.okJson(VALID_HOMEBOX_RESPONSE)));
+
+        MvcResult loginResult = mockMvc.perform(post(LOGIN_PATH)
+                .contentType(MediaType.APPLICATION_JSON)
+                .content(connectionRequestBody(wm)))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        Cookie sessionCookie = loginResult.getResponse().getCookie("SESSION");
+
+        mockMvc.perform(get(STATUS_PATH).cookie(sessionCookie))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.length()").value(1))
+                .andExpect(jsonPath("$[0].serviceType").value(HOMEBOX.getValue()))
+                .andExpect(jsonPath("$[0].username").value(TEST_USER))
+                .andExpect(jsonPath("$[0].appUrl").value(wm.getHttpBaseUrl()))
+                .andExpect(jsonPath("$[0].connected").value(true));
+    }
+
+    @Test
+    void shouldReturnConnectedFalseWhenStoredTokenIsExpired(WireMockRuntimeInfo wm) throws Exception {
+        WireMock.stubFor(WireMock.post(HOMEBOX_LOGIN.getValue()).willReturn(WireMock.okJson(EXPIRED_HOMEBOX_RESPONSE)));
+
+        MvcResult loginResult = mockMvc.perform(post(LOGIN_PATH)
+                .contentType(MediaType.APPLICATION_JSON)
+                .content(connectionRequestBody(wm)))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        Cookie sessionCookie = loginResult.getResponse().getCookie("SESSION");
+
+        mockMvc.perform(get(STATUS_PATH).cookie(sessionCookie))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].serviceType").value(HOMEBOX.getValue()))
+                .andExpect(jsonPath("$[0].connected").value(false))
+                .andExpect(jsonPath("$[0].expiresAt").value("2000-01-01T00:00:00Z"));
+    }
+
+    @Test
+    void shouldReturn204NoContentOnLogout(WireMockRuntimeInfo wm) throws Exception {
+        WireMock.stubFor(WireMock.post(HOMEBOX_LOGIN.getValue()).willReturn(WireMock.okJson(VALID_HOMEBOX_RESPONSE)));
+
+        MvcResult loginResult = mockMvc.perform(post(LOGIN_PATH)
+                .contentType(MediaType.APPLICATION_JSON)
+                .content(connectionRequestBody(wm)))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        Cookie sessionCookie = loginResult.getResponse().getCookie("SESSION");
+
+        mockMvc.perform(delete(LOGOUT_PATH).cookie(sessionCookie))
+                .andExpect(status().isNoContent());
+    }
+
+    @Test
+    void shouldReturnEmptyStatusListAfterLogout(WireMockRuntimeInfo wm) throws Exception {
+        WireMock.stubFor(WireMock.post(HOMEBOX_LOGIN.getValue()).willReturn(WireMock.okJson(VALID_HOMEBOX_RESPONSE)));
+
+        MvcResult loginResult = mockMvc.perform(post(LOGIN_PATH)
+                .contentType(MediaType.APPLICATION_JSON)
+                .content(connectionRequestBody(wm)))
+                .andExpect(status().isOk())
+                .andReturn();
+
+        Cookie sessionCookie = loginResult.getResponse().getCookie("SESSION");
+
+        // Verify connected before logout
+        mockMvc.perform(get(STATUS_PATH).cookie(sessionCookie))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.length()").value(1));
+
+        mockMvc.perform(delete(LOGOUT_PATH).cookie(sessionCookie))
+                .andExpect(status().isNoContent());
+
+        // A new request (no session cookie, as in a fresh browser) returns no connections
+        mockMvc.perform(get(STATUS_PATH))
+                .andExpect(status().isOk())
+                .andExpect(content().json("[]"));
+    }
+
+    @Test
+    void shouldReturn204WhenLogoutCalledWithNoActiveSession() throws Exception {
+        mockMvc.perform(delete(LOGOUT_PATH))
+                .andExpect(status().isNoContent());
+    }
+
+    private String connectionRequestBody(WireMockRuntimeInfo wm) {
+        return """
+                {
+                    "appUrl": "%s",
+                    "serviceType": "HOMEBOX",
+                    "username": "%s",
+                    "password": "%s"
+                }
+                """.formatted(wm.getHttpBaseUrl(), TEST_USER, TEST_PASS);
+    }
+}

backend/src/test/java/com/vaessl/app/connection/HomeboxIntegrationTest.java

@@ -8,6 +8,7 @@ import org.springframework.boot.test.context.SpringBootTest;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 
+import com.github.tomakehurst.wiremock.http.Fault;
 import com.github.tomakehurst.wiremock.junit5.WireMockRuntimeInfo;
 import com.github.tomakehurst.wiremock.junit5.WireMockTest;
 
@@ -41,18 +42,16 @@ class HomeboxIntegrationTest {
             }
                 """;
 
-    private static final String MOCK_URL = "http://localhost:1234";
     private static final String TEST_USER = "admin";
     private static final String TEST_PASS = "pw";
 
     /**
      * Returns Token and status code OK when login is successful.
      * 
-     * @param wm
+     * @param wm the WiremockRuntimeInfo object
-     *               the WiremockRuntimeInfo object
      */
     @Test
-    void shouldReturnTokenAndStatusOkWhenHomeboxCredentialsAreValid(WireMockRuntimeInfo wm) {
+    void shouldReturnStatusOkWhenHomeboxCredentialsAreValid(WireMockRuntimeInfo wm) {
 
         stubFor(post(HOMEBOX_LOGIN.getValue())
                 .willReturn(okJson(okJsonHomeboxResponse)));
@@ -62,11 +61,8 @@ class HomeboxIntegrationTest {
 
         DocumentContext documentContext = JsonPath.parse(response.getBody());
 
-        String token = documentContext.read("$.token");
+        String serviceType = documentContext.read("$.serviceType");
-        assertThat(token).isEqualTo("fake-jwt-token");
+        assertThat(serviceType).isEqualTo("HOMEBOX");
-
-        String attachmentToken = documentContext.read("$.extraResponseData.attachmentToken");
-        assertThat(attachmentToken).isEqualTo("fake-attach");
 
         String expiresAt = documentContext.read("$.expiresAt", String.class);
         assertThat(expiresAt).isEqualTo("2026-04-26T02:23:13Z");
@@ -76,8 +72,7 @@ class HomeboxIntegrationTest {
     /**
      * Tests the Unauthorized custom exception.
      * 
-     * @param wm
+     * @param wm the WiremockRuntimeInfo object
-     *               the WiremockRuntimeInfo object
      */
     @Test
     void shouldFailToConnectWhenHomeboxReturnsUnauthorized(WireMockRuntimeInfo wm) {
@@ -94,8 +89,7 @@ class HomeboxIntegrationTest {
     /**
      * Tests a server error from the external api.
      * 
-     * @param wm
+     * @param wm the WiremockRuntimeInfo object
-     *               the WiremockRuntimeInfo object
      */
     @Test
     void shouldFailToConnectWhenHomeboxReturnsServiceUnavailable(WireMockRuntimeInfo wm) {
@@ -113,14 +107,12 @@ class HomeboxIntegrationTest {
      * Checks when the service is unavailable or the app URL is wrong.
      */
     @Test
-    void shouldReturnServiceUnavailableWhenHomeboxUrlIsWrong() {
+    void shouldReturnServiceUnavailableWhenHomeboxUrlIsWrong(WireMockRuntimeInfo wm) {
 
-        ConnectionRequest badRequest = new ConnectionRequest(
+        stubFor(post(HOMEBOX_LOGIN.getValue())
-                MOCK_URL,
+                .willReturn(aResponse().withFault(Fault.CONNECTION_RESET_BY_PEER)));
-                HOMEBOX.getValue(),
-                TEST_USER, TEST_PASS,
-                false);
 
+        ConnectionRequest badRequest = connectionRequest(wm);
         ResponseEntity<String> response = restTemplate.postForEntity(LOGIN.getValue(), badRequest, String.class);
 
         assertThat(response.getStatusCode()).isEqualTo(HttpStatus.SERVICE_UNAVAILABLE);
@@ -146,9 +138,9 @@ class HomeboxIntegrationTest {
      * unsupported.
      */
     @Test
-    void shouldReturnWrongServiceTypeException() {
+    void shouldReturnWrongServiceTypeException(WireMockRuntimeInfo wm) {
         ConnectionRequest wrongServiceTypeReq = new ConnectionRequest(
-                MOCK_URL,
+                wm.getHttpBaseUrl(),
                 "wrong-service-type",
                 TEST_USER, TEST_PASS,
                 false);
@@ -164,8 +156,7 @@ class HomeboxIntegrationTest {
      * Tests the succesfull persistance of Homebox credential response to the
      * database.
      * 
-     * @param wm
+     * @param wm the WiremockRuntimeInfo object
-     *               the WiremockRuntimeInfo object
      */
     @Test
     void shouldSaveHomeboxConnectionResponseToDb(WireMockRuntimeInfo wm) {
@@ -176,26 +167,25 @@ class HomeboxIntegrationTest {
         ConnectionRequest request = connectionRequest(wm);
 
         ResponseEntity<String> response = restTemplate.postForEntity(LOGIN.getValue(), request, String.class);
-
+        assertThat(response.getStatusCode()).isEqualTo(HttpStatus.OK);
-        DocumentContext responseContext = JsonPath.parse(response.getBody());
 
         ConnectionEntity dbEntry = cRepository.findByAppUrlAndUsername(request.appUrl(), request.username());
 
         assertThat(dbEntry).isNotNull();
-
         assertThat(dbEntry.getAppUrl()).isEqualTo(request.appUrl());
         assertThat(dbEntry.getUsername()).isEqualTo(request.username());
 
         if (dbEntry instanceof HomeboxEntity hbE) {
-            assertThat(hbE.getToken()).isEqualTo(responseContext.read("$.token"));
+            assertThat(hbE.getToken()).isEqualTo("fake-jwt-token");
-            assertThat(hbE.getAttachmentToken()).isEqualTo(responseContext.read("$.extraResponseData.attachmentToken"));
+            assertThat(hbE.getAttachmentToken()).isEqualTo("fake-attach");
-            assertThat(hbE.getExpiresAt()).isEqualTo(responseContext.read("$.expiresAt"));
+            assertThat(hbE.getExpiresAt().toString()).hasToString("2026-04-26T02:23:13Z");
         }
     }
 
     @Test
-    void shouldReturnEmptyCredentialsExceptionWhenCredsAreMissing() {
+    void shouldReturnEmptyCredentialsExceptionWhenCredsAreMissing(WireMockRuntimeInfo wm) {
-        ConnectionRequest missingCredentials = new ConnectionRequest(MOCK_URL, HOMEBOX.getValue(), TEST_USER, null,
+        ConnectionRequest missingCredentials = new ConnectionRequest(wm.getHttpBaseUrl(), HOMEBOX.getValue(), TEST_USER,
+                null,
                 false);
 
         ResponseEntity<String> response = restTemplate.postForEntity(LOGIN.getValue(), missingCredentials,
@@ -206,11 +196,10 @@ class HomeboxIntegrationTest {
     }
 
     /**
-     * Creates a valid connection request with a mock Api throuh
+     * Creates a valid connection request with a mock Api through
      * WireMockRuntimeInfo.
      * 
-     * @param wm
+     * @param wm the WiremockRuntimeInfo object
-     *               the WiremockRuntimeInfo object
      * @return a mock api connection request.
      */
     private ConnectionRequest connectionRequest(WireMockRuntimeInfo wm) {

frontend/package-lock.json

@@ -25,6 +25,7 @@
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.4.0",
         "jsdom": "^29.0.1",
+        "sass": "^1.99.0",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.57.0",
         "vite": "^8.0.1",
@@ -840,6 +841,334 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.6",
+        "@parcel/watcher-darwin-arm64": "2.5.6",
+        "@parcel/watcher-darwin-x64": "2.5.6",
+        "@parcel/watcher-freebsd-x64": "2.5.6",
+        "@parcel/watcher-linux-arm-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm-musl": "2.5.6",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm64-musl": "2.5.6",
+        "@parcel/watcher-linux-x64-glibc": "2.5.6",
+        "@parcel/watcher-linux-x64-musl": "2.5.6",
+        "@parcel/watcher-win32-arm64": "2.5.6",
+        "@parcel/watcher-win32-ia32": "2.5.6",
+        "@parcel/watcher-win32-x64": "2.5.6"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -1956,6 +2285,22 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2559,6 +2904,13 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
+      "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3163,6 +3515,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.36",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz",
@@ -3412,6 +3772,20 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -3487,6 +3861,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/sass": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.99.0.tgz",
+      "integrity": "sha512-kgW13M54DUB7IsIRM5LvJkNlpH+WhMpooUcaWGFARkF1Tc82v9mIWkCbCYf+MBvpIUBSeSOTilpZjEPr2VYE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",

frontend/package.json

@@ -29,6 +29,7 @@
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
     "jsdom": "^29.0.1",
+    "sass": "^1.99.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.57.0",
     "vite": "^8.0.1",

frontend/src/App.css

@@ -1,184 +0,0 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}

frontend/src/App.tsx

@@ -1,120 +1,9 @@
-import { useState } from 'react'
+
-import reactLogo from './assets/react.svg'
+import { Dashboard } from './components/Dashboard'
-import viteLogo from './assets/vite.svg'
-import heroImg from './assets/hero.png'
-import './App.css'
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
+    <Dashboard/>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          <h1>Get started</h1>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
-          </p>
-        </div>
-        <button
-          className="counter"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          Count is {count}
-        </button>
-      </section>
-
-      <div className="ticks"></div>
-
-      <section id="next-steps">
-        <div id="docs">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#documentation-icon"></use>
-          </svg>
-          <h2>Documentation</h2>
-          <p>Your questions, answered</p>
-          <ul>
-            <li>
-              <a href="https://vite.dev/" target="_blank">
-                <img className="logo" src={viteLogo} alt="" />
-                Explore Vite
-              </a>
-            </li>
-            <li>
-              <a href="https://react.dev/" target="_blank">
-                <img className="button-icon" src={reactLogo} alt="" />
-                Learn more
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div id="social">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#social-icon"></use>
-          </svg>
-          <h2>Connect with us</h2>
-          <p>Join the Vite community</p>
-          <ul>
-            <li>
-              <a href="https://github.com/vitejs/vite" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#github-icon"></use>
-                </svg>
-                GitHub
-              </a>
-            </li>
-            <li>
-              <a href="https://chat.vite.dev/" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#discord-icon"></use>
-                </svg>
-                Discord
-              </a>
-            </li>
-            <li>
-              <a href="https://x.com/vite_js" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#x-icon"></use>
-                </svg>
-                X.com
-              </a>
-            </li>
-            <li>
-              <a href="https://bsky.app/profile/vite.dev" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#bluesky-icon"></use>
-                </svg>
-                Bluesky
-              </a>
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      <div className="ticks"></div>
-      <section id="spacer"></section>
-    </>
   )
 }
 

frontend/src/api/client.ts

@@ -0,0 +1,21 @@
+const BASE = import.meta.env.VITE_API_URL ?? '/api'
+
+export async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    ...init,
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json', ...init?.headers },
+  })
+  if (!res.ok) {
+    let message = `Request failed (${res.status})`
+    try {
+      const body = await res.json()
+      if (body?.detail) message = body.detail
+      else if (body?.title) message = body.title
+    } catch {
+      // ignore parse errors
+    }
+    throw new Error(message)
+  }
+  return res.status === 204 ? (undefined as T) : res.json()
+}

frontend/src/api/connections.ts

@@ -0,0 +1,11 @@
+import { apiFetch } from './client'
+import type { AuthResponse, ConnectionStatus, LoginRequest } from '../types/connection'
+
+export const login = (req: LoginRequest) =>
+  apiFetch<AuthResponse>('/login', { method: 'POST', body: JSON.stringify(req) })
+
+export const getStatuses = () =>
+  apiFetch<ConnectionStatus[]>('/connections/status')
+
+export const logout = (serviceType: string) =>
+  apiFetch<void>(`/connections/${serviceType}`, { method: 'DELETE' })

frontend/src/components/ConnectModal.scss

@@ -0,0 +1,113 @@
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  padding: 16px;
+}
+
+.modal {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 28px 32px;
+  width: 100%;
+  max-width: 420px;
+  box-shadow: var(--shadow);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+  }
+
+  &__title {
+    font-family: var(--heading);
+    font-size: 20px;
+    font-weight: 500;
+    color: var(--text-h);
+    margin: 0;
+  }
+
+  &__close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text);
+    font-size: 20px;
+    line-height: 1;
+    padding: 4px;
+    border-radius: 4px;
+    &:hover { color: var(--text-h); }
+    &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  &__label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-h);
+  }
+
+  &__input {
+    font-size: 15px;
+    padding: 9px 12px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--bg);
+    color: var(--text-h);
+    font-family: var(--sans);
+    transition: border-color 0.2s;
+    width: 100%;
+    box-sizing: border-box;
+
+    &:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px var(--accent-bg);
+    }
+  }
+
+  &__error {
+    font-size: 13px;
+    color: #ef4444;
+    padding: 8px 12px;
+    background: rgba(239, 68, 68, 0.08);
+    border-radius: 6px;
+    border: 1px solid rgba(239, 68, 68, 0.2);
+  }
+
+  &__submit {
+    margin-top: 4px;
+    padding: 10px 20px;
+    font-size: 15px;
+    font-weight: 500;
+    border-radius: 6px;
+    border: none;
+    background: var(--accent);
+    color: #fff;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    align-self: flex-end;
+    min-width: 100px;
+
+    &:hover:not(:disabled) { opacity: 0.85; }
+    &:disabled { opacity: 0.6; cursor: not-allowed; }
+    &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  }
+}

frontend/src/components/ConnectModal.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useRef, useState, type SyntheticEvent } from 'react'
+import { login } from '../api/connections'
+import type { LoginRequest } from '../types/connection'
+import './ConnectModal.scss'
+
+interface Props {
+  serviceType: string
+  label: string
+  onClose: () => void
+  onSuccess: () => void
+}
+
+export function ConnectModal({ serviceType, label, onClose, onSuccess }: Readonly<Props>) {
+  const [appUrl, setAppUrl] = useState('')
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const firstInputRef = useRef<HTMLInputElement>(null)
+
+  const dialogRef = useRef<HTMLDialogElement>(null)
+
+  useEffect(() => {
+    const dialog = dialogRef.current
+    if (!dialog) return
+
+    dialog.showModal()
+
+    const handleCancel = (e: Event) => {
+      e.preventDefault()
+      onClose()
+    }
+    dialog.addEventListener('cancel', handleCancel)
+    return () => dialog.removeEventListener('cancel', handleCancel)
+  }, [onClose])
+
+  const handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setError(null)
+    setLoading(true)
+    try {
+      const req: LoginRequest = { appUrl, serviceType, username, password, stayLoggedIn: true }
+      await login(req)
+      onSuccess()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <dialog className="modal" ref={dialogRef}>
+        <div className="modal__header">
+          <h2 className="modal__title" id="modal-title">Connect to {label}</h2>
+          <button className="modal__close" onClick={onClose} aria-label="Close">×</button>
+        </div>
+        <form className="modal__form" onSubmit={handleSubmit}>
+          <div className="modal__field">
+            <label className="modal__label" htmlFor="appUrl">App URL</label>
+            <input id="appUrl" ref={firstInputRef} className="modal__input" type="url"
+                   placeholder="https://homebox.example.com"
+                   value={appUrl} onChange={e => setAppUrl(e.target.value)} required />
+          </div>
+          <div className="modal__field">
+            <label className="modal__label" htmlFor="username">Username</label>
+            <input id="username" className="modal__input" type="text"
+                   autoComplete="username"
+                   value={username} onChange={e => setUsername(e.target.value)} required />
+          </div>
+          <div className="modal__field">
+            <label className="modal__label" htmlFor="password">Password</label>
+            <input id="password" className="modal__input" type="password"
+                   autoComplete="current-password"
+                   value={password} onChange={e => setPassword(e.target.value)} required />
+          </div>
+          {error && <p className="modal__error">{error}</p>}
+          <button className="modal__submit" type="submit" disabled={loading}>
+            {loading ? 'Connecting…' : 'Connect'}
+          </button>
+        </form>
+      </dialog>
+  )
+}

frontend/src/components/Dashboard.scss

@@ -0,0 +1,40 @@
+.dashboard {
+  padding: 40px 40px 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 1;
+
+  @media (max-width: 768px) {
+    padding: 24px 20px 40px;
+  }
+
+  &__header {
+    margin-bottom: 32px;
+  }
+
+  &__title {
+    font-size: 32px;
+    letter-spacing: -0.5px;
+    margin: 0 0 4px;
+
+    @media (max-width: 768px) {
+      font-size: 24px;
+    }
+  }
+
+  &__section-label {
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text);
+    margin: 0 0 12px;
+  }
+
+  &__cards {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+}

frontend/src/components/Dashboard.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react"
+import { getStatuses, logout } from "../api/connections"
+import type { ConnectionStatus } from "../types/connection"
+import { ServiceCard } from "./ServiceCard"
+import { ConnectModal } from "./ConnectModal"
+import "./Dashboard.scss"
+
+const SERVICES = [
+    { serviceType: 'HOMEBOX', label: 'Homebox', icon: '📦' },
+] as const
+
+export function Dashboard() {
+    const [statuses, setStatuses] = useState<ConnectionStatus[]>([])
+    const [openModal, setOpenModal] = useState<string | null>(null)
+
+    const refresh = () => {
+        getStatuses().then(setStatuses).catch(() => { })
+    }
+
+    useEffect(() => { refresh() }, [])
+
+    const handleDisconnect = (serviceType: string) => {
+        logout(serviceType).then(refresh).catch(() => { })
+    }
+
+    const activeModal = SERVICES.find(s => s.serviceType === openModal)
+
+    return (
+        <div className="dashboard">
+            <div className="dashboard__header">
+                <h1 className="dashboard__title">Vaessl Dashboard</h1>
+            </div>
+
+            <p className="dashboard__section-label">Services</p>
+            <div className="dashboard__cards">
+                {SERVICES.map(({ serviceType, label, icon }) => (
+                    <ServiceCard
+                        key={serviceType}
+                        serviceType={serviceType}
+                        label={label}
+                        icon={icon}
+                        status={statuses.find(s => s.serviceType === serviceType) ?? null}
+                        onConnect={() => setOpenModal(serviceType)}
+                        onDisconnect={() => handleDisconnect(serviceType)}
+                    />
+                ))}
+            </div>
+
+            {activeModal && (
+                <ConnectModal
+                    serviceType={activeModal.serviceType}
+                    label={activeModal.label}
+                    onClose={() => setOpenModal(null)}
+                    onSuccess={() => { setOpenModal(null); refresh() }}
+                />
+            )}
+        </div>
+    )
+}

frontend/src/components/ServiceCard.scss

@@ -0,0 +1,119 @@
+.service-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+
+  &__info {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    background: var(--accent-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+  }
+
+  &__name {
+    font-family: var(--heading);
+    font-size: 17px;
+    font-weight: 500;
+    color: var(--text-h);
+    margin: 0 0 10px;
+    text-align: left;
+
+  }
+
+  &__meta {
+    font-size: 13px;
+    color: var(--text);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 999px;
+
+    &::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+    }
+
+    &--connected {
+      color: #16a34a;
+
+      &::before {
+        background: #16a34a;
+      }
+    }
+
+    &--disconnected {
+      color: var(--text);
+
+      &::before {
+        background: var(--border);
+      }
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  &__btn {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 7px 16px;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: box-shadow 0.2s, opacity 0.2s;
+
+    &:hover {
+      opacity: 0.85;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    &--connect {
+      background: var(--accent);
+      color: #fff;
+    }
+
+    &--disconnect {
+      background: transparent;
+      color: var(--text);
+      border-color: var(--border);
+
+      &:hover {
+        border-color: #ef4444;
+        color: #ef4444;
+      }
+    }
+  }
+}

frontend/src/components/ServiceCard.tsx

@@ -0,0 +1,52 @@
+import type { ConnectionStatus } from '../types/connection'
+import './ServiceCard.scss'
+
+interface Props {
+  serviceType: string
+  label: string
+  icon: string
+  status: ConnectionStatus | null
+  onConnect: () => void
+  onDisconnect: () => void
+}
+
+export function ServiceCard({ serviceType: _serviceType, label, icon, status, onConnect, onDisconnect }: Readonly<Props>) {
+  const connected = status?.connected ?? false
+
+  const formatExpiry = (iso: string | null) => {
+    if (!iso) return null
+    const d = new Date(iso)
+    return d.toLocaleDateString(undefined, { dateStyle: 'medium' })
+  }
+
+  return (
+    <div className="service-card">
+      <div className="service-card__info">
+        <div className="service-card__icon">{icon}</div>
+        <div>
+          <p className="service-card__name">{label}</p>
+          <p className="service-card__meta">
+            <span className={`service-card__badge service-card__badge--${connected ? 'connected' : 'disconnected'}`}>
+              {connected ? 'Connected' : 'Not connected'}
+            </span>
+            {connected && status?.username && <span>{status.username}</span>}
+            {connected && status?.expiresAt && (
+              <span>· expires {formatExpiry(status.expiresAt)}</span>
+            )}
+          </p>
+        </div>
+      </div>
+      <div className="service-card__actions">
+        {connected ? (
+          <button className="service-card__btn service-card__btn--disconnect" onClick={onDisconnect}>
+            Disconnect
+          </button>
+        ) : (
+          <button className="service-card__btn service-card__btn--connect" onClick={onConnect}>
+            Connect
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/types/connection.ts

@@ -0,0 +1,20 @@
+export interface LoginRequest {
+  appUrl: string
+  serviceType: string
+  username: string
+  password: string
+  stayLoggedIn: boolean
+}
+
+export interface AuthResponse {
+  serviceType: string
+  expiresAt: string
+}
+
+export interface ConnectionStatus {
+  serviceType: string
+  appUrl: string
+  username: string
+  expiresAt: string | null
+  connected: boolean
+}

frontend/vite.config.ts

@@ -1,12 +1,21 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
-export default defineConfig({
+  const env = loadEnv(mode, process.cwd(), '');
-  plugins: [react()],
+
-  server: {
+  return {
-    host: '0.0.0.0',
+    plugins: [react()],
-    port: 5173,
+    server: {
-    allowedHosts: ['5173.code-server.kasuns.website'],
+      host: '0.0.0.0',
-  },
+      port: 5173,
+      allowedHosts: env.FRONTEND_URL ? [env.FRONTEND_URL] : [],
+      proxy: {
+        '/api': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+        },
+      },
+    },
+  }
 })