Merge branch 'master' of https://github.com/Plume-org/Plume into mobile-menu

templates/base.html.tera

@@ -37,5 +37,16 @@
             {% block content %}
             {% endblock content %}
         </main>
+        <footer>
+            <span>Plume 0.1.0</span>
+            <a href="/about">{{ "About this instance" | _ }}</a>
+            <a href="https://github.com/Plume-org/Plume">{{ "Source code" | _ }}</a>
+            <a href="https://riot.im/app/#/room/#plume:disroot.org">{{ "Matrix room" | _ }}</a>
+            {% if account %}
+                {% if account.is_admin %}
+                    <a href="/admin">{{ "Administration" | _ }}</a>
+                {% endif %}
+            {% endif %}
+        </footer>
     </body>
 </html>

templates/blogs/details.html.tera

@@ -5,22 +5,36 @@
 {{ blog.title }}
 {% endblock title %}
 
-{% block content %}
-    <h1>{{ blog.title }} (~{{ blog.actor_id }})</h1>
-    <p>{{ blog.summary }}</p>
+{% block header %}
+    <a href=".">{{ blog.title }}</a>
+{% endblock header %}
 
+{% block content %}
+    <h1>{{ blog.title }} <small>~{{ blog.fqn }}</small></h1>
+    <p>{{ blog.summary }}</p>
+    <p>
+        {{ "{{ count }} authors in this blog: " | _n(singular="One author in this blog: ", count = n_authors) }}
+        {% for author in authors %}
+            <a class="author" href="/@/{{ author.fqn }}">{{ author.name }}</a>{% if not loop.last %},{% endif %}
+        {% endfor %}
+    </p>
+    <p>
+        {{ "{{ count }} articles in this blog" | _n(singular="One article in this blog", count = n_articles) }}
+    </p>
+ 
     <section>
         <h2>{{ "Latest articles" | _ }}</h2>
-        {% if recents | length < 1 %}
+        {% if posts | length < 1 %}
             <p>{{ "No posts to see here yet." | _ }}</p>
         {% endif %}
         {% if is_author %}
-            <a href="new" class="button inline-block">{{ "New article" | _ }}</a>
+            <a href="/~/{{ blog.fqn }}/new/" class="button inline-block">{{ "New article" | _ }}</a>
         {% endif %}
         <div class="cards">
-            {% for article in recents %}
+            {% for article in posts %}
                 {{ macros::post_card(article=article) }}
             {% endfor %}
         </div>
+        {{ macros::paginate(page=page, total=n_pages) }}
     </section>
 {% endblock content %}

templates/blogs/new.html.tera

@@ -1,4 +1,5 @@
 {% extends "base" %}
+{% import "macros" as macros %}
 
 {% block title %}
 {{ "New blog" | _ }}
@@ -7,8 +8,8 @@
 {% block content %}
 <h1>{{ "Create a blog" | _ }}</h1>
 <form method="post">
-    <label for="title">{{ "Title" | _ }}</label>
-    <input type="text" id="title" name="title" />
+    {{ macros::input(name="title", label="Title", errors=errors, form=form, props='required minlength="1"') }}
+
     <input type="submit" value="{{ "Create blog" | _ }}"/>
 </form>
 {% endblock content %}

templates/instance/admin.html.tera

@@ -0,0 +1,34 @@
+{% extends "base" %}
+{% import "macros" as macros %}
+
+{% block title %}
+Administration of {{ instance.name }}
+{% endblock title %}
+
+{% block content %}
+    <h1>{{ "Administration" | _ }}</h1>
+
+    <h2>{{ "Instance settings" | _ }}</h2>
+    <form method="post">
+        {{ macros::input(name="name", label="Name", errors=errors, form=form, props='minlenght="1"', default=instance) }}
+
+        <label for="open_registrations">
+            {% if instance.open_registrations %}
+                <input type="checkbox" name="open_registrations" id="open_registrations" checked>
+            {% else %}
+                <input type="checkbox" name="open_registrations" id="open_registrations">
+            {% endif %}
+            {{ "Allow anyone to register" | _ }}
+        </label>
+
+        <label for="short_description">{{ "Short description" | _ }}<small>{{ "Markdown is supported" | _ }}</small></label>
+        <textarea id="short_description" name="short_description">{{ form.short_description | default(value=instance.short_description) }}</textarea>
+
+        <label for="long_description">{{ "Long description" | _ }}<small>{{ "Markdown is supported" | _ }}</small></label>
+        <textarea id="long_description" name="long_description">{{ form.long_description | default(value=instance.long_description) }}</textarea>
+
+        {{ macros::input(name="default_license", label="Default license", errors=errors, form=form, props='minlenght="1"', default=instance) }}
+
+        <input type="submit" value="{{ "Save settings" | _ }}"/>
+    </form>
+{% endblock content %}

