| }, [authorized, authRemoved, current_credential_name, hasCredential]) | }, [authorized, authRemoved, current_credential_name, hasCredential]) | ||||
| const color = useMemo(() => { | const color = useMemo(() => { | ||||
| if (authRemoved) | |||||
| if (authRemoved || !hasCredential) | |||||
| return 'red' | return 'red' | ||||
| if (notAllowedToUse) | if (notAllowedToUse) | ||||
| return 'gray' | return 'gray' | ||||
| return 'green' | return 'green' | ||||
| }, [authRemoved, notAllowedToUse]) | |||||
| }, [authRemoved, notAllowedToUse, hasCredential]) | |||||
| return ( | return ( | ||||
| <> | <> |