Initial commit
This commit is contained in:
monoadmin
53
app/auth/error/page.tsx
Normal file
53
app/auth/error/page.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import Link from 'next/link'
|
||||
import { Monitor, AlertTriangle, ArrowLeft } from 'lucide-react'
|
||||
|
||||
export default function AuthErrorPage() {
|
||||
return (
|
||||
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<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>
|
||||
|
||||
<Card className="w-full 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">
|
||||
<AlertTriangle className="h-8 w-8 text-destructive" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Authentication Error</CardTitle>
|
||||
<CardDescription className="text-balance">
|
||||
Something went wrong during authentication. This could be due to an expired link or an invalid request.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="rounded-lg bg-muted/50 p-4 text-sm text-muted-foreground">
|
||||
<p className="text-balance">
|
||||
If you continue to experience issues, please contact support or try again later.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Button asChild variant="outline" className="flex-1">
|
||||
<Link href="/auth/login">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to login
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild className="flex-1">
|
||||
<Link href="/auth/sign-up">
|
||||
Try again
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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>
|
||||
)
|
||||
}
|
||||
153
app/auth/login/page.tsx
Normal file
153
app/auth/login/page.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
'use client'
|
||||
|
||||
import { signIn } from 'next-auth/react'
|
||||
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'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import { useState, Suspense } from 'react'
|
||||
import { Monitor, Shield } from 'lucide-react'
|
||||
|
||||
function LoginForm() {
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const invited = searchParams.get('invited')
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
const result = await signIn('credentials', {
|
||||
email,
|
||||
password,
|
||||
redirect: false,
|
||||
})
|
||||
|
||||
if (result?.error) {
|
||||
setError('Invalid email or password')
|
||||
setIsLoading(false)
|
||||
} else {
|
||||
router.push('/dashboard')
|
||||
router.refresh()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border-border/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Welcome back</CardTitle>
|
||||
<CardDescription>
|
||||
Sign in to access your remote machines
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{invited && (
|
||||
<div className="mb-4 rounded-md bg-green-500/10 border border-green-500/20 p-3">
|
||||
<p className="text-sm text-green-500">
|
||||
Account created! You can now sign in.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleLogin}>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@company.com"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="bg-secondary/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(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 ? 'Signing in...' : 'Sign in'}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-6 text-center text-sm text-muted-foreground">
|
||||
Access is by invitation only
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
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 text-center">
|
||||
<div className="flex items-center justify-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">
|
||||
Professional Remote Desktop Solution
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-balance">
|
||||
Securely connect to and control remote machines. Perfect for IT support,
|
||||
system administration, and remote assistance.
|
||||
</p>
|
||||
<div className="mt-8 flex items-center justify-center gap-2 text-sm text-muted-foreground">
|
||||
<Shield className="h-4 w-4" />
|
||||
<span>End-to-end encrypted connections</span>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<Suspense fallback={null}>
|
||||
<LoginForm />
|
||||
</Suspense>
|
||||
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
Self-hosted remote desktop. End-to-end encrypted.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
46
app/auth/sign-up-success/page.tsx
Normal file
46
app/auth/sign-up-success/page.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import Link from 'next/link'
|
||||
import { Monitor, Mail, ArrowRight } from 'lucide-react'
|
||||
|
||||
export default function SignUpSuccessPage() {
|
||||
return (
|
||||
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<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>
|
||||
|
||||
<Card className="w-full 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-primary/10">
|
||||
<Mail className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Check your email</CardTitle>
|
||||
<CardDescription className="text-balance">
|
||||
{"We've sent you a confirmation link. Please check your inbox and click the link to activate your account."}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="rounded-lg bg-muted/50 p-4 text-sm text-muted-foreground">
|
||||
<p className="text-balance">
|
||||
{"Didn't receive the email? Check your spam folder or try signing up again with a different email address."}
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild className="w-full">
|
||||
<Link href="/auth/login">
|
||||
Go to login
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
41
app/auth/sign-up/page.tsx
Normal file
41
app/auth/sign-up/page.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import Link from 'next/link'
|
||||
import { Monitor, Lock, ArrowRight } from 'lucide-react'
|
||||
|
||||
export default function SignUpPage() {
|
||||
return (
|
||||
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<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>
|
||||
|
||||
<Card className="w-full 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-primary/10">
|
||||
<Lock className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Invite only</CardTitle>
|
||||
<CardDescription className="text-balance">
|
||||
RemoteLink is invite-only. To get access, contact your administrator for an invite link.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button asChild className="w-full">
|
||||
<Link href="/auth/login">
|
||||
Sign in
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user