keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2025-05-17 20:08:07 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Switch to JSON webtoken login format

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-07-03 23:19:36 +08:00
parent 4faf222b52
commit 11c4f0c264
9 changed files with 78 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/routes/Home/Home.tsx
View file

@ -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() {
<View style={styles.background}>
<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>
);
}

20
src/routes/Login/Login.tsx
View file

@ -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<RootDrawerParamList>();
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,

97
src/routes/Onboarding/Onboarding.tsx
View file

@ -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<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>
<Text style={styles.text_white_medium}>Template Onboarding Page</Text>
</View>
</View>
);