displayed success message on profile state change

ui/src/pages/MyProfile.vue

@@ -11,6 +11,7 @@ import { useMemberDirectory } from "@/stores/memberDirectory";
 import { useUserStore } from "@/stores/user";
 
 const saving = ref(false);
+const saveSuccess = ref(false);
 const loading = ref(true);
 const showLoading = ref(false);
 const form = ref<memberSettings>();
@@ -20,12 +21,14 @@ const userStore = useUserStore()
 
 function saveSettings() {
     saving.value = true;
+    saveSuccess.value = false;
 
     setTimeout(async () => {
         // Replace with your API save call
         setMemberSettings(form.value);
         saving.value = false;
-        memberDictionary.invalidateMember(userStore.user.id)
+        memberDictionary.invalidateMember(userStore.user.member.member_id)
+        saveSuccess.value = true;
     }, 800);
 }
 
@@ -74,7 +77,8 @@ onMounted(async () => {
                 </CardContent>
             </Transition>
 
-            <CardFooter class="flex justify-end">
+            <CardFooter class="flex justify-end gap-5 items-center">
+                <p v-if="saveSuccess" class="text-green-500">Profile saved</p>
                 <Button @click="saveSettings" :disabled="saving">
                     {{ saving ? "Saving..." : "Save Changes" }}
                 </Button>