From 18bd75ca4f235264025171d8f336d1c06fdac214 Mon Sep 17 00:00:00 2001 From: Flashfyre Date: Thu, 18 Apr 2024 19:08:53 -0400 Subject: [PATCH] Change forms to use url encoding --- src/ui/form-modal-ui-handler.ts | 4 ++-- src/ui/login-form-ui-handler.ts | 6 +++++- src/ui/modal-ui-handler.ts | 8 +++++++- src/ui/registration-form-ui-handler.ts | 21 +++++++++++++++++++-- 4 files changed, 33 insertions(+), 6 deletions(-) diff --git a/src/ui/form-modal-ui-handler.ts b/src/ui/form-modal-ui-handler.ts index 5adf6d3c6..3e326322c 100644 --- a/src/ui/form-modal-ui-handler.ts +++ b/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); diff --git a/src/ui/login-form-ui-handler.ts b/src/ui/login-form-ui-handler.ts index 27c841b82..c7268019f 100644 --- a/src/ui/login-form-ui-handler.ts +++ b/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(); diff --git a/src/ui/modal-ui-handler.ts b/src/ui/modal-ui-handler.ts index 2bdc809b3..f193a3db5 100644 --- a/src/ui/modal-ui-handler.ts +++ b/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); diff --git a/src/ui/registration-form-ui-handler.ts b/src/ui/registration-form-ui-handler.ts index c1cc79f69..93dcf5f59 100644 --- a/src/ui/registration-form-ui-handler.ts +++ b/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();