templates/instance/configure.html.tera

@@ -1,15 +0,0 @@
-{% extends "base" %}
-
-{% block title %}
-{{ "Configuration" | _ }}
-{% endblock title %}
-
-{% block content %}
-<h1>{{ "Configure your instance" | _ }}</h1>
-<form method="post">
-    <label for="name">{{ "Name" | _ }}</label>
-    <input type="text" id="name" name="name" />
-
-    <input type="submit" value="{{ "Let's go!" | _ }}" />
-</form>
-{% endblock content %}

templates/instance/index.html.tera

@@ -14,4 +14,38 @@
             {{ macros::post_card(article=article) }}
         {% endfor %}
     </div>
+    {{ macros::paginate(page=page, total=n_pages) }}
+    
+    <section class="spaced">
+        <div class="cards">
+            <div class="presentation card">
+                <h2>{{ "What is Plume?" | _ }}</h2>
+                <main>
+                    <p>{{ "Plume is a decentralized blogging engine." | _ }}</p>
+                    <p>{{ "Authors can manage various blogs from an unique website." | _ }}</p>
+                    <p>{{ "Articles are also visible on other Plume websites, and you can interact with them directly from other platforms like Mastodon." | _ }}</p>
+                </main>
+                <a href="/users/new">{{ "Create your account" | _ }}</a>
+            </div>
+            <div class="presentation card">
+                <h2>{{ "About {{ instance_name }}" | _(instance_name=instance.name) }}</h2>
+                <main>
+                    {{ instance.short_description_html | safe }}
+                    <section class="stats">
+                        <div>
+                            <p>{{ "Home to" | _ }}</p>
+                            <em>{{ n_users }}</em>
+                            <p>{{ "people" | _ }}</p>
+                        </div>
+                        <div>
+                            <p>{{ "Who wrote" | _ }}</p>
+                            <em>{{ n_articles }}</em>
+                            <p>{{ "articles" | _ }}</p>
+                        </div>
+                    </section>
+                </main>
+                <a href="/about">{{ "Read the detailed rules" | _ }}</a>
+            </div>
+        </div>
+    </section>
 {% endblock content %}

templates/macros.html.tera

@@ -1,9 +1,4 @@
 {% macro post_card(article) %}
-    {% if article.author.display_name %}
-        {% set name = article.author.display_name %}
-    {% else %}
-        {% set name = article.author.username %}
-    {% endif %}
     <div class="card">
         <h3><a href="{{ article.url }}">{{ article.post.title }}</a></h3>
         <main
@@ -14,10 +9,50 @@
                 link_1='<a href="/@/',
                 link_2=article.author.fqn,
                 link_3='/">',
-                name=name,
+                name=article.author.name,
                 link_4="</a>")
             }}
             ⋅ {{ article.date | date(format="%B %e") }}
+            ⋅ <a href="/~/{{ article.blog.fqn }}/">{{ article.blog.title }}</a>
         </p>
     </div>
 {% endmacro post_card %}
