From 7ee9711c5a14a73087b1dc2d075746119d7cb23c Mon Sep 17 00:00:00 2001
From: Niklas B <niklas.buechel@accso.de>
Date: Thu, 23 Jan 2025 13:14:51 +0100
Subject: [PATCH 1/2] Fix language dropdown to trigger page reload

Fixes #20

The solution was generated using github copilot workspace.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/accso/SecureCheckPlus/issues/20?shareId=XXXX-XXXX-XXXX-XXXX).
---
 frontend/src/components/DropdownMenu.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/DropdownMenu.tsx b/frontend/src/components/DropdownMenu.tsx
index 5e42c35..22baca8 100644
--- a/frontend/src/components/DropdownMenu.tsx
+++ b/frontend/src/components/DropdownMenu.tsx
@@ -11,6 +11,7 @@ const DropdownMenu: React.FunctionComponent<DropdownProps> = (props: DropdownPro
     let backgroundColor = props.background != null ? props.background : "transparent";
     const handleChange = (e: SelectChangeEvent) => {
         props.state.setValue(e.target.value);
+        window.location.reload(); // P93fb
     };
 
     return (<>
@@ -55,4 +56,4 @@ const dropdownStyle = (props: DropdownProps, backgroundColor: string) => {
     }
 }
 
-export default DropdownMenu
\ No newline at end of file
+export default DropdownMenu

From 70e79ac243a4f1e824d135a5a65d4c58fd8341ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20B=C3=BCchel?= <niklas.buechel@accso.de>
Date: Fri, 24 Jan 2025 16:59:01 +0100
Subject: [PATCH 2/2] fix: properly implement page reload on language change

---
 frontend/src/components/DropdownMenu.tsx        |  1 -
 frontend/src/components/ImageDropDown.tsx       | 17 +++++++----------
 frontend/src/components/LoginBox.tsx            |  5 +++--
 .../utilities/interfaces/ImageDropdownProps.tsx |  4 ++++
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/DropdownMenu.tsx b/frontend/src/components/DropdownMenu.tsx
index 22baca8..e848a0f 100644
--- a/frontend/src/components/DropdownMenu.tsx
+++ b/frontend/src/components/DropdownMenu.tsx
@@ -11,7 +11,6 @@ const DropdownMenu: React.FunctionComponent<DropdownProps> = (props: DropdownPro
     let backgroundColor = props.background != null ? props.background : "transparent";
     const handleChange = (e: SelectChangeEvent) => {
         props.state.setValue(e.target.value);
-        window.location.reload(); // P93fb
     };
 
     return (<>
diff --git a/frontend/src/components/ImageDropDown.tsx b/frontend/src/components/ImageDropDown.tsx
index e047d23..38336f0 100644
--- a/frontend/src/components/ImageDropDown.tsx
+++ b/frontend/src/components/ImageDropDown.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {colors, ListItemIcon, ListItemText, MenuItem, Select} from "@mui/material";
+import {ListItemText, MenuItem, Select} from "@mui/material";
 import KeyboardDoubleArrowDownRoundedIcon from "@mui/icons-material/KeyboardDoubleArrowDownRounded";
 import {ImageDropdownProps} from "../utilities/interfaces/ImageDropdownProps";
 
@@ -24,9 +24,11 @@ const ImageDropDown: React.FunctionComponent<ImageDropdownProps> = (props: Image
     currentValue = e.target.value;
     props.localStorageItemKey ? localStorage.setItem(props.localStorageItemKey, currentValue) : gotImageURLs = gotImageURLs /* Do nothing */;
     currentIndex = props.values.indexOf(currentValue);
-    setText(props.texts[currentIndex]);
+    const currText = props.texts[currentIndex]
+    setText(currText);
     props.imageURLs ? setImageURL(props.imageURLs[currentIndex]) : setImageURL("");
     props.colors ? setBackgroundColor(props.colors[currentIndex]) : setBackgroundColor(currentBackgroundColor);
+    props.onSelectionChange?.(currText, currentValue)
   }
 
   return (
@@ -34,15 +36,10 @@ const ImageDropDown: React.FunctionComponent<ImageDropdownProps> = (props: Image
           sx={imageDropDownStyle(currentBackgroundColor)}
           IconComponent={KeyboardDoubleArrowDownRoundedIcon}
           onChange={handleChange}
-          value={props.texts}
-          renderValue={() => (
-              <MenuItem sx={menuItemStyle} value={currentValue}>
-                <ListItemText sx={visibleElement(!showImagesOnly)} style={{textAlign:"left"}} primary={currentText}/>
-              </MenuItem>
-          )}
+          value={currentValue}
       >
-        {props.texts.map((value) => (
-            <MenuItem sx={menuItemStyle} value={props.values[props.texts.indexOf(value)]}>
+        {props.texts.map((value, index) => (
+            <MenuItem key={value} sx={menuItemStyle} value={props.values[index]}>
               <ListItemText sx={visibleElement(!showImagesOnly)} style={{textAlign:"left"}} primary={value}/>
             </MenuItem>
         ))}
diff --git a/frontend/src/components/LoginBox.tsx b/frontend/src/components/LoginBox.tsx
index 96ad4ff..06900ab 100644
--- a/frontend/src/components/LoginBox.tsx
+++ b/frontend/src/components/LoginBox.tsx
@@ -41,7 +41,7 @@ const LoginBox: React.FunctionComponent = () => {
                     username: username,
                     password: password,
                     keepMeLoggedIn: stayLoggedIn,
-                }).then(navigateAfterLogin).catch(() => {
+                }).then(reloadPage).catch(() => {
                     notification.error(localization.notificationMessage.incorrectLogin)
                 })
             } else {
@@ -50,7 +50,7 @@ const LoginBox: React.FunctionComponent = () => {
         }
     }
 
-    const navigateAfterLogin = () => {
+    const reloadPage = () => {
         window.location.reload();
     }
 
@@ -64,6 +64,7 @@ const LoginBox: React.FunctionComponent = () => {
                                imagesOnly={false}
                                localStorageItemKey={localStorageItemKeys.selectedLanguage}
                                defaultIndex={defaultLanguageIndex != -1 ? defaultLanguageIndex : 0}
+                               onSelectionChange={reloadPage}
                 />
         </Stack>
         <Stack sx={headlineContainer}>
diff --git a/frontend/src/utilities/interfaces/ImageDropdownProps.tsx b/frontend/src/utilities/interfaces/ImageDropdownProps.tsx
index 60de9cf..7c89dce 100644
--- a/frontend/src/utilities/interfaces/ImageDropdownProps.tsx
+++ b/frontend/src/utilities/interfaces/ImageDropdownProps.tsx
@@ -39,4 +39,8 @@ export interface ImageDropdownProps {
      * Show images only (no text)
      */
     imagesOnly?: boolean
+    /**
+     * Triggered whenever the selection changes
+     */
+    onSelectionChange?: (text: string, value: string) => void
 }
\ No newline at end of file