Use extra pages for add_corpus and add_corpus_file forms.

app/corpora/forms.py

@@ -1,4 +1,5 @@
 from flask_wtf import FlaskForm
+from werkzeug.utils import secure_filename
 from wtforms import (FileField, StringField, SubmitField,
                      ValidationError, IntegerField, SelectField, TextAreaField)
 from wtforms.validators import DataRequired, Length

app/corpora/views.py

@@ -1,23 +1,22 @@
 from flask import (abort, current_app, flash, redirect, request,
-                   render_template, session, url_for, send_from_directory)
+                   render_template, url_for, send_from_directory)
 from flask_login import current_user, login_required
-from werkzeug import MultiDict
-from werkzeug.utils import secure_filename
 from . import corpora
 from .forms import (AddCorpusFileForm, AddCorpusForm, QueryDownloadForm,
                     QueryForm)
 from .. import db
 from ..models import Corpus, CorpusFile
+from werkzeug.utils import secure_filename
 import os
 import threading
 import logging
 
 
-@corpora.route('/add', methods=['POST'])
+@corpora.route('/add', methods=['GET', 'POST'])
 @login_required
 def add_corpus():
     add_corpus_form = AddCorpusForm()
-    if not add_corpus_form.validate_on_submit():
+    if add_corpus_form.validate_on_submit():
         corpus = Corpus(creator=current_user,
                         description=add_corpus_form.description.data,
                         title=add_corpus_form.title.data)
@@ -31,26 +30,21 @@ def add_corpus():
             flash('OSError!')
             db.session.remove(corpus)
             db.session.commit()
-        flash('Corpus created!')
+        flash('Corpus added!')
         return redirect(url_for('corpora.corpus', corpus_id=corpus.id))
+    return render_template('corpora/add_corpus.html.j2',
+                           add_corpus_form=add_corpus_form,
+                           title='Add corpus')
 
 
 @corpora.route('/<int:corpus_id>')
 @login_required
 def corpus(corpus_id):
-    add_corpus_file_form_data = session.pop('add_corpus_file_form_data',
-                                            default=None)
-    add_corpus_file_form = AddCorpusFileForm(
-        MultiDict(add_corpus_file_form_data)
-    )
-    if add_corpus_file_form_data is not None:
-        add_corpus_file_form.validate()
     corpus = Corpus.query.get_or_404(corpus_id)
     if not (corpus.creator == current_user or current_user.is_administrator()):
         abort(403)
-    return render_template('corpora/corpus.html.j2',
+    return render_template('corpora/corpus.html.j2', corpus=corpus,
-                           add_corpus_file_form=add_corpus_file_form,
+                           title='Corpus')
-                           corpus=corpus, title='Corpus')
 
 
 @corpora.route('/<int:corpus_id>/analysis', methods=['GET', 'POST'])
@@ -96,7 +90,7 @@ def delete_corpus(corpus_id):
     return redirect(url_for('main.dashboard'))
 
 
-@corpora.route('/<int:corpus_id>/files/add', methods=['POST'])
+@corpora.route('/<int:corpus_id>/files/add', methods=['GET', 'POST'])
 @login_required
 def add_corpus_file(corpus_id):
     corpus = Corpus.query.get_or_404(corpus_id)
@@ -114,18 +108,18 @@ def add_corpus_file(corpus_id):
         dir = os.path.join(str(corpus.user_id), 'corpora', str(corpus.id))
         file.save(os.path.join(current_app.config['OPAQUE_STORAGE_DIRECTORY'],
                                dir, filename))
-        author = add_corpus_file_form.author.data
+
-        publishing_year = add_corpus_file_form.publishing_year.data
+        corpus_file = CorpusFile(author=add_corpus_file_form.author.data,
-        title = add_corpus_file_form.title.data
+                                 corpus=corpus, dir=dir, filename=filename,
-        corpus_file = CorpusFile(author=author, corpus=corpus, dir=dir,
+                                 publishing_year=add_corpus_file_form.publishing_year.data,
-                                 filename=filename,
+                                 title=add_corpus_file_form.title.data)
-                                 publishing_year=publishing_year, title=title)
         db.session.add(corpus_file)
         db.session.commit()
         flash('Corpus file added!')
-    else:
-        session['add_corpus_file_form_data'] = request.form
         return redirect(url_for('corpora.corpus', corpus_id=corpus_id))
