- update: docker-compose.yml

- update: Register page to have better error feedback

frontend/src/components/RegisterPage.js

@@ -1,9 +1,10 @@
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import axios from "axios";
-import { useNavigate } from "react-router-dom";
+import {useNavigate} from "react-router-dom";
 import {getServiceAddress} from "../utils/consul";
 
 const RegisterPage = () => {
+    const [apiUrl, setApiUrl] = useState(null);
     const [username, setUsername] = useState("");
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
@@ -11,12 +12,31 @@ const RegisterPage = () => {
 
     const navigate = useNavigate();
 
+    useEffect(() => {
+        // Fetch the API address from Consul
+        const fetchApiUrl = async () => {
+            try {
+                const {ServiceAddress, ServicePort} = await getServiceAddress("api-service");
+                setApiUrl(`http://${ServiceAddress}:${ServicePort}/api/register`);
+            } catch (error) {
+                setErrorMessage("Failed to retrieve API information.");
+            }
+        };
+
+        fetchApiUrl();
+    }, []);
+
     const handleRegister = async (e) => {
         e.preventDefault();
 
+        if (!apiUrl) {
+            setErrorMessage("API URL not available");
+            return;
+        }
+
         try {
-            const { ServiceAddress, ServicePort } = await getServiceAddress("api-service");
-            const response = await axios.post(`http://${ServiceAddress}:${ServicePort}/api/register`, {
+            const {ServiceAddress, ServicePort} = await getServiceAddress("api-service");
+            const response = await axios.post(apiUrl, {
                 username,
                 email,
                 password,