1  import { createEffect, createSignal, Show, type Component } from "solid-js";
  2  import { ArkoseBDA, ExpiredBDAError } from "../core/bda";
  3  
  4  const objectToString = (obj: object): string => {
  5    return JSON.stringify(obj, null, 2);
  6  };
  7  
  8  const sortObjectKeys = <T extends unknown>(obj: T): T => {
  9    if (Array.isArray(obj)) {
 10      return obj.map(sortObjectKeys) as T;
 11    } else if (typeof obj === "object" && obj !== null) {
 12      const sortedEntries = Object.entries(obj).sort(([keyA], [keyB]) =>
 13        keyA.localeCompare(keyB)
 14      );
 15      return Object.fromEntries(
 16        sortedEntries.map(([key, value]) => [key, sortObjectKeys(value)])
 17      ) as T;
 18    }
 19  
 20    return obj;
 21  };
 22  
 23  const MainView: Component = () => {
 24    const [code, setCode] = createSignal("");
 25    const [output, setOutput] = createSignal("");
 26    const [onlyShowEnhancedFingerprint, setOnlyShowEnhancedFingerprint] =
 27      createSignal(false);
 28    const [showAsKeyValuePairs, setShowAsKeyValuePairs] = createSignal(true);
 29    const [sortKeyValuePairs, setSortKeyValuePairs] = createSignal(true);
 30  
 31    createEffect(() => {
 32      try {
 33        const form = ArkoseBDA.retrieve(code());
 34        const arkose = new ArkoseBDA(form.get("userbrowser")!);
 35  
 36        const bda = ArkoseBDA.decode(form.get("bda")!);
 37        let entries = arkose.decrypt(bda);
 38  
 39        if (onlyShowEnhancedFingerprint()) {
 40          entries = ArkoseBDA.getEnhancedFingerprint(entries);
 41        }
 42  
 43        if (showAsKeyValuePairs()) {
 44          let properties = ArkoseBDA.toObjectProperties(entries);
 45  
 46          if (sortKeyValuePairs()) {
 47            properties = sortObjectKeys(properties);
 48          }
 49  
 50          setOutput(objectToString(properties));
 51        } else {
 52          setOutput(objectToString(entries));
 53        }
 54      } catch (error) {
 55        if (error instanceof ExpiredBDAError) {
 56          setOutput(error.message);
 57        } else {
 58          setOutput(
 59            "Invalid input, please input a raw HTTP message of only the form containing the bda and userbrowser fields."
 60          );
 61        }
 62      }
 63    });
 64  
 65    return (
 66      <div>
 67        <h1>Arkose BDA</h1>
 68        <p>A simplified reader for Arkose's BDA.</p>
 69        <label>
 70          <input
 71            type="checkbox"
 72            checked={onlyShowEnhancedFingerprint()}
 73            onChange={(e) =>
 74              setOnlyShowEnhancedFingerprint(e.currentTarget.checked)
 75            }
 76          />
 77          Only show enhanced fingerprint
 78        </label>
 79        <label>
 80          <input
 81            type="checkbox"
 82            checked={showAsKeyValuePairs()}
 83            onChange={(e) => setShowAsKeyValuePairs(e.currentTarget.checked)}
 84          />
 85          Show as key-value pairs
 86        </label>
 87        <Show when={showAsKeyValuePairs()}>
 88          <label>
 89            <input
 90              type="checkbox"
 91              checked={sortKeyValuePairs()}
 92              onChange={(e) => setSortKeyValuePairs(e.currentTarget.checked)}
 93            />
 94            Sort key-value pairs
 95          </label>
 96        </Show>
 97  
 98        <textarea
 99          class="w-full h-1/2"
100          placeholder="Enter your code here..."
101          onInput={(e) => setCode(e.currentTarget.value)}
102          value={code()}
103        ></textarea>
104        <textarea
105          class="w-full h-1/2"
106          placeholder="Enter your code here..."
107          value={output()}
108        ></textarea>
109      </div>
110    );
111  };
112  
113  export default MainView;