From c97d12e669232f54a01726737dbe5077be38adcd Mon Sep 17 00:00:00 2001 From: Jean Jacques Avril Date: Thu, 10 Mar 2022 16:35:52 +0100 Subject: [PATCH] api login implemented --- size-plugin.json | 2 +- src/api/index.js | 23 ++++++++++------ src/components/app.js | 2 +- src/route/login/index.jsx | 28 ++++++++++--------- src/route/users/index.jsx | 57 +++++++++++++++++++-------------------- 5 files changed, 60 insertions(+), 52 deletions(-) diff --git a/size-plugin.json b/size-plugin.json index 5907287..7253210 100644 --- a/size-plugin.json +++ b/size-plugin.json @@ -1 +1 @@ -[{"timestamp":1646755354217,"files":[{"filename":"bundle.*****.esm.js","previous":9839,"size":0,"diff":-9839},{"filename":"polyfills.*****.esm.js","previous":2187,"size":0,"diff":-2187},{"filename":"sw.js","previous":10597,"size":0,"diff":-10597},{"filename":"sw-esm.js","previous":10603,"size":0,"diff":-10603},{"filename":"polyfills.058fb.js","previous":2288,"size":0,"diff":-2288},{"filename":"index.html","previous":521,"size":487,"diff":-34},{"filename":"200.html","previous":521,"size":0,"diff":-521},{"filename":"bundle.45d14.css","previous":1691,"size":1691,"diff":0},{"filename":"bundle.caa2d.js","previous":12219,"size":0,"diff":-12219},{"filename":"bundle.*****.js","previous":0,"size":12153,"diff":12153},{"filename":"polyfills.*****.js","previous":0,"size":2288,"diff":2288}]},{"timestamp":1646755194517,"files":[{"filename":"bundle.2a54a.css","previous":1709,"size":0,"diff":-1709},{"filename":"bundle.*****.esm.js","previous":9842,"size":9839,"diff":-3},{"filename":"polyfills.*****.esm.js","previous":2187,"size":2187,"diff":0},{"filename":"sw.js","previous":10595,"size":10597,"diff":2},{"filename":"sw-esm.js","previous":10600,"size":10603,"diff":3},{"filename":"polyfills.058fb.js","previous":2288,"size":2288,"diff":0},{"filename":"index.html","previous":536,"size":521,"diff":-15},{"filename":"200.html","previous":536,"size":521,"diff":-15},{"filename":"bundle.3030b.js","previous":12224,"size":0,"diff":-12224},{"filename":"bundle.45d14.css","previous":0,"size":1691,"diff":1691},{"filename":"bundle.caa2d.js","previous":0,"size":12219,"diff":12219}]},{"timestamp":1646755054393,"files":[{"filename":"bundle.2a54a.css","previous":1709,"size":1709,"diff":0},{"filename":"bundle.*****.esm.js","previous":9856,"size":9842,"diff":-14},{"filename":"polyfills.*****.esm.js","previous":2187,"size":2187,"diff":0},{"filename":"sw.js","previous":10599,"size":10595,"diff":-4},{"filename":"sw-esm.js","previous":10603,"size":10600,"diff":-3},{"filename":"bundle.1a7a6.js","previous":11947,"size":0,"diff":-11947},{"filename":"polyfills.058fb.js","previous":2288,"size":2288,"diff":0},{"filename":"index.html","previous":536,"size":536,"diff":0},{"filename":"200.html","previous":536,"size":536,"diff":0},{"filename":"bundle.3030b.js","previous":0,"size":12224,"diff":12224}]},{"timestamp":1646751614979,"files":[{"filename":"bundle.2a54a.css","previous":0,"size":1709,"diff":1709},{"filename":"bundle.*****.esm.js","previous":0,"size":9856,"diff":9856},{"filename":"polyfills.*****.esm.js","previous":0,"size":2187,"diff":2187},{"filename":"sw.js","previous":0,"size":10599,"diff":10599},{"filename":"sw-esm.js","previous":0,"size":10603,"diff":10603},{"filename":"bundle.1a7a6.js","previous":0,"size":11947,"diff":11947},{"filename":"polyfills.058fb.js","previous":0,"size":2288,"diff":2288},{"filename":"index.html","previous":0,"size":536,"diff":536},{"filename":"200.html","previous":0,"size":536,"diff":536}]}] +[{"timestamp":1646924506348,"files":[{"filename":"index.html","previous":487,"size":487,"diff":0},{"filename":"bundle.45d14.css","previous":1691,"size":1691,"diff":0},{"filename":"bundle.*****.js","previous":12153,"size":14680,"diff":2527},{"filename":"polyfills.*****.js","previous":2288,"size":2288,"diff":0}]},{"timestamp":1646755354217,"files":[{"filename":"bundle.*****.esm.js","previous":9839,"size":0,"diff":-9839},{"filename":"polyfills.*****.esm.js","previous":2187,"size":0,"diff":-2187},{"filename":"sw.js","previous":10597,"size":0,"diff":-10597},{"filename":"sw-esm.js","previous":10603,"size":0,"diff":-10603},{"filename":"polyfills.058fb.js","previous":2288,"size":0,"diff":-2288},{"filename":"index.html","previous":521,"size":487,"diff":-34},{"filename":"200.html","previous":521,"size":0,"diff":-521},{"filename":"bundle.45d14.css","previous":1691,"size":1691,"diff":0},{"filename":"bundle.caa2d.js","previous":12219,"size":0,"diff":-12219},{"filename":"bundle.*****.js","previous":0,"size":12153,"diff":12153},{"filename":"polyfills.*****.js","previous":0,"size":2288,"diff":2288}]},{"timestamp":1646755194517,"files":[{"filename":"bundle.2a54a.css","previous":1709,"size":0,"diff":-1709},{"filename":"bundle.*****.esm.js","previous":9842,"size":9839,"diff":-3},{"filename":"polyfills.*****.esm.js","previous":2187,"size":2187,"diff":0},{"filename":"sw.js","previous":10595,"size":10597,"diff":2},{"filename":"sw-esm.js","previous":10600,"size":10603,"diff":3},{"filename":"polyfills.058fb.js","previous":2288,"size":2288,"diff":0},{"filename":"index.html","previous":536,"size":521,"diff":-15},{"filename":"200.html","previous":536,"size":521,"diff":-15},{"filename":"bundle.3030b.js","previous":12224,"size":0,"diff":-12224},{"filename":"bundle.45d14.css","previous":0,"size":1691,"diff":1691},{"filename":"bundle.caa2d.js","previous":0,"size":12219,"diff":12219}]},{"timestamp":1646755054393,"files":[{"filename":"bundle.2a54a.css","previous":1709,"size":1709,"diff":0},{"filename":"bundle.*****.esm.js","previous":9856,"size":9842,"diff":-14},{"filename":"polyfills.*****.esm.js","previous":2187,"size":2187,"diff":0},{"filename":"sw.js","previous":10599,"size":10595,"diff":-4},{"filename":"sw-esm.js","previous":10603,"size":10600,"diff":-3},{"filename":"bundle.1a7a6.js","previous":11947,"size":0,"diff":-11947},{"filename":"polyfills.058fb.js","previous":2288,"size":2288,"diff":0},{"filename":"index.html","previous":536,"size":536,"diff":0},{"filename":"200.html","previous":536,"size":536,"diff":0},{"filename":"bundle.3030b.js","previous":0,"size":12224,"diff":12224}]},{"timestamp":1646751614979,"files":[{"filename":"bundle.2a54a.css","previous":0,"size":1709,"diff":1709},{"filename":"bundle.*****.esm.js","previous":0,"size":9856,"diff":9856},{"filename":"polyfills.*****.esm.js","previous":0,"size":2187,"diff":2187},{"filename":"sw.js","previous":0,"size":10599,"diff":10599},{"filename":"sw-esm.js","previous":0,"size":10603,"diff":10603},{"filename":"bundle.1a7a6.js","previous":0,"size":11947,"diff":11947},{"filename":"polyfills.058fb.js","previous":0,"size":2288,"diff":2288},{"filename":"index.html","previous":0,"size":536,"diff":536},{"filename":"200.html","previous":0,"size":536,"diff":536}]}] diff --git a/src/api/index.js b/src/api/index.js index 9fcce80..8fd7050 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,6 +1,12 @@ const server = 'http://192.168.4.22' -function login(username,password){ - return 'DUMMYTOKEN'; + +async function login(username,password){ + let formData = new FormData(); + formData.append('username',username) + formData.append('password',password); + formData.append('action','login'); + const resp = await fetch(`${server}/api/auth`,{method: 'POST',mode: 'cors',body:formData }).then(resp=>resp.text()) + return resp; } function logout(){ return 'DUMMYTOKEN'; @@ -8,13 +14,14 @@ function logout(){ function checkAuth(token){ return token==='DUMMYTOKEN'; } - -async function fetchdb(token){ +async function fetchdb(token='azif7eqCl5'){ //fetch(`${server}/api/userdb`).then() - let xmlHttp = new XMLHttpRequest(); - xmlHttp.open( "GET", `${server}/api/userdb`, false ); // false for synchronous request - xmlHttp.send( null ); - return parsedb(xmlHttp.responseText); + //let xmlHttp = new XMLHttpRequest(); + //xmlHttp.open( "GET", `${server}/api/userdb`, false ); // false for synchronous request + //xmlHttp.send( null ); + const resp = await fetch(`${server}/api/userdb`,{method: 'GET',mode: 'cors',headers:{Authentification:token}}) + .then(resp=>resp.text()).then(text=>parsedb(text)) + return resp; } function parsedb(raw){ diff --git a/src/components/app.js b/src/components/app.js index efa761f..44be02e 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -8,7 +8,7 @@ import { AppStateProvider, UserTableProvider, menuReducer, sessionReducer, userT function App() { // useReducer const menu = useReducer(menuReducer, false); - const session = useReducer(sessionReducer, { active: true }); + const session = useReducer(sessionReducer, { active: false }); const [usertable, userreducer] = useReducer(userTableReducer, []); this.menu_items = [ diff --git a/src/route/login/index.jsx b/src/route/login/index.jsx index b2ec6ac..35b9b41 100644 --- a/src/route/login/index.jsx +++ b/src/route/login/index.jsx @@ -3,7 +3,7 @@ import { route } from 'preact-router'; import { useContext,useState } from 'preact/hooks'; import AppState from '../../store/AppState'; import Breadcrumbs from '../../components/breadcrumbs'; - +import api from '../../api' function Login() { let [sessiondata, setsession]= useContext(AppState).session; const [val, set] = useState({ username: '', password: '', error: null }); @@ -12,19 +12,21 @@ function Login() { route('/', true); function onSubmit(e) { e.preventDefault(); - //sucess - if (val.username === 'admin') { - let newsession = { - type: 'start', - username: 'affe', - token: 'dsf4w3qr' + api.login(val.username, val.password).then(token=>{ + if (token!='failed!') { + let newsession = { + type: 'start', + username: val.username, + token + } + setsession(newsession); } - setsession(newsession); - } - else { - set({ ...val, error: "user" }); - } - set({ username: '', password: '' }); + else { + set({ ...val, error: "user" }); + } + set({ username: '', password: '' }); + }) + } return (
diff --git a/src/route/users/index.jsx b/src/route/users/index.jsx index feb1212..ec2843d 100644 --- a/src/route/users/index.jsx +++ b/src/route/users/index.jsx @@ -3,38 +3,38 @@ import { UserList, Pageselector, Breadcrumbs } from "../../components"; import api from '../../api' import { route } from 'preact-router'; import { useContext, useEffect, useState } from "preact/hooks"; -import { UserTable } from "../../store"; -function Users({pageid}) { - const [viewstate, setview] = useState({limit:100, page:1, pages:null}) - const { usertable, userreducer } = useContext(UserTable) - const setPage = (e)=>{ +import AppState, { UserTable } from "../../store"; +function Users({ pageid }) { + const [viewstate, setview] = useState({ limit: 100, page: 1, pages: null }) + const { usertable, userreducer } = useContext(UserTable); + let [sessiondata, setsession] = useContext(AppState).session; + const setPage = (e) => { e.preventDefault(); console.log(e) let page = e.target.text; - setview({...viewstate, page}) + setview({ ...viewstate, page }) } - if (usertable.length === 0) - api.fetchdb().then(imported => { - let action = { type: 'import', imported }; - userreducer(action); - }); + + + useEffect(() => { - if (usertable.length === 0) - api.fetchdb().then(imported => { + if (usertable === undefined) + console.log("TOKEN"); + console.log(sessiondata.token); + api.fetchdb(sessiondata.token).then(imported => { let action = { type: 'import', imported }; userreducer(action); - }) - - - }); - useEffect(()=>{ - setview({...viewstate,pages:Math.ceil(usertable.length/viewstate.limit)}); + }); + },[sessiondata]); + + useEffect(() => { + setview({ ...viewstate, pages: Math.ceil(usertable.length / viewstate.limit) }); console.log("New View effect") - },[usertable]) - useEffect(()=>{ - if(pageid&&!isNaN(pageid)) - setview({...viewstate, page: pageid}) - },[pageid]) + }, [usertable]) + useEffect(() => { + if (pageid && !isNaN(pageid)) + setview({ ...viewstate, page: pageid }) + }, [pageid]) const deleteUser = (user) => { let action = { type: 'delete', @@ -42,16 +42,15 @@ function Users({pageid}) { } userreducer(action) } - const calculateView=()=>{ - let start=viewstate.limit*(viewstate.page-1); - let end=viewstate.limit*(viewstate.page); - return {start, end} + const calculateView = () => { + let start = viewstate.limit * (viewstate.page - 1); + let end = viewstate.limit * (viewstate.page); + return { start, end } } const editUser = (user) => { route(`/edituser/${user.uid}`); } const navigation = ["Users"]; - console.log(viewstate); // return (