@boneframework/native-components 1.0.28 → 1.0.30

package/components/ActivityIndicator.tsx

@@ -4,7 +4,7 @@ import {View, StyleSheet} from "react-native";
 import Animation from "./Animation";
 import useStyle from "../hooks/useStyle";
 
-function ActivityIndicator({ visible = false , type="default"}) {
+function ActivityIndicator({ visible = false , type="default", animationPath = '../../../../assets/animations/loader.json'}) {
     const defaultStyles = useStyle();
 
     const styles = StyleSheet.create({
@@ -35,7 +35,7 @@ function ActivityIndicator({ visible = false , type="default"}) {
     return (
         <View style={style}>
             <Animation
-                source={require('../../../../assets/animations/loader.json')}
+                source={require(animationPath)}
                 autoPlay={true}
                 loop={true}
                 style={{height: 100, width: 100, opacity: 1}}

package/components/Animation.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from 'react';
 import LottieView from "lottie-react-native";
 
-function Animation({source, style, onAnimationFinish, autoPlay = true, loop = true, speed = 1.5}) {
+function Animation({source, style  = {}, onAnimationFinish = () => {}, autoPlay = true, loop = true, speed = 1.5}) {
 
     const lottieRef = useRef(null);
 

package/hooks/useLinking.ts

@@ -0,0 +1,24 @@
+import * as Linking from "expo-linking";
+import {useEffect} from "react";
+import router from 'ex';
+
+import routes from '../../../../config/routes';
+
+export default useLinking = () => {
+    const url = Linking.useURL();
+
+    useEffect(() => {
+        if (url) {
+            const parts = Linking.parse(url);
+            if (parts.path !== null && parts.path !== '') {
+                switch (parts.path) {
+                    case routes.USER_ACTIVATION:
+                        router.navigate(routes.USER_ACTIVATION, parts.queryParams);
+                        break;
+                }
+            }
+        }
+    }, [url]);
+
+    return url;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -41,6 +41,7 @@
     "expo-image-picker": "^15.0.7",
     "expo-location": "~17.0.1",
     "expo-notifications": "^0.28.11",
+    "expo-router": "^3.5.23",
     "expo-secure-store": "^13.0.2",
     "formik": "^2.4.6",
     "jwt-decode": "^4.0.0",

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;