fix(profile): prevent saving profile when no changes are made

Author: AzureNightlock

frontend/src/styles/inputs.scss

@@ -114,6 +114,7 @@ input[type="checkbox"] {
   position: relative;
   transition: background 0.125s;
   flex-shrink: 0;
+  cursor: pointer;
   &:after {
     font-family: "Font Awesome";
     content: "\f00c";

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

@@ -23,6 +23,7 @@ export function show(): void {
   void modal.show({
     beforeAnimation: async () => {
       hydrateInputs();
+      originalState = getProfileState();
       initializeCharacterCounters();
     },
   });
@@ -105,40 +106,83 @@ function hydrateInputs(): void {
   indicators.forEach((it) => it.hide());
 }
 
+let characterCountersInitialized = false;
+
 function initializeCharacterCounters(): void {
+  if (characterCountersInitialized) return;
   new CharacterCounter(bioInput, 250);
   new CharacterCounter(keyboardInput, 75);
+  characterCountersInitialized = true;
 }
 
-function buildUpdatesFromInputs(): UserProfileDetails {
-  const bio = bioInput.getValue() ?? "";
-  const keyboard = keyboardInput.getValue() ?? "";
-  const twitter = twitterInput.getValue() ?? "";
-  const github = githubInput.getValue() ?? "";
-  const website = websiteInput.getValue() ?? "";
-  const showActivityOnPublicProfile =
-    showActivityOnPublicProfileInput.isChecked() ?? false;
-
-  const profileUpdates: UserProfileDetails = {
-    bio,
-    keyboard,
+type ProfileState = {
+  bio: string;
+  keyboard: string;
+  twitter: string;
+  github: string;
+  website: string;
+  badgeId: number;
+  showActivityOnPublicProfile: boolean;
+};
+
+function getProfileState(): ProfileState {
+  return {
+    bio: bioInput.getValue() ?? "",
+    keyboard: keyboardInput.getValue() ?? "",
+    twitter: twitterInput.getValue() ?? "",
+    github: githubInput.getValue() ?? "",
+    website: websiteInput.getValue() ?? "",
+    badgeId: currentSelectedBadgeId,
+    showActivityOnPublicProfile:
+      showActivityOnPublicProfileInput.isChecked() ?? false,
+  };
+}
+
+function buildUpdatesFromState(state: ProfileState): UserProfileDetails {
+  return {
+    bio: state.bio,
+    keyboard: state.keyboard,
     socialProfiles: {
-      twitter,
-      github,
-      website,
+      twitter: state.twitter,
+      github: state.github,
+      website: state.website,
     },
-    showActivityOnPublicProfile,
+    showActivityOnPublicProfile: state.showActivityOnPublicProfile,
   };
+}
+
+let originalState: ProfileState | null = null;
 
-  return profileUpdates;
+function hasProfileChanged(
+  originalState: ProfileState | null,
+  currentState: ProfileState,
+): boolean {
+  if (originalState === null) return true;
+
+  return (
+    originalState.bio !== currentState.bio ||
+    originalState.keyboard !== currentState.keyboard ||
+    originalState.twitter !== currentState.twitter ||
+    originalState.github !== currentState.github ||
+    originalState.website !== currentState.website ||
+    originalState.badgeId !== currentState.badgeId ||
+    originalState.showActivityOnPublicProfile !==
+      currentState.showActivityOnPublicProfile
+  );
 }
 
 async function updateProfile(): Promise<void> {
   const snapshot = DB.getSnapshot();
   if (!snapshot) return;
-  const updates = buildUpdatesFromInputs();
 
-  // check for length resctrictions before sending server requests
+  const currentState = getProfileState();
+  if (!hasProfileChanged(originalState, currentState)) {
+    showErrorNotification("No changes to save");
+    return;
+  }
+
+  const updates = buildUpdatesFromState(currentState);
+  // check for length restrictions before sending server requests
   const githubLengthLimit = 39;
   if (
     updates.socialProfiles?.github !== undefined &&
@@ -176,7 +220,7 @@ async function updateProfile(): Promise<void> {
   }
 
   snapshot.details = response.body.data ?? updates;
-  snapshot.inventory?.badges.forEach((badge) => {
+  snapshot.inventory?.badges?.forEach((badge) => {
     if (badge.id === currentSelectedBadgeId) {
       badge.selected = true;
     } else {
@@ -185,7 +229,7 @@ async function updateProfile(): Promise<void> {
   });
 
   DB.setSnapshot(snapshot);
-
+  originalState = currentState;
   showSuccessNotification("Profile updated");
 
   hide();