From 0e53ed60c4f5c862f6a22f027dfdeccfa4be3f08 Mon Sep 17 00:00:00 2001
From: "theis.gaedigk" <theis.gaedigk@icloud.com>
Date: Tue, 29 Jul 2025 22:28:25 +0200
Subject: [PATCH] New feature: You can now change the api key graphically with
 an changeAPI card.

---
 frontend/src/components/ChangeAPI.tsx | 34 +++++++++++++++++++++++++++
 frontend/src/components/Header.tsx    | 23 +++++++++---------
 frontend/src/utils/changeAPIcookie.ts |  7 ++++++
 3 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/ChangeAPI.tsx
 create mode 100644 frontend/src/utils/changeAPIcookie.ts

diff --git a/frontend/src/components/ChangeAPI.tsx b/frontend/src/components/ChangeAPI.tsx
new file mode 100644
index 0000000..2e9b977
--- /dev/null
+++ b/frontend/src/components/ChangeAPI.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { changeAPIcookie } from "../utils/changeAPIcookie";
+
+interface Props {
+  currentAPIKey: string;
+}
+
+function ChangeAPI({ currentAPIKey }: Props) {
+  const [apiKey, setApiKey] = useState(currentAPIKey);
+
+  return (
+    <div>
+      <h2>Change API Key</h2>
+      <p>Update your API key to fetch weather data.</p>
+      <form>
+        <label htmlFor="apiKey">API Key:</label>
+        <input
+          type="text"
+          id="apiKey"
+          name="apiKey"
+          placeholder="Enter your API key"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          required
+        />
+        <button type="button" onClick={() => changeAPIcookie(apiKey)}>
+          Update API Key
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default ChangeAPI;
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 00ef2e2..0d9a155 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,19 +1,20 @@
 import React from "react";
+import ChangeAPI from "./ChangeAPI";
+import { useState } from "react";
 import Cookies from "js-cookie";
 
 const Header: React.FC = () => {
-  const setApiKey = () => {
-    const apiKey = prompt("Enter your API key:");
-    if (apiKey) {
-      Cookies.set("apiKey", apiKey);
-    }
-    console.log(Cookies.get("apiKey"));
-  };
+  const [apiCard, setApiCard] = useState(false);
+  const apiKey = Cookies.get("apiKey") || "";
+
   return (
-    <header>
-      <h1>Weather App</h1>
-      <button onClick={() => setApiKey()}>Set API Key</button>
-    </header>
+    <>
+      <header>
+        <h1>Weather App</h1>
+        <button onClick={() => setApiCard(true)}>Set API Key</button>
+      </header>
+      {apiCard && <ChangeAPI currentAPIKey={apiKey} />}
+    </>
   );
 };
 
diff --git a/frontend/src/utils/changeAPIcookie.ts b/frontend/src/utils/changeAPIcookie.ts
new file mode 100644
index 0000000..6e682da
--- /dev/null
+++ b/frontend/src/utils/changeAPIcookie.ts
@@ -0,0 +1,7 @@
+import Cookies from "js-cookie";
+import { myToast } from "./toastify";
+
+export const changeAPIcookie = (newApiKey: string) => {
+  Cookies.set("apiKey", newApiKey);
+  myToast("API key updated successfully!", "success");
+};