User registration styling

apps/accounts/forms.py

@@ -1,12 +1,13 @@
 from django import forms
 from django.contrib.auth import password_validation
-from django.contrib.auth.forms import (
-    AuthenticationForm as BaseAuthenticatonForm, UserChangeForm as BaseUserChangeForm,
+from django.contrib.auth.forms import (  # yapf: disable
+    AuthenticationForm as BaseAuthenticatonForm, PasswordResetForm as BasePasswordResetForm,
+    SetPasswordForm as BaseSetPasswordForm, UserChangeForm as BaseUserChangeForm,
     UserCreationForm as BaseUserCreationForm
 )
 
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import HTML, Layout, Submit
+from crispy_forms.layout import HTML, ButtonHolder, Div, Field, Layout, Submit
 
 from .models import User
 
@@ -54,7 +55,7 @@ class Meta:
             'chosen_organisations': 'Groups',
         }
         help_texts = {
-            'chosen_organisations': '',
+            'chosen_organisations': 'Check all of the options that apply to you',
         }
         widgets = {
             'address': forms.TextInput(),
@@ -67,7 +68,24 @@ def __init__(self, *args, **kwargs):
         self.fields['chosen_organisations'].required = True
 
         self.helper = FormHelper()
-        self.helper.add_input(Submit('submit', 'Submit'))
+        self.helper.layout = Layout(
+            'email',
+            'password',
+            'confirm_password',
+            'first_name',
+            'last_name',
+            'chosen_organisations',
+            Div(
+                Field('photo', css_class="sr__input"),
+                Div(css_class='file-mount'),
+                css_class='file-group'
+            ),
+            'phone',
+            'address',
+            ButtonHolder(
+                Submit('submit', 'Apply for access', css_class='submit'), css_class='form-actions'
+            ),
+        )
 
     def save(self, commit=True):
         password = self.cleaned_data['confirm_password']
@@ -96,9 +114,17 @@ class LoginForm(BaseAuthenticatonForm):
     def __init__(self, request=None, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.helper = FormHelper()
-        self.helper.add_input(Submit('submit', 'Submit'))
         self.helper.layout = Layout(
             'username', 'password',
+            ButtonHolder(
+                HTML(
+                    """
+                    <a href="{% url 'accounts:password-reset' %}">Forgot your password?</a>
+                    """
+                ),
+                Submit('submit', 'Login', css_class='submit'),
+                css_class='form-actions'
+            ),
             HTML(
                 """
                 {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
@@ -107,6 +133,22 @@ def __init__(self, request=None, *args, **kwargs):
         )
 
 
+class PasswordResetForm(BasePasswordResetForm):
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper = FormHelper()
+        self.helper.form_tag = False
+
+
+class SetPasswordForm(BaseSetPasswordForm):
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper = FormHelper()
+        self.helper.form_tag = False
+
+
 class UserUpdateForm(forms.ModelForm):
 
     class Meta:

apps/accounts/urls.py

@@ -2,7 +2,7 @@
 from django.contrib.auth import views
 from django.urls import reverse_lazy
 
-from .forms import LoginForm
+from .forms import LoginForm, PasswordResetForm, SetPasswordForm
 from .views import UserCreateView, UserDetailView, UserUpdateView
 
 app_name = 'accounts'
@@ -16,19 +16,27 @@
         ),
         name='login'
     ),
-    url(r'^logout/$', views.LogoutView.as_view(), name='logout'),
+    url(
+        r'^logout/$',
+        views.LogoutView.as_view(
+            template_name='accounts/logout.html',
+        ),
+        name='logout'
+    ),
     url(
         r'^password-reset/$',
         views.PasswordResetView.as_view(
-            template_name='accounts/password_reset_form.html',
             email_template_name='accounts/emails/password_reset_email.html',
+            form_class=PasswordResetForm,
             success_url=reverse_lazy('accounts:password-reset-done'),
+            template_name='accounts/password_reset_form.html',
         ),
         name='password-reset',
     ),
     url(
         r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$',
         views.PasswordResetConfirmView.as_view(
+            form_class=SetPasswordForm,
             template_name='accounts/password_reset_confirm.html',
             success_url=reverse_lazy('accounts:password-reset-complete'),
         ),

static/src/js/accounts/registration.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+
+const file_fields = [...document.querySelectorAll('.file-group')];
+
+class FileUploader extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      currentFile: null,
+      toClear: false
+    }
+
+    this.handleUpload = this.handleUpload.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.getFileStats = this.getFileStats.bind(this);
+  }
+
+  handleUpload(uploadEvent) {
+    const file = uploadEvent.target.files[0];
+
+    this.setState({
+      currentFile: file
+    })
+  }
+
+  handleClear() {
+    this.setState(prevState => {
+      toClear: !prevState.toClear
+    })
+  }
+
+  getFileStats() {
+    if (this.state.currentFile !== null) {
+      return (
+        <div className="file-uploader__stats">
+          <span className="file-name">{this.state.currentFile.name}, </span>
+          <span className="file-size">{Math.floor(this.state.currentFile.size/1024)}kb</span>
+        </div>
+      )
+    } else if (this.props.inputFile !== null) {
+      return (
+        <div className="file-uploader__stats">
+          <span className="file-name">{this.props.inputFile.textContent}, </span>
+        </div>
+      )
+    } else {
+      return (
+        <div className="file-uploader__stats">
+          <span className="file-name">No file selected.</span>
+        </div>
+      )
+    }
+  }
+
+  render() {
+    this.props.input.remove();
+
+    const fileStats = this.getFileStats();
+    let fileClear = '';
+
+    if (this.props.inputClear) {
+      fileClear = <label for={this.props.inputClear.is} onChange={this.handleClear}></label>
+    }
+
+    return(
+      <div>
+        <input
+          type="file"
+          className="sr__input"
+          name={this.props.input.name}
+          id={this.props.input.id}
+          onChange={this.handleUpload}/>
+        <div className="file-uploader">
+          <label htmlFor={this.props.input.id} className="button input">
+            Pick a file
+          </label>
+          {fileStats}
+        </div>
+        {fileClear}
+      </div>
+    )
+  }
+}
+
+file_fields.map(field => {
+  const mountPoint = field.querySelector('.file-mount');
+  const input = field.querySelector('input[type=file]');
+  const inputClear = field.querySelector('input[type=checkbox]');
+  const inputFile = field.querySelector('a');
+
+  ReactDOM.render(
+    <FileUploader
+      input={input}
+      inputFile={inputFile}
+      inputClear={inputClear}
+      />,
+    mountPoint
+  )
+});
+

static/src/js/index.jsx

@@ -7,13 +7,13 @@ import { Resource } from './resource/resource';
 import { ResourceFilter } from './resource/resource_filter';
 
 
-const ResourceData = require('./data_sample/resources.json');
+const resourceData = require('./data_sample/resources.json');
 
 class ResourceList extends React.Component {
   constructor () {
     super()
     this.state = {
-      resources: ResourceData
+      resources: resourceData
     }
 
     // handler binds

static/src/js/resource/resource_filter.jsx

@@ -2,6 +2,18 @@ import React from 'react';
 
 import { ResourceFilterOption } from './resource_filter_option';
 
+const alphabeticalData = require('../data_sample/alphabetical.json');
+const dateData = require('../data_sample/date.json');
+const likedData = require('../data_sample/liked.json');
+const triedData = require('../data_sample/tried.json');
+
+const dataOrders = {
+    'date': dateData,
+    'alphabetical': alphabeticalData,
+    'liked': likedData,
+    'tried': triedData
+}
+
 export class ResourceFilter extends React.Component {
   constructor() {
     super();
@@ -21,9 +33,9 @@ export class ResourceFilter extends React.Component {
     }));
 
     // fake API call, replace with real one
-    fetch('http://127.0.0.1:8001/static/src/js/data_sample/' + filter + '.json')
-      .then(response => response.json())
-      .then(newData => this.props.updateResourceList(newData));
+    let newData = dataOrders[filter];
+
+    this.props.updateResourceList(newData);
   }
 
   render() {

static/src/js/search/search.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { SearchOptionManager } from './search_option_manager';
 
 const searchData = require('../data_sample/search.json');
+const newSearchData = require('../data_sample/new_search.json');
 
 
 export class Search extends React.Component {
@@ -27,13 +28,9 @@ export class Search extends React.Component {
 
     if (query.length > 2) {
       // fake API call, replace with real one
-      fetch('http://127.0.0.1:8001/static/src/js/data_sample/new_search.json')
-        .then(response => response.json())
-        .then(newData => {
-          this.setState({
-            searchOptions: newData
-          })
-        })
+      this.setState({
+        searchOptions: newSearchData
+      })
     } else {
       this.setState({
         searchOptions: searchData

static/src/scss/_variables.scss

@@ -47,7 +47,10 @@ $base-font-headline: 'Brandon';
 $color-text: #4A4A4A !default;
 $color-background: #000000 !default;
 $color-line: #E5E5E5 !default;
+$color-help: #B4B4B4 !default;
+$color-error: #FF206E !default;
 
+$color-accent-fixed: #50E3C2 !default;
 $color-accent: var(--page-group, #50E3C2) !default;
 
 // Size

static/src/scss/components/_accordion.scss

@@ -1,8 +1,8 @@
 .accordion {
-    margin: $width-gap 0;
-    padding: 0;
-    max-width: none;
+    margin: $width-gap*2 0;
     border-top: 3px solid $color-line;
+    max-width: none;
+    padding: 0;
 }
 
 .accordion-option {

static/src/scss/components/_buttons.scss

@@ -0,0 +1,25 @@
+.button,
+.btn {
+    display: inline-block;
+    padding: $width-gap;
+    font-family: $base-font-headline;
+    text-transform: uppercase;
+    border: none;
+    background: $color-accent-fixed;
+    font-size: 1.25rem;
+    font-weight: 600;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+        background: darken($color-accent-fixed, 5%);
+    }
+
+    &.input {
+        background: $color-line;
+
+        &:hover {
+            background: darken($color-line, 5%);
+        }
+    }
+}