From 26d05eace53794229b7bc3c181c98352a8164d6e Mon Sep 17 00:00:00 2001 From: CodeSteak Date: Sat, 25 Jan 2020 22:13:26 +0100 Subject: [PATCH] implement login + header --- .../java/org/hso/ecommerce/app/Config.java | 17 + .../hso/ecommerce/app/RequestController.java | 18 +- .../components/LoginIntercepter.java | 39 +++ .../src/main/resources/static/css/ecom.css | 314 +++++++++--------- .../resources/templates/fragments/header.html | 33 +- 5 files changed, 230 insertions(+), 191 deletions(-) create mode 100644 prototype/src/main/java/org/hso/ecommerce/app/Config.java create mode 100644 prototype/src/main/java/org/hso/ecommerce/components/LoginIntercepter.java diff --git a/prototype/src/main/java/org/hso/ecommerce/app/Config.java b/prototype/src/main/java/org/hso/ecommerce/app/Config.java new file mode 100644 index 0000000..be6dfa9 --- /dev/null +++ b/prototype/src/main/java/org/hso/ecommerce/app/Config.java @@ -0,0 +1,17 @@ +package org.hso.ecommerce.app; + +import org.springframework.context.annotation.Configuration; +import org.springframework.web.servlet.config.annotation.InterceptorRegistry; +import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; +import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; + +import org.hso.ecommerce.components.LoginIntercepter; + +@Configuration +public class Config implements WebMvcConfigurer { + + @Override + public void addInterceptors(InterceptorRegistry registry) { + registry.addInterceptor(new LoginIntercepter()); + } +} \ No newline at end of file diff --git a/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java index d8df899..66a8b01 100644 --- a/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java +++ b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java @@ -18,13 +18,6 @@ import java.util.UUID; @Controller public class RequestController { - private final CustomerRepository customerRepo; - - @Autowired - public RequestController(CustomerRepository customerRepo) { - this.customerRepo = customerRepo; - } - @GetMapping("/") public String home() { return "redirect:/shop/"; @@ -36,10 +29,17 @@ public class RequestController { } @PostMapping("/login") - public String loginPost() { + public String loginPost(HttpServletResponse response) { + response.addCookie(new Cookie("login", "true")); return "redirect:/"; } + @PostMapping("/logout") + public String logoutPost(HttpServletResponse response) { + response.addCookie(new Cookie("login", "false")); + return "redirect:/"; + } + @GetMapping("/register") public String register() { return "/register"; @@ -81,7 +81,7 @@ public class RequestController { @GetMapping("/user/") public String user() { - return "/user/index"; + return "redirect:/user/settings"; } @GetMapping("/user/settings") diff --git a/prototype/src/main/java/org/hso/ecommerce/components/LoginIntercepter.java b/prototype/src/main/java/org/hso/ecommerce/components/LoginIntercepter.java new file mode 100644 index 0000000..42a5924 --- /dev/null +++ b/prototype/src/main/java/org/hso/ecommerce/components/LoginIntercepter.java @@ -0,0 +1,39 @@ +package org.hso.ecommerce.components; + +import org.springframework.boot.web.servlet.server.Session; +import org.springframework.stereotype.Component; +import org.springframework.ui.Model; +import org.springframework.web.servlet.HandlerInterceptor; +import org.springframework.web.servlet.ModelAndView; + +import javax.servlet.http.Cookie; +import javax.servlet.http.HttpServletRequest; +import javax.servlet.http.HttpServletResponse; + +@Component +public class LoginIntercepter implements HandlerInterceptor { + @Override + public boolean preHandle( + HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { + + Cookie[] cookies = request.getCookies(); + if (cookies != null) { + for (Cookie c : cookies) { + if (c.getName().equals("login")) { + request.setAttribute("customer", c.getValue().equals("true")); + } + } + } + + return true; + } + @Override + public void postHandle( + HttpServletRequest request, HttpServletResponse response, Object handler, + ModelAndView modelAndView) throws Exception { + } + + @Override + public void afterCompletion(HttpServletRequest request, HttpServletResponse response, + Object handler, Exception exception) throws Exception {} +} diff --git a/prototype/src/main/resources/static/css/ecom.css b/prototype/src/main/resources/static/css/ecom.css index 4ab9632..1b4affb 100644 --- a/prototype/src/main/resources/static/css/ecom.css +++ b/prototype/src/main/resources/static/css/ecom.css @@ -1,59 +1,81 @@ @import "fonts.css"; +.dropdown { + width: 15rem; + display: block; +} + +.dropdown-content { + display: none; + position: absolute; +} +.dropdown .dropdown-button { + display: block; + width: 15rem; + margin-top: 0px; + margin-bottom: 0px; +} + +.dropdown:hover .dropdown-content { +} + +.dropdown:hover .dropdown-button { + display: inline-block; + background-color: var(--root-c-black); + width: 15rem; + margin: 0px; +} + +.dropdown:hover .dropdown-content { + display: flex; + flex-direction: column; + align-items: stretch; +} + +.dropdown:hover .dropdown-content>* { + margin: 0px; + min-width: 15rem; +} + :root { font-family: "Fira Sans"; line-height: 1.15; - - --u5: calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5 ); - --u4: calc(1em * 1.5 * 1.5 * 1.5 * 1.5); - --u3: calc(1em * 1.5 * 1.5 * 1.5); - --u2: calc(1em * 1.5 * 1.5); - --u1: calc(1em * 1.5); - --u0: calc(1em); + --u5: calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5); + --u4: calc(1em * 1.5 * 1.5 * 1.5 * 1.5); + --u3: calc(1em * 1.5 * 1.5 * 1.5); + --u2: calc(1em * 1.5 * 1.5); + --u1: calc(1em * 1.5); + --u0: calc(1em); --u-1: calc(1em * 0.666); --u-2: calc(1em * 0.666 * 0.666); --u-3: calc(1em * 0.666 * 0.666 * 0.666); --u-4: calc(1em * 0.666 * 0.666 * 0.666 * 0.666); - - --root-c-base: #ecf0f1; --root-c-base-highlight: #FFF; - --root-c-primary: #1abc9c; --root-c-primary-highlight: #16a085; - --root-c-secondary: #9b59b6; --root-c-secondary-highlight: #8e44ad; - --root-c-black: #2c3e50; --root-c-black-highlight: #34495e; - - --c-base: var(--root-c-base); --c-base-highlight: var(--root-c-base-highlight); - --c-primary: var(--root-c-primary); --c-primary-highlight: var(--root-c-primary-highlight); - --c-secondary: var(--root-c-secondary); --c-secondary-highlight: var(--root-c-secondary-highlight); - --c-black: var(--root-c-black); --c-black-highlight: var(--root-c-black-highlight); - --c-error: #c0392b; } .primary { --c-base: var(--root-c-base); --c-base-highlight: var(--root-c-base-highlight); - - --c-primary:var(--root-c-primary); + --c-primary: var(--root-c-primary); --c-primary-highlight: var(--root-c-primary-highlight); - --c-secondary: var(--c-secondary); --c-secondary-highlight: var(--root-c-secondary-highlight); - --c-black: var(--root-c-black); --c-black-highlight: var(--root-c-black-highlight); } @@ -61,13 +83,32 @@ .secondary { --c-base: var(--root-c-base); --c-base-highlight: var(--root-c-base-highlight); - - --c-primary:var(--root-c-secondary); + --c-primary: var(--root-c-secondary); --c-primary-highlight: var(--root-c-secondary-highlight); - --c-secondary: var(--root-c-primary); --c-secondary-highlight: var(--root-c-primary-highlight); + --c-black: var(--root-c-black); + --c-black-highlight: var(--root-c-black-highlight); +} +.black { + --c-base: var(--root-c-base); + --c-base-highlight: var(--root-c-base-highlight); + --c-primary: var(--root-c-black); + --c-primary-highlight: var(--root-c-black-highlight); + --c-secondary: var(--root-c-primary); + --c-secondary-highlight: var(--root-c-primary-highlight); + --c-black: var(--root-c-primary); + --c-black-highlight: var(--root-c-primary-highlight); +} + +.black-as-highlight { + --c-base: var(--root-c-base); + --c-base-highlight: var(--root-c-black-highlight); + --c-primary: var(--root-c-primary); + --c-primary-highlight: var(--root-c-black-highlight); + --c-secondary: var(--root-c-secondary); + --c-secondary-highlight: var(--root-c-black-highlight); --c-black: var(--root-c-black); --c-black-highlight: var(--root-c-black-highlight); } @@ -75,13 +116,10 @@ .inverted { --c-base: var(--root-c-black); --c-base-highlight: var(--root-c-black-highlight); - - --c-primary:var(--root-c-primary); + --c-primary: var(--root-c-primary); --c-primary-highlight: var(--root-c-primary-highlight); - --c-secondary: var(--c-secondary); --c-secondary-highlight: var(--root-c-secondary-highlight); - --c-black: var(--root-c-base); --c-black-highlight: var(--root-c-base-highlight); } @@ -122,24 +160,18 @@ background-color: var(--root-c-black-highlight); } -.highlight > *, +.highlight>*, .highlight { --c-base: var(--root-c-black); --c-base-highlight: var(--root-c-black-highlight); - - --c-primary:var(--root-c-primary); + --c-primary: var(--root-c-primary); --c-primary-highlight: var(--root-c-primary-highlight); - --c-secondary: var(--c-secondary); --c-secondary-highlight: var(--root-c-secondary-highlight); - --c-black: var(--root-c-base); --c-black-highlight: var(--root-c-base-highlight); } - - - .huge { --u5: calc(3.375rem * 1.5 * 1.5 * 1.5 * 1.5 * 1.5); --u4: calc(3.375rem * 1.5 * 1.5 * 1.5 * 1.5); @@ -166,26 +198,23 @@ --u-4: calc(0.666em * 0.666 * 0.666 * 0.666 * 0.666); } - - * { - margin: 0em; - padding: 0em; - box-sizing: border-box; + margin: 0em; + padding: 0em; + box-sizing: border-box; } html, body { - font-size: var(--u0); - height: 100%; - background-color: var(--c-base); - color: var(--c-black) + font-size: var(--u0); + height: 100%; + background-color: var(--c-base); + color: var(--c-black) } main { min-height: 100%; } - h1, h2, h3, h4, h5 { font-family: "Fira Mono"; padding-top: var(--u0); @@ -199,7 +228,7 @@ a { } a:visited { - color: inherit; + color: none; } a.section { @@ -228,8 +257,12 @@ img { object-fit: cover; } +img.icon { + height: 2rem; +} + li { - list-style-type: none; + list-style-type: none; } table { @@ -273,8 +306,6 @@ table.key-value td { text-align: left; } - - img.xs { width: var(--u2); } @@ -283,7 +314,6 @@ img.s { width: var(--u4); } - img.m { width: var(--u8); } @@ -291,10 +321,7 @@ img.m { /* * NAV */ - -nav { - -} +nav {} nav h1 { font-size: var(--u0); @@ -312,7 +339,7 @@ nav li li { nav li a { padding: var(--u0); - transition: all 0.1s ease-out; + transition: background-color 0.1s ease-out; } nav li a:hover, @@ -321,13 +348,13 @@ nav li a.selected { background-color: var(--c-primary); color: var(--c-base); } + /* * FOOTER */ - footer { padding-top: var(--u3); - padding-bottom: var(--u1); + padding-bottom: var(--u1); } /* @@ -337,27 +364,23 @@ textarea, input[list], input[type="text"], input[type="password"] { - background-color: var(--c-base); font-size: var(--u0); - border: none; - /*border-radius: var(--u-2);*/ margin-top: var(--u0); margin-bottom: var(--u0); - padding: var(--u0); font-size: var(--u0); color: var(--c-black); - background-color: var(--c-base-highlight); - box-shadow: var(--s-0-secondary); + box-shadow: var(--s-0-secondary); } textarea { font-family: "Fira Mono"; } + /* input[type="text"]:invalid, input[type="password"]:invalid { @@ -367,9 +390,9 @@ input[type="password"]:invalid { textarea::placeholder, input[list]::placeholder, input[type="text"]::placeholder, -input[type="password"]::placeholder { - color: var(--c-primary-highlight); - opacity: 50%; +input[type="password"]::placeholder { + color: var(--c-primary-highlight); + opacity: 50%; } button, .button { @@ -377,32 +400,20 @@ button, .button { font-weight: bold; text-decoration: none; text-align: center; - background-color: var(--c-primary); color: var(--c-base); - border: none; /*border-radius: var(--u-2);*/ - margin-bottom: var(--u0); margin-top: var(--u0); - padding: var(--u0); - min-width: 10em; - font-family: "Fira Mono"; text-transform: uppercase; font-size: var(--u0); - /* box-shadow: var(--s-0-secondary); */ } -nav button.bg-none, -nav .button.bg-none { - background-color: transparent; -} - button:active, .button:active { background-color: var(--c-primary-highlight); } @@ -412,7 +423,7 @@ input[type="password"], input[list], button, .button { - transition: all 0.1s ease-out; + transition: background-color 0.1s ease-out; } label { @@ -422,7 +433,7 @@ label { } label.nolinebreak { - display:inline; + display: inline; } input.linestyle { @@ -433,7 +444,7 @@ input.linestyle { } fieldset { - border: none; + border: none; } fieldset label { @@ -443,41 +454,43 @@ fieldset label { /* * HERO */ - .hero { background-color: var(--c-primary); color: var(--c-base); } -.hero > * { +.hero>* { --c-primary: var(--root-c-primary-highlight); --c-primary-highlight: var(--root-c-primary); } +.header.hero>* { + --c-primary: var(--root-c-primary); + --c-primary-highlight: var(--root-c-primary-highlight); +} + .hero-black { background-color: var(--c-black); color: var(--c-base); } -.primarytext{ - color: var(--c-primary) +.primarytext { + color: var(--c-primary) } -.secondarytext{ - color: var(--c-secondary) +.secondarytext { + color: var(--c-secondary) } /* * LAYOUT */ - .content-width { - max-width: 80rem; - margin-left: auto; - margin-right: auto; - - padding-left: var(--u0); - padding-right: var(--u0); + max-width: 80rem; + margin-left: auto; + margin-right: auto; + padding-left: var(--u0); + padding-right: var(--u0); } .full-width { @@ -490,16 +503,17 @@ fieldset label { justify-content: stretch; flex-wrap: wrap; } -.flowflex > * { + +.flowflex>* { padding: var(--u0); flex: 1; } -.flowflex > *.spacer { + +.flowflex>*.spacer { padding-top: 0px; padding-bottom: 0px; } - .detailflex { display: flex; flex-direction: row; @@ -526,14 +540,13 @@ fieldset label { margin-right: auto; } -.detailflex > * { +.detailflex>* { min-width: 100%; padding: var(--u0); flex: 1; } - -.detailflex > .col-2 { +.detailflex>.col-2 { display: flex; justify-content: flex-start; flex-wrap: wrap; @@ -541,13 +554,12 @@ fieldset label { padding: 0px; } -.detailflex > .col-2 > * { +.detailflex>.col-2>* { min-width: calc(15rem + var(--u0) * 3); flex: 1; padding: var(--u0); } - .detailgrid { display: grid; grid-auto-flow: dense; @@ -576,25 +588,23 @@ fieldset label { margin-right: auto; } - -.detailgrid > .s { +.detailgrid>.s { grid-column: span 1; } -.detailgrid > .m { +.detailgrid>.m { grid-column: span 2; } -.detailgrid > .l { +.detailgrid>.l { grid-column: span 3; } -.detailgrid > .spacer { +.detailgrid>.spacer { grid-column: span 3; height: 0px; } - .bar-flex { display: flex; align-items: center; @@ -602,11 +612,11 @@ fieldset label { flex-wrap: wrap; } -.bar-flex > * { +.bar-flex>* { margin: var(--u0); } -.bar-flex > .spacer { +.bar-flex>.spacer { flex: 1; } @@ -617,11 +627,11 @@ fieldset label { flex-wrap: wrap; } -.sidebar-layout > * { +.sidebar-layout>* { min-width: 15rem; } -.sidebar-layout > *:nth-child(2) { +.sidebar-layout>*:nth-child(2) { flex: 1; } @@ -640,70 +650,65 @@ fieldset label { justify-content: space-around; } -.grid > * { - flex: 1; - margin: var(--u0); - padding: var(--u0); - /*border-radius: var(--u0);*/ +.grid>* { + flex: 1; + margin: var(--u0); + padding: var(--u0); + /*border-radius: var(--u0);*/ } -.grid.condensed > * { - flex: 1; - padding: 0px; +.grid.condensed>* { + flex: 1; + padding: 0px; } -.grid.base > * { +.grid.base>* { background-color: var(--c-base); color: var(--c-black); } -.grid.black > * { +.grid.black>* { background-color: var(--c-black); color: var(--c-base); } -.grid.primary > * { +.grid.primary>* { background-color: var(--c-primary); color: var(--c-base); } -.grid.secondary > * { +.grid.secondary>* { background-color: var(--c-primary-highlight); color: var(--c-base); } -.hero-primary .grid.shadow > * { +.hero-primary .grid.shadow>* { /* box-shadow: var(--s-0-secondary); */ } -.hero-black .grid.shadow > * { +.hero-black .grid.shadow>* { /* box-shadow: var(--s-0-secondary); */ } -.grid.s > .spacer { +.grid.s>.spacer { box-shadow: none; - margin: calc(var(--u0) * 2); padding: 0px; - width: 10rem; max-width: 10rem; min-width: 7.5rem; height: 0px; } -.grid.s > * { +.grid.s>* { max-width: 10rem; min-width: 7.5rem; } - -.grid.m > .spacer { +.grid.m>.spacer { box-shadow: none; - margin: calc(var(--u0) * 2); padding: 0px; - width: 20rem; max-width: 20rem; min-width: 15rem; @@ -711,18 +716,16 @@ fieldset label { padding: 0px; } -.grid.m > * { +.grid.m>* { width: 20rem; max-width: 20rem; min-width: 15rem; } -.grid.l > .spacer { +.grid.l>.spacer { box-shadow: none; - margin: calc(var(--u0) * 2); padding: 0px; - width: 40rem; max-width: 40rem; min-width: 15rem; @@ -730,18 +733,16 @@ fieldset label { padding: 0px; } -.grid.l > * { +.grid.l>* { width: 40rem; max-width: 40rem; min-width: 15rem; } -.grid.xl > .spacer { +.grid.xl>.spacer { box-shadow: none; - margin: calc(var(--u0) * 2); padding: 0px; - width: 80rem; max-width: 80rem; min-width: 30rem; @@ -749,14 +750,12 @@ fieldset label { padding: 0px; } -.grid.xl > * { +.grid.xl>* { width: 80rem; max-width: 40rem; min-width: 20rem; } - - .vertical-spacer.s { min-height: 10rem; } @@ -775,7 +774,7 @@ fieldset label { justify-content: center; } -.modal > * { +.modal>* { /*border-radius: var(--u0);*/ padding: var(--u0); flex: 1; @@ -784,16 +783,14 @@ fieldset label { /* * Impov */ - .input-icon { /* box-shadow: var(--s-0-secondary); */ display: flex; padding: 0px; - /*border-radius: var(--u0);*/ } -.input-icon > input { +.input-icon>input { flex: 1; margin: 0px; border-top-right-radius: 0px; @@ -801,22 +798,17 @@ fieldset label { box-shadow: none; } -.input-icon > button { +.input-icon>button { margin: 0px; - border-top-left-radius: 0px; border-bottom-left-radius: 0px; box-shadow: none; } - /* * CONTENT */ - -.notification { - -} +.notification {} .notification:hover { background-color: var(--c-base-highlight); @@ -826,12 +818,11 @@ fieldset label { background-color: var(--c-primary); } -.notification.unread > * { +.notification.unread>* { --c-primary: var(--root-c-primary-highlight); --c-primary-highlight: var(--root-c-primary); } - .notification.unread:hover { background-color: var(--c-primary); } @@ -861,12 +852,13 @@ fieldset label { } .center-text { - text-align: center; + text-align: center; } .no-padding { padding: 0px; } + .no-margin { margin: 0px; } diff --git a/prototype/src/main/resources/templates/fragments/header.html b/prototype/src/main/resources/templates/fragments/header.html index ebab6b2..41ab502 100644 --- a/prototype/src/main/resources/templates/fragments/header.html +++ b/prototype/src/main/resources/templates/fragments/header.html @@ -5,33 +5,24 @@ eCommerce -