added a minimal login dialog

* added session cookie being set on login, login-data is not stored or validated

prototype/src/main/java/org/hso/ecommerce/app/RequestController.java

@@ -1,9 +1,13 @@
 package org.hso.ecommerce.app;
 
+import org.hso.ecommerce.objects.User;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
-import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.RequestParam;
+
+import javax.servlet.http.Cookie;
+import javax.servlet.http.HttpServletResponse;
+import java.util.UUID;
 
 @Controller
 public class RequestController {
@@ -14,7 +18,8 @@ public class RequestController {
     }
 
     @GetMapping("/home")
-    public String home() {
+    public String home(Model model) {
+        model.addAttribute(new User());
         return "home";
     }
 
@@ -24,4 +29,24 @@ public class RequestController {
         return "greeting";
     }
 
+    @RequestMapping(value="/home", method=RequestMethod.POST, params="action=login")
+    public String login(@ModelAttribute User user, HttpServletResponse response) {
+        // do the login magic and get a loginToken
+        System.out.println(user.getUname());
+        System.out.println(user.getPwd());
+
+        String loginToken = UUID.randomUUID().toString();
+
+        // set the loginToken as session cookie
+        Cookie cookie = new Cookie("loginToken", loginToken);
+        response.addCookie(cookie);
+        return "redirect:/home";
+    }
+
+    @RequestMapping("/register")
+    public String register(@CookieValue(value = "loginToken", defaultValue = "") String loginToken) {
+        System.out.println(loginToken);
+        return "register";
+    }
+
 }

prototype/src/main/java/org/hso/ecommerce/objects/User.java

@@ -0,0 +1,23 @@
+package org.hso.ecommerce.objects;
+
+public class User {
+
+    private String uname;
+    private String pwd;
+
+    public String getUname() {
+        return uname;
+    }
+
+    public void setUname(String uname) {
+        this.uname = uname;
+    }
+
+    public String getPwd() {
+        return pwd;
+    }
+
+    public void setPwd(String pwd) {
+        this.pwd = pwd;
+    }
+}

prototype/src/main/resources/static/css/ecom.css

@@ -402,3 +402,31 @@ label {
    font-size: var(--u1);
    text-align: right;
 }
+
+
+/*
+ * Prototype stuff
+ */
+.dialog {
+   display: none; /* Hidden by default */
+   position: fixed; /* Stay in place */
+   z-index: 1;
+   left: 0;
+   top: 0;
+   width: 100%; /* Full width */
+   height: 100%; /* Full height */
+   overflow: auto; /* Enable scroll if needed */
+   padding-top: 60px;
+}
+
+.dialog-content {
+   background-color: var(--c-black);
+   margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+   border: 1px solid #888;
+   width: 50%; /* Could be more or less, depending on screen size */
+
+}
+
+.container {
+   padding: 16px;
+}

prototype/src/main/resources/templates/fragments/header.html

@@ -13,7 +13,34 @@
                 <input type="text" placeholder="Nach Produkten suchen..."/>
                 <button>Finden</button>
             </div>
-            <button>Login</button>
+
+            <button onclick="document.getElementById('login').style.display='block'" style="width:auto;">Login</button>
+            <div id="login" class="dialog">
+                <form class="dialog-content" th:action="@{/home}" th:object="${user}" method="post">
+                    <div class="container">
+                        <label><b>Username</b></label>
+                        <input type="text" th:field="*{uname}" placeholder="Enter Username" name="uname" required>
+
+                        <label><b>Password</b></label>
+                        <input type="password" th:field="*{pwd}" placeholder="Enter Password" name="pwd" required>
+
+                        <button type="submit" name="action" value="login">Login</button>
+                        <label>
+                            <input type="checkbox" checked="checked" name="remember"> Remember me
+                        </label>
+                    </div>
+
+                    <div class="container">
+                        <button type="button" onclick="document.getElementById('login').style.display='none'" class="cancelbtn">Cancel</button>
+                        <span class="psw">Forgot <a href="#">password?</a></span>
+                    </div>
+                </form>
+
+            </div>
+
+ <!--           <form class="button" th:action="@{/home}" method="POST">
+                <button type="submit" name="action" value="login">Login</button>
+            </form>-->
         </div>
     </nav>
 </body>

prototype/src/main/resources/templates/home.html

@@ -68,7 +68,7 @@
             </div>
             <div class="vertical-spacer s"></div>
         </div>
-
+        <!-- TODO only shown if not logged in-->
         <div class=''>
             <div class='content-width'>
                 <h1>Personalisierte Empfehlungen</h1>
@@ -78,7 +78,9 @@
                         <h2>Werde jetzt Kunde</h2>
                         <p> Jetzt Kunde werden und viele Vorteile sichern,
                             wie z.B. personalisierte Empfehlungen. </p>
-                        <button>Registieren</button>
+                        <form class="button" th:action="@{/register}" method="POST">
+                            <button type="submit" name="action" value="register">Registieren</button>
+                        </form>
                     </div>
                 </div>
             </div>

prototype/src/main/resources/templates/register.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8">
+    <title>e-commerce</title>
+    <link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}"/>
+</head>
+<body>
+    <nav th:replace="fragments/header :: header">Header</nav>
+    <main>
+    <!-- TODO -->
+    </main>
+    <footer th:replace="fragments/footer :: footer"></footer>
+</body>
+</html>