Skip to content

Commit 7f2f43b

Browse files
ObservedObserverObservedObserver
committed
feat: settings page
1 parent 220ac60 commit 7f2f43b

File tree

2 files changed

+295
-113
lines changed

2 files changed

+295
-113
lines changed

‎async-code-web/app/page.tsx‎

Lines changed: 27 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
"use client";
22

33
import { useState, useEffect } from "react";
4-
import { Github, GitBranch, Code2, ExternalLink, CheckCircle, Clock, XCircle, AlertCircle, FileText, Eye, GitCommit, Bell } from "lucide-react";
4+
import { Github, GitBranch, Code2, ExternalLink, CheckCircle, Clock, XCircle, AlertCircle, FileText, Eye, GitCommit, Bell, Settings } from "lucide-react";
5+
import Link from "next/link";
56
import { Button } from "@/components/ui/button";
67
import { Input } from "@/components/ui/input";
78
import { Textarea } from "@/components/ui/textarea";
@@ -76,12 +77,9 @@ export default function Home() {
7677
const [currentTask, setCurrentTask] = useState<Task | null>(null);
7778
const [gitDiff, setGitDiff] = useState("");
7879
const [isLoading, setIsLoading] = useState(false);
79-
const [showTokenInput, setShowTokenInput] = useState(false);
8080
const [showNotification, setShowNotification] = useState(false);
8181
const [notificationMessage, setNotificationMessage] = useState("");
8282
const [diffStats, setDiffStats] = useState({ additions: 0, deletions: 0, files: 0 });
83-
const [tokenValidation, setTokenValidation] = useState<any>(null);
84-
const [isValidatingToken, setIsValidatingToken] = useState(false);
8583

8684
const API_BASE = typeof window !== 'undefined' && window.location.hostname === 'localhost'
8785
? 'http://localhost:5000'
@@ -202,54 +200,7 @@ export default function Home() {
202200
}
203201
};
204202

205-
const handleValidateToken = async () => {
206-
if (!githubToken.trim() || !repoUrl.trim()) {
207-
alert('Please provide both GitHub token and repository URL');
208-
return;
209-
}
210203

211-
setIsValidatingToken(true);
212-
try {
213-
const response = await fetch(`${API_BASE}/validate-token`, {
214-
method: 'POST',
215-
headers: {
216-
'Content-Type': 'application/json',
217-
},
218-
body: JSON.stringify({
219-
github_token: githubToken,
220-
repo_url: repoUrl
221-
})
222-
});
223-
224-
const data = await response.json();
225-
setTokenValidation(data);
226-
227-
if (data.status === 'success') {
228-
const permissions = data.repo?.permissions || {};
229-
const permissionSummary = [
230-
`User: ${data.user}`,
231-
`Repo: ${data.repo?.name || 'N/A'}`,
232-
`Read: ${permissions.read ? 'Yes' : 'No'}`,
233-
`Write: ${permissions.write ? 'Yes' : 'No'}`,
234-
`Create Branches: ${permissions.create_branches ? 'Yes' : 'No'}`,
235-
`Admin: ${permissions.admin ? 'Yes' : 'No'}`
236-
].join('\n');
237-
238-
if (permissions.create_branches) {
239-
alert(`✅ Token is fully valid for PR creation!\n\n${permissionSummary}`);
240-
} else {
241-
alert(`⚠️ Token validation partial success!\n\n${permissionSummary}\n\n❌ Cannot create branches - this will prevent PR creation.\nPlease ensure your token has 'repo' scope (not just 'public_repo').`);
242-
}
243-
} else {
244-
alert(`❌ Token validation failed: ${data.error}`);
245-
}
246-
} catch (error) {
247-
alert(`Error validating token: ${error}`);
248-
setTokenValidation({ error: String(error) });
249-
} finally {
250-
setIsValidatingToken(false);
251-
}
252-
};
253204

254205
const handleCreatePR = async () => {
255206
if (!currentTask || currentTask.status !== "completed") return;
@@ -331,15 +282,15 @@ export default function Home() {
331282
<p className="text-sm text-slate-500">Claude Code & Codex CLI Integration</p>
332283
</div>
333284
</div>
334-
<Button
335-
variant="outline"
336-
onClick={() => setShowTokenInput(!showTokenInput)}
337-
className="gap-2"
338-
>
339-
<Github className="w-4 h-4" />
340-
{showTokenInput && "Hide"}
341-
{!showTokenInput && "Setup"} Token
342-
</Button>
285+
<Link href="/settings">
286+
<Button
287+
variant="outline"
288+
className="gap-2"
289+
>
290+
<Settings className="w-4 h-4" />
291+
Settings
292+
</Button>
293+
</Link>
343294
</div>
344295
</div>
345296
</header>
@@ -356,57 +307,6 @@ export default function Home() {
356307
</div>
357308

358309
<div className="space-y-6">
359-
{/* GitHub Token Input */}
360-
{showTokenInput && (
361-
<Card className="border-blue-200 bg-blue-50/50">
362-
<CardHeader className="pb-3">
363-
<CardTitle className="text-lg flex items-center gap-2">
364-
<Github className="w-5 h-5" />
365-
GitHub Authentication
366-
</CardTitle>
367-
<CardDescription>
368-
Enter your GitHub Personal Access Token to enable repository access and PR creation
369-
</CardDescription>
370-
</CardHeader>
371-
<CardContent>
372-
<div className="space-y-2">
373-
<Label htmlFor="github-token">Personal Access Token</Label>
374-
<Input
375-
id="github-token"
376-
type="password"
377-
value={githubToken}
378-
onChange={(e) => setGithubToken(e.target.value)}
379-
placeholder="ghp_..."
380-
className="font-mono"
381-
/>
382-
<p className="text-sm text-blue-600">
383-
Requires repository access permissions for cloning and creating pull requests
384-
</p>
385-
</div>
386-
<div className="flex gap-2 mt-4">
387-
<Button
388-
onClick={handleValidateToken}
389-
disabled={isValidatingToken || !githubToken.trim() || !repoUrl.trim()}
390-
variant="outline"
391-
size="sm"
392-
className="gap-2"
393-
>
394-
<CheckCircle className="w-3 h-3" />
395-
{isValidatingToken ? 'Validating...' : 'Validate Token'}
396-
</Button>
397-
{tokenValidation && (
398-
<div className="text-xs text-slate-600 flex items-center">
399-
{tokenValidation.status === 'success' ? (
400-
<span className="text-green-600">✅ Valid</span>
401-
) : (
402-
<span className="text-red-600">❌ Invalid</span>
403-
)}
404-
</div>
405-
)}
406-
</div>
407-
</CardContent>
408-
</Card>
409-
)}
410310

411311
{/* Main Input Card */}
412312
<Card>
@@ -415,6 +315,20 @@ export default function Home() {
415315
<CardDescription>
416316
Describe the feature, bug fix, or enhancement you want Claude to implement
417317
</CardDescription>
318+
{!githubToken.trim() && (
319+
<div className="p-3 bg-amber-50 border border-amber-200 rounded-md">
320+
<div className="flex items-start gap-2 text-amber-800">
321+
<Github className="h-4 w-4 mt-0.5 flex-shrink-0" />
322+
<div className="text-sm">
323+
<strong>GitHub Token Required:</strong> Please configure your GitHub token in{" "}
324+
<Link href="/settings" className="underline hover:text-amber-900">
325+
Settings
326+
</Link>{" "}
327+
to enable code generation.
328+
</div>
329+
</div>
330+
</div>
331+
)}
418332
</CardHeader>
419333
<CardContent className="space-y-6">
420334
<div className="space-y-2">
@@ -473,10 +387,10 @@ export default function Home() {
473387
</SelectTrigger>
474388
<SelectContent>
475389
<SelectItem value="claude">
476-
Claude Code - Anthropic's advanced coding model
390+
Claude Code - Anthropic&apos;s advanced coding model
477391
</SelectItem>
478392
<SelectItem value="codex">
479-
Codex CLI - OpenAI's lightweight coding agent
393+
Codex CLI - OpenAI&apos;s lightweight coding agent
480394
</SelectItem>
481395
</SelectContent>
482396
</Select>

0 commit comments

Comments
 (0)