impl. register.html

2020-01-23 22:11:14 +01:00 · 2020-01-23 22:11:14 +01:00 · 47c709efce
commit 47c709efce
parent f29b91b11a
8 changed files with 189 additions and 14 deletions
--- a/prototype/src/main/resources/application.properties
+++ b/prototype/src/main/resources/application.properties
@ -16,5 +16,5 @@ spring.jpa.hibernate.ddl-auto=update
 # ----------------------------------------

 # EMBEDDED SERVER CONFIGURATION (ServerProperties)
-server.address=127.0.0.1
+server.address=::
 server.port=8080
--- a/prototype/src/main/resources/static/css/ecom.css
+++ b/prototype/src/main/resources/static/css/ecom.css
@ -17,7 +17,7 @@


   --root-c-base: #ecf0f1;
-   --root-c-base-highlight: #bdc3c7;
+   --root-c-base-highlight: #FFF;

   --root-c-primary: #1abc9c;
   --root-c-primary-highlight: #16a085;
@ -294,11 +294,13 @@ footer {
 /*
 * INPUTS
 */
-
+textarea,
+input[list],
 input[type="text"],
 input[type="password"] {

   background-color: var(--c-base);
+   font-size: var(--u0);

   border: none;

@ -310,7 +312,12 @@ input[type="password"] {
   font-size: var(--u0);
   color: var(--c-black);

-   /* box-shadow: var(--s-0-secondary); */
+   background-color: var(--c-base-highlight);
+    box-shadow: var(--s-0-secondary);
+}
+
+textarea {
+   font-family: "Fira Mono";
 }
 /*
 input[type="text"]:invalid,
@ -318,7 +325,8 @@ input[type="password"]:invalid {
   background-color: var(--c-error);
   color: var(--c-base);
 }*/
-
+textarea::placeholder,
+input[list]::placeholder,
 input[type="text"]::placeholder,
 input[type="password"]::placeholder  {
  color: var(--c-primary-highlight);
@ -357,6 +365,7 @@ button:active, .button:active {

 input[type="text"],
 input[type="password"],
+input[list],
 button,
 .button {
   transition: all 0.1s ease-out;
@ -383,6 +392,9 @@ fieldset {
    border: none;
 }

+fieldset label {
+   display: inline-block;
+}

 /*
 * HERO
@ -393,6 +405,11 @@ fieldset {
   color: var(--c-base);
 }

+.hero > * {
+   --c-primary: var(--root-c-primary-highlight);
+   --c-primary-highlight: var(--root-c-primary);
+}
+
 .hero-black {
   background-color: var(--c-black);
   color: var(--c-base);
@ -423,8 +440,58 @@ fieldset {
   width: 100%;
 }

+.detailflex {
+   display: flex;
+   flex-direction: row;
+   justify-content: center;
+   align-items: stretch;
+   flex-wrap: wrap;
+}
+
+.detailflex.s {
+   max-width: calc(20rem + var(--u0) * 2);
+   margin-left: auto;
+   margin-right: auto;
+}
+
+.detailflex.m {
+   max-width: calc(40rem + var(--u0) * 3);
+   margin-left: auto;
+   margin-right: auto;
+}
+
+.detailflex.l {
+   max-width: calc(20rem + var(--u0) * 5);
+   margin-left: auto;
+   margin-right: auto;
+}
+
+.detailflex  > * {
+   min-width: 100%;
+   padding: var(--u0);
+   flex: 1;
+}
+
+
+.detailflex  > .col-2 {
+   display: flex;
+   justify-content: flex-start;
+   flex-wrap: wrap;
+   align-items: wrap;
+   padding: 0px;
+}
+
+.detailflex  > .col-2 > * {
+   min-width: calc(15rem + var(--u0) * 3);
+   flex: 1;
+   padding: var(--u0);
+}
+
+
 .detailgrid {
   display: grid;
+   grid-auto-flow: dense;
+   min-width: 20rem;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   grid-template-rows: auto;
   grid-column-gap: var(--u0);
@ -437,6 +504,19 @@ fieldset {
   margin-right: auto;
 }

+.detailgrid.m {
+   max-width: calc(40rem + var(--u0) * 3);
+   margin-left: auto;
+   margin-right: auto;
+}
+
+.detailgrid.l {
+   max-width: calc(20rem + var(--u0) * 5);
+   margin-left: auto;
+   margin-right: auto;
+}
+
+
 .detailgrid > .s {
   grid-column: span 1;
 }
@ -454,6 +534,7 @@ fieldset {
   height: 0px;
 }

+
 .bar-flex {
   display: flex;
   align-items: center;
@ -598,6 +679,18 @@ fieldset {
   min-height: 40rem;
 }

+.modal {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+}
+
+.modal > * {
+   border-radius: var(--u0);
+   padding: var(--u0);
+   flex: 1;
+}
+
 /*
 * Impov
 */
--- a/prototype/src/main/resources/static/js/main.js
+++ b/prototype/src/main/resources/static/js/main.js
--- a/prototype/src/main/resources/templates/about.html
+++ b/prototype/src/main/resources/templates/about.html
@ -2,7 +2,7 @@
 <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
 <head>
   <meta charset="utf-8">
-   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">

   <title>Über uns</title>
   <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
--- a/prototype/src/main/resources/templates/login.html
+++ b/prototype/src/main/resources/templates/login.html
@ -2,22 +2,22 @@
 <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
 <head>
   <meta charset="utf-8">
-   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">

   <title>Einloggen</title>
   <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
 </head>
 <body>
-    <nav th:replace="/fragments/header :: header">Header</nav>
-    <main class="content-width grid vertical-center center">
-      <form class="detailgrid s bg-base-highlight" th:action="@{/login}">
+   <!-- <nav th:replace="/fragments/header :: header">Header</nav> -->
+    <main class="content-width modal">
+      <form class="detailgrid s hero " th:action="@{/login}">
         <div class="s">
            <label for="username">Email Adresse</label>
            <input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required>
         </div>

         <div class="s">
-            <label for="username">Passwort</label>
+            <label for="password">Passwort</label>
            <input class="full-width" type="text" name="password" placeholder="Passwort" id="password" required>
         </div>

--- a/prototype/src/main/resources/templates/privacy.html
+++ b/prototype/src/main/resources/templates/privacy.html
@ -2,7 +2,7 @@
 <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
 <head>
   <meta charset="utf-8">
-   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">

   <title>Datenschutzerklärung</title>
   <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
--- a/prototype/src/main/resources/templates/register.html
+++ b/prototype/src/main/resources/templates/register.html
@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+   <meta charset="utf-8">
+   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
+
+   <title>Neuen Account erstellen</title>
+   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
+
+   <script th:src="@{/js/scrollToContent.js}"></script>
+</head>
+
+<body>
+   <nav th:replace="/fragments/header :: header">Header</nav>
+   <main class="modal">
+      <form class="detailflex m" th:action="@{/register}">
+         <div>
+            <h1>Neuen Account erstellen</h1>
+         </div>
+         <div>
+            <h2> Login Daten </h2>
+         </div>
+         <div>
+            <label for="username">Email Adresse</label>
+            <input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required>
+         </div>
+
+         <div>
+            <label for="password">Passwort</label>
+            <input class="full-width" type="text" name="password" placeholder="Passwort" id="password" required>
+         </div>
+
+         <div>
+            <label for="password2">Passwort wiederholen</label>
+            <input class="full-width" type="text" name="password2" placeholder="Passwort" id="password2" required>
+         </div>
+
+         <div>
+            <h2> Rechungs- und Lieferinformation </h2>
+         </div>
+
+         <div class="col-2">
+            <div>
+               <label for="salutation">Anrede</label>
+               <input class="full-width" list="salutationsOpt" name="salutation" placeholder="Anrede" required />
+               <datalist id="salutationsOpt">
+                  <option value="Herr">
+                  <option value="Frau">
+                  <option value="Herr Dr.">
+                  <option value="Frau Dr.">
+               </datalist>
+            </div>
+            <div>
+               <label for="name">Name</label>
+               <input class="full-width" type="text" name="name" placeholder="Nachname Vorname" required />
+            </div>
+         </div>
+
+         <div>
+            <label for="address">Anschrift</label>
+            <textarea rows="5" class="full-width" type="text" name="address" placeholder="Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10Land"></textarea>
+         </div>
+         <fieldset>
+            <input type="radio" name="type" value="priv" id="type-priv" required>
+            <label for="type-priv">Ich bin Privatkunde.</label> <br />
+            <input type="radio" name="type" value="bus" id="type-bus" required>
+            <label for="type-bus">Ich bin Geschäftskunde.</label> <br />
+         </fieldset>
+         <div>
+            <button class="full-width" type="submit" name="action" value="login">Registeren</button>
+            <a th:href="@{/terms}">
+               Unsere AGBs finden sie hier.
+            </a>
+         </div>
+
+      </form>
+   </main>
+   <footer th:replace="/fragments/footer :: footer"></footer>
+</body>
+
+</html>
--- a/prototype/src/main/resources/templates/terms.html
+++ b/prototype/src/main/resources/templates/terms.html
@ -2,7 +2,7 @@
 <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
 <head>
   <meta charset="utf-8">
-   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">

   <title>Allgemeine Geschäftsbedingungen</title>
   <link rel="stylesheet" th:href="@{/css/ecom.css}"/>