Skip to content

Commit 9a106c4

Browse files
mrzachnugentmrzachnugent
committed
feat(registry): add TODOs in auth ui blocks
1 parent 9e3926a commit 9a106c4

File tree

7 files changed

+122
-38
lines changed

7 files changed

+122
-38
lines changed

‎packages/registry/src/blocks/forgot-password-form.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import { Text } from '@/registry/ui/text';
66
import { View } from 'react-native';
77

88
export function ForgotPasswordForm() {
9+
function onSubmit() {
10+
// TODO: Submit form and navigate to reset password screen if successful
11+
}
12+
913
return (
1014
<View className="gap-6">
1115
<Card className="border-border/0 sm:border-border shadow-none sm:shadow-sm sm:shadow-black/5">
@@ -26,13 +30,12 @@ export function ForgotPasswordForm() {
2630
autoComplete="email"
2731
autoCapitalize="none"
2832
returnKeyType="send"
33+
onSubmitEditing={onSubmit}
2934
/>
3035
</View>
31-
<View className="gap-3">
32-
<Button className="w-full">
33-
<Text>Reset your password</Text>
34-
</Button>
35-
</View>
36+
<Button className="w-full" onPress={onSubmit}>
37+
<Text>Reset your password</Text>
38+
</Button>
3639
</View>
3740
</CardContent>
3841
</Card>

‎packages/registry/src/blocks/reset-password-form.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ export function ResetPasswordForm() {
1313
codeInputRef.current?.focus();
1414
}
1515

16+
function onSubmit() {
17+
// TODO: Submit form and navigate to protected screen if successful
18+
}
19+
1620
return (
1721
<View className="gap-6">
1822
<Card className="border-border/0 sm:border-border shadow-none sm:shadow-sm sm:shadow-black/5">
@@ -45,13 +49,12 @@ export function ResetPasswordForm() {
4549
keyboardType="numeric"
4650
autoComplete="sms-otp"
4751
textContentType="oneTimeCode"
52+
onSubmitEditing={onSubmit}
4853
/>
4954
</View>
50-
<View className="gap-3">
51-
<Button className="w-full">
52-
<Text>Reset Password</Text>
53-
</Button>
54-
</View>
55+
<Button className="w-full" onPress={onSubmit}>
56+
<Text>Reset Password</Text>
57+
</Button>
5558
</View>
5659
</CardContent>
5760
</Card>

‎packages/registry/src/blocks/sign-in-form.tsx

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export function SignInForm() {
1515
passwordInputRef.current?.focus();
1616
}
1717

18+
function onSubmit() {
19+
// TODO: Submit form and navigate to protected screen if successful
20+
}
21+
1822
return (
1923
<View className="gap-6">
2024
<Card className="border-border/0 sm:border-border shadow-none sm:shadow-sm sm:shadow-black/5">
@@ -42,21 +46,34 @@ export function SignInForm() {
4246
<View className="gap-1.5">
4347
<View className="flex-row items-center">
4448
<Label htmlFor="password">Password</Label>
45-
<Button variant="link" size="sm" className="web:h-fit ml-auto h-4 px-1 py-0 sm:h-4">
49+
<Button
50+
variant="link"
51+
size="sm"
52+
className="web:h-fit ml-auto h-4 px-1 py-0 sm:h-4"
53+
onPress={() => {
54+
// TODO: Navigate to forgot password screen
55+
}}>
4656
<Text className="font-normal leading-4">Forgot your password?</Text>
4757
</Button>
4858
</View>
49-
<Input ref={passwordInputRef} id="password" secureTextEntry returnKeyType="send" />
50-
</View>
51-
<View className="gap-3">
52-
<Button className="w-full">
53-
<Text>Continue</Text>
54-
</Button>
59+
<Input
60+
ref={passwordInputRef}
61+
id="password"
62+
secureTextEntry
63+
returnKeyType="send"
64+
onSubmitEditing={onSubmit}
65+
/>
5566
</View>
67+
<Button className="w-full" onPress={onSubmit}>
68+
<Text>Continue</Text>
69+
</Button>
5670
</View>
5771
<Text className="text-center text-sm">
5872
Don&apos;t have an account?{' '}
59-
<Pressable>
73+
<Pressable
74+
onPress={() => {
75+
// TODO: Navigate to sign up screen
76+
}}>
6077
<Text className="text-sm underline underline-offset-4">Sign up</Text>
6178
</Pressable>
6279
</Text>

‎packages/registry/src/blocks/sign-up-form.tsx

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export function SignUpForm() {
1515
passwordInputRef.current?.focus();
1616
}
1717

18+
function onSubmit() {
19+
// TODO: Submit form and navigate to protected screen if successful
20+
}
21+
1822
return (
1923
<View className="gap-6">
2024
<Card className="border-border/0 sm:border-border shadow-none sm:shadow-sm sm:shadow-black/5">
@@ -43,17 +47,24 @@ export function SignUpForm() {
4347
<View className="flex-row items-center">
4448
<Label htmlFor="password">Password</Label>
4549
</View>
46-
<Input ref={passwordInputRef} id="password" secureTextEntry returnKeyType="send" />
47-
</View>
48-
<View className="gap-3">
49-
<Button className="w-full">
50-
<Text>Continue</Text>
51-
</Button>
50+
<Input
51+
ref={passwordInputRef}
52+
id="password"
53+
secureTextEntry
54+
returnKeyType="send"
55+
onSubmitEditing={onSubmit}
56+
/>
5257
</View>
58+
<Button className="w-full" onPress={onSubmit}>
59+
<Text>Continue</Text>
60+
</Button>
5361
</View>
5462
<Text className="text-center text-sm">
5563
Already have an account?{' '}
56-
<Pressable>
64+
<Pressable
65+
onPress={() => {
66+
// TODO: Navigate to sign in screen
67+
}}>
5768
<Text className="text-sm underline underline-offset-4">Sign in</Text>
5869
</Pressable>
5970
</Text>

‎packages/registry/src/blocks/social-connections.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,14 @@ export function SocialConnections() {
2828
<View className="gap-2 sm:flex-row sm:gap-3">
2929
{SOCIAL_CONNECTION_STRATEGIES.map((strategy) => {
3030
return (
31-
<Button key={strategy.type} variant="outline" size="sm" className="sm:flex-1">
31+
<Button
32+
key={strategy.type}
33+
variant="outline"
34+
size="sm"
35+
className="sm:flex-1"
36+
onPress={() => {
37+
// TODO: Authenticate with social provider and navigate to protected screen if successful
38+
}}>
3239
<Image
3340
className={cn('size-4', strategy.useTint && Platform.select({ web: 'dark:invert' }))}
3441
tintColor={Platform.select({

‎packages/registry/src/blocks/user-menu.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export function UserMenu() {
2121

2222
async function onSignOut() {
2323
popoverTriggerRef.current?.close();
24+
// TODO: Sign out and navigate to sign in screen
2425
}
2526

2627
return (
@@ -44,7 +45,12 @@ export function UserMenu() {
4445
</View>
4546
</View>
4647
<View className="flex-row flex-wrap gap-3 py-0.5">
47-
<Button variant="outline" size="sm">
48+
<Button
49+
variant="outline"
50+
size="sm"
51+
onPress={() => {
52+
// TODO: Navigate to account settings screen
53+
}}>
4854
<Icon as={SettingsIcon} className="size-4" />
4955
<Text>Manage Account</Text>
5056
</Button>
@@ -57,7 +63,10 @@ export function UserMenu() {
5763
<Button
5864
variant="ghost"
5965
size="lg"
60-
className="h-16 justify-start gap-3 rounded-none rounded-b-md px-3 sm:h-14">
66+
className="h-16 justify-start gap-3 rounded-none rounded-b-md px-3 sm:h-14"
67+
onPress={() => {
68+
// TODO: Navigate to add account screen
69+
}}>
6170
<View className="size-10 items-center justify-center">
6271
<View className="border-border bg-muted/50 size-7 items-center justify-center rounded-full border border-dashed">
6372
<Icon as={PlusIcon} className="size-5" />

‎packages/registry/src/blocks/verify-email-form.tsx

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ const RESEND_CODE_INTERVAL_SECONDS = 30;
1111
const TABULAR_NUMBERS_STYLE: TextStyle = { fontVariant: ['tabular-nums'] };
1212

1313
export function VerifyEmailForm() {
14-
const countdown = useCountdown(RESEND_CODE_INTERVAL_SECONDS);
14+
const { countdown, restartCountdown } = useCountdown(RESEND_CODE_INTERVAL_SECONDS);
15+
16+
function onSubmit() {
17+
// TODO: Submit form and navigate to protected screen if successful
18+
}
1519

1620
return (
1721
<View className="gap-6">
@@ -33,8 +37,16 @@ export function VerifyEmailForm() {
3337
keyboardType="numeric"
3438
autoComplete="sms-otp"
3539
textContentType="oneTimeCode"
40+
onSubmitEditing={onSubmit}
3641
/>
37-
<Button variant="link" size="sm" disabled={countdown > 0}>
42+
<Button
43+
variant="link"
44+
size="sm"
45+
disabled={countdown > 0}
46+
onPress={() => {
47+
// TODO: Resend code
48+
restartCountdown();
49+
}}>
3850
<Text className="text-center text-xs">
3951
Didn&apos;t receive the code? Resend{' '}
4052
{countdown > 0 ? (
@@ -46,10 +58,15 @@ export function VerifyEmailForm() {
4658
</Button>
4759
</View>
4860
<View className="gap-3">
49-
<Button className="w-full">
61+
<Button className="w-full" onPress={onSubmit}>
5062
<Text>Continue</Text>
5163
</Button>
52-
<Button variant="link" className="mx-auto">
64+
<Button
65+
variant="link"
66+
className="mx-auto"
67+
onPress={() => {
68+
// TODO: Navigate to sign up screen
69+
}}>
5370
<Text>Cancel</Text>
5471
</Button>
5572
</View>
@@ -62,21 +79,38 @@ export function VerifyEmailForm() {
6279

6380
function useCountdown(seconds = 30) {
6481
const [countdown, setCountdown] = React.useState(seconds);
82+
const intervalRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
6583

66-
React.useEffect(() => {
67-
const interval = setInterval(() => {
84+
const startCountdown = React.useCallback(() => {
85+
setCountdown(seconds);
86+
87+
if (intervalRef.current) {
88+
clearInterval(intervalRef.current);
89+
}
90+
91+
intervalRef.current = setInterval(() => {
6892
setCountdown((prev) => {
6993
if (prev <= 1) {
70-
clearInterval(interval);
94+
if (intervalRef.current) {
95+
clearInterval(intervalRef.current);
96+
intervalRef.current = null;
97+
}
98+
return 0;
7199
}
72100
return prev - 1;
73101
});
74102
}, 1000);
103+
}, [seconds]);
104+
105+
React.useEffect(() => {
106+
startCountdown();
75107

76108
return () => {
77-
clearInterval(interval);
109+
if (intervalRef.current) {
110+
clearInterval(intervalRef.current);
111+
}
78112
};
79-
}, []);
113+
}, [startCountdown]);
80114

81-
return countdown;
115+
return { countdown, restartCountdown: startCountdown };
82116
}

0 commit comments

Comments
 (0)