login page has been tried.

Author: zcomert

day-10/bs-store/src/App.js

@@ -13,6 +13,7 @@ import SimpleSnackbar from "./components/snackBar/SimpleSnackbar";
 import {useSelector} from "react-redux";
 import UpdateCategory from "./adminpages/categories/UpdateCategory";
 import AddBook from "./adminpages/books/AddBook"
+import Login from "./pages/login/Login";
 
 
 function App() {
@@ -31,6 +32,9 @@ function App() {
 
         <Route path='/admin/authors/list' element={<ListAuthor />} />
         <Route path='/admin/authors/add' element={<AddAuthor />} />
+        
+        <Route path='/auth/login' element={<Login />} />
+
         <Route path='/' element={<Home />} />
       </Routes>
 

day-10/bs-store/src/pages/login/Login.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { useFormik } from "formik";
+import { useDispatch, useSelector } from "react-redux";
+import { login } from "../../store/actions/authAction";
+import AuthService from "../../services/AuthService";
+export default function Login() {
+
+  const {user} = useSelector(state => state.auth)
+  const authDispatch = useDispatch();
+
+
+  
+  const { handleSubmit, handleChange, values } = useFormik({
+    initialValues: {
+      userName: "",
+      password: "",
+    },
+    onSubmit: async (values) => {
+      console.log(values);
+      const authService = new AuthService();
+      const resp = await authService.login(values);
+      console.log(resp);
+      if(resp.status===200){
+        authDispatch(login(resp));
+      }
+    },
+  });
+
+
+  return (
+    <div>
+      <h1>Login</h1>
+      <form onSubmit={handleSubmit}>
+        <input id='userName' name='userName' type='text' onChange={handleChange} />
+        <input id='password' name='password' type='password' onChange={handleChange} />
+        <input type='submit' value='login'></input>
+      </form>
+      {JSON.stringify(values)}
+    </div>
+  );
+}

day-10/bs-store/src/services/AuthService.js

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+class AuthService {
+  constructor() {
+    this.baseUrl = `${process.env.REACT_APP_BASE_ENDPOINT}/auth`;
+  }
+
+  async login(login) {
+    const url  = `${this.baseUrl}/login`
+    console.log(url)
+    return await axios.post(url,login).then((resp) => resp);
+  }
+}
+
+export default AuthService;

day-10/bs-store/src/services/BookService.js

@@ -7,7 +7,14 @@ class BookService{
     }
 
     async getAllBooks(){
-        return await axios.get(this.baseUrl).then(resp => resp.data);
+        return await axios
+        .get(this.baseUrl,{
+            headers:{
+                'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1dGhvcml0aWVzIjpbeyJhdXRob3JpdHkiOiJib29rOmRlbGV0ZSJ9LHsiYXV0aG9yaXR5IjoiYm9vazpwb3N0In0seyJhdXRob3JpdHkiOiJib29rOmdldCJ9LHsiYXV0aG9yaXR5IjoiUk9MRV9BRE1JTiJ9LHsiYXV0aG9yaXR5IjoiYm9vazpwdXQifV0sImlhdCI6MTY1OTQ2NTA4MiwiZXhwIjoxNjU5NDY4NjgyfQ.VED0vLYOAJXu3IEVlA6RFN2aOw3vPUB655yaLptSgIXeyWkX9Sfg23X2CoJVgnQ-xpdMjdOO-9mwGy7yn4NIrg'
+            }
+        })
+        .then(resp => resp.data)
+        .catch(err => console.log(err.status));
     }
 
     async getOneBook(id){

day-10/bs-store/src/store/actions/authAction.js

@@ -0,0 +1,14 @@
+import AuthService from "../../services/AuthService";
+
+export const LOGIN = "LOGIN";
+
+const authService = new AuthService();
+
+export function login(login) {
+  return function (dispatch) {
+    authService
+      .login(login)
+      .then((resp) => resp.data)
+      .then((resp) => dispatch({ type: LOGIN, payload: resp }));
+  };
+}

day-10/bs-store/src/store/initialValues/authItems.js

@@ -0,0 +1,8 @@
+export const user = {
+    userId:0,
+    userName:'',
+    firstName:'',
+    lastName:'',
+    accessToken:'',
+    refreshToken:''
+}

day-10/bs-store/src/store/reducers/authReducer.js

@@ -0,0 +1,27 @@
+import { LOGIN } from "../actions/authAction";
+import {user} from "../initialValues/authItems";
+const initialValues = {
+    user
+}
+
+function authReducer(state=initialValues, {type,payload}){
+    switch (type) {
+        case LOGIN:
+            return{
+                ...state,
+                user : {
+                    userId : payload.userId,
+                    userName:payload.userName,
+                    firstName:payload.firstName,
+                    lastName:payload.lastName,
+                    accessToken:payload.accessToken,
+                    refreshToken:payload.refreshToken
+                }
+            }
+        default:
+            return{
+                ...state
+            };
+    }
+}
+export default authReducer;

day-10/bs-store/src/store/rootReducer.js

@@ -2,11 +2,13 @@ import { combineReducers } from "redux";
 import settingReducer from "./reducers/settingReducer";
 import categoryReducer from "./reducers/categoryReducer";
 import bookReducer from "./reducers/bookReducer";
+import authReducer from "./reducers/authReducer";
 
 const rootReducer = combineReducers({
   setting: settingReducer,
   category: categoryReducer,
   book: bookReducer,
+  auth: authReducer
 });
 
 export default rootReducer;