forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
link up verify email dialog (#6042)
authored by
Samuel Newman
and committed by
GitHub
325bf198
324c5a44
+43
-32
+35
-31
src/screens/Settings/AccountSettings.tsx
+35
-31
src/screens/Settings/AccountSettings.tsx
···
11
11
import {atoms as a, useTheme} from '#/alf'
12
12
import {useDialogControl} from '#/components/Dialog'
13
13
import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
14
+
import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
14
15
import {At_Stroke2_Corner2_Rounded as AtIcon} from '#/components/icons/At'
15
16
import {BirthdayCake_Stroke2_Corner2_Rounded as BirthdayCakeIcon} from '#/components/icons/BirthdayCake'
16
17
import {Car_Stroke2_Corner2_Rounded as CarIcon} from '#/components/icons/Car'
17
-
import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
18
18
import {Envelope_Stroke2_Corner2_Rounded as EnvelopeIcon} from '#/components/icons/Envelope'
19
19
import {Freeze_Stroke2_Corner2_Rounded as FreezeIcon} from '#/components/icons/Freeze'
20
20
import {Lock_Stroke2_Corner2_Rounded as LockIcon} from '#/components/icons/Lock'
···
31
31
const {_} = useLingui()
32
32
const {currentAccount} = useSession()
33
33
const {openModal} = useModalControls()
34
+
const verifyEmailControl = useDialogControl()
34
35
const birthdayControl = useDialogControl()
35
36
const changeHandleControl = useDialogControl()
36
37
const exportCarControl = useDialogControl()
···
43
44
<SettingsList.Container>
44
45
<SettingsList.Item>
45
46
<SettingsList.ItemIcon icon={EnvelopeIcon} />
46
-
<SettingsList.ItemText>
47
+
{/* Tricky flexbox situation here: we want the email to truncate, but by default it will make the "Email" text wrap instead.
48
+
For numberOfLines to work, we need flex: 1 on the BadgeText, but that means it goes to width: 50% because the
49
+
ItemText is also flex: 1. So we need to set flex: 0 on the ItemText to prevent it from growing, but if we did that everywhere
50
+
it wouldn't push the BadgeText/Chevron/whatever to the right.
51
+
TODO: find a general solution for this. workaround in this case is to set the ItemText to flex: 1 and BadgeText to flex: 0 -sfn */}
52
+
<SettingsList.ItemText style={[a.flex_0]}>
47
53
<Trans>Email</Trans>
48
54
</SettingsList.ItemText>
49
55
{currentAccount && (
50
56
<>
51
-
<SettingsList.BadgeText>
57
+
<SettingsList.BadgeText style={[a.flex_1]}>
52
58
{currentAccount.email || <Trans>(no email)</Trans>}
53
59
</SettingsList.BadgeText>
54
-
{currentAccount.emailConfirmed ? (
55
-
<CheckIcon color={t.palette.positive_500} size="sm" />
56
-
) : (
57
-
<SettingsList.BadgeButton
58
-
label={_(msg`Verify`)}
59
-
onPress={() => {}}
60
-
/>
60
+
{currentAccount.emailConfirmed && (
61
+
<VerifiedIcon fill={t.palette.primary_500} size="md" />
61
62
)}
62
63
</>
63
64
)}
64
65
</SettingsList.Item>
66
+
{currentAccount && !currentAccount.emailConfirmed && (
67
+
<SettingsList.PressableItem
68
+
label={_(msg`Verify your email`)}
69
+
onPress={() => verifyEmailControl.open()}
70
+
style={[
71
+
a.my_xs,
72
+
a.mx_lg,
73
+
a.rounded_md,
74
+
{backgroundColor: t.palette.primary_50},
75
+
]}
76
+
hoverStyle={[{backgroundColor: t.palette.primary_100}]}
77
+
contentContainerStyle={[a.rounded_md, a.px_lg]}>
78
+
<SettingsList.ItemIcon
79
+
icon={VerifiedIcon}
80
+
color={t.palette.primary_500}
81
+
/>
82
+
<SettingsList.ItemText
83
+
style={[{color: t.palette.primary_500}, a.font_bold]}>
84
+
<Trans>Verify your email</Trans>
85
+
</SettingsList.ItemText>
86
+
<SettingsList.Chevron color={t.palette.primary_500} />
87
+
</SettingsList.PressableItem>
88
+
)}
65
89
<SettingsList.PressableItem
66
90
label={_(msg`Change email`)}
67
91
onPress={() => openModal({name: 'change-email'})}>
···
71
95
</SettingsList.ItemText>
72
96
<SettingsList.Chevron />
73
97
</SettingsList.PressableItem>
74
-
<SettingsList.LinkItem
75
-
to="/settings/privacy-and-security"
76
-
label={_(msg`Protect your account`)}
77
-
style={[
78
-
a.my_xs,
79
-
a.mx_lg,
80
-
a.rounded_md,
81
-
{backgroundColor: t.palette.primary_50},
82
-
]}
83
-
chevronColor={t.palette.primary_500}
84
-
hoverStyle={[{backgroundColor: t.palette.primary_100}]}
85
-
contentContainerStyle={[a.rounded_md, a.px_lg]}>
86
-
<SettingsList.ItemIcon
87
-
icon={VerifiedIcon}
88
-
color={t.palette.primary_500}
89
-
/>
90
-
<SettingsList.ItemText
91
-
style={[{color: t.palette.primary_500}, a.font_bold]}>
92
-
<Trans>Protect your account</Trans>
93
-
</SettingsList.ItemText>
94
-
</SettingsList.LinkItem>
95
98
<SettingsList.Divider />
96
99
<SettingsList.Item>
97
100
<SettingsList.ItemIcon icon={BirthdayCakeIcon} />
···
155
158
</SettingsList.Container>
156
159
</Layout.Content>
157
160
161
+
<VerifyEmailDialog control={verifyEmailControl} />
158
162
<BirthDateSettingsDialog control={birthdayControl} />
159
163
<ChangeHandleDialog control={changeHandleControl} />
160
164
<ExportCarDialog control={exportCarControl} />
+8
-1
src/screens/Settings/components/SettingsList.tsx
+8
-1
src/screens/Settings/components/SettingsList.tsx
···
264
264
return <ItemIcon icon={ChevronRightIcon} size="md" color={color} />
265
265
}
266
266
267
-
export function BadgeText({children}: {children: React.ReactNode}) {
267
+
export function BadgeText({
268
+
children,
269
+
style,
270
+
}: {
271
+
children: React.ReactNode
272
+
style?: StyleProp<ViewStyle>
273
+
}) {
268
274
const t = useTheme()
269
275
return (
270
276
<Text
···
273
279
a.text_md,
274
280
a.text_right,
275
281
a.leading_snug,
282
+
style,
276
283
]}
277
284
numberOfLines={1}>
278
285
{children}