Use URL-safe base64 on the website onboarding form (#2620)

It turns out that base64 is [not
url-safe](https://base64.guru/standards/base64url). This PR uses the
`js-base64` library to encode/decode. This also has the added benefit of
being able to encode/decode unicode characters like emojis (the library
handles this for us).

For the deprecated old onboarding form, there are some dependency issues
when using the latest node version. URLs linking to it shouldn't have
any emojis in it anyway. We'll just leave that as-is.

<details>

```
ben@delta-ubuntu2 ~/Pr/infra-config/dir/u/onboarding-form benz/b64-url-safe *62 ❯ npm 
ci
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @rjsf/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/framer-motion
npm ERR!   framer-motion@"^3.10.6" from the root project
npm ERR!   peer framer-motion@"3.x || 4.x || 5.x || 6.x" from @chakra-ui/[email protected]
npm ERR!   node_modules/@chakra-ui/accordion
npm ERR!     @chakra-ui/accordion@"1.4.10" from @chakra-ui/[email protected]
npm ERR!     node_modules/@chakra-ui/react
npm ERR!       @chakra-ui/react@"^1.8.7" from the root project
npm ERR!       2 more (@rjsf/chakra-ui, chakra-ui-markdown-renderer)
npm ERR!   9 more (@chakra-ui/checkbox, @chakra-ui/menu, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer framer-motion@">=5.5.5" from @rjsf/[email protected]
npm ERR! node_modules/@rjsf/chakra-ui
npm ERR!   @rjsf/chakra-ui@"^4.1.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/framer-motion
npm ERR!   peer framer-motion@">=5.5.5" from @rjsf/[email protected]
npm ERR!   node_modules/@rjsf/chakra-ui
npm ERR!     @rjsf/chakra-ui@"^4.1.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/ben/.npm/_logs/2024-04-07T18_33_29_053Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/ben/.npm/_logs/2024-04-07T18_33_29_053Z-debug-0.log
```

</details>

Example with decoding an emoji:



[preview](https://rgw-preview.watonomous.ca/WATonomous/infra-config/pr-2620/9224364f05193cb2018961b7c89cb3961779bae3...605ca0083e328d0ee224cbb82d20626e592dd897/website/docs/utilities/onboarding-form?initialformdatab64=eyJnZW5lcmFsIjp7ImNvbnRhY3RfZW1haWxzIjpbXSwiYWZmaWxpYXRpb25zIjpbXSwic2VuZF9vbmJvYXJkaW5nX2VtYWlsIjp0cnVlLCJuYW1lIjoi8J-ZiCJ9LCJjb21wdXRlX2NsdXN0ZXIiOnsiZW5hYmxlZCI6ZmFsc2V9LCJnaXRodWIiOnsiZW5hYmxlZCI6ZmFsc2V9LCJnb29nbGVfd29ya3NwYWNlIjp7ImVuYWJsZWQiOmZhbHNlfSwiamlyYSI6eyJlbmFibGVkIjpmYWxzZX0sImludGVybmFsX3Rvb2xzIjp7ImVuYWJsZWQiOmZhbHNlfSwidXdfZ2l0bGFiIjp7ImVuYWJsZWQiOmZhbHNlfSwiZGlzY29yZCI6eyJlbmFibGVkIjpmYWxzZX0sImZpbmFuY2Vfc3lzdGVtIjp7ImVuYWJsZWQiOmZhbHNlfSwic2VudHJ5Ijp7ImVuYWJsZWQiOmZhbHNlfX0)
(works)


[prod](https://cloud.watonomous.ca/docs/utilities/onboarding-form?initialformdatab64=eyJnZW5lcmFsIjp7ImNvbnRhY3RfZW1haWxzIjpbXSwiYWZmaWxpYXRpb25zIjpbXSwic2VuZF9vbmJvYXJkaW5nX2VtYWlsIjp0cnVlLCJuYW1lIjoi8J-ZiCJ9LCJjb21wdXRlX2NsdXN0ZXIiOnsiZW5hYmxlZCI6ZmFsc2V9LCJnaXRodWIiOnsiZW5hYmxlZCI6ZmFsc2V9LCJnb29nbGVfd29ya3NwYWNlIjp7ImVuYWJsZWQiOmZhbHNlfSwiamlyYSI6eyJlbmFibGVkIjpmYWxzZX0sImludGVybmFsX3Rvb2xzIjp7ImVuYWJsZWQiOmZhbHNlfSwidXdfZ2l0bGFiIjp7ImVuYWJsZWQiOmZhbHNlfSwiZGlzY29yZCI6eyJlbmFibGVkIjpmYWxzZX0sImZpbmFuY2Vfc3lzdGVtIjp7ImVuYWJsZWQiOmZhbHNlfSwic2VudHJ5Ijp7ImVuYWJsZWQiOmZhbHNlfX0)
(breaks)

cc @Jimmyj30 can you also use url-safe encoding in the
user-config-lookup project?
https://docs.python.org/3/library/base64.html#base64.urlsafe_b64encode

components/onboarding-form.tsx

@@ -40,6 +40,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { deepEquals } from "@rjsf/utils"
 import { useRouter } from "next/router";
+import { encodeURI as b64EncodeURI, decode as b64Decode } from "js-base64";
 
 const INITIAL_FORM_DATA_QUERY_PARAM = "initialformdatab64";
 const FORM_STATE_KEY = "onboarding-form-state";
@@ -127,7 +128,7 @@ export default function OnboardingForm() {
       savedFormState.initialFormDataB64FromParam;
 
     const initialFormDataFromParam = initialFormDataB64FromParam
-      ? JSON.parse(atob(initialFormDataB64FromParam as string))
+      ? JSON.parse(b64Decode(initialFormDataB64FromParam as string))
       : null;
 
     // Choose initial form data:
@@ -204,7 +205,7 @@ export default function OnboardingForm() {
     resetAlert();
     setAlertTitle("Edit link");
     setAlertDescription("Below is a link to the form with the current data pre-filled. You can send this to others as a template.");
-    const editLink = `${window.location.origin}${window.location.pathname}?${INITIAL_FORM_DATA_QUERY_PARAM}=${btoa(JSON.stringify(postprocessFormData(formData)))}`;
+    const editLink = `${window.location.origin}${window.location.pathname}?${INITIAL_FORM_DATA_QUERY_PARAM}=${b64EncodeURI(JSON.stringify(postprocessFormData(formData)))}`;
     setAlertBody(
       <>
         <Pre hasCopyCode>

package.json

@@ -50,6 +50,7 @@
     "cmdk": "^0.2.0",
     "core-js": "^3.34.0",
     "dayjs": "^1.11.10",
+    "js-base64": "^3.7.7",
     "lucide-react": "^0.288.0",
     "next": "^13.4.19",
     "nextjs-google-analytics": "^2.3.3",