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 {