42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
|
|
import { Button } from './ui/button';
|
|
import { Card } from './ui/card';
|
|
import { Sparkle } from '@phosphor-icons/react';
|
|
|
|
interface PassportLoginProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onLoginSuccess: (user: { login: string; avatarUrl: string; email: string }) => void;
|
|
}
|
|
|
|
export function PassportLogin({ open, onClose, onLoginSuccess }: PassportLoginProps) {
|
|
const handleLogin = async () => {
|
|
// Stub: Replace with real OAuth flow
|
|
const user = {
|
|
login: 'demo_user',
|
|
avatarUrl: 'https://avatars.githubusercontent.com/u/1?v=4',
|
|
email: 'demo@aethex.io',
|
|
};
|
|
onLoginSuccess(user);
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-[400px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl flex items-center gap-2">
|
|
<Sparkle className="text-accent" size={20} /> AeThex Passport Login
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<Card className="p-4 mt-2">
|
|
<p className="text-sm mb-4">Sign in with your AeThex Passport account to access private projects and sync your progress.</p>
|
|
<Button variant="accent" className="w-full" onClick={handleLogin}>
|
|
Sign in with Passport
|
|
</Button>
|
|
</Card>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|