basic state setup

src/components/Pageselector/index.jsx

@@ -4,18 +4,16 @@ import { h } from "preact";
 
 
 const Pageselector = (props) => {
-
+    var items = [];
-    let start = 1;
+    if(!isNaN(props.start)&&!isNaN(props.end)&&!isNaN(props.current))
-    let end = 7;
+    for(var i=props.start; i<=props.end; i++){
+        items.push(<li><a {...(i==props.current?{className:'active'}:{})} href="#">{i}</a></li>);
+    }
+    items.push(<li><a href="#">&gt;</a></li>);
     return (
         <div class="page-nav-bar">
             <ul>
-                <li><a href="#">1</a></li>
+                {items}
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&gt;</a></li>
             </ul>
         </div>);
 }

src/components/app.js

@@ -1,23 +1,57 @@
-import { createRef, h } from 'preact';
+import { Component, createRef, h } from "preact";
-import { Router } from 'preact-router';
+import { Router } from "preact-router";
-import Header from './header';
+import Header from "./header";
-import Login from '../routes/login';
+import Login from "../routes/login";
-import Profile from '../routes/profile';
+import Profile from "../routes/profile";
-import Menu from './menu';
+import Menu from "./menu";
-import Users from '../routes/users';
+import Users from "../routes/users";
+import { useCallback, useState } from "preact/hooks";
 const menu = createRef();
+class App extends Component {
+  toggleMenu() {
+    const [visible, setValue] = useState(false);
+    const toggle = useCallback(() => {
+      setValue(!visible);
+      return !visible;
+    }, [visible]);
+    return { visible, toggle };
+  }
+  authenticateUser() {
+    const [session, setValue] = useState({ token: null });
+    const login = (username, password) => {
+      if (username == "admin" && password == "admin") {
+        setValue({ ...session, token: "ABCDEFG" });
+        return true;
+      }
+    };
+    const logout = () => setValue({ ...session, token: null });
+    const isAuthenticated = () => session.token != null;
+    return { login, logout, isAuthenticated };
+  }
 
-const App = () => (
+  render() {
+    const menu = this.toggleMenu();
+    const auth = this.authenticateUser();
+    return (
       <div id="wrapper">
-		<Header menu={menu} />
+        <Header menu={menu} auth={auth} />
-		<Menu ref={menu} />
+        <Menu menu={menu} />
-		<Login />
+        {!menu.visible &&
+          (!auth.isAuthenticated() ? (
+            <Login auth={auth} />
+          ) : (
+            <div class="page">
               <Router>
-			<Profile path="/profile/" user="me" />
+                <Profile path="/test/" user="me" />
                 <Profile path="/profile/:user" />
                 <Users path="/users" />
+                <div class="container" default>Error 404</div>
               </Router>
             </div>
-)
+          ))}
+      </div>
+    );
+  }
+}
 
 export default App;

src/components/header/index.jsx

@@ -1,37 +1,21 @@
 import { Component, createRef, h } from 'preact';
 //import { Link } from 'preact-router/match';
 
-class Header extends Component {
+const Header = (props) => (
-	state = { shown: true }
-	hamburger = createRef();
-	togglemenu() {
-		if (this.props.menu.current) {
-			this.setState(prev => ({ shown: !prev.shown }));
-			this.props.menu.current.toggle(this.state);
-			if (this.state.shown) {
-				this.hamburger.current.classList.add('hamburger-active');
-			}
-			else {
-				this.hamburger.current.classList.remove('hamburger-active');
-			}
-		}
-	}
-
-render(props){
-	return (
 	<header className='header'>
 		<div className="container">
 			<h1>Login</h1>
-				<div id="hamburger-button" ref={this.hamburger} className='hamburger' onClick={() => this.togglemenu(props)}>
+			{props.auth.isAuthenticated() && (<div id="hamburger-button" className={`hamburger ${props.menu.visible && 'hamburger-active'}`}
+				onClick={() => props.menu.toggle()}>
 				<hr />
 				<hr />
 				<hr />
-				</div>
+			</div>)}
 		</div>
 	</header>
-	);
+);
-}
+
-}
+
 
 
 export default Header;

src/components/menu/index.jsx

@@ -1,36 +1,34 @@
 import { Component, h } from 'preact';
