feat: allow users to leave a team they're in

src/i18n/lang/en.json

@@ -857,6 +857,12 @@
         "text1": "Are you sure you want to remove this user from the team?",
         "text2": "They will lose access to all lists and namespaces this team has access to. This CANNOT BE UNDONE!",
         "success": "The user was successfully deleted from the team."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/views/teams/EditTeam.vue

@@ -127,6 +127,24 @@
 			</table>
 		</card>
 
+		<x-button class="is-fullwidth is-danger" @click="showLeaveModal = true">
+			{{ $t('team.edit.leave.title') }}
+		</x-button>
+
+		<!-- Leave team modal -->
+		<modal
+			v-if="showLeaveModal"
+			@close="showLeaveModal = false"
+			@submit="leave()"
+		>
+			<template #header><span>{{ $t('team.edit.leave.title') }}</span></template>
+
+			<template #text>
+				<p>{{ $t('team.edit.leave.text1') }}<br/>
+					{{ $t('team.edit.leave.text2') }}</p>
+			</template>
+		</modal>
+
 		<!-- Team delete modal -->
 		<transition name="modal">
 			<modal
@@ -202,13 +220,14 @@ const teamMemberService = ref<TeamMemberService>(new TeamMemberService())
 const userService = ref<UserService>(new UserService())
 
 const team = ref<ITeam>()
-const teamId = computed(() => route.params.id)
+const teamId = computed(() => Number(route.params.id))
 const memberToDelete = ref<ITeamMember>()
 const newMember = ref<IUser>()
 const foundUsers = ref<IUser[]>()
 
 const showDeleteModal = ref(false)
 const showUserDeleteModal = ref(false)
+const showLeaveModal = ref(false)
 const showError = ref(false)
 
 const title = ref('')
@@ -287,6 +306,19 @@ async function findUser(query: string) {
 	const users = await userService.value.getAll({}, {s: query})
 	foundUsers.value = users.filter((u: IUser) => u.id !== userInfo.value.id)
 }
+
+async function leave() {
+	try {
+		await teamMemberService.value.delete({
+			teamId: teamId.value,
+			username: userInfo.value.username,
+		})
+		success({message: t('team.edit.leave.success')})
+		await router.push({name: 'home'})
+	} finally {
+		showUserDeleteModal.value = false
+	}
+}
 </script>
 
 <style lang="scss" scoped>