Merge remote-tracking branch 'origin/gruppPP' into frontend

frontend/src/Components/ChangeUsername.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { api } from "../API/API";
+import InputField from "./InputField";
+import BackButton from "./BackButton";
+import Button from "./Button";
+
+
+function ChangeUsername(): JSX.Element {
+  const [newUsername, setNewUsername] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    setNewUsername(e.target.value);
+  };
+
+  const handleSubmit = async (): Promise<void> => {
+    try {
+      // Call the API function to update the username
+      await api.updateUsername(newUsername);
+      // Optionally, add a success message or redirect the user
+    } catch (error) {
+      console.error("Error updating username:", error);
+      // Optionally, handle the error
+    }
+  };
+
+  return (
+    <div>
+      <InputField
+        label="New Username"
+        type="text"
+        value={newUsername}
+        onChange={handleChange}
+      />
+    </div>
+  );
+}
+
+export default ChangeUsername;