Besser aussehendes Register-Form und answer.html richtig eingebunden

.gitignore

@@ -1,4 +1,4 @@
 __pycache__
 .venv
 db.sqlite3
-tailwindcss-windows-x64.exe
+tailwindcss.exe

core/accounts/forms.py

@@ -1,8 +1,22 @@
 from django import forms
 from django.contrib.auth.forms import UserCreationForm
 from django.contrib.auth.models import User
+from django import forms
 
 class RegisterForm(UserCreationForm):
     class Meta:
         model=User
         fields = ['username','password1','password2']
+        
+    username = forms.CharField(
+        widget=forms.TextInput(attrs={'placeholder': 'BENUTZERNAME'})
+    )
+    password1 = forms.CharField(
+        widget=forms.PasswordInput(attrs={'placeholder': 'PASSWORT'})
+    )
+    password2 = forms.CharField(
+        widget=forms.PasswordInput(attrs={'placeholder': 'PASSWORT WIEDERHOLEN'})
+    )
+
+
+

core/accounts/templates/accounts/login.html

@@ -6,6 +6,17 @@
     <div class="p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
         <h2 class="text-2xl text-center p-4 font-black">Anmeldung</h2>
         <form class="space-y-4" method="post">
+            {% if form.errors %}
+            <div class="text-red-600 font-black overflow-x-auto break-words text-center">
+                <ul>
+                    {% for field, errors in form.errors.items %}
+                        {% for error in errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
             {% csrf_token %}
             <div class="">
                 <input class="p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black" type="text" name="username" id="username" required placeholder="BENUTZERNAME">

core/accounts/templates/accounts/register.html

@@ -1,14 +1,52 @@
 {% extends 'accounts/base.html' %}
 {% block title %}Registrierung{% endblock %}
 {% block content %}
-<header>
+<div class="grid place-content-center h-120">
-    <h2>Registrierung</h2>
+    <div class=" p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
-</header>
+        <h2 class="text-2xl text-center p-4 font-black">Registrieren</h2>
-<div class="login-container">
+
-    <form method="POST" novalidate>
+        <form class=" space-y-4" method="post">
+            {% if form.errors %}
+            <div class="text-red-600 font-black overflow-hidden">
+                <ul>
+                    {% for field, errors in form.errors.items %}
+                        {% for error in errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    {% endfor %}
+                </ul>
+            </div>
+
+    {% endif %}
+
+            
             {% csrf_token %}
-        <h2>Sign Up</h2>
+            <div class="register">
-        {{ form.as_p }}		
+
-        <input type="submit" value="Register" />
+                {{ form.username }}
+
+            </div>
+            <div class="register">
+
+                {{ form.password1 }}
+
+            </div>
+            <div class="register">
+                
+                {{ form.password2 }}
+
+                </div>
+      
+            <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit" class="login-button">Registrieren</button>
         </form>
+        <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:login' %}" class="register_link">Bereits ein Konto?</a></button>
+
+
+            
+ 
+        
+    </div>
+    </div>
+
     {% endblock %}
+

core/components/templates/components/answer.html

@@ -2,20 +2,21 @@
 {% load static %}
 {% block title %}Antwort{% endblock %}
 {% block content %}
+<link rel="stylesheet" href="{% static 'homepage/t-style.css' %}">
 
-{% if <Bedingung> %} <!-- TODO Bedingung festlegen: Quiztyp unterscheiden -->
+ <!-- TODO Bedingung festlegen: Quiztyp unterscheiden % if <Bedingung> % -->
-  
+  {% if user.is_authenticated %}
 <button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-red-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)]  text-center text-white">1</button>
 <button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-indigo-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)]  text-center text-white">2</button>
 <button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4  border-gray-500 text-2xl font-black m-0.75 bg-yellow-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)]  text-center text-white">3</button>
 <button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-green-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">4</button>
 
+<!-- TODO wieder einfügen, wenn Bedingung gestetzt  -->
 {% else %}
-
+<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4  border-gray-500 text-2xl font-black m-0.75 bg-green-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)]  text-center text-white">wahr</button>
-<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4  border-gray-500 text-2xl font-black m-0.75 bg-yellow-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)]  text-center text-white">3</button>
+<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-red-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">falsch</button>
-<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-green-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">4</button>
 
     
+<!--TODO wieder einfügen, wenn Bedingung gestetzt plus   -->
 {% endif %}
-
 {% endblock %}

core/components/templates/components/base.html

@@ -1,3 +1,4 @@
+{% load static %}
 <!doctype html>
 <html>
   <head>

core/components/urls.py

@@ -8,6 +8,6 @@ app_name = 'components' # Namensraum zum verhindern von Konflikten zwischen Apps
 #
 
 urlpatterns = [
-    path('play/<int:pk>', views.play, name='play'),
+    path('<int:pk>', views.play, name='play'),
   
 ]

core/components/views.py

@@ -1,5 +1,5 @@
 from django.shortcuts import render
 
 # Create your views here.
-def play(request):
+def play(request,pk):     #
-    return render(request, 'components/answer.html')
+    return render(request, 'components/answer.html', {"pk": pk}) #

core/core/settings.py

@@ -32,6 +32,7 @@ ALLOWED_HOSTS = ['127.0.0.1', 'localhost', '*']
 
 INSTALLED_APPS = [
     'homepage.apps.HomepageConfig',
+    'components.apps.ComponentsConfig',
     'accounts.apps.AccountsConfig',
     'django.contrib.admin',
     'django.contrib.auth',

core/homepage/static/homepage/t-input.css

@@ -7,3 +7,4 @@ nav div ul.qp-nav-list li {
 a.qp-a-button {
     @apply p-6 rounded-md font-extrabold hover:scale-105 transition duration-300 shadow-md;
 }
+.register input{@apply p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black;}