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>

ui/src/router/index.js

@@ -16,7 +16,7 @@ const router = createRouter({
     { path: '/members', component: () => import('@/pages/memberList.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/loa', component: () => import('@/pages/SubmitLOA.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/transfer', component: () => import('@/pages/Transfer.vue'), meta: { requiresAuth: true, memberOnly: true } },
-    { path: '/profile', component: () => import('@/pages/MyProfile.vue'), meta: { requiresAuth: true, memberOnly: true } },
+    { path: '/profile', component: () => import('@/pages/MyProfile.vue'), meta: { requiresAuth: true } },
 
 
     { path: '/calendar', component: () => import('@/pages/Calendar.vue') },