Fakultas Ilmu Komputer UI

index.tsx 2.16 KB
Newer Older
jahnsmichael's avatar
jahnsmichael committed
1
import { useNavigation } from "@react-navigation/native";
2
3
4
5
6
7
import { Box, Button, Cloud, Field, Gap, Text } from "components";
import styled from 'styled-components/native';
import React, { useState } from "react";
import { Image } from "react-native";
import WaveBackground from 'assets/arts/background-wave.png';
import { useFormState } from "helpers";
jahnsmichael's avatar
jahnsmichael committed
8
9

const ForgetPasswordPage = () => {
10
11
12
13
14
15
  const [isFirstTime, setIsFirstTime] = useState(true);
  const [form, setField] = useFormState({
    email: {
      type: 'EMAIL'
    }
  })
jahnsmichael's avatar
jahnsmichael committed
16
17
18
19
20
21
22
23

  return (
    <Box
      axis={Box.Axis.Vertical}
      height="100%"
      width="100%"
      background="transparent"
    >
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
      <Cloud
        top="0px"
        left="0px"
        height="100%"
        width="100%"
      >
        <Image
          style={{
            height: "100%",
            width: "100%",
          }}
          source={WaveBackground}
        />
      </Cloud>
      <Container>
        <FieldControl>
          <Text isBold={true} fontSize='48px'>Lupa Password</Text>
        </FieldControl>
        <Gap gap={24} axis={Gap.Axis.Vertical} />
        <FieldControl>
          <Field
            id="email"
            name="Email"
            placeholder="Masukkan email Anda."
            information={
              isFirstTime || form.fields.email.isValid
                ? ''
                : 'Masukkan email yang valid.'
            }
            updateValue={val => setField('email', val)}>
          </Field>
        </FieldControl>
      </Container>
      <Action>
        <Box>
          <Button
            id="submit"
            type={Button.Type.Filled}
            onPress={async () => {
              if (isFirstTime) {
                setIsFirstTime(false);
              }
            }}
          >Kirim Email Verifikasi</Button>
        </Box>
      </Action>
jahnsmichael's avatar
jahnsmichael committed
70
71
72
73
    </Box>
  )
}

74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
const Container = styled.View`
  width: 100%;
  height: 55%;
  padding: 0 32px;
  justify-content: flex-end;
`;

const FieldControl = styled.View`
  margin-bottom: 5%;
`;

const Action = styled.View`
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  padding: 0 32px;
  flex-grow: 1;
`;

jahnsmichael's avatar
jahnsmichael committed
94
export default ForgetPasswordPage;