Skip to content

Commit 96a319e

Browse files
HugoPerardHugoPerard
authored
Feat: login hints (#127)
* fix custom Lucide icons * feat: login hints * fix loader on session refetch (caused by splashscreen manager) * fix import
1 parent a293ffe commit 96a319e

5 files changed

Lines changed: 142 additions & 26 deletions

File tree

‎src/components/icons/icon.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { LucideIcon } from 'lucide-react-native';
2+
import { ficus, StyleProps } from 'react-native-ficus-ui';
3+
4+
export const Icon = ({
5+
icon,
6+
size,
7+
...props
8+
}: StyleProps & {
9+
icon: LucideIcon;
10+
color?: string;
11+
size?: number;
12+
}) => {
13+
const FicusLucideIcon = ficus(icon);
14+
return (
15+
<FicusLucideIcon
16+
{...props}
17+
{...(size ? { height: size, width: size } : {})}
18+
/>
19+
);
20+
};

‎src/features/auth/view-otp-verification.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { IconArrowLeft } from '@/components/icons/generated';
1010

1111
import { AuthHeader } from '@/features/auth/auth-header';
1212
import { authClient } from '@/features/auth/client';
13+
import { LoginOtpHint } from '@/features/devtools/login-hint';
1314
import { ViewSafeContent } from '@/layout/view-safe-content';
1415

1516
export const ViewOtpVerification = () => {
@@ -82,6 +83,7 @@ export const ViewOtpVerification = () => {
8283
</Stack>
8384
<form.Submit>{t('auth:verification.confirm')}</form.Submit>
8485
</Stack>
86+
<LoginOtpHint />
8587
</Stack>
8688
</form.AppForm>
8789
</Center>

‎src/features/auth/view-sign-in.tsx‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Version } from '@/components/version';
1414

1515
import { AuthHeader } from '@/features/auth/auth-header';
1616
import { authClient } from '@/features/auth/client';
17+
import { LoginEmailHint } from '@/features/devtools/login-hint';
1718
import { ViewSafeContent } from '@/layout/view-safe-content';
1819

1920
export const ViewSignIn = () => {
@@ -62,21 +63,21 @@ export const ViewSignIn = () => {
6263
<ViewSafeContent>
6364
<AuthHeader />
6465
<Center flex={1} p={24}>
65-
<Stack spacing={24} w="100%" maxW={320}>
66-
<Stack align="center" spacing={8}>
67-
<Text fontWeight="bold" fontSize="2xl" textAlign="center">
68-
{t('auth:signin.title')}
69-
</Text>
70-
<Text
71-
fontWeight={400}
72-
fontSize="sm"
73-
variant="muted"
74-
textAlign="center"
75-
>
76-
{t('auth:signin.subtitle')}
77-
</Text>
78-
</Stack>
79-
<Form form={form}>
66+
<Form form={form}>
67+
<Stack spacing={24} w="100%" maxW={320}>
68+
<Stack align="center" spacing={8}>
69+
<Text fontWeight="bold" fontSize="2xl" textAlign="center">
70+
{t('auth:signin.title')}
71+
</Text>
72+
<Text
73+
fontWeight={400}
74+
fontSize="sm"
75+
variant="muted"
76+
textAlign="center"
77+
>
78+
{t('auth:signin.subtitle')}
79+
</Text>
80+
</Stack>
8081
<Stack spacing={16}>
8182
<form.AppField name="email">
8283
{(field) => (
@@ -94,9 +95,8 @@ export const ViewSignIn = () => {
9495
</form.AppField>
9596
<form.Submit full>{t('auth:signin.loginWithEmail')}</form.Submit>
9697
</Stack>
97-
</Form>
98-
{/* For social sign in integration */}
99-
{/* <HStack alignItems="center" spacing={16}>
98+
{/* For social sign in integration */}
99+
{/* <HStack alignItems="center" spacing={16}>
100100
<Divider color="neutral.200" flex={1} orientation="horizontal" />
101101
<Text
102102
fontSize="sm"
@@ -109,14 +109,16 @@ export const ViewSignIn = () => {
109109
</Text>
110110
<Divider color="neutral.200" flex={1} orientation="horizontal" />
111111
</HStack> */}
112-
{/* <Button
112+
{/* <Button
113113
full
114114
variant="@secondary"
115115
onPress={() => social.mutate('github')}
116116
>
117117
{t('auth:signin.loginWithGithub')}
118118
</Button> */}
119-
</Stack>
119+
<LoginEmailHint />
120+
</Stack>
121+
</Form>
120122
</Center>
121123
<HStack
122124
p={24}

‎src/features/devtools/login-hint.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { useQuery } from '@tanstack/react-query';
2+
import { TerminalIcon } from 'lucide-react-native';
3+
import { Pressable, Text } from 'react-native-ficus-ui';
4+
5+
import { api } from '@/lib/hey-api/api';
6+
import { ConfigEnvResponse } from '@/lib/hey-api/generated';
7+
import { useFormContext } from '@/lib/tanstack-form/context';
8+
9+
import { Icon } from '@/components/icons/icon';
10+
import { Card, CardBody, CardHeader, CardTitle } from '@/components/ui/card';
11+
12+
const mockedEmail = 'admin@admin.com';
13+
const mockedOtp = '000000';
14+
15+
const shouldDisplayLoginHints = (configEnv?: ConfigEnvResponse) =>
16+
configEnv?.isDev || configEnv?.isDemo;
17+
18+
export const LoginEmailHint = () => {
19+
const env = useQuery(api.configEnvOptions());
20+
21+
const form = useFormContext();
22+
23+
if (!shouldDisplayLoginHints(env.data)) {
24+
return <></>;
25+
}
26+
27+
return (
28+
<Pressable onPress={() => form.setFieldValue('email', mockedEmail)}>
29+
<Card
30+
borderColor="neutral.200"
31+
bg="neutral.50"
32+
_dark={{ bg: 'neutral.900', borderColor: 'neutral.700' }}
33+
>
34+
<CardHeader>
35+
<CardTitle>
36+
<Icon
37+
icon={TerminalIcon}
38+
color="neutral.800"
39+
_dark={{ color: 'neutral.200' }}
40+
size={16}
41+
/>
42+
<Text> {env.data?.isDev ? 'Dev mode' : 'Demo mode'}</Text>
43+
</CardTitle>
44+
</CardHeader>
45+
46+
<CardBody pt={0}>
47+
<Text fontWeight="medium">
48+
You can login with{' '}
49+
<Text fontWeight="bold" textDecorationLine="underline">
50+
{mockedEmail}
51+
</Text>
52+
</Text>
53+
</CardBody>
54+
</Card>
55+
</Pressable>
56+
);
57+
};
58+
59+
export const LoginOtpHint = () => {
60+
const env = useQuery(api.configEnvOptions());
61+
62+
const form = useFormContext();
63+
64+
if (!shouldDisplayLoginHints(env.data)) {
65+
return <></>;
66+
}
67+
68+
return (
69+
<Pressable onPress={() => form.setFieldValue('code', mockedOtp)}>
70+
<Card
71+
borderColor="neutral.200"
72+
bg="neutral.50"
73+
_dark={{ bg: 'neutral.900', borderColor: 'neutral.700' }}
74+
>
75+
<CardHeader>
76+
<CardTitle>
77+
<Icon
78+
icon={TerminalIcon}
79+
color="neutral.800"
80+
_dark={{ color: 'neutral.200' }}
81+
size={16}
82+
/>
83+
<Text> {env.data?.isDev ? 'Dev mode' : 'Demo mode'}</Text>
84+
</CardTitle>
85+
</CardHeader>
86+
87+
<CardBody pt={0}>
88+
<Text fontWeight="medium">
89+
Use the code{' '}
90+
<Text fontWeight="bold" textDecorationLine="underline">
91+
{mockedOtp}
92+
</Text>
93+
</Text>
94+
</CardBody>
95+
</Card>
96+
</Pressable>
97+
);
98+
};

‎src/layout/splash-screen-manager.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { SplashScreen } from 'expo-router';
22
import { PropsWithChildren, useEffect } from 'react';
33

4-
import { FullLoader } from '@/components/ui/full-loader';
5-
64
import { authClient } from '@/features/auth/client';
75

86
export const SplashScreenManager = (props: PropsWithChildren) => {
@@ -18,9 +16,5 @@ export const SplashScreenManager = (props: PropsWithChildren) => {
1816
}
1917
}, [isAppReady]);
2018

21-
if (!isAppReady) {
22-
return <FullLoader />;
23-
}
24-
2519
return props.children;
2620
};

0 commit comments

Comments
 (0)