implement po_token extractor args

frontend/src/api/actions/deletePoToken.ts

@@ -0,0 +1,9 @@
+import APIClient from '../../functions/APIClient';
+
+const deletePoToken = async () => {
+  return APIClient('/api/appsettings/potoken/', {
+    method: 'DELETE',
+  });
+};
+
+export default deletePoToken;

frontend/src/api/actions/updatePoToken.ts

@@ -0,0 +1,10 @@
+import APIClient from '../../functions/APIClient';
+
+const updatePoToken = async (potoken: string) => {
+  return APIClient('/api/appsettings/potoken/', {
+    method: 'POST',
+    body: { potoken },
+  });
+};
+
+export default updatePoToken;

frontend/src/api/loader/loadAppsettingsConfig.ts

@@ -21,6 +21,7 @@ export type AppSettingsConfigType = {
     comment_max: string | null;
     comment_sort: string;
     cookie_import: boolean;
+    potoken: boolean;
     throttledratelimit: number | null;
     extractor_lang: string | null;
     integrate_ryd: boolean;

frontend/src/pages/SettingsApplication.tsx

@@ -17,6 +17,8 @@ import updateCookie from '../api/actions/updateCookie';
 import loadCookie, { CookieStateType } from '../api/loader/loadCookie';
 import deleteCookie from '../api/actions/deleteCookie';
 import validateCookie from '../api/actions/validateCookie';
+import deletePoToken from '../api/actions/deletePoToken';
+import updatePoToken from '../api/actions/updatePoToken';
 
 type SnapshotType = {
   id: string;
@@ -81,9 +83,8 @@ const SettingsApplication = () => {
   // Cookie
   const [cookieFormData, setCookieFormData] = useState<string>('');
   const [showCookieForm, setShowCookieForm] = useState<boolean>(false);
-  // const [cookieImport, setCookieImport] = useState(false);
-  // const [validatingCookie, setValidatingCookie] = useState(false);
-  // const [cookieResponse, setCookieResponse] = useState<ValidatedCookieType>();
+  const [poTokenFormData, setPoTokenFormData] = useState<string>('web+');
+  const [showPoTokenForm, setShowPoTokenForm] = useState<boolean>(false);
 
   // Integrations
   const [showApiToken, setShowApiToken] = useState(false);
@@ -129,9 +130,6 @@ const SettingsApplication = () => {
     setCommentsMax(appSettingsConfig.downloads.comment_max);
     setCommentsSort(appSettingsConfig.downloads.comment_sort);
 
-    // Cookie
-    // setCookieImport(appSettingsConfig?.downloads.cookie_import);
-
     // Integrations
     setDownloadDislikes(appSettingsConfig.downloads.integrate_ryd);
     setEnableSponsorBlock(appSettingsConfig.downloads.integrate_sponsorblock);
@@ -172,6 +170,18 @@ const SettingsApplication = () => {
     setRefresh(true);
   };
 
+  const handlePoTokenRevoke = async () => {
+    await deletePoToken();
+    setRefresh(true);
+  };
+
+  const handlePoTokenUpdate = async () => {
+    await updatePoToken(poTokenFormData);
+    setPoTokenFormData('web+');
+    setShowPoTokenForm(false);
+    setRefresh(true);
+  };
+
   useEffect(() => {
     fetchData();
   }, []);
@@ -509,6 +519,55 @@ const SettingsApplication = () => {
                   )}
                 </div>
               </div>
+              <div className="settings-box-wrapper">
+                <div>
+                  <p>Add PO Token</p>
+                </div>
+                <div>
+                  {response?.appSettingsConfig?.downloads.potoken ? (
+                    <>
+                      <p>PO Token enabled.</p>
+                      <button onClick={handlePoTokenRevoke} className="danger-button">
+                        Revoke
+                      </button>
+                    </>
+                  ) : (
+                    <p>PO Token disabled</p>
+                  )}
+                  {showPoTokenForm ? (
+                    <div>
+                      <input
+                        type="text"
+                        value={poTokenFormData}
+                        onChange={async e => {
+                          setPoTokenFormData(e.target.value);
+                        }}
+                      />
+                      {poTokenFormData !== 'web+' && (
+                        <button onClick={handlePoTokenUpdate}>Update</button>
+                      )}
+                      <button
+                        onClick={() => {
+                          setShowPoTokenForm(false);
+                          setPoTokenFormData('web+');
+                        }}
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  ) : (
+                    <div>
+                      <button
+                        onClick={async () => {
+                          setShowPoTokenForm(true);
+                        }}
+                      >
+                        Update PO Token
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
             </div>
             <div className="info-box-item">
               <h2 id="sntegrations">Integrations</h2>