@owlmeans/web-auth-token 0.1.18-rc.1

package/src/@/globals.css

@@ -0,0 +1,57 @@
+@import "tailwindcss";
+
+@source "../..";
+
+@theme {
+  --color-background:           oklch(1 0 0);
+  --color-foreground:           oklch(0.145 0 0);
+
+  --color-card:                 oklch(1 0 0);
+  --color-card-foreground:      oklch(0.145 0 0);
+
+  --color-popover:              oklch(1 0 0);
+  --color-popover-foreground:   oklch(0.145 0 0);
+
+  --color-primary:              oklch(0.205 0 0);
+  --color-primary-foreground:   oklch(0.985 0 0);
+
+  --color-secondary:            oklch(0.97 0 0);
+  --color-secondary-foreground: oklch(0.205 0 0);
+
+  --color-muted:                oklch(0.97 0 0);
+  --color-muted-foreground:     oklch(0.556 0 0);
+
+  --color-accent:               oklch(0.97 0 0);
+  --color-accent-foreground:    oklch(0.205 0 0);
+
+  --color-destructive:          oklch(0.577 0.245 27.325);
+  --color-success:              oklch(0.62 0.18 145);
+
+  --color-border:               oklch(0.922 0 0);
+  --color-input:                oklch(0.922 0 0);
+  --color-ring:                 oklch(0.708 0 0);
+
+  --radius:                     0.625rem;
+}
+
+.dark {
+  --color-background:           oklch(0.145 0 0);
+  --color-foreground:           oklch(0.985 0 0);
+  --color-card:                 oklch(0.205 0 0);
+  --color-card-foreground:      oklch(0.985 0 0);
+  --color-popover:              oklch(0.205 0 0);
+  --color-popover-foreground:   oklch(0.985 0 0);
+  --color-primary:              oklch(0.922 0 0);
+  --color-primary-foreground:   oklch(0.205 0 0);
+  --color-secondary:            oklch(0.269 0 0);
+  --color-secondary-foreground: oklch(0.985 0 0);
+  --color-muted:                oklch(0.269 0 0);
+  --color-muted-foreground:     oklch(0.708 0 0);
+  --color-accent:               oklch(0.269 0 0);
+  --color-accent-foreground:    oklch(0.985 0 0);
+  --color-destructive:          oklch(0.704 0.191 22.216);
+  --color-success:              oklch(0.7 0.18 145);
+  --color-border:               oklch(1 0 0 / 10%);
+  --color-input:                oklch(1 0 0 / 15%);
+  --color-ring:                 oklch(0.556 0 0);
+}

package/src/@/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/components/connected.tsx

