Re-formats login and register pages

bookwyrm/forms.py

@@ -1,13 +1,32 @@
 ''' using django model forms '''
 import datetime
+from collections import defaultdict
 
-from django.forms import ModelForm, PasswordInput, widgets
 from django import forms
+from django.forms import ModelForm, PasswordInput, widgets
+from django.forms.widgets import Textarea
 
 from bookwyrm import models
 
 
-class LoginForm(ModelForm):
+class CustomForm(ModelForm):
+    ''' add css classes to the forms '''
+    def __init__(self, *args, **kwargs):
+        css_classes = defaultdict(lambda: '')
+        css_classes['text'] = 'input'
+        css_classes['password'] = 'input'
+        css_classes['email'] = 'input'
+        css_classes['checkbox'] = 'checkbox'
+        css_classes['textarea'] = 'textarea'
+        super(CustomForm, self).__init__(*args, **kwargs)
+        for visible in self.visible_fields():
+            if hasattr(visible.field.widget, 'input_type'):
+                input_type = visible.field.widget.input_type
+            if isinstance(visible.field.widget, Textarea):
+                input_type = 'textarea'
+            visible.field.widget.attrs['class'] = css_classes[input_type]
+
+class LoginForm(CustomForm):
     class Meta:
         model = models.User
         fields = ['username', 'password']
@@ -17,7 +36,7 @@ class LoginForm(ModelForm):
         }
 
 
-class RegisterForm(ModelForm):
+class RegisterForm(CustomForm):
     class Meta:
         model = models.User
         fields = ['username', 'email', 'password']
@@ -27,13 +46,13 @@ class RegisterForm(ModelForm):
         }
 
 
-class RatingForm(ModelForm):
+class RatingForm(CustomForm):
     class Meta:
         model = models.Review
         fields = ['rating']
 
 
-class ReviewForm(ModelForm):
+class ReviewForm(CustomForm):
     class Meta:
         model = models.Review
         fields = ['name', 'content']
@@ -44,7 +63,7 @@ class ReviewForm(ModelForm):
         }
 
 
-class CommentForm(ModelForm):
+class CommentForm(CustomForm):
     class Meta:
         model = models.Comment
         fields = ['content']
@@ -54,7 +73,7 @@ class CommentForm(ModelForm):
         }
 
 
-class QuotationForm(ModelForm):
+class QuotationForm(CustomForm):
     class Meta:
         model = models.Quotation
         fields = ['quote', 'content']
@@ -65,7 +84,7 @@ class QuotationForm(ModelForm):
         }
 
 
-class ReplyForm(ModelForm):
+class ReplyForm(CustomForm):
     class Meta:
         model = models.Status
         fields = ['content']
@@ -73,14 +92,14 @@ class ReplyForm(ModelForm):
         labels = {'content': 'Comment'}
 
 
-class EditUserForm(ModelForm):
+class EditUserForm(CustomForm):
     class Meta:
         model = models.User
         fields = ['avatar', 'name', 'summary', 'manually_approves_followers']
         help_texts = {f: None for f in fields}
 
 
-class TagForm(ModelForm):
+class TagForm(CustomForm):
     class Meta:
         model = models.Tag
         fields = ['name']
@@ -88,14 +107,14 @@ class TagForm(ModelForm):
         labels = {'name': 'Add a tag'}
 
 
-class CoverForm(ModelForm):
+class CoverForm(CustomForm):
     class Meta:
         model = models.Book
         fields = ['cover']
         help_texts = {f: None for f in fields}
 
 
