[CHORES] forget password page markup

src/scenes/ForgetPasswordPage/index.tsx

 import { useNavigation } from "@react-navigation/native";
-import { Box, Text } from "components";
-import React from "react";
+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";
 
 const ForgetPasswordPage = () => {
-  const navigation = useNavigation();
+  const [isFirstTime, setIsFirstTime] = useState(true);
+  const [form, setField] = useFormState({
+    email: {
+      type: 'EMAIL'
+    }
+  })
 
   return (
     <Box
@@ -12,9 +21,74 @@ const ForgetPasswordPage = () => {
       width="100%"
       background="transparent"
     >
-      <Text isBold={true} fontSize='48px'>Lupa Password Page</Text>
+      <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>
     </Box>
   )
 }
 
+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;
+`;
+
 export default ForgetPasswordPage;
\ No newline at end of file