added cookie authoriaztion, new frontend web

src/main/java/com/museum/projection/controller/PageController.java

@@ -3,13 +3,10 @@ package com.museum.projection.controller;
 import com.museum.projection.service.ResponseService;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
-import javax.servlet.http.HttpServletResponse;
+import java.security.Principal;
 
 
 @Controller
@@ -20,7 +17,11 @@ public class PageController {
 
 
     @GetMapping
-    public String Index() {
+    public String Index(Principal principal, Model model) {
+        if(principal != null) {
+            model.addAttribute("name",principal.getName());
+            return "main";
+        }
         return "index";
     }
 
@@ -29,4 +30,6 @@ public class PageController {
         return "login";
     }
 
+
+
 }

src/main/java/com/museum/projection/security/ApplicationSecurityConfig.java

@@ -54,11 +54,11 @@ public class ApplicationSecurityConfig extends WebSecurityConfigurerAdapter {
                 .addFilterAfter(new JwtTokenVerifier(secretKey, jwtConfig), JwtUsernameAndPasswordAuthenticationFilter.class)
                 .authorizeRequests()
                 .antMatchers("/signin", "/", "index", "/css/*", "/js/*").permitAll()
-                .antMatchers("/api/**").hasRole(ADMIN.name())
+                .antMatchers("/api/**", "/admin").hasRole(ADMIN.name())
                 .anyRequest()
                 .authenticated();
-                //.and()
-                //.exceptionHandling().accessDeniedPage("/error");
+        //.and()
+        //.exceptionHandling().accessDeniedPage("/error");
 
     }
 
@@ -66,6 +66,7 @@ public class ApplicationSecurityConfig extends WebSecurityConfigurerAdapter {
     @Override
     protected void configure(AuthenticationManagerBuilder auth) throws Exception {
         auth.authenticationProvider(daoAuthenticationProvider());
+        auth.userDetailsService(applicationUserService);
     }
 
 

src/main/java/com/museum/projection/security/jwt/JwtTokenVerifier.java

@@ -19,10 +19,7 @@ import javax.servlet.http.Cookie;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
-import java.util.Arrays;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
+import java.util.*;
 import java.util.stream.Collectors;
 
 public class JwtTokenVerifier extends OncePerRequestFilter {
@@ -42,12 +39,17 @@ public class JwtTokenVerifier extends OncePerRequestFilter {
                                     FilterChain filterChain) throws ServletException, IOException {
 
         String authorizationHeader = request.getHeader(jwtConfig.getAuthorizationHeader());
-        if (Strings.isNullOrEmpty(authorizationHeader) || !authorizationHeader.startsWith(jwtConfig.getTokenPrefix())) {
+        Cookie[] cookies = request.getCookies();
+        Optional<Cookie> authorizationCookie = cookies != null ? Arrays.stream(cookies).filter(cookie -> cookie.getName().equals(jwtConfig.getAuthorizationHeader())).findFirst() : Optional.empty();
+        if ((Strings.isNullOrEmpty(authorizationHeader) || !authorizationHeader.startsWith(jwtConfig.getTokenPrefix()))
+                && (!authorizationCookie.isPresent() || !authorizationCookie.get().getValue().startsWith(jwtConfig.getTokenPrefix()))) {
             filterChain.doFilter(request, response);
             return;
         }
 
-        String token = authorizationHeader.replace(jwtConfig.getTokenPrefix(), "");
+
+        String token = authorizationHeader == null ? authorizationCookie.get().getValue() : authorizationHeader;
+        token = token.replace(jwtConfig.getTokenPrefix(), "");
 
         try {
 

src/main/resources/static/css/signin.css

@@ -5,7 +5,7 @@ body {
 }
 
 .form-signin {
-  max-width: 330px;
+  max-width: 450px;
   padding: 15px;
   margin: 0 auto;
 }

src/main/resources/static/css/style.css

 .container {
   width: auto;
-  max-width: 680px;
+  /*max-width: 680px;*/
   padding: 0 15px;
 }
 
@@ -9,5 +9,26 @@
 }
 
 .alert-box {
-   margin: 50px 40px 50px 40px;
+   margin: 10px 40px 20px 40px;
+}
+
+
+
+input.for-navigator { display: none; }
+
+label.nav-menu {
+    cursor: pointer;
+    margin-bottom: 0rem;
+}
+
+label.nav-menu.checked{
+  color: #007bff!important;
+}
+
+label.nav-menu:hover{
+    color: #007bff!important;
+}
+
+#a:not(:checked) ~ #content_a, #b:not(:checked) ~ #content_b, #c:not(:checked) ~ #content_c, #main:not(:checked) ~ #content_main {
+    display: none;
 }

src/main/resources/static/images/museumLogo.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1400.000000pt" height="1400.000000pt" viewBox="0 0 1400.000000 1400.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1400.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M810 12753 c0 -5 0 -2661 0 -5903 l0 -5895 2970 -3 2970 -2 0 1773 0
+1772 -1447 2488 c-796 1368 -1452 2486 -1458 2484 -7 -3 -11 -799 -13 -2490
+l-2 -2487 572 -2 573 -3 0 -120 0 -120 -1313 -3 -1313 -2 3 122 3 123 568 3
+567 2 0 2715 0 2715 -570 0 -570 0 0 125 0 125 1558 0 1557 0 26 -48 c15 -26
+304 -519 643 -1096 l616 -1050 0 2392 0 2392 -2970 0 c-1633 0 -2970 -3 -2970
+-7z"/>
+<path d="M7250 10600 c0 -1188 4 -2160 8 -2160 5 0 410 389 901 865 l892 865
+1004 0 1005 0 0 -2965 0 -2965 -1002 2 -1003 3 0 1863 c0 1024 -3 1861 -7
+1860 -4 -2 -410 -374 -902 -828 l-896 -825 3 -2680 2 -2680 2973 -3 2972 -2 0
+5905 0 5905 -2975 0 -2975 0 0 -2160z"/>
+</g>
+</svg>

src/main/resources/static/js/initial.js

+var serverUrl = 'http://localhost:8080';
+var signinBtn = document.querySelector('#signButton');
+
+document.querySelector('#about').checked = true;
+
+signinBtn.addEventListener('click', () =>{
+window.location.replace(serverUrl+'/signin');
+})
+
+
+

src/main/resources/static/js/control.js → src/main/resources/static/js/main.js

@@ -5,7 +5,7 @@ var pauseBtn = document.getElementById('pause');
 var addBtn = document.getElementById('add');
 var shutdown1Btn = document.getElementById('shutdown1');
 var shutdown2Btn = document.getElementById('shutdown2');
-var signinBtn = document.querySelector('#signButton');
+var signoutBtn = document.querySelector('#signout');
 
 var alertMessageBox = document.querySelector('.alert-message-box')
 
@@ -115,13 +115,33 @@ const removeSpinner = (element) => {
     element.querySelector('span').remove()
 }
 
+var menuButtons = document.querySelectorAll('.nav-menu');
+var pressed = document.querySelector('#main');
+pressed.checked = true;
+document.querySelectorAll('.for-navigator').forEach(x => x.addEventListener('change', function() {
+
+    menuButtons.forEach(element => {
+        if(element.htmlFor == this.id){
+            pressed.classList.remove('checked');
+            element.classList.add('checked');
+            pressed=element;
+        }
+    });
+
+
+}));
+
+
 playBtn.addEventListener('click', controlPlay)
 pauseBtn.addEventListener('click', controlPause)
 addBtn.addEventListener('click', controlAdd)
 shutdown1Btn.addEventListener('click', () => { controlShutdown(shutdown1Btn,1); })
 shutdown2Btn.addEventListener('click', () => { controlShutdown(shutdown1Btn,2); })
-signinBtn.addEventListener('click', () =>{
-    window.location.replace(serverUrl+'/signin');
+
+
+signoutBtn.addEventListener('click', () =>{
+    document.cookie = 'Authorization=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+    location.reload();
 })
 
 

src/main/resources/static/js/sign.js

 //
 //
 var form = document.querySelector('.form-signin');
-console.log(form)
 var token
 var serverUrl = 'http://localhost:8080';
-var alertbox = document.querySelector('.alert-box');
+var alertbox = document.querySelector('.alert-message-box');
 function getCookie(name) {
   var value = "; " + document.cookie;
   var parts = value.split("; " + name + "=");
   if (parts.length == 2) return parts.pop().split(";").shift();
 }
 
+
 const sendHttpRequest = (method, url, data) => {
     const promise = new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
@@ -53,7 +53,6 @@ console.log(event)
     event.preventDefault();
 }
 
-
 form.addEventListener("submit", formLogin);
 
 

src/main/resources/templates/index.html

@@ -10,37 +10,76 @@
 <body class="d-flex flex-column h-100" data-gr-c-s-loaded="true">
 
 
+<div class="d-flex flex-column flex-md-row align-items-center px-md-4 mb-3 bg-white border-bottom shadow-sm">
+
+    <a class="navbar-brand mr-0 mr-md-2 " href="/" aria-label="Muzeum">
+        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+             width="30.000000pt" height="30.000000pt" viewBox="0 0 1400.000000 1400.000000"
+             preserveAspectRatio="xMidYMid meet">
+            <g transform="translate(0.000000,1400.000000) scale(0.100000,-0.100000)"
+               fill="#000000" stroke="none">
+                <path d="M810 12753 c0 -5 0 -2661 0 -5903 l0 -5895 2970 -3 2970 -2 0 1773 0
+                1772 -1447 2488 c-796 1368 -1452 2486 -1458 2484 -7 -3 -11 -799 -13 -2490
+                l-2 -2487 572 -2 573 -3 0 -120 0 -120 -1313 -3 -1313 -2 3 122 3 123 568 3
+                567 2 0 2715 0 2715 -570 0 -570 0 0 125 0 125 1558 0 1557 0 26 -48 c15 -26
+                304 -519 643 -1096 l616 -1050 0 2392 0 2392 -2970 0 c-1633 0 -2970 -3 -2970
+                -7z"/>
+                <path d="M7250 10600 c0 -1188 4 -2160 8 -2160 5 0 410 389 901 865 l892 865
+                1004 0 1005 0 0 -2965 0 -2965 -1002 2 -1003 3 0 1863 c0 1024 -3 1861 -7
+                1860 -4 -2 -410 -374 -902 -828 l-896 -825 3 -2680 2 -2680 2973 -3 2972 -2 0
+                5905 0 5905 -2975 0 -2975 0 0 -2160z"/>
+            </g>
+        </svg>
+    </a>
+    <h5 class="my-0 mr-md-auto font-weight-normal" href="/">Langweilův model interaktivní projekce </h5>
+    <nav class="my-2 my-md-0 mr-md-3">
+        <label class="p-2  nav-menu" for=about >About</label>
+
+    </nav>
+
+    <a class="btn btn-outline-primary" id="signButton">Sign in</a>
+</div>
+
+<input class="for-navigator" type=radio name=x id=about />
 <div class="alert-box">
     <div class="alert alert-primary" role="alert">
         <h4 class="alert-heading">To perform any action please sign in</h4>
         <p>You can see this help page, but to perform any operation, you need to sign into the system. Please use same
             credentials as you use in the mobile app.</p>
-        <button id="signButton" type="button" class="btn btn-secondary btn-lg" >Sign in</button>
-        <hr>
-        <p class="mb-0"> Please, if you make changes using this page, make sure you know what you are doing..</p>
     </div>
     <div class="alert-message-box">
 
     </div>
 </div>
 
-<div class="container">
-    <h1 class="display-4">5D projection monitor edited</h1>
-    <h2>Basic operations :)</h2>
-    <p class="lead">Here you can perform basics testing and monitoring, it serves as a secondary tool for control.</p>
-    <button id="play" type="button" class="btn btn-primary">Play</button>
-    <button id="pause" type="button" class="btn btn-primary">Pause</button>
-    <button id="add" type="button" class="btn btn-primary">Add 1.mp4</button>
-</div>
-<br>
-<div class="container">
-    <h2>Restarting</h2>
-    <p class="lead">By restarting the application running on client will shutdown and restart automaticaly</p>
-    <button id="shutdown1" type="button" class="btn btn-danger">Restart 1</button>
-    <button id="shutdown2" type="button" class="btn btn-danger">Restart 2</button>
-</div>
+<div id=content_about>
+    <div class="container">
+        <h1 class="display-4">Langwiluv model</h1>
+        <p>Langweilův model Prahy z let 1826–1837 je unikátním a nejatraktivnějším exponátem muzea.</p>
+
+        <p>Od 12. dubna 2007 je po vyčištění a s novým osvětlením opět přístupný veřejnosti.</p>
 
+        <p>Je jedinečným dokladem podoby Starého Města, Malé Strany a Pražského hradu před přestavbou Prahy na konci 19.
+            a
+            počátku 20. století.
+            Byl vyroben ručně z papírové lepenky. Na přibližně 20 m² je zobrazeno historické jádro Prahy v detailní
+            podobě,
+            jakou mělo před sto padesáti lety, tedy včetně stovek zbořených domů bývalého Židovského města a Starého
+            Města.
+            Více než 2000 budov je na barevném modelu zachyceno v měřítku 1:480, se všemi detaily výzdoby fasád i
+            podrobnostmi dvorů, zahrad a hospodářské zástavby nitra domovních parcel a přilehlých pozemků. Pro mnoho
+            zbořených historických budov je Langweilův model jediným svědkem jejich podoby.</p>
 
+        <p>Tvůrcem modelu byl zaměstnanec pražské Univerzitní knihovny Antonín Langweil (1791–1837), který své neobvyklé
+            zálibě věnoval veškerý volný čas i finanční prostředky. Přestože byl model již ve své době obdivován mnohými
+            vzdělanci, mecenáše pro svou práci Langweil nikdy nenašel. Zemřel v bídě a početné rodině zanechal jen dluhy
+            a
+            nedokončené dílo, jehož cena se tehdy zdála velmi problematická. V roce 1840 se stal model součástí majetku
+            Národního muzea v Praze a po více než sto letech byl předán do sbírek Muzea hlavního města Prahy, kde je
+            nejvyhledávanější součástí historické expozice. Teprve dnešní doba dokáže ocenit skutečný význam Langweilova
+            modelu, význam prvotřídního dokumentu i nevšedního uměleckého díla.</p>
+    </div>
+</div>
 <footer class="footer mt-auto py-3">
     <div class="container">
         <span class="text-muted">This system was created by Ondrej Trojan</span>
@@ -50,7 +89,7 @@
 <script src="/js/jquery-3.4.1.slim.min.js"></script>
 <script src="/js/popper.min.js"></script>
 <script src="/js/bootstrap.min.js"></script>
-<script src="/js/control.js"></script>
+<script src="/js/initial.js"></script>
 </body>
 
 </html>
\ No newline at end of file

src/main/resources/templates/login.html

@@ -18,9 +18,10 @@
 
 
 <div class="container">
-    <div class="alert-box"></div>
+    <div class="alert-message-box"></div>
     <form class="form-signin" method="post">
-        <h2 class="form-signin-heading">5D projection console</h2>
+        <h5 class="my-0 mr-md-auto font-weight-normal" href="/">Langweilův model interaktivní projekce </h5>
+        <h2>Prihlaseni</h2>
         <p>
             <label for="username" class="sr-only">Username</label>
             <input type="text" id="username" name="username" class="form-control" placeholder="Username" required="" autofocus="">

src/main/resources/templates/main.html

+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" class="h-100">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="/css/style.css">
+    <title>Projection-web</title>
+</head>
+<body class="d-flex flex-column h-100" data-gr-c-s-loaded="true">
+
+
+<div class="d-flex flex-column flex-md-row align-items-center px-md-4 mb-3 bg-white border-bottom shadow-sm">
+
+    <a class="navbar-brand mr-0 mr-md-2 " href="/" aria-label="Muzeum">
+        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+             width="30.000000pt" height="30.000000pt" viewBox="0 0 1400.000000 1400.000000"
+             preserveAspectRatio="xMidYMid meet">
+            <g transform="translate(0.000000,1400.000000) scale(0.100000,-0.100000)"
+               fill="#000000" stroke="none">
+                <path d="M810 12753 c0 -5 0 -2661 0 -5903 l0 -5895 2970 -3 2970 -2 0 1773 0
+                1772 -1447 2488 c-796 1368 -1452 2486 -1458 2484 -7 -3 -11 -799 -13 -2490
+                l-2 -2487 572 -2 573 -3 0 -120 0 -120 -1313 -3 -1313 -2 3 122 3 123 568 3
+                567 2 0 2715 0 2715 -570 0 -570 0 0 125 0 125 1558 0 1557 0 26 -48 c15 -26
+                304 -519 643 -1096 l616 -1050 0 2392 0 2392 -2970 0 c-1633 0 -2970 -3 -2970
+                -7z"/>
+                <path d="M7250 10600 c0 -1188 4 -2160 8 -2160 5 0 410 389 901 865 l892 865
+                1004 0 1005 0 0 -2965 0 -2965 -1002 2 -1003 3 0 1863 c0 1024 -3 1861 -7
+                1860 -4 -2 -410 -374 -902 -828 l-896 -825 3 -2680 2 -2680 2973 -3 2972 -2 0
+                5905 0 5905 -2975 0 -2975 0 0 -2160z"/>
+            </g>
+        </svg>
+    </a>
+    <h5 class="my-0 mr-md-auto font-weight-normal" href="/">Langweilův model interaktivní projekce</h5>
+
+    <nav class="my-2 my-md-0 mr-md-3">
+        <label class="p-2  nav-menu" for=main>Main</label>
+        <label class="p-2  nav-menu" for=a>Users</label>
+        <label class="p-2  nav-menu" for=b>Documentation</label>
+        <label class="p-2  nav-menu" for=c>Control</label>
+
+    </nav>
+    <a class="my-2 my-md-0 mr-md-3">You are logged as <b th:text="${name}">unkown</b></a>
+    <a class="btn btn-outline-primary" id="signout">Sign out</a>
+</div>
+
+<input class="for-navigator" type=radio name=x id=a />
+<input class="for-navigator" type=radio name=x id=b />
+<input class="for-navigator" type=radio name=x id=c />
+<input class="for-navigator" type=radio name=x id=main />
+<div class="alert-box">
+    <div class="alert alert-primary" role="alert">
+        <h4 class="alert-heading">You are now signed</h4>
+        <p class="mb-0"> Please, if you make changes using this page, make sure you know what you are doing..</p>
+    </div>
+    <div class="alert-message-box">
+
+    </div>
+</div>
+<div id=content_main>
+    <div class="container">Vitejte na spravcovske konzoli pro Langwiluv model</div>
+</div>
+<div id=content_a>
+    <div class="container">Seznam a sprava uzivatelu</div>
+</div>
+<div id=content_b>
+    <div class="container">Dokumentace k celemu systemu</div>
+</div>
+<div id=content_c>
+    <div class="container">
+        <h1 class="display-4">5D projection monitor</h1>
+        <h2>Basic operations :)</h2>
+        <p class="lead">Here you can perform basics testing and monitoring, it serves as a secondary tool for
+            control.</p>
+        <button id="play" type="button" class="btn btn-primary">Play</button>
+        <button id="pause" type="button" class="btn btn-primary">Pause</button>
+        <button id="add" type="button" class="btn btn-primary">Add 1.mp4</button>
+    </div>
+    <br>
+    <div class="container">
+        <h2>Restarting</h2>
+        <p class="lead">By restarting the application running on client will shutdown and restart automaticaly</p>
+        <button id="shutdown1" type="button" class="btn btn-danger">Restart 1</button>
+        <button id="shutdown2" type="button" class="btn btn-danger">Restart 2</button>
+    </div>
+</div>
+<footer class="footer mt-auto py-3">
+    <div class="container">
+        <span class="text-muted">This system was created by Ondrej Trojan</span>
+    </div>
+</footer>
+
+<script src="/js/jquery-3.4.1.slim.min.js"></script>
+<script src="/js/popper.min.js"></script>
+<script src="/js/bootstrap.min.js"></script>
+<script src="/js/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file