-class EditionForm(ModelForm):
+class EditionForm(CustomForm):
     class Meta:
         model = models.Edition
         exclude = [
@@ -135,7 +154,7 @@ class ExpiryWidget(widgets.Select):
 
         return datetime.datetime.now() + interval
 
-class CreateInviteForm(ModelForm):
+class CreateInviteForm(CustomForm):
     class Meta:
         model = models.SiteInvite
         exclude = ['code', 'user', 'times_used']

bookwyrm/templates/feed.html

@@ -2,8 +2,7 @@
 {% load fr_display %}
 {% block content %}
 
-<section class="section">
+<div>
-    <div>
     {% for activity in activities %}
     <div class="block">
     {% include 'snippets/status.html' with status=activity %}
@@ -29,7 +28,5 @@
         </p>
         {% endif %}
     </div>
-    </div>
+</div>
-</section>
-
 {% endblock %}

bookwyrm/templates/layout.html

@@ -46,12 +46,14 @@
     <input class="toggle-control" type="checkbox" id="main-nav">
     <div id="mainNav" class="navbar-menu toggle-content">
         <div class="navbar-start">
+            {% if request.user.is_authenticated %}
             <a href="/#feed" class="navbar-item">
                 Feed
             </a>
             <a href="/user/{{request.user.localname}}/shelves" class="navbar-item">
                 Your Books
             </a>
+            {% endif %}
         </div>
 
         <div class="navbar-end">
@@ -101,7 +103,7 @@
 </nav>
 
 
-<div>
+<div class="section">
     {% block content %}
     {% endblock %}
 </div>

bookwyrm/templates/login.html

@@ -1,52 +1,45 @@
 {% extends 'layout.html' %}
 {% block content %}
 
-<div class="content-container">
+<div class="columns">
-    <h2>About {{ site_settings.name }}</h2>
+<div class="column">
-    <p>
+    <h2 class="title">About {{ site_settings.name }}</h2>
+    <p class="block">
         {{ site_settings.instance_description }}
     </p>
 
-    <p>
+    <p class="block">
-    <small>
         <a href="/about/">More about this site</a>
-    </small>
+    </p>
+
+    <p class="block">
+        <a href="/register" class="button is-link">Create an Account</a>
     </p>
 </div>
 
-<div class="row">
+<div class="column">
-<div class="content-container login">
+    <h2 class="title">Log in</h2>
-    <h2>Create an Account</h2>
-    <p><small>
-        With a BookWyrm account, you can track and share your reading activity with
-        friends here and on any other federated server, like Mastodon and PixelFed.
-    </small></p>
 
-    {% if site_settings.allow_registration %}
+    <div class="block">
-    <div>
-        <form name="register" method="post" action="/register">
-            {% csrf_token %}
-            {{ register_form.as_p }}
-            <button type="submit">Create account</button>
-        </form>
-    </div>
-    {% else %}
-
-    <small>
-    This instance is not open for registration.
-    </small>
-    {% endif %}
-</div>
-
-<div class="content-container login">
-    <h2>Log in</h2>
-    <div>
         <form name="login" method="post" action="/user-login">
             {% csrf_token %}
-            {{ login_form.as_p }}
+            <div class="field">
-            <button type="submit">Log in</button>
+                <label class="label" for="id_username">Username:</label>
+                <div class="control">{{ login_form.username }}</div>
+            </div>
+            <div class="field">
+                <label class="label" for="id_password">Password:</label>
+                <div class="control">{{ login_form.password }}</div>
+            </div>
+            <div class="field is-grouped">
+                <div class="control">
+                    <button class="button is-primary" type="submit">Log in</button>
+                </div>
+                <div class="control">
+                    <small><a href="/reset-password">Forgot your password?</a></small>
+                </div>
+            </div>
         </form>
-        <p><small><a href="/reset-password">Forgot your password?</a></small></p>
     </div>
 </div>
 

bookwyrm/templates/register.html

@@ -0,0 +1,49 @@
+{% extends 'layout.html' %}
+{% block content %}
+
+<div class="columns">
+<div class="column">
+    <h2 class="title">About {{ site_settings.name }}</h2>
+    <p class="block">
+        {{ site_settings.instance_description }}
+    </p>
+
+    <p class="block">
+        <a href="/about/">More about this site</a>
+    </p>
+
+    <p class="block">
+        <a href="/login" class="button is-link">Log In</a>
+    </p>
+</div>
+
+<div class="column">
+    <h2 class="title">Create an Account</h2>
+
+    <div class="block">
+        <form name="register" method="post" action="/user-register">
+            {% csrf_token %}
+            <div class="field">
+                <label class="label" for="id_username">Username:</label>
+                <div class="control">{{ register_form.username }}</div>
+            </div>
+            <div class="field">
+                <label class="label" for="id_email">Email address:</label>
+                <div class="control">{{ register_form.email }}</div>
+            </div>
+            <div class="field">
+                <label class="label" for="id_password">Password:</label>
+                <div class="control">{{ register_form.password }}</div>
+            </div>
+            <div class="field is-grouped">
+                <div class="control">
+                    <button class="button is-primary" type="submit">Sign Up</button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+</div>
+{% endblock %}
+

bookwyrm/urls.py

@@ -38,6 +38,7 @@ urlpatterns = [
 
     # ui views
     re_path(r'^login/?$', views.login_page),
+    re_path(r'^register/?$', views.register_page),
     re_path(r'^about/?$', views.about_page),
     re_path(r'^invite/(?P<code>[A-Za-z0-9]+)/?$', views.invite_page),
     re_path(r'^manage_invites/?$', views.manage_invites),
@@ -84,7 +85,7 @@ urlpatterns = [
     # internal action endpoints
     re_path(r'^logout/?$', actions.user_logout),
     re_path(r'^user-login/?$', actions.user_login),
-    re_path(r'^register/?$', actions.register),
+    re_path(r'^user-register/?$', actions.register),
     re_path(r'^edit_profile/?$', actions.edit_profile),
 
     re_path(r'^import_data/?', actions.import_data),

bookwyrm/views.py

@@ -216,6 +216,16 @@ def login_page(request):
     return TemplateResponse(request, 'login.html', data)
 
 
+def register_page(request):
+    ''' authentication '''
+    # send user to the login page
+    data = {
+        'site_settings': models.SiteSettings.get(),
+        'register_form': forms.RegisterForm(),
+    }
+    return TemplateResponse(request, 'register.html', data)
+
+
 def about_page(request):
     ''' more information about the instance '''
     data = {