{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "login-08",
  "type": "registry:block",
  "title": "Login with SSO",
  "description": "A login with sso block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "card",
    "checkbox",
    "input",
    "label"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/login/login-08.tsx",
      "type": "registry:component",
      "target": "components/login-08.tsx",
      "content": "'use client';\n\nimport { EyeIcon, EyeOffIcon, Key } from 'lucide-react';\nimport Link from 'next/link';\nimport { type JSX, type SVGProps, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/components/ui/card';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nconst Logo = (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (\n  <svg\n    fill=\"currentColor\"\n    height=\"48\"\n    viewBox=\"0 0 40 48\"\n    width=\"40\"\n    {...props}\n  >\n    <clipPath id=\"a\">\n      <path d=\"m0 0h40v48h-40z\" />\n    </clipPath>\n    <g clipPath=\"url(#a)\">\n      <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\" />\n      <path d=\"m27.8723 26.2214c-.3372 1.4256-1.0491 2.7063-2.0259 3.7324l7.913 7.9131 2.8792-2.8792z\" />\n      <path d=\"m25.7665 30.0366c-.9886 1.0097-2.2379 1.7632-3.6389 2.1515l2.8794 10.746 3.933-1.0539z\" />\n      <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\" />\n      <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\" />\n      <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\" />\n    </g>\n  </svg>\n);\n\nexport default function SignIn() {\n  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);\n\n  const togglePasswordVisibility = () => setIsPasswordVisible((prev) => !prev);\n\n  return (\n    <div className=\"flex min-h-dvh items-center justify-center\">\n      <Card className=\"mx-4 w-full max-w-md pb-0 shadow-2xs\">\n        <CardHeader className=\"mt-4 mb-2 space-y-1 text-center\">\n          <div className=\"flex justify-center\">\n            <Logo />\n          </div>\n          <div>\n            <h2 className=\"text-balance font-semibold text-2xl\">\n              Sign in to Acme\n            </h2>\n            <p className=\"text-pretty text-muted-foreground text-sm\">\n              Welcome back! Please enter your details.\n            </p>\n          </div>\n        </CardHeader>\n        <CardContent className=\"space-y-6\">\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"email\">Email address</Label>\n            <Input id=\"email\" placeholder=\"ephraim@blocks.so\" type=\"email\" />\n          </div>\n          <div className=\"space-y-0\">\n            <div className=\"mb-2 flex items-center justify-between\">\n              <Label htmlFor=\"password\">Password</Label>\n              <Link className=\"text-primary text-sm hover:underline\" href=\"#\">\n                Reset password\n              </Link>\n            </div>\n            <div className=\"relative\">\n              <Input\n                className=\"pe-9\"\n                id=\"password\"\n                placeholder=\"Enter your password\"\n                type={isPasswordVisible ? 'text' : 'password'}\n              />\n              <button\n                aria-controls=\"password\"\n                aria-label={\n                  isPasswordVisible ? 'Hide password' : 'Show password'\n                }\n                aria-pressed={isPasswordVisible}\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                onClick={togglePasswordVisibility}\n                type=\"button\"\n              >\n                {isPasswordVisible ? (\n                  <EyeOffIcon aria-hidden=\"true\" size={16} />\n                ) : (\n                  <EyeIcon aria-hidden=\"true\" size={16} />\n                )}\n              </button>\n            </div>\n          </div>\n          <div className=\"flex items-center space-x-2\">\n            <Checkbox defaultChecked id=\"remember\" />\n            <Label className=\"font-normal text-sm\" htmlFor=\"remember\">\n              Remember me\n            </Label>\n          </div>\n\n          <div className=\"space-y-2\">\n            <Button className=\"w-full\" type=\"submit\">\n              Sign In\n            </Button>\n            <Button className=\"w-full\" type=\"button\" variant=\"outline\">\n              <Key className=\"mr-2 h-4 w-4\" />\n              Single sign-on (SSO)\n            </Button>\n          </div>\n        </CardContent>\n        <CardFooter className=\"flex justify-center border-t py-4!\">\n          <p className=\"text-pretty text-center text-muted-foreground text-sm\">\n            New to Acme?{' '}\n            <Link className=\"text-primary hover:underline\" href=\"#\">\n              Sign up\n            </Link>\n          </p>\n        </CardFooter>\n      </Card>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "login"
  ]
}