From 4faf222b52667a109b62b66cb2c9a8b766af0e0b Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Mon, 3 Jul 2023 22:40:58 +0800
Subject: [PATCH] Polished login

---
 src/components/Api/Api.tsx                    |   2 +-
 .../redux/slices/AuthSlice/AuthSlice.tsx      |   2 +-
 src/routes/Home/Home.tsx                      |  16 +--
 src/routes/Login/Login.tsx                    |  11 +-
 src/routes/Onboarding/Onboarding.tsx          | 110 ++++++++++++++++++
 5 files changed, 123 insertions(+), 18 deletions(-)
 create mode 100644 src/routes/Onboarding/Onboarding.tsx

diff --git a/src/components/Api/Api.tsx b/src/components/Api/Api.tsx
index 797499a..417bcf1 100644
--- a/src/components/Api/Api.tsx
+++ b/src/components/Api/Api.tsx
@@ -40,7 +40,7 @@ export function UserLogin(user: LoginParams) {
     .post("/api/v1/accounts/token/login/", user)
     .then(async (response) => {
       AsyncStorage.setItem("token", JSON.stringify(response.data.auth_token));
-      return [true];
+      return [true, JSON.stringify(response.data.auth_token)];
     })
     .catch((error) => {
       console.log(
diff --git a/src/features/redux/slices/AuthSlice/AuthSlice.tsx b/src/features/redux/slices/AuthSlice/AuthSlice.tsx
index 578f20c..5079751 100644
--- a/src/features/redux/slices/AuthSlice/AuthSlice.tsx
+++ b/src/features/redux/slices/AuthSlice/AuthSlice.tsx
@@ -13,7 +13,7 @@ export const AuthSlice = createSlice({
   },
   reducers: {
     setToken: (state, action) => {
-      state.creds.token = action.payload.token;
+      state.creds.token = action.payload;
     },
     setUser: (state, action) => {
       state.creds = {
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index 42192de..69978ac 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -1,20 +1,16 @@
 import * as React from "react";
 import styles from "../../styles";
-import { font_sizes } from "../../styles";
 import { View, Text } from "react-native";
+import { useSelector } from "react-redux";
+import { RootState } from "../../features/redux/Store/Store";
 
 export default function Home() {
+  const creds = useSelector((state: RootState) => state.auth.creds);
   return (
     <View style={styles.background}>
-      <Text
-        style={{
-          fontSize: font_sizes.large,
-          color: "white",
-          textAlign: "center",
-        }}
-      >
-        Template Homepage
-      </Text>
+      <Text style={styles.text_white_large}>Template Homepage</Text>
+      <Text style={styles.text_white_tiny}>{JSON.stringify(creds)}</Text>
+      <Text style={styles.text_white_tiny}>Token: {creds.token}</Text>
     </View>
   );
 }
diff --git a/src/routes/Login/Login.tsx b/src/routes/Login/Login.tsx
index 4d4510e..53e0851 100644
--- a/src/routes/Login/Login.tsx
+++ b/src/routes/Login/Login.tsx
@@ -9,10 +9,7 @@ import {
 } 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 { setToken } from "../../features/redux/slices/AuthSlice/AuthSlice";
 import { colors } from "../../styles";
 import { useState } from "react";
 import LoginIcon from "../../icons/LoginIcon/LoginIcon";
@@ -24,8 +21,8 @@ import { ParseLoginError } from "../../components/ParseError/ParseError";
 
 export default function Login() {
   const navigation = useNavigation<RootDrawerParamList>();
-  // const dispatch = useDispatch();
-  // const creds = useSelector((state: RootState) => state.auth.creds);
+  const dispatch = useDispatch();
+  const creds = useSelector((state: RootState) => state.auth.creds);
   const [user, setUser] = useState({
     username: "",
     password: "",
@@ -85,6 +82,8 @@ export default function Login() {
             }).then((result) => {
               if (result[0]) {
                 setUser({ ...user, username: "", password: "", error: "" });
+                console.log("Token:", result[1]);
+                dispatch(setToken(result[1]));
                 navigation.navigate("Home");
               } else {
                 setUser({
diff --git a/src/routes/Onboarding/Onboarding.tsx b/src/routes/Onboarding/Onboarding.tsx
new file mode 100644
index 0000000..e7306e5
--- /dev/null
+++ b/src/routes/Onboarding/Onboarding.tsx
@@ -0,0 +1,110 @@
+import * as React from "react";
+import styles from "../../styles";
+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";
+import { UserLogin } from "../../components/Api/Api";
+import { ParseLoginError } from "../../components/ParseError/ParseError";
+
+export default function Onboarding() {
+  const navigation = useNavigation<RootDrawerParamList>();
+  // const dispatch = useDispatch();
+  // const creds = useSelector((state: RootState) => state.auth.creds);
+  const [user, setUser] = useState({
+    username: "",
+    password: "",
+    error: "",
+  });
+  return (
+    <View style={styles.background}>
+      <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="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="Password"
+          placeholderTextColor="white"
+          secureTextEntry={true}
+          value={user.password}
+          onChange={(
+            e: NativeSyntheticEvent<TextInputChangeEventData>
+          ): void => {
+            setUser({ ...user, password: e.nativeEvent.text });
+          }}
+        />
+        <View style={{ paddingVertical: 2 }} />
+        <Text style={styles.text_white_small}>{user.error}</Text>
+        <View style={{ paddingVertical: 4 }} />
+        <Button
+          onPress={async () => {
+            await UserLogin({
+              username: user.username,
+              password: user.password,
+            }).then((result) => {
+              if (result[0]) {
+                setUser({ ...user, username: "", password: "", error: "" });
+                navigation.navigate("Home");
+              } else {
+                setUser({
+                  ...user,
+                  error: ParseLoginError(JSON.stringify(result[1])),
+                });
+              }
+            });
+          }}
+          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>
+  );
+}