Fakultas Ilmu Komputer UI

Commit e199ff61 authored by jahnsmichael's avatar jahnsmichael
Browse files

[CHORES] forget password page markup

parent 5c8a653b
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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment