keannu125/React-NotesApp
1
0
Fork 0
mirror of https://github.com/lemeow125/React-NotesApp.git synced 2024-11-17 06:29:28 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added functional user login

Browse source
This commit is contained in:
keannu125 2023-02-26 23:50:13 +08:00
parent 352823a329
commit 4caf7479fd
3 changed files with 19 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/Components/Api/Api.tsx
View file

@ -1,5 +1,7 @@
import axios from "axios"; import axios from "axios";
import { useSelector, useDispatch } from "react-redux";
// Note APIs
export function GetNotes() { export function GetNotes() {
return axios.get("http://localhost:8000/api/v1/notes/").then((response) => { return axios.get("http://localhost:8000/api/v1/notes/").then((response) => {
return response.data; return response.data;
@ -23,6 +25,8 @@ export function DeleteNote(id: number) {
return axios.delete("http://localhost:8000/api/v1/notes/" + id + "/"); return axios.delete("http://localhost:8000/api/v1/notes/" + id + "/");
} }
// User APIs
export interface user { export interface user {
username: string; username: string;
password: string; password: string;
@ -33,7 +37,10 @@ export function UserLogin(user: user) {
.post("http://localhost:8000/api/v1/accounts/token/login/", user) .post("http://localhost:8000/api/v1/accounts/token/login/", user)
.then(async (response) => { .then(async (response) => {
localStorage.setItem("token", JSON.stringify(response.data.auth_token)); localStorage.setItem("token", JSON.stringify(response.data.auth_token));
console.log("Stored: ", JSON.parse(localStorage.getItem("token") || "")); console.log(
"Login Success! Stored Token: ",
JSON.parse(localStorage.getItem("token") || "")
);
return true; return true;
}) })
.catch((error) => { .catch((error) => {

2
src/Components/LoginButton/LoginButton.tsx
View file

@ -2,7 +2,7 @@ import * as React from "react";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import styles from "../../styles"; import styles from "../../styles";
import { useSelector, useDispatch } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { SetLoggedOut } from "../../Features/Redux/Slices/LoginSlice/LoginSlice"; import { SetLoggedOut } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
import { UnsetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice"; import { UnsetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";

18
src/Routes/Login/Login.tsx
View file

@ -5,10 +5,11 @@ import { useNavigate } from "react-router-dom";
import Header from "../../Components/Header/Header"; import Header from "../../Components/Header/Header";
import { useState } from "react"; import { useState } from "react";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { UserLogin, UserInfo } from "../../Components/Api/Api"; import { UserInfo, UserLogin } from "../../Components/Api/Api";
import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice"; import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
export default function Login() { export default function Login() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -18,7 +19,6 @@ export default function Login() {
password: "", password: "",
}); });
const [error, setError] = useState(""); const [error, setError] = useState("");
return ( return (
<div style={styles.background}> <div style={styles.background}>
<Header /> <Header />
@ -51,13 +51,13 @@ export default function Login() {
style={styles.button_green} style={styles.button_green}
variant="contained" variant="contained"
onClick={async () => { onClick={async () => {
setUser({
username: "",
password: "",
});
if (await UserLogin(user)) { if (await UserLogin(user)) {
setUser({ await dispatch(SetLoggedIn());
username: "", await dispatch(SetUser(await UserInfo()));
password: "",
});
dispatch(SetLoggedIn());
dispatch(SetUser(await UserInfo()));
navigate("/"); navigate("/");
} else { } else {
setError("Invalid Login"); setError("Invalid Login");