Skip to content

fix: add input validation for new filter preset modal (@amandevelops) #7073

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Miodec merged 4 commits into from
Nov 12, 2025
Merged

fix: add input validation for new filter preset modal (@amandevelops) #7073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
05d370d
feat: add input validation for new filter preset modal
AmanDevelops Nov 2, 2025
34d78a4
feat: update createFilterPreset to return status code and simplify er…
AmanDevelops Nov 3, 2025
9075c7d
refactor: remove filter preset modal and styles (migrated to SimpleMo…
AmanDevelops Nov 3, 2025
35353df
Merge branch 'master' into input-validation-filter-preset
AmanDevelops Nov 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions frontend/src/html/popups.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1276,14 +1276,6 @@
</div>
</dialog>

<dialog id="newFilterPresetModal" class="modalWrapper hidden">
<form class="modal">
<div class="title">New filter preset</div>
<input type="text" value="" />
<button>add</button>
</form>
</dialog>

<dialog id="editProfileModal" class="modalWrapper hidden">
<form class="modal">
<div class="title">Edit Profile</div>
Expand Down
6 changes: 0 additions & 6 deletions frontend/src/styles/popups.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1654,12 +1654,6 @@ body.darkMode {
}
}

#newFilterPresetModal {
.modal {
max-width: 450px;
}
}

#editProfileModal {
.modal {
max-width: 600px;
Expand Down
11 changes: 5 additions & 6 deletions frontend/src/ts/elements/account/result-filters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,9 @@ function addFilterPresetToSnapshot(filter: ResultFilters): void {
}

// callback function called by popup once user inputs name
export async function createFilterPreset(name: string): Promise<void> {
export async function createFilterPreset(
name: string
): Promise<number | undefined> {
name = name.replace(/ /g, "_");
Loader.show();
const result = await Ape.users.addResultFilterPreset({
Expand All @@ -189,13 +191,10 @@ export async function createFilterPreset(name: string): Promise<void> {
if (result.status === 200) {
addFilterPresetToSnapshot({ ...filters, name, _id: result.body.data });
void updateFilterPresets();
Notifications.add("Filter preset created", 1);
return 1;
} else {
Notifications.add(
"Error creating filter preset: " + result.body.message,
-1
);
console.log("error creating filter preset: " + result.body.message);
return 0;
}
}

Expand Down
64 changes: 29 additions & 35 deletions frontend/src/ts/modals/new-filter-preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,35 @@
import { ResultFiltersSchema } from "@monkeytype/schemas/users";
import { createFilterPreset } from "../elements/account/result-filters";
import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
import * as Notifications from "../elements/notifications";
import { SimpleModal } from "../utils/simple-modal";

export function show(showOptions?: ShowOptions): void {
void modal.show({
...showOptions,
focusFirstInput: true,
beforeAnimation: async (modalEl) => {
(modalEl.querySelector("input") as HTMLInputElement).value = "";
},
});
}

function hide(clearChain = false): void {
void modal.hide({
clearModalChain: clearChain,
});
export function show(): void {
newFilterPresetModal.show(undefined, {});
}

function apply(): void {
const name = $("#newFilterPresetModal input").val() as string;
if (name === "") {
Notifications.add("Name cannot be empty", 0);
return;
}
void createFilterPreset(name);
hide(true);
}

async function setup(modalEl: HTMLElement): Promise<void> {
modalEl.addEventListener("submit", (e) => {
e.preventDefault();
apply();
});
}
const newFilterPresetModal = new SimpleModal({
id: "newFilterPresetModal",
title: "New Filter Preset",
inputs: [
{
placeholder: "Preset Name",
type: "text",
initVal: "",
validation: {
schema: ResultFiltersSchema.shape.name,
},
},
],
buttonText: "add",
onlineOnly: true,
execFn: async (_thisPopup, name) => {
const status = await createFilterPreset(name);

const modal = new AnimatedModal({
dialogId: "newFilterPresetModal",
setup,
if (status === 1) {
return { status: 1, message: "Filter preset created" };
} else {
let status: -1 | 0 | 1 = -1;
let message: string = "Error creating filter preset";
return { status, message, alwaysHide: true };
}
},
});