+    return render_template('corpora/add_corpus_file.html.j2',
+                           add_corpus_file_form=add_corpus_file_form,
+                           corpus=corpus, title='Add corpus file')
 
 
 @corpora.route('/<int:corpus_id>/files/<int:corpus_file_id>/delete')

app/templates/corpora/add_corpus.html.j2

@@ -0,0 +1,46 @@
+{% extends "limited_width.html.j2" %}
+{% block page_content %}
+<div class="col s12 m4">
+  <h3 id="title">...</h3>
+  <p id="description">Fill out the following form to add a corpus to your corpora.</p>
+  <a class="waves-effect waves-light btn" href="{{ url_for('main.dashboard') }}"><i class="material-icons left">arrow_back</i>Back to dashboard</a>
+</div>
+
+<div class="col s12 m8">
+  <div class="card">
+    <form method="POST">
+      <div class="card-content">
+        {{ add_corpus_form.hidden_tag() }}
+        <div class="row">
+          <div class="col s12 m4">
+            <div class="input-field">
+              <i class="material-icons prefix">title</i>
+              {{ add_corpus_form.title(data_length='32') }}
+              {{ add_corpus_form.title.label }}
+              {% for error in add_corpus_form.title.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12 m8">
+            <div class="input-field">
+              <i class="material-icons prefix">description</i>
+              {{ add_corpus_form.description(data_length='255') }}
+              {{ add_corpus_form.description.label }}
+              {% for error in add_corpus_form.description.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12">
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
+          </div>
+        </div>
+      </div>
+      <div class="card-action right-align">
+        <button class="btn waves-effect waves-light" id="submit" name="submit" type="submit">Submit<i class="material-icons right">send</i></button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}

app/templates/corpora/add_corpus_file.html.j2

@@ -0,0 +1,67 @@
+{% extends "limited_width.html.j2" %}
+{% block page_content %}
+<div class="col s12 m4">
+  <h3 id="title">{{ corpus.title }}</h3>
+  <p id="description">Fill out the following form to add a corpus file in verticalized text format (.vrt).</p>
+  <a class="waves-effect waves-light btn" href="{{ url_for('corpora.corpus', corpus_id=corpus.id) }}"><i class="material-icons left">arrow_back</i>Back to corpus</a>
+</div>
+
+<div class="col s12 m8">
+  <div class="card">
+    <form method="POST" enctype="multipart/form-data">
+      <div class="card-content">
+        {{ add_corpus_file_form.hidden_tag() }}
+        <div class="row">
+          <div class="col s12 m4">
+            <div class="input-field">
+              <i class="material-icons prefix">person</i>
+              {{ add_corpus_file_form.author(data_length='64') }}
+              {{ add_corpus_file_form.author.label }}
+              {% for error in add_corpus_file_form.author.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12 m4">
+            <div class="input-field">
+              <i class="material-icons prefix">title</i>
+              {{ add_corpus_file_form.title(data_length='64') }}
+              {{ add_corpus_file_form.title.label }}
+              {% for error in add_corpus_file_form.title.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12 m4">
+            <div class="input-field">
+              <i class="material-icons prefix">access_time</i>
+              {{ add_corpus_file_form.publishing_year() }}
+              {{ add_corpus_file_form.publishing_year.label }}
+              {% for error in add_corpus_file_form.publishing_year.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="col s12">
+            <div class="file-field input-field">
+              <div class="btn">
+                <span>{{ add_corpus_file_form.file.label.text }}</span>
+                {{ add_corpus_file_form.file(accept='.vrt') }}
+              </div>
+              <div class="file-path-wrapper">
+                <input class="file-path validate" type="text">
+              </div>
+              {% for error in add_corpus_file_form.file.errors %}
+                <span class="helper-text red-text">{{ error }}</span>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card-action right-align">
+        <button class="btn waves-effect waves-light" id="submit" name="submit" type="submit">Submit<i class="material-icons right">send</i></button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}

app/templates/corpora/corpus.html.j2

@@ -22,7 +22,7 @@
       <a href="{{ url_for('corpora.corpus_analysis', corpus_id=corpus.id) }}" class="waves-effect waves-light btn">
         <i class="material-icons left">help</i>Analyse
       </a>
-      <a data-target="add-corpus-file-modal" class="waves-effect waves-light btn modal-trigger">
+      <a href="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" class="waves-effect waves-light btn">
         <i class="material-icons left">add</i>Add corpus file
       </a>
       <a data-target="delete-corpus-modal" class="waves-effect waves-light btn red modal-trigger right">
@@ -69,64 +69,6 @@
 </div>
 
 <!-- Modals -->
-<div id="add-corpus-file-modal" class="modal">
-  <div class="modal-content">
-    <h4>Add corpus file</h4>
-    <form action="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" method="POST" enctype="multipart/form-data">
-      {{ add_corpus_file_form.hidden_tag() }}
-      <div class="row">
-        <div class="col s12 m4">
-          <div class="input-field">
-            <i class="material-icons prefix">person</i>
-            {{ add_corpus_file_form.author(data_length='64') }}
-            {{ add_corpus_file_form.author.label }}
-            {% for error in add_corpus_file_form.author.errors %}
-              <span class="helper-text red-text">{{ error }}</span>
-            {% endfor %}
-          </div>
-        </div>
-        <div class="col s12 m4">
-          <div class="input-field">
-            <i class="material-icons prefix">title</i>
-            {{ add_corpus_file_form.title(data_length='64') }}
-            {{ add_corpus_file_form.title.label }}
-            {% for error in add_corpus_file_form.title.errors %}
-              <span class="helper-text red-text">{{ error }}</span>
-            {% endfor %}
-          </div>
-        </div>
-        <div class="col s12 m4">
-          <div class="input-field">
-            <i class="material-icons prefix">access_time</i>
-            {{ add_corpus_file_form.publishing_year() }}
-            {{ add_corpus_file_form.publishing_year.label }}
-            {% for error in add_corpus_file_form.publishing_year.errors %}
-              <span class="helper-text red-text">{{ error }}</span>
-            {% endfor %}
-          </div>
-        </div>
-        <div class="col s12">
-          <div class="file-field input-field">
-            <div class="btn">
-              <span>{{ add_corpus_file_form.file.label.text }}</span>
-              {{ add_corpus_file_form.file(accept='.vrt') }}
-            </div>
-            <div class="file-path-wrapper">
-              <input class="file-path validate" type="text">
-            </div>
-            {% for error in add_corpus_file_form.file.errors %}
-              <span class="helper-text red-text">{{ error }}</span>
-            {% endfor %}
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn waves-effect waves-light" id="submit" name="submit" type="submit">Submit<i class="material-icons right">send</i></button>
-      </div>
-    </form>
-  </div>
-</div>
-
 <div id="delete-corpus-modal" class="modal">
   <div class="modal-content">
     <h4>Confirm corpus deletion</h4>

app/templates/main/dashboard.html.j2

@@ -19,7 +19,7 @@
             </div>
           </div>
           <div class="col s12 m4">
-            <p><a data-target="new-corpus-modal" class="waves-effect waves-light btn modal-trigger right"><i class="material-icons left">add</i>New corpus</a></p>
+            <p><a href="{{ url_for('corpora.add_corpus') }}" class="waves-effect waves-light btn right"><i class="material-icons left">add</i>New corpus</a></p>
           </div>
           <div class="col s12">
             <ul class="pagination"></ul>
@@ -85,43 +85,6 @@
   jobList.on("searchComplete", List.updatePagination);
 </script>
 
-<div id="new-corpus-modal" class="modal">
-  <div class="modal-content">
-    <h4>New corpus</h4>
-    <form action="{{ url_for('corpora.add_corpus') }}" method="POST">
-      {{ add_corpus_form.hidden_tag() }}
-      <div class="row">
-        <div class="col s12 m4">
-          <div class="input-field">
-            <i class="material-icons prefix">title</i>
-            {{ add_corpus_form.title(data_length='32') }}
-            {{ add_corpus_form.title.label }}
-            {% for error in add_corpus_form.title.errors %}
-              <span class="helper-text red-text">{{ error }}</span>
-            {% endfor %}
-          </div>
-        </div>
-        <div class="col s12 m8">
-          <div class="input-field">
-            <i class="material-icons prefix">description</i>
-            {{ add_corpus_form.description(data_length='255') }}
-            {{ add_corpus_form.description.label }}
-            {% for error in add_corpus_form.description.errors %}
-              <span class="helper-text red-text">{{ error }}</span>
-            {% endfor %}
-          </div>
-        </div>
-        <div class="col s12">
-          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn waves-effect waves-light" id="submit" name="submit" type="submit">Submit<i class="material-icons right">send</i></button>
-      </div>
-    </form>
-  </div>
-</div>
-
 <ul id='new-job-dropdown' class='dropdown-content'>
   <li><a href="{{ url_for('services.service', service_handle='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
   <li><a href="{{ url_for('services.service', service_handle='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>