116 lines
3.0 KiB
TypeScript
116 lines
3.0 KiB
TypeScript
import { LinearGradient } from 'expo-linear-gradient';
|
|
import { Center, Flex, Stack, View, Text, Wrap, Image } from 'native-base';
|
|
import { FunctionComponent } from 'react';
|
|
import { Linking, useWindowDimensions } from 'react-native';
|
|
import ButtonBase from './ButtonBase';
|
|
import { translate } from '../../i18n/i18n';
|
|
import API from '../../API';
|
|
import SeparatorBase from './SeparatorBase';
|
|
import LinkBase from './LinkBase';
|
|
import { useAssets } from 'expo-asset';
|
|
|
|
interface ScaffoldAuthProps {
|
|
title: string;
|
|
description: string;
|
|
form: React.ReactNode[];
|
|
submitButton: React.ReactNode;
|
|
link: { text: string; description: string; onPress: () => void };
|
|
}
|
|
|
|
const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
|
|
title,
|
|
description,
|
|
form,
|
|
submitButton,
|
|
link,
|
|
}) => {
|
|
const layout = useWindowDimensions();
|
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
|
const [banner] = useAssets(require('../../assets/banner.jpg'));
|
|
|
|
return (
|
|
<Flex
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
style={{ flex: 1, backgroundColor: '#101014' }}
|
|
>
|
|
<Center style={{ flex: 1 }}>
|
|
<View style={{ width: '100%', maxWidth: 420, padding: 16 }}>
|
|
<Stack
|
|
space={8}
|
|
justifyContent="center"
|
|
alignContent="center"
|
|
alignItems="center"
|
|
style={{ width: '100%', paddingBottom: 40 }}
|
|
>
|
|
<Text fontSize="4xl" textAlign="center">
|
|
{title}
|
|
</Text>
|
|
<Text fontSize="lg" textAlign="center">
|
|
{description}
|
|
</Text>
|
|
</Stack>
|
|
<Stack
|
|
space={5}
|
|
justifyContent="center"
|
|
alignContent="center"
|
|
alignItems="center"
|
|
style={{ width: '100%' }}
|
|
>
|
|
<ButtonBase
|
|
style={{ width: '100%' }}
|
|
type="outlined"
|
|
iconImage="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2008px-Google_%22G%22_Logo.svg.png"
|
|
title={translate('continuewithgoogle')}
|
|
onPress={() => Linking.openURL(`${API.baseUrl}/auth/login/google`)}
|
|
/>
|
|
<SeparatorBase>or</SeparatorBase>
|
|
<Stack
|
|
space={3}
|
|
justifyContent="center"
|
|
alignContent="center"
|
|
alignItems="center"
|
|
style={{ width: '100%' }}
|
|
>
|
|
{form}
|
|
</Stack>
|
|
{submitButton}
|
|
<Wrap style={{ flexDirection: 'row', justifyContent: 'center' }}>
|
|
<Text>{link.description}</Text>
|
|
<LinkBase onPress={link.onPress}>{link.text}</LinkBase>
|
|
</Wrap>
|
|
</Stack>
|
|
</View>
|
|
</Center>
|
|
{layout.width > 650 ? (
|
|
<View style={{ width: '50%', height: '100%', padding: 16 }}>
|
|
<Image
|
|
source={{ uri: banner?.at(0)?.uri }}
|
|
alt="banner page"
|
|
style={{ width: '100%', height: '100%', borderRadius: 8 }}
|
|
/>
|
|
</View>
|
|
) : (
|
|
<></>
|
|
)}
|
|
<LinearGradient
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
colors={['#101014', '#6075F9']}
|
|
style={{
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
position: 'absolute',
|
|
zIndex: -2,
|
|
}}
|
|
/>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default ScaffoldAuth;
|