Improve validate token UI

This commit is contained in:
Carlos Monastyrski
2025-08-28 10:05:49 -03:00
parent 7894bd8ae1
commit 07a55bb943
@@ -1,4 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { faCircleCheck, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -309,7 +311,7 @@ export const OrgGithubSyncSection = () => {
> >
<div className="space-y-4"> <div className="space-y-4">
<FormControl label="GitHub Access Token"> <FormControl label="GitHub Access Token">
<div className="space-y-2"> <div className="relative">
<Input <Input
type="password" type="password"
placeholder="ghp_xxxxxxxxxxxx" placeholder="ghp_xxxxxxxxxxxx"
@@ -323,15 +325,11 @@ export const OrgGithubSyncSection = () => {
autoComplete="off" autoComplete="off"
/> />
{tokenValidationResult && ( {tokenValidationResult && (
<div <div className="absolute right-3 top-1/2 -translate-y-1/2">
className={`rounded p-2 text-sm ${tokenValidationResult.valid ? "border border-green-800 bg-green-900/20 text-green-400" : "border border-red-800 bg-red-900/20 text-red-400"}`} {tokenValidationResult.valid ? (
> <FontAwesomeIcon icon={faCircleCheck} size="xs" className="text-green-500" />
{tokenValidationResult.valid && tokenValidationResult.organizationInfo ? (
<div>
<div className="font-medium">✓ Token Valid</div>
</div>
) : ( ) : (
<div className="font-medium">✗ Token Invalid</div> <FontAwesomeIcon icon={faCircleXmark} size="xs" className="text-red-500" />
)} )}
</div> </div>
)} )}