link up verify email dialog (#6042)
This commit is contained in:
Samuel Newman
@@ -11,10 +11,10 @@ import * as SettingsList from '#/screens/Settings/components/SettingsList'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {useDialogControl} from '#/components/Dialog'
|
||||
import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
|
||||
import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
|
||||
import {At_Stroke2_Corner2_Rounded as AtIcon} from '#/components/icons/At'
|
||||
import {BirthdayCake_Stroke2_Corner2_Rounded as BirthdayCakeIcon} from '#/components/icons/BirthdayCake'
|
||||
import {Car_Stroke2_Corner2_Rounded as CarIcon} from '#/components/icons/Car'
|
||||
import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
|
||||
import {Envelope_Stroke2_Corner2_Rounded as EnvelopeIcon} from '#/components/icons/Envelope'
|
||||
import {Freeze_Stroke2_Corner2_Rounded as FreezeIcon} from '#/components/icons/Freeze'
|
||||
import {Lock_Stroke2_Corner2_Rounded as LockIcon} from '#/components/icons/Lock'
|
||||
@@ -31,6 +31,7 @@ export function AccountSettingsScreen({}: Props) {
|
||||
const {_} = useLingui()
|
||||
const {currentAccount} = useSession()
|
||||
const {openModal} = useModalControls()
|
||||
const verifyEmailControl = useDialogControl()
|
||||
const birthdayControl = useDialogControl()
|
||||
const changeHandleControl = useDialogControl()
|
||||
const exportCarControl = useDialogControl()
|
||||
@@ -43,25 +44,48 @@ export function AccountSettingsScreen({}: Props) {
|
||||
<SettingsList.Container>
|
||||
<SettingsList.Item>
|
||||
<SettingsList.ItemIcon icon={EnvelopeIcon} />
|
||||
<SettingsList.ItemText>
|
||||
{/* Tricky flexbox situation here: we want the email to truncate, but by default it will make the "Email" text wrap instead.
|
||||
For numberOfLines to work, we need flex: 1 on the BadgeText, but that means it goes to width: 50% because the
|
||||
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
|
||||
it wouldn't push the BadgeText/Chevron/whatever to the right.
|
||||
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 */}
|
||||
<SettingsList.ItemText style={[a.flex_0]}>
|
||||
<Trans>Email</Trans>
|
||||
</SettingsList.ItemText>
|
||||
{currentAccount && (
|
||||
<>
|
||||
<SettingsList.BadgeText>
|
||||
<SettingsList.BadgeText style={[a.flex_1]}>
|
||||
{currentAccount.email || <Trans>(no email)</Trans>}
|
||||
</SettingsList.BadgeText>
|
||||
{currentAccount.emailConfirmed ? (
|
||||
<CheckIcon color={t.palette.positive_500} size="sm" />
|
||||
) : (
|
||||
<SettingsList.BadgeButton
|
||||
label={_(msg`Verify`)}
|
||||
onPress={() => {}}
|
||||
/>
|
||||
{currentAccount.emailConfirmed && (
|
||||
<VerifiedIcon fill={t.palette.primary_500} size="md" />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</SettingsList.Item>
|
||||
{currentAccount && !currentAccount.emailConfirmed && (
|
||||
<SettingsList.PressableItem
|
||||
label={_(msg`Verify your email`)}
|
||||
onPress={() => verifyEmailControl.open()}
|
||||
style={[
|
||||
a.my_xs,
|
||||
a.mx_lg,
|
||||
a.rounded_md,
|
||||
{backgroundColor: t.palette.primary_50},
|
||||
]}
|
||||
hoverStyle={[{backgroundColor: t.palette.primary_100}]}
|
||||
contentContainerStyle={[a.rounded_md, a.px_lg]}>
|
||||
<SettingsList.ItemIcon
|
||||
icon={VerifiedIcon}
|
||||
color={t.palette.primary_500}
|
||||
/>
|
||||
<SettingsList.ItemText
|
||||
style={[{color: t.palette.primary_500}, a.font_bold]}>
|
||||
<Trans>Verify your email</Trans>
|
||||
</SettingsList.ItemText>
|
||||
<SettingsList.Chevron color={t.palette.primary_500} />
|
||||
</SettingsList.PressableItem>
|
||||
)}
|
||||
<SettingsList.PressableItem
|
||||
label={_(msg`Change email`)}
|
||||
onPress={() => openModal({name: 'change-email'})}>
|
||||
@@ -71,27 +95,6 @@ export function AccountSettingsScreen({}: Props) {
|
||||
</SettingsList.ItemText>
|
||||
<SettingsList.Chevron />
|
||||
</SettingsList.PressableItem>
|
||||
<SettingsList.LinkItem
|
||||
to="/settings/privacy-and-security"
|
||||
label={_(msg`Protect your account`)}
|
||||
style={[
|
||||
a.my_xs,
|
||||
a.mx_lg,
|
||||
a.rounded_md,
|
||||
{backgroundColor: t.palette.primary_50},
|
||||
]}
|
||||
chevronColor={t.palette.primary_500}
|
||||
hoverStyle={[{backgroundColor: t.palette.primary_100}]}
|
||||
contentContainerStyle={[a.rounded_md, a.px_lg]}>
|
||||
<SettingsList.ItemIcon
|
||||
icon={VerifiedIcon}
|
||||
color={t.palette.primary_500}
|
||||
/>
|
||||
<SettingsList.ItemText
|
||||
style={[{color: t.palette.primary_500}, a.font_bold]}>
|
||||
<Trans>Protect your account</Trans>
|
||||
</SettingsList.ItemText>
|
||||
</SettingsList.LinkItem>
|
||||
<SettingsList.Divider />
|
||||
<SettingsList.Item>
|
||||
<SettingsList.ItemIcon icon={BirthdayCakeIcon} />
|
||||
@@ -155,6 +158,7 @@ export function AccountSettingsScreen({}: Props) {
|
||||
</SettingsList.Container>
|
||||
</Layout.Content>
|
||||
|
||||
<VerifyEmailDialog control={verifyEmailControl} />
|
||||
<BirthDateSettingsDialog control={birthdayControl} />
|
||||
<ChangeHandleDialog control={changeHandleControl} />
|
||||
<ExportCarDialog control={exportCarControl} />
|
||||
|
||||
@@ -264,7 +264,13 @@ export function Chevron({color: colorProp}: {color?: string}) {
|
||||
return <ItemIcon icon={ChevronRightIcon} size="md" color={color} />
|
||||
}
|
||||
|
||||
export function BadgeText({children}: {children: React.ReactNode}) {
|
||||
export function BadgeText({
|
||||
children,
|
||||
style,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
style?: StyleProp<ViewStyle>
|
||||
}) {
|
||||
const t = useTheme()
|
||||
return (
|
||||
<Text
|
||||
@@ -273,6 +279,7 @@ export function BadgeText({children}: {children: React.ReactNode}) {
|
||||
a.text_md,
|
||||
a.text_right,
|
||||
a.leading_snug,
|
||||
style,
|
||||
]}
|
||||
numberOfLines={1}>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user