feat: Add AddAccountDialog component for account management UI
Two-tab dialog (setup token + credentials JSON) with full validation, error handling, provider select with fallback, and state reset on open. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas May
289
apps/web/src/components/AddAccountDialog.tsx
Normal file
289
apps/web/src/components/AddAccountDialog.tsx
Normal file
@@ -0,0 +1,289 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Loader2 } from 'lucide-react'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
import { trpc } from '@/lib/trpc'
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import { Textarea } from '@/components/ui/textarea'
|
||||||
|
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
|
||||||
|
|
||||||
|
interface AddAccountDialogProps {
|
||||||
|
open: boolean
|
||||||
|
onOpenChange: (open: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||||
|
|
||||||
|
export function AddAccountDialog({ open, onOpenChange }: AddAccountDialogProps) {
|
||||||
|
const [tab, setTab] = useState<'token' | 'credentials'>('token')
|
||||||
|
|
||||||
|
// Tab A — token
|
||||||
|
const [email, setEmail] = useState('')
|
||||||
|
const [token, setToken] = useState('')
|
||||||
|
const [provider, setProvider] = useState('claude')
|
||||||
|
|
||||||
|
// Tab B — credentials JSON
|
||||||
|
const [credEmail, setCredEmail] = useState('')
|
||||||
|
const [credProvider, setCredProvider] = useState('claude')
|
||||||
|
const [configJsonText, setConfigJsonText] = useState('')
|
||||||
|
const [credentialsText, setCredentialsText] = useState('')
|
||||||
|
|
||||||
|
// Validation errors
|
||||||
|
const [emailError, setEmailError] = useState('')
|
||||||
|
const [tokenError, setTokenError] = useState('')
|
||||||
|
const [credEmailError, setCredEmailError] = useState('')
|
||||||
|
const [configJsonError, setConfigJsonError] = useState('')
|
||||||
|
const [credentialsError, setCredentialsError] = useState('')
|
||||||
|
const [serverError, setServerError] = useState('')
|
||||||
|
|
||||||
|
const utils = trpc.useUtils()
|
||||||
|
const providersQuery = trpc.listProviderNames.useQuery()
|
||||||
|
|
||||||
|
const addByToken = trpc.addAccountByToken.useMutation({
|
||||||
|
onSuccess: (data) => {
|
||||||
|
const msg = data.upserted
|
||||||
|
? `Account updated — credentials refreshed for ${email}.`
|
||||||
|
: `Account added: ${email}.`
|
||||||
|
toast.success(msg)
|
||||||
|
void utils.systemHealthCheck.invalidate()
|
||||||
|
onOpenChange(false)
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
setServerError(err.message)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const addAccount = trpc.addAccount.useMutation({
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success(`Account added: ${credEmail}.`)
|
||||||
|
void utils.systemHealthCheck.invalidate()
|
||||||
|
onOpenChange(false)
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
if (err.message.toLowerCase().includes('already exists')) {
|
||||||
|
setCredEmailError(
|
||||||
|
"An account with this email already exists. Use 'Update credentials' on the existing account instead."
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
setServerError(err.message)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
setTab('token')
|
||||||
|
setEmail(''); setToken(''); setProvider('claude')
|
||||||
|
setCredEmail(''); setCredProvider('claude')
|
||||||
|
setConfigJsonText(''); setCredentialsText('')
|
||||||
|
setEmailError(''); setTokenError('')
|
||||||
|
setCredEmailError(''); setConfigJsonError(''); setCredentialsError('')
|
||||||
|
setServerError('')
|
||||||
|
}
|
||||||
|
}, [open])
|
||||||
|
|
||||||
|
function handleSubmit() {
|
||||||
|
setEmailError(''); setTokenError(''); setCredEmailError('')
|
||||||
|
setConfigJsonError(''); setCredentialsError(''); setServerError('')
|
||||||
|
|
||||||
|
if (tab === 'token') {
|
||||||
|
let hasError = false
|
||||||
|
if (email.trim() === '') {
|
||||||
|
setEmailError('Required')
|
||||||
|
hasError = true
|
||||||
|
} else if (!EMAIL_REGEX.test(email)) {
|
||||||
|
setEmailError('Enter a valid email address')
|
||||||
|
hasError = true
|
||||||
|
}
|
||||||
|
if (token.trim() === '') {
|
||||||
|
setTokenError('Required')
|
||||||
|
hasError = true
|
||||||
|
}
|
||||||
|
if (hasError) return
|
||||||
|
addByToken.mutate({ email, token, provider })
|
||||||
|
} else {
|
||||||
|
let hasError = false
|
||||||
|
if (credEmail.trim() === '') {
|
||||||
|
setCredEmailError('Required')
|
||||||
|
hasError = true
|
||||||
|
} else if (!EMAIL_REGEX.test(credEmail)) {
|
||||||
|
setCredEmailError('Enter a valid email address')
|
||||||
|
hasError = true
|
||||||
|
}
|
||||||
|
if (configJsonText.trim() !== '') {
|
||||||
|
try {
|
||||||
|
JSON.parse(configJsonText)
|
||||||
|
} catch {
|
||||||
|
setConfigJsonError('Invalid JSON')
|
||||||
|
hasError = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (credentialsText.trim() !== '') {
|
||||||
|
try {
|
||||||
|
JSON.parse(credentialsText)
|
||||||
|
} catch {
|
||||||
|
setCredentialsError('Invalid JSON')
|
||||||
|
hasError = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (hasError) return
|
||||||
|
addAccount.mutate({
|
||||||
|
email: credEmail,
|
||||||
|
provider: credProvider,
|
||||||
|
configJson: configJsonText.trim() || undefined,
|
||||||
|
credentials: credentialsText.trim() || undefined,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isPending = tab === 'token' ? addByToken.isPending : addAccount.isPending
|
||||||
|
|
||||||
|
function renderProviderSelect(value: string, onChange: (v: string) => void) {
|
||||||
|
if (providersQuery.isError) {
|
||||||
|
return <Input value={value} onChange={(e) => onChange(e.target.value)} />
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Select value={value} onValueChange={onChange}>
|
||||||
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{(providersQuery.data ?? ['claude']).map((p) => (
|
||||||
|
<SelectItem key={p} value={p}>{p}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Add Account</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="flex border-b">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setTab('token')
|
||||||
|
setCredEmail('')
|
||||||
|
setCredProvider('claude')
|
||||||
|
setConfigJsonText('')
|
||||||
|
setCredentialsText('')
|
||||||
|
setCredEmailError('')
|
||||||
|
setConfigJsonError('')
|
||||||
|
setCredentialsError('')
|
||||||
|
setServerError('')
|
||||||
|
}}
|
||||||
|
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||||
|
tab === 'token'
|
||||||
|
? 'border-primary text-foreground'
|
||||||
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
By token
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setTab('credentials')
|
||||||
|
setEmail('')
|
||||||
|
setToken('')
|
||||||
|
setEmailError('')
|
||||||
|
setTokenError('')
|
||||||
|
setServerError('')
|
||||||
|
}}
|
||||||
|
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||||
|
tab === 'credentials'
|
||||||
|
? 'border-primary text-foreground'
|
||||||
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
By credentials JSON
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{tab === 'token' ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Email</Label>
|
||||||
|
<Input
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
placeholder="user@example.com"
|
||||||
|
/>
|
||||||
|
{emailError && <p className="text-sm text-destructive">{emailError}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Setup token (from `claude setup-token`)</Label>
|
||||||
|
<Input
|
||||||
|
value={token}
|
||||||
|
onChange={(e) => setToken(e.target.value)}
|
||||||
|
/>
|
||||||
|
{tokenError && <p className="text-sm text-destructive">{tokenError}</p>}
|
||||||
|
{serverError && <p className="text-sm text-destructive">{serverError}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Provider</Label>
|
||||||
|
{renderProviderSelect(provider, setProvider)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Email</Label>
|
||||||
|
<Input
|
||||||
|
value={credEmail}
|
||||||
|
onChange={(e) => setCredEmail(e.target.value)}
|
||||||
|
placeholder="user@example.com"
|
||||||
|
/>
|
||||||
|
{credEmailError && <p className="text-sm text-destructive">{credEmailError}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Provider</Label>
|
||||||
|
{renderProviderSelect(credProvider, setCredProvider)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Config JSON (`.claude.json` content)</Label>
|
||||||
|
<Textarea
|
||||||
|
value={configJsonText}
|
||||||
|
onChange={(e) => setConfigJsonText(e.target.value)}
|
||||||
|
placeholder={`{ "oauthAccount": { ... } }`}
|
||||||
|
/>
|
||||||
|
{configJsonError && <p className="text-sm text-destructive">{configJsonError}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Credentials JSON (`.credentials.json` content)</Label>
|
||||||
|
<Textarea
|
||||||
|
value={credentialsText}
|
||||||
|
onChange={(e) => setCredentialsText(e.target.value)}
|
||||||
|
placeholder={`{ "claudeAiOauth": { ... } }`}
|
||||||
|
/>
|
||||||
|
{credentialsError && <p className="text-sm text-destructive">{credentialsError}</p>}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Run `cw account extract` in your terminal to obtain these values.
|
||||||
|
</p>
|
||||||
|
{serverError && <p className="text-sm text-destructive">{serverError}</p>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={isPending}
|
||||||
|
onClick={handleSubmit}
|
||||||
|
>
|
||||||
|
{isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Add Account
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user