diff --git a/Containers/UserSettings/Integrations/Integrations.js b/Containers/UserSettings/Integrations/Integrations.js
index 7cc08f8..8521549 100644
--- a/Containers/UserSettings/Integrations/Integrations.js
+++ b/Containers/UserSettings/Integrations/Integrations.js
@@ -35,6 +35,7 @@ export default function Integrations() {
////State
const [isLoading, setIsLoading] = useState(false);
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [tokenList, setTokenList] = useState([]);
const [error, setError] = useState();
const [lastGeneratedToken, setLastGeneratedToken] = useState();
@@ -137,6 +138,7 @@ export default function Integrations() {
//Delete token
const deleteTokenHandler = async (tokenName) => {
+ setIsDeleteLoading(true);
try {
const response = await fetch('/api/account/tokenManager', {
method: 'DELETE',
@@ -152,15 +154,18 @@ export default function Integrations() {
if (!response.ok) {
toast.error(result.message, toastOptions);
setTimeout(() => setError(), 4000);
+ setIsDeleteLoading(false);
} else {
fetchTokenList();
+ setIsDeleteLoading(false);
toast.success('🗑️ Token deleted !', toastOptions);
}
} catch (error) {
- setIsLoading(false);
+ setIsDeleteLoading(false);
toast.error("Can't delete your token. Contact your administrator.", toastOptions);
setTimeout(() => setError(), 4000);
} finally {
+ setIsDeleteLoading(false);
setDeletingToken(null);
}
};
@@ -221,7 +226,7 @@ export default function Integrations() {
disabled={!isValid || isSubmitting || hasNoPermissionSelected()}
>
{isLoading ? (
-
+
) : (
'Generate'
)}
@@ -296,15 +301,21 @@ export default function Integrations() {
-
+ {!isDeleteLoading && (
+
+ )}
)}
diff --git a/Containers/UserSettings/UserSettings.module.css b/Containers/UserSettings/UserSettings.module.css
index e5ec7f0..459e774 100644
--- a/Containers/UserSettings/UserSettings.module.css
+++ b/Containers/UserSettings/UserSettings.module.css
@@ -184,6 +184,11 @@
transform: scale(0.9);
}
+.deleteConfirmationButtons {
+ display: flex;
+ flex-direction: row;
+}
+
.confirmButton {
border: 0;
padding: 10px 15px;
@@ -195,6 +200,15 @@
text-decoration: none;
font-weight: bold;
font-size: 1em;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.confirmButton:disabled {
+ opacity: 0.3;
+ cursor: not-allowed;
+ pointer-events: none;
}
.confirmButton:hover {