From 9814207e0e4383202d9d309b453a700f50649128 Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Sat, 22 Jul 2023 15:04:18 +0200
Subject: [PATCH] forms updated

---
 src/lib/css/form.css                    | 46 +++++++++++++++++++++++
 src/routes/(main)/login/+page.svelte    | 46 ++++-------------------
 src/routes/(main)/register/+page.svelte | 49 +++++--------------------
 3 files changed, 62 insertions(+), 79 deletions(-)
 create mode 100644 src/lib/css/form.css

diff --git a/src/lib/css/form.css b/src/lib/css/form.css
new file mode 100644
index 0000000..1a8eca3
--- /dev/null
+++ b/src/lib/css/form.css
@@ -0,0 +1,46 @@
+form{
+	background-color: var(--nord5);
+	display: flex;
+	flex-direction: column;
+	max-width: 600px;
+	gap: 0.5em;
+	margin-inline: auto;
+	justify-content: center;
+	align-items: center;
+	padding-block: 2rem;
+	margin-block: 2rem;
+}
+label{
+	font-size: 1.2em;
+}
+input{
+	display: block;
+	font-size: 1.2rem;
+}
+button{
+	 background-color: var(--red);
+	 color: white;
+	 border: none;
+	 padding: 0.5em 1em;
+	 font-size: 1.3em;
+	 border-radius: 1000px;
+	 margin-top: 1em;
+	 transition: 100ms;
+}
+button:hover,
+button:focus-visible
+{
+	scale: 1.1;
+}
+p{
+	max-width: 400px;
+	margin-top: 0;
+}
+h4{
+	margin-bottom:0;
+}
+@media screen and (max-width: 600px){
+	form{
+		margin-top: 0;
+	}
+}
diff --git a/src/routes/(main)/login/+page.svelte b/src/routes/(main)/login/+page.svelte
index b87ffba..ceaf5ec 100644
--- a/src/routes/(main)/login/+page.svelte
+++ b/src/routes/(main)/login/+page.svelte
@@ -1,49 +1,17 @@
-<style>
-	form{
-		background-color: var(--nord5);
-		display: flex;
-		flex-direction: column;
-		max-width: 600px;
-		gap: 0.5em;
-		margin-inline: auto;
-		justify-content: center;
-		align-items: center;
-		padding-block: 2rem;
-		margin-block: 2rem;
-	}
-	label{
-		font-size: 1.2em;
-	}
-	input{
-		display: block;
-		font-size: 1.2rem;
-	}
-	button{
-		 background-color: var(--red);
-		 color: white;
-		 border: none;
-		 padding: 0.5em 1em;
-		 font-size: 1.3em;
-		 border-radius: 1000px;
-		 margin-top: 1em;
-	}
-	@media screen and (max-width: 600px){
-		form{
-			margin-top: 0;
-		}
-	}
-
-</style>
+<script>
+import "$lib/css/form.css"
+</script>
 <form action="?/login" method=POST>
 	<h1>Log In</h1>
 	<label>
-		Username
-		<input type="text" name="username">
+		Benutzername
+		<input type="text" name="username" required>
 	</label>
 	<label>
 		Passwort
-		<input  name="password" type="password">
+		<input  name="password" type="password" required>
 	</label>
 
 	<button type="submit">Log In</button>
+	<p>Noch keinen Account? <a href=/register>Hier registrieren</a>.</p>
 </form>
diff --git a/src/routes/(main)/register/+page.svelte b/src/routes/(main)/register/+page.svelte
index 1eef7e4..c9124c1 100644
--- a/src/routes/(main)/register/+page.svelte
+++ b/src/routes/(main)/register/+page.svelte
@@ -1,49 +1,18 @@
-<style>
-	form{
-		background-color: var(--nord5);
-		display: flex;
-		flex-direction: column;
-		max-width: 600px;
-		gap: 0.5em;
-		margin-inline: auto;
-		justify-content: center;
-		align-items: center;
-		padding-block: 2rem;
-		margin-block: 2rem;
-	}
-	label{
-		font-size: 1.2em;
-	}
-	input{
-		display: block;
-		font-size: 1.2rem;
-	}
-	button{
-		 background-color: var(--red);
-		 color: white;
-		 border: none;
-		 padding: 0.5em 1em;
-		 font-size: 1.3em;
-		 border-radius: 1000px;
-		 margin-top: 1em;
-	}
-	@media screen and (max-width: 600px){
-		form{
-			margin-top: 0;
-		}
-	}
-
-</style>
+<script>
+import "$lib/css/form.css"
+</script>
 
 <form action="?/register" method=POST>
-	<h1>Register</h1>
+	<h1>Regrieren</h1>
 	<label>
 		Username
-		<input type="text" name="username">
+		<input type="text" name="username" required>
 	</label>
 	<label>
 		Passwort
-		<input  name="password" type="password">
+		<input  name="password" type="password" required>
 	</label>
-	<button type="submit">Register</button>
+	<button type="submit">Registrieren</button>
+	<h4>Hinweis:</h4>
+	<p>Dein Account wird keine Rechte haben bis ein Administrator dir welche gibt. Bis dahin ist der Account relativ nutzlos.</p>
 </form>