feat(web) - UI for revoking auth tokens, active and inactive token lists #5253
Conversation
wendybujalski
commented
Jan 14, 2025
wendybujalski
commented
Dependency Review✅ No vulnerabilities or OpenSSF Scorecard issues found.OpenSSF Scorecard
Scanned Files |
wendybujalski
force-pushed
the
wendy/eng-2901-see-expired-and-revoked-api-tokens
branch
from
ff7b7ec to
7deb5b9
Compare
| @@ -1,6 +1,6 @@ | |||
| <template> | |||
| <tr | |||
| class="children:px-md children:py-sm children:truncate text-sm font-medium text-gray-800 dark:text-gray-200" | |||
There was a problem hiding this comment.
Frontend Best Practices:
Only use the approved abstract colors - shade, neutral, action, success, warning, and destructive. Do not use named Tailwind colors like red or gray.
wendybujalski
force-pushed
the
wendy/eng-2901-see-expired-and-revoked-api-tokens
branch
from
6dd0797 to
d665330
Compare
|
|
||
| // This pokes the computed values to check if any tokens have expired every 5 seconds | ||
| const EXPIRATION_CHECK_INTERVAL = 5000; | ||
| const checkExpiration = ref(); |
There was a problem hiding this comment.
checkExpiration doesn't need to be a ref, seems like.
Ooh, if you set a now variable instead of a tick counter, it gets rid of the need for a bunch of code as well as for the warning itself:
const now = ref(Date.now())
const expired = computed(() => expiresAt.value?.getTime() <= now.value);
let checkExpiration;
onMounted(() => {
checkExpiration = setInterval(() => {
now.value = Date.now()
}, EXPIRATION_CHECK_INTERVAL);
}
onUnmounted(() => clearInterval(checkExpiration));The current code works fine though, but probably needs a comment in the spot where you ignore the warning.
| const listedTokens = computed(() => | ||
| _.reverse(_.sortBy(_.values(authTokens.state.value), "createdAt")), | ||
| ); | ||
| // This pokes the computed values to check if any tokens have expired every 5 seconds |
There was a problem hiding this comment.
I wonder if the thing to do here is have this be the only recomputer. Instead of storing simple AuthToken, we could store AuthToken & { isExpired: boolean }. Then we update isExpired to true whenever we notice a token becomes expired.
That way, the listedTokens / activeTokens split can just use token.isExpired || token.revokedAt and the AuthTokenListItem would automatically get isExpired passed in as well (and could drive itself off of that instead of running its own loop).
There was a problem hiding this comment.
Yeah that sounds like a much simpler system - I can make those changes in my next PR 😅
There was a problem hiding this comment.
(or fold them into this one now!)
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
| @@ -92,8 +92,16 @@ router.put("/workspaces/:workspaceId/authTokens/:authTokenId", async (ctx) => { | |||
| ctx.body = { authToken }; | |||
| }); | |||
|
|
|||
| // revoke the given authToken for the given workspace | |||
| router.post("/workspaces/:workspaceId/authTokens/:authTokenId/revoke", async (ctx) => { | |||
| const { authToken } = await authorizeAuthTokenRoute(ctx, RoleType.OWNER); | |||
There was a problem hiding this comment.
this needs to be [RoleType.OWNER]
