localhorst/e-commerce
Archived
4
1
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

impl. login

Browse Source
This commit is contained in:
CodeSteak 2020-01-23 19:50:55 +01:00
parent fd269826dc
commit f29b91b11a
2 changed files with 97 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
prototype/src/main/resources/static/css/ecom.css
View File

@ -55,7 +55,7 @@
--c-secondary-highlight: var(--root-c-secondary-highlight); --c-secondary-highlight: var(--root-c-secondary-highlight);
--c-black: var(--root-c-black); --c-black: var(--root-c-black);
--c-black: var(--root-c-black-highlight); --c-black-highlight: var(--root-c-black-highlight);
} }
.secondary { .secondary {
@ -86,6 +86,60 @@
--c-black-highlight: var(--root-c-base-highlight); --c-black-highlight: var(--root-c-base-highlight);
} }
.bg-base {
background-color: var(--root-c-base);
}
.bg-base {
background-color: var(--root-c-base);
}
.bg-base-highlight {
background-color: var(--root-c-base-highlight);
}
.bg-primary {
background-color: var(--root-c-primary);
}
.bg-primary-highlight {
background-color: var(--root-c-primary-highlight);
}
.bg-secondary {
background-color: var(--root-c-secondary);
}
.bg-secondary-highlight {
background-color: var(--root-c-secondary-highlight);
}
.bg-black {
background-color: var(--root-c-black);
}
.bg-black-highlight {
background-color: var(--root-c-black-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-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);
}
.smaller { .smaller {
--u5: calc(0.666em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5); --u5: calc(0.666em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5);
--u4: calc(0.666em * 1.5 * 1.5 * 1.5 * 1.5); --u4: calc(0.666em * 1.5 * 1.5 * 1.5 * 1.5);
@ -258,12 +312,12 @@ input[type="password"] {
/* box-shadow: var(--s-0-secondary); */ /* box-shadow: var(--s-0-secondary); */
} }
/*
input[type="text"]:invalid, input[type="text"]:invalid,
input[type="password"]:invalid { input[type="password"]:invalid {
background-color: var(--c-error); background-color: var(--c-error);
color: var(--c-base); color: var(--c-base);
} }*/
input[type="text"]::placeholder, input[type="text"]::placeholder,
input[type="password"]::placeholder { input[type="password"]::placeholder {
@ -377,6 +431,12 @@ fieldset {
grid-row-gap: var(--u0); grid-row-gap: var(--u0);
} }
.detailgrid.s {
max-width: calc(20rem + var(--u0) * 2);
margin-left: auto;
margin-right: auto;
}
.detailgrid > .s { .detailgrid > .s {
grid-column: span 1; grid-column: span 1;
} }
@ -593,7 +653,3 @@ fieldset {
.Margin-left.s { .Margin-left.s {
margin-left: 2rem; margin-left: 2rem;
} }

34
prototype/src/main/resources/templates/login.html
View File

@ -0,0 +1,34 @@
<!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=1.0, 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}">
<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>
<input class="full-width" type="text" name="password" placeholder="Passwort" id="password" required>
</div>
<div class="s">
<button class="full-width" type="submit" name="action" value="login">Login</button>
Noch kein Account?
<a th:href="@{/register}">Jetzt registeren!</a>
</div>
</form>
</main>
<footer th:replace="/fragments/footer :: footer"></footer>
</body>
</html>