Module-Rust/client/src/routes/player/Account.jsx

// ── The player's own Rust identity ────────────────────────────────────────
//
// `/player/rust` — where a signed-in player links the Steam account they play
// on. It is the one page in this module a player is asked to *do* something on,
// and the thing they are doing matters more than it looks: from phase 7 the link
// is what in-game permissions are granted against, and from phase 13 it is what
// rewards are handed to.
//
// **A player route renders no layout of its own.** Core wraps `/player/*` in its
// own portal chrome, so this page starts at a heading — unlike the public pages
// in this module, which render `PublicLayout` themselves.
//
// The three-step instruction at the top is not decoration. Nothing else on the
// site tells a player that the code comes from the game, and a code field with no
// explanation is a code field nobody can use.

import { useCallback, useState } from 'react'
import { ErrorState, Loading, useAsync } from '../../core.js'
import { ago, shortId } from '../../lib/format.js'
import api from '../../api.js'

/** The code field, and the four answers it can produce. */
function LinkForm({ onLinked }) {
  const [code, setCode] = useState('')
  const [busy, setBusy] = useState(false)
  const [message, setMessage] = useState('')
  const [error, setError] = useState('')

  async function submit(event) {
    event.preventDefault()
    if (!code.trim() || busy) return

    setBusy(true)
    setMessage('')
    setError('')

    try {
      const result = await api.playerLinks.confirm(code.trim())
      setMessage(
        result.already
          ? 'That account was already linked to you.'
          : `Linked ${result.link.name || shortId(result.link.steamId)}.`,
      )
      setCode('')
      await onLinked()
    } catch (err) {
      // Every refusal the server sends is already a sentence aimed at a player —
      // "run /link again", "run /unlink in game", "try again in a minute" — so
      // this renders it rather than replacing it with one of its own. The three
      // are not interchangeable, and a page that flattened them into "could not
      // link that code" would send a player back to the server that is down.
      setError(err.message || 'Could not link that code.')
    } finally {
      setBusy(false)
    }
  }

  return (
    <form onSubmit={submit} style={{ marginTop: 18 }}>
      <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
        <label style={{ display: 'block' }}>
          <span className="field-label" style={{ display: 'block', marginBottom: 6 }}>Link code</span>
          <input
            value={code}
            onChange={(e) => setCode(e.target.value.toUpperCase())}
            placeholder="K7M2PQ"
            // The plugin's alphabet has no O, 0, I or 1, so a player reading a
            // code off their screen cannot produce one — but they can type a
            // lowercase one, and the code is matched case-insensitively at the
            // other end. Upper-casing here makes what they typed look like what
            // they were shown.
            maxLength={12}
            autoComplete="off"
            spellCheck={false}
            className="input"
            style={{ textTransform: 'uppercase', letterSpacing: '0.18em', width: 160 }}
          />
        </label>
        <button type="submit" className="btn" disabled={busy || !code.trim()}>
          {busy ? 'Checking…' : 'Link account'}
        </button>
      </div>

      {message && (
        <p className="sans" style={{ color: '#7fd0a4', fontSize: '0.86rem', margin: '10px 0 0' }}>{message}</p>
      )}
      {error && (
        <p className="sans" style={{ color: '#e05a5a', fontSize: '0.86rem', margin: '10px 0 0' }}>{error}</p>
      )}
    </form>
  )
}

/** One linked account, and the control that releases it. */
function LinkRow({ link, onRemoved }) {
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState('')

  async function remove() {
    setBusy(true)
    setError('')
    try {
      await api.playerLinks.remove(link.steamId)
      await onRemoved()
    } catch (err) {
      setError(err.message || 'Could not unlink that account.')
      setBusy(false)
    }
  }

  return (
    <li className="panel" style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 14 }}>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div className="display" style={{ fontSize: '1rem', color: 'var(--head)' }}>
          {link.name || shortId(link.steamId)}
        </div>
        <div className="sans dim" style={{ fontSize: '0.76rem', marginTop: 2 }}>
          {link.steamId} · linked {ago(link.linkedAt)}
          {link.serverId ? ` on ${link.serverId}` : ''}
        </div>
        {error && (
          <p className="sans" style={{ color: '#e05a5a', fontSize: '0.8rem', margin: '6px 0 0' }}>{error}</p>
        )}
      </div>
      <button type="button" className="btn ghost" onClick={remove} disabled={busy} style={{ flex: 'none' }}>
        {busy ? 'Unlinking…' : 'Unlink'}
      </button>
    </li>
  )
}

export default function Account() {
  // `useAsync` rather than this module's `usePolled`: nothing here changes unless
  // the person looking at it changes it, and a page that re-asked every twenty
  // seconds would be asking a question nobody is waiting on.
  //
  // **Core's `useAsync` has no `refresh`** — it re-runs when its deps change and
  // that is the whole of its interface — so a counter in the deps is how a page
  // re-reads after its own write. It blanks while it re-reads, which is right
  // here and is exactly what made it wrong for a poll (see `hooks/usePolled.js`).
  const [reloads, setReloads] = useState(0)
  const { data, loading, error } = useAsync(() => api.playerLinks.list(), [reloads])
  const links = data ? data.links : []

  const reload = useCallback(() => setReloads((n) => n + 1), [])

  return (
    <div>
      <div className="field-label" style={{ marginBottom: 12 }}>Steam accounts</div>

      <p className="sans dim" style={{ margin: 0, fontSize: '0.86rem', maxWidth: '60ch' }}>
        Linking tells this site which Steam account is yours, so your play on our servers appears
        under your name here — and so rewards and permissions the site hands out can reach you in
        game.
      </p>

      <ol className="sans dim" style={{ fontSize: '0.86rem', marginTop: 14, paddingLeft: 20, maxWidth: '60ch' }}>
        <li>Join any of our Rust servers and type <code>/link</code> in chat.</li>
        <li>The server replies with a six-character code, only you can see it, and it lasts five minutes.</li>
        <li>Type it below. It works once.</li>
      </ol>

      <LinkForm onLinked={reload} />

      {loading && <Loading />}
      {error && <ErrorState error={error} />}

      {data && links.length > 0 && (
        <ul style={{ listStyle: 'none', margin: '22px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {links.map((link) => (
            <LinkRow key={link.steamId} link={link} onRemoved={reload} />
          ))}
        </ul>
      )}

      {data && links.length > 0 && (
        <p className="sans dim" style={{ fontSize: '0.76rem', marginTop: 14, maxWidth: '60ch' }}>
          A link covers every server this community runs — a Steam account is one person wherever
          they play, while stats are kept per server and per wipe. You can also type
          {' '}<code>/unlink</code> in game to release one.
        </p>
      )}

      {data && links.length === 0 && (
        <p className="sans dim" style={{ fontSize: '0.8rem', marginTop: 18 }}>
          No Steam account is linked to this profile yet.
        </p>
      )}
    </div>
  )
}