Added functional registration

src/components/Api/Api.tsx

@@ -0,0 +1,73 @@
+import axios from "axios";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import {
+  ActivationParams,
+  LoginParams,
+  RegistrationParams,
+} from "../../interfaces/Interfaces";
+
+let debug = true;
+export let backendURL = "";
+if (debug) {
+  backendURL = "http://10.0.10.8:8000";
+} else {
+  backendURL = "https://keannu125.pythonanywhere.com";
+}
+
+const instance = axios.create({
+  baseURL: backendURL,
+  timeout: 1000,
+});
+
+// App APIs
+
+// User APIs
+
+export function UserRegister(register: RegistrationParams) {
+  console.log(JSON.stringify(register));
+  return instance
+    .post("/api/v1/accounts/users/", register)
+    .then(async (response) => {
+      return [response.status];
+    })
+    .catch((error) => {
+      return [error.response.status, error.response.data];
+    });
+}
+
+export function UserLogin(user: LoginParams) {
+  return instance
+    .post("/api/v1/accounts/token/login/", user)
+    .then(async (response) => {
+      AsyncStorage.setItem("token", JSON.stringify(response.data.auth_token));
+      return true;
+    })
+    .catch((error) => {
+      console.log("Login Failed: " + error);
+      return false;
+    });
+}
+
+export async function UserInfo() {
+  const token = JSON.parse((await AsyncStorage.getItem("token")) || "{}");
+  return instance
+    .get("/api/v1/accounts/users/me/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
+export function UserActivate(activation: ActivationParams) {
+  return instance
+    .post("/api/v1/accounts/users/activation/", activation)
+    .then(async (response) => {
+      return true;
+    })
+    .catch((error) => {
+      return false;
+    });
+}

src/components/Button/Button.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Text, Pressable, GestureResponderEvent } from "react-native";
+import styles from "../../styles";
+
+export interface props {
+  children: React.ReactNode;
+  onPress: (event: GestureResponderEvent) => void;
+  color: string;
+}
+
+export default function Button(props: props) {
+  return (
+    <Pressable
+      onPress={props.onPress}
+      style={{
+        ...styles.button_template,
+        ...{ backgroundColor: props.color, width: "50%" },
+      }}
+    >
+      {props.children}
+    </Pressable>
+  );
+}

src/components/Button/DrawerButton.tsx

@@ -14,7 +14,11 @@ export default function DrawerButton(props: props) {
       onPress={props.onPress}
       style={{
         ...styles.button_template,
-        ...{ backgroundColor: props.color, width: "95%" },
+        ...{
+          backgroundColor: props.color,
+          width: "95%",
+          justifyContent: "flex-start",
+        },
       }}
     >
       {props.children}

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -22,7 +22,7 @@ export default function CustomDrawerContent(props: {}) {
           ...{ justifyContent: "center" },
         }}
       >
-        <AppIcon size={32} color={colors.icon_color} />
+        <AppIcon size={32} />
         <Text style={styles.text_white_medium}>Stud-E</Text>
       </View>
       <DrawerButton
@@ -31,7 +31,7 @@ export default function CustomDrawerContent(props: {}) {
           navigation.navigate("Home");
         }}
       >
-        <HomeIcon size={32} color={colors.icon_color} />
+        <HomeIcon size={32} />
         <Text style={styles.text_white_medium}>Home</Text>
       </DrawerButton>
       <DrawerButton
@@ -40,7 +40,7 @@ export default function CustomDrawerContent(props: {}) {
           navigation.navigate("Login");
         }}
       >
-        <LoginIcon size={32} color={colors.icon_color} />
+        <LoginIcon size={32} />
         <Text style={styles.text_white_medium}>Login</Text>
       </DrawerButton>
       <DrawerButton
@@ -49,7 +49,7 @@ export default function CustomDrawerContent(props: {}) {
           navigation.navigate("Register");
         }}
       >
-        <SignupIcon size={32} color={colors.icon_color} />
+        <SignupIcon size={32} />
         <Text style={styles.text_white_medium}>Register</Text>
       </DrawerButton>
     </DrawerContentScrollView>

src/components/DrawerSettings/DrawerScreenSettings.tsx

@@ -24,7 +24,7 @@ const DrawerScreenSettings: DrawerNavigationOptions = {
     <View
       style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
     >
-      <AppIcon size={32} color={colors.icon_color} />
+      <AppIcon size={32} />
     </View>
   ),
 };

src/components/IsNumber/IsNumber.tsx

@@ -0,0 +1,8 @@
+export default function IsNumber(number: string) {
+  const re = /^[0-9\b]+$/;
+  if (re.test(number)) {
+    return true;
+  } else {
+    return false;
+  }
+}

src/components/ParseError/ParseError.tsx

