api login implemented

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}]}]

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='azif7eqCl5'){
-async function fetchdb(token){
     //fetch(`${server}/api/userdb`).then()
-    let xmlHttp = new XMLHttpRequest();
+    //let xmlHttp = new XMLHttpRequest();
-    xmlHttp.open( "GET", `${server}/api/userdb`, false ); // false for synchronous request
+    //xmlHttp.open( "GET", `${server}/api/userdb`, false ); // false for synchronous request
-    xmlHttp.send( null );
+    //xmlHttp.send( null );
-    return parsedb(xmlHttp.responseText);
+    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){

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 = [

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,12 +12,12 @@ function Login() {
         route('/', true);
     function onSubmit(e) {
         e.preventDefault();
-        //sucess
+        api.login(val.username, val.password).then(token=>{
-        if (val.username === 'admin') {
+            if (token!='failed!') {
                 let newsession = {
                     type: 'start',
-                username: 'affe',
+                    username: val.username,
-                token: 'dsf4w3qr'
+                    token
                 }
                 setsession(newsession);
             }
@@ -25,6 +25,8 @@ function Login() {
                 set({ ...val, error: "user" });
             }
             set({ username: '', password: '' });    
+        })
+
     }
     return (
         <div class="container">

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";
+import AppState, { UserTable } from "../../store";
-function Users({pageid}) {
+function Users({ pageid }) {
-    const [viewstate, setview] = useState({limit:100, page:1, pages:null})
+    const [viewstate, setview] = useState({ limit: 100, page: 1, pages: null })
-    const { usertable, userreducer } = useContext(UserTable)
+    const { usertable, userreducer } = useContext(UserTable);
-    const setPage = (e)=>{
+    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)
+        if (usertable === undefined)
-            api.fetchdb().then(imported => {
+        console.log("TOKEN");
+            console.log(sessiondata.token);
+            api.fetchdb(sessiondata.token).then(imported => {
                 let action = { type: 'import', imported };
                 userreducer(action);
-            })
-            
-            
             });
-    useEffect(()=>{
+    },[sessiondata]);
-        setview({...viewstate,pages:Math.ceil(usertable.length/viewstate.limit)});
+
+    useEffect(() => {
+        setview({ ...viewstate, pages: Math.ceil(usertable.length / viewstate.limit) });
         console.log("New View effect")
-    },[usertable])
+    }, [usertable])
-    useEffect(()=>{
+    useEffect(() => {
-        if(pageid&&!isNaN(pageid))
+        if (pageid && !isNaN(pageid))
-            setview({...viewstate, page: pageid})
+            setview({ ...viewstate, page: pageid })
-    },[pageid])
+    }, [pageid])
     const deleteUser = (user) => {
         let action = {
             type: 'delete',
@@ -42,16 +42,15 @@ function Users({pageid}) {
         }
         userreducer(action)
     }
-    const calculateView=()=>{
+    const calculateView = () => {
-        let start=viewstate.limit*(viewstate.page-1);
+        let start = viewstate.limit * (viewstate.page - 1);
-         let end=viewstate.limit*(viewstate.page);
+        let end = viewstate.limit * (viewstate.page);
-        return {start, end}
+        return { start, end }
     }
     const editUser = (user) => {
         route(`/edituser/${user.uid}`);
     }
     const navigation = ["Users"];
-    console.log(viewstate);
     //
     return (
         <div class="container">