+{% macro input(name, label, errors, form, type="text", props="", optional=false, default='', details='') %}
+    <label for="{{ name }}">
+        {{ label | _ }}
+        {% if optional %}
+            <small>{{ "Optional" | _ }}</small>
+        {% endif %}
+        <small>{{ details }}</small>
+    </label>
+    {% if errors is defined and errors[name] %}
+        {% for err in errors[name] %}
+            <p class="error">{{ err.message | default(value="Unknown error") | _ }}</p>
+        {% endfor %}
+    {% endif %}
+    {% set default = default[name] | default(value="") %}
+    <input type="{{ type }}" id="{{ name }}" name="{{ name }}" value="{{ form[name] | default(value=default) }}" {{ props | safe }}/>
+{% endmacro input %}
+{% macro paginate(page, total, previous="Previous page", next="Next page") %}
+    <div class="pagination">
+        {% if page != 1 %}
+            <a href="?page={{ page - 1 }}">{{ previous | _ }}</a>
+        {% endif %}
+        {% if page < total %}
+            <a href="?page={{ page + 1 }}">{{ next | _ }}</a>
+        {% endif %}
+    </div>
+{% endmacro %}
+{% macro comment(comm) %}
+    <div class="comment" id="comment-{{ comm.id }}">
+        <a class="author" href="/@/{{ comm.author.fqn }}/">
+            <span class="display-name">{{ comm.author.name }}</span>
+            <small>@{{ comm.author.username }}</small>
+        </a>
+        <div class="text">{{ comm.content | safe }}</div>
+        <a class="button" href="?responding_to={{ comm.id }}">{{ "Respond" | _ }}</a>
+        {% for res in comm.responses %}
+            {{ self::comment(comm=res) }}
+        {% endfor %}
+    </div>
+{% endmacro %}

templates/notifications/index.html.tera

@@ -1,4 +1,5 @@
 {% extends "base" %}
+{% import "macros" as macros %}
 
 {% block title %}
 {{ "Notifications" | _ }}
@@ -8,12 +9,58 @@
     <h1>{{ "Notifications" | _ }}</h1>
     <div class="list">
         {% for notification in notifications %}
-            <div class="card">
-                <h3><a href="{% if notification.link %}{{ notification.link }}/{% else %}#{% endif %}">{{ notification.title | _(data=notification.data) }}</h3>
-                {% if notification.content %}
-                    <p>{{ notification.content }}</p>
+            <div class="card flex">
+                {% if notification.kind == "COMMENT" %}
+                    <i class="fa fa-comment left-icon"></i>
+                    <main class="grow">
+                        <h3><a href="{{ notification.object.post.url }}#comment-{{ notification.object.id }}">
+                            {{ "{{ user }} commented your article." | _(user=notification.object.user.name | escape) }}
+                        </a></h3>
+                        <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.post.title }}</a></p>
+                    </main>
+                    <p><small>{{ notification.creation_date | date(format="%B %e, %H:%M") }}</small></p>
+
+                {% elif notification.kind == "FOLLOW" %}
+                    <i class="fa fa-user-plus left-icon"></i>
+                    <main class="grow">
+                        <h3><a href="/@/{{ notification.object.follower.fqn }}/">
+                            {{ "{{ user }} is now following you." | _(user=notification.object.follower.name | escape) }}
+                        </a></h3>
+                    </main>
+                    <p><small>{{ notification.creation_date | date(format="%B %e, %H:%M") }}</small></p>
+
+                {% elif notification.kind == "LIKE" %}
+                    <i class="fa fa-heart left-icon"></i>
+                    <main class="grow">
+                        <h3>
+                            {{ "{{ user }} liked your article." | _(user=notification.object.user.name | escape) }}
+                        </h3>
+                        <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.post.title }}</a></p>
+                    </main>
+                    <p><small>{{ notification.creation_date | date(format="%B %e, %H:%M") }}</small></p>
+
+                {% elif notification.kind == "MENTION" %}
+                    <i class="fa fa-at left-icon"></i>
+                    <main class="grow">
+                        <h3><a href="{{ notification.object.url }}">
+                            {{ "{{ user }} mentioned you." | _(user=notification.object.user.name | escape) }}
+                        </a></h3>
+                    </main>
+                    <p><small>{{ notification.creation_date | date(format="%B %e, %H:%M") }}</small></p>
+
+                {% elif notification.kind == "RESHARE" %}
+                    <i class="fa fa-retweet left-icon"></i>
+                    <main class="grow">
+                        <h3>
+                            {{ "{{ user }} reshared your article." | _(user=notification.object.user.name | escape) }}
+                        </h3>
+                        <p><a href="{{ notification.object.post.url }}">{{ notification.object.post.post.title }}</a></p>
+                    </main>
+                    <p><small>{{ notification.creation_date | date(format="%B %e, %H:%M") }}</small></p>
+
                 {% endif %}
             </div>
         {% endfor %}
     </div>
+    {{ macros::paginate(page=page, total=n_pages) }}
 {% endblock content %}

templates/posts/details.html.tera

@@ -1,28 +1,22 @@
 {% extends "base" %}
+{% import "macros" as macros %}
 
 {% block title %}
