File size: 2,728 Bytes
1f21206 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import type { FormEvent } from 'react'
import { useState } from 'react'
import { saveAndVerifyH5Connection } from '../../lib/desktopRuntime'
import { Button } from '../shared/Button'
import { Input } from '../shared/Input'
type H5ConnectionViewProps = {
initialServerUrl?: string | null
error?: string | null
onConnected: () => void
}
export function H5ConnectionView({
initialServerUrl,
error: initialError,
onConnected,
}: H5ConnectionViewProps) {
const [serverUrl, setServerUrl] = useState(initialServerUrl ?? '')
const [token, setToken] = useState('')
const [error, setError] = useState(initialError ?? '')
const [submitting, setSubmitting] = useState(false)
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
setSubmitting(true)
setError('')
try {
await saveAndVerifyH5Connection(serverUrl, token)
onConnected()
} catch (submitError) {
setError(
submitError instanceof Error ? submitError.message : 'Unable to connect to the H5 server.',
)
} finally {
setSubmitting(false)
}
}
return (
<div className="h-screen flex items-center justify-center bg-[var(--color-surface)] px-6">
<section className="w-full max-w-md rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-6 shadow-[var(--shadow-md)]">
<div className="mb-5">
<h1 className="text-lg font-semibold text-[var(--color-text-primary)]">
Connect to H5 Access
</h1>
<p className="mt-2 text-sm text-[var(--color-text-secondary)]">
Enter the server URL and H5 access token from the desktop app.
</p>
</div>
<form className="space-y-4" onSubmit={handleSubmit}>
<Input
label="Server URL"
placeholder="https://chat.example.com"
value={serverUrl}
onChange={(event) => setServerUrl(event.target.value)}
autoComplete="url"
required
/>
<Input
label="H5 Token"
type="password"
placeholder="h5_..."
value={token}
onChange={(event) => setToken(event.target.value)}
autoComplete="current-password"
required
/>
{error ? (
<div className="rounded-lg border border-[var(--color-error)]/30 bg-[var(--color-error)]/8 px-3 py-2 text-sm text-[var(--color-error)]">
{error}
</div>
) : null}
<Button type="submit" size="lg" className="w-full" loading={submitting}>
Connect
</Button>
</form>
</section>
</div>
)
}
|