@@ -0,0 +1,34 @@
+import type { FC } from 'react'
+import { useAccessTokens } from '../hooks/use-access-tokens.js'
+import { AccessTokensPanel } from './panel.js'
+import type { AccessTokensAliases } from '../types.js'
+
+export interface ConnectedAccessTokensPanelProps {
+  /** Override where the three routes are mounted. Defaults to the `authToken` alias tree. */
+  aliases?: AccessTokensAliases
+  /** Already-translated copy shown beside a freshly issued token — see `AccessTokensPanelProps`. */
+  usageHint?: string
+}
+
+/**
+ * The panel wired to the token entrypoints of the current context.
+ *
+ * This is the whole feature in one element, and the only piece that talks to a server. Anything
+ * that needs a different transport renders `AccessTokensPanel` against its own state instead.
+ */
+export const ConnectedAccessTokensPanel: FC<ConnectedAccessTokensPanelProps> = ({
+  aliases, usageHint
+}) => {
+  const { items, issued, loading, error, create, revoke, dismissIssued } = useAccessTokens(aliases)
+
+  return <AccessTokensPanel
+    items={items}
+    issued={issued}
+    loading={loading}
+    error={error}
+    onCreate={create}
+    onRevoke={revoke}
+    onDismissIssued={dismissIssued}
+    usageHint={usageHint}
+  />
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './panel.js'
+export * from './connected.js'

package/src/components/panel.tsx

@@ -0,0 +1,310 @@
+import { useCallback, useId, useState } from 'react'
+import type { FC, FormEvent } from 'react'
+import { useI18nLib, useLanguage } from '@owlmeans/client-i18n'
+import { AUTH_TOKEN_NAME_MAX } from '@owlmeans/auth-token'
+import { Check, Copy, Loader2, Plus, Trash2 } from 'lucide-react'
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle
+} from '@/components/ui/card'
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue
+} from '@/components/ui/select'
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow
+} from '@/components/ui/table'
+
+import { AUTH_TOKEN_I18N, DAY_SECONDS, TOKEN_EXPIRY_CHOICES, TOKEN_EXPIRY_NEVER } from '../consts.js'
+import { formatMoment, tokenStatus } from '../helpers.js'
+import type { AccessTokenStatus, AccessTokensPanelProps } from '../types.js'
+
+/**
+ * A revoked token stays in the list so its name still resolves, and it must not read like a
+ * working one — so only `active` gets the filled badge, and the two dead states are quiet.
+ */
+const STATUS_VARIANT: Record<AccessTokenStatus, 'default' | 'secondary' | 'outline'> = {
+  active: 'default',
+  expired: 'secondary',
+  revoked: 'outline',
+}
+
+const COLUMNS = 7
+
+/**
+ * The access-token management surface.
+ *
+ * Presentational by contract: it performs no I/O of its own, renders exactly what it is given and
+ * reports what the user pressed. `ConnectedAccessTokensPanel` is this component wired to
+ * `useAccessTokens`; an application with its own transport mounts this one directly.
+ */
+export const AccessTokensPanel: FC<AccessTokensPanelProps> = ({
+  items, issued, loading, error, onCreate, onRevoke, onDismissIssued, usageHint
+}) => {
+  const t = useI18nLib(AUTH_TOKEN_I18N, 'panel')
+  const [lng] = useLanguage()
+  const fieldId = useId()
+
+  const [createOpen, setCreateOpen] = useState(false)
+  const [name, setName] = useState('')
+  const [expiry, setExpiry] = useState<string>(String(TOKEN_EXPIRY_CHOICES[0]))
+  const [submitting, setSubmitting] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [revokeTarget, setRevokeTarget] = useState<string | null>(null)
+  const [revoking, setRevoking] = useState(false)
+
+  // An issued token FORCES the dialog open: it exists nowhere else, and a dialog that could be
+  // closed while it is set would lose the one copy the user was ever going to see.
+  const dialogOpen = createOpen || issued != null
+
+  const closeDialog = useCallback(() => {
+    setCreateOpen(false)
+    setCopied(false)
+    setName('')
+    setExpiry(String(TOKEN_EXPIRY_CHOICES[0]))
+    if (issued != null) {
+      onDismissIssued()
+    }
+  }, [issued, onDismissIssued])
+
+  const changeDialog = useCallback((next: boolean) => {
+    if (next) {
+      setCreateOpen(true)
+    } else {
+      closeDialog()
+    }
+  }, [closeDialog])
+
+  const submit = useCallback(async (event: FormEvent) => {
+    event.preventDefault()
+    const trimmed = name.trim()
+    if (trimmed === '' || submitting) return
+    setSubmitting(true)
+    try {
+      await onCreate(expiry === TOKEN_EXPIRY_NEVER
+        ? { name: trimmed }
+        : { name: trimmed, expiresIn: Number(expiry) * DAY_SECONDS })
+    } finally {
+      setSubmitting(false)
+    }
+  }, [name, expiry, submitting, onCreate])
+
+  const copy = useCallback(async () => {
+    if (issued == null) return
+    try {
+      await navigator.clipboard?.writeText(issued.token)
+      setCopied(true)
+    } catch {
+      // A missing or refused clipboard (an insecure origin, a denied permission) is not worth a
+      // failure banner — the value is on screen and selectable. The button simply doesn't claim a
+      // copy it did not make.
+    }
+  }, [issued])
+
+  const confirmRevoke = useCallback(async () => {
+    if (revokeTarget == null || revoking) return
+    setRevoking(true)
+    try {
+      await onRevoke(revokeTarget)
+      setRevokeTarget(null)
+    } finally {
+      setRevoking(false)
+    }
+  }, [revokeTarget, revoking, onRevoke])
+
+  return <Card>
+    <CardHeader>
+      <CardTitle>{t('title')}</CardTitle>
+      <CardDescription>{t('description')}</CardDescription>
+      <CardAction>
+        <Button type="button" data-testid="account-token-create" onClick={() => setCreateOpen(true)}>
+          <Plus aria-hidden />
+          {t('create')}
+        </Button>
+      </CardAction>
+    </CardHeader>
+
+    <CardContent className="flex flex-col gap-4">
+      {error != null && <Alert variant="destructive">
+        <AlertTitle>{t('error')}</AlertTitle>
+        <AlertDescription>{error.message}</AlertDescription>
+      </Alert>}
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{t('col.display')}</TableHead>
+            <TableHead>{t('col.name')}</TableHead>
+            <TableHead>{t('col.created')}</TableHead>
+            <TableHead>{t('col.last-used')}</TableHead>
+            <TableHead>{t('col.expires')}</TableHead>
+            <TableHead>{t('col.status')}</TableHead>
+            <TableHead className="w-0"><span className="sr-only">{t('revoke')}</span></TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {loading === true && items.length === 0
+            ? <TableRow>
+              <TableCell colSpan={COLUMNS} className="text-muted-foreground py-8 text-center">
+                <Loader2 className="mx-auto size-4 animate-spin" aria-hidden />
+              </TableCell>
+            </TableRow>
+            : items.length === 0
+              ? <TableRow>
+                <TableCell colSpan={COLUMNS} className="text-muted-foreground py-8 text-center">
+                  {t('empty')}
+                </TableCell>
+              </TableRow>
+              : items.map(item => {
+                const status = tokenStatus(item)
+
+                return <TableRow
+                  key={item.id ?? item.display}
+                  data-testid="account-token-row"
+                  data-token-id={item.id}
+                >
+                  <TableCell className="font-mono text-xs">{item.display}</TableCell>
+                  <TableCell className="font-medium">{item.name}</TableCell>
+                  <TableCell>{formatMoment(item.createdAt, lng) ?? ''}</TableCell>
+                  <TableCell>{formatMoment(item.lastUsedAt, lng) ?? t('never-used')}</TableCell>
+                  <TableCell>{formatMoment(item.expiresAt, lng) ?? t('never')}</TableCell>
+                  <TableCell>
+                    <Badge variant={STATUS_VARIANT[status]}>{t(`status.${status}`)}</Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      data-testid="account-token-revoke"
+                      aria-label={t('revoke')}
+                      title={t('revoke')}
+                      disabled={status === 'revoked' || item.id == null}
+                      onClick={() => { if (item.id != null) setRevokeTarget(item.id) }}
+                    >
+                      <Trash2 aria-hidden />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              })}
+        </TableBody>
+      </Table>
+    </CardContent>
+
+    <Dialog open={dialogOpen} onOpenChange={changeDialog}>
+      <DialogContent closeLabel={t('dialog.cancel')}>
+        {issued != null
+          ? <>
+            <DialogHeader>
+              <DialogTitle>{t('dialog.issued-title')}</DialogTitle>
+              <DialogDescription>{t('dialog.issued-note')}</DialogDescription>
+            </DialogHeader>
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2">
+                <Input
+                  readOnly
+                  value={issued.token}
+                  data-testid="account-token-value"
+                  className="font-mono text-xs"
+                  onFocus={event => event.currentTarget.select()}
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  data-testid="account-token-copy"
+                  onClick={() => { void copy() }}
+                >
+                  {copied ? <Check aria-hidden /> : <Copy aria-hidden />}
+                  {copied ? t('dialog.copied') : t('dialog.copy')}
+                </Button>
+              </div>
+              {usageHint != null && usageHint !== ''
+                && <p className="text-muted-foreground text-sm">{usageHint}</p>}
+            </div>
+            <DialogFooter>
+              <Button type="button" onClick={closeDialog}>{t('dialog.done')}</Button>
+            </DialogFooter>
+          </>
+          : <form onSubmit={event => { void submit(event) }}>
+            <DialogHeader>
+              <DialogTitle>{t('dialog.title')}</DialogTitle>
+              <DialogDescription>{t('dialog.description')}</DialogDescription>
+            </DialogHeader>
+            <div className="flex flex-col gap-4 py-4">
+              <div className="flex flex-col gap-2">
+                <Label htmlFor={`${fieldId}-name`}>{t('dialog.name-label')}</Label>
+                <Input
+                  id={`${fieldId}-name`}
+                  data-testid="account-token-name"
+                  value={name}
+                  maxLength={AUTH_TOKEN_NAME_MAX}
+                  placeholder={t('dialog.name-placeholder')}
+                  onChange={event => setName(event.target.value)}
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor={`${fieldId}-expiry`}>{t('dialog.expiry-label')}</Label>
+                <Select value={expiry} onValueChange={setExpiry}>
+                  <SelectTrigger id={`${fieldId}-expiry`} className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {TOKEN_EXPIRY_CHOICES.map(days => <SelectItem key={days} value={String(days)}>
+                      {t(`dialog.expiry.${days}`)}
+                    </SelectItem>)}
+                    <SelectItem value={TOKEN_EXPIRY_NEVER}>{t('dialog.expiry.never')}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={closeDialog}>
+                {t('dialog.cancel')}
+              </Button>
+              <Button
+                type="submit"
+                data-testid="account-token-submit"
+                disabled={name.trim() === '' || submitting}
+              >
+                {submitting && <Loader2 className="animate-spin" aria-hidden />}
+                {t('dialog.create')}
+              </Button>
+            </DialogFooter>
+          </form>}
+      </DialogContent>
+    </Dialog>
+
+    <Dialog
+      open={revokeTarget != null}
+      onOpenChange={next => { if (!next) setRevokeTarget(null) }}
+    >
+      <DialogContent closeLabel={t('revoke-confirm.cancel')}>
+        <DialogHeader>
+          <DialogTitle>{t('revoke-confirm.title')}</DialogTitle>
+          <DialogDescription>{t('revoke-confirm.description')}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={() => setRevokeTarget(null)}>
+            {t('revoke-confirm.cancel')}
+          </Button>
+          <Button
+            type="button"
+            variant="destructive"
+            disabled={revoking}
+            onClick={() => { void confirmRevoke() }}
+          >
+            {revoking && <Loader2 className="animate-spin" aria-hidden />}
+            {t('revoke-confirm.confirm')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </Card>
+}

package/src/consts.ts

@@ -0,0 +1,21 @@
+/**
+ * The library-tier i18n resource this package registers under.
+ *
+ * Every string the panel renders is addressed as `lib : auth-token.panel.<key>`, so an application
+ * overrides any of them by registering the same resource at the app tier — see the README.
+ */
+export const AUTH_TOKEN_I18N = 'auth-token'
+
+/** The lifetimes the create form offers, in days. */
+export const TOKEN_EXPIRY_CHOICES = [30, 90, 365] as const
+
+/**
+ * The fourth choice, which is the absence of a lifetime.
+ *
+ * A `Select` carries strings, and `expiresIn` is simply omitted from the request body for this one
+ * — `CreateAccessToken` reads an absent lifetime as "no expiry".
+ */
+export const TOKEN_EXPIRY_NEVER = 'never'
+
+/** `CreateAccessToken.expiresIn` is seconds, while the choices above are days. */
+export const DAY_SECONDS = 24 * 60 * 60

package/src/helpers.ts

@@ -0,0 +1,50 @@
+import type { AccessTokenView } from '@owlmeans/auth-token'
+import type { AccessTokenStatus } from './types.js'
+
+/**
+ * A record's date field, whatever shape it arrived in.
+ *
+ * The record types say `Date`, and JSON over the wire says string — so a component that trusted
+ * the type would call `toLocaleString` on a string and throw. An unparseable value answers null
+ * rather than `Invalid Date`, which renders as those two words in every language.
+ */
+const toDate = (value: Date | string | null | undefined): Date | null => {
+  if (value == null) return null
+  const date = value instanceof Date ? value : new Date(value)
+
+  return Number.isNaN(date.getTime()) ? null : date
+}
+
+/**
+ * What a token's badge says.
+ *
+ * Revocation outranks expiry: a token revoked before its lifetime ran out is revoked, and saying
+ * "expired" about it would suggest it could be renewed. Both outrank `active`, which is what is
+ * left when neither happened.
+ */
+export const tokenStatus = (item: AccessTokenView): AccessTokenStatus => {
+  if (item.revokedAt != null) return 'revoked'
+  const expires = toDate(item.expiresAt)
+
+  return expires != null && expires.getTime() <= Date.now() ? 'expired' : 'active'
+}
+
+/**
+ * One of a record's moments, in the reader's own language, or null when there is none.
+ *
+ * Null is the caller's cue to render its own copy — `never` for a token without an expiry,
+ * `never-used` for one nothing has presented yet — because an empty cell says neither.
+ */
+export const formatMoment = (
+  value: Date | string | null | undefined, lng?: string
+): string | null => {
+  const date = toDate(value)
+  if (date == null) return null
+
+  try {
+    return new Intl.DateTimeFormat(lng, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+  } catch {
+    // An unknown language tag throws rather than falling back, and a date is not worth a blank row.
+    return date.toISOString()
+  }
+}

package/src/hooks/use-access-tokens.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useContext } from '@owlmeans/client'
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
+import { ResilientError } from '@owlmeans/error'
+import { authToken } from '@owlmeans/auth-token'
+import type {
+  AccessTokenList, AccessTokenView, CreateAccessToken, IssuedAccessToken
+} from '@owlmeans/auth-token'
+import type { AccessTokensAliases, UseAccessTokens } from '../types.js'
+
+/** The aliases `makeAuthTokenEntrypoints` declares, which is what an unconfigured host mounts. */
+const DEFAULT_ALIASES: AccessTokensAliases = {
+  list: authToken.list,
+  create: authToken.create,
+  revoke: authToken.revoke,
+}
+
+/**
+ * The I/O half of the token surface.
+ *
+ * Nothing thrown here reaches the caller. A panel that cannot list its tokens must still render —
+ * with the failure on it — because the alternative is an error boundary swallowing the whole
+ * screen and a user who cannot even see that revoking is still possible. Every failure lands in
+ * `error` instead, and the next operation clears it.
+ */
+export const useAccessTokens = (aliases?: AccessTokensAliases): UseAccessTokens => {
+  const ctx = useContext()
+  const list = aliases?.list ?? DEFAULT_ALIASES.list
+  const create = aliases?.create ?? DEFAULT_ALIASES.create
+  const revoke = aliases?.revoke ?? DEFAULT_ALIASES.revoke
+
+  const [items, setItems] = useState<AccessTokenView[]>([])
+  const [issued, setIssued] = useState<IssuedAccessToken | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  const reload = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await ctx.entrypoint<ClientEntrypoint<AccessTokenList>>(list).call()
+      setItems(result.items)
+    } catch (e) {
+      setError(ResilientError.ensure(e as Error))
+    } finally {
+      setLoading(false)
+    }
+  }, [ctx, list])
+
+  useEffect(() => { void reload() }, [reload])
+
+  /**
+   * The plaintext is kept so the panel can show it once. It is never persisted anywhere — a reload
+   * of the page is the same as pressing Done, which is the property that makes showing it safe.
+   */
+  const createToken = useCallback(async (body: CreateAccessToken) => {
+    setError(null)
+    try {
+      const result = await ctx.entrypoint<ClientEntrypoint<IssuedAccessToken>>(create).call({ body })
+      setIssued(result)
+      await reload()
+    } catch (e) {
+      setError(ResilientError.ensure(e as Error))
+    }
+  }, [ctx, create, reload])
+
+  const revokeToken = useCallback(async (id: string) => {
+    setError(null)
+    try {
+      await ctx.entrypoint<ClientEntrypoint<void>>(revoke).call({ params: { id } })
+      await reload()
+    } catch (e) {
+      setError(ResilientError.ensure(e as Error))
+    }
+  }, [ctx, revoke, reload])
+
+  const dismissIssued = useCallback(() => { setIssued(null) }, [])
+
+  return {
+    items, issued, loading, error,
+    reload, create: createToken, revoke: revokeToken, dismissIssued,
+  }
+}

