82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
|
import { FC, useCallback } from "react"
|
||
|
|
import { TextStyle, ViewStyle } from "react-native"
|
||
|
|
|
||
|
|
import { ListItem } from "@/components/ListItem"
|
||
|
|
import { Screen } from "@/components/Screen"
|
||
|
|
import { translate } from "@/i18n/translate"
|
||
|
|
import { AppStackScreenProps } from "@/navigators/navigationTypes"
|
||
|
|
import { useAppTheme } from "@/theme/context"
|
||
|
|
import { $styles } from "@/theme/styles"
|
||
|
|
import type { ThemedStyle } from "@/theme/types"
|
||
|
|
import { useHeader } from "@/utils/useHeader"
|
||
|
|
|
||
|
|
export const SecurityScreen: FC<AppStackScreenProps<"Security">> = function SecurityScreen({
|
||
|
|
navigation,
|
||
|
|
}) {
|
||
|
|
const { themed, theme } = useAppTheme()
|
||
|
|
|
||
|
|
const navigateToChangePassword = useCallback(() => {
|
||
|
|
navigation.navigate("ChangePassword")
|
||
|
|
}, [navigation])
|
||
|
|
|
||
|
|
const navigateToChangeEmail = useCallback(() => {
|
||
|
|
navigation.navigate("ChangeEmail")
|
||
|
|
}, [navigation])
|
||
|
|
|
||
|
|
const navigateToSessionManagement = useCallback(() => {
|
||
|
|
navigation.navigate("SessionManagement")
|
||
|
|
}, [navigation])
|
||
|
|
|
||
|
|
useHeader(
|
||
|
|
{
|
||
|
|
title: translate("securityScreen:title"),
|
||
|
|
leftIcon: "back",
|
||
|
|
onLeftPress: () => navigation.goBack(),
|
||
|
|
},
|
||
|
|
[],
|
||
|
|
)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Screen
|
||
|
|
preset="scroll"
|
||
|
|
safeAreaEdges={["bottom"]}
|
||
|
|
contentContainerStyle={[$styles.container, themed($container)]}
|
||
|
|
>
|
||
|
|
<ListItem
|
||
|
|
tx="securityScreen:changePassword"
|
||
|
|
textStyle={themed($listItemText)}
|
||
|
|
leftIcon="lock"
|
||
|
|
leftIconColor={theme.colors.tint}
|
||
|
|
rightIcon="caretRight"
|
||
|
|
onPress={navigateToChangePassword}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<ListItem
|
||
|
|
tx="securityScreen:changeEmail"
|
||
|
|
textStyle={themed($listItemText)}
|
||
|
|
leftIcon="mail"
|
||
|
|
leftIconColor={theme.colors.tint}
|
||
|
|
rightIcon="caretRight"
|
||
|
|
onPress={navigateToChangeEmail}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<ListItem
|
||
|
|
tx="securityScreen:activeSessions"
|
||
|
|
textStyle={themed($listItemText)}
|
||
|
|
leftIcon="smartphone"
|
||
|
|
leftIconColor={theme.colors.tint}
|
||
|
|
rightIcon="caretRight"
|
||
|
|
onPress={navigateToSessionManagement}
|
||
|
|
/>
|
||
|
|
</Screen>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const $container: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
||
|
|
paddingTop: spacing.lg,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $listItemText: ThemedStyle<TextStyle> = () => ({
|
||
|
|
// Default styling
|
||
|
|
})
|