import { ObservableScreen , ObservableThemeStore , ObservableUserStore , } from '@ulangi/ulangi-observable' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { View } from 'react-native' ; import { SecurityScreenIds } from '../../constants/ids/SecurityScreenIds' ; import { SecurityScreenDelegate } from '../../delegates/account/SecurityScreenDelegate' ; import { Screen } from '../common/Screen' ; import { SectionGroup } from '../section/SectionGroup' ; import { SectionRow } from '../section/SectionRow' ; import { SecurityScreenStyles , securityScreenResponsiveStyles , } from './SecurityScreen.style' ; export interface SecurityScreenProps { themeStore : ObservableThemeStore ; userStore : ObservableUserStore ; observableScreen : ObservableScreen ; screenDelegate : SecurityScreenDelegate ; } @ observer export class SecurityScreen extends React . Component < SecurityScreenProps > { private get styles ( ) : SecurityScreenStyles { return securityScreenResponsiveStyles . compile ( this . props . observableScreen . screenLayout , this . props . themeStore . theme ) ; } public render ( ) { return ( < Screen style = { this . styles . screen } testID = { SecurityScreenIds . SCREEN } observableScreen = { this . props . observableScreen } useSafeAreaView = { true } > < View style = { this . styles . section_list } > { this . renderSections ( ) } < /View> < /Screen>); } private renderSections ( ) { return [ this . renderAccountSection ( ) ] ; } private renderAccountSection ( ) { return ( < SectionGroup theme = { this . props . themeStore . theme } screenLayout = { this . props . observableScreen . screenLayout } key = "ulangi-account" header = "ULANGI ACCOUNT" > < SectionRow testID = { SecurityScreenIds . CHANGE_EMAIL_BTN } theme = { this . props . themeStore . theme } screenLayout = { this . props . observableScreen . screenLayout } key = "change-email" leftText = "Change Email" rightText = { this . props . userStore . existingCurrentUser . email } showArrow = { true } shrink = "right" onPress = { this . props . screenDelegate . navigateToChangeEmailScreen } / > < SectionRow testID = { SecurityScreenIds . CHANGE_PASSWORD_BTN } theme = { this . props . themeStore . theme } screenLayout = { this . props . observableScreen . screenLayout } key = "change-password" leftText = "Change Password" rightText = "" showArrow = { true } onPress = { this . props . screenDelegate . navigateToChangePasswordScreen } / > < /SectionGroup>); } }