src/screens/Login/PasswordUpdatedForm.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'

import {atoms as a, useBreakpoints} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {Text} from '#/components/Typography'
import {FormContainer} from './FormContainer'

export const PasswordUpdatedForm = ({
  onPressNext,
}: {
  onPressNext: () => void
}) => {
  const {_} = useLingui()
  const {gtMobile} = useBreakpoints()

  return (
    <FormContainer
      testID="passwordUpdatedForm"
      style={[a.gap_2xl, !gtMobile && a.mt_5xl]}>
      <Text style={[a.text_3xl, a.font_bold, a.text_center]}>
        <Trans>Password updated!</Trans>
      </Text>
      <Text style={[a.text_center, a.mx_auto, {maxWidth: '80%'}]}>
        <Trans>You can now sign in with your new password.</Trans>
      </Text>
      <View style={[a.flex_row, a.justify_center]}>
        <Button
          onPress={onPressNext}
          label={_(msg`Close alert`)}
          accessibilityHint={_(msg`Closes password update alert`)}
          variant="solid"
          color="primary"
          size="large">
          <ButtonText>
            <Trans>Okay</Trans>
          </ButtonText>
        </Button>
      </View>
    </FormContainer>
  )
}