package/src/i18n/be.json

@@ -0,0 +1,51 @@
+{
+  "panel": {
+    "title": "Токены доступу",
+    "description": "Доўгажывучыя токены, з якімі скрыпт ці інтэграцыя звяртаецца да API ад вашага імя.",
+    "create": "Стварыць токен",
+    "empty": "Токенаў доступу пакуль няма.",
+    "col": {
+      "display": "Токен",
+      "name": "Назва",
+      "created": "Створаны",
+      "last-used": "Апошняе выкарыстанне",
+      "expires": "Сканчаецца",
+      "status": "Статус"
+    },
+    "never": "Ніколі",
+    "never-used": "Не выкарыстоўваўся",
+    "status": {
+      "active": "Актыўны",
+      "expired": "Скончыўся",
+      "revoked": "Адкліканы"
+    },
+    "revoke": "Адклікаць",
+    "revoke-confirm": {
+      "title": "Адклікаць гэты токен?",
+      "description": "Усё, што яго яшчэ выкарыстоўвае, адразу перастане працаваць. Адрабіць гэта немагчыма.",
+      "cancel": "Скасаваць",
+      "confirm": "Адклікаць"
+    },
+    "dialog": {
+      "title": "Стварэнне токена доступу",
+      "description": "Назавіце яго паводле месца выкарыстання, каб пазней адрозніваць свае токены.",
+      "name-label": "Назва",
+      "name-placeholder": "Разгортванне CI",
+      "expiry-label": "Сканчаецца",
+      "expiry": {
+        "30": "Праз 30 дзён",
+        "90": "Праз 90 дзён",
+        "365": "Праз год",
+        "never": "Ніколі"
+      },
+      "create": "Стварыць",
+      "cancel": "Скасаваць",
+      "issued-title": "Ваш новы токен доступу",
+      "issued-note": "Скапіруйце яго зараз — больш ён не будзе паказаны.",
+      "copy": "Скапіраваць",
+      "copied": "Скапіравана",
+      "done": "Гатова"
+    },
+    "error": "Нешта пайшло не так"
+  }
+}

