mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
290 lines
11 KiB
TypeScript
290 lines
11 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* ProjectForm Component
|
|
*
|
|
* Client component for creating new Supabase projects.
|
|
* Handles form validation, submission, and loading states.
|
|
*/
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { createProject, type CreateProjectInput } from '@/app/actions/projects'
|
|
import CreatingProjectModal from './CreatingProjectModal'
|
|
|
|
const REGIONS = [
|
|
{ value: 'us-east-1', label: 'US East (N. Virginia)' },
|
|
{ value: 'us-west-1', label: 'US West (N. California)' },
|
|
{ value: 'us-west-2', label: 'US West (Oregon)' },
|
|
{ value: 'eu-west-1', label: 'EU West (Ireland)' },
|
|
{ value: 'eu-west-2', label: 'EU West (London)' },
|
|
{ value: 'eu-central-1', label: 'EU Central (Frankfurt)' },
|
|
{ value: 'ap-southeast-1', label: 'Asia Pacific (Singapore)' },
|
|
{ value: 'ap-southeast-2', label: 'Asia Pacific (Sydney)' },
|
|
{ value: 'ap-northeast-1', label: 'Asia Pacific (Tokyo)' },
|
|
{ value: 'sa-east-1', label: 'South America (São Paulo)' },
|
|
]
|
|
|
|
interface ProjectFormProps {
|
|
defaultOrganizationId?: string
|
|
defaultRegion?: string
|
|
}
|
|
|
|
export default function ProjectForm({ defaultOrganizationId, defaultRegion }: ProjectFormProps) {
|
|
const router = useRouter()
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [errorDetails, setErrorDetails] = useState<any>(null)
|
|
const [showErrorDetails, setShowErrorDetails] = useState(false)
|
|
const [formData, setFormData] = useState<CreateProjectInput>({
|
|
project_name: '',
|
|
organization_id: defaultOrganizationId || '',
|
|
region: defaultRegion || 'us-east-1',
|
|
purpose: '',
|
|
description: '',
|
|
})
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setError(null)
|
|
setErrorDetails(null)
|
|
setShowErrorDetails(false)
|
|
setIsSubmitting(true)
|
|
|
|
try {
|
|
// Client-side validation
|
|
if (formData.project_name.length < 3) {
|
|
setError('Project name must be at least 3 characters')
|
|
setIsSubmitting(false)
|
|
return
|
|
}
|
|
|
|
if (!formData.organization_id) {
|
|
setError('Organization ID is required')
|
|
setIsSubmitting(false)
|
|
return
|
|
}
|
|
|
|
console.log('[ProjectForm] Submitting project creation request:', {
|
|
project_name: formData.project_name,
|
|
organization_id: formData.organization_id,
|
|
region: formData.region,
|
|
timestamp: new Date().toISOString(),
|
|
})
|
|
|
|
// Call server action
|
|
const result = await createProject(formData)
|
|
|
|
console.log('[ProjectForm] Received response from server action:', {
|
|
success: result.success,
|
|
hasError: !!result.error,
|
|
hasErrorDetails: !!result.errorDetails,
|
|
timestamp: new Date().toISOString(),
|
|
})
|
|
|
|
if (!result.success) {
|
|
const errorMessage = result.error || 'Failed to create project'
|
|
setError(errorMessage)
|
|
|
|
if (result.errorDetails && Object.keys(result.errorDetails).length > 0) {
|
|
setErrorDetails(result.errorDetails)
|
|
console.error('[ProjectForm] Error details:', result.errorDetails)
|
|
} else {
|
|
console.error('[ProjectForm] Error:', errorMessage)
|
|
}
|
|
|
|
setIsSubmitting(false)
|
|
return
|
|
}
|
|
|
|
// Success - redirect to projects page
|
|
console.log('[ProjectForm] Project created successfully, redirecting to projects page...')
|
|
console.log('[ProjectForm] Project data:', result.data)
|
|
|
|
// Keep spinner showing briefly then redirect
|
|
setTimeout(() => {
|
|
router.push('/projects')
|
|
router.refresh()
|
|
}, 2000)
|
|
} catch (err) {
|
|
console.error('[ProjectForm] Unexpected error during submission:', err)
|
|
setError(err instanceof Error ? err.message : 'An unexpected error occurred')
|
|
setErrorDetails({ unexpectedError: true, message: String(err) })
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const handleInputChange = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
|
|
) => {
|
|
const { name, value } = e.target
|
|
setFormData((prev) => ({ ...prev, [name]: value }))
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Creating Project Modal */}
|
|
{isSubmitting && <CreatingProjectModal />}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Error Display */}
|
|
{error && (
|
|
<div className="bg-red-500/10 border border-red-500/20 text-red-500 rounded-lg p-4">
|
|
<p className="font-medium">Error</p>
|
|
<p className="text-sm mt-1">{error}</p>
|
|
|
|
{/* Technical Details */}
|
|
{errorDetails && (
|
|
<div className="mt-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowErrorDetails(!showErrorDetails)}
|
|
className="text-xs font-medium text-red-700 hover:text-red-900 underline"
|
|
>
|
|
{showErrorDetails ? 'Hide' : 'Show'} Technical Details
|
|
</button>
|
|
|
|
{showErrorDetails && (
|
|
<div className="mt-2 p-3 bg-red-100 rounded border border-red-300 text-xs font-mono overflow-x-auto">
|
|
<div className="space-y-1">
|
|
{errorDetails.statusCode && (
|
|
<div>
|
|
<span className="font-bold">HTTP Status:</span> {errorDetails.statusCode}{' '}
|
|
{errorDetails.statusText}
|
|
</div>
|
|
)}
|
|
{errorDetails.requestUrl && (
|
|
<div>
|
|
<span className="font-bold">Request URL:</span> {errorDetails.requestUrl}
|
|
</div>
|
|
)}
|
|
{errorDetails.responseBody && (
|
|
<div>
|
|
<span className="font-bold">Response:</span>
|
|
<pre className="mt-1 whitespace-pre-wrap break-words">
|
|
{typeof errorDetails.responseBody === 'string'
|
|
? errorDetails.responseBody
|
|
: JSON.stringify(errorDetails.responseBody, null, 2)}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-2 pt-2 border-t border-red-400 text-red-700">
|
|
<p className="font-bold">Debugging Tips:</p>
|
|
<ul className="list-disc list-inside mt-1 space-y-1">
|
|
<li>Check browser console (F12) for detailed logs</li>
|
|
<li>Check Supabase Edge Function logs in dashboard</li>
|
|
<li>Verify your authentication token is valid</li>
|
|
{errorDetails.statusCode === 429 && (
|
|
<li className="text-red-900 font-bold">
|
|
Rate limit exceeded. Wait before creating more projects.
|
|
</li>
|
|
)}
|
|
{errorDetails.statusCode === 401 && (
|
|
<li className="text-red-900 font-bold">
|
|
Authentication failed. Try logging out and back in.
|
|
</li>
|
|
)}
|
|
{errorDetails.statusCode >= 500 && (
|
|
<li className="text-red-900 font-bold">
|
|
Server error. Check Edge Function logs for details.
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Project Name */}
|
|
<div className="bg-[#1C1C1C] border border-[#2C2C2C] rounded-lg p-6">
|
|
<label htmlFor="project_name" className="block text-sm font-medium text-white mb-2">
|
|
Project Name <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="project_name"
|
|
name="project_name"
|
|
value={formData.project_name}
|
|
onChange={handleInputChange}
|
|
required
|
|
minLength={3}
|
|
maxLength={63}
|
|
placeholder="my-awesome-project"
|
|
className="w-full px-4 py-2.5 bg-[#0E0E0E] border border-[#2C2C2C] text-white rounded-md focus:outline-none focus:ring-2 focus:ring-[#3ECF8E] focus:border-transparent placeholder:text-[#808080] disabled:opacity-50"
|
|
disabled={isSubmitting}
|
|
/>
|
|
<p className="text-xs text-[#808080] mt-2">
|
|
3-63 characters, lowercase letters, numbers, and hyphens
|
|
</p>
|
|
</div>
|
|
|
|
{/* Hidden fields - automatically set */}
|
|
<input type="hidden" name="organization_id" value={formData.organization_id} />
|
|
<input type="hidden" name="region" value={formData.region} />
|
|
|
|
{/* Purpose */}
|
|
<div className="bg-[#1C1C1C] border border-[#2C2C2C] rounded-lg p-6">
|
|
<label htmlFor="purpose" className="block text-sm font-medium text-white mb-2">
|
|
Purpose <span className="text-[#808080] text-xs">(Optional)</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="purpose"
|
|
name="purpose"
|
|
value={formData.purpose}
|
|
onChange={handleInputChange}
|
|
placeholder="Development, Staging, Production"
|
|
className="w-full px-4 py-2.5 bg-[#0E0E0E] border border-[#2C2C2C] text-white rounded-md focus:outline-none focus:ring-2 focus:ring-[#3ECF8E] focus:border-transparent placeholder:text-[#808080] disabled:opacity-50"
|
|
disabled={isSubmitting}
|
|
/>
|
|
<p className="text-xs text-[#808080] mt-2">
|
|
What will this project be used for?
|
|
</p>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="bg-[#1C1C1C] border border-[#2C2C2C] rounded-lg p-6">
|
|
<label htmlFor="description" className="block text-sm font-medium text-white mb-2">
|
|
Description <span className="text-[#808080] text-xs">(Optional)</span>
|
|
</label>
|
|
<textarea
|
|
id="description"
|
|
name="description"
|
|
value={formData.description}
|
|
onChange={handleInputChange}
|
|
rows={4}
|
|
placeholder="Additional details about your project"
|
|
className="w-full px-4 py-2.5 bg-[#0E0E0E] border border-[#2C2C2C] text-white rounded-md focus:outline-none focus:ring-2 focus:ring-[#3ECF8E] focus:border-transparent placeholder:text-[#808080] disabled:opacity-50 resize-none"
|
|
disabled={isSubmitting}
|
|
/>
|
|
</div>
|
|
|
|
{/* Submit Buttons */}
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="px-6 py-2.5 bg-[#3ECF8E] text-[#0E0E0E] rounded-md hover:bg-[#3ECF8E]/90 disabled:opacity-50 disabled:cursor-not-allowed font-medium transition-colors"
|
|
>
|
|
{isSubmitting ? 'Creating Project...' : 'Create Project'}
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => router.back()}
|
|
disabled={isSubmitting}
|
|
className="px-6 py-2.5 bg-transparent border border-[#2C2C2C] text-[#D0D0D0] rounded-md hover:bg-[#2C2C2C] disabled:opacity-50 disabled:cursor-not-allowed font-medium transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</>
|
|
)
|
|
}
|