Merge branch 'development' into debian12fullstack

2025-08-03 17:27:10 +02:00
parent 16ea1aa4aa 784822fa9a
commit b6b6146ad0
8 changed files with 35 additions and 128 deletions
--- a/frontend/package-lock.json
+++ b/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",
--- a/frontend/package.json
+++ b/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",
--- a/frontend/src/components/ChangeAPI.tsx
+++ b/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"
--- a/frontend/src/components/ChangePreferences.tsx
+++ b/frontend/src/components/ChangePreferences.tsx
@@ -1,5 +1,6 @@
 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") || "metric";
@@ -35,39 +36,14 @@ 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
@@ -83,20 +59,7 @@ 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
--- a/frontend/src/components/Header.tsx
+++ b/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);
@@ -31,20 +32,7 @@ const Header: React.FC = () => {
            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>
@@ -53,25 +41,7 @@ const Header: React.FC = () => {
            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>
@@ -82,21 +52,7 @@ const Header: React.FC = () => {
          >
            <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">
              <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>
--- a/frontend/src/components/WeatherData.tsx
+++ b/frontend/src/components/WeatherData.tsx
@@ -1,6 +1,5 @@
 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";

 const WeatherData: React.FC = () => {
  const weatherRaw = localStorage.getItem("weather");
@@ -53,7 +52,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 +64,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
--- a/frontend/src/components/WeatherForm.tsx
+++ b/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,7 +19,6 @@ 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...",
@@ -33,7 +32,6 @@ const WeatherCard: React.FC = () => {
        } else {
          setWeatherData(false);
        }
-        setLoading(false);
      });
  };

@@ -85,20 +83,7 @@ const WeatherCard: React.FC = () => {
              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"
              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>
--- a/frontend/src/utils/apiFunc.ts
+++ b/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 (
    `https://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
  ).then((response) => {
    if (response.status === 401) {
-      myToast(
-        "You are not authorized to access this resource. Please check your API key. (Error: x4010)",
-        "error"
-      );
+      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 {