-
+import { Link } from 'preact-router';
 class Menu extends Component {
 
     menu_items = [
         { text: "Übersicht", path: "/" },
-        { text: "Benutzer", path: "/user" },
+        { text: "Benutzer", path: "/users" },
         { text: "System", path: "/system" },
         { text: "Backup", path: "/backup" },
-        { text: "Abmelden", path: "/" }
+        { text: "Abmelden", path: "/logout" }
     ]
-    state = { shown: false }
+
-    toggle(val) {
-        this.setState(val);
-    }
     getAlert() {
         alert("getAlert from Child");
     }
-
+    onClick = (e) => {
+        e.preventDefault();
+        this.props.menu.toggle();
+    }
     render(props, state) {
-
+        if (props.menu.visible)
-        return (<div id="menu-screen" className='page' style={`display: ${state.shown ? 'flex' : 'none'}`}>
+            return (
-            <div class="container">
+                <div class="container" >
-                <nav className='menu'>
+                    <nav className='menu' >
                         <ul>
-                        {this.menu_items.map((element,i) => (<li key={i}><a  href={element.link}>{element.text}</a></li>))}
+                            <li><Link href="/test"  >Test</Link></li>
+                            {this.menu_items.map((element, i) => (<li key={i}><Link href={element.path} onClick={this.onClick} >{element.text}</Link></li>))}
                         </ul>
                     </nav>
 
-            </div>
-
                 </div>)
-
     }
 }
 

src/index.js

@@ -1,4 +1,6 @@
 import './style/style.sass';
 import App from './components/app';
+import { h, render, Component } from "preact"
 
-export default App;
+render(<App />, document.body)
+//export default App;

src/routes/login/index.jsx

@@ -2,12 +2,14 @@ import { Component, h } from 'preact';
 import Breadcrumbs from '../../components/breadcrumbs';
 
 class Login extends Component {
-    state = { name: '', password: '' };
+    state = { username: '', password: '' };
     navigation = ["Login"];
     onSubmit = (e) => {
         e.preventDefault();
         console.log(this.state);
-        this.setState({ name: '', password: '' });
+        this.setState({ username: '', password: '' });
+        if(!this.props.auth.login(this.state.username,this.state.password))
+            alert("Wrong login")
     }
 
     render() {
@@ -21,7 +23,7 @@ class Login extends Component {
                         Bitte melden Sie sich mit ihren Nutzerdaten an.
                     </p>
                     <div class="input-box">
-                        <input id="name" type="text" placeholder="Username" onInput={e => this.setState(prev => ({ ...prev, name: e.target.value }))} value={this.state.name} />
+                        <input id="name" type="text" placeholder="Username" onInput={e => this.setState(prev => ({ ...prev, username: e.target.value }))} value={this.state.username} />
                         <label for="name">Benutzername</label>
                     </div>
                     <div class="input-box">

src/routes/users/index.jsx

@@ -2,6 +2,9 @@ import { Component } from "preact";
 import UserList from "../../components/userlist";
 import Pageselector from "../../components/Pageselector";
 class Users extends Component {
+    shouldComponentUpdate() {
+        return false
+    }
     userlist = [
         { uid: 1234, first_name: 'Max', last_name: 'Muster', rfid: 'D3A2E35E', pin: 1234 },
         { uid: 12341, first_name: 'Max1', last_name: 'Muster', rfid: 'D3A2E35E', pin: 1234 },
@@ -9,12 +12,12 @@ class Users extends Component {
     ];
     render() {
         return (
-            <div id="user-screen" class="page">
+
             <div class="container">
                 <UserList userlist={this.userlist} />
-                    <Pageselector />
+                <Pageselector start={1} end={9} current={2} />
             </div>
-            </div>);
+        );
     }
 }
 

src/style/_pageselector.sass

@@ -0,0 +1,26 @@
+@mixin pageselector
+    text-align: center
+    //background-color: #ccc
+    margin: 1em
+    ul
+        list-style: none
+        justify-content: center
+        margin: 0
+        padding: 0
+        display: flex
+        li a
+            text-decoration: none
+            font-weight: bold
+            padding: .2em .5em
+            margin: .3em
+            border-radius: .3em
+            background: #eee
+            color: #ccc
+            border: .1em solid #ccc
+            &.active
+                background: #888
+                color: #eee
+            &:hover
+                color: #333
+                background: #fff
+                border: .1em solid #ccc

src/style/style.sass

@@ -2,6 +2,7 @@
 @use 'menu'
 @use 'login'
 @use 'breadcrumbs'
+@use 'pageselector'
 *
     //border: red 1px dotted
     box-sizing: border-box
@@ -53,7 +54,7 @@ body
     display: flex
     background: white
     width: 100%
-    padding-top: 3em
+    padding-top: 6em
 .menu
     @include menu.nav
 
@@ -61,28 +62,7 @@ body
     @include login.login-form
 
 .page-nav-bar
-    text-align: center
+    @include pageselector.pageselector
-    //background-color: #ccc
-    margin: 1em
-    ul
-        list-style: none
-        justify-content: center
-        margin: 0
-        padding: 0
-        display: flex
-        li a
-            text-decoration: none
-            font-weight: bold
-            padding: .2em .5em
-            margin: .3em
-            border-radius: .3em
-            background: #eee
-            color: #ccc
-            border: .1em solid #ccc
-            &:hover
-                color: #333
-                background: #fff
-                border: .1em solid #ccc
 .user-list-item
     overflow: hidden
     display: flex