Feature/authentication

App.js

@@ -4,6 +4,7 @@ import PatientsContextProvider from "./src/modules/context/PatientsContext";
 
 export default function App() {
   console.log(`Initialize app in ${process.env.NODE_ENV}`);
+  console.log(`${process.env.AUTH_API_URL}/user/upload`);
   return (
     <PatientsContextProvider>
       <MainNavigator />

package.json

@@ -15,20 +15,27 @@
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/native": "^5.7.3",
     "@react-navigation/stack": "^5.9.0",
+    "axios": "^0.19.2",
     "babel-plugin-inline-dotenv": "^1.6.0",
     "expo": "~38.0.8",
     "expo-font": "~8.2.1",
+    "expo-secure-store": "~9.0.1",
     "expo-status-bar": "^1.0.2",
+    "formik": "^2.1.5",
     "native-base": "^2.13.13",
     "prop-types": "^15.7.2",
     "react": "~16.11.0",
     "react-dom": "~16.11.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
+    "react-native-basic-form": "^1.1.11",
+    "react-native-elements": "^2.2.1",
     "react-native-gesture-handler": "~1.6.0",
     "react-native-reanimated": "~1.9.0",
     "react-native-safe-area-context": "~3.0.7",
     "react-native-screens": "~2.9.0",
-    "react-native-web": "~0.11.7"
+    "react-native-web": "~0.11.7",
+    "yarn": "^1.22.4",
+    "yup": "^0.29.3"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",

src/api/Auth.js

@@ -0,0 +1,47 @@
+import axios from "axios";
+
+import * as endpoints from "../constants/endpoints/auth";
+
+export function handler(err) {
+  let error = err;
+
+  if (
+    err.response &&
+    Object.prototype.hasOwnProperty.call(err.response.data, "message")
+  )
+    error = err.response.data;
+  else if (!Object.prototype.hasOwnProperty.call(err, "message"))
+    error = err.toJSON();
+
+  return new Error(error.message);
+}
+
+export async function register(data) {
+  try {
+    const response = await axios.post(endpoints.REGISTER, data);
+
+    return response.data;
+  } catch (e) {
+    throw handler(e);
+  }
+}
+
+export async function login(data) {
+  try {
+    const response = await axios.post(endpoints.LOGIN, data);
+
+    return response.data;
+  } catch (e) {
+    throw handler(e);
+  }
+}
+
+export async function forgotPassword(data) {
+  try {
+    const response = await axios.post(endpoints.FORGOT_PASSWORD, data);
+
+    return response.data;
+  } catch (e) {
+    throw handler(e);
+  }
+}

src/components/authentication/CTA.js

@@ -0,0 +1,75 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ViewPropTypes,
+} from "react-native";
+import PropTypes from "prop-types";
+import { Typography, Colors } from "../../constants/styles";
+
+export default function CTA({
+  title,
+  ctaText,
+  onPress,
+  style,
+  titleStyle,
+  ctaStyle,
+}) {
+  return (
+    <View style={[styles.footer, style]}>
+      {title && (
+        <Text
+          style={[styles.footerText, titleStyle, ctaText && { marginRight: 5 }]}
+        >
+          {title}
+        </Text>
+      )}
+
+      {ctaText && (
+        <TouchableOpacity onPress={onPress}>
+          <Text style={[styles.footerCTA, ctaStyle]}>{ctaText}</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+CTA.propTypes = {
+  title: PropTypes.string,
+  ctaText: PropTypes.string,
+  onPress: PropTypes.func,
+  style: ViewPropTypes.style,
+  titleStyle: ViewPropTypes.style,
+  ctaStyle: ViewPropTypes.style,
+};
+CTA.defaultProps = {
+  title: null,
+  ctaText: null,
+  onPress: {},
+  style: {},
+  titleStyle: {},
+  ctaStyle: {},
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+
+  footerText: {
+    fontSize: Typography.FONT_SIZE_16,
+    fontFamily: Typography.FONT_AUTH.fontFamily,
+    color: Colors.AUTH_GRAY,
+  },
+
+  footerCTA: {
+    fontSize: Typography.FONT_SIZE_16,
+    color: Colors.AUTH_VIOLET,
+    fontWeight: Typography.FONT_AUTH.fontWeight,
+    fontFamily: Typography.FONT_AUTH.fontFamily,
+  },
+});

src/components/authentication/Shared.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { View, Text, StyleSheet, ViewPropTypes } from "react-native";
+import PropTypes from "prop-types";
+import { Typography, Colors } from "../../constants/styles";
+
+// HEADER COMPONENT
+export const Header = ({ title, style }) => {
+  return (
+    <View style={[styles.header, style]}>
+      <Text style={styles.headerText}>{title}</Text>
+    </View>
+  );
+};
+
+Header.defaultProps = {
+  style: {},
+};
+
+// ERROR COMPONENT
+export const ErrorText = ({ error }) => {
+  return <Text style={styles.errorText}>{error}</Text>;
+};
+
+ErrorText.defaultProps = {
+  error: "",
+};
+
+ErrorText.propTypes = {
+  error: PropTypes.string,
+};
+
+Header.propTypes = {
+  title: PropTypes.string.isRequired,
+  style: ViewPropTypes.style,
+};
+
+const styles = StyleSheet.create({
+  header: {
+    height: 50,
+    justifyContent: "center",
+  },
+
+  headerText: {
+    fontSize: Typography.FONT_SIZE_25,
+    color: Colors.AUTH_VIOLET_Dark,
+    fontWeight: Typography.FONT_AUTH.fontWeight,
+    fontFamily: Typography.FONT_AUTH.fontFamily,
+  },
+
+  errorText: {
+    marginBottom: 8,
+    color: "red",
+  },
+});

src/constants/endpoints/auth.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line no-unused-vars
+import React from "react";
+// API End Points
+export const REGISTER = `${process.env.AUTH_API_URL}/auth/register`;
+export const LOGIN = `${process.env.AUTH_API_URL}/auth/login`;
+export const UPDATE_PROFILE = `${process.env.AUTH_API_URL}/user`;
+export const UPLOAD_IMAGE = `${process.env.AUTH_API_URL}/user/upload`;
+export const FORGOT_PASSWORD = `${process.env.AUTH_API_URL}/auth/recover`;

src/constants/keys/Auth.js

@@ -0,0 +1,2 @@
+export const TOKEN_KEY = "token";
+export const USER_KEY = "user";

src/constants/styles/auth.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+import { Colors, Typography } from "./index";
+
+export const AUTH_STYLES = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    backgroundColor: Colors.WHITE,
+  },
+  login: {
+    marginTop: 50,
+  },
+  inputs: {
+    fontSize: Typography.FONT_SIZE_16,
+    borderColor: Colors.AUTH_VIOLET,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 6,
+  },
+});
+
+export default AUTH_STYLES;

src/constants/styles/colors.js

@@ -12,3 +12,8 @@ export const ALERT = "#cc4b37";
 export const GRAY_LIGHT = "#e6e6e6";
 export const GRAY_MEDIUM = "#cacaca";
 export const GRAY_DARK = "#8a8a8a";
+
+// AUTH
+export const AUTH_VIOLET = "#733AC2";
+export const AUTH_GRAY = "#636466";
+export const AUTH_VIOLET_DARK = "362068";

src/constants/styles/typography.js

@@ -1,6 +1,8 @@
+import { Platform } from "react-native";
 import { scaleFont } from "./mixins";
 
 // FONT FAMILY
+export const font = Platform.OS === "ios" ? "HelveticaNeue" : "Roboto"; // temp
 export const FONT_FAMILY_REGULAR = "OpenSans-Regular";
 export const FONT_FAMILY_BOLD = "OpenSans-Bold";
 
@@ -9,6 +11,7 @@ export const FONT_WEIGHT_REGULAR = "400";
 export const FONT_WEIGHT_BOLD = "700";
 
 // FONT SIZE
+export const FONT_SIZE_25 = scaleFont(25);
 export const FONT_SIZE_16 = scaleFont(16);
 export const FONT_SIZE_14 = scaleFont(14);
 export const FONT_SIZE_12 = scaleFont(12);
@@ -28,3 +31,8 @@ export const FONT_BOLD = {
   fontFamily: FONT_FAMILY_BOLD,
   fontWeight: FONT_WEIGHT_BOLD,
 };
+
+export const FONT_AUTH = {
+  fontFamily: Platform.OS === "ios" ? "HelveticaNeue" : "Roboto",
+  fontWeight: "500",
+};

src/modules/context/Auth.js

@@ -0,0 +1,104 @@
+import React, { useMemo, useReducer, useContext } from "react";
+import * as SecureStore from "expo-secure-store";
+import axios from "axios";
+import PropTypes from "prop-types";
+import { TOKEN_KEY, USER_KEY } from "../../constants/keys/Auth";
+
+// IMPORT REDUCER, INITIAL STATE AND ACTION TYPES
+import reducer, { initialState, LOGGED_IN, LOGGED_OUT } from "./AuthReducer";
+
+// CONFIG KEYS [Storage Keys]===================================
+export const keys = [TOKEN_KEY, USER_KEY];
+
+// CONTEXT ===================================
+const AuthContext = React.createContext();
+
+function AuthProvider(props) {
+  const [state, dispatch] = useReducer(reducer, initialState || {});
+
+  // Get Auth state
+  const getAuthState = async () => {
+    try {
+      // GET TOKEN && USER
+      const token = await SecureStore.getItemAsync(TOKEN_KEY);
+      let user = await SecureStore.getItemAsync(USER_KEY);
+      user = JSON.parse(user);
+
+      if (token !== null && user !== null) await handleLogin({ token, user });
+      else await handleLogout();
+
+      return { token, user };
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  // Handle Login
+  const handleLogin = async (data) => {
+    try {
+      // STORE DATA
+      const { token, user } = data;
+
+      // TODO use Promise.all for multiple Key sets
+      await SecureStore.setItemAsync(USER_KEY, JSON.stringify(user));
+      await SecureStore.setItemAsync(TOKEN_KEY, token);
+
+      // AXIOS AUTHORIZATION HEADER
+      axios.defaults.headers.common.Authorization = `Bearer ${data.token}`;
+
+      // DISPATCH TO REDUCER
+      dispatch({ type: LOGGED_IN, user: data.user });
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  // Handle Logout
+  const handleLogout = async () => {
+    try {
+      // REMOVE DATA
+
+      // TODO? use Promise.all for multiple Key sets
+      await SecureStore.deleteItemAsync(TOKEN_KEY);
+      await SecureStore.deleteItemAsync(USER_KEY);
+
+      // AXIOS AUTHORIZATION HEADER
+      delete axios.defaults.headers.common.Authorization;
+
+      // DISPATCH TO REDUCER
+      dispatch({ type: LOGGED_OUT });
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  // UPDATE USER LOCAL STORAGE DATA AND DISPATCH TO REDUCER
+  const updateUser = async (user) => {
+    try {
+      await SecureStore.setItemAsync(USER_KEY, JSON.stringify(user));
+      dispatch({ type: LOGGED_IN, user }); // DISPATCH TO REDUCER
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  const value = useMemo(() => {
+    return { state, getAuthState, handleLogin, handleLogout, updateUser };
+  }, [state]);
+
+  AuthProvider.propTypes = {
+    children: PropTypes.node,
+  };
+
+  AuthProvider.defaultProps = {
+    children: {},
+  };
+
+  const { children } = props;
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+const useAuth = () => useContext(AuthContext);
+export { AuthContext, useAuth };
+export default AuthProvider;