- update: docker-compose.yml

- update: Register page to have better error feedback

docker-compose.yml

@@ -6,11 +6,11 @@
     container_name: frontend
     ports:
       - "3000:80"
+    env_file:
+      - .env
     depends_on:
       - api-service
       - consul
-    environment:
-      - REACT_APP_API_URL=http://api-service:8080
 
   auth-service:
     build:
@@ -108,6 +108,8 @@
     command: agent -dev -client=0.0.0.0
     ports:
       - "8500:8500"
+#    volumes:
+#      - ./scripts/consul.json:/consul/config/cors.json:ro
 
 volumes:
   db_data:

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 {ServiceAddress, ServicePort} = await getServiceAddress("api-service");
-            const response = await axios.post(`http://${ServiceAddress}:${ServicePort}/api/register`, {
+            const response = await axios.post(apiUrl, {
                 username,
                 email,
                 password,

scripts/consul.json

@@ -0,0 +1,7 @@
+{
+  "http_config": {
+    "response_headers": {
+      "Access-Control-Allow-Origin": "*"
+    }
+  }
+}