diff --git a/next.config.ts b/next.config.ts index 94647ad..164b423 100644 --- a/next.config.ts +++ b/next.config.ts @@ -2,6 +2,16 @@ import type { NextConfig } from 'next'; const nextConfig: NextConfig = { output: 'standalone', + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'img1.wikia.nocookie.net', + port: '', + pathname: '/**', + }, + ], + }, }; export default nextConfig; diff --git a/package.json b/package.json index 1a21262..967e5f5 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "@fortawesome/free-regular-svg-icons": "^6.7.2", "@fortawesome/free-solid-svg-icons": "^6.7.2", "@fortawesome/react-fontawesome": "^0.2.2", + "@radix-ui/react-label": "^2.1.6", + "@radix-ui/react-hover-card": "^1.1.13", "@radix-ui/react-slot": "^1.2.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index b843b45..987846c 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -2,9 +2,16 @@ import { auth } from '@/auth'; import SSOLogin from '@/components/user/sso-login-button'; import LoginForm from '@/components/user/login-form'; import { redirect } from 'next/navigation'; +import { Button } from '@/components/ui/button'; +import Image from 'next/image'; import '@/app/globals.css'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { + HoverCard, + HoverCardTrigger, + HoverCardContent, +} from '@/components/ui/hover-card'; export default async function LoginPage() { const session = await auth(); @@ -15,20 +22,35 @@ export default async function LoginPage() { return (
- - - Login - - - +
+ + + Login + + + -
+
- {process.env.AUTH_AUTHENTIK_ISSUER && ( - - )} - - + {process.env.AUTH_AUTHENTIK_ISSUER && ( + + )} + + +
+ + + + + + dancing penguin + +
); } diff --git a/src/components/labeled-input.tsx b/src/components/labeled-input.tsx index af8879e..7b4768a 100644 --- a/src/components/labeled-input.tsx +++ b/src/components/labeled-input.tsx @@ -1,4 +1,5 @@ import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; export default function LabeledInput({ type, @@ -11,17 +12,17 @@ export default function LabeledInput({ placeholder?: string; value?: string; }) { - const randomId = Math.random().toString(36).substring(2, 15); + const elementId = Math.random().toString(36).substring(2, 15); return ( -
- +
+
); diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx new file mode 100644 index 0000000..5c120a9 --- /dev/null +++ b/src/components/ui/hover-card.tsx @@ -0,0 +1,44 @@ +'use client'; + +import * as React from 'react'; +import * as HoverCardPrimitive from '@radix-ui/react-hover-card'; + +import { cn } from '@/lib/utils'; + +function HoverCard({ + ...props +}: React.ComponentProps) { + return ; +} + +function HoverCardTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function HoverCardContent({ + className, + align = 'center', + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +export { HoverCard, HoverCardTrigger, HoverCardContent }; diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx new file mode 100644 index 0000000..6bc5f71 --- /dev/null +++ b/src/components/ui/label.tsx @@ -0,0 +1,24 @@ +'use client'; + +import * as React from 'react'; +import * as LabelPrimitive from '@radix-ui/react-label'; + +import { cn } from '@/lib/utils'; + +function Label({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { Label }; diff --git a/src/components/user/login-form.tsx b/src/components/user/login-form.tsx index 47e1945..20438e8 100644 --- a/src/components/user/login-form.tsx +++ b/src/components/user/login-form.tsx @@ -3,7 +3,7 @@ import { Button } from '@/components/ui/button'; export default function LoginForm() { return ( -
+