Feature/authentication

package.json

@@ -16,19 +16,22 @@
     "@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",
     "dateformat": "^3.0.3",
     "expo": "~38.0.8",
-    "expo-cli": "^3.26.2",
-    "expo-font": "^8.2.2",
+    "expo-font": "~8.2.1",
+    "expo-secure-store": "~9.0.1",
     "expo-status-bar": "^1.0.2",
     "formik": "^2.1.5",
+    "expo-cli": "^3.26.2",
     "metro-config": "^0.62.0",
     "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.3.2",
     "react-native-gesture-handler": "~1.6.0",
     "react-native-reanimated": "~1.9.0",

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.Text,
+};
+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_FAMILY_LIGHT,
+    color: Colors.AUTH_GRAY,
+  },
+
+  footerCTA: {
+    fontSize: Typography.FONT_SIZE_16,
+    color: Colors.PURPLE,
+    fontWeight: Typography.FONT_WEIGHT_LIGHT,
+    fontFamily: Typography.FONT_FAMILY_BOLD,
+  },
+});

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/components/common/AppButton.js

@@ -1,18 +1,24 @@
 import React from "react";
-import { StyleSheet, TouchableOpacity } from "react-native";
+import { StyleSheet, TouchableOpacity, ViewPropTypes } from "react-native";
 import PropTypes from "prop-types";
 import FontForgeIcon from "./FontForgeIcon";
 
 import { Colors } from "../../constants/styles";
 
-const AppButton = ({ onPress, icon }) => {
+const AppButton = ({
+  onPress,
+  icon,
+  fontForgeIconStyle,
+  size,
+  buttonStyle,
+}) => {
   return (
-    <TouchableOpacity style={styles.button} onPress={onPress}>
+    <TouchableOpacity style={buttonStyle || styles.button} onPress={onPress}>
       <FontForgeIcon
         name={icon}
-        size={80}
+        size={size || 80}
         color={Colors.PURPLE}
-        style={styles.icon}
+        style={fontForgeIconStyle || styles.icon}
       />
     </TouchableOpacity>
   );
@@ -25,7 +31,7 @@ const styles = StyleSheet.create({
     width: "100%",
   },
   icon: {
-    alignSelf: "flex-end",
+    alignSelf: "center",
     marginTop: 17,
     marginRight: 17,
   },
@@ -34,6 +40,14 @@ const styles = StyleSheet.create({
 AppButton.propTypes = {
   icon: PropTypes.string.isRequired,
   onPress: PropTypes.func.isRequired,
+  fontForgeIconStyle: ViewPropTypes.style,
+  buttonStyle: ViewPropTypes.style,
+  size: PropTypes.number,
 };
 
+AppButton.defaultProps = {
+  fontForgeIconStyle: null,
+  buttonStyle: null,
+  size: null,
+};
 export default AppButton;

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,27 @@
+import { StyleSheet } from "react-native";
+import { Colors, Typography } from "./index";
+
+export const AUTH_STYLES = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.GRAY_VERY_LIGHT,
+    borderTopRightRadius: 50,
+    borderBottomLeftRadius: 50,
+    borderBottomColor: Colors.PURPLE,
+    paddingTop: 16,
+    justifyContent: "center",
+  },
+  login: {
+    marginTop: 50,
+  },
+  inputs: {
+    fontSize: Typography.FONT_SIZE_16,
+    borderColor: Colors.GRAY_VERY_LIGHT,
+    borderWidth: 3,
+    padding: 10,
+    borderRadius: 5,
+    borderBottomColor: Colors.PURPLE,
+  },
+});
+
+export default AUTH_STYLES;

src/constants/styles/colors.js

@@ -24,3 +24,8 @@ export const GRAY_VERY_LIGHT = "#f2f2f2";
 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

@@ -47,3 +47,7 @@ export const FONT_BOLD = {
   fontFamily: FONT_FAMILY_BOLD,
   fontWeight: FONT_WEIGHT_BOLD,
 };
+
+export const FONT_AUTH = {
+  fontWeight: "500",
+};