Change forms to use url encoding

src/ui/form-modal-ui-handler.ts

@@ -28,7 +28,7 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
   abstract getFields(): string[];
 
   getHeight(config?: ModalConfig): number {
-    return 20 * this.getFields().length + (this.getModalTitle() ? 26 : 0) + ((config as FormModalConfig)?.errorMessage ? 12 : 0) + 28;
+    return 20 * this.getFields().length + (this.getModalTitle() ? 26 : 0) + ((config as FormModalConfig)?.errorMessage ? 12 : 0) + this.getButtonTopMargin() + 28;
   }
 
   getReadableErrorMessage(error: string): string {
@@ -67,7 +67,7 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
       this.inputs.push(input);
     });
 
-    this.errorMessage = addTextObject(this.scene, 10, (hasTitle ? 31 : 5) + 20 * (fields.length - 1) + 16, '', TextStyle.TOOLTIP_CONTENT);
+    this.errorMessage = addTextObject(this.scene, 10, (hasTitle ? 31 : 5) + 20 * (fields.length - 1) + 16 + this.getButtonTopMargin(), '', TextStyle.TOOLTIP_CONTENT);
     this.errorMessage.setColor(this.getTextColor(TextStyle.SUMMARY_PINK));
     this.errorMessage.setShadowColor(this.getTextColor(TextStyle.SUMMARY_PINK, true));
     this.errorMessage.setVisible(false);

src/ui/login-form-ui-handler.ts

@@ -58,7 +58,11 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
         };
         if (!this.inputs[0].text)
           return onFail('Username must not be empty');
-        Utils.apiPost('account/login', JSON.stringify({ username: this.inputs[0].text, password: this.inputs[1].text }))
+        const contentType = 'application/x-www-form-urlencoded';
+        const headers = {
+          'Content-Type': contentType,
+        };
+        fetch(`${Utils.apiUrl}/account/login`, { method: 'POST', headers: headers, body: `username=${this.inputs[0].text}&password=${this.inputs[1].text}` })
           .then(response => {
             if (!response.ok)
               return response.text();

src/ui/modal-ui-handler.ts

@@ -32,6 +32,10 @@ export abstract class ModalUiHandler extends UiHandler {
 
   abstract getButtonLabels(config?: ModalConfig): string[];
 
+  getButtonTopMargin(): number {
+    return 0;
+  }
+
   setup() {
     const ui = this.getUi();
     
@@ -52,6 +56,8 @@ export abstract class ModalUiHandler extends UiHandler {
 
     const buttonLabels = this.getButtonLabels();
 
+    const buttonTopMargin = this.getButtonTopMargin();
+
     for (let label of buttonLabels) {
       const buttonLabel = addTextObject(this.scene, 0, 8, label, TextStyle.TOOLTIP_CONTENT);
       buttonLabel.setOrigin(0.5, 0.5);
@@ -60,7 +66,7 @@ export abstract class ModalUiHandler extends UiHandler {
       buttonBg.setOrigin(0.5, 0);
       buttonBg.setInteractive(new Phaser.Geom.Rectangle(0, 0, buttonBg.width, buttonBg.height), Phaser.Geom.Rectangle.Contains);
 
-      const buttonContainer = this.scene.add.container(0, 0);
+      const buttonContainer = this.scene.add.container(0, buttonTopMargin);
 
       this.buttonBgs.push(buttonBg);
       this.buttonContainers.push(buttonContainer);

src/ui/registration-form-ui-handler.ts

@@ -2,6 +2,7 @@ import { FormModalUiHandler } from "./form-modal-ui-handler";
 import { ModalConfig } from "./modal-ui-handler";
 import * as Utils from "../utils";
 import { Mode } from "./ui";
+import { TextStyle, addTextObject } from "./text";
 
 export default class RegistrationFormUiHandler extends FormModalUiHandler {
   getModalTitle(config?: ModalConfig): string {
@@ -20,6 +21,10 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
     return [ 0, 0, 48, 0 ];
   }
 
+  getButtonTopMargin(): number {
+    return 8;
+  }
+
   getButtonLabels(config?: ModalConfig): string[] {
     return [ 'Register', 'Back to Login' ];
   }
@@ -40,6 +45,14 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
     return super.getReadableErrorMessage(error);
   }
 
+  setup(): void {
+    super.setup();
+
+    const label = addTextObject(this.scene, 10, 87, 'By registering, you confirm you are of 13 years of age or older.', TextStyle.TOOLTIP_CONTENT, { fontSize: '42px' });
+
+    this.modalContainer.add(label);
+  }
+
   show(args: any[]): boolean {
     if (super.show(args)) {
       const config = args[0] as ModalConfig;
@@ -60,11 +73,15 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
           return onFail(this.getReadableErrorMessage('invalid password'));
         if (this.inputs[1].text !== this.inputs[2].text)
           return onFail('Password must match confirm password');
-        Utils.apiPost('account/register', JSON.stringify({ username: this.inputs[0].text, password: this.inputs[1].text }))
+        const contentType = 'application/x-www-form-urlencoded';
+        const headers = {
+          'Content-Type': contentType,
+        };
+        fetch(`${Utils.apiUrl}/account/register`, { method: 'POST', headers: headers, body: `username=${this.inputs[0].text}&password=${this.inputs[1].text}` })
           .then(response => response.text())
           .then(response => {
             if (!response) {
-              Utils.apiPost('account/login', JSON.stringify({ username: this.inputs[0].text, password: this.inputs[1].text }))
+              fetch(`${Utils.apiUrl}/account/login`, { method: 'POST', headers: headers, body: `username=${this.inputs[0].text}&password=${this.inputs[1].text}` })
                 .then(response => {
                   if (!response.ok)
                     return response.text();