@boneframework/native-components 1.0.29 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {

package/screens/ActivateUserScreen.tsx

@@ -0,0 +1,122 @@
+import {Image, ImageBackground, Keyboard, StyleSheet, View} from "react-native";
+import * as Linking from 'expo-linking';
+import React, {useEffect, useState} from "react";
+import * as Yup from 'yup'
+
+import Button from '../components/Button';
+import CheckEmailScreen from '../screens/CheckEmailScreen';
+import Text from '../components/Text';
+import ActivityIndicator from "../components/ActivityIndicator";
+import Animation from "../components/Animation";
+import {ErrorMessage, Form, FormField, SubmitButton} from "../components/forms";
+import ResendActivationScreen from "../screens/ResendActivationlScreen";
+import SetPasswordScreen from "../screens/SetPasswordScreen";
+import useApi from "../hooks/useApi";
+import useAuth from "../hooks/useAuth";
+import useLinking from "../hooks/useLinking";
+import userApi from "../api/users";
+
+import settings from "../../../../config/settings";
+import routes from "../../../../config/routes";
+import colors from '../../../../config/colors';
+
+function ActivateUserScreen({navigation, route}) {
+    const STATUS_VALIDATE = 'validate_email_token';
+    const STATUS_RESEND = 'resend_email_token';
+    const STATUS_SET_PASSWORD = 'set_password';
+    const activationApi = useApi(userApi.activateAccount);
+    const resendActivationApi = useApi(userApi.resendactivationEmail);
+    const validateEmailTokenApi = useApi(userApi.validateEmailToken);
+    const [status, setStatus] = useState(STATUS_VALIDATE);
+    const [error, setError] = useState();
+    const [tokenError, setTokenError] = useState();
+    const {login} = useAuth();
+    const url = Linking.useURL();
+    const email = route.params.email;
+    const token = route.params.token;
+
+    const validateEmailToken = async () => {
+        const result = await validateEmailTokenApi.request(email, token);
+
+        if (result.data.ok) {
+            setStatus(STATUS_SET_PASSWORD);
+        }
+
+        if (result.data.error) {
+            setTokenError(result.data.error);
+
+            switch (result.data.error) {
+                case 'The email link has expired.':
+                    setStatus(STATUS_RESEND);
+                    break;
+            }
+        }
+    }
+
+    const handleSubmit = async userInfo => {
+        Keyboard.dismiss();
+        try {
+            const result = await activationApi.request(email, token, settings.clientId, userInfo.password);
+
+            if (!result.ok) {
+                if (result.data) {
+                    switch (result.data.error) {
+                        case 'The email link has expired.':
+                        case 'A matching email link was not found':
+                        case 'The token did not match.':
+                            setTokenError(result.data.error);
+                            break;
+                    }
+                    setError(result.data.error);
+                } else {
+                    setError('An unexpected error occured');
+                    console.error(result);
+                }
+
+                return;
+            }
+
+            login({accessToken: result.data.access_token, refreshToken: result.data.refresh_token});
+        } catch (error) {
+            setError(error);
+            console.error(error);
+        }
+
+    };
+
+    const resendActivationEmail = async () => {
+        resendActivationApi
+            .request(email)
+            .then(setStatus(STATUS_VALIDATE))
+            .then(navigation.goBack())
+            .then(navigation.navigate(routes.USER_ACTIVATION_CHECK_EMAIL))
+            .catch(console.error);
+    }
+
+    useEffect(() => {
+        if (status === STATUS_VALIDATE) {
+            validateEmailToken();
+        }
+    });
+
+    return (
+        <>
+            <ActivityIndicator visible={activationApi.loading || resendActivationApi.loading || validateEmailTokenApi.loading} type={'overlay'}/>
+            <ImageBackground blurRadius={10} style={styles.container} source={require('../../../../assets/background.png')} >
+                { (status === STATUS_SET_PASSWORD || status === STATUS_VALIDATE)  && <SetPasswordScreen submitCallback={handleSubmit} error={error}/> }
+                { status === STATUS_RESEND && <ResendActivationScreen email={email} tokenError={tokenError} submitCallback={resendActivationEmail}/> }
+            </ImageBackground>
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingHorizontal: 20
+    }
+})
+
+export default ActivateUserScreen;
+
+

package/screens/CheckEmailScreen.tsx

@@ -0,0 +1,59 @@
+import {ImageBackground, StyleSheet, View} from "react-native";
+import React from "react";
+
+import Text from '../components/Text';
+import Animation from "../components/Animation";
+
+import colors from "../../../../config/colors";
+
+function CheckEmailScreen(props) {
+
+    return (
+        <ImageBackground blurRadius={10} style={styles.container} source={require('../../../../assets/background.png')} >
+            <View style={styles.animationContainer}>
+                <Animation
+                    autoPlay={true}
+                    loop={true}
+                    source={require('../../../../assets/animations/email.json')}
+                    style={styles.animation}
+                    speed={1}
+                />
+                <Text style={styles.activate}>Activate your account</Text>
+                <Text style={styles.info}>Check your email and click on the link to open the app and activate your account.</Text>
+            </View>
+        </ImageBackground>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingHorizontal: 20
+    },
+    animationContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+        paddingHorizontal: 10,
+        marginTop: -50
+    },
+    animation: {
+        width: 150,
+        height: 150,
+    },
+    activate: {
+        marginTop: 20,
+        textTransform: 'uppercase',
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginBottom: 20,
+        color: colors.white,
+        textAlign: 'center'
+    },
+    info: {
+        color: colors.white,
+        textAlign: 'center'
+    },
+})
+
+export default CheckEmailScreen;

package/screens/ResendActivationlScreen.js

@@ -0,0 +1,49 @@
+import {StyleSheet, View} from "react-native";
+
+import Text from '../components/Text';
+import Button from "../components/Button";
+import Button from "../components/Image";
+
+import colors from "../../../../config/colors";
+
+function ResendActivationScreen({tokenError, submitCallback}) {
+
+    return (
+        <View style={styles.container}>
+            <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
+            <Text style={styles.tokenError}>{tokenError}</Text>
+            <Text style={styles.resendText}>You will need a fresh acivation email in order to continue creating your account.</Text>
+            <Button color={'primary'} title={'Resend email'} onPress={submitCallback}/>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    logo: {
+        width: 150,
+        height: 105,
+        alignSelf: "center",
+        marginTop: 50,
+        marginBottom: 20,
+    },
+    resendText: {
+        color: colors.white,
+        fontSize: 17,
+        marginBottom: 20,
+        textAlign: 'center'
+    },
+    tokenError: {
+        color: colors.white,
+        fontSize: 25,
+        marginBottom: 10,
+        textAlign: 'center'
+    },
+})
+
+export default ResendActivationScreen;
+
+