skypod / src / realm / client / components / connection-manager.tsx

import {useSignal} from '@preact/signals'
import {nanoid} from 'nanoid'
import {useCallback} from 'preact/hooks'

import {generateSignableJwt} from '#common/crypto/jwks'
import {jwtSchema} from '#common/crypto/jwts'
import {RealmBrand} from '#realm/protocol/index'

import {useRealmConnection} from '../context-connection'
import {useRealmIdentity} from '../context-identity'

export const RealmConnectionManager: preact.FunctionComponent = () => {
  const {identity} = useRealmIdentity()
  const connection = useRealmConnection()

  const invitation = useSignal<string>()
  const register = useCallback(() => {
    console.debug('register realm')
    connection.connectopts.value = {
      realmid: RealmBrand.generate(),
      register: true,
    }
  }, [connection.connectopts])

  const exchange = useCallback(() => {
    console.debug('exchange invitation:', invitation.value)
    jwtSchema
      .parseAsync(invitation.value)
      .then((token) => {
        connection.connectopts.value = {
          realmid: RealmBrand.parse(token.claims.aud),
          invitation: invitation.value,
        }
      })
      .catch((exc: unknown) => {
        console.error('couldnt exchange', exc)
      })
  }, [invitation, connection.connectopts])

  const generate = useCallback(() => {
    if (!connection.realm.value) return

    identity
      .sign(
        generateSignableJwt({
          aud: connection.realm.value.realmid,
          iss: identity.identid,
          sub: 'invitation',
          jti: nanoid(),
          exp: Date.now() + 5 * 60,
        }),
      )
      .then((token) => (invitation.value = token))
      .catch((exc: unknown) => {
        console.error('error generating invite', exc)
      })
  }, [invitation, connection.realm, identity])

  return connection.realm.value ? (
    <div>
      <pre>
        {connection.connected.value ? ' 🟢 Connected: ' : ' 🔴 Disconnected: '}
        {connection.realm.value.realmid} '/' {identity.identid} '/' {identity.latest}
      </pre>
      <textarea value={invitation.value} />
      <br />
      <button type="button" onClick={generate}>
        Generate Invitation
      </button>
    </div>
  ) : (
    <div>
      <h1>
        Connection: <code>NONE</code>
      </h1>
      <p>
        Generate a new realm:{' '}
        <button type="button" onClick={register}>
          Register
        </button>
      </p>
      <p>
        Exchange an invite:
        <textarea value={invitation.value} onInput={(e) => (invitation.value = e.currentTarget.value)} />
        <button type="button" onClick={exchange}>
          Exchange
        </button>
      </p>
    </div>
  )
}