From 0c2096f66ceee5c26661be32fc42738b662e2723 Mon Sep 17 00:00:00 2001
From: Roberto Guido <info@madbob.org>
Date: Tue, 28 Jul 2026 02:26:32 +0200
Subject: [PATCH] fix: panel to accept or refuse invitation

Signed-off-by: Roberto Guido <info@madbob.org>
---
 src/components/CircleDetails.vue | 42 +++++++++++++++++++++++++++++++-
 src/models/circle.d.ts           |  4 +++
 src/models/circle.ts             |  9 ++++++-
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index 83b6a703a9..d23cbf6760 100644
--- a/src/components/CircleDetails.vue
+++ b/src/components/CircleDetails.vue
@@ -191,9 +191,38 @@
 			<div class="circle-details__main-content">
 				<!-- not a member -->
 				<template v-if="!circle.isMember">
+					<!-- Pending invitation validation -->
+					<div v-if="circle.isInvitedMember" class="pending-invitation">
+						<h2>
+						{{ t('contacts', 'You have to accept or refuse the invitation to join this team') }}
+						</h2>
+
+						<div class="buttons">
+							<NcButton
+								:disabled="loadingJoin"
+								class="primary"
+								@click="joinCircle">
+								<template #icon>
+									<LoginIcon :size="16" />
+								</template>
+								{{ t('contacts', 'Accept invitation') }}
+							</NcButton>
+
+							<NcButton
+								:disabled="loadingLeave"
+								variant="warning"
+								@click="confirmLeaveCircle">
+								<template #icon>
+									<LogoutIcon :size="16" />
+								</template>
+								{{ t('contacts', 'Refuse invitation') }}
+							</NcButton>
+						</div>
+					</div>
+
 					<!-- Pending request validation -->
 					<NcEmptyContent
-						v-if="circle.isPendingMember"
+						v-else-if="circle.isPendingMember"
 						:name="t('contacts', 'Your request to join this team is pending approval')">
 						<template #icon>
 							<NcLoadingIcon :size="20" />
@@ -1062,6 +1091,17 @@ export default {
 		.circle-details__main-content {
 			margin-inline-start: 99px;
 
+			.pending-invitation {
+				text-align: center;
+
+				.buttons {
+					display: flex;
+					flex-direction: row;
+					justify-content: center;
+					gap: 24px;
+				}
+			}
+
 			@media (max-width: 768px) {
 				margin-inline-start: 0;
 			}
diff --git a/src/models/circle.d.ts b/src/models/circle.d.ts
index a5c78c85b3..c1691f7c43 100644
--- a/src/models/circle.d.ts
+++ b/src/models/circle.d.ts
@@ -133,6 +133,10 @@ export default class Circle {
 	 * Is the initiator a member of this circle?
 	 */
 	get isMember(): boolean | 0 | undefined
+	/**
+	 * Is the initiator an invited member of this circle, waiting an approval?
+	 */
+	get isInvitedMember(): boolean
 	/**
 	 * Is the initiator a pending member of this circle?
 	 */
diff --git a/src/models/circle.ts b/src/models/circle.ts
index a3c24ba0ec..dc9133a925 100644
--- a/src/models/circle.ts
+++ b/src/models/circle.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { CircleConfigs, MemberLevels, ROUTE_CIRCLE } from './constants.ts'
+import { CircleConfigs, MemberLevels, MemberStatus, ROUTE_CIRCLE } from './constants.ts'
 import Member from './member.ts'
 
 type MemberList = Record<string, Member>
@@ -269,6 +269,13 @@ export default class Circle {
 			&& this.initiator?.level > MemberLevels.NONE
 	}
 
+	/**
+	 * Is the initiator an invited member of this circle, waiting an approval?
+	 */
+	get isInvitedMember() {
+		return this.initiator?.status === MemberStatus.INVITED
+	}
+
 	/**
 	 * Is the initiator a pending member of this circle?
 	 */