@@ -0,0 +1,9 @@
+export default function ParseError(text: string) {
+  return text
+    .replaceAll(/[{}()"]/g, " ")
+    .replaceAll(/,/g, "\n")
+    .replaceAll(":", "")
+    .replaceAll("[", "")
+    .replaceAll("]", "")
+    .replaceAll(".", "");
+}

src/features/redux/Store/Store.tsx

@@ -0,0 +1,14 @@
+import { configureStore } from "@reduxjs/toolkit";
+import AuthReducer from "../slices/AuthSlice/AuthSlice";
+
+const store = configureStore({
+  reducer: {
+    auth: AuthReducer,
+  },
+});
+
+export default store;
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

src/features/redux/slices/AuthSlice/AuthSlice.tsx

@@ -0,0 +1,42 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const AuthSlice = createSlice({
+  name: "Auth",
+  initialState: {
+    creds: {
+      email: "",
+      uid: "",
+      username: "",
+      full_name: "",
+      token: "",
+    },
+  },
+  reducers: {
+    setToken: (state, action) => {
+      state.creds.token = action.payload.token;
+    },
+    setUser: (state, action) => {
+      state.creds = {
+        email: action.payload.email,
+        uid: action.payload.uid,
+        username: action.payload.username,
+        full_name: action.payload.full_name,
+        token: action.payload.token,
+      };
+    },
+    clear: (state) => {
+      state.creds = {
+        email: "",
+        uid: "",
+        username: "",
+        full_name: "",
+        token: "",
+      };
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setToken, setUser, clear } = AuthSlice.actions;
+
+export default AuthSlice.reducer;

src/icons/AddIcon/AddIcon.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { IconProps } from "../../interfaces/Interfaces";
 
 import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
 
 export default function AddIcon(props: IconProps) {
   return (
@@ -11,7 +12,7 @@ export default function AddIcon(props: IconProps) {
         height={props.size}
         viewBox="0 0 24 24"
         strokeWidth="2"
-        stroke={props.color}
+        stroke={colors.icon_color}
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"

src/icons/AppIcon/AppIcon.tsx

@@ -2,12 +2,13 @@ import * as React from "react";
 import { IconProps } from "../../interfaces/Interfaces";
 
 import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
 
 export default function AppIcon(props: IconProps) {
   return (
     <>
       <Svg
-        fill={props.color}
+        fill={colors.icon_color}
         height={props.size + "px"}
         width={props.size + "px"}
         viewBox="0 0 375.775 375.775"

src/icons/HomeIcon/HomeIcon.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { IconProps } from "../../interfaces/Interfaces";
 
 import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
 
 export default function HomeIcon(props: IconProps) {
   return (
@@ -11,7 +12,7 @@ export default function HomeIcon(props: IconProps) {
         height={props.size}
         viewBox="0 0 24 24"
         strokeWidth="2"
-        stroke={props.color}
+        stroke={colors.icon_color}
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"

src/icons/LoginIcon/LoginIcon.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { IconProps } from "../../interfaces/Interfaces";
 
 import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
 
 export default function LoginIcon(props: IconProps) {
   return (
@@ -11,7 +12,7 @@ export default function LoginIcon(props: IconProps) {
         height={props.size}
         viewBox="0 0 24 24"
         strokeWidth="2"
-        stroke={props.color}
+        stroke={colors.icon_color}
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"

src/icons/LogoutIcon/LogoutIcon.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { IconProps } from "../../interfaces/Interfaces";
 
 import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
 
 export default function LogoutIcon(props: IconProps) {
   return (
@@ -11,7 +12,7 @@ export default function LogoutIcon(props: IconProps) {
         height={props.size}
         viewBox="0 0 24 24"
         strokeWidth="2"
-        stroke={props.color}
+        stroke={colors.icon_color}
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"

src/icons/SignupIcon/SignupIcon.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { IconProps } from "../../interfaces/Interfaces";
 
 import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
 
 export default function SignupIcon(props: IconProps) {
   return (
@@ -11,7 +12,7 @@ export default function SignupIcon(props: IconProps) {
         height={props.size}
         viewBox="0 0 24 24"
         strokeWidth="2"
-        stroke={props.color}
+        stroke={colors.icon_color}
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"

src/icons/UserIcon/UserIcon.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { IconProps } from "../../interfaces/Interfaces";
 
 import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
 
 export default function UserIcon(props: IconProps) {
   return (
@@ -11,7 +12,7 @@ export default function UserIcon(props: IconProps) {
         height={props.size}
         viewBox="0 0 24 24"
         strokeWidth="2"
-        stroke={props.color}
+        stroke={colors.icon_color}
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"

src/interfaces/Interfaces.tsx

@@ -1,5 +1,9 @@
 export interface IconProps {
   size: number;
+}
+
+export interface ResponsiveIconProps {
+  size: number;
   color: string;
 }
 
@@ -28,6 +32,9 @@ export interface RegistrationParams {
   email: string;
   username: string;
   password: string;
+  first_name: string;
+  last_name: string;
+  student_id_number: string;
 }
 
 export interface LoginParams {

src/routes/Login/Login.tsx

@@ -1,20 +1,87 @@
 import * as React from "react";
 import styles from "../../styles";
-import { font_sizes } from "../../styles";
-import { View, Text } from "react-native";
+import {
+  View,
+  Text,
+  TextInput,
+  NativeSyntheticEvent,
+  TextInputChangeEventData,
+} from "react-native";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "../../features/redux/Store/Store";
+import {
+  setUser,
+  clear,
+} from "../../features/redux/slices/AuthSlice/AuthSlice";
+import { colors } from "../../styles";
+import { useState } from "react";
+import LoginIcon from "../../icons/LoginIcon/LoginIcon";
+import Button from "../../components/Button/Button";
+import { useNavigation } from "@react-navigation/native";
+import { RootDrawerParamList } from "../../interfaces/Interfaces";
 
 export default function Login() {
+  const navigation = useNavigation<RootDrawerParamList>();
+  // const dispatch = useDispatch();
+  // const creds = useSelector((state: RootState) => state.auth.creds);
+  const [user, setUser] = useState({
+    email: "",
+    password: "",
+    error: "",
+  });
   return (
     <View style={styles.background}>
-      <Text
-        style={{
-          fontSize: font_sizes.large,
-          color: "white",
-          textAlign: "center",
-        }}
-      >
-        Template Login Page
-      </Text>
+      <View style={styles.container}>
+        <View
+          style={{
+            paddingVertical: 4,
+            marginBottom: 16,
+            borderRadius: 4,
+            width: "90%",
+            backgroundColor: colors.blue_1,
+          }}
+        />
+        <View style={styles.flex_row}>
+          <LoginIcon size={32} />
+          <Text style={styles.text_white_large}>Student Login</Text>
+        </View>
+
+        <View style={{ paddingVertical: 8 }} />
+        <TextInput
+          style={styles.text_input}
+          placeholder="Email"
+          placeholderTextColor="white"
+          value={user.email}
+          onChange={(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser({ ...user, email: e.nativeEvent.text });
+          }}
+        />
+        <View style={{ paddingVertical: 4 }} />
+        <TextInput
+          style={styles.text_input}
+          placeholder="Password"
+          placeholderTextColor="white"
+          secureTextEntry={true}
+          value={user.password}
+          onChange={(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser({ ...user, password: e.nativeEvent.text });
+          }}
+        />
+        <View style={{ paddingVertical: 4 }} />
+        <Button onPress={() => console.log("heh")} color={colors.blue_3}>
+          <Text style={styles.text_white_small}>Login</Text>
+        </Button>
+        <Button
+          onPress={() => navigation.navigate("Register")}
+          color={colors.blue_3}
+        >
+          <Text style={styles.text_white_small}>Register</Text>
+        </Button>
+      </View>
     </View>
   );
 }

src/routes/Register/Register.tsx

@@ -1,20 +1,173 @@
 import * as React from "react";
 import styles from "../../styles";
-import { font_sizes } from "../../styles";
-import { View, Text } from "react-native";
+import {
+  View,
+  Text,
+  TextInput,
+  NativeSyntheticEvent,
+  TextInputChangeEventData,
+} from "react-native";
+import { useSelector, useDispatch } from "react-redux";
+import { colors } from "../../styles";
+import { useState } from "react";
+import Button from "../../components/Button/Button";
+import { useNavigation } from "@react-navigation/native";
+import { RootDrawerParamList } from "../../interfaces/Interfaces";
+import SignupIcon from "../../icons/SignupIcon/SignupIcon";
+import { UserRegister } from "../../components/Api/Api";
+import IsNumber from "../../components/IsNumber/IsNumber";
+import ParseError from "../../components/ParseError/ParseError";
 
 export default function Register() {
+  const navigation = useNavigation<RootDrawerParamList>();
+  // const dispatch = useDispatch();
+  // const creds = useSelector((state: RootState) => state.auth.creds);
+  const [user, setUser] = useState({
+    first_name: "",
+    last_name: "",
+    student_id_number: "",
+    username: "",
+    email: "",
+    password: "",
+    feedback: "",
+  });
   return (
     <View style={styles.background}>
-      <Text
-        style={{
-          fontSize: font_sizes.large,
-          color: "white",
-          textAlign: "center",
-        }}
-      >
-        Template Register Page
-      </Text>
+      <View style={styles.container}>
+        <View
+          style={{
+            paddingVertical: 4,
+            marginBottom: 16,
+            borderRadius: 4,
+            width: "90%",
+            backgroundColor: colors.blue_1,
+          }}
+        />
+        <View style={styles.flex_row}>
+          <SignupIcon size={32} />
+          <Text style={styles.text_white_large}>Student Signup</Text>
+          <View style={{ paddingVertical: 8 }} />
+        </View>
+        <TextInput
+          style={styles.text_input}
+          placeholder="First Name"
+          placeholderTextColor="white"
+          value={user.first_name}
+          onChange={(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser({ ...user, first_name: e.nativeEvent.text });
+          }}
+        />
+        <View style={{ paddingVertical: 4 }} />
+        <TextInput
+          style={styles.text_input}
+          placeholder="Last Name"
+          placeholderTextColor="white"
+          value={user.last_name}
+          onChange={(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser({ ...user, last_name: e.nativeEvent.text });
+          }}
+        />
+        <View style={{ paddingVertical: 4 }} />
+        <TextInput
+          style={styles.text_input}
+          placeholder="USTP ID Number"
+          placeholderTextColor="white"
+          value={user.student_id_number}
+          onChange={(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            if (IsNumber(e.nativeEvent.text)) {
+              setUser({ ...user, student_id_number: e.nativeEvent.text });
+            } else if (!e.nativeEvent.text) {
+              setUser({ ...user, student_id_number: "" });
+            }
+          }}
+        />
+        <View style={{ paddingVertical: 4 }} />
+        <View style={{ paddingVertical: 4 }} />
+        <TextInput
+          style={styles.text_input}
+          placeholder="Username"
+          placeholderTextColor="white"
+          autoCapitalize={"none"}
+          value={user.username}
+          onChange={(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser({ ...user, username: e.nativeEvent.text });
+          }}
+        />
+        <View style={{ paddingVertical: 4 }} />
+        <TextInput
+          style={styles.text_input}
+          placeholder="Email"
+          placeholderTextColor="white"
+          autoCapitalize={"none"}
+          value={user.email}
+          onChange={(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser({ ...user, email: e.nativeEvent.text });
+          }}
+        />
+        <View style={{ paddingVertical: 4 }} />
+        <TextInput
+          style={styles.text_input}
+          placeholder="Password"
+          placeholderTextColor="white"
+          secureTextEntry={true}
+          value={user.password}
+          onChange={(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser({ ...user, password: e.nativeEvent.text });
+          }}
+        />
+        <View style={{ paddingVertical: 4 }} />
+        <Text style={styles.text_white_small}>{user.feedback}</Text>
+        <View style={{ paddingVertical: 4 }} />
+        <Button
+          onPress={async () => {
+            await UserRegister({
+              username: user.username,
+              email: user.email,
+              password: user.password,
+              student_id_number: user.student_id_number,
+              first_name: user.first_name,
+              last_name: user.last_name,
+            }).then((result) => {
+              console.log(result);
+              try {
+                setUser({
+                  ...user,
+                  feedback: ParseError(JSON.stringify(result[1])),
+                });
+              } catch {
+                setUser({
+                  ...user,
+                  first_name: "",
+                  last_name: "",
+                  student_id_number: "",
+                  username: "",
+                  email: "",
+                  password: "",
+                  feedback:
+                    "Success! An email has been sent to activate your account",
+                });
+              }
+            });
+            {
+            }
+          }}
+          color={colors.blue_3}
+        >
+          <Text style={styles.text_white_small}>Register</Text>
+        </Button>
+      </View>
     </View>
   );
 }

src/styles.tsx

@@ -8,6 +8,8 @@ export const colors = {
   blue_2: "#77ACC3",
   blue_3: "#1B5D79",
   text_default: "white",
+  text_error: "#e32d1e",
+  text_success: "green",
   icon_color: "white",
 };
 
@@ -25,6 +27,19 @@ const styles = StyleSheet.create({
     height: "100%",
     width: "100%",
   },
+  container: {
+    marginTop: "5%",
+    width: "92%",
+    borderRadius: 15,
+    backgroundColor: colors.blue_2,
+    alignItems: "center",
+    alignSelf: "center",
+    paddingTop: 32,
+    paddingBottom: 32,
+    justifyContent: "flex-start",
+    display: "flex",
+    flexDirection: "column",
+  },
   flex_row: {
     display: "flex",
     flexDirection: "row",
@@ -66,15 +81,23 @@ const styles = StyleSheet.create({
     textAlign: "center",
   },
   button_template: {
-    justifyContent: "flex-start",
+    justifyContent: "center",
     alignSelf: "center",
     alignItems: "center",
     display: "flex",
     flexDirection: "row",
-    margin: 8,
+    marginVertical: 4,
+    marginHorizontal: 8,
     padding: 8,
     borderRadius: 16,
   },
+  text_input: {
+    color: colors.text_default,
+    backgroundColor: colors.blue_1,
+    width: "50%",
+    padding: 10,
+    borderRadius: 8,
+  },
 });
 
 export default styles;