diff --git a/App.tsx b/App.tsx index 3ec14e5..f4bebf1 100644 --- a/App.tsx +++ b/App.tsx @@ -10,6 +10,7 @@ import DrawerScreenSettings from "./src/components/DrawerSettings/DrawerScreenSe import Home from "./src/routes/Home/Home"; import Login from "./src/routes/Login/Login"; import Register from "./src/routes/Register/Register"; +import Onboarding from "./src/routes/Onboarding/Onboarding"; const Drawer = createDrawerNavigator(); @@ -25,6 +26,7 @@ export default function App() { + diff --git a/src/components/Api/Api.tsx b/src/components/Api/Api.tsx index 417bcf1..d9489a9 100644 --- a/src/components/Api/Api.tsx +++ b/src/components/Api/Api.tsx @@ -37,19 +37,41 @@ export function UserRegister(register: RegistrationParams) { export function UserLogin(user: LoginParams) { return instance - .post("/api/v1/accounts/token/login/", user) + .post("/api/v1/accounts/jwt/create/", user) .then(async (response) => { - AsyncStorage.setItem("token", JSON.stringify(response.data.auth_token)); - return [true, JSON.stringify(response.data.auth_token)]; + console.log(response.data.access, response.data.refresh); + AsyncStorage.setItem( + "access_token", + JSON.stringify(response.data.access) + ); + AsyncStorage.setItem( + "refresh_token", + JSON.stringify(response.data.refresh) + ); + return [ + true, + JSON.stringify(response.data.access), + JSON.stringify(response.data.refresh), + ]; }) .catch((error) => { - console.log( - "Login Failed: " + error.response.status + " " + error.response.data - ); + console.log("Login Failed:" + error.response.data); return [false, error.response.data]; }); } +export function TokenRefresh(token: string) { + return instance + .post("/api/v1/accounts/jwt/refresh/", token) + .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 diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 86ba814..6a843c7 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Text, Pressable, GestureResponderEvent } from "react-native"; +import { Pressable, GestureResponderEvent } from "react-native"; import styles from "../../styles"; export interface props { diff --git a/src/components/ParseError/ParseError.tsx b/src/components/ParseError/ParseError.tsx index defb5fd..ab55ea6 100644 --- a/src/components/ParseError/ParseError.tsx +++ b/src/components/ParseError/ParseError.tsx @@ -1,18 +1,24 @@ export default function ParseError(text: string) { - return text - .replaceAll(/[{}()"]/g, " ") - .replaceAll(/,/g, "\n") - .replaceAll("[", "") - .replaceAll("]", "") - .replaceAll(".", ""); + if (text) { + return text + .replaceAll(/[{}()"]/g, " ") + .replaceAll(/,/g, "\n") + .replaceAll("[", "") + .replaceAll("]", "") + .replaceAll(".", ""); + } + return ""; } export function ParseLoginError(text: string) { - return text - .replaceAll(/[{}()"]/g, " ") - .replaceAll(/,/g, "\n") - .replaceAll("[", "") - .replaceAll("]", "") - .replaceAll(".", "") - .replaceAll("non_field_errors", ""); + if (text) { + return text + .replaceAll(/[{}()"]/g, " ") + .replaceAll(/,/g, "\n") + .replaceAll("[", "") + .replaceAll("]", "") + .replaceAll(".", "") + .replaceAll("non_field_errors", ""); + } + return ""; } diff --git a/src/components/Validation/Validation.tsx b/src/components/Validation/Validation.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/features/redux/slices/AuthSlice/AuthSlice.tsx b/src/features/redux/slices/AuthSlice/AuthSlice.tsx index 5079751..39fa0e2 100644 --- a/src/features/redux/slices/AuthSlice/AuthSlice.tsx +++ b/src/features/redux/slices/AuthSlice/AuthSlice.tsx @@ -8,12 +8,14 @@ export const AuthSlice = createSlice({ uid: "", username: "", full_name: "", - token: "", + refresh_token: "", + access_token: "", }, }, reducers: { setToken: (state, action) => { - state.creds.token = action.payload; + state.creds.access_token = action.payload.access_token; + state.creds.refresh_token = action.payload.refresh_token; }, setUser: (state, action) => { state.creds = { @@ -21,7 +23,8 @@ export const AuthSlice = createSlice({ uid: action.payload.uid, username: action.payload.username, full_name: action.payload.full_name, - token: action.payload.token, + access_token: action.payload.access_token, + refresh_token: action.payload.refresh_token, }; }, clear: (state) => { @@ -30,7 +33,8 @@ export const AuthSlice = createSlice({ uid: "", username: "", full_name: "", - token: "", + refresh_token: "", + access_token: "", }; }, }, diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 69978ac..2de0346 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -3,6 +3,10 @@ import styles from "../../styles"; import { View, Text } from "react-native"; import { useSelector } from "react-redux"; import { RootState } from "../../features/redux/Store/Store"; +import Button from "../../components/Button/Button"; +import { UserLogin } from "../../components/Api/Api"; +import { colors } from "../../styles"; +import axios from "axios"; export default function Home() { const creds = useSelector((state: RootState) => state.auth.creds); @@ -10,7 +14,6 @@ export default function Home() { Template Homepage {JSON.stringify(creds)} - Token: {creds.token} ); } diff --git a/src/routes/Login/Login.tsx b/src/routes/Login/Login.tsx index 53e0851..73c02d1 100644 --- a/src/routes/Login/Login.tsx +++ b/src/routes/Login/Login.tsx @@ -7,8 +7,7 @@ import { NativeSyntheticEvent, TextInputChangeEventData, } from "react-native"; -import { useSelector, useDispatch } from "react-redux"; -import { RootState } from "../../features/redux/Store/Store"; +import { useDispatch } from "react-redux"; import { setToken } from "../../features/redux/slices/AuthSlice/AuthSlice"; import { colors } from "../../styles"; import { useState } from "react"; @@ -22,7 +21,6 @@ import { ParseLoginError } from "../../components/ParseError/ParseError"; export default function Login() { const navigation = useNavigation(); const dispatch = useDispatch(); - const creds = useSelector((state: RootState) => state.auth.creds); const [user, setUser] = useState({ username: "", password: "", @@ -82,9 +80,19 @@ 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"); + console.log( + "Access Token:", + result[1], + "\nRefresh Token:", + result[2] + ); + dispatch( + setToken({ + access_token: result[1], + refresh_token: result[2], + }) + ); + navigation.navigate("Onboarding"); } else { setUser({ ...user, diff --git a/src/routes/Onboarding/Onboarding.tsx b/src/routes/Onboarding/Onboarding.tsx index e7306e5..70baf56 100644 --- a/src/routes/Onboarding/Onboarding.tsx +++ b/src/routes/Onboarding/Onboarding.tsx @@ -1,109 +1,16 @@ 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 { View, Text } from "react-native"; 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(); // const dispatch = useDispatch(); // const creds = useSelector((state: RootState) => state.auth.creds); - const [user, setUser] = useState({ - username: "", - password: "", - error: "", - }); return ( - - - - Student Login - - - - - ): void => { - setUser({ ...user, username: e.nativeEvent.text }); - }} - /> - - - ): void => { - setUser({ ...user, password: e.nativeEvent.text }); - }} - /> - - {user.error} - - - + Template Onboarding Page );