app/authentication/forms.py

@@ -0,0 +1,12 @@
+from django import forms
+from django.contrib.auth.forms import UserCreationForm
+from django.contrib.auth.models import User
+
+class CustomUserCreationForm(UserCreationForm):
+    first_name = forms.CharField(required=True)
+    last_name = forms.CharField(required=True)
+    email = forms.EmailField(required=True)
+
+    class Meta:
+        model = User
+        fields = ("username", "first_name", "last_name", "email", "password1", "password2")

app/authentication/templates/authentication/login.html

@@ -22,6 +22,7 @@
       {% endif %}
 
       <div class="flex flex-col gap-8">
+
         <div class="flex flex-col">
           {% render_field form.username|add_error_class:"error" %}
           <label class="text-sm text-accent-800 font-semibold" for="{{ form.username.id_for_label }}">
@@ -49,6 +50,7 @@
             </div>
           {% endif %}
         </div>
+
       </div>
 
       <input class="max-w-64" type="submit" value="Log In">

app/authentication/templates/authentication/register-continue.html

@@ -1,5 +1,6 @@
 {% extends 'core/base.html' %}
 {% load static %}
+{% load widget_tweaks %}
 {% block title %}
   Medwings | Sign Up
 {% endblock title %}
@@ -9,9 +10,136 @@
     <h2>Register</h2>
     <form method="post">
       {% csrf_token %}
-      {{ user_form }}
+      <fieldset class="flex flex-col gap-4 items-center max-w-sm sm:max-w-lg">
-      {{ profile_form }}
+        <legend>Please enter your profile information</legend>
-      <button type="submit">Register</button>
+
+        {% if form.non_field_errors %}
+          <div class="flex flex-col gap-2 status-message error">
+            {% for error in form.non_field_errors %}
+              <p class="error">{{ error }}</p>
+            {% endfor %}
+          </div>
+        {% endif %}
+
+        <div class="flex flex-col sm:flex-none sm:grid sm:grid-cols-2 gap-6">
+
+          <div class="flex flex-col">
+            {% render_field user_form.first_name|add_error_class:"error" %}
+            <label class="text-sm text-accent-800 font-semibold" for="{{ user_form.first_name.id_for_label }}">
+                {% render_field user_form.first_name.label %}
+            </label>
+            {% if user_form.first_name.errors %}
+              <div class="flex flex-col gap-2 status-message error">
+                {% for error in user_form.first_name.errors %}
+                  <p class="error">{{ error }}</p>
+                {% endfor %}
+              </div>
+            {% endif %}
+          </div>
+
+          <div class="flex flex-col">
+            {% render_field user_form.last_name|add_error_class:"error" %}
+            <label class="text-sm text-accent-800 font-semibold" for="{{ user_form.last_name.id_for_label }}">
+                {% render_field user_form.last_name.label %}
+            </label>
+            {% if user_form.last_name.errors %}
+              <div class="flex flex-col gap-2 status-message error">
+                {% for error in user_form.last_name.errors %}
+                  <p class="error">{{ error }}</p>
+                {% endfor %}
+              </div>
+            {% endif %}
+          </div>
+
+          <div class="flex flex-col">
+            {% render_field profile_form.date_of_birth|add_error_class:"error" %}
+            <label class="text-sm text-accent-800 font-semibold" for="{{ profile_form.date_of_birth.id_for_label }}">
+                {% render_field profile_form.date_of_birth.label %}
+            </label>
+            {% if profile_form.date_of_birth.errors %}
+              <div class="flex flex-col gap-2 status-message error">
+                {% for error in profile_form.date_of_birth.errors %}
+                  <p class="error">{{ error }}</p>
+                {% endfor %}
+              </div>
+            {% endif %}
+          </div>
+
+          <div class="flex flex-col">
+            {% render_field profile_form.sex|add_error_class:"error" %}
+            <label class="text-sm text-accent-800 font-semibold" for="{{ profile_form.sex.id_for_label }}">
+                {% render_field profile_form.sex.label %}
+            </label>
+            {% if profile_form.sex.errors %}
+              <div class="flex flex-col gap-2 status-message error">
+                {% for error in profile_form.sex.errors %}
+                  <p class="error">{{ error }}</p>
+                {% endfor %}
+              </div>
+            {% endif %}
+          </div>
+
+          <div class="flex flex-col">
+            {% render_field user_form.email|add_error_class:"error" %}
+            <label class="text-sm text-accent-800 font-semibold" for="{{ user_form.email.id_for_label }}">
+                {% render_field user_form.email.label %}
+            </label>
+            {% if user_form.email.errors %}
+              <div class="flex flex-col gap-2 status-message error">
+                {% for error in user_form.email.errors %}
+                  <p class="error">{{ error }}</p>
+                {% endfor %}
+              </div>
+            {% endif %}
+          </div>
+
+          <div class="flex flex-col">
+            {% render_field user_form.username|add_error_class:"error" %}
+            <label class="text-sm text-accent-800 font-semibold" for="{{ user_form.username.id_for_label }}">
+                {% render_field user_form.username.label %}
+            </label>
+            {% if user_form.username.errors %}
+              <div class="flex flex-col gap-2 status-message error">
+                {% for error in user_form.username.errors %}
+                  <p class="error">{{ error }}</p>
+                {% endfor %}
+              </div>
+            {% endif %}
+          </div>
+
+          <div class="flex flex-col">
+            {% render_field user_form.password1|add_error_class:"error" %}
+            <label class="text-sm text-accent-800 font-semibold" for="{{ user_form.password1.id_for_label }}">
+                {% render_field user_form.password1.label %}
+            </label>
+            {% if user_form.password1.errors %}
+              <div class="flex flex-col gap-2 status-message error">
+                {% for error in user_form.password1.errors %}
+                  <p class="error">{{ error }}</p>
+                {% endfor %}
+              </div>
+            {% endif %}
+          </div>
+
+          <div class="flex flex-col">
+            {% render_field user_form.password2|add_error_class:"error" %}
+            <label class="text-sm text-accent-800 font-semibold" for="{{ user_form.password2.id_for_label }}">
+                {% render_field user_form.password2.label %}
+            </label>
+            {% if user_form.password2.errors %}
+              <div class="flex flex-col gap-2 status-message error">
+                {% for error in user_form.password2.errors %}
+                  <p class="error">{{ error }}</p>
+                {% endfor %}
+              </div>
+            {% endif %}
+          </div>
+
+        </div>
+
+        <input class="max-w-64" type="submit" value="Register">
+
+      </fieldset>
     </form>
   </div>
 {% endblock content %}

