From ceb0a2cc68f79323343bc5afffac2f5431b21af6 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Mon, 3 Aug 2020 17:29:25 +0200
Subject: [PATCH] Better Rendering of Forms

---
 Pipfile                                       |  1 +
 .../templates/partials/form/inputField.html   | 16 +++++++++
 lostplaces/templates/signup.html              | 35 ++++++++++++++++---
 3 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 lostplaces/lostplaces_app/templates/partials/form/inputField.html

diff --git a/Pipfile b/Pipfile
index 14409c7..0559c57 100644
--- a/Pipfile
+++ b/Pipfile
@@ -10,6 +10,7 @@ pylint = "*"
 django = "*"
 django-thumbs-v2 = "*"
 image = "*"
+django-widget-tweaks = "*"
 # Commented out to not explicitly specify Python3 subversion.
 # [requires]
 # python_version = "3.8"
diff --git a/lostplaces/lostplaces_app/templates/partials/form/inputField.html b/lostplaces/lostplaces_app/templates/partials/form/inputField.html
new file mode 100644
index 0000000..4206f51
--- /dev/null
+++ b/lostplaces/lostplaces_app/templates/partials/form/inputField.html
@@ -0,0 +1,16 @@
+{% load widget_tweaks %}
+
+<div class="LP-Input {% if field.errors %} LP-Input--error {% endif %}">
+	<label for="{{field.id_for_label}}" class="LP-Input__Label">{{field.label}}</label>
+	{% render_field field class="LP-Input__Field"%}
+
+	<span class="LP-Input__Message">
+		{% if field.errors %} 
+			{% for error in field.errors%}
+				{{error}}
+			{% endfor %}
+		{% elif field.help_text%}
+			{{ field.help_text }}
+		{% endif %}
+	</span>
+</div>
\ No newline at end of file
diff --git a/lostplaces/templates/signup.html b/lostplaces/templates/signup.html
index 47e2598..abfce8d 100644
--- a/lostplaces/templates/signup.html
+++ b/lostplaces/templates/signup.html
@@ -1,15 +1,40 @@
 {% extends 'global.html'%}
 {% load static %}
+{% load widget_tweaks %}
 
 # {% block title %}Registrierung{% endblock %}
 
 {% block maincontent %}
 
-<h2>Registrierung</h2>
-<form method="post">
-  {% csrf_token %}
-  {{ form.as_p }}
-  <button type="submit">Sign up</button>
+<form class="LP-Form" method="POST">
+	<fieldset class="LP-Form__Fieldset">
+		<legend class="LP-Form__Legend">Registrierung</legend>
+		{% csrf_token %}
+		<div class="LP-Form__Composition LP-Form__Composition--breakable">
+			<div class="LP-Form__Field">
+				{% include 'partials/form/inputField.html' with field=form.username %}
+			</div>
+			<div class="LP-Form__Field">
+				{% include 'partials/form/inputField.html' with field=form.email %}
+			</div>
+		</div>
+
+		<div class="LP-Form__Composition">
+			<div class="LP-Form__Field">
+				{% include 'partials/form/inputField.html' with field=form.password1 %}
+			</div>
+		</div>
+		<div class="LP-Form__Composition">
+			<div class="LP-Form__Field">
+				{% include 'partials/form/inputField.html' with field=form.password2 %}
+			</div>
+		</div>
+
+		<div class="LP-Form__Composition">
+			<input type="submit" class="LP-Button" value="Registrieren"/>
+		</div>
+	</fieldset>
+
 </form>
 
 {% endblock maincontent %}
\ No newline at end of file