feat(profile): disable save button when no profile changes are made

Author: AzureNightlock

frontend/src/ts/modals/edit-profile.ts

@@ -24,6 +24,7 @@ export function show(): void {
     beforeAnimation: async () => {
       hydrateInputs();
       originalState = getProfileState();
+      updateSaveButtonState();
       initializeCharacterCounters();
     },
   });
@@ -33,6 +34,10 @@ function hide(): void {
   void modal.hide();
 }
 
+const saveButton = qsr<HTMLButtonElement>(
+  "#editProfileModal .edit-profile-submit",
+);
+
 const bioInput = qsr<HTMLTextAreaElement>("#editProfileModal .bio");
 const keyboardInput = qsr<HTMLTextAreaElement>("#editProfileModal .keyboard");
 const twitterInput = qsr<HTMLInputElement>("#editProfileModal .twitter");
@@ -43,10 +48,41 @@ const showActivityOnPublicProfileInput = qsr<HTMLInputElement>(
   "#editProfileModal .editProfileShowActivityOnPublicProfile",
 );
 
+bioInput.on("input", () => {
+  updateSaveButtonState();
+});
+keyboardInput.on("input", () => {
+  updateSaveButtonState();
+});
+twitterInput.on("input", () => {
+  updateSaveButtonState();
+});
+githubInput.on("input", () => {
+  updateSaveButtonState();
+});
+websiteInput.on("input", () => {
+  updateSaveButtonState();
+});
+showActivityOnPublicProfileInput.on("change", () => {
+  updateSaveButtonState();
+});
+
 const indicators = [
-  addValidation(twitterInput, TwitterProfileSchema),
-  addValidation(githubInput, GithubProfileSchema),
-  addValidation(websiteInput, WebsiteSchema),
+  addValidation(
+    twitterInput,
+    TwitterProfileSchema,
+    () => originalState?.twitter ?? "",
+  ),
+  addValidation(
+    githubInput,
+    GithubProfileSchema,
+    () => originalState?.github ?? "",
+  ),
+  addValidation(
+    websiteInput,
+    WebsiteSchema,
+    () => originalState?.website ?? "",
+  ),
 ];
 
 let currentSelectedBadgeId = -1;
@@ -101,6 +137,7 @@ function hydrateInputs(): void {
 
       badgeIdsSelect?.qsa(".badgeSelectionItem")?.removeClass("selected");
       (currentTarget as HTMLElement).classList.add("selected");
+      updateSaveButtonState();
     });
 
   indicators.forEach((it) => it.hide());
@@ -171,40 +208,33 @@ function hasProfileChanged(
   );
 }
 
+function updateSaveButtonState(): void {
+  const currentState = getProfileState();
+  const hasChanges = hasProfileChanged(originalState, currentState);
+
+  const hasValidationErrors = [
+    { value: currentState.twitter, schema: TwitterProfileSchema },
+    { value: currentState.github, schema: GithubProfileSchema },
+    { value: currentState.website, schema: WebsiteSchema },
+  ].some(
+    ({ value, schema }) => value !== "" && !schema.safeParse(value).success,
+  );
+
+  saveButton.native.disabled = !hasChanges || hasValidationErrors;
+}
+
 async function updateProfile(): Promise<void> {
   const snapshot = DB.getSnapshot();
   if (!snapshot) return;
 
   const currentState = getProfileState();
+
   if (!hasProfileChanged(originalState, currentState)) {
-    showErrorNotification("No changes to save");
+    updateSaveButtonState();
     return;
   }
 
   const updates = buildUpdatesFromState(currentState);
-  // check for length restrictions before sending server requests
-  const githubLengthLimit = 39;
-  if (
-    updates.socialProfiles?.github !== undefined &&
-    updates.socialProfiles?.github.length > githubLengthLimit
-  ) {
-    showErrorNotification(
-      `GitHub username exceeds maximum allowed length (${githubLengthLimit} characters).`,
-    );
-    return;
-  }
-
-  const twitterLengthLimit = 20;
-  if (
-    updates.socialProfiles?.twitter !== undefined &&
-    updates.socialProfiles?.twitter.length > twitterLengthLimit
-  ) {
-    showErrorNotification(
-      `Twitter username exceeds maximum allowed length (${twitterLengthLimit} characters).`,
-    );
-    return;
-  }
-
   showLoaderBar();
   const response = await Ape.users.updateProfile({
     body: {
@@ -238,6 +268,7 @@ async function updateProfile(): Promise<void> {
 function addValidation(
   element: ElementWithUtils<HTMLInputElement>,
   schema: Zod.Schema,
+  getOriginalValue: () => string,
 ): InputIndicator {
   const indicator = new InputIndicator(element, {
     valid: {
@@ -257,10 +288,11 @@ function addValidation(
 
   element.on("input", (event) => {
     const value = (event.target as HTMLInputElement).value;
-    if (value === undefined || value === "") {
+    if (value === undefined || value === "" || value === getOriginalValue()) {
       indicator.hide();
       return;
     }
+
     const validationResult = schema.safeParse(value);
     if (!validationResult.success) {
       indicator.show(