feat(blocks/authentication): add new authentication blocks #404
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@KhaledSaeed18 is attempting to deploy a commit to the 8bitcn Team on Vercel. A member of the Team first needs to authorize it. |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds new 8-bit themed authentication UI blocks and a signup route. Introduces multiple signup/login form components, 8-bit UI primitives (Button, Card, Input, Label, retro.css), updates the Authentication blocks page to render new blocks, creates a new /signup page, and registers all components in public and root registries. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant R as App Router
participant P as /signup Page
participant F as SignupForm
participant UI as 8-bit UI (Button/Input/Label/Card)
U->>R: Navigate to /signup
R->>P: Render SignupPage
P->>F: Include SignupForm
F->>UI: Compose fields/buttons
note right of F: Static form rendering (client-side UI)
UI-->>U: Display retro-styled form
sequenceDiagram
autonumber
participant U as User
participant A as AuthenticationBlocks
participant B as Blocks (EmailLogin, Signup*, SignupPage)
participant UI as 8-bit UI
U->>A: Open Authentication Blocks page
A->>B: Render multiple block sections
B->>UI: Use 8-bit primitives
UI-->>U: Show variants (email-only, forms, with image)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 13 files
Prompt for AI agents (all 2 issues)
Understand the root cause of the following 2 issues and fix them.
<file name="components/ui/8bit/blocks/signup-form-with-image.tsx">
<violation number="1" location="components/ui/8bit/blocks/signup-form-with-image.tsx:55">
These social login buttons need type="button"; otherwise they default to submitting the form. Please add type="button" to this button (and the other social auth buttons in this form).</violation>
</file>
<file name="components/ui/8bit/blocks/signup-form-2.tsx">
<violation number="1" location="components/ui/8bit/blocks/signup-form-2.tsx:33">
These social auth buttons default to type="submit" inside the form, so clicking them submits the form instead of starting the Apple auth flow. Please set them to type="button" to avoid unintended submissions.</violation>
</file>
React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.
| </span> | ||
| </div> | ||
| <div className="grid grid-cols-3 gap-4"> | ||
| <Button variant="outline" className="w-full"> |
There was a problem hiding this comment.
These social login buttons need type="button"; otherwise they default to submitting the form. Please add type="button" to this button (and the other social auth buttons in this form).
Prompt for AI agents
Address the following comment on components/ui/8bit/blocks/signup-form-with-image.tsx at line 55:
<comment>These social login buttons need type="button"; otherwise they default to submitting the form. Please add type="button" to this button (and the other social auth buttons in this form).</comment>
<file context>
@@ -0,0 +1,101 @@
+ </span>
+ </div>
+ <div className="grid grid-cols-3 gap-4">
+ <Button variant="outline" className="w-full">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path
</file context>
Suggested change
| <Button variant="outline" className="w-full"> | |
| <Button type="button" variant="outline" className="w-full"> |
| <form> | ||
| <div className="grid gap-6"> | ||
| <div className="flex flex-col gap-4"> | ||
| <Button variant="outline" className="w-full"> |
There was a problem hiding this comment.
These social auth buttons default to type="submit" inside the form, so clicking them submits the form instead of starting the Apple auth flow. Please set them to type="button" to avoid unintended submissions.
Prompt for AI agents
Address the following comment on components/ui/8bit/blocks/signup-form-2.tsx at line 33:
<comment>These social auth buttons default to type="submit" inside the form, so clicking them submits the form instead of starting the Apple auth flow. Please set them to type="button" to avoid unintended submissions.</comment>
<file context>
@@ -0,0 +1,92 @@
+ <form>
+ <div className="grid gap-6">
+ <div className="flex flex-col gap-4">
+ <Button variant="outline" className="w-full">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path
</file context>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
🧹 Nitpick comments (6)
public/r/email-only-login-form.json (3)
14-18: Mark decorative icon as aria-hiddenThe GalleryVerticalEnd icon is purely decorative; hide it from screen readers.
Apply this diff in components/ui/8bit/blocks/email-only-login-form.tsx:
- <GalleryVerticalEnd className="size-8" /> + <GalleryVerticalEnd className="size-8" aria-hidden="true" />
20-24: Forward refs for Button to support compositionExpose ref properly and remove ref from props. This aligns with shadcn patterns.
Apply this diff in components/ui/8bit/button.tsx:
+import * as React from "react"; import { type VariantProps, cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Button as ShadcnButton } from "@/components/ui/button"; import "./styles/retro.css"; @@ export interface BitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> { asChild?: boolean; - ref?: React.Ref<HTMLButtonElement>; } -function Button({ children, asChild, ...props }: BitButtonProps) { +const Button = React.forwardRef<HTMLButtonElement, BitButtonProps>( + ({ children, asChild, ...props }, ref) => { const { variant, size, className, font } = props; return ( <ShadcnButton {...props} + ref={ref} className={cn( "rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5 border-none", font !== "normal" && "retro", className )} size={size} variant={variant} asChild={asChild} > {asChild ? ( <span className="relative inline-flex items-center justify-center gap-1.5"> {children} @@ )} </ShadcnButton> ); -} +}); + +Button.displayName = "Button"; export { Button };
26-30: Avoid applying the same className to both wrapper and inputPassing props.className to the outer wrapper and the inner ShadcnInput causes duplication/unexpected styles. Consider splitting wrapperClassName and inputClassName, or only applying className to the input.
If you want, I can provide a minimal, backward-compatible API tweak that introduces wrapperClassName while preserving className for the input.
public/r/signup-page.json (1)
15-18: Consider next/image for better image performanceUsing Next.js Image provides optimization and avoids layout shifts. Optional for a registry example.
-import { GalleryVerticalEnd } from "lucide-react"; +import Image from "next/image"; +import { GalleryVerticalEnd } from "lucide-react"; @@ - <img - src="/placeholder.svg" - alt="Image" - className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale" - /> + <Image + src="/placeholder.svg" + alt="Signup cover" + fill + className="object-cover dark:brightness-[0.2] dark:grayscale" + priority + />public/r/signup-form-with-image.json (1)
15-18: Tidy constant class interpolation
${"retro"}is redundant.- <p - className={`${"retro"} text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary`} - > + <p className="retro text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">public/r/signup-form-2.json (1)
15-18: Mark inline SVGs as decorative or add accessible labelsIf icons are purely decorative, set aria-hidden or provide sr-only text (you already have text). Adding aria-hidden reduces noise.
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> @@ - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
app/blocks/authentication/authentication.tsx(2 hunks)app/signup/page.tsx(1 hunks)components/ui/8bit/blocks/email-only-login-form.tsx(1 hunks)components/ui/8bit/blocks/signup-form-2.tsx(1 hunks)components/ui/8bit/blocks/signup-form-with-image.tsx(1 hunks)components/ui/8bit/blocks/signup-form.tsx(1 hunks)public/r/email-only-login-form.json(1 hunks)public/r/registry.json(1 hunks)public/r/signup-form-2.json(1 hunks)public/r/signup-form-with-image.json(1 hunks)public/r/signup-form.json(1 hunks)public/r/signup-page.json(1 hunks)registry.json(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-05-26T15:29:11.988Z
Learnt from: BIT-zhaoyang
PR: TheOrcDev/8bitcn-ui#203
File: components/ui/8bit/navigation-menu.tsx:170-189
Timestamp: 2025-05-26T15:29:11.988Z
Learning: In components/ui/8bit/navigation-menu.tsx, the NavigationMenuIndicator component uses Radix Indicator directly instead of the ShadcnNavigationMenuIndicator wrapper because it needs to apply custom styling (`dark:bg-ring`) to the inner div element, which the shadcn wrapper doesn't provide an interface for.
Applied to files:
public/r/signup-page.jsonpublic/r/signup-form-2.jsonpublic/r/signup-form-with-image.json
📚 Learning: 2025-05-26T15:27:10.766Z
Learnt from: BIT-zhaoyang
PR: TheOrcDev/8bitcn-ui#203
File: components/ui/8bit/navigation-menu.tsx:44-68
Timestamp: 2025-05-26T15:27:10.766Z
Learning: In components/ui/8bit/navigation-menu.tsx, the NavigationMenu component uses Radix Root directly instead of the ShadcnNavigationMenu wrapper because it needs to replace the contained NavigationMenuViewport with a custom implementation that includes shadow-border styling.
Applied to files:
public/r/signup-form-2.jsonpublic/r/signup-form-with-image.jsonpublic/r/email-only-login-form.json
🧬 Code graph analysis (5)
components/ui/8bit/blocks/email-only-login-form.tsx (1)
lib/utils.ts (1)
cn(4-6)
app/blocks/authentication/authentication.tsx (7)
app/docs/components/copy-command-button.tsx (1)
CopyCommandButton(13-37)app/docs/components/open-in-v0-button.tsx (1)
OpenInV0Button(5-39)components/ui/8bit/blocks/email-only-login-form.tsx (1)
EmailOnlyLoginForm(9-78)components/ui/8bit/blocks/signup-form-with-image.tsx (1)
SignupForm(10-101)components/ui/8bit/blocks/signup-form-2.tsx (1)
SignupForm(16-92)components/ui/8bit/blocks/signup-form.tsx (1)
SignupForm(14-61)app/signup/page.tsx (1)
SignupPage(5-32)
components/ui/8bit/blocks/signup-form.tsx (1)
lib/utils.ts (1)
cn(4-6)
components/ui/8bit/blocks/signup-form-with-image.tsx (1)
lib/utils.ts (1)
cn(4-6)
components/ui/8bit/blocks/signup-form-2.tsx (1)
lib/utils.ts (1)
cn(4-6)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: cubic · AI code reviewer
🔇 Additional comments (6)
public/r/signup-page.json (3)
27-31: Ref: Button ref-forwarding and typingButton wrapper improvements (forwardRef) were noted earlier; avoid duplicating here.
39-43: Ref: Input wrapper className duplicationInput wrapper suggestion already provided; same applies here.
33-37: No action needed: CardAction is defined and exported in components/ui/card.tsx.public/r/signup-form-with-image.json (1)
21-25: Ref: Button ref-forwarding and Input className duplicationSame recommendations as noted in prior files.
public/r/signup-form-2.json (1)
21-25: Ref: Button ref-forwarding and Input className duplicationSame recommendations as noted earlier.
public/r/signup-form.json (1)
21-25: Ref: Button ref-forwarding and Input className duplicationSame recommendations as noted earlier.
Comment on lines
+96
to
+195
| <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]"> | ||
| <div className="flex flex-col md:flex-row gap-2 items-center justify-between"> | ||
| <h2 className="text-sm text-muted-foreground sm:pl-3"> | ||
| A simple email-only login form | ||
| </h2> | ||
|
|
||
| <div className="flex flex-col md:flex-row items-center gap-2"> | ||
| <CopyCommandButton | ||
| command="pnpm dlx shadcn@latest add @8bitcn/email-only-login-form" | ||
| copyCommand="pnpm dlx shadcn@latest add @8bitcn/email-only-login-form" | ||
| /> | ||
| <OpenInV0Button | ||
| name="8bit-email-only-login-form" | ||
| className="w-fit" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center justify-center min-h-[400px] relative"> | ||
| <EmailOnlyLoginForm /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]"> | ||
| <div className="flex flex-col md:flex-row gap-2 items-center justify-between"> | ||
| <h2 className="text-sm text-muted-foreground sm:pl-3"> | ||
| A simple signup form | ||
| </h2> | ||
|
|
||
| <div className="flex flex-col md:flex-row items-center gap-2"> | ||
| <CopyCommandButton | ||
| command="pnpm dlx shadcn@latest add @8bitcn/signup-form" | ||
| copyCommand="pnpm dlx shadcn@latest add @8bitcn/signup-form" | ||
| /> | ||
| <OpenInV0Button name="8bit-signup-form" className="w-fit" /> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center justify-center min-h-[400px] relative"> | ||
| <SignupForm /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col md:flex-row gap-2 items-center justify-between"> | ||
| <h2 className="text-sm text-muted-foreground sm:pl-3"> | ||
| A two column signup page with a cover image. | ||
| </h2> | ||
|
|
||
| <div className="flex flex-col md:flex-row items-center gap-2"> | ||
| <CopyCommandButton | ||
| command="pnpm dlx shadcn@latest add @8bitcn/signup-page" | ||
| copyCommand="pnpm dlx shadcn@latest add @8bitcn/signup-page" | ||
| /> | ||
| <OpenInV0Button name="8bit-signup-page" className="w-fit" /> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center justify-center min-h-[400px] relative border rounded-md"> | ||
| <div className="w-full"> | ||
| <SignupPage /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]"> | ||
| <div className="flex flex-col md:flex-row gap-2 items-center justify-between"> | ||
| <h2 className="text-sm text-muted-foreground sm:pl-3"> | ||
| A simple signup form with icons | ||
| </h2> | ||
|
|
||
| <div className="flex flex-col md:flex-row items-center gap-2"> | ||
| <CopyCommandButton | ||
| command="pnpm dlx shadcn@latest add @8bitcn/signup-form-2" | ||
| copyCommand="pnpm dlx shadcn@latest add @8bitcn/signup-form-2" | ||
| /> | ||
| <OpenInV0Button name="8bit-signup-form-2" className="w-fit" /> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center justify-center min-h-[400px] relative"> | ||
| <SignupForm2 /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]"> | ||
| <div className="flex flex-col md:flex-row gap-2 items-center justify-between"> | ||
| <h2 className="text-sm text-muted-foreground sm:pl-3"> | ||
| A simple signup form with image | ||
| </h2> | ||
|
|
||
| <div className="flex flex-col md:flex-row items-center gap-2"> | ||
| <CopyCommandButton | ||
| command="pnpm dlx shadcn@latest add @8bitcn/signup-form-with-image" | ||
| copyCommand="pnpm dlx shadcn@latest add @8bitcn/signup-form-with-image" | ||
| /> | ||
| <OpenInV0Button | ||
| name="8bit-signup-form-with-image" | ||
| className="w-fit" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center justify-center min-h-[400px] relative w-full max-w-sm md:max-w-4xl mx-auto"> | ||
| <SignupFormWithImage /> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Set non-submit buttons to type="button" in the new auth blocks
All of the newly introduced auth blocks wire social/alternate action buttons inside a <form> without specifying type. In HTML the default is submit, so clicking “Continue with Google/Apple/Meta” or similar will trigger the form submission instead of the intended OAuth flow. That breaks the UX for every variant showcased here (SignupForm, SignupForm2, SignupFormWithImage, EmailOnlyLoginForm) and is especially visible when these blocks are copied from the registry.
Please mark those buttons as type="button" so they don’t submit the form.
diff --git a/components/ui/8bit/blocks/email-only-login-form.tsx b/components/ui/8bit/blocks/email-only-login-form.tsx
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
diff --git a/components/ui/8bit/blocks/signup-form.tsx b/components/ui/8bit/blocks/signup-form.tsx
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
diff --git a/components/ui/8bit/blocks/signup-form-2.tsx b/components/ui/8bit/blocks/signup-form-2.tsx
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
diff --git a/components/ui/8bit/blocks/signup-form-with-image.tsx b/components/ui/8bit/blocks/signup-form-with-image.tsx
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In app/blocks/authentication/authentication.tsx around lines 96 to 195, several
auth block components (EmailOnlyLoginForm, SignupForm, SignupForm2,
SignupFormWithImage) render social/alternate action buttons inside <form>
elements without an explicit type, causing them to default to type="submit" and
inadvertently submit the form; update each non-submit button (social OAuth
buttons, "Continue with X", toggle/action buttons that are not the form submit)
to include type="button" in their JSX so only the intended submit button uses
type="submit" and other actions no longer trigger form submission.
Comment on lines
+7
to
+31
| <div className="grid min-h-svh lg:grid-cols-2"> | ||
| <div className="bg-muted relative hidden lg:block"> | ||
| <img | ||
| src="/placeholder.svg" | ||
| alt="Image" | ||
| className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale" | ||
| /> | ||
| </div> | ||
| <div className="flex flex-col gap-4 p-6 md:p-10"> | ||
| <div className="flex justify-center gap-2 md:justify-start"> | ||
| <a href="#" className="flex items-center gap-2 font-medium"> | ||
| <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md"> | ||
| <GalleryVerticalEnd className="size-4" /> | ||
| </div> | ||
| Acme Inc. | ||
| </a> | ||
| </div> | ||
| <div className="flex flex-1 items-center justify-center"> | ||
| <div className="w-full max-w-md"> | ||
| <SignupForm /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
Prefer Next <Image> for optimized media handling.
Using a raw <img> trips the @next/next/no-img-element rule and skips automatic image optimization/loading behaviour. Please swap to next/image (or explicitly disable the lint rule with justification).
🤖 Prompt for AI Agents
In app/signup/page.tsx around lines 7 to 31, the raw <img> violates the
@next/next/no-img-element rule and bypasses Next.js image optimization; replace
it with next/image by importing Image from "next/image", use the fill prop (or
provide explicit width/height) to match the current absolute inset-0 h-full
w-full object-cover behavior, pass the same src and alt, preserve the
dark:brightness and dark:grayscale styling via className or wrapper styling, and
remove the original <img>; do not disable the lint rule unless you have a
specific justification.
Comment on lines
+17
to
+22
| <a href="#" className="flex items-center gap-2 font-medium"> | ||
| <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md"> | ||
| <GalleryVerticalEnd className="size-4" /> | ||
| </div> | ||
| Acme Inc. | ||
| </a> |
There was a problem hiding this comment.
Avoid placeholder href="#" anchors.
This link scrolls to page top and provides no destination, which is a11y-hostile and confusing. Point it to a real route (e.g. /) or render static text instead.
🤖 Prompt for AI Agents
In app/signup/page.tsx around lines 17 to 22, the anchor uses a placeholder
href="#" which causes page-top scrolling and is inaccessible; replace the
placeholder with a real route (e.g. href="/" or the appropriate homepage path)
or convert the anchor to a non-interactive element (like a div or span) if it is
purely decorative; ensure that if it remains a link it points to the correct
destination and retains accessible attributes (aria-label if needed).
Comment on lines
+55
to
+72
| <Button variant="outline" className="w-full"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | ||
| <path | ||
| d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
| <span className="sr-only">Continue with Apple</span> | ||
| </Button> | ||
| <Button variant="outline" className="w-full"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | ||
| <path | ||
| d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
| <span className="sr-only">Continue with Google</span> | ||
| </Button> |
There was a problem hiding this comment.
Keep the social login buttons from submitting the email form
Inside the <form>, the Apple/Google buttons default to type="submit", so clicking them triggers an unintended form submission. Please switch both to type="button".
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
...
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Button variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| <span className="sr-only">Continue with Apple</span> | |
| </Button> | |
| <Button variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| <span className="sr-only">Continue with Google</span> | |
| </Button> | |
| <Button type="button" variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| <span className="sr-only">Continue with Apple</span> | |
| </Button> | |
| <Button type="button" variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| <span className="sr-only">Continue with Google</span> | |
| </Button> |
🤖 Prompt for AI Agents
In components/ui/8bit/blocks/email-only-login-form.tsx around lines 55 to 72,
the Apple and Google Button elements inside the form currently act as implicit
submit buttons and trigger the form on click; update both Button components to
be non-submitting by adding type="button" (ensure the Button component forwards
the type prop to the underlying <button> element so it actually prevents form
submission).
Comment on lines
+33
to
+50
| <Button variant="outline" className="w-full"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | ||
| <path | ||
| d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
| Sign up with Apple | ||
| </Button> | ||
| <Button variant="outline" className="w-full"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | ||
| <path | ||
| d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
| Sign up with Google | ||
| </Button> |
There was a problem hiding this comment.
Prevent social sign-up buttons from submitting the form
Both social buttons are rendered inside the <form>, so our button primitive falls back to type="submit". That causes a form submission/reload when someone clicks “Sign up with Apple/Google.” Please make them type="button" to avoid the unintended submit.
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
...
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Button variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| Sign up with Apple | |
| </Button> | |
| <Button variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| Sign up with Google | |
| </Button> | |
| <Button type="button" variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| Sign up with Apple | |
| </Button> | |
| <Button type="button" variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| Sign up with Google | |
| </Button> |
🤖 Prompt for AI Agents
In components/ui/8bit/blocks/signup-form-2.tsx around lines 33 to 50, the two
social sign-up Button components currently default to type="submit" because they
are inside a form; change both Button elements to include type="button"
attributes so clicking them does not submit the form (leave other props like
variant and className unchanged).
Comment on lines
+15
to
+18
| "path": "components/ui/8bit/blocks/signup-form-2.tsx", | ||
| "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nimport \"../styles/retro.css\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader className=\"text-center\">\n <CardTitle className=\"text-xl\">Create an account</CardTitle>\n <CardDescription className=\"text-xs\">\n Sign up with your Apple or Google account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <div className=\"grid gap-6\">\n <div className=\"flex flex-col gap-4\">\n <Button variant=\"outline\" className=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n Sign up with Apple\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n Sign up with Google\n </Button>\n </div>\n <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n Or continue with\n </span>\n </div>\n <div className=\"grid gap-6\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Create account\n </Button>\n </div>\n <div className=\"text-center text-xs\">\n Already have an account?{\" \"}\n <a href=\"#\" className=\"underline underline-offset-4\">\n Sign in\n </a>\n </div>\n </div>\n </form>\n </CardContent>\n </Card>\n <div\n className={`${\"retro\"} text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary`}\n >\n <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n </div>\n </div>\n );\n}\n", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/blocks/signup-form-2.tsx" |
There was a problem hiding this comment.
Set type="button" on social auth buttons
Avoid default submit for Apple/Google buttons.
Apply this diff in components/ui/8bit/blocks/signup-form-2.tsx:
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "path": "components/ui/8bit/blocks/signup-form-2.tsx", | |
| "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nimport \"../styles/retro.css\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader className=\"text-center\">\n <CardTitle className=\"text-xl\">Create an account</CardTitle>\n <CardDescription className=\"text-xs\">\n Sign up with your Apple or Google account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <div className=\"grid gap-6\">\n <div className=\"flex flex-col gap-4\">\n <Button variant=\"outline\" className=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n Sign up with Apple\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n Sign up with Google\n </Button>\n </div>\n <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n Or continue with\n </span>\n </div>\n <div className=\"grid gap-6\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Create account\n </Button>\n </div>\n <div className=\"text-center text-xs\">\n Already have an account?{\" \"}\n <a href=\"#\" className=\"underline underline-offset-4\">\n Sign in\n </a>\n </div>\n </div>\n </form>\n </CardContent>\n </Card>\n <div\n className={`${\"retro\"} text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary`}\n >\n <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n </div>\n </div>\n );\n}\n", | |
| "type": "registry:component", | |
| "target": "components/ui/8bit/blocks/signup-form-2.tsx" | |
| <div className="flex flex-col gap-4"> | |
| <Button type="button" variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| Sign up with Apple | |
| </Button> | |
| <Button type="button" variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| Sign up with Google | |
| </Button> | |
| </div> |
🤖 Prompt for AI Agents
In public/r/signup-form-2.json (components/ui/8bit/blocks/signup-form-2.tsx)
around lines 15-18, the Apple and Google social auth Button components inside
the form lack an explicit type so they default to "submit"; change those two
Buttons to include type="button" to prevent inadvertent form submission (leave
the final "Create account" Button as type="submit").
Comment on lines
+15
to
+18
| "path": "components/ui/8bit/blocks/signup-form-with-image.tsx", | ||
| "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport { Card, CardContent } from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nimport \"../styles/retro.css\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card className=\"p-5\">\n <CardContent className=\"grid p-0 md:grid-cols-2\">\n <div className=\"relative hidden bg-muted md:block\">\n <img\n src=\"/placeholder.svg\"\n alt=\"Image\"\n className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n />\n </div>\n <form className=\"p-6 md:p-8\">\n <div className=\"flex flex-col gap-6\">\n <div className=\"flex flex-col items-center text-center\">\n <h1 className=\"text-xl font-bold\">Create your account</h1>\n <p className=\"text-balance text-xs text-muted-foreground\">\n Sign up for an Acme Inc account to get started\n </p>\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Create Account\n </Button>\n <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n Or continue with\n </span>\n </div>\n <div className=\"grid grid-cols-3 gap-4\">\n <Button variant=\"outline\" className=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n <span className=\"sr-only\">Continue with Apple</span>\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n <span className=\"sr-only\">Continue with Google</span>\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n fill=\"currentColor\"\n />\n </svg>\n <span className=\"sr-only\">Continue with Meta</span>\n </Button>\n </div>\n <div className=\"text-center text-xs\">\n Already have an account?{\" \"}\n <a href=\"#\" className=\"underline underline-offset-4\">\n Sign in\n </a>\n </div>\n </div>\n </form>\n </CardContent>\n </Card>\n <p\n className={`${\"retro\"} text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary`}\n >\n By clicking create account, you agree to our{\" \"}\n <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n </p>\n </div>\n );\n}\n", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/blocks/signup-form-with-image.tsx" |
There was a problem hiding this comment.
Set type="button" on all social buttons
Three social buttons are inside a form and will submit by default.
Apply this diff in components/ui/8bit/blocks/signup-form-with-image.tsx:
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
@@
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "path": "components/ui/8bit/blocks/signup-form-with-image.tsx", | |
| "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport { Card, CardContent } from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nimport \"../styles/retro.css\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card className=\"p-5\">\n <CardContent className=\"grid p-0 md:grid-cols-2\">\n <div className=\"relative hidden bg-muted md:block\">\n <img\n src=\"/placeholder.svg\"\n alt=\"Image\"\n className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n />\n </div>\n <form className=\"p-6 md:p-8\">\n <div className=\"flex flex-col gap-6\">\n <div className=\"flex flex-col items-center text-center\">\n <h1 className=\"text-xl font-bold\">Create your account</h1>\n <p className=\"text-balance text-xs text-muted-foreground\">\n Sign up for an Acme Inc account to get started\n </p>\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Create Account\n </Button>\n <div className=\"relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border\">\n <span className=\"relative z-10 bg-background px-2 text-muted-foreground\">\n Or continue with\n </span>\n </div>\n <div className=\"grid grid-cols-3 gap-4\">\n <Button variant=\"outline\" className=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n <span className=\"sr-only\">Continue with Apple</span>\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n <span className=\"sr-only\">Continue with Google</span>\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n fill=\"currentColor\"\n />\n </svg>\n <span className=\"sr-only\">Continue with Meta</span>\n </Button>\n </div>\n <div className=\"text-center text-xs\">\n Already have an account?{\" \"}\n <a href=\"#\" className=\"underline underline-offset-4\">\n Sign in\n </a>\n </div>\n </div>\n </form>\n </CardContent>\n </Card>\n <p\n className={`${\"retro\"} text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary`}\n >\n By clicking create account, you agree to our{\" \"}\n <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n </p>\n </div>\n );\n}\n", | |
| "type": "registry:component", | |
| "target": "components/ui/8bit/blocks/signup-form-with-image.tsx" | |
| <div className="grid grid-cols-3 gap-4"> | |
| <Button type="button" variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| <span className="sr-only">Continue with Apple</span> | |
| </Button> | |
| <Button type="button" variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| <span className="sr-only">Continue with Google</span> | |
| </Button> | |
| <Button type="button" variant="outline" className="w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path | |
| d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z" | |
| fill="currentColor" | |
| /> | |
| </svg> | |
| <span className="sr-only">Continue with Meta</span> | |
| </Button> | |
| </div> |
🤖 Prompt for AI Agents
In public/r/signup-form-with-image.json (target
components/ui/8bit/blocks/signup-form-with-image.tsx) around lines 15-18, the
three social Buttons inside the form are missing an explicit type and will
default to submitting the form; update each social Button (the three <Button
variant="outline" ...> elements) to include type="button" so they do not trigger
form submit (leave the main "Create Account" button as type="submit").
Comment on lines
+15
to
+18
| "path": "components/ui/8bit/blocks/signup-form.tsx", | ||
| "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader>\n <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n <CardDescription className=\"text-xs\">\n Enter your email and choose a password to create your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <div className=\"flex flex-col gap-6\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Create account\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n Continue with Google\n </Button>\n </div>\n <div className=\"mt-4 text-center text-xs\">\n Already have an account?{\" \"}\n <a href=\"#\" className=\"underline underline-offset-4\">\n Log in\n </a>\n </div>\n </form>\n </CardContent>\n </Card>\n </div>\n );\n}\n", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/blocks/signup-form.tsx" |
There was a problem hiding this comment.
Set type="button" on the Google button
Prevents accidental form submit.
Apply this diff in components/ui/8bit/blocks/signup-form.tsx:
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
Continue with Google
</Button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "path": "components/ui/8bit/blocks/signup-form.tsx", | |
| "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader>\n <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n <CardDescription className=\"text-xs\">\n Enter your email and choose a password to create your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <div className=\"flex flex-col gap-6\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Create account\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n Continue with Google\n </Button>\n </div>\n <div className=\"mt-4 text-center text-xs\">\n Already have an account?{\" \"}\n <a href=\"#\" className=\"underline underline-offset-4\">\n Log in\n </a>\n </div>\n </form>\n </CardContent>\n </Card>\n </div>\n );\n}\n", | |
| "type": "registry:component", | |
| "target": "components/ui/8bit/blocks/signup-form.tsx" | |
| <div className="flex flex-col gap-6"> | |
| <div className="grid gap-2"> | |
| <Label htmlFor="email">Email</Label> | |
| <Input | |
| id="email" | |
| type="email" | |
| placeholder="m@example.com" | |
| required | |
| /> | |
| </div> | |
| <div className="grid gap-2"> | |
| <Label htmlFor="password">Password</Label> | |
| <Input id="password" type="password" required /> | |
| </div> | |
| <Button type="submit" className="w-full"> | |
| Create account | |
| </Button> | |
| <Button type="button" variant="outline" className="w-full"> | |
| Continue with Google | |
| </Button> | |
| </div> |
🤖 Prompt for AI Agents
In public/r/signup-form.json (target components/ui/8bit/blocks/signup-form.tsx)
around lines 15 to 18, the "Continue with Google" Button currently lacks an
explicit type which causes it to default to type="submit" and can accidentally
submit the form; update that Button to include type="button" (e.g., <Button
type="button" variant="outline" className="w-full">) so it does not trigger form
submission.
Comment on lines
+21
to
+25
| "path": "components/ui/8bit/blocks/signup-form.tsx", | ||
| "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader>\n <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n <CardDescription className=\"text-xs\">\n Enter your email and choose a password to create your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <div className=\"flex flex-col gap-6\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Create account\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n Continue with Google\n </Button>\n </div>\n <div className=\"mt-4 text-center text-xs\">\n Already have an account?{\" \"}\n <a href=\"#\" className=\"underline underline-offset-4\">\n Log in\n </a>\n </div>\n </form>\n </CardContent>\n </Card>\n </div>\n );\n}\n", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/blocks/signup-form.tsx" | ||
| }, |
There was a problem hiding this comment.
Prevent unintended form submissions by social buttons
"Continue with Google" inside the form defaults to submit.
Apply this diff in components/ui/8bit/blocks/signup-form.tsx:
- <Button variant="outline" className="w-full">
+ <Button type="button" variant="outline" className="w-full">
Continue with Google
</Button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "path": "components/ui/8bit/blocks/signup-form.tsx", | |
| "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n return (\n <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n <Card>\n <CardHeader>\n <CardTitle className=\"text-2xl\">Sign up</CardTitle>\n <CardDescription className=\"text-xs\">\n Enter your email and choose a password to create your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <div className=\"flex flex-col gap-6\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Create account\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n Continue with Google\n </Button>\n </div>\n <div className=\"mt-4 text-center text-xs\">\n Already have an account?{\" \"}\n <a href=\"#\" className=\"underline underline-offset-4\">\n Log in\n </a>\n </div>\n </form>\n </CardContent>\n </Card>\n </div>\n );\n}\n", | |
| "type": "registry:component", | |
| "target": "components/ui/8bit/blocks/signup-form.tsx" | |
| }, | |
| <form> | |
| <div className="flex flex-col gap-6"> | |
| <div className="grid gap-2"> | |
| <Label htmlFor="email">Email</Label> | |
| <Input | |
| id="email" | |
| type="email" | |
| placeholder="m@example.com" | |
| required | |
| /> | |
| </div> | |
| <div className="grid gap-2"> | |
| <Label htmlFor="password">Password</Label> | |
| <Input id="password" type="password" required /> | |
| </div> | |
| <Button type="submit" className="w-full"> | |
| Create account | |
| </Button> | |
| <Button type="button" variant="outline" className="w-full"> | |
| Continue with Google | |
| </Button> | |
| </div> | |
| <div className="mt-4 text-center text-xs"> | |
| Already have an account?{" "} | |
| <a href="#" className="underline underline-offset-4"> | |
| Log in | |
| </a> | |
| </div> | |
| </form> |
🤖 Prompt for AI Agents
In components/ui/8bit/blocks/signup-form.tsx (referenced in
public/r/signup-page.json lines ~21-25), the "Continue with Google" button is
inside the <form> and defaults to type="submit", causing unintended form
submissions; change that button to explicitly use type="button" (or move it
outside the <form>) to prevent form submission, e.g. set <Button type="button"
variant="outline" className="w-full">Continue with Google</Button> so it no
longer triggers the form submit.
Comment on lines
+1794
to
1987
| "name": "signup-form", | ||
| "type": "registry:component", | ||
| "title": "8-bit Signup Form", | ||
| "description": "A simple 8-bit signup form component", | ||
| "registryDependencies": ["button", "card", "input", "label"], | ||
| "files": [ | ||
| { | ||
| "path": "components/ui/8bit/blocks/signup-form.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/blocks/signup-form.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/button.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/button.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/card.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/card.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/input.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/input.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/label.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/label.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/styles/retro.css", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/styles/retro.css" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "signup-page", | ||
| "type": "registry:component", | ||
| "title": "8-bit Signup Page", | ||
| "description": "A simple 8-bit signup page component", | ||
| "registryDependencies": ["button", "card", "input", "label"], | ||
| "files": [ | ||
| { | ||
| "path": "app/signup/page.tsx", | ||
| "type": "registry:component", | ||
| "target": "app/signup/page.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/blocks/signup-form.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/blocks/signup-form.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/button.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/button.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/card.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/card.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/input.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/input.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/label.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/label.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/styles/retro.css", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/styles/retro.css" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "signup-form-2", | ||
| "type": "registry:component", | ||
| "title": "8-bit Signup Form 2", | ||
| "description": "A simple 8-bit signup form component", | ||
| "registryDependencies": ["button", "card", "input", "label"], | ||
| "files": [ | ||
| { | ||
| "path": "components/ui/8bit/blocks/signup-form-2.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/blocks/signup-form-2.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/button.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/button.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/card.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/card.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/input.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/input.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/label.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/label.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/styles/retro.css", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/styles/retro.css" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "signup-form-with-image", | ||
| "type": "registry:component", | ||
| "title": "8-bit Signup Form with Image", | ||
| "description": "A simple 8-bit signup form component with image", | ||
| "registryDependencies": ["button", "card", "input", "label"], | ||
| "files": [ | ||
| { | ||
| "path": "components/ui/8bit/blocks/signup-form-with-image.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/blocks/signup-form-with-image.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/button.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/button.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/card.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/card.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/input.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/input.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/label.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/label.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/styles/retro.css", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/styles/retro.css" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "email-only-login-form", | ||
| "type": "registry:component", | ||
| "title": "8-bit Email Only Login Form", | ||
| "description": "A simple 8-bit email only login form component", | ||
| "registryDependencies": ["button", "input", "label"], | ||
| "files": [ | ||
| { | ||
| "path": "components/ui/8bit/blocks/email-only-login-form.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/blocks/email-only-login-form.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/button.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/button.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/input.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/input.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/label.tsx", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/label.tsx" | ||
| }, | ||
| { | ||
| "path": "components/ui/8bit/styles/retro.css", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/styles/retro.css" | ||
| } | ||
| ] | ||
| } |
There was a problem hiding this comment.
Sync registry dependencies with actual component usage.
_signup-form, signup-form-2, signup-form-with-image, and email-only-login-form render <Card> wrappers, but the entries omit "card" from registryDependencies. Consumers installing from the registry will miss the card primitive and hit compile errors. Please add "card" where needed.
🤖 Prompt for AI Agents
In registry.json around lines 1794 to 1987, four component entries
("signup-form", "signup-form-2", "signup-form-with-image", and
"email-only-login-form") render a Card but their registryDependencies arrays
omit "card"; update each of those entries' registryDependencies to include
"card" (e.g., add "card" to the array alongside the existing dependency names)
so consumers installing from the registry receive the Card primitive and avoid
compile errors.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add New Authentication Blocks (Signup + Login)
Hey👋,
This PR expands the Authentication blocks section by adding new signup variations and an additional email-only login block. These updates bring more flexibility and retro-inspired design options.
What’s New:
New Blocks Added:
login-05, allowing simple login via email only.Changes Made:
app/blocks/authentication/authentication.tsxAdded the new blocks with titles, preview sections, and
CopyCommandButton+OpenInV0Buttonintegration.components/ui/8bit/blocks/Added new block components such as
SignupForm,SignupForm2,SignupFormWithImage, andEmailOnlyLoginForm.app/signup/page.tsxIntroduced a new signup page showcasing
<SignupForm />inside a styled layout.Block Variations
Example: Email-only login form block
Example: Signup form with image (reversed layout)
registery.jsonUpdated with new entries for all added blocks.
Registry Build
Ran
pnpm registry:build→ successfully generated updated registry JSON files inpublic/r.Testing:
Created a test project and added the custom registry config:
Installed and verified each new block (e.g.
pnpm dlx shadcn@latest add @8bitcn/signup-page).Confirmed all blocks render and behave as expected.
Summary:
This PR:
Thanks for reviewing, excited to see these new authentication blocks land and make 8bitcn-ui even more versatile ❤️
If you have any suggestions or edits, I’d be happy to make them!
Summary by cubic
Adds four signup blocks and an email-only login block to the Authentication gallery, plus a demo signup page. Updates the registry so these blocks are installable and adds preview actions.
Summary by CodeRabbit