Login with SSO

1'use client';
2 
3import { EyeIcon, EyeOffIcon, Key } from 'lucide-react';
4import Link from 'next/link';
5import { type JSX, type SVGProps, useState } from 'react';
6import { Button } from '@/components/ui/button';
7import {
8  Card,
9  CardContent,
10  CardFooter,
11  CardHeader,
12} from '@/components/ui/card';
13import { Checkbox } from '@/components/ui/checkbox';
14import { Input } from '@/components/ui/input';
15import { Label } from '@/components/ui/label';
16 
17const Logo = (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
18  <svg
19    fill="currentColor"
20    height="48"
21    viewBox="0 0 40 48"
22    width="40"
23    {...props}
24  >
25    <clipPath id="a">
26      <path d="m0 0h40v48h-40z" />
27    </clipPath>
28    <g clipPath="url(#a)">
29      <path d="m25.0887 5.05386-3.933-1.05386-3.3145 12.3696-2.9923-11.16736-3.9331 1.05386 3.233 12.0655-8.05262-8.0526-2.87919 2.8792 8.83271 8.8328-10.99975-2.9474-1.05385625 3.933 12.01860625 3.2204c-.1376-.5935-.2104-1.2119-.2104-1.8473 0-4.4976 3.646-8.1436 8.1437-8.1436 4.4976 0 8.1436 3.646 8.1436 8.1436 0 .6313-.0719 1.2459-.2078 1.8359l10.9227 2.9267 1.0538-3.933-12.0664-3.2332 11.0005-2.9476-1.0539-3.933-12.0659 3.233 8.0526-8.0526-2.8792-2.87916-8.7102 8.71026z" />
30      <path d="m27.8723 26.2214c-.3372 1.4256-1.0491 2.7063-2.0259 3.7324l7.913 7.9131 2.8792-2.8792z" />
31      <path d="m25.7665 30.0366c-.9886 1.0097-2.2379 1.7632-3.6389 2.1515l2.8794 10.746 3.933-1.0539z" />
32      <path d="m21.9807 32.2274c-.65.1671-1.3313.2559-2.0334.2559-.7522 0-1.4806-.102-2.1721-.2929l-2.882 10.7558 3.933 1.0538z" />
33      <path d="m17.6361 32.1507c-1.3796-.4076-2.6067-1.1707-3.5751-2.1833l-7.9325 7.9325 2.87919 2.8792z" />
34      <path d="m13.9956 29.8973c-.9518-1.019-1.6451-2.2826-1.9751-3.6862l-10.95836 2.9363 1.05385 3.933z" />
35    </g>
36  </svg>
37);
38 
39export default function SignIn() {
40  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
41 
42  const togglePasswordVisibility = () => setIsPasswordVisible((prev) => !prev);
43 
44  return (
45    <div className="flex min-h-dvh items-center justify-center">
46      <Card className="mx-4 w-full max-w-md pb-0 shadow-2xs">
47        <CardHeader className="mt-4 mb-2 space-y-1 text-center">
48          <div className="flex justify-center">
49            <Logo />
50          </div>
51          <div>
52            <h2 className="text-balance font-semibold text-2xl">
53              Sign in to Acme
54            </h2>
55            <p className="text-pretty text-muted-foreground text-sm">
56// … truncated