Initial commit
This commit is contained in:
monoadmin
136
app/auth/invite/[token]/invite-form.tsx
Normal file
136
app/auth/invite/[token]/invite-form.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
|
||||
interface InviteFormProps {
|
||||
token: string
|
||||
email: string
|
||||
}
|
||||
|
||||
export default function InviteForm({ token, email }: InviteFormProps) {
|
||||
const [fullName, setFullName] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [confirmPassword, setConfirmPassword] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError(null)
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
setError('Passwords do not match')
|
||||
return
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
setError('Password must be at least 8 characters')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/invites/accept', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ token, fullName, password }),
|
||||
})
|
||||
|
||||
const data = await res.json()
|
||||
|
||||
if (!res.ok) {
|
||||
setError(data.error || 'Something went wrong')
|
||||
return
|
||||
}
|
||||
|
||||
router.push('/auth/login?invited=1')
|
||||
} catch {
|
||||
setError('Network error. Please try again.')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border-border/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Set up your account</CardTitle>
|
||||
<CardDescription>
|
||||
You were invited to join RemoteLink
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
disabled
|
||||
className="bg-secondary/50 opacity-60"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="fullName">Full name</Label>
|
||||
<Input
|
||||
id="fullName"
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
required
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
className="bg-secondary/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="At least 8 characters"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="bg-secondary/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="confirmPassword">Confirm password</Label>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
required
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="bg-secondary/50"
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 p-3">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
<Button type="submit" className="w-full mt-2" disabled={isLoading}>
|
||||
{isLoading ? 'Creating account...' : 'Create account'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
100
app/auth/invite/[token]/page.tsx
Normal file
100
app/auth/invite/[token]/page.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { db } from '@/lib/db'
|
||||
import { invites } from '@/lib/db/schema'
|
||||
import { eq } from 'drizzle-orm'
|
||||
import InviteForm from './invite-form'
|
||||
import { Monitor, XCircle } from 'lucide-react'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import Link from 'next/link'
|
||||
|
||||
interface InvitePageProps {
|
||||
params: Promise<{ token: string }>
|
||||
}
|
||||
|
||||
export default async function InvitePage({ params }: InvitePageProps) {
|
||||
const { token } = await params
|
||||
|
||||
const result = await db
|
||||
.select()
|
||||
.from(invites)
|
||||
.where(eq(invites.token, token))
|
||||
.limit(1)
|
||||
|
||||
const invite = result[0]
|
||||
const isExpired = invite && new Date(invite.expiresAt) < new Date()
|
||||
const isUsed = !!invite?.usedAt
|
||||
const isValid = invite && !isExpired && !isUsed
|
||||
|
||||
return (
|
||||
<div className="flex min-h-svh w-full">
|
||||
<div className="hidden lg:flex lg:w-1/2 bg-primary/5 items-center justify-center p-12">
|
||||
<div className="max-w-md">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary">
|
||||
<Monitor className="h-6 w-6 text-primary-foreground" />
|
||||
</div>
|
||||
<span className="text-3xl font-bold">RemoteLink</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold mb-4 text-balance">
|
||||
{isValid ? "You've been invited" : 'RemoteLink'}
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-balance">
|
||||
{isValid
|
||||
? 'Set up your account to start managing remote machines securely.'
|
||||
: 'Secure, low-latency remote desktop access for IT professionals.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full lg:w-1/2 items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-sm">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-center gap-2 lg:hidden mb-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
|
||||
<Monitor className="h-5 w-5 text-primary-foreground" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold">RemoteLink</span>
|
||||
</div>
|
||||
|
||||
{isValid ? (
|
||||
<InviteForm token={token} email={invite.email} />
|
||||
) : (
|
||||
<Card className="border-border/50">
|
||||
<CardHeader className="text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
|
||||
<XCircle className="h-8 w-8 text-destructive" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">
|
||||
{!invite
|
||||
? 'Invalid invite'
|
||||
: isUsed
|
||||
? 'Already used'
|
||||
: 'Invite expired'}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-balance">
|
||||
{!invite
|
||||
? 'This invite link is invalid or does not exist.'
|
||||
: isUsed
|
||||
? 'This invite link has already been used to create an account.'
|
||||
: 'This invite link has expired. Please contact your administrator for a new one.'}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button asChild className="w-full">
|
||||
<Link href="/auth/login">Go to login</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user