Add a modal system for help messages

assets/app.js

 require('./app.css');
+
+import jQuery from 'jquery';
+import 'bootstrap';
+
+jQuery(document).ready(function() {
+  jQuery('.automodal').modal('show')
+})

trurt/__init__.py

@@ -27,7 +27,7 @@ def create_app_from_config(config):
     # Inject the default variables in the Jinja parser
     @app.context_processor
     def inject_defaults():
-        return dict(config=app.config)
+        return dict(config=app.config, utils=utils)
 
     # Import views
     from trurt import account, service, sso

trurt/account/login.py

@@ -15,8 +15,7 @@ def signin():
             return flask.redirect(utils.url_or_intent(".home"))
         else:
             flask.flash("Wrong credentials", "danger")
-    return flask.render_template("form.html", form=form,
-        title="Sign in", subtitle="to access your account",
+    return flask.render_template("account_signin.html", form=form,
         action=utils.url_for(".signin"))
 
 
@@ -47,5 +46,4 @@ def signup():
             models.db.session.commit()
             flask.flash("User created successfully", "success")
             return flask.redirect(utils.url_or_intent("account.home"))
-    return flask.render_template("account_signup.html", form=form,
-        title="Signup up", subtitle="for a new account")
+    return flask.render_template("account_signup.html", form=form)

trurt/account/templates/account_signin.html

+{% extends "form.html" %}
+
+{% block title %}Sign in{% endblock %}
+{% block subtitle %}to access your account{% endblock %}
+
+{% block help_title %}Welcome to Hiboo!{% endblock %}
+
+{% block help_body %}
+<p><strong>You were directed to Hiboo for authentication</strong>. Hiboo is our account manager, made so you only have to remember one password.</p>
+<p>Hiboo handles accounts for our services and allows you to own multiple profiles on each service.</p>
+<p>You can now sign in to your Hiboo account. If you do not own one already (which is very probable if this is your first time here), please sign up first.</p>
+<p>If you already have a profile on the service you are authenticating for, no panic necessary: you will be able to claim it once logged into Hiboo!</p>
+{% endblock %}
+
+{% block help_buttons %}
+<a href="{{ utils.url_for("account.signup") }}" class="btn btn-primary">Sign up</a>
+{% endblock %}

trurt/account/templates/account_signup.html

-{% extends "base.html" %}
+{% extends "form.html" %}
 
-{% block content %}
-<div class="box">
-  <div class="box-body">
-    <p>This account is only meant to access the authentication service. You will then be able to create per-service
-    profiles with different usernames and settings.</p>
-  </div>
-</div>
-{{ macros.form(form) }}
+{% block title %}Sign up{% endblock %}
+{% block subtitle %}for a new account{% endblock %}
+
+{% block help_title %}I want a new account!{% endblock %}
+
+{% block help_body %}
+<p>You are about to sign up for a new Hiboo account.</p>
+<p>First, please note that you should only need one Hiboo account. If you own one already, please use it. If you need a profile with a different username, Hiboo makes it possible with a single account! Please contact us if you are having trouble.</p>
+<p>The username that you are about to choose will be your Hiboo username and cannot be changed later. It does not have to be identical to your name on every service, you will be free to create profiles under any pseudonyme you want (if avaiable).</p>
+<p>This username might be used directly on certain services though (where you are only allowed a single profile), in which case you will be notified first.</p>
+<p>Please (please!) use a decent password and memorize it. We do not wish to collect data on who you are. That also means it is dificult for us to verify who you are and reset your password.</p>
 {% endblock %}

trurt/templates/base.html

@@ -41,6 +41,12 @@
                 </a>
               </li>
               {% endif %}
+              <li class="dropdown user">
+                <a class="dropdown-toggle" data-toggle="modal" data-target="#help_modal">
+                  <i class="fa fa-life-ring"></i>
+                  Help
+                </a>
+              </li>
             </ul>
           </div>
         </nav>
@@ -67,6 +73,25 @@
           <div class="alert alert-{{ category or "info" }}">{{ message }}</div>
           {% endfor %}
           {% block content %}{% endblock %}
+          <div class="{{ utils.help_class() }} modal fade" id="help_modal" tabindex="-1" role="dialog" aria-labelledby="help_modal_label" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h4 class="modal-title" id="help_modal_label">{% block help_title %}No help message{% endblock %}</h4>
+                </div>
+                <div class="modal-body">
+                  {% block help_body %}
+                  <p>No help message is available for this part of Hiboo, sorry!</p>
+                  <p>If you wish to contribute help messages, please contact us.</p>
+                  {% endblock %}
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                  {% block help_buttons %}{% endblock %}
+                </div>
+              </div>
+            </div>
+          </div>
         </section>
       </div>
 

trurt/templates/sidebar.html

@@ -37,7 +37,6 @@
 </li>
 {% endif %}
 
-
 <li class="header">About</li>
 <li>
   <a href="#">

trurt/utils.py

@@ -55,6 +55,12 @@ def force_redirect(destination):
     raise routing.RequestRedirect(destination)
 
 
+def help_class():
+    """ Get the help class for the page help message
+    """
+    return "automodal"
+
+
 # Request rate limitation
 limiter = flask_limiter.Limiter(key_func=lambda: current_user.id)