package/src/i18n/de.json

@@ -0,0 +1,51 @@
+{
+  "panel": {
+    "title": "Zugriffstoken",
+    "description": "Langlebige Token, mit denen ein Skript oder eine Integration die API in Ihrem Namen aufruft.",
+    "create": "Token erstellen",
+    "empty": "Noch keine Zugriffstoken vorhanden.",
+    "col": {
+      "display": "Token",
+      "name": "Name",
+      "created": "Erstellt",
+      "last-used": "Zuletzt verwendet",
+      "expires": "Läuft ab",
+      "status": "Status"
+    },
+    "never": "Nie",
+    "never-used": "Nie verwendet",
+    "status": {
+      "active": "Aktiv",
+      "expired": "Abgelaufen",
+      "revoked": "Widerrufen"
+    },
+    "revoke": "Widerrufen",
+    "revoke-confirm": {
+      "title": "Dieses Token widerrufen?",
+      "description": "Alles, was es noch verwendet, funktioniert sofort nicht mehr. Das lässt sich nicht rückgängig machen.",
+      "cancel": "Abbrechen",
+      "confirm": "Widerrufen"
+    },
+    "dialog": {
+      "title": "Zugriffstoken erstellen",
+      "description": "Benennen Sie es nach dem Einsatzort, damit Sie Ihre Token später auseinanderhalten.",
+      "name-label": "Name",
+      "name-placeholder": "CI-Deployment",
+      "expiry-label": "Läuft ab",
+      "expiry": {
+        "30": "In 30 Tagen",
+        "90": "In 90 Tagen",
+        "365": "In einem Jahr",
+        "never": "Nie"
+      },
+      "create": "Erstellen",
+      "cancel": "Abbrechen",
+      "issued-title": "Ihr neues Zugriffstoken",
+      "issued-note": "Kopieren Sie es jetzt – es wird nur dieses eine Mal angezeigt.",
+      "copy": "Kopieren",
+      "copied": "Kopiert",
+      "done": "Fertig"
+    },
+    "error": "Etwas ist schiefgelaufen"
+  }
+}