Changes
This commit is contained in:
gpt-engineer-app[bot]
+10
-9
@@ -1,14 +1,15 @@
|
||||
// Update this page (the content is just a fallback if you fail to update the page)
|
||||
import { useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const Index = () => {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
|
||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
// Redirect to login for now - will be replaced with auth check
|
||||
navigate("/login");
|
||||
}, [navigate]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Mail, ArrowLeft, ArrowRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
setIsSubmitted(true);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
if (isSubmitted) {
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-6">
|
||||
<Mail className="w-8 h-8 text-accent" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Check your email
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2 mb-6">
|
||||
If an account exists for {email}, you'll receive a password reset link shortly.
|
||||
</p>
|
||||
|
||||
<Link to="/login">
|
||||
<Button variant="outline" className="w-full">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to sign in
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Forgot password?
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Enter your email and we'll send you a reset link
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Sending..."
|
||||
) : (
|
||||
<>
|
||||
Send reset link
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground mt-6">
|
||||
<Link to="/login" className="text-accent hover:underline font-medium inline-flex items-center">
|
||||
<ArrowLeft className="w-4 h-4 mr-1" />
|
||||
Back to sign in
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { User, Lock, Upload, ArrowRight, Building2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
|
||||
export default function InviteAcceptPage() {
|
||||
const navigate = useNavigate();
|
||||
const [name, setName] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Mock invite data - will be fetched from URL token
|
||||
const inviteData = {
|
||||
email: "invited@example.com",
|
||||
organization: "Acme Corp",
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
navigate("/profile");
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Building2 className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
You're invited!
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
<span className="font-medium text-foreground">{inviteData.organization}</span> has
|
||||
invited you to join their organization
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Avatar upload */}
|
||||
<div className="flex flex-col items-center mb-6">
|
||||
<Avatar className="w-20 h-20 mb-3">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-xl">
|
||||
{name ? name.split(" ").map(n => n[0]).join("").slice(0, 2).toUpperCase() : "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Button type="button" variant="outline" size="sm">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Upload photo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={inviteData.email}
|
||||
disabled
|
||||
className="bg-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full name</Label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Joining..."
|
||||
) : (
|
||||
<>
|
||||
Join {inviteData.organization}
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Mail, Lock, ArrowRight, Fingerprint } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
// Mock login - will be replaced with actual auth
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
navigate("/profile");
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Welcome back
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Sign in to your account to continue
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Link
|
||||
to="/forgot-password"
|
||||
className="text-sm text-accent hover:underline"
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Signing in..."
|
||||
) : (
|
||||
<>
|
||||
Sign in
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="relative my-6">
|
||||
<Separator />
|
||||
<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground">
|
||||
or continue with
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Alternative login methods */}
|
||||
<div className="space-y-3">
|
||||
<Button variant="outline" className="w-full" type="button">
|
||||
<Fingerprint className="w-4 h-4 mr-2" />
|
||||
Sign in with Passkey
|
||||
</Button>
|
||||
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<Button variant="outline" className="w-full" type="button">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full" type="button">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full" type="button">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M21.35 11.1h-9.17v2.73h6.51c-.33 3.81-3.5 5.44-6.5 5.44C8.36 19.27 5 16.25 5 12c0-4.1 3.2-7.27 7.2-7.27 3.09 0 4.9 1.97 4.9 1.97L19 4.72S16.56 2 12.1 2C6.42 2 2.03 6.8 2.03 12c0 5.05 4.13 10 10.22 10 5.35 0 9.25-3.67 9.25-9.09 0-1.15-.15-1.81-.15-1.81z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground mt-6">
|
||||
Don't have an account?{" "}
|
||||
<Link to="/register" className="text-accent hover:underline font-medium">
|
||||
Create one
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { CheckCircle, XCircle, Shield, User, Mail, Building2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
export default function OIDCConsentPage() {
|
||||
const navigate = useNavigate();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Mock OIDC client data - will be fetched from auth flow
|
||||
const clientData = {
|
||||
name: "GitLab",
|
||||
logo: null,
|
||||
redirectUri: "https://gitlab.example.com/callback",
|
||||
scopes: [
|
||||
{ id: "openid", name: "OpenID", description: "Verify your identity" },
|
||||
{ id: "profile", name: "Profile", description: "Access your name and profile picture" },
|
||||
{ id: "email", name: "Email", description: "Access your email address" },
|
||||
],
|
||||
};
|
||||
|
||||
const handleAllow = () => {
|
||||
setIsLoading(true);
|
||||
// Mock consent - will redirect to client callback
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
// In real implementation: redirect to redirectUri with auth code
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const handleDeny = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-6">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Shield className="w-7 h-7 text-primary" />
|
||||
</div>
|
||||
<h1 className="text-xl font-semibold text-foreground tracking-tight">
|
||||
Authorize {clientData.name}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
This application wants to access your account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="p-4 bg-secondary/30 border-0 mb-6">
|
||||
<p className="text-sm text-foreground font-medium mb-3">
|
||||
{clientData.name} is requesting access to:
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{clientData.scopes.map((scope) => (
|
||||
<li key={scope.id} className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-card flex items-center justify-center flex-shrink-0">
|
||||
{scope.id === "openid" && <Shield className="w-4 h-4 text-accent" />}
|
||||
{scope.id === "profile" && <User className="w-4 h-4 text-accent" />}
|
||||
{scope.id === "email" && <Mail className="w-4 h-4 text-accent" />}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{scope.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{scope.description}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
|
||||
<Building2 className="w-4 h-4" />
|
||||
<span>
|
||||
Redirecting to: <span className="font-mono text-foreground">{clientData.redirectUri}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Separator className="mb-6" />
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleDeny}
|
||||
className="flex-1"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<XCircle className="w-4 h-4 mr-2" />
|
||||
Deny
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleAllow}
|
||||
className="flex-1"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
{isLoading ? "Authorizing..." : "Allow"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-xs text-muted-foreground mt-4">
|
||||
You can revoke this access anytime from your{" "}
|
||||
<a href="/linked-accounts" className="text-accent hover:underline">
|
||||
linked accounts
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { AlertTriangle, ArrowLeft, Home } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function OIDCErrorPage() {
|
||||
// Mock error data - will be parsed from URL params
|
||||
const errorData = {
|
||||
error: "invalid_request",
|
||||
description: "The request was missing a required parameter or was otherwise malformed.",
|
||||
clientName: "Unknown Application",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-6">
|
||||
<AlertTriangle className="w-8 h-8 text-destructive" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Authentication Error
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2 mb-4">
|
||||
There was a problem with the authentication request.
|
||||
</p>
|
||||
|
||||
<div className="bg-destructive/5 border border-destructive/20 rounded-lg p-4 mb-6 text-left">
|
||||
<p className="text-sm font-medium text-foreground mb-1">
|
||||
Error: <code className="text-destructive">{errorData.error}</code>
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{errorData.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button variant="outline" className="w-full" onClick={() => window.history.back()}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Go back
|
||||
</Button>
|
||||
<Link to="/">
|
||||
<Button variant="ghost" className="w-full">
|
||||
<Home className="w-4 h-4 mr-2" />
|
||||
Return to home
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Mail, Lock, User, ArrowRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const navigate = useNavigate();
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
// Mock registration - will be replaced with actual auth
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
navigate("/verify-email");
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Create your account
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Get started with Authy2 in seconds
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full name</Label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Must be at least 8 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Creating account..."
|
||||
) : (
|
||||
<>
|
||||
Create account
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground mt-6">
|
||||
Already have an account?{" "}
|
||||
<Link to="/login" className="text-accent hover:underline font-medium">
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<p className="text-center text-xs text-muted-foreground mt-4">
|
||||
By creating an account, you agree to our{" "}
|
||||
<Link to="/terms" className="underline">
|
||||
Terms of Service
|
||||
</Link>{" "}
|
||||
and{" "}
|
||||
<Link to="/privacy" className="underline">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Lock, ArrowRight, CheckCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
const navigate = useNavigate();
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
setIsSuccess(true);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
if (isSuccess) {
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle className="w-8 h-8 text-success" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Password reset successful
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2 mb-6">
|
||||
Your password has been updated. You can now sign in with your new password.
|
||||
</p>
|
||||
|
||||
<Button onClick={() => navigate("/login")} className="w-full">
|
||||
Sign in
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Reset your password
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Enter a new password for your account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">New password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Must be at least 8 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm new password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Resetting..."
|
||||
) : (
|
||||
<>
|
||||
Reset password
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { Mail, RefreshCw } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function VerifyEmailPage() {
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-6">
|
||||
<Mail className="w-8 h-8 text-accent" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Check your email
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2 mb-6">
|
||||
We've sent a verification link to your email address. Click the link to verify your account.
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button variant="outline" className="w-full">
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Resend verification email
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground mt-6">
|
||||
Wrong email?{" "}
|
||||
<Link to="/register" className="text-accent hover:underline font-medium">
|
||||
Go back
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
import { useState } from "react";
|
||||
import { Search, Plus, MoreHorizontal, Shield, User, Mail, Clock } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
const members = [
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
email: "john@example.com",
|
||||
role: "admin",
|
||||
status: "active",
|
||||
lastActive: "2 hours ago",
|
||||
avatar: null,
|
||||
initials: "JD",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jane Smith",
|
||||
email: "jane@example.com",
|
||||
role: "member",
|
||||
status: "active",
|
||||
lastActive: "5 minutes ago",
|
||||
avatar: null,
|
||||
initials: "JS",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Bob Wilson",
|
||||
email: "bob@example.com",
|
||||
role: "member",
|
||||
status: "disabled",
|
||||
lastActive: "3 days ago",
|
||||
avatar: null,
|
||||
initials: "BW",
|
||||
},
|
||||
];
|
||||
|
||||
const pendingInvites = [
|
||||
{
|
||||
id: "1",
|
||||
email: "alice@example.com",
|
||||
role: "member",
|
||||
sentAt: "2 days ago",
|
||||
expiresAt: "5 days",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
email: "charlie@example.com",
|
||||
role: "admin",
|
||||
sentAt: "1 hour ago",
|
||||
expiresAt: "7 days",
|
||||
},
|
||||
];
|
||||
|
||||
export default function MembersPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">Members</h1>
|
||||
<p className="page-description">
|
||||
Manage organization members and invitations
|
||||
</p>
|
||||
</div>
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Invite member
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="members" className="w-full">
|
||||
<TabsList className="mb-4">
|
||||
<TabsTrigger value="members">
|
||||
Members ({members.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="invites">
|
||||
Pending Invites ({pendingInvites.length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="members">
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search members..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10 max-w-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{members.map((member) => (
|
||||
<div key={member.id} className="p-4 flex items-center gap-4">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarImage src={member.avatar || undefined} />
|
||||
<AvatarFallback className="bg-primary text-primary-foreground">
|
||||
{member.initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{member.name}
|
||||
</p>
|
||||
{member.role === "admin" && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
<Shield className="w-3 h-3 mr-1" />
|
||||
Admin
|
||||
</Badge>
|
||||
)}
|
||||
{member.status === "disabled" && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
Disabled
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{member.email}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground hidden sm:block">
|
||||
Active {member.lastActive}
|
||||
</p>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<User className="w-4 h-4 mr-2" />
|
||||
View profile
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Shield className="w-4 h-4 mr-2" />
|
||||
Change role
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="text-destructive">
|
||||
{member.status === "active" ? "Disable" : "Enable"} account
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="invites">
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{pendingInvites.map((invite) => (
|
||||
<div key={invite.id} className="p-4 flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
|
||||
<Mail className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{invite.email}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>Invited as {invite.role}</span>
|
||||
<span>•</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
Expires in {invite.expiresAt}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm">
|
||||
Resend
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="text-destructive">
|
||||
Revoke
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { useState } from "react";
|
||||
import { Plus, Key, ExternalLink, MoreHorizontal, Copy, RefreshCw, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
const clients = [
|
||||
{
|
||||
id: "1",
|
||||
name: "GitLab",
|
||||
clientId: "gitlab_prod_xxxxxxxxxxxxx",
|
||||
redirectUris: ["https://gitlab.example.com/callback"],
|
||||
scopes: ["openid", "profile", "email"],
|
||||
createdAt: "2024-01-10",
|
||||
lastUsed: "2 hours ago",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Grafana",
|
||||
clientId: "grafana_prod_xxxxxxxxxxxxx",
|
||||
redirectUris: ["https://grafana.example.com/login/generic_oauth"],
|
||||
scopes: ["openid", "profile"],
|
||||
createdAt: "2024-01-08",
|
||||
lastUsed: "5 minutes ago",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "OAuth2 Proxy",
|
||||
clientId: "oauth2proxy_xxxxxxxxxxxxx",
|
||||
redirectUris: ["https://auth.example.com/oauth2/callback"],
|
||||
scopes: ["openid", "profile", "email", "groups"],
|
||||
createdAt: "2024-01-05",
|
||||
lastUsed: "1 day ago",
|
||||
},
|
||||
];
|
||||
|
||||
export default function OIDCClientsPage() {
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">OIDC Clients</h1>
|
||||
<p className="page-description">
|
||||
Manage applications that authenticate via Authy2
|
||||
</p>
|
||||
</div>
|
||||
<Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add client
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create OIDC Client</DialogTitle>
|
||||
<DialogDescription>
|
||||
Register a new application to authenticate via Authy2
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="clientName">Client name</Label>
|
||||
<Input id="clientName" placeholder="My Application" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="redirectUris">Redirect URIs</Label>
|
||||
<Textarea
|
||||
id="redirectUris"
|
||||
placeholder="https://myapp.example.com/callback"
|
||||
className="min-h-[80px]"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
One URI per line. These are the allowed callback URLs.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => setIsCreateOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => setIsCreateOpen(false)}>
|
||||
Create client
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{clients.map((client) => (
|
||||
<Card key={client.id}>
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Key className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground">{client.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||
{client.clientId}
|
||||
</code>
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||||
<Copy className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-3">
|
||||
{client.scopes.map((scope) => (
|
||||
<Badge key={scope} variant="secondary" className="text-xs">
|
||||
{scope}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
View details
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Rotate secret
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="text-destructive">
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Delete client
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t flex items-center justify-between text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-4">
|
||||
<span>Created {client.createdAt}</span>
|
||||
<span>•</span>
|
||||
<span>Last used {client.lastUsed}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{client.redirectUris.length} redirect URI{client.redirectUris.length > 1 ? "s" : ""}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { useState } from "react";
|
||||
import { Search, Filter, Download, User, Settings, Key, UserPlus, AlertTriangle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const auditEvents = [
|
||||
{
|
||||
id: "1",
|
||||
type: "member_invited",
|
||||
actor: "John Doe",
|
||||
target: "alice@example.com",
|
||||
timestamp: "2024-01-15T10:30:00Z",
|
||||
details: "Invited as member",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
type: "policy_changed",
|
||||
actor: "John Doe",
|
||||
target: "Password Policy",
|
||||
timestamp: "2024-01-15T09:00:00Z",
|
||||
details: "Minimum length changed from 8 to 12",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
type: "member_disabled",
|
||||
actor: "Jane Smith",
|
||||
target: "bob@example.com",
|
||||
timestamp: "2024-01-14T15:45:00Z",
|
||||
details: "Account disabled",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
type: "client_created",
|
||||
actor: "John Doe",
|
||||
target: "GitLab",
|
||||
timestamp: "2024-01-14T12:00:00Z",
|
||||
details: "OIDC client created",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
type: "role_changed",
|
||||
actor: "John Doe",
|
||||
target: "jane@example.com",
|
||||
timestamp: "2024-01-13T09:00:00Z",
|
||||
details: "Role changed from member to admin",
|
||||
},
|
||||
];
|
||||
|
||||
const getEventIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "member_invited":
|
||||
case "role_changed":
|
||||
return <UserPlus className="w-4 h-4" />;
|
||||
case "policy_changed":
|
||||
return <Settings className="w-4 h-4" />;
|
||||
case "member_disabled":
|
||||
return <AlertTriangle className="w-4 h-4" />;
|
||||
case "client_created":
|
||||
return <Key className="w-4 h-4" />;
|
||||
default:
|
||||
return <User className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getEventTitle = (type: string) => {
|
||||
switch (type) {
|
||||
case "member_invited":
|
||||
return "Member invited";
|
||||
case "policy_changed":
|
||||
return "Policy changed";
|
||||
case "member_disabled":
|
||||
return "Member disabled";
|
||||
case "client_created":
|
||||
return "OIDC client created";
|
||||
case "role_changed":
|
||||
return "Role changed";
|
||||
default:
|
||||
return "Event";
|
||||
}
|
||||
};
|
||||
|
||||
export default function OrgAuditPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [typeFilter, setTypeFilter] = useState("all");
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">Audit Log</h1>
|
||||
<p className="page-description">
|
||||
View all administrative actions and changes
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="outline">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search events..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
<SelectValue placeholder="Filter by type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All events</SelectItem>
|
||||
<SelectItem value="members">Member changes</SelectItem>
|
||||
<SelectItem value="policies">Policy changes</SelectItem>
|
||||
<SelectItem value="clients">OIDC clients</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{auditEvents.map((event) => (
|
||||
<div key={event.id} className="p-4 flex items-start gap-4">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
event.type === "member_disabled"
|
||||
? "bg-destructive/10 text-destructive"
|
||||
: "bg-accent/10 text-accent"
|
||||
}`}
|
||||
>
|
||||
{getEventIcon(event.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium text-foreground">
|
||||
{getEventTitle(event.type)}
|
||||
</p>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{event.target}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
<span>by {event.actor}</span>
|
||||
<span className="mx-2">•</span>
|
||||
<span>{event.details}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{formatDate(event.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Building2, Users, Shield, Key, ArrowRight, TrendingUp } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function OrgOverviewPage() {
|
||||
// Mock organization data
|
||||
const org = {
|
||||
name: "Acme Corp",
|
||||
createdAt: "January 2024",
|
||||
stats: {
|
||||
totalMembers: 24,
|
||||
activeToday: 18,
|
||||
pendingInvites: 3,
|
||||
oidcClients: 5,
|
||||
},
|
||||
};
|
||||
|
||||
const quickLinks = [
|
||||
{
|
||||
title: "Members",
|
||||
description: "Manage team members and roles",
|
||||
icon: Users,
|
||||
href: "/org/members",
|
||||
},
|
||||
{
|
||||
title: "Policies",
|
||||
description: "Configure security requirements",
|
||||
icon: Shield,
|
||||
href: "/org/policies",
|
||||
},
|
||||
{
|
||||
title: "OIDC Clients",
|
||||
description: "Manage connected applications",
|
||||
icon: Key,
|
||||
href: "/org/clients",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-7 h-7 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="page-title">{org.name}</h1>
|
||||
<p className="page-description">Created {org.createdAt}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Total Members</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.totalMembers}</p>
|
||||
</div>
|
||||
<Users className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Active Today</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.activeToday}</p>
|
||||
</div>
|
||||
<TrendingUp className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Pending Invites</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.pendingInvites}</p>
|
||||
</div>
|
||||
<Users className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">OIDC Clients</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.oidcClients}</p>
|
||||
</div>
|
||||
<Key className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<h2 className="text-lg font-semibold mb-4">Quick Actions</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{quickLinks.map((link) => (
|
||||
<Link key={link.href} to={link.href}>
|
||||
<Card className="h-full hover:border-accent/50 transition-colors cursor-pointer group">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
|
||||
<link.icon className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-muted-foreground group-hover:text-accent transition-colors" />
|
||||
</div>
|
||||
<h3 className="font-medium text-foreground">{link.title}</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">{link.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import { Shield, Lock, Fingerprint, Smartphone, UserPlus, AlertTriangle } from "lucide-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
|
||||
export default function PoliciesPage() {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Security Policies</h1>
|
||||
<p className="page-description">
|
||||
Configure security requirements for organization members
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Registration Mode */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<UserPlus className="w-4 h-4" />
|
||||
Registration Mode
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Control how new members can join your organization
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Select defaultValue="invite">
|
||||
<SelectTrigger className="w-full max-w-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="open">Open registration</SelectItem>
|
||||
<SelectItem value="invite">Invite only</SelectItem>
|
||||
<SelectItem value="closed">Closed</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
Invite only: Members can only join via admin invitation
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Password Policy */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Lock className="w-4 h-4" />
|
||||
Password Policy
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Set minimum password requirements for all members
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<Label>Minimum password length</Label>
|
||||
<div className="flex items-center gap-4">
|
||||
<Slider
|
||||
defaultValue={[12]}
|
||||
max={32}
|
||||
min={8}
|
||||
step={1}
|
||||
className="w-full max-w-xs"
|
||||
/>
|
||||
<span className="text-sm font-medium w-16">12 chars</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require uppercase letters</Label>
|
||||
<p className="text-sm text-muted-foreground">At least one A-Z</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require numbers</Label>
|
||||
<p className="text-sm text-muted-foreground">At least one 0-9</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require special characters</Label>
|
||||
<p className="text-sm text-muted-foreground">At least one !@#$%^&*</p>
|
||||
</div>
|
||||
<Switch />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* MFA Requirements */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Smartphone className="w-4 h-4" />
|
||||
Multi-Factor Authentication
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Require additional authentication methods
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label className="flex items-center gap-2">
|
||||
Require TOTP
|
||||
<Badge variant="secondary" className="text-xs">Recommended</Badge>
|
||||
</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
All members must set up an authenticator app
|
||||
</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<Alert className="border-warning/30 bg-warning/5">
|
||||
<AlertTriangle className="w-4 h-4 text-warning" />
|
||||
<AlertDescription className="text-sm">
|
||||
Enabling this will require all existing members to set up TOTP on their next login.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Passkey Requirements */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Fingerprint className="w-4 h-4" />
|
||||
Passkeys (WebAuthn)
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Require passwordless authentication capability
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require at least one passkey</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Members must register a passkey for backup authentication
|
||||
</p>
|
||||
</div>
|
||||
<Switch />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
import { useState } from "react";
|
||||
import { LogIn, LogOut, Key, Fingerprint, Smartphone, AlertTriangle, CheckCircle, MapPin } from "lucide-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const activityEvents = [
|
||||
{
|
||||
id: "1",
|
||||
type: "login_success",
|
||||
method: "password",
|
||||
timestamp: "2024-01-15T10:30:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Chrome on macOS",
|
||||
ip: "192.168.1.1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
type: "login_success",
|
||||
method: "passkey",
|
||||
timestamp: "2024-01-14T15:45:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Safari on iOS",
|
||||
ip: "192.168.1.2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
type: "login_failed",
|
||||
method: "password",
|
||||
timestamp: "2024-01-14T12:00:00Z",
|
||||
location: "Unknown",
|
||||
device: "Firefox on Windows",
|
||||
ip: "10.0.0.5",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
type: "mfa_enabled",
|
||||
method: "totp",
|
||||
timestamp: "2024-01-13T09:00:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Chrome on macOS",
|
||||
ip: "192.168.1.1",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
type: "passkey_added",
|
||||
method: "passkey",
|
||||
timestamp: "2024-01-12T14:30:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Safari on macOS",
|
||||
ip: "192.168.1.1",
|
||||
},
|
||||
];
|
||||
|
||||
const getEventIcon = (type: string, method: string) => {
|
||||
switch (type) {
|
||||
case "login_success":
|
||||
return method === "passkey" ? (
|
||||
<Fingerprint className="w-4 h-4" />
|
||||
) : (
|
||||
<LogIn className="w-4 h-4" />
|
||||
);
|
||||
case "login_failed":
|
||||
return <AlertTriangle className="w-4 h-4" />;
|
||||
case "mfa_enabled":
|
||||
return <Smartphone className="w-4 h-4" />;
|
||||
case "passkey_added":
|
||||
return <Fingerprint className="w-4 h-4" />;
|
||||
case "logout":
|
||||
return <LogOut className="w-4 h-4" />;
|
||||
default:
|
||||
return <Key className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getEventTitle = (type: string, method: string) => {
|
||||
switch (type) {
|
||||
case "login_success":
|
||||
return `Signed in with ${method}`;
|
||||
case "login_failed":
|
||||
return "Failed login attempt";
|
||||
case "mfa_enabled":
|
||||
return "Two-factor authentication enabled";
|
||||
case "passkey_added":
|
||||
return "Passkey added";
|
||||
case "logout":
|
||||
return "Signed out";
|
||||
default:
|
||||
return "Security event";
|
||||
}
|
||||
};
|
||||
|
||||
const getEventStatus = (type: string) => {
|
||||
if (type === "login_failed") {
|
||||
return { variant: "destructive" as const, label: "Failed" };
|
||||
}
|
||||
return { variant: "default" as const, label: "Success" };
|
||||
};
|
||||
|
||||
export default function ActivityPage() {
|
||||
const [filter, setFilter] = useState("all");
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">Activity</h1>
|
||||
<p className="page-description">
|
||||
Your recent account activity and security events
|
||||
</p>
|
||||
</div>
|
||||
<Select value={filter} onValueChange={setFilter}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Filter events" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All events</SelectItem>
|
||||
<SelectItem value="logins">Logins only</SelectItem>
|
||||
<SelectItem value="security">Security changes</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{activityEvents.map((event) => {
|
||||
const status = getEventStatus(event.type);
|
||||
return (
|
||||
<div key={event.id} className="p-4 flex items-start gap-4">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
event.type === "login_failed"
|
||||
? "bg-destructive/10 text-destructive"
|
||||
: "bg-accent/10 text-accent"
|
||||
}`}
|
||||
>
|
||||
{getEventIcon(event.type, event.method)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium text-foreground">
|
||||
{getEventTitle(event.type, event.method)}
|
||||
</p>
|
||||
{event.type === "login_failed" && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
Failed
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground space-y-0.5">
|
||||
<p>{event.device}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-3 h-3" />
|
||||
<span>{event.location}</span>
|
||||
<span className="text-muted-foreground/50">•</span>
|
||||
<span className="font-mono text-xs">{event.ip}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{formatDate(event.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { Link2, Unlink, AlertCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
|
||||
const socialProviders = [
|
||||
{
|
||||
id: "google",
|
||||
name: "Google",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
linked: true,
|
||||
email: "john.doe@gmail.com",
|
||||
},
|
||||
{
|
||||
id: "github",
|
||||
name: "GitHub",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
linked: true,
|
||||
email: "johndoe",
|
||||
},
|
||||
{
|
||||
id: "microsoft",
|
||||
name: "Microsoft",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path fill="#f25022" d="M1 1h10v10H1z" />
|
||||
<path fill="#00a4ef" d="M1 13h10v10H1z" />
|
||||
<path fill="#7fba00" d="M13 1h10v10H13z" />
|
||||
<path fill="#ffb900" d="M13 13h10v10H13z" />
|
||||
</svg>
|
||||
),
|
||||
linked: false,
|
||||
email: null,
|
||||
},
|
||||
];
|
||||
|
||||
export default function LinkedAccountsPage() {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Linked Accounts</h1>
|
||||
<p className="page-description">
|
||||
Connect external accounts for alternative login methods
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Alert className="mb-6">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
<AlertDescription>
|
||||
Linked accounts can only be used to sign in to an existing Authy2 account.
|
||||
They cannot be used to create new accounts.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="space-y-4">
|
||||
{socialProviders.map((provider) => (
|
||||
<Card key={provider.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-secondary flex items-center justify-center">
|
||||
{provider.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">{provider.name}</p>
|
||||
{provider.linked ? (
|
||||
<p className="text-sm text-muted-foreground">{provider.email}</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Not connected</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{provider.linked ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge className="bg-success/10 text-success border-0">Connected</Badge>
|
||||
<Button variant="outline" size="sm">
|
||||
<Unlink className="w-4 h-4 mr-2" />
|
||||
Disconnect
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button size="sm">
|
||||
<Link2 className="w-4 h-4 mr-2" />
|
||||
Connect
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import { useState } from "react";
|
||||
import { Mail, Building2, Upload, CheckCircle, AlertCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const [name, setName] = useState("John Doe");
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
// Mock user data
|
||||
const user = {
|
||||
name: "John Doe",
|
||||
email: "john@example.com",
|
||||
emailVerified: true,
|
||||
avatar: null,
|
||||
initials: "JD",
|
||||
organizations: [
|
||||
{ name: "Acme Corp", role: "Admin" },
|
||||
{ name: "Beta Inc", role: "Member" },
|
||||
],
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
setIsEditing(false);
|
||||
// Save logic here
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Profile</h1>
|
||||
<p className="page-description">
|
||||
Manage your personal information and organization memberships
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Profile Photo & Name */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Personal Information</CardTitle>
|
||||
<CardDescription>Update your photo and personal details</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Avatar */}
|
||||
<div className="flex items-center gap-6">
|
||||
<Avatar className="w-20 h-20">
|
||||
<AvatarImage src={user.avatar || undefined} />
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-xl">
|
||||
{user.initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<Button variant="outline" size="sm">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Change photo
|
||||
</Button>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
JPG, PNG or GIF. Max 2MB.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full name</Label>
|
||||
{isEditing ? (
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
<Button onClick={handleSave}>Save</Button>
|
||||
<Button variant="outline" onClick={() => setIsEditing(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
|
||||
<span className="text-foreground">{user.name}</span>
|
||||
<Button variant="ghost" size="sm" onClick={() => setIsEditing(true)}>
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Email */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Email Address</CardTitle>
|
||||
<CardDescription>Your email is used for login and notifications</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
|
||||
<div className="flex items-center gap-3">
|
||||
<Mail className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="text-foreground">{user.email}</span>
|
||||
{user.emailVerified ? (
|
||||
<Badge variant="secondary" className="bg-success/10 text-success border-0">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Verified
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary" className="bg-warning/10 text-warning border-0">
|
||||
<AlertCircle className="w-3 h-3 mr-1" />
|
||||
Unverified
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Organizations */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Organizations</CardTitle>
|
||||
<CardDescription>Organizations you're a member of</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{user.organizations.map((org, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-3 border rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<span className="text-foreground font-medium">{org.name}</span>
|
||||
</div>
|
||||
<Badge variant="secondary">{org.role}</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
import { useState } from "react";
|
||||
import { Lock, Fingerprint, Smartphone, Shield, Plus, AlertTriangle, CheckCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
|
||||
export default function SecurityPage() {
|
||||
const [showPasswordForm, setShowPasswordForm] = useState(false);
|
||||
|
||||
// Mock security data
|
||||
const security = {
|
||||
passwordLastChanged: "3 months ago",
|
||||
totpEnabled: true,
|
||||
passkeysCount: 2,
|
||||
passkeys: [
|
||||
{ id: "1", name: "MacBook Pro Touch ID", lastUsed: "Today" },
|
||||
{ id: "2", name: "iPhone Face ID", lastUsed: "Yesterday" },
|
||||
],
|
||||
policyRequirements: {
|
||||
totpRequired: true,
|
||||
passkeysRequired: false,
|
||||
minPasswordLength: 12,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Security</h1>
|
||||
<p className="page-description">
|
||||
Manage your authentication methods and security settings
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Policy Status */}
|
||||
<Card className="border-accent/30 bg-accent/5">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Shield className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">Organization Policy</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Your organization requires TOTP to be enabled for all members.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Password */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Lock className="w-4 h-4" />
|
||||
Password
|
||||
</CardTitle>
|
||||
<CardDescription>Last changed {security.passwordLastChanged}</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowPasswordForm(!showPasswordForm)}
|
||||
>
|
||||
Change password
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
{showPasswordForm && (
|
||||
<CardContent className="space-y-4 border-t pt-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="currentPassword">Current password</Label>
|
||||
<Input id="currentPassword" type="password" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="newPassword">New password</Label>
|
||||
<Input id="newPassword" type="password" />
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Minimum {security.policyRequirements.minPasswordLength} characters required by organization
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm new password</Label>
|
||||
<Input id="confirmPassword" type="password" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button>Update password</Button>
|
||||
<Button variant="outline" onClick={() => setShowPasswordForm(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* TOTP / Authenticator */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Smartphone className="w-4 h-4" />
|
||||
Authenticator App (TOTP)
|
||||
{security.policyRequirements.totpRequired && (
|
||||
<Badge variant="secondary" className="ml-2 text-xs">Required</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Use an authenticator app for two-factor authentication
|
||||
</CardDescription>
|
||||
</div>
|
||||
{security.totpEnabled ? (
|
||||
<Badge className="bg-success/10 text-success border-0">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Enabled
|
||||
</Badge>
|
||||
) : (
|
||||
<Button size="sm">Set up</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
{security.totpEnabled && (
|
||||
<CardContent className="border-t pt-4">
|
||||
<Button variant="outline" size="sm">
|
||||
Reconfigure
|
||||
</Button>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Passkeys */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Fingerprint className="w-4 h-4" />
|
||||
Passkeys
|
||||
{security.policyRequirements.passkeysRequired && (
|
||||
<Badge variant="secondary" className="ml-2 text-xs">Required</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Use biometrics or security keys for passwordless login
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button size="sm">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add passkey
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="border-t pt-4">
|
||||
<div className="space-y-3">
|
||||
{security.passkeys.map((passkey) => (
|
||||
<div
|
||||
key={passkey.id}
|
||||
className="flex items-center justify-between p-3 border rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
|
||||
<Fingerprint className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{passkey.name}</p>
|
||||
<p className="text-xs text-muted-foreground">Last used: {passkey.lastUsed}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user