fixed bug: Error handling when submitting form with wrong api key

README.md

@@ -13,7 +13,6 @@ This is a simple weather application that allows users to view current weather d
 - Display weather data in a user-friendly format
 
 ## Installation
-
 ### Prerequisites
 
 To install and run this application, you need the following tools:
@@ -30,9 +29,7 @@ To install and run this application, you need the following tools:
 - Docker (for running the app in a container)
 
 ### 1st step - Get the source code
-
 **You can either clone the repository or download the latest release. Keep in mind that the cloned version may contain bugs.**
-
 1. Clone the repository:
    ```bash
    git clone https://git.the1s.de/theis.gaedigk/weather-app.git
@@ -95,4 +92,4 @@ To install and run this application, you need the following tools:
 
 ## Version
 
-**v1.0.1-local**
+**On this branch (main) you will find the latest version of the weather app, which includes several improvements and bug fixes. But it is not yet fully functional. The app is still in development, and some features may not work as expected.**

RELEASE_NOTES.md

@@ -0,0 +1,9 @@
+## Release Notes
+
+### New Features
+- Changed **web panel** backend, so you don't need to set the API key anymore. [Web Panel](https://weather.the1s.de)
+- You can now see the **last updated** time in the web panel.
+
+### Improvements
+- Changed Website Icons to lucide react icons
+- Changed overall handling of the panel

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "bootstrap-icons": "^1.13.1",
         "js-cookie": "^3.0.5",
         "jscookie": "^1.1.0",
+        "lucide-react": "^0.536.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-toastify": "^11.0.5",
@@ -3221,6 +3222,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.536.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.536.0.tgz",
+      "integrity": "sha512-2PgvNa9v+qz4Jt/ni8vPLt4jwoFybXHuubQT8fv4iCW5TjDxkbZjNZZHa485ad73NSEn/jdsEtU57eE1g+ma8A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",

frontend/package.json

@@ -14,6 +14,7 @@
     "bootstrap-icons": "^1.13.1",
     "js-cookie": "^3.0.5",
     "jscookie": "^1.1.0",
+    "lucide-react": "^0.536.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-toastify": "^11.0.5",

frontend/src/components/ChangeAPI.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import React from "react";
 import { changeAPIcookie } from "../utils/changeAPIcookie";
+import { KeyRound } from "lucide-react";
 
 interface Props {
   currentAPIKey: string;
@@ -38,20 +39,7 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
           API Key:
         </label>
         <div className="flex items-center gap-2 w-full">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={2}
-            stroke="currentColor"
-            className="w-7 h-7 flex-shrink-0"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
-            />
-          </svg>
+          <KeyRound size={32} />
           <input
             type="text"
             id="apiKey"
@@ -65,7 +53,7 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
         </div>
         <button
           type="submit"
-          className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
+          className="cursor-pointer bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
           onClick={handleUpdate}
         >
           Update API Key

frontend/src/components/ChangePreferences.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import { myToast } from "../utils/toastify";
+import { Settings2, SunMoon, Thermometer } from "lucide-react";
 
 const getInitialTheme = () => localStorage.getItem("theme") || "light";
-const getInitialUnit = () => localStorage.getItem("unit") || "celsius";
+const getInitialUnit = () => localStorage.getItem("unit") || "metric";
 
 interface Props {
   onClose: () => void;
@@ -35,43 +36,18 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
   return (
     <div className="w-full max-w-md mx-auto bg-white rounded-2xl shadow-2xl border border-blue-200 p-8">
       <h2 className="text-3xl font-extrabold mb-6 text-blue-700 flex items-center gap-2">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={2}
-          stroke="currentColor"
-          className="w-7 h-7 text-blue-500"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
-          />
-        </svg>
+        <Settings2 />
         Preferences
       </h2>
       <form onSubmit={handleSubmit} className="space-y-6">
         {/* Unit */}
         <div>
           <label className="block text-sm font-semibold text-gray-700 mb-2 items-center gap-2">
-            <svg
-              className="w-5 h-5 text-blue-400"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M8 12h8m-4-4v8"
-              />
-            </svg>
+            <Thermometer />
             Temperature Unit
           </label>
           <select
-            className="w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
+            className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
             value={unit}
             onChange={(e) => setUnit(e.target.value)}
           >
@@ -83,24 +59,11 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
         {/* Theme */}
         <div>
           <label className="block text-sm font-semibold text-gray-700 mb-2 items-center gap-2">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={2}
-              stroke="currentColor"
-              className="w-5 h-5 text-blue-400"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M3 8.25V18a2.25 2.25 0 0 0 2.25 2.25h13.5A2.25 2.25 0 0 0 21 18V8.25m-18 0V6a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6ZM7.5 6h.008v.008H7.5V6Zm2.25 0h.008v.008H9.75V6Z"
-              />
-            </svg>
+            <SunMoon />
             Theme
           </label>
           <select
-            className="w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
+            className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
             value={theme}
             onChange={(e) => setTheme(e.target.value)}
           >
@@ -114,7 +77,7 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
         {/* Submit */}
         <button
           type="submit"
-          className="w-full bg-gradient-to-r from-blue-600 to-blue-400 text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400"
+          className="cursor-pointer w-full bg-gradient-to-r from-blue-600 to-blue-400 text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400"
         >
           Save Preferences
         </button>

frontend/src/components/Header.tsx

@@ -4,6 +4,7 @@ import ChangePreferences from "./ChangePreferences";
 import { useState } from "react";
 import Cookies from "js-cookie";
 import logo from "../assets/cloud-sun-fill.png";
+import { Github, KeyRound, Settings2 } from "lucide-react";
 
 const Header: React.FC = () => {
   const [apiCard, setApiCard] = useState(false);
@@ -20,58 +21,27 @@ const Header: React.FC = () => {
             className="w-10 h-10 drop-shadow-lg"
           />
           <h1 className="text-4xl font-extrabold tracking-wide drop-shadow-lg">
-            Weather App
+            Weather App - <strong>Local hosted</strong>
           </h1>
         </div>
         <div className="flex items-center gap-4">
           {" "}
           {/* Added container for buttons */}
           <button
-            className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
+            className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
             onClick={() => setApiCard(true)}
           >
             <span className="flex items-center gap-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className="size-6"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
-                />
-              </svg>
+              <KeyRound />
               Set API Key
             </span>
           </button>
           <button
-            className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
+            className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
             onClick={() => setPreferencesCard(true)}
           >
             <span className="flex items-center gap-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className="size-6"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z"
-                />
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-                />
-              </svg>
+              <Settings2 />
               Preferences
             </span>
           </button>
@@ -80,23 +50,9 @@ const Header: React.FC = () => {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <button className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2">
+            <button className="cursor-help bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2">
               <span className="flex items-center gap-2">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={1.5}
-                  stroke="currentColor"
-                  className="size-6"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
-                  />
-                </svg>
-                Docs
+                <Github /> Docs
               </span>
             </button>
           </a>

frontend/src/components/WeatherData.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import sunriseIcon from "../assets/icons/sunrise-fill.svg";
-import sunsetIcon from "../assets/icons/sunset-fill.svg";
+import { Sunrise, Sunset } from "lucide-react";
+import { getDateTime } from "../utils/utils";
 
 const WeatherData: React.FC = () => {
   const weatherRaw = localStorage.getItem("weather");
@@ -53,7 +53,7 @@ const WeatherData: React.FC = () => {
         )}
         <div className="flex flex-col items-center gap-4 mb-2">
           <div className="flex items-center gap-3">
-            <img src={sunriseIcon} alt="Sunrise Icon" className="w-7 h-7" />
+            <Sunrise />
             <span className="text-base text-blue-700 font-semibold">
               Sunrise:{" "}
               {weatherData?.sys?.sunrise
@@ -65,7 +65,7 @@ const WeatherData: React.FC = () => {
             </span>
           </div>
           <div className="flex items-center gap-3">
-            <img src={sunsetIcon} alt="Sunset Icon" className="w-7 h-7" />
+            <Sunset />
             <span className="text-base text-blue-700 font-semibold">
               Sunset:{" "}
               {weatherData?.sys?.sunset
@@ -76,6 +76,11 @@ const WeatherData: React.FC = () => {
                 : "--:--"}
             </span>
           </div>
+          <div className="flex items-center gap-3">
+            <span className="text-base text-gray-600 italic font-semibold">
+              Last updated: {getDateTime()}
+            </span>
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/WeatherForm.tsx

@@ -5,10 +5,10 @@ import Cookies from "js-cookie";
 import { toast } from "react-toastify";
 import WeatherData from "./WeatherData";
 import { useEffect } from "react";
+import { X } from "lucide-react";
 
 const WeatherCard: React.FC = () => {
   const [city, setCity] = useState("");
-  const [loading, setLoading] = useState(false);
   const [weatherData, setWeatherData] = useState(false);
   const getAPIKey = () => Cookies.get("apiKey") || "";
   const getUnit = () => localStorage.getItem("unit") || "metric";
@@ -19,13 +19,10 @@ const WeatherCard: React.FC = () => {
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    setLoading(true);
     toast
       .promise(fetchWeather(city, getAPIKey(), getUnit()), {
         pending: "Fetching weather data...",
         success: "Weather data loaded successfully!",
-        error:
-          "Failed to load weather data. Please check your entered city name. (Error: x4040)",
       })
       .then(() => {
         if (localStorage.getItem("weather")) {
@@ -33,7 +30,6 @@ const WeatherCard: React.FC = () => {
         } else {
           setWeatherData(false);
         }
-        setLoading(false);
       });
   };
 
@@ -54,6 +50,9 @@ const WeatherCard: React.FC = () => {
       <p className="mb-2 text-gray-600">
         Current weather will be displayed here.
       </p>
+      <p className="mb-2 text-gray-600">
+        <strong>Make sure to set your API key in the header section.</strong>
+      </p>
       <form onSubmit={handleSubmit} className="flex flex-col gap-4 mt-4">
         <label htmlFor="city" className="font-medium text-gray-700">
           Enter City:
@@ -71,7 +70,7 @@ const WeatherCard: React.FC = () => {
         <div className="flex items-center gap-2">
           <button
             type="submit"
-            className="flex-1 bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-4 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
+            className="cursor-pointer flex-1 bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-4 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
           >
             Get Weather
           </button>
@@ -82,23 +81,10 @@ const WeatherCard: React.FC = () => {
                 setWeatherData(false);
                 localStorage.removeItem("weather");
               }}
-              className="flex-shrink-0 bg-red-500 hover:bg-red-600 text-white rounded-xl p-3 shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400"
+              className="cursor-pointer flex-shrink-0 bg-red-500 hover:bg-red-600 text-white rounded-xl p-3 shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400"
               aria-label="Close weather data"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className="w-5 h-5"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M6 18 18 6M6 6l12 12"
-                />
-              </svg>
+              <X />
             </button>
           )}
         </div>

frontend/src/utils/apiFunc.ts

@@ -1,4 +1,5 @@
 import { myToast } from "./toastify";
+import Cookies from "js-cookie";
 
 export const fetchWeather = async (
   city: string,
@@ -10,10 +11,14 @@ export const fetchWeather = async (
     `http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
   ).then((response) => {
     if (response.status === 401) {
+      if (Cookies.get("apiKey") === undefined || Cookies.get("apiKey") === "") {
+        myToast("You have to enter an API key!", "error");
+      } else {
         myToast(
           "You are not authorized to access this resource. Please check your API key. (Error: x4010)",
           "error"
         );
+      }
     } else if (response.ok) {
       return response.json();
     } else {

frontend/src/utils/utils.ts

@@ -0,0 +1,24 @@
+export const getDateTime = () => {
+  const now = new Date();
+  const day = now.getDate();
+  const month = now.toLocaleString("en-GB", { month: "long" });
+  const hours = now.getHours().toString().padStart(2, "0");
+  const minutes = now.getMinutes().toString().padStart(2, "0");
+
+  // Ordinal suffix
+  const getOrdinal = (n: number) => {
+    if (n > 3 && n < 21) return "th";
+    switch (n % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
+    }
+  };
+
+  return `${day}${getOrdinal(day)} ${month}, ${hours}:${minutes}`;
+};

frontend/vite.config.ts

@@ -1,12 +1,17 @@
 import { defineConfig } from "vite";
 import tailwindcss from "@tailwindcss/vite";
+
 export default defineConfig({
   plugins: [tailwindcss()],
   server: {
     host: "0.0.0.0",
+    allowedHosts: ["weather.the1s.de"],
     port: 7002,
-    watch: {
-      usePolling: true,
+    watch: { usePolling: true },
+    hmr: {
+      host: "weather.the1s.de",
+      port: 7002,
+      protocol: "wss",
     },
   },
 });