-{{ post.title }}
+{{ article.post.title }}
 {% endblock title %}
 
 {% block header %}
-    <a href="../">{{ blog.title }}</a>
+    <a href="/~/{{ blog.fqn }}">{{ blog.title }}</a>
 {% endblock header %}
 
 {% block content %}
-    <h1 class="article">{{ post.title }}</h1>
+    <h1 class="article">{{ article.post.title }}</h1>
     <p class="article-info">
-
-    {% if author.display_name %}
-        {% set name = author.display_name %}
-    {% else %}
-        {% set name = author.username %}
-    {% endif %}
-
         <span class="author">{{ "Written by {{ link_1 }}{{ url }}{{ link_2 }}{{ name | escape }}{{ link_3 }}" | _(
             link_1='<a href="/@/',
             url=author.fqn,
             link_2='/">',
-            name=name,
+            name=author.name,
             link_3="</a>"
             )
         }}</a></span>
@@ -30,38 +24,42 @@
         <span class="date">{{ date | date(format="%B %e, %Y") }}</span>
     </p>
     <article>
-        {{ post.content | safe }}
+        {{ article.post.content | safe }}
     </article>
 
     <div class="article-meta">
-        <p>{{ "This article is under the {{ license }} license." | _(license=post.license) }}</p>
+        <p>{{ "This article is under the {{ license }} license." | _(license=article.post.license) }}</p>
 
-        <div class="actions">
-            <div class="likes">
-                <p aria-label="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}" title="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}">{{ n_likes }}</p>
+        {% if account %}
+            <div class="actions">
+                <form class="likes" action="{{ article.url }}like" method="POST">
+                    <p aria-label="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}" title="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}">{{ n_likes }}</p>
 
-                {% if has_liked %}
-                    <a class="button liked" href="like">{{ "I don't like this anymore" | _ }}</a>
-                {% else %}
-                    <a class="button" href="like">{{ "Add yours" | _ }}</a>
-                {% endif %}
+                    {% if has_liked %}
+                        <button type="submit" class="liked"><i class="far fa-heart"></i>{{ "I don't like this anymore" | _ }}</button>
+                    {% else %}
+                        <button type="submit"><i class="fa fa-heart"></i>{{ "Add yours" | _ }}</button>
+                    {% endif %}
+                </form>
+                <form class="reshares" action="{{ article.url }}reshare" method="POST">
+                    <p aria-label="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}" title="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}">{{ n_reshares }}</p>
+
+                    {% if has_reshared %}
+                        <button type="submit" class="reshared"><i class="far fa-retweet"></i>{{ "I don't want to reshare this anymore" | _ }}</button>
+                    {% else %}
+                        <button type="submit"><i class="fa fa-retweet"></i>{{ "Reshare" | _ }}</button>
+                    {% endif %}
+                </form>
             </div>
-            <div class="reshares">
-                <p aria-label="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}" title="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}">{{ n_reshares }}</p>
-
-                {% if has_reshared %}
-                    <a class="button reshared" href="reshare">{{ "I don't want to reshare this anymore" | _ }}</a>
-                {% else %}
-                    <a class="button" href="reshare">{{ "Reshare" | _ }}</a>
-                {% endif %}
-            </div>
-        </div>
+        {% else %}
+            <p class="center">{{ "Login or use your Fediverse account to interact with this article" | _ }}</p>
+        {% endif %}
 
         <div class="comments">
             <h2>{{ "Comments" | _ }}</h2>
 
             {% if account %}
-                <form method="post" action="/~/{{ blog.actor_id }}/{{ post.slug }}/comment">
+                <form method="post" action="{{ article.url }}comment">
                     <label for="content">{{ "Your comment" | _ }}</label>
                     {% if previous %}
                         <input type="hidden" name="responding_to" value="{{ previous.id }}"/>
@@ -72,24 +70,15 @@
                 </form>
             {%  endif %}
 
-            <div class="list">
-                {% for comment in comments %}
-                    {% if comment.author.display_name %}
-                        {% set comment_author_name = comment.author.display_name %}
-                    {% else %}
-                        {% set comment_author_name = comment.author.username %}
-                    {% endif %}
-
-                    <div class="comment" id="comment-{{ comment.id }}">
-                        <a class="author" href="{{ comment.author.ap_url }}">
-                            <span class="display-name">{{ comment.author.display_name }}</span>
-                            <span class="username">@{{ comment.author.username }}</span>
-                        </a>
-                        <div class="text">{{ comment.content | safe }}</div>
-                        <a class="button" href="?responding_to={{ comment.id }}">{{ "Respond" | _ }}</a>
-                    </div>
-                {% endfor %}
-            </div>
+            {% if comments | length > 0 %}
+                <div class="list">
+                    {% for comment in comments %}
+                        {{ macros::comment(comm=comment) }}
+                    {% endfor %}
+                </div>
+            {% else %}
+                <p class="center">{{ "No comments yet. Be the first to react!" | _ }}</p>
+            {% endif %}
         </div>
     </div>
 {% endblock content %}

templates/posts/new.html.tera

@@ -1,4 +1,5 @@
 {% extends "base" %}
+{% import "macros" as macros %}
 
 {% block title %}
 {{ "New post" | _ }}
@@ -7,12 +8,21 @@
 {% block content %}
 <h1>{{ "Create a post" | _ }}</h1>
 <form class="new-post" method="post">
-    <input type="text" class="title" name="title" placeholder="{{ "Title" | _ }}">
-    <textarea name="content" placeholder="{{ "Content" | _ }}"></textarea>
+    {{ macros::input(name="title", label="Title", errors=errors, form=form, props="required") }}
 
-    <label for="license">{{ "License" | _ }}</label>
-    <input type="text" id="licence" name="license" />
+    {% if errors is defined and errors.content %}
+        {% for err in errors.content %}
+            <p class="error">{{ err.message | default(value="Unknown error") | _ }}</p>
+        {% endfor %}
+    {% endif %}
+
+    <label for="content">{{ "Content" | _ }}<small>{{ "Markdown is supported" | _ }}</small></label>
+    <textarea id="content" name="content" value="{{ form.content | default(value="") }}" rows="20"></textarea>
+
+    {% set license_infos = "Default license will be {{ instance.default_license }}" | _(instance=instance) %}
+    {{ macros::input(name="license", label="License", errors=errors, form=form, optional=true, details=license_infos) }}
 
     <input type="submit" value="{{ "Publish" | _ }}" />
 </form>
+<script src="/static/js/autoExpand.js"></script>
 {% endblock content %}

templates/session/login.html.tera

@@ -1,4 +1,5 @@
 {% extends "base" %}
+{% import "macros" as macros %}
 
 {% block title %}
 {{ "Login" | _ }}
@@ -10,11 +11,8 @@
 <p>{{ message }}</p>
 {% endif %}
 <form method="post">
-    <label for="email_or_name">{{ "Username or email" | _ }}</label>
-    <input type="text" id="email_or_name" name="email_or_name" />
-
-    <label for="password">{{ "Password" | _ }}</label>
-    <input type="password" id="password" name="password" />
+    {{ macros::input(name="email_or_name", label="Username or email", errors=errors, form=form, props='minlenght="1"') }}
+    {{ macros::input(name="password", label="Password", errors=errors, form=form, type="password", props='minlenght="1"') }}
 
     <input type="submit" value="{{ "Login" | _ }}" />
 </form>

templates/users/dashboard.html.tera

@@ -13,13 +13,13 @@
         {% if blogs | length < 1 %}
             <p>{{ "You don't have any blog yet. Create your own, or ask to join one." | _ }}</p>
         {% endif %}
-        <a class="button" href="/blogs/new">{{ "Start a new blog" | _ }}</a>
-        <div class="list">
+        <div class="cards">
             {% for blog in blogs %}
                 <div class="card">
                     <h3><a href="/~/{{ blog.actor_id }}/">{{ blog.title }}</a></h3>
                 </div>
             {% endfor %}
         </div>
+        <a class="button" href="/blogs/new">{{ "Start a new blog" | _ }}</a>
     </section>
 {% endblock content %}

templates/users/edit.html.tera

@@ -19,6 +19,6 @@
     <label for="summary">{{ "Summary" | _ }}</label>
     <input name="summary" value="{{ account.summary }}">
 
-    <input type="submit" value="{{ "Update account" | _ }}"/>            
+    <input type="submit" value="{{ "Update account" | _ }}"/>
 </form>
 {% endblock content %}

templates/users/followers.html.tera

@@ -1,13 +1,8 @@
 {% extends "base" %}
+{% import "macros" as macros %}
 
 {% block title %}
-{% if user.display_name %}
-    {% set name = user.display_name %}
-{% else %}
-    {% set name = user.username %}
-{% endif %}
-
-{{ "{{ name | escape }}'s followers" | _(name=name) }}
+{{ "{{ name | escape }}'s followers" | _(name=user.name) }}
 {% endblock title %}
 
 {% block content %}
@@ -16,15 +11,11 @@
     <h2>{{ "Followers" | _ }}</h2>
     <div class="cards">
     {% for follower in followers %}
-        {% if follower.display_name %}
-            {% set follower_name = follower.display_name %}
-        {% else %}
-            {% set follower_name = follower.username %}
-        {% endif %}
         <div class="card">
-            <h3><a href="/@/{{ follower.fqn }}/">{{ follower_name }}</a> &mdash; @{{ follower.fqn }}</h3>
+            <h3><a href="/@/{{ follower.fqn }}/">{{ follower.name }}</a> <small>@{{ follower.fqn }}</small></h3>
             <main><p>{{ follower.summary | safe }}</p></main>
         </div>
     {% endfor %}
     </div>
+    {{ macros::paginate(page=page, total=n_pages) }}
 {% endblock content %}

templates/users/header.html.tera

@@ -1,6 +1,9 @@
 <div class="user">
     <h1>
-        {{ name }}
+        {{ user.name }}
+
+        <small>@{{ user.fqn }}</small>
+
         {% if user.is_admin %}
             <span class="badge">{{ "Admin" | _ }}</span>
         {% endif %}
@@ -15,18 +18,19 @@
     {% endif %}
 
     {% if is_remote %}
-        <a class="inline-block button" href="{{ user.ap_url }}">{{ "Open on {{ instance_url }}" | _(instance_url=instance_url) }}</a>
+        <a class="inline-block button" href="{{ user.ap_url }}" target="_blank">{{ "Open on {{ instance_url }}" | _(instance_url=instance_url) }}</a>
     {% endif %}
 
-    {% if not is_self and account %}
+    {% set not_self = not is_self %}
+    {% if not_self and (account is defined) %}
         {% if follows %}
-            <a href="follow/" class="inline-block button">{{ "Follow" | _ }}</a>
+            <a href="/@/{{ user.fqn }}/follow/" class="inline-block button">{{ "Unfollow" | _ }}</a>
         {% else %}
-            <a href="follow/" class="inline-block button">{{ "Unfollow" | _ }}</a>
+            <a href="/@/{{ user.fqn }}/follow/" class="inline-block button">{{ "Follow" | _ }}</a>
         {% endif %}
     {% endif %}
 </div>
 
 <div>
-    <a href="followers/">{{ "{{ count }} followers" | _n(singular="One follower", count=n_followers) }}</a>
+    <a href="/@/{{ user.fqn }}/followers/">{{ "{{ count }} followers" | _n(singular="One follower", count=n_followers) }}</a>
 </div>

templates/users/new.html.tera

@@ -1,4 +1,5 @@
 {% extends "base" %}
+{% import "macros" as macros %}
 
 {% block title %}
 {{ "New Account" | _ }}
@@ -7,17 +8,10 @@
 {% block content %}
 <h1>{{ "Create an account" | _ }}</h1>
 <form method="post">
-    <label for="username">{{ "Username" | _ }}</label>
-    <input type="text" id="username" name="username" />
-
-    <label for="email">{{ "Email" | _ }}</label>
-    <input type="email" id="email" name="email" />
-
-    <label for="password">{{ "Password" | _ }}</label>
-    <input type="password" id="password" name="password" />
-
-    <label for="password_confirmation">{{ "Password confirmation" | _ }}</label>
-    <input type="password" id="password_confirmation" name="password_confirmation" />
+    {{ macros::input(name="username", label="Username", errors=errors, form=form, props='minlenght="1"') }}
+    {{ macros::input(name="email", label="Email", errors=errors, form=form, type="email") }}
+    {{ macros::input(name="password", label="Password", errors=errors, form=form, type="password", props='minlenght="8"') }}
+    {{ macros::input(name="password_confirmation", label="Password confirmation", errors=errors, form=form, type="password", props='minlenght="8"') }}
 
     <input type="submit" value="{{ "Create account" | _ }}" />
 </form>