Show error if server returns an error

src/App.tsx

@@ -9,6 +9,7 @@ function App() {
   const [rating, setNewRating] = useState<number | null>(0);
   const [showAlert, changeAlert] = useState(false);
   const [alertText, changeAlertText] = useState("");
+  const [secure, setSecure] = useState(false);
 
   const [showInfo, changeInfo] = useState(false);
   const [infoText, changeInfoText] = useState("");
@@ -47,7 +48,7 @@ function App() {
   };
 
   const showThenHide = async () => {
-    await fetch(endpoint ? `${endpoint}/post` : "http://localhost:8080/post", {
+    await fetch(endpoint ? `${secure ? "https" : "http"}://${endpoint}/post` : "http://localhost:8080/post", {
       method: "POST",
       body: JSON.stringify({
         rating: rating,
@@ -59,17 +60,22 @@ function App() {
       .then(async (response) => {
         const result = await response.json();
 
-        changeInfoText(
-          result.error
-            ? `${result.error.type}: ${result.error.message}`
-            : `Success: ${result.message}`,
-        );
+        if (result.error) {
+          changeAlertText(`${result.error.type}: ${result.error.message}`);
+          changeAlert(true);
+          
+          setTimeout(() => {
+            changeAlert(false);
+          }, 2000);
+        } else {
+          changeInfoText(`Success: ${result.message}`);
+          changeInfo(true);
 
-        changeInfo(true);
 
-        setTimeout(() => {
-          changeInfo(false);
-        }, 2000);
+          setTimeout(() => {
+            changeInfo(false);
+          }, 2000);
+        } 
       })
       .catch((err) => {
         changeAlertText(err.toString());
@@ -103,7 +109,7 @@ function App() {
   return (
     <>
       <div id="settings">
-        <EndpointDialog endpoint={[endpoint, setEndpoint]} />
+        <EndpointDialog endpoint={[endpoint, setEndpoint]} secure={[secure, setSecure]}/>
       </div>
 
       <div id="app">