import {FormField, NotificationType, Tooltip} from 'argo-ui'; import * as React from 'react'; import {Form, FormApi, Text} from 'argo-ui'; import {Consumer, ContextApis} from '../../../shared/context'; import {JwtToken} from '../../../shared/models'; import {CreateJWTTokenParams, DeleteJWTTokenParams} from '../../../shared/services'; import {convertExpiresInToSeconds, validExpiresIn} from '../utils'; import {Button} from '../../../shared/components/button'; import {ProgressPopup} from '../../../shared/components'; interface ProjectRoleJWTTokensProps { projName: string; roleName: string; tokens: JwtToken[]; token: string; createJWTToken: (params: CreateJWTTokenParams) => Promise; deleteJWTToken: (params: DeleteJWTTokenParams) => Promise; hideJWTToken: () => void; getApi?: (formApi: FormApi) => void; } require('./project-role-jwt-tokens.scss'); export const ProjectRoleJWTTokens = (props: ProjectRoleJWTTokensProps) => { const [progress, setProgress] = React.useState<{percentage: number; title: string} | null>(null); return ( {ctx => (

JWT Tokens {progress !== null && setProgress(null)} />}

Generate JWT tokens to bind to this role

{props.tokens && props.tokens.length > 0 && (

ISSUED AT

EXPIRES AT

{props.tokens.map(jwToken => renderJWTRow(props, ctx, jwToken))}

)}

({ expiresIn: !validExpiresIn(params.expiresIn) && 'Must be in the "[0-9]+[smhd]" format. For example, "12h", "7d".' })}> {api => (

{props.token && (

NEW TOKEN

{props.token} props.hideJWTToken()} />

)} )}

)} ); }; async function createJWTToken(props: ProjectRoleJWTTokensProps, api: FormApi, ctx: any) { if (api.errors.expiresIn) { return; } const project = props.projName; const role = props.roleName; const expiresIn = convertExpiresInToSeconds(api.values.expiresIn); let expiresInPrompt = 'has no expiration'; if (expiresIn !== 0) { expiresInPrompt = 'expires in ' + api.values.expiresIn; } const id = api.values.id; const nameContext = id === undefined || id === '' ? ` has no token ID and ` : ` has token ID '${id}' and `; const confirmed = await ctx.popup.confirm( 'Create JWT Token', `Are you sure you want to create a JWT token that ${nameContext}${expiresInPrompt} for role '${role}' in project '${project}'?` ); if (confirmed) { props.createJWTToken({project, role, expiresIn, id} as CreateJWTTokenParams); api.values.expiresIn = ''; api.values.id = ''; } } async function deleteJWTToken(props: ProjectRoleJWTTokensProps, iat: number, ctx: any, id: string) { const confirmed = await ctx.popup.confirm('Delete JWT Token', `Are you sure you want to delete token ID '${id}' for role '${props.roleName}' in project '${props.projName}'?`); if (confirmed) { props.deleteJWTToken({project: props.projName, role: props.roleName, iat} as DeleteJWTTokenParams); } } async function deleteJWTTokens(props: ProjectRoleJWTTokensProps, ctx: any, tokens: JwtToken[], setProgress: (progress: {percentage: number; title: string}) => void) { const confirmed = await ctx.popup.confirm( 'Delete Expired JWT Tokens', `Are you sure you want to delete all ${tokens.length} expired tokens for role '${props.roleName}' in project '${props.projName}'?` ); if (confirmed) { setProgress({percentage: 0, title: 'Deleting Expired Tokens'}); let i = 0; const promises = tokens.map(token => props.deleteJWTToken({project: props.projName, role: props.roleName, iat: token.iat} as DeleteJWTTokenParams).then(() => { setProgress({percentage: Number(((i / tokens.length) * 100).toFixed(2)), title: `Deleting token ${i + 1} of ${tokens.length}(${token.id})`}); i++; }) ); await Promise.all(promises); setProgress({percentage: 100, title: 'Delete Expired Tokens Complete'}); } } function renderJWTRow(props: ProjectRoleJWTTokensProps, ctx: ContextApis, jwToken: JwtToken) { const issuedAt = new Date(jwToken.iat * 1000).toISOString(); const expiresAt = jwToken.exp == null ? 'Never' : new Date(jwToken.exp * 1000).toISOString(); const isExpired = jwToken.exp && jwToken.exp < Date.now() / 1000; return (

{jwToken.id} {isExpired && ( Expired )}

{issuedAt}

{expiresAt}

deleteJWTToken(props, jwToken.iat, ctx, jwToken.id)} style={{cursor: 'pointer'}} />

); }