redesign AuthenticationView

2023-09-20 10:27:24 +02:00
parent 6768b0b2a6
commit 973f9bf5b3
14 changed files with 624 additions and 166 deletions
@@ -0,0 +1,74 @@
+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 ImageBanner from '../../assets/banner.jpg';
+
+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();
+
+	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={ImageBanner}
+                        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;