From fd358d3c27ed097c6a1a5a3619c51fee93fa6a4a39de63ae88766f6668144820 Mon Sep 17 00:00:00 2001
From: RavenX8 <7156279+RavenX8@users.noreply.github.com>
Date: Tue, 17 Dec 2024 21:38:33 -0500
Subject: [PATCH] - update: docker-compose.yml - update: Register page to have
 better error feedback

---
 docker-compose.yml                      |  6 ++++--
 frontend/src/components/RegisterPage.js | 28 +++++++++++++++++++++----
 scripts/consul.json                     |  7 +++++++
 3 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 scripts/consul.json

diff --git a/docker-compose.yml b/docker-compose.yml
index b00ac81..56f1945 100755
--- a/docker-compose.yml
+++ b/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:
\ No newline at end of file
diff --git a/frontend/src/components/RegisterPage.js b/frontend/src/components/RegisterPage.js
index 6b8665f..0fd78a2 100644
--- a/frontend/src/components/RegisterPage.js
+++ b/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,
diff --git a/scripts/consul.json b/scripts/consul.json
new file mode 100644
index 0000000..69d659e
--- /dev/null
+++ b/scripts/consul.json
@@ -0,0 +1,7 @@
+{
+  "http_config": {
+    "response_headers": {
+      "Access-Control-Allow-Origin": "*"
+    }
+  }
+}