feat: rewrite project creation modal to remove Firebase auth
This commit is contained in:
@@ -21,7 +21,6 @@ import {
|
||||
ChevronLeft
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { auth } from '@/lib/firebase/config';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
|
||||
@@ -40,7 +39,6 @@ export function ProjectCreationModal({
|
||||
}: ProjectCreationModalProps) {
|
||||
const router = useRouter();
|
||||
|
||||
// Steps: 1 = Name, 2 = GitHub, 3 = Instructions
|
||||
const [step, setStep] = useState(1);
|
||||
const [productName, setProductName] = useState('');
|
||||
const [selectedRepo, setSelectedRepo] = useState<any>(null);
|
||||
@@ -51,66 +49,40 @@ export function ProjectCreationModal({
|
||||
const [githubRepos, setGithubRepos] = useState<any[]>([]);
|
||||
const [loadingGithub, setLoadingGithub] = useState(false);
|
||||
|
||||
// Check GitHub connection on mount and when moving to step 2
|
||||
useEffect(() => {
|
||||
async function checkGitHub() {
|
||||
if (!open || step !== 2) return;
|
||||
|
||||
setLoadingGithub(true);
|
||||
try {
|
||||
const user = auth.currentUser;
|
||||
if (!user) {
|
||||
console.log('[ProjectModal] No user found');
|
||||
setLoadingGithub(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const token = await user.getIdToken();
|
||||
|
||||
const statusResponse = await fetch('/api/github/connect', {
|
||||
headers: { 'Authorization': `Bearer ${token}` },
|
||||
});
|
||||
|
||||
const statusResponse = await fetch('/api/github/connect');
|
||||
if (statusResponse.ok) {
|
||||
const statusData = await statusResponse.json();
|
||||
console.log('[ProjectModal] GitHub status:', statusData);
|
||||
const isConnected = statusData.connected || false;
|
||||
setGithubConnected(isConnected);
|
||||
|
||||
if (isConnected) {
|
||||
const reposResponse = await fetch('/api/github/repos', {
|
||||
headers: { 'Authorization': `Bearer ${token}` },
|
||||
});
|
||||
|
||||
const reposResponse = await fetch('/api/github/repos');
|
||||
if (reposResponse.ok) {
|
||||
const repos = await reposResponse.json(); // API returns array directly, not { repos: [] }
|
||||
console.log('[ProjectModal] GitHub repos loaded:', repos.length, 'repos');
|
||||
const repos = await reposResponse.json();
|
||||
setGithubRepos(Array.isArray(repos) ? repos : []);
|
||||
} else {
|
||||
console.error('[ProjectModal] Failed to fetch repos:', reposResponse.status);
|
||||
setGithubRepos([]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('[ProjectModal] GitHub not connected');
|
||||
setGithubRepos([]);
|
||||
}
|
||||
} else {
|
||||
console.error('[ProjectModal] Failed to check GitHub status:', statusResponse.status);
|
||||
setGithubConnected(false);
|
||||
setGithubRepos([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[ProjectModal] Error checking GitHub:', error);
|
||||
console.error('GitHub check error:', error);
|
||||
setGithubConnected(false);
|
||||
setGithubRepos([]);
|
||||
} finally {
|
||||
setLoadingGithub(false);
|
||||
}
|
||||
}
|
||||
|
||||
checkGitHub();
|
||||
}, [open, step]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) setTimeout(resetModal, 200);
|
||||
}, [open]);
|
||||
|
||||
const resetModal = () => {
|
||||
setStep(1);
|
||||
setProductName('');
|
||||
@@ -119,36 +91,18 @@ export function ProjectCreationModal({
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
// Reset after closing animation
|
||||
setTimeout(resetModal, 200);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const handleCreateProject = async () => {
|
||||
if (!productName.trim()) {
|
||||
toast.error('Product name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const user = auth.currentUser;
|
||||
if (!user) {
|
||||
toast.error('You must be signed in');
|
||||
return;
|
||||
}
|
||||
|
||||
const token = await user.getIdToken();
|
||||
|
||||
const projectData = {
|
||||
projectName: productName.trim(),
|
||||
projectType: selectedRepo ? 'existing' : 'scratch',
|
||||
slug: productName.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
|
||||
product: {
|
||||
name: productName,
|
||||
},
|
||||
product: { name: productName },
|
||||
...(selectedRepo && {
|
||||
githubRepo: selectedRepo.full_name,
|
||||
githubRepoId: selectedRepo.id,
|
||||
@@ -159,10 +113,7 @@ export function ProjectCreationModal({
|
||||
|
||||
const response = await fetch('/api/projects/create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(projectData),
|
||||
});
|
||||
|
||||
@@ -170,7 +121,7 @@ export function ProjectCreationModal({
|
||||
const data = await response.json();
|
||||
setCreatedProjectId(data.projectId);
|
||||
toast.success('Project created!');
|
||||
setStep(3); // Move to instructions
|
||||
setStep(3);
|
||||
} else {
|
||||
const error = await response.json();
|
||||
toast.error(error.error || 'Failed to create project');
|
||||
@@ -212,7 +163,6 @@ export function ProjectCreationModal({
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6 py-4">
|
||||
{/* Step 1: Name */}
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
@@ -224,44 +174,24 @@ export function ProjectCreationModal({
|
||||
onChange={(e) => setProductName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && productName.trim()) {
|
||||
if (githubConnected) {
|
||||
setStep(2);
|
||||
} else {
|
||||
handleCreateProject();
|
||||
}
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
onClick={() => setStep(2)}
|
||||
disabled={!productName.trim()}
|
||||
className="flex-1"
|
||||
>
|
||||
<Button onClick={() => setStep(2)} disabled={!productName.trim()} className="w-full">
|
||||
Next: {githubConnected ? 'Select Repository' : 'Connect GitHub'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
{githubConnected
|
||||
? 'Connect your GitHub repository (optional)'
|
||||
: 'Connect GitHub or skip to continue'}
|
||||
Connect GitHub or skip to continue
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: GitHub Selection */}
|
||||
{step === 2 && (
|
||||
<div className="space-y-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setStep(1)}
|
||||
className="mb-2"
|
||||
>
|
||||
<Button variant="ghost" size="sm" onClick={() => setStep(1)} className="mb-2">
|
||||
<ChevronLeft className="mr-1 h-4 w-4" />
|
||||
Back
|
||||
</Button>
|
||||
@@ -273,29 +203,21 @@ export function ProjectCreationModal({
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto" key={`repos-${githubRepos.length}`}>
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto">
|
||||
<Button
|
||||
variant={selectedRepo === null ? "default" : "outline"}
|
||||
variant={selectedRepo === null ? 'default' : 'outline'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => setSelectedRepo(null)}
|
||||
>
|
||||
<CheckCircle2 className={`mr-2 h-4 w-4 ${selectedRepo === null ? '' : 'opacity-0'}`} />
|
||||
Skip - No GitHub repository
|
||||
</Button>
|
||||
|
||||
<Separator className="my-2" />
|
||||
|
||||
{(() => {
|
||||
console.log('[ProjectModal Render] githubConnected:', githubConnected, 'repos:', githubRepos.length, 'reposData:', githubRepos);
|
||||
return null;
|
||||
})()}
|
||||
|
||||
{githubRepos.length > 0 ? (
|
||||
// Show repos if we have any
|
||||
githubRepos.map((repo) => (
|
||||
<Button
|
||||
key={repo.id}
|
||||
variant={selectedRepo?.id === repo.id ? "default" : "outline"}
|
||||
variant={selectedRepo?.id === repo.id ? 'default' : 'outline'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => setSelectedRepo(repo)}
|
||||
>
|
||||
@@ -304,40 +226,19 @@ export function ProjectCreationModal({
|
||||
<span className="truncate">{repo.full_name}</span>
|
||||
</Button>
|
||||
))
|
||||
) : githubConnected ? (
|
||||
// Connected but no repos
|
||||
<p className="text-sm text-muted-foreground text-center py-4">
|
||||
No repositories found
|
||||
</p>
|
||||
) : (
|
||||
// Not connected - show connect button
|
||||
) : !githubConnected ? (
|
||||
<div className="space-y-3 py-4">
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
GitHub not connected yet
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground text-center">GitHub not connected yet</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={async () => {
|
||||
try {
|
||||
const user = auth.currentUser;
|
||||
if (!user) {
|
||||
toast.error('Please sign in first');
|
||||
return;
|
||||
}
|
||||
|
||||
const token = await user.getIdToken();
|
||||
const response = await fetch('/api/github/oauth-url', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
returnTo: `/${workspace}/projects`
|
||||
}),
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ returnTo: `/${workspace}/projects` }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const { authUrl } = await response.json();
|
||||
window.location.href = authUrl;
|
||||
@@ -345,7 +246,6 @@ export function ProjectCreationModal({
|
||||
toast.error('Failed to initiate GitHub OAuth');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('GitHub OAuth error:', error);
|
||||
toast.error('Error connecting to GitHub');
|
||||
}
|
||||
}}
|
||||
@@ -354,20 +254,13 @@ export function ProjectCreationModal({
|
||||
Connect GitHub
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">No repositories found</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleCreateProject}
|
||||
disabled={loading}
|
||||
className="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<Button onClick={handleCreateProject} disabled={loading} className="w-full" size="lg">
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Creating...
|
||||
</>
|
||||
<><Loader2 className="mr-2 h-4 w-4 animate-spin" />Creating...</>
|
||||
) : (
|
||||
'Create Project'
|
||||
)}
|
||||
@@ -377,7 +270,6 @@ export function ProjectCreationModal({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Instructions */}
|
||||
{step === 3 && createdProjectId && (
|
||||
<div className="space-y-4">
|
||||
<Card className="border-green-500/50 bg-green-500/5">
|
||||
@@ -385,9 +277,7 @@ export function ProjectCreationModal({
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="h-5 w-5 text-green-600 mt-0.5" />
|
||||
<div>
|
||||
<p className="font-medium text-green-900 dark:text-green-100">
|
||||
Project created successfully!
|
||||
</p>
|
||||
<p className="font-medium text-green-900 dark:text-green-100">Project created successfully!</p>
|
||||
<p className="text-sm text-green-700 dark:text-green-300 mt-1">
|
||||
Project ID: <code className="font-mono">{createdProjectId}</code>
|
||||
</p>
|
||||
@@ -396,18 +286,11 @@ export function ProjectCreationModal({
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-base font-semibold">Next Step: Add .vibn file</Label>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Create a <code className="font-mono bg-muted px-1.5 py-0.5 rounded">.vibn</code> file
|
||||
in your project root with the following content:
|
||||
Create a <code className="font-mono bg-muted px-1.5 py-0.5 rounded">.vibn</code> file in your project root:
|
||||
</p>
|
||||
|
||||
<div className="relative">
|
||||
<pre className="bg-muted p-4 rounded-lg text-sm font-mono overflow-x-auto">
|
||||
{`{
|
||||
@@ -424,17 +307,6 @@ export function ProjectCreationModal({
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">This enables:</p>
|
||||
<ul className="text-sm text-muted-foreground space-y-1 ml-4">
|
||||
<li>• Automatic session tracking from your cursor</li>
|
||||
<li>• Cost monitoring per project</li>
|
||||
<li>• AI chat history linking</li>
|
||||
<li>• GitHub commit tracking</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{selectedRepo && (
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<Github className="h-4 w-4 text-muted-foreground" />
|
||||
@@ -451,7 +323,6 @@ export function ProjectCreationModal({
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
@@ -462,11 +333,7 @@ export function ProjectCreationModal({
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
Copy .vibn Content
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleFinish}
|
||||
className="flex-1"
|
||||
size="lg"
|
||||
>
|
||||
<Button onClick={handleFinish} className="flex-1" size="lg">
|
||||
Start AI Chat
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user