103 lines
4.3 KiB
TypeScript
103 lines
4.3 KiB
TypeScript
import { ArrowLeft, Check, Code2, Copy, KeyRound } from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
import { useNavigate, useParams } from 'react-router-dom'
|
|
import { urmiOtpApi, type UrmiOtpDocumentation } from '../../lib/api'
|
|
|
|
export function UrmiOtpDocsPage() {
|
|
const { projectId = '' } = useParams()
|
|
const navigate = useNavigate()
|
|
const [docs, setDocs] = useState<UrmiOtpDocumentation | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState('')
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
useEffect(() => {
|
|
urmiOtpApi.documentation(projectId)
|
|
.then(setDocs)
|
|
.catch((reason) => setError(reason instanceof Error ? reason.message : 'Unable to load documentation'))
|
|
.finally(() => setLoading(false))
|
|
}, [projectId])
|
|
|
|
if (loading) return <div className="auth-loading">Loading API documentation…</div>
|
|
if (!docs) return <section className="panel"><p className="auth-error">{error}</p></section>
|
|
|
|
const requestExample = JSON.stringify(docs.api.example, null, 2)
|
|
|
|
async function copyExample() {
|
|
await navigator.clipboard.writeText(requestExample)
|
|
setCopied(true)
|
|
window.setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
|
|
return (
|
|
<div className="urmiotp-docs-page">
|
|
<button className="text-button otp-back" onClick={() => navigate('/console/agent/urmiotp')}>
|
|
<ArrowLeft size={14} /> Back to projects
|
|
</button>
|
|
<div className="account-heading">
|
|
<span className="eyebrow">UrmiOTP · {docs.project.project_name}</span>
|
|
<h1>API documentation</h1>
|
|
<p className="otp-message-label">
|
|
Message label: <strong>{docs.project.message_label}</strong>
|
|
<span> — your product identification in each message. URMI branding remains unchanged.</span>
|
|
</p>
|
|
<p>Unified verification templates for login, recovery, account changes, transactions, and devices.</p>
|
|
</div>
|
|
|
|
<section className="panel otp-api-overview">
|
|
<div className="panel-heading">
|
|
<div><h2>Generate verification OTP</h2><p>{docs.api.summary}</p></div>
|
|
<span className="explorer-method">{docs.api.method}</span>
|
|
</div>
|
|
<div className="explorer-field-row"><span>Endpoint</span><code>{docs.api.path}</code></div>
|
|
<div className="otp-api-notice">
|
|
<Code2 size={16} />
|
|
<span>
|
|
SMS delivery uses the DLT-approved URMI OTP template. <code>template_type</code> is for
|
|
categorization; the sent text matches <code>message_preview</code> in the API response.
|
|
</span>
|
|
</div>
|
|
<div className="otp-parameter-list">
|
|
{Object.entries(docs.api.parameters).map(([name, description]) => (
|
|
<div key={name}><code>{name}</code><span>{description}</span></div>
|
|
))}
|
|
</div>
|
|
<div className="otp-code-heading">
|
|
<strong>Request body</strong>
|
|
<button className="secondary-button" onClick={copyExample}><Copy size={13} /> {copied ? 'Copied' : 'Copy'}</button>
|
|
</div>
|
|
<pre className="explorer-code">{requestExample}</pre>
|
|
</section>
|
|
|
|
<div className="otp-template-grid">
|
|
{docs.templates.map((template, index) => (
|
|
<section className="panel otp-template-card" key={template.type}>
|
|
<div className="otp-template-number">{String(index + 1).padStart(2, '0')}</div>
|
|
<div className="panel-heading">
|
|
<div><h2>{template.name}</h2><p><code>{template.type}</code></p></div>
|
|
<KeyRound size={17} />
|
|
</div>
|
|
<div className="otp-template-copy">
|
|
<span>Approved content</span>
|
|
<p>{template.content}</p>
|
|
</div>
|
|
<div className="otp-template-copy sample">
|
|
<span>Sample</span>
|
|
<p>{template.sample}</p>
|
|
</div>
|
|
<div className="otp-template-columns">
|
|
<div>
|
|
<strong>Use for</strong>
|
|
<ul>{template.uses.map((use) => <li key={use}><Check size={12} /> {use}</li>)}</ul>
|
|
</div>
|
|
<div>
|
|
<strong>Variables</strong>
|
|
<ol>{template.variables.map((variable) => <li key={variable}>{variable}</li>)}</ol>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|