-
Notifications
You must be signed in to change notification settings - Fork 295
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(elements): Form and Field registration/submission (#2445)
* feat(elements): Form and Field registration/submission * build(repo): List installed packages * build(repo): Test removing node_modules hard cache * build(repo): Use setup-node .npm cache * chore(repo): Finalize PR
- Loading branch information
Showing
14 changed files
with
471 additions
and
75 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| --- | ||
| --- |
This file contains 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
This file contains 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
This file contains 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
67 changes: 56 additions & 11 deletions
67
packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,63 @@ | ||
| import { SignIn, SignInFactorOne, SignInFactorTwo, SignInSSOCallback, SignInStart } from '@clerk/elements'; | ||
| import { | ||
| Field, | ||
| Form, | ||
| Input, | ||
| Label, | ||
| SignIn, | ||
| SignInFactorOne, | ||
| SignInFactorTwo, | ||
| SignInSSOCallback, | ||
| SignInStart, | ||
| Submit, | ||
| } from '@clerk/elements'; | ||
|
|
||
| import { Debug } from '@/components/debug'; | ||
|
|
||
| export default function SignInPage() { | ||
| return ( | ||
| <SignIn> | ||
| <SignInStart> | ||
| <p>Start child</p> | ||
| </SignInStart> | ||
| <SignInFactorOne> | ||
| <p>Factor one child</p> | ||
| </SignInFactorOne> | ||
| <SignInFactorTwo> | ||
| <p>Factor two child</p> | ||
| </SignInFactorTwo> | ||
| <SignInSSOCallback /> | ||
| <div className='m-auto w-max text-sm'> | ||
| <SignInStart> | ||
| <h1 className='text-xl mb-6'>Start</h1> | ||
|
|
||
| <Form className='flex gap-6 flex-col '> | ||
| <Field | ||
| name='identifier' | ||
| className='flex gap-4 justify-between items-center ' | ||
| > | ||
| <Label htmlFor='password'>Email</Label> | ||
| <Input | ||
| type='identifier' | ||
| className='bg-tertiary rounded-sm px-2 py-1 border border-foreground' | ||
| /> | ||
| </Field> | ||
|
|
||
| <Field | ||
| name='password' | ||
| className='flex gap-4 justify-between items-center' | ||
| > | ||
| <Label htmlFor='password'>Password</Label> | ||
| <Input | ||
| type='password' | ||
| className='bg-tertiary rounded-sm px-2 py-1 border border-foreground' | ||
| /> | ||
| </Field> | ||
|
|
||
| <Submit className='px-4 py-2 b-1 bg-blue-950 bg-opacity-20 hover:bg-opacity-10 active:bg-opacity-5 rounded-md dark:bg-opacity-100 dark:hover:bg-opacity-80 dark:active:bg-opacity-50 transition'> | ||
| Sign In | ||
| </Submit> | ||
| </Form> | ||
| </SignInStart> | ||
| <SignInFactorOne> | ||
| <p>Factor one child</p> | ||
| </SignInFactorOne> | ||
| <SignInFactorTwo> | ||
| <p>Factor two child</p> | ||
| </SignInFactorTwo> | ||
| <SignInSSOCallback /> | ||
| </div> | ||
|
|
||
| <Debug /> | ||
| </SignIn> | ||
| ); | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| 'use client'; | ||
|
|
||
| import { SignedIn } from '@clerk/clerk-react'; | ||
| import { useSignInFlow } from '@clerk/elements'; | ||
| import { SignOutButton } from '@clerk/nextjs'; | ||
|
|
||
| export function Button(props: React.ComponentProps<'button'>) { | ||
| return ( | ||
| <button | ||
| className='px-4 py-2 b-1 bg-blue-950 bg-opacity-20 hover:bg-opacity-10 active:bg-opacity-5 rounded-md dark:bg-opacity-100 dark:hover:bg-opacity-80 dark:active:bg-opacity-50 transition' | ||
| type='button' | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export function Debug() { | ||
| const ref = useSignInFlow(); | ||
|
|
||
| return ( | ||
| <div className='absolute text-xs flex p-4 gap-4 bottom-0 w-screen justify-center bg-secondary border-tertiary border-t'> | ||
| <Button | ||
| onClick={() => { | ||
| console.dir(ref.getSnapshot().context.fields); | ||
| }} | ||
| > | ||
| Log Fields | ||
| </Button> | ||
|
|
||
| <Button | ||
| onClick={() => { | ||
| console.dir(ref.getSnapshot().context); | ||
| }} | ||
| > | ||
| Log Context | ||
| </Button> | ||
|
|
||
| <SignedIn> | ||
| <SignOutButton> | ||
| <Button>Sign Out</Button> | ||
| </SignOutButton> | ||
| </SignedIn> | ||
| </div> | ||
| ); | ||
| } |
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import type { FormControlProps, FormProps } from '@radix-ui/react-form'; | ||
| import { Control, Field, Form as RadixForm, Label, Submit } from '@radix-ui/react-form'; | ||
| import { Slot } from '@radix-ui/react-slot'; | ||
|
|
||
| import { useForm, useInput } from '../internals/machines/sign-in.context'; | ||
|
|
||
| function Input({ asChild, ...rest }: FormControlProps) { | ||
| const { type, value } = rest; | ||
| const field = useInput({ type, value }); | ||
|
|
||
| const Comp = asChild ? Slot : Control; | ||
|
|
||
| return ( | ||
| <Comp | ||
| {...field.props} // TODO | ||
| {...rest} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| function Form({ asChild, ...rest }: FormProps) { | ||
| const form = useForm(); | ||
|
|
||
| const Comp = asChild ? Slot : RadixForm; | ||
| return ( | ||
| <Comp | ||
| {...form.props} // TODO | ||
| {...rest} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export { Form, Input, Field, Label, Submit }; |
Oops, something went wrong.