Minor UX update to identities

This commit is contained in:
Tuan Dang
2023-12-10 22:35:12 +07:00
parent 444ce9508d
commit 4f6adb50d1
3 changed files with 30 additions and 15 deletions

View File

@@ -13,7 +13,7 @@ export const useGetIdentityUniversalAuth = (identityId: string) => {
return useQuery({
queryKey: identitiesKeys.getIdentityUniversalAuth(identityId),
queryFn: async () => {
if (identityId === "") return undefined;
if (identityId === "") throw new Error("Identity ID is required");
const { data: { identityUniversalAuth } } = await apiRequest.get<{ identityUniversalAuth: IdentityUniversalAuth }>(
`/api/v1/auth/universal-auth/identities/${identityId}`

View File

@@ -52,8 +52,12 @@ export const IdentitySection = withPermission(
handlePopUpClose("deleteIdentity");
} catch (err) {
console.error(err);
const error = err as any;
const text = error?.response?.data?.message
?? "Failed to delete identity"
createNotification({
text: "Failed to delete identity",
text,
type: "error"
});
}

View File

@@ -61,7 +61,8 @@ export const IdentityUniversalAuthClientSecretModal = ({
const { t } = useTranslation();
const { createNotification } = useNotificationContext();
const [token, setToken] = useState("");
const [isTokenCopied, setIsTokenCopied] = useToggle(false);
const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);
const popUpData = (popUp?.universalAuthClientSecret?.data as {
identityId?: string;
@@ -90,17 +91,21 @@ export const IdentityUniversalAuthClientSecretModal = ({
useEffect(() => {
let timer: NodeJS.Timeout;
if (isTokenCopied) {
timer = setTimeout(() => setIsTokenCopied.off(), 2000);
if (isClientSecretCopied) {
timer = setTimeout(() => setIsClientSecretCopied.off(), 2000);
}
return () => clearTimeout(timer);
}, [isTokenCopied]);
const copyTokenToClipboard = () => {
navigator.clipboard.writeText(token);
setIsTokenCopied.on();
};
}, [isClientSecretCopied]);
useEffect(() => {
let timer: NodeJS.Timeout;
if (isClientIdCopied) {
timer = setTimeout(() => setIsClientIdCopied.off(), 2000);
}
return () => clearTimeout(timer);
}, [isClientIdCopied]);
const onFormSubmit = async ({
description,
@@ -189,9 +194,12 @@ export const IdentityUniversalAuthClientSecretModal = ({
ariaLabel="copy icon"
colorSchema="secondary"
className="group relative"
onClick={() => navigator.clipboard.writeText(identityUniversalAuth?.clientId ?? "")}
onClick={() => {
navigator.clipboard.writeText(identityUniversalAuth?.clientId ?? "")
setIsClientIdCopied.on();
}}
>
<FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
<FontAwesomeIcon icon={isClientIdCopied ? faCheck : faCopy} />
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
{t("common.click-to-copy")}
</span>
@@ -219,9 +227,12 @@ export const IdentityUniversalAuthClientSecretModal = ({
ariaLabel="copy icon"
colorSchema="secondary"
className="group relative"
onClick={copyTokenToClipboard}
onClick={() => {
navigator.clipboard.writeText(token);
setIsClientSecretCopied.on();
}}
>
<FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
<FontAwesomeIcon icon={isClientSecretCopied ? faCheck : faCopy} />
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
{t("common.click-to-copy")}
</span>