Added April Fools Mode toggle

Website/modules/Settings.tsx

@@ -1,4 +1,4 @@
-import React, {KeyboardEventHandler, MouseEventHandler, useEffect, useState} from 'react';
+import React, {ChangeEventHandler, KeyboardEventHandler, MouseEventHandler, useEffect, useState} from 'react';
 import IFrontendSettings from "./interfaces/IFrontendSettings";
 import '../styles/settings.css';
 import IBackendSettings from "./interfaces/IBackendSettings";
@@ -7,6 +7,8 @@ import LibraryConnector, {Kavita, Komga} from "./LibraryConnector";
 import NotificationConnector, {Gotify, Lunasea, Ntfy} from "./NotificationConnector";
 import ILibraryConnector from "./interfaces/ILibraryConnector";
 import INotificationConnector from "./interfaces/INotificationConnector";
+import Toggle from 'react-toggle';
+import '../styles/react-toggle.css';
 
 export default function Settings({backendConnected, apiUri, settings, changeSettings} : {backendConnected: boolean, apiUri: string, settings: IFrontendSettings, changeSettings: (settings: IFrontendSettings) => void}) {
     const [frontendSettings, setFrontendSettings] = useState<IFrontendSettings>(settings);
@@ -97,16 +99,27 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
                 .catch(() => alert("Failed to update Useragent."));
         }
     }
+
     const ResetUserAgent: MouseEventHandler<HTMLSpanElement>  = () => {
+        //console.info(`Resetting Useragent`);
         postData(`${apiUri}/v2/Settings/UserAgent`, {value: undefined})
             .then((json) => {
-                //console.info(`Successfully updated Useragent ${e.currentTarget.value}`);
+                //console.info(`Successfully reset Useragent`);
                 UpdateBackendSettings();
                 RefreshInputs();
             })
             .catch(() => alert("Failed to update Useragent."));
     }
 
+    const SetAprilFoolsMode : ChangeEventHandler<HTMLInputElement> = (e) => {
+        //console.info(`Updating AprilFoolsMode ${e.currentTarget.value}`);
+        postData(`${apiUri}/v2/Settings/AprilFoolsMode`, {value: e.currentTarget.value == "on"})
+            .then((json) => {
+                //console.info(`Successfully updated AprilFoolsMode ${e.currentTarget.value}`);
+                UpdateBackendSettings();
+            })
+    }
+
     function RefreshInputs(){
         alert("Saved.");
         setShowSettings(false);
@@ -132,6 +145,10 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
                                     <label htmlFor="userAgent">User Agent:</label>
                                     <input id="userAgent" type="text" placeholder={backendSettings != undefined ? backendSettings.userAgent : "UserAgent"} onKeyDown={SubmitUserAgent} />
                                     <span id="resetUserAgent" onClick={ResetUserAgent}>Reset</span>
+                                    <label htmlFor="aprilFoolsMode">April Fools Mode</label>
+                                    <Toggle id="aprilFoolsMode"
+                                            defaultChecked={backendSettings?.aprilFoolsMode ?? false}
+                                            onChange={SetAprilFoolsMode} />
                                 </div>
                                 <div className="section-item">
                                     <span className="settings-section-title">Rate Limits</span>

Website/styles/react-toggle.css

@@ -0,0 +1,143 @@
+/* https://raw.githubusercontent.com/instructure-react/react-toggle/master/style.css */
+
+.react-toggle {
+    touch-action: pan-x;
+
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: transparent;
+}
+
+.react-toggle-screenreader-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.react-toggle--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    -webkit-transition: opacity 0.25s;
+    transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+    width: 50px;
+    height: 24px;
+    padding: 0;
+    border-radius: 30px;
+    background-color: #4D4D4D;
+    -webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+    background-color: #000000;
+}
+
+.react-toggle--checked .react-toggle-track {
+    background-color: #19AB27;
+}
+
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+    background-color: #128D15;
+}
+
+.react-toggle-track-check {
+    position: absolute;
+    width: 14px;
+    height: 10px;
+    top: 0px;
+    bottom: 0px;
+    margin-top: auto;
+    margin-bottom: auto;
+    line-height: 0;
+    left: 8px;
+    opacity: 0;
+    -webkit-transition: opacity 0.25s ease;
+    -moz-transition: opacity 0.25s ease;
+    transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-check {
+    opacity: 1;
+    -webkit-transition: opacity 0.25s ease;
+    -moz-transition: opacity 0.25s ease;
+    transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 0px;
+    bottom: 0px;
+    margin-top: auto;
+    margin-bottom: auto;
+    line-height: 0;
+    right: 10px;
+    opacity: 1;
+    -webkit-transition: opacity 0.25s ease;
+    -moz-transition: opacity 0.25s ease;
+    transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-x {
+    opacity: 0;
+}
+
+.react-toggle-thumb {
+    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 22px;
+    height: 22px;
+    border: 1px solid #4D4D4D;
+    border-radius: 50%;
+    background-color: #FAFAFA;
+
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    -webkit-transition: all 0.25s ease;
+    -moz-transition: all 0.25s ease;
+    transition: all 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-thumb {
+    left: 27px;
+    border-color: #19AB27;
+}
+
+.react-toggle--focus .react-toggle-thumb {
+    -webkit-box-shadow: 0px 0px 3px 2px #0099E0;
+    -moz-box-shadow: 0px 0px 3px 2px #0099E0;
+    box-shadow: 0px 0px 2px 3px #0099E0;
+}
+
+.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
+    -webkit-box-shadow: 0px 0px 5px 5px #0099E0;
+    -moz-box-shadow: 0px 0px 5px 5px #0099E0;
+    box-shadow: 0px 0px 5px 5px #0099E0;
+}

package-lock.json

@@ -12,9 +12,11 @@
         "@mdi/js": "^7.4.47",
         "@mdi/react": "^1.6.1",
         "@types/react": "^18.2.0",
+        "@types/react-toggle": "^4.0.5",
         "react": "^18.3.1",
         "react-cookie": "^7.2.1",
         "react-dom": "^18.3.1",
+        "react-toggle": "^4.1.3",
         "typescript": "^5.6.3",
         "vite": "^5.4.9"
       }
@@ -762,6 +764,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-toggle": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-toggle/-/react-toggle-4.0.5.tgz",
+      "integrity": "sha512-MHHEDe7GnF/EhLtI5sT70Dqab8rwlgjRZtu/u6gmfbYd+HeYxWiUSRog16+1BCfkz7Wy2VU6+TPU2oCsDtqDzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.23.0.tgz",
@@ -893,6 +905,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -2575,6 +2594,21 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-toggle": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz",
+      "integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.5"
+      },
+      "peerDependencies": {
+        "prop-types": ">= 15.3.0 < 19",
+        "react": ">= 15.3.0 < 19",
+        "react-dom": ">= 15.3.0 < 19"
+      }
+    },
     "node_modules/refractor": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-4.8.1.tgz",

package.json

@@ -3,9 +3,11 @@
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@types/react": "^18.2.0",
+    "@types/react-toggle": "^4.0.5",
     "react": "^18.3.1",
     "react-cookie": "^7.2.1",
     "react-dom": "^18.3.1",
+    "react-toggle": "^4.1.3",
     "typescript": "^5.6.3",
     "vite": "^5.4.9"
   },