feat: Toggle "Admin anmelden" to "Admin abmelden" based on admin login status

- Implemented dynamic button label in SettingsModal to display "Admin anmelden" or "Admin abmelden" based on Redux state `isAdminLoggedIn`.
- Added `handleAdminLogout` function to clear token from localStorage and update Redux state when admin logs out.
- Refactored button click handling to toggle login/logout functionality seamlessly.
This commit is contained in:
ISA
2024-11-14 15:22:38 +01:00
parent 885cb19e9c
commit 140444d046

View File

@@ -29,6 +29,7 @@ function generateToken(user) {
} }
function SettingModal({ showModal, onClose }) { function SettingModal({ showModal, onClose }) {
const isAdminLoggedIn = useSelector((state) => state.auth.isAdminLoggedIn);
const dispatch = useDispatch(); const dispatch = useDispatch();
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
@@ -47,7 +48,6 @@ function SettingModal({ showModal, onClose }) {
const token = generateToken(user); const token = generateToken(user);
localStorage.setItem("token", token); localStorage.setItem("token", token);
dispatch(setAdminLoggedIn(true)); dispatch(setAdminLoggedIn(true));
setIsLoggedIn(true);
setShowLoginForm(false); setShowLoginForm(false);
onClose(); onClose();
} else { } else {
@@ -94,6 +94,10 @@ function SettingModal({ showModal, onClose }) {
ntpTimezone, ntpTimezone,
active, active,
}; };
const handleAdminLogout = () => {
localStorage.removeItem("token"); // Remove token on logout
dispatch(setAdminLoggedIn(false)); // Update Redux state
};
useEffect(() => { useEffect(() => {
if (showModal) { if (showModal) {
@@ -378,10 +382,14 @@ function SettingModal({ showModal, onClose }) {
Neustart CPL Neustart CPL
</button> </button>
<button <button
onClick={() => setShowLoginForm(true)} onClick={() => {
isAdminLoggedIn
? handleAdminLogout()
: setShowLoginForm(true);
}}
className="bg-littwin-blue text-white px-4 py-2 rounded" className="bg-littwin-blue text-white px-4 py-2 rounded"
> >
Admin anmelden {isAdminLoggedIn ? "Admin abmelden" : "Admin anmelden"}
</button> </button>
<button <button
className="bg-littwin-blue text-white px-4 py-2 rounded" className="bg-littwin-blue text-white px-4 py-2 rounded"