mirror of
https://github.com/fosrl/pangolin.git
synced 2025-08-31 23:10:00 +02:00
more validation and redirects
This commit is contained in:
Milo Schwartz
parent
14d1f169c9
commit
1c83d5d8a5
18 changed files with 620 additions and 443 deletions
|
|
@ -1,48 +1,55 @@
|
|||
'use client'
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import Link from 'next/link'
|
||||
import api from '@app/api'
|
||||
import { toast } from '@app/hooks/use-toast'
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import Link from "next/link";
|
||||
import api from "@app/api";
|
||||
import { toast } from "@app/hooks/use-toast";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@app/components/ui/card";
|
||||
|
||||
type Step = 'org' | 'site' | 'resources'
|
||||
type Step = "org" | "site" | "resources";
|
||||
|
||||
export default function StepperForm() {
|
||||
const [currentStep, setCurrentStep] = useState<Step>('org')
|
||||
const [orgName, setOrgName] = useState('')
|
||||
const [orgId, setOrgId] = useState('')
|
||||
const [siteName, setSiteName] = useState('')
|
||||
const [resourceName, setResourceName] = useState('')
|
||||
const [orgCreated, setOrgCreated] = useState(false)
|
||||
const [orgIdTaken, setOrgIdTaken] = useState(false)
|
||||
const [currentStep, setCurrentStep] = useState<Step>("org");
|
||||
const [orgName, setOrgName] = useState("");
|
||||
const [orgId, setOrgId] = useState("");
|
||||
const [siteName, setSiteName] = useState("");
|
||||
const [resourceName, setResourceName] = useState("");
|
||||
const [orgCreated, setOrgCreated] = useState(false);
|
||||
const [orgIdTaken, setOrgIdTaken] = useState(false);
|
||||
|
||||
const checkOrgIdAvailability = useCallback(async (value: string) => {
|
||||
try {
|
||||
const res = await api.get(`/org/checkId`, {
|
||||
params: {
|
||||
orgId: value
|
||||
}
|
||||
})
|
||||
setOrgIdTaken(res.status !== 404)
|
||||
orgId: value,
|
||||
},
|
||||
});
|
||||
setOrgIdTaken(res.status !== 404);
|
||||
} catch (error) {
|
||||
console.error('Error checking org ID availability:', error)
|
||||
setOrgIdTaken(false)
|
||||
console.error("Error checking org ID availability:", error);
|
||||
setOrgIdTaken(false);
|
||||
}
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
const debouncedCheckOrgIdAvailability = useCallback(
|
||||
debounce(checkOrgIdAvailability, 300),
|
||||
[checkOrgIdAvailability]
|
||||
)
|
||||
[checkOrgIdAvailability],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (orgId) {
|
||||
debouncedCheckOrgIdAvailability(orgId)
|
||||
debouncedCheckOrgIdAvailability(orgId);
|
||||
}
|
||||
}, [orgId, debouncedCheckOrgIdAvailability])
|
||||
}, [orgId, debouncedCheckOrgIdAvailability]);
|
||||
|
||||
const showOrgIdError = () => {
|
||||
if (orgIdTaken) {
|
||||
|
|
@ -56,12 +63,11 @@ export default function StepperForm() {
|
|||
};
|
||||
|
||||
const generateId = (name: string) => {
|
||||
return name.toLowerCase().replace(/\s+/g, '-')
|
||||
}
|
||||
return name.toLowerCase().replace(/\s+/g, "-");
|
||||
};
|
||||
|
||||
const handleNext = async () => {
|
||||
if (currentStep === 'org') {
|
||||
|
||||
if (currentStep === "org") {
|
||||
const res = await api
|
||||
.put(`/org`, {
|
||||
orgId: orgId,
|
||||
|
|
@ -69,147 +75,190 @@ export default function StepperForm() {
|
|||
})
|
||||
.catch((e) => {
|
||||
toast({
|
||||
title: "Error creating org..."
|
||||
title: "Error creating org...",
|
||||
});
|
||||
});
|
||||
|
||||
if (res && res.status === 201) {
|
||||
setCurrentStep('site')
|
||||
setOrgCreated(true)
|
||||
setCurrentStep("site");
|
||||
setOrgCreated(true);
|
||||
}
|
||||
|
||||
}
|
||||
else if (currentStep === 'site') setCurrentStep('resources')
|
||||
}
|
||||
} else if (currentStep === "site") setCurrentStep("resources");
|
||||
};
|
||||
|
||||
const handlePrevious = () => {
|
||||
if (currentStep === 'site') setCurrentStep('org')
|
||||
else if (currentStep === 'resources') setCurrentStep('site')
|
||||
}
|
||||
|
||||
if (currentStep === "site") setCurrentStep("org");
|
||||
else if (currentStep === "resources") setCurrentStep("site");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-2xl mx-auto p-6">
|
||||
<h2 className="text-2xl font-bold mb-6">Setup Your Environment</h2>
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between mb-2">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${currentStep === 'org' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
|
||||
1
|
||||
<>
|
||||
<Card className="w-full max-w-2xl mx-auto">
|
||||
<CardHeader>
|
||||
<CardTitle>Setup Your Environment</CardTitle>
|
||||
<CardDescription>
|
||||
Create your organization, site, and resources.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between mb-2">
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${currentStep === "org" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<span
|
||||
className={`text-sm font-medium ${currentStep === "org" ? "text-primary" : "text-muted-foreground"}`}
|
||||
>
|
||||
Create Org
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${currentStep === "site" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<span
|
||||
className={`text-sm font-medium ${currentStep === "site" ? "text-primary" : "text-muted-foreground"}`}
|
||||
>
|
||||
Create Site
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${currentStep === "resources" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<span
|
||||
className={`text-sm font-medium ${currentStep === "resources" ? "text-primary" : "text-muted-foreground"}`}
|
||||
>
|
||||
Create Resources
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${currentStep === 'org' ? 'text-primary' : 'text-muted-foreground'}`}>Create Org</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${currentStep === 'site' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
|
||||
2
|
||||
<div className="flex items-center">
|
||||
<div className="flex-1 h-px bg-border"></div>
|
||||
<div className="flex-1 h-px bg-border"></div>
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${currentStep === 'site' ? 'text-primary' : 'text-muted-foreground'}`}>Create Site</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${currentStep === 'resources' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
|
||||
3
|
||||
{currentStep === "org" && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="orgName">
|
||||
Organization Name
|
||||
</Label>
|
||||
<Input
|
||||
id="orgName"
|
||||
value={orgName}
|
||||
onChange={(e) => {
|
||||
setOrgName(e.target.value);
|
||||
setOrgId(generateId(e.target.value));
|
||||
}}
|
||||
placeholder="Enter organization name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="orgId">Organization ID</Label>
|
||||
<Input
|
||||
id="orgId"
|
||||
value={orgId}
|
||||
onChange={(e) => setOrgId(e.target.value)}
|
||||
/>
|
||||
{showOrgIdError()}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This ID is automatically generated from the
|
||||
organization name and must be unique.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${currentStep === 'resources' ? 'text-primary' : 'text-muted-foreground'}`}>Create Resources</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex-1 h-px bg-border"></div>
|
||||
<div className="flex-1 h-px bg-border"></div>
|
||||
</div>
|
||||
</div>
|
||||
{currentStep === 'org' && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="orgName">Organization Name</Label>
|
||||
<Input
|
||||
id="orgName"
|
||||
value={orgName}
|
||||
onChange={(e) => { setOrgName(e.target.value); setOrgId(generateId(e.target.value)) }}
|
||||
placeholder="Enter organization name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="orgId">Organization ID</Label>
|
||||
<Input
|
||||
id="orgId"
|
||||
value={orgId}
|
||||
onChange={(e) => setOrgId(e.target.value)}
|
||||
/>
|
||||
{showOrgIdError()}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This ID is automatically generated from the organization name and must be unique.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{currentStep === 'site' && (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="siteName">Site Name</Label>
|
||||
<Input
|
||||
id="siteName"
|
||||
value={siteName}
|
||||
onChange={(e) => setSiteName(e.target.value)}
|
||||
placeholder="Enter site name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{currentStep === 'resources' && (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="resourceName">Resource Name</Label>
|
||||
<Input
|
||||
id="resourceName"
|
||||
value={resourceName}
|
||||
onChange={(e) => setResourceName(e.target.value)}
|
||||
placeholder="Enter resource name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handlePrevious}
|
||||
disabled={currentStep === 'org' || (currentStep === 'site' && orgCreated)}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<div className="flex items-center space-x-2">
|
||||
{currentStep !== 'org' ? (
|
||||
<Link
|
||||
href={`/${orgId}/sites`}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
)}
|
||||
{currentStep === "site" && (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="siteName">Site Name</Label>
|
||||
<Input
|
||||
id="siteName"
|
||||
value={siteName}
|
||||
onChange={(e) =>
|
||||
setSiteName(e.target.value)
|
||||
}
|
||||
placeholder="Enter site name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{currentStep === "resources" && (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="resourceName">
|
||||
Resource Name
|
||||
</Label>
|
||||
<Input
|
||||
id="resourceName"
|
||||
value={resourceName}
|
||||
onChange={(e) =>
|
||||
setResourceName(e.target.value)
|
||||
}
|
||||
placeholder="Enter resource name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handlePrevious}
|
||||
disabled={
|
||||
currentStep === "org" ||
|
||||
(currentStep === "site" && orgCreated)
|
||||
}
|
||||
>
|
||||
Skip for now
|
||||
</Link>
|
||||
) : null}
|
||||
Previous
|
||||
</Button>
|
||||
<div className="flex items-center space-x-2">
|
||||
{currentStep !== "org" ? (
|
||||
<Link
|
||||
href={`/${orgId}/sites`}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Skip for now
|
||||
</Link>
|
||||
) : null}
|
||||
|
||||
<Button type="button" id="button" onClick={handleNext}>Create</Button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<Button
|
||||
type="button"
|
||||
id="button"
|
||||
onClick={handleNext}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function debounce<T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
wait: number
|
||||
wait: number,
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeout: NodeJS.Timeout | null = null
|
||||
let timeout: NodeJS.Timeout | null = null;
|
||||
|
||||
return (...args: Parameters<T>) => {
|
||||
if (timeout) clearTimeout(timeout)
|
||||
if (timeout) clearTimeout(timeout);
|
||||
|
||||
timeout = setTimeout(() => {
|
||||
func(...args)
|
||||
}, wait)
|
||||
}
|
||||
}
|
||||
func(...args);
|
||||
}, wait);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue