sylv/fyp
1
0
Fork 0
Code Issues 29 Pull Requests Packages Projects 1 Releases Wiki Activity

chore: improved handler and improved login

Browse Source
This commit is contained in:
Andre Henriques
2023-09-18 13:50:03 +01:00
parent 1fd025e6d6
commit b22d64a568
7 changed files with 270 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
views/js/main.js Normal file
View File

@@ -0,0 +1,10 @@
function load() {
for (const elm of document.querySelectorAll("form > button")) {
elm.addEventListener('click', (e) => {
e.target.parentElement.classList.add("submitted");
});
}
}
window.onload = load;
htmx.on('htmx:afterSwap', load);

2
views/layout.html
View File

@@ -16,6 +16,8 @@
</head>
<body>
<script src="https://unpkg.com/htmx.org@1.9.5"></script>
<script src="/js/main.js"></script>
{{ block "js_imports" . }} {{end}}
{{ block "body" . }}
{{ block "header.html" . }} {{end}}
<div class="app">

26
views/login.html
View File

@@ -1,15 +1,25 @@
{{ define "title"}} Home : AI Stuff {{ end }}
{{ define "mainbody" }}
<form>
<div class="login-page">
<div>
<label for="email">Email</label>
<input name="email" required />
<h1>
Login
</h1>
<form method="post" action="/login" >
<fieldset>
<label for="email">Email</label>
<input type="email" required name="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input required name="password" type="password" />
</fieldset>
<button>
Login
</button>
</form>
</div>
<div>
<label for="password">Password</label>
<input name="password" required type="password" />
</div>
</form>
</div>
{{ end }}

2
views/partials/header.html
View File

@@ -2,7 +2,7 @@
<ul>
<div class="expand"></div>
<li>
<a hx-get="/login" hx-headers='{"REQUEST-TYPE": "html"}' hx-push-url="true" hx-swap="outerHTML" hx-target=".app">
<a hx-get="/login" hx-headers='{"REQUEST-TYPE": "htmlfull"}' hx-push-url="true" hx-swap="outerHTML" hx-target=".app">
Login
</a>
</li>

73
views/styles/main.css
View File

@@ -3,6 +3,16 @@
font-family: 'Roboto', sans-serif;
}
:root {
--white: #ffffff;
--grey: #ffffff;
--main: #fca311;
--sec: #14213d;
--black: #000000;
--red: 212, 38, 38;
--green: 92, 199, 30;
}
body {
margin: 0;
padding: 0;
@@ -55,3 +65,66 @@ nav ul li a {
.page404 div.description {
font-size: 1.5em;
}
/* Login Page */
.login-page {
display: grid;
place-items: center;
}
.login-page > div {
width: 40vw;
}
.login-page h1 {
text-align: center;
}
/* forms */
form {
padding: 30px;
border-radius: 10px;
box-shadow: 2px 5px 8px 2px #66666655;
}
form label {
display: block;
padding-bottom: 5px;
font-size: 1.2rem;
}
form input {
border: none;
box-shadow: 0 2px 5px 1px #66666655;
border-radius: 5px;
padding: 10px;
width: 100%;
}
form input:invalid:focus,
form.submitted input:invalid {
box-shadow: 0 2px 5px 1px rgba(var(--red), 0.2);
}
form.submitted input:valid {
box-shadow: 0 2px 5px 1px rgba(var(--green), 0.2);
}
form fieldset {
padding-bottom: 15px;
border: none;
}
form button {
border-radius: 9px 10px;
text-align: center;
padding: 10px;
background: none;
border: none;
box-shadow: 0 2px 8px 1px #66666655;
margin-left: 50%;
width: 50%;
transform: translateX(-50%);
background: var(--main);
color: var(--black);
font-size: 1.2rem;
}