app/authentication/views.py

@@ -7,7 +7,6 @@ from django.conf import settings
 from django.urls import reverse
 from django.core.exceptions import PermissionDenied
 from django.http import HttpResponseBadRequest
-from django.contrib.auth.forms import UserCreationForm
 from django.utils.dateparse import parse_datetime
 
 import withings.api
@@ -15,6 +14,7 @@ import withings.models
 import gotify.api
 import gotify.models
 from medwings.forms import ProfileForm
+from .forms import CustomUserCreationForm
 
 
 def register_init(request):
@@ -56,15 +56,7 @@ def register_continue(request):
     if not request.session.get('spoof_protection_token', None) == authorization_state:
         return HttpResponseBadRequest()
 
-    if request.method == 'POST':
+    if request.method == 'GET':
-        user_form = UserCreationForm(request.POST)
-        profile_form = ProfileForm(request.POST)
-
-        if user_form.is_valid() and profile_form.is_valid():
-            user = user_form.save(commit=False)
-            profile = profile_form.save(commit=False)
-            profile.user = user
-
         # Fetch access and refresh tokens and save them to session storage
         redirect_uri = request.build_absolute_uri(reverse('register-continue'))
         response_data = withings.api.fetch_initial_tokens(authorization_code, redirect_uri)
@@ -72,6 +64,18 @@ def register_continue(request):
             return HttpResponseBadRequest()
         withings.api.save_tokens_to_session(request, response_data)
 
+        user_form = CustomUserCreationForm()
+        profile_form = ProfileForm()
+
+    else:
+        user_form = CustomUserCreationForm(request.POST)
+        profile_form = ProfileForm(request.POST)
+
+        if user_form.is_valid() and profile_form.is_valid():
+            user = user_form.save(commit=False)
+            profile = profile_form.save(commit=False)
+            profile.user = user
+
             user_password = request.POST.get('password1')
             gotify_user_info = gotify.api.create_user(user.username, user_password)
             gotify_app_info = gotify.api.create_application(user.username, user_password)
@@ -113,10 +117,6 @@ def register_continue(request):
             # TODO redirect user to some other page and ask them to log in
             return redirect('dashboard')
 
-    else:
-        user_form = UserCreationForm()
-        profile_form = ProfileForm()
-
     context = {
         'user_form': user_form,
         'profile_form': profile_form,

assets/css/styles.css

@@ -47,6 +47,16 @@ input[type="submit"] {
   @apply hover:drop-shadow-xl;
 }
 
+select {
+  @apply rounded rounded-md drop-shadow-sm px-2 py-1;
+  @apply bg-accent-100;
+  @apply w-full;
+}
+
+select.error {
+  @apply border border-failure;
+}
+
 input.error {
   @apply border border-failure;
 }