Skip to content

Commit 9ec3764

Browse files
dackers86dackers86
committed
chore(shadcn): regn components
1 parent 6cb6a33 commit 9ec3764

12 files changed

+112
-91
lines changed

‎examples/shadcn/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"dependencies": {
1515
"@hookform/resolvers": "^5.2.2",
1616
"@invertase/firebaseui-core": "*",
17-
"@invertase/firebaseui-react": "*",
17+
"@invertase/firebaseui-react": "workspace:*",
1818
"@invertase/firebaseui-styles": "*",
1919
"@invertase/firebaseui-translations": "*",
2020
"@radix-ui/react-accordion": "^1.2.12",

‎examples/shadcn/src/components/email-link-auth-screen.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useUI, type EmailLinkAuthScreenProps } from "@invertase/firebaseui-reac
66
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
77
import { Separator } from "@/components/ui/separator";
88
import { EmailLinkAuthForm } from "@/components/email-link-auth-form";
9-
import { MultiFactorAuthAssertionForm } from "@/components/multi-factor-auth-assertion-form";
9+
import { MultiFactorAuthAssertionScreen } from "@/components/multi-factor-auth-assertion-screen";
1010
import { RedirectError } from "@/components/redirect-error";
1111

1212
export type { EmailLinkAuthScreenProps };
@@ -18,6 +18,10 @@ export function EmailLinkAuthScreen({ children, ...props }: EmailLinkAuthScreenP
1818
const subtitleText = getTranslation(ui, "prompts", "signInToAccount");
1919
const mfaResolver = ui.multiFactorResolver;
2020

21+
if (mfaResolver) {
22+
return <MultiFactorAuthAssertionScreen onSuccess={props.onSignIn} />;
23+
}
24+
2125
return (
2226
<div className="max-w-sm mx-auto">
2327
<Card>
@@ -26,22 +30,16 @@ export function EmailLinkAuthScreen({ children, ...props }: EmailLinkAuthScreenP
2630
<CardDescription>{subtitleText}</CardDescription>
2731
</CardHeader>
2832
<CardContent>
29-
{mfaResolver ? (
30-
<MultiFactorAuthAssertionForm onSuccess={(credential) => props.onSignIn?.(credential)} />
31-
) : (
33+
<EmailLinkAuthForm {...props} />
34+
{children ? (
3235
<>
33-
<EmailLinkAuthForm {...props} />
34-
{children ? (
35-
<>
36-
<Separator className="my-4" />
37-
<div className="space-y-2">
38-
{children}
39-
<RedirectError />
40-
</div>
41-
</>
42-
) : null}
36+
<Separator className="my-4" />
37+
<div className="space-y-2">
38+
{children}
39+
<RedirectError />
40+
</div>
4341
</>
44-
)}
42+
) : null}
4543
</CardContent>
4644
</Card>
4745
</div>

‎examples/shadcn/src/components/multi-factor-auth-assertion-form.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { Button } from "@/components/ui/button";
1313
export function MultiFactorAuthAssertionForm() {
1414
const ui = useUI();
1515
const resolver = ui.multiFactorResolver;
16+
const mfaAssertionFactorPrompt = getTranslation(ui, "prompts", "mfaAssertionFactorPrompt");
1617

1718
useEffect(() => {
1819
return () => {
@@ -40,8 +41,8 @@ export function MultiFactorAuthAssertionForm() {
4041
}
4142

4243
return (
43-
<div className="space-y-2">
44-
<p className="text-sm text-muted-foreground">Select a multi-factor authentication method</p>
44+
<div className="flex flex-col gap-2">
45+
<p className="text-sm text-muted-foreground">{mfaAssertionFactorPrompt}</p>
4546
{resolver.hints.map((hint) => {
4647
if (hint.factorId === TotpMultiFactorGenerator.FACTOR_ID) {
4748
return <TotpButton key={hint.factorId} onClick={() => setHint(hint)} />;

‎examples/shadcn/src/components/multi-factor-auth-assertion-screen.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
"use client";
2+
3+
import { getTranslation } from "@invertase/firebaseui-core";
4+
import { useUI, type MultiFactorAuthAssertionScreenProps } from "@invertase/firebaseui-react";
5+
6+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
7+
import { MultiFactorAuthAssertionForm } from "@/components/multi-factor-auth-assertion-form";
8+
9+
export type MultiFactorAuthEnrollmentScreenProps = MultiFactorAuthAssertionScreenProps;
10+
11+
export function MultiFactorAuthAssertionScreen(props: MultiFactorAuthEnrollmentScreenProps) {
12+
const ui = useUI();
13+
14+
const titleText = getTranslation(ui, "labels", "multiFactorAssertion");
15+
const subtitleText = getTranslation(ui, "prompts", "mfaAssertionPrompt");
16+
17+
return (
18+
<div className="max-w-sm mx-auto">
19+
<Card>
20+
<CardHeader>
21+
<CardTitle>{titleText}</CardTitle>
22+
<CardDescription>{subtitleText}</CardDescription>
23+
</CardHeader>
24+
<CardContent>
25+
<MultiFactorAuthAssertionForm {...props} />
26+
</CardContent>
27+
</Card>
28+
</div>
29+
);
30+
}

‎examples/shadcn/src/components/oauth-screen.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { type PropsWithChildren } from "react";
66
import { useUI } from "@invertase/firebaseui-react";
77
import { Card, CardContent, CardHeader, CardDescription, CardTitle } from "@/components/ui/card";
88
import { Policies } from "@/components/policies";
9-
import { MultiFactorAuthAssertionForm } from "@/components/multi-factor-auth-assertion-form";
9+
import { MultiFactorAuthAssertionScreen } from "@/components/multi-factor-auth-assertion-screen";
1010
import { RedirectError } from "@/components/redirect-error";
1111

1212
export type OAuthScreenProps = PropsWithChildren<{
@@ -20,6 +20,10 @@ export function OAuthScreen({ children, onSignIn }: OAuthScreenProps) {
2020
const subtitleText = getTranslation(ui, "prompts", "signInToAccount");
2121
const mfaResolver = ui.multiFactorResolver;
2222

23+
if (mfaResolver) {
24+
return <MultiFactorAuthAssertionScreen onSuccess={onSignIn} />;
25+
}
26+
2327
return (
2428
<div className="max-w-sm mx-auto">
2529
<Card>
@@ -28,21 +32,11 @@ export function OAuthScreen({ children, onSignIn }: OAuthScreenProps) {
2832
<CardDescription>{subtitleText}</CardDescription>
2933
</CardHeader>
3034
<CardContent>
31-
{mfaResolver ? (
32-
<MultiFactorAuthAssertionForm
33-
onSuccess={(credential) => {
34-
onSignIn?.(credential);
35-
}}
36-
/>
37-
) : (
38-
<>
39-
<div className="space-y-2">{children}</div>
40-
<div className="mt-4 space-y-4">
41-
<RedirectError />
42-
<Policies />
43-
</div>
44-
</>
45-
)}
35+
<div className="space-y-2">{children}</div>
36+
<div className="mt-4 space-y-4">
37+
<RedirectError />
38+
<Policies />
39+
</div>
4640
</CardContent>
4741
</Card>
4842
</div>

‎examples/shadcn/src/components/phone-auth-screen.tsx‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useUI } from "@invertase/firebaseui-react";
66
import { Card, CardContent, CardHeader, CardDescription, CardTitle } from "@/components/ui/card";
77
import { Separator } from "@/components/ui/separator";
88
import { PhoneAuthForm, type PhoneAuthFormProps } from "@/components/phone-auth-form";
9-
import { MultiFactorAuthAssertionForm } from "@/components/multi-factor-auth-assertion-form";
9+
import { MultiFactorAuthAssertionScreen } from "@/components/multi-factor-auth-assertion-screen";
1010
import { RedirectError } from "@/components/redirect-error";
1111

1212
export type PhoneAuthScreenProps = PropsWithChildren<PhoneAuthFormProps>;
@@ -18,6 +18,10 @@ export function PhoneAuthScreen({ children, ...props }: PhoneAuthScreenProps) {
1818
const subtitleText = getTranslation(ui, "prompts", "signInToAccount");
1919
const mfaResolver = ui.multiFactorResolver;
2020

21+
if (mfaResolver) {
22+
return <MultiFactorAuthAssertionScreen onSuccess={props.onSignIn} />;
23+
}
24+
2125
return (
2226
<div className="max-w-sm mx-auto">
2327
<Card>
@@ -26,26 +30,16 @@ export function PhoneAuthScreen({ children, ...props }: PhoneAuthScreenProps) {
2630
<CardDescription>{subtitleText}</CardDescription>
2731
</CardHeader>
2832
<CardContent>
29-
{mfaResolver ? (
30-
<MultiFactorAuthAssertionForm
31-
onSuccess={(credential) => {
32-
props.onSignIn?.(credential);
33-
}}
34-
/>
35-
) : (
33+
<PhoneAuthForm {...props} />
34+
{children ? (
3635
<>
37-
<PhoneAuthForm {...props} />
38-
{children ? (
39-
<>
40-
<Separator className="my-4" />
41-
<div className="space-y-2">
42-
{children}
43-
<RedirectError />
44-
</div>
45-
</>
46-
) : null}
36+
<Separator className="my-4" />
37+
<div className="space-y-2">
38+
{children}
39+
<RedirectError />
40+
</div>
4741
</>
48-
)}
42+
) : null}
4943
</CardContent>
5044
</Card>
5145
</div>

‎examples/shadcn/src/components/sign-in-auth-form.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
"use client";
22

33
import type { SignInAuthFormSchema } from "@invertase/firebaseui-core";
4-
import {
5-
useSignInAuthFormAction,
6-
useSignInAuthFormSchema,
7-
useUI,
8-
type SignInAuthFormProps,
9-
} from "@invertase/firebaseui-react";
4+
import { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, type SignInAuthFormProps } from "@invertase/firebaseui-react";
105
import { useForm } from "react-hook-form";
116
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
127
import { FirebaseUIError, getTranslation } from "@invertase/firebaseui-core";
138

149
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
1510
import { Input } from "@/components/ui/input";
1611
import { Button } from "@/components/ui/button";
17-
import { Policies } from "@/components/policies";
12+
import { Policies } from "./policies";
1813

1914
export type { SignInAuthFormProps };
2015

‎examples/shadcn/src/components/sign-in-auth-screen.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useUI, type SignInAuthScreenProps } from "@invertase/firebaseui-react";
66
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
77
import { Separator } from "@/components/ui/separator";
88
import { SignInAuthForm } from "@/components/sign-in-auth-form";
9-
import { MultiFactorAuthAssertionForm } from "@/components/multi-factor-auth-assertion-form";
9+
import { MultiFactorAuthAssertionScreen } from "@/components/multi-factor-auth-assertion-screen";
1010

1111
export type { SignInAuthScreenProps };
1212

@@ -18,6 +18,10 @@ export function SignInAuthScreen({ children, ...props }: SignInAuthScreenProps)
1818

1919
const mfaResolver = ui.multiFactorResolver;
2020

21+
if (mfaResolver) {
22+
return <MultiFactorAuthAssertionScreen onSuccess={props.onSignIn} />;
23+
}
24+
2125
return (
2226
<div className="max-w-sm mx-auto">
2327
<Card>
@@ -26,23 +30,13 @@ export function SignInAuthScreen({ children, ...props }: SignInAuthScreenProps)
2630
<CardDescription>{subtitleText}</CardDescription>
2731
</CardHeader>
2832
<CardContent>
29-
{mfaResolver ? (
30-
<MultiFactorAuthAssertionForm
31-
onSuccess={(credential) => {
32-
props.onSignIn?.(credential);
33-
}}
34-
/>
35-
) : (
33+
<SignInAuthForm {...props} />
34+
{children ? (
3635
<>
37-
<SignInAuthForm {...props} />
38-
{children ? (
39-
<>
40-
<Separator className="my-4" />
41-
<div className="space-y-2">{children}</div>
42-
</>
43-
) : null}
36+
<Separator className="my-4" />
37+
<div className="space-y-2">{children}</div>
4438
</>
45-
)}
39+
) : null}
4640
</CardContent>
4741
</Card>
4842
</div>

‎examples/shadcn/src/components/sign-up-auth-form.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,21 @@ export function SignUpAuthForm(props: SignUpAuthFormProps) {
4747
return (
4848
<Form {...form}>
4949
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
50+
{requireDisplayName ? (
51+
<FormField
52+
control={form.control}
53+
name="displayName"
54+
render={({ field }) => (
55+
<FormItem>
56+
<FormLabel>{getTranslation(ui, "labels", "displayName")}</FormLabel>
57+
<FormControl>
58+
<Input {...field} />
59+
</FormControl>
60+
<FormMessage />
61+
</FormItem>
62+
)}
63+
/>
64+
) : null}
5065
<FormField
5166
control={form.control}
5267
name="email"
@@ -93,8 +108,8 @@ export function SignUpAuthForm(props: SignUpAuthFormProps) {
93108
{getTranslation(ui, "labels", "createAccount")}
94109
</Button>
95110
{form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}
96-
{props.onBackToSignInClick ? (
97-
<Button type="button" variant="link" size="sm" onClick={props.onBackToSignInClick}>
111+
{props.onSignInClick ? (
112+
<Button type="button" variant="link" size="sm" onClick={props.onSignInClick}>
98113
<span className="text-xs">
99114
{getTranslation(ui, "prompts", "haveAccount")} {getTranslation(ui, "labels", "signIn")}
100115
</span>

‎examples/shadcn/src/components/sign-up-auth-screen.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useUI, type SignUpAuthScreenProps } from "@invertase/firebaseui-react";
66
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
77
import { Separator } from "@/components/ui/separator";
88
import { SignUpAuthForm } from "@/components/sign-up-auth-form";
9-
import { MultiFactorAuthAssertionForm } from "@/components/multi-factor-auth-assertion-form";
9+
import { MultiFactorAuthAssertionScreen } from "@/components/multi-factor-auth-assertion-screen";
1010

1111
export type { SignUpAuthScreenProps };
1212

@@ -17,6 +17,10 @@ export function SignUpAuthScreen({ children, ...props }: SignUpAuthScreenProps)
1717
const subtitleText = getTranslation(ui, "prompts", "enterDetailsToCreate");
1818
const mfaResolver = ui.multiFactorResolver;
1919

20+
if (mfaResolver) {
21+
return <MultiFactorAuthAssertionScreen onSuccess={props.onSignUp} />;
22+
}
23+
2024
return (
2125
<div className="max-w-sm mx-auto">
2226
<Card>
@@ -25,19 +29,13 @@ export function SignUpAuthScreen({ children, ...props }: SignUpAuthScreenProps)
2529
<CardDescription>{subtitleText}</CardDescription>
2630
</CardHeader>
2731
<CardContent>
28-
{mfaResolver ? (
29-
<MultiFactorAuthAssertionForm onSuccess={(credential) => props.onSignUp?.(credential)} />
30-
) : (
32+
<SignUpAuthForm {...props} />
33+
{children ? (
3134
<>
32-
<SignUpAuthForm {...props} />
33-
{children ? (
34-
<>
35-
<Separator className="my-4" />
36-
<div className="space-y-2">{children}</div>
37-
</>
38-
) : null}
35+
<Separator className="my-4" />
36+
<div className="space-y-2">{children}</div>
3937
</>
40-
)}
38+
) : null}
4139
</CardContent>
4240
</Card>
4341
</div>

0 commit comments

Comments
 (0)