Merge pull request #1675 from wallabag/v2-create-api-client

Ability to create new client for the API

12 files changed, 407 insertions, 0 deletions

diff --git a/src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml b/src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml
index 6c6caa24..b809f1ab 100644
--- a/src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml
+++ b/src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml
@@ -242,3 +242,36 @@ If you need some help, we are here for you.: "Parce que vous avez peut-être bes
 On GitHub: "Sur GitHub"
 By email: "Par email"
 On Gitter: "Sur Gitter"
+
+# developer
+Developer: Développeur
+Welcome to the wallabag API: "Bienvenue sur l'API de wallabag"
+How to create my first application: "Comment créer votre première application"
+View full API documentation: "Voir la documentation complète de l'API"
+Clients: "Clients"
+Create a new client: "Créer une nouveau client"
+Existing clients: "Les clients existants"
+Client ID: "ID Client"
+Client secret: "Clé secrète"
+Redirect URIs: "URLs de redirection"
+Grant type allowed: "Type de privilège accordé"
+You have the ability to remove this client. This action is IRREVERSIBLE !: "Vous avez la possibilité de supprimer un client. Cette action est IRREVERSIBLE !"
+If you remove it, every app configured with that client won't be able to auth on your wallabag.: "Si vous supprimez un client, toutes les applications qui l'utilisaient ne fonctionneront plus avec votre compte wallabag."
+Remove this client: "Supprimer ce client"
+New client: "Nouveau client"
+You are about to create a new client. Please fill the field below for the redirect URI of your application.: "Vous allez créer un nouveau client. Merci de remplir l'url de redirection vers votre application."
+Back: "Retour"
+Client parameters: "Les paramètres de votre client"
+New client created.: "Nouveau client créé."
+Here are your client parameters.: "Voilà les paramètres de votre client"
+Read the howto "Create my first application": "Lire \"comment créer ma première application\""
+Client deleted: "Client supprimé"
+No client yet.: "Aucun client pour le moment"
+"The following commands make use of the <a href=\"https://github.com/jkbrzt/httpie\">HTTPie library</a>. Make sure it is installed on your system before using it.": "Les commandes suivantes utilisent la <a href=\"https://github.com/jkbrzt/httpie\">librarie HTTPie</a>. Assurez-vous qu'elle soit installée avant de l'utiliser."
+You need a token to communicate between your 3rd application and wallabag API.: "Vous avez besoin d'un token pour échanger entre votre application et l'API de wallabag."
+"To create this token, you need <a href=\"%link%\">to create a new client</a>.": "Pour créer un token, vous devez <a href=\"%link%\">créer un nouveau client</a>."
+Now, create your token (replace client_id, client_secret, username and password with the good values):: "Maintenant créez votre token (remplacer client_id, client_secret, username et password avec les bonnes valeurs):"
+The API will return a response like this:: "L'API vous retournera une réponse comme ça:"
+The access_token is useful to do a call to the API endpoint. For example:: "L'access_token doit être utilisé pour faire un appel à l'API. Par exemple :"
+This call will return all the entries for your user.: "Cet appel va retourner tous les articles de l'utilisateur."
+"If you want to see all the API endpoints, you can have a look <a href=\"%link%\">to our API documentation</a>.": "Si vous voulez toutes les méthodes de l'API, jetez un oeil <a href=\"%link%\">à la documentation de l'API</a>."
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/client.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/client.html.twig
new file mode 100644
index 00000000..c9ce6d08
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/client.html.twig
@@ -0,0 +1,31 @@
+{% extends "WallabagCoreBundle::layout.html.twig" %}
+
+{% block title %}{% trans %}New client{% endtrans %}{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel settings">
+
+            <div class="row">
+                <p>{% trans %}You are about to create a new client. Please fill the field below for the redirect URI of your application.{% endtrans %}</p>
+                {{ form_start(form) }}
+                {{ form_errors(form) }}
+
+                <div class="input-field col s12">
+                    {{ form_label(form.redirect_uris) }}
+                    {{ form_errors(form.redirect_uris) }}
+                    {{ form_widget(form.redirect_uris) }}
+                </div>
+
+                <a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{% trans %}Back{% endtrans %}</a>
+                {{ form_widget(form.save, {'attr': {'class': 'btn waves-effect waves-light'}}) }}
+
+                {{ form_rest(form) }}
+            </div>
+
+        </div>
+    </div>
+</div>
+
+{% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/client_parameters.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/client_parameters.html.twig
new file mode 100644
index 00000000..a214dfd0
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/client_parameters.html.twig
@@ -0,0 +1,22 @@
+{% extends "WallabagCoreBundle::layout.html.twig" %}
+
+{% block title %}{% trans %}Client parameters{% endtrans %}{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel settings">
+            <div class="row">
+                <p>{% trans %}Here are your client parameters.{% endtrans %}</p>
+                <ul>
+                    <li>{% trans %}Client ID{% endtrans %}: <strong><pre>{{ client_id }}</pre></strong></li>
+                    <li>{% trans %}Client secret{% endtrans %}: <strong><pre>{{ client_secret }}</pre></strong></li>
+                </ul>
+
+                <a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{% trans %}Back{% endtrans %}</a>
+                <a href="{{ path('developer_howto_firstapp') }}" class="btn waves-effect waves-light">{% trans %}Read the howto "Create my first application"{% endtrans %}</a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/howto_app.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/howto_app.html.twig
new file mode 100644
index 00000000..382e6311
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/howto_app.html.twig
@@ -0,0 +1,63 @@
+{% extends "WallabagCoreBundle::layout.html.twig" %}
+
+{% block title %}{% trans %}How to create my first application{% endtrans %}{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    <link rel="stylesheet" href="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism-dark.min.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel settings">
+
+            <div class="row">
+                <p>{% trans %}The following commands make use of the <a href="https://github.com/jkbrzt/httpie">HTTPie library</a>. Make sure it is installed on your system before using it.{% endtrans %}</p>
+                <p>{% trans %}You need a token to communicate between your 3rd application and wallabag API.{% endtrans %}</p>
+                <p>{% trans with {'%link%': path('developer_create_client')} %}To create this token, you need <a href="%link%">to create a new client</a>.{% endtrans %}</p>
+                <p>{% trans %}Now, create your token (replace client_id, client_secret, username and password with the good values):{% endtrans %}</p>
+                <p>
+                    <pre><code class="language-bash">http POST http://v2.wallabag.org/oauth/v2/token \
+    grant_type=password \
+    client_id=12_5um6nz50ceg4088c0840wwc0kgg44g00kk84og044ggkscso0k \
+    client_secret=3qd12zpeaxes8cwg8c0404g888co4wo8kc4gcw0occww8cgw4k \
+    username=yourUsername \
+    password=yourPassw0rd</code></pre>
+                </p>
+                <p>{% trans %}The API will return a response like this:{% endtrans %}</p>
+                <p>
+                    <pre><code class="language-bash">HTTP/1.1 200 OK
+Cache-Control: no-store, private
+Connection: close
+Content-Type: application/json
+Date: Tue, 06 Oct 2015 18:24:03 GMT
+Host: localhost:8000
+Pragma: no-cache
+X-Debug-Token: be00a1
+X-Debug-Token-Link: /profiler/be00a1
+X-Powered-By: PHP/5.5.9-1ubuntu4.13
+{
+    "access_token": "ZWFjNjA3ZWMwYWVmYzRkYTBlMmQ3NTllYmVhOGJiZDE0ZTg1NjE4MjczOTVlNzM0ZTRlMWQ0MmRlMmYwNTk5Mw",
+    "expires_in": 3600,
+    "refresh_token": "ODBjODU1NWUwNmUzZTBkNDQ5YWVlZTVlMjQ2Y2I0OWM2NTM1ZGM2M2Y3MDhjMTViM2U2MzYxYzRkMDk5ODRlZg",
+    "scope": null,
+    "token_type": "bearer"
+}</code></pre>
+                </p>
+                <p>{% trans %}The access_token is useful to do a call to the API endpoint. For example:{% endtrans %}</p>
+                <p>
+                    <pre><code class="language-bash">http GET http://v2.wallabag.org/api/entries.json \
+    "Authorization:Bearer ZWFjNjA3ZWMwYWVmYzRkYTBlMmQ3NTllYmVhOGJiZDE0ZTg1NjE4MjczOTVlNzM0ZTRlMWQ0MmRlMmYwNTk5Mw"</code></pre>
+                </p>
+                <p>{% trans %}This call will return all the entries for your user.{% endtrans %}</p>
+                <p>{% trans with {'%link%': path('nelmio_api_doc_index')} %}If you want to see all the API endpoints, you can have a look <a href="%link%">to our API documentation</a>.{% endtrans %}</p>
+                <p><a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{% trans %}Back{% endtrans %}</a></p>
+            </div>
+
+        </div>
+    </div>
+</div>
+<script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js') }}"></script>
+<script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/components/prism-bash.min.js') }}"></script>
+{% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/index.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/index.html.twig
new file mode 100644
index 00000000..2e7dbcab
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Developer/index.html.twig
@@ -0,0 +1,68 @@
+{% extends "WallabagCoreBundle::layout.html.twig" %}
+
+{% block title %}{% trans %}Developer{% endtrans %}{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel settings">
+
+            <div class="row">
+                <h3>{% trans %}Welcome to the wallabag API{% endtrans %}</h3>
+
+                <h4>{% trans %}Documentation{% endtrans %}</h4>
+
+                <ul>
+                    <li><a href="{{ path('developer_howto_firstapp') }}">{% trans %}How to create my first application{% endtrans %}</a></li>
+                    <li><a href="{{ path('nelmio_api_doc_index') }}">{% trans %}View full API documentation{% endtrans %}</a></li>
+                </ul>
+
+                <h4>{% trans %}Clients{% endtrans %}</h4>
+                <ul>
+                    <li><a href="{{ path('developer_create_client') }}">{% trans %}Create a new client{% endtrans %}</a></li>
+                </ul>
+
+                <h4>{% trans %}Existing clients{% endtrans %}</h4>
+                {% if clients %}
+                    <ul class="collapsible" data-collapsible="expandable">
+                        {% for client in clients %}
+                            <li>
+                                <div class="collapsible-header">#{{ client.id }}</div>
+                                <div class="collapsible-body">
+                                    <table class="striped">
+                                        <tr>
+                                            <td>{% trans %}Client ID{% endtrans %}</td>
+                                            <td><strong><code>{{ client.id }}_{{ client.randomId }}</code></strong></td>
+                                        </tr>
+                                        <tr>
+                                            <td>{% trans %}Client secret{% endtrans %}</td>
+                                            <td><strong><code>{{ client.secret }}</code></strong></td>
+                                        </tr>
+                                        <tr>
+                                            <td>{% trans %}Redirect URIs{% endtrans %}</td>
+                                            <td><strong><code>{{ client.redirectUris|json_encode() }}</code></strong></td>
+                                        </tr>
+                                        <tr>
+                                            <td>{% trans %}Grant type allowed{% endtrans %}</td>
+                                            <td><strong><code>{{ client.allowedGrantTypes|json_encode() }}</code></strong></td>
+                                        </tr>
+                                    </table>
+                                    <p>
+                                        {% trans %}You have the ability to remove this client. This action is IRREVERSIBLE !{% endtrans %}<br/>
+                                        {% trans %}If you remove it, every app configured with that client won't be able to auth on your wallabag.{% endtrans %}<br/>
+                                        <a class="waves-effect waves-light red btn" href="{{ path('developer_delete_client', {'id': client.id}) }}">{% trans %}Remove this client{% endtrans %}</a>
+                                    </p>
+                                </div>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                {% else %}
+                    {% trans %}No client yet.{% endtrans %}
+                {% endif %}
+            </div>
+
+        </div>
+    </div>
+</div>
+
+{% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/layout.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/layout.html.twig
index 84604762..7f098066 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/layout.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/layout.html.twig
@@ -56,6 +56,7 @@
         {% endif %}
         <li><a href="{{ path('import') }}">{% trans %}import{% endtrans %}</a></li>
         <li><a href="{{ path('howto') }}">{% trans %}howto{% endtrans %}</a></li>
+        <li><a href="{{ path('developer') }}">{% trans %}Developer{% endtrans %}</a></li>
         <li><a href="{{ path('about') }}">{% trans %}about{% endtrans %}</a></li>
         <li><a class="icon icon-power" href="{{ path('fos_user_security_logout') }}" title="{% trans %}logout{% endtrans %}">{% trans %}logout{% endtrans %}</a></li>
     </ul>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client.html.twig
new file mode 100644
index 00000000..c9ce6d08
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client.html.twig
@@ -0,0 +1,31 @@
+{% extends "WallabagCoreBundle::layout.html.twig" %}
+
+{% block title %}{% trans %}New client{% endtrans %}{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel settings">
+
+            <div class="row">
+                <p>{% trans %}You are about to create a new client. Please fill the field below for the redirect URI of your application.{% endtrans %}</p>
+                {{ form_start(form) }}
+                {{ form_errors(form) }}
+
+                <div class="input-field col s12">
+                    {{ form_label(form.redirect_uris) }}
+                    {{ form_errors(form.redirect_uris) }}
+                    {{ form_widget(form.redirect_uris) }}
+                </div>
+
+                <a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{% trans %}Back{% endtrans %}</a>
+                {{ form_widget(form.save, {'attr': {'class': 'btn waves-effect waves-light'}}) }}
+
+                {{ form_rest(form) }}
+            </div>
+
+        </div>
+    </div>
+</div>
+
+{% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client_parameters.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client_parameters.html.twig
new file mode 100644
index 00000000..a214dfd0
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client_parameters.html.twig
@@ -0,0 +1,22 @@
+{% extends "WallabagCoreBundle::layout.html.twig" %}
+
+{% block title %}{% trans %}Client parameters{% endtrans %}{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel settings">
+            <div class="row">
+                <p>{% trans %}Here are your client parameters.{% endtrans %}</p>
+                <ul>
+                    <li>{% trans %}Client ID{% endtrans %}: <strong><pre>{{ client_id }}</pre></strong></li>
+                    <li>{% trans %}Client secret{% endtrans %}: <strong><pre>{{ client_secret }}</pre></strong></li>
+                </ul>
+
+                <a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{% trans %}Back{% endtrans %}</a>
+                <a href="{{ path('developer_howto_firstapp') }}" class="btn waves-effect waves-light">{% trans %}Read the howto "Create my first application"{% endtrans %}</a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/howto_app.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/howto_app.html.twig
new file mode 100644
index 00000000..382e6311
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/howto_app.html.twig
@@ -0,0 +1,63 @@
+{% extends "WallabagCoreBundle::layout.html.twig" %}
+
+{% block title %}{% trans %}How to create my first application{% endtrans %}{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    <link rel="stylesheet" href="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism-dark.min.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel settings">
+
+            <div class="row">
+                <p>{% trans %}The following commands make use of the <a href="https://github.com/jkbrzt/httpie">HTTPie library</a>. Make sure it is installed on your system before using it.{% endtrans %}</p>
+                <p>{% trans %}You need a token to communicate between your 3rd application and wallabag API.{% endtrans %}</p>
+                <p>{% trans with {'%link%': path('developer_create_client')} %}To create this token, you need <a href="%link%">to create a new client</a>.{% endtrans %}</p>
+                <p>{% trans %}Now, create your token (replace client_id, client_secret, username and password with the good values):{% endtrans %}</p>
+                <p>
+                    <pre><code class="language-bash">http POST http://v2.wallabag.org/oauth/v2/token \
+    grant_type=password \
+    client_id=12_5um6nz50ceg4088c0840wwc0kgg44g00kk84og044ggkscso0k \
+    client_secret=3qd12zpeaxes8cwg8c0404g888co4wo8kc4gcw0occww8cgw4k \
+    username=yourUsername \
+    password=yourPassw0rd</code></pre>
+                </p>
+                <p>{% trans %}The API will return a response like this:{% endtrans %}</p>
+                <p>
+                    <pre><code class="language-bash">HTTP/1.1 200 OK
+Cache-Control: no-store, private
+Connection: close
+Content-Type: application/json
+Date: Tue, 06 Oct 2015 18:24:03 GMT
+Host: localhost:8000
+Pragma: no-cache
+X-Debug-Token: be00a1
+X-Debug-Token-Link: /profiler/be00a1
+X-Powered-By: PHP/5.5.9-1ubuntu4.13
+{
+    "access_token": "ZWFjNjA3ZWMwYWVmYzRkYTBlMmQ3NTllYmVhOGJiZDE0ZTg1NjE4MjczOTVlNzM0ZTRlMWQ0MmRlMmYwNTk5Mw",
+    "expires_in": 3600,
+    "refresh_token": "ODBjODU1NWUwNmUzZTBkNDQ5YWVlZTVlMjQ2Y2I0OWM2NTM1ZGM2M2Y3MDhjMTViM2U2MzYxYzRkMDk5ODRlZg",
+    "scope": null,
+    "token_type": "bearer"
+}</code></pre>
+                </p>
+                <p>{% trans %}The access_token is useful to do a call to the API endpoint. For example:{% endtrans %}</p>
+                <p>
+                    <pre><code class="language-bash">http GET http://v2.wallabag.org/api/entries.json \
+    "Authorization:Bearer ZWFjNjA3ZWMwYWVmYzRkYTBlMmQ3NTllYmVhOGJiZDE0ZTg1NjE4MjczOTVlNzM0ZTRlMWQ0MmRlMmYwNTk5Mw"</code></pre>
+                </p>
+                <p>{% trans %}This call will return all the entries for your user.{% endtrans %}</p>
+                <p>{% trans with {'%link%': path('nelmio_api_doc_index')} %}If you want to see all the API endpoints, you can have a look <a href="%link%">to our API documentation</a>.{% endtrans %}</p>
+                <p><a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{% trans %}Back{% endtrans %}</a></p>
+            </div>
+
+        </div>
+    </div>
+</div>
+<script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js') }}"></script>
+<script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/components/prism-bash.min.js') }}"></script>
+{% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/index.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/index.html.twig
new file mode 100644
index 00000000..2e7dbcab
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/index.html.twig
@@ -0,0 +1,68 @@
+{% extends "WallabagCoreBundle::layout.html.twig" %}
+
+{% block title %}{% trans %}Developer{% endtrans %}{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col s12">
+        <div class="card-panel settings">
+
+            <div class="row">
+                <h3>{% trans %}Welcome to the wallabag API{% endtrans %}</h3>
+
+                <h4>{% trans %}Documentation{% endtrans %}</h4>
+
+                <ul>
+                    <li><a href="{{ path('developer_howto_firstapp') }}">{% trans %}How to create my first application{% endtrans %}</a></li>
+                    <li><a href="{{ path('nelmio_api_doc_index') }}">{% trans %}View full API documentation{% endtrans %}</a></li>
+                </ul>
+
+                <h4>{% trans %}Clients{% endtrans %}</h4>
+                <ul>
+                    <li><a href="{{ path('developer_create_client') }}">{% trans %}Create a new client{% endtrans %}</a></li>
+                </ul>
+
+                <h4>{% trans %}Existing clients{% endtrans %}</h4>
+                {% if clients %}
+                    <ul class="collapsible" data-collapsible="expandable">
+                        {% for client in clients %}
+                            <li>
+                                <div class="collapsible-header">#{{ client.id }}</div>
+                                <div class="collapsible-body">
+                                    <table class="striped">
+                                        <tr>
+                                            <td>{% trans %}Client ID{% endtrans %}</td>
+                                            <td><strong><code>{{ client.id }}_{{ client.randomId }}</code></strong></td>
+                                        </tr>
+                                        <tr>
+                                            <td>{% trans %}Client secret{% endtrans %}</td>
+                                            <td><strong><code>{{ client.secret }}</code></strong></td>
+                                        </tr>
+                                        <tr>
+                                            <td>{% trans %}Redirect URIs{% endtrans %}</td>
+                                            <td><strong><code>{{ client.redirectUris|json_encode() }}</code></strong></td>
+                                        </tr>
+                                        <tr>
+                                            <td>{% trans %}Grant type allowed{% endtrans %}</td>
+                                            <td><strong><code>{{ client.allowedGrantTypes|json_encode() }}</code></strong></td>
+                                        </tr>
+                                    </table>
+                                    <p>
+                                        {% trans %}You have the ability to remove this client. This action is IRREVERSIBLE !{% endtrans %}<br/>
+                                        {% trans %}If you remove it, every app configured with that client won't be able to auth on your wallabag.{% endtrans %}<br/>
+                                        <a class="waves-effect waves-light red btn" href="{{ path('developer_delete_client', {'id': client.id}) }}">{% trans %}Remove this client{% endtrans %}</a>
+                                    </p>
+                                </div>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                {% else %}
+                    {% trans %}No client yet.{% endtrans %}
+                {% endif %}
+            </div>
+
+        </div>
+    </div>
+</div>
+
+{% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Static/quickstart.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Static/quickstart.html.twig
index 3d21271a..dea4242b 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Static/quickstart.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Static/quickstart.html.twig
@@ -41,6 +41,10 @@
                         <li><a href="{{ path('import_wallabag_v1') }}">{% trans %}Migrate from wallabag v1{% endtrans %}</a></li>
                         <li><a href="{{ path('import_wallabag_v2') }}">{% trans %}Migrate from wallabag v2{% endtrans %}</a></li>
                     </ul>
+                    <h4>{% trans %}Developers{% endtrans %}</h4>
+                    <ul>
+                        <li><a href="{{ path('developer') }}">{% trans %}Create your third application{% endtrans %}</a></li>
+                    </ul>
                     <h4>{% trans %}Full documentation{% endtrans %}</h4>
                     <ul>
                         <li><a href="http://wallabag.readthedocs.org">{% trans %}Annotate your article{% endtrans %}</a></li>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
index d7bfa7ae..f5d03084 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
@@ -50,6 +50,7 @@
             {% endif %}
             <li class="bold {% if currentRoute == 'import' %}active{% endif %}"><a class="waves-effect" href="{{ path('import') }}">{% trans %}import{% endtrans %}</a></li>
             <li class="bold {% if currentRoute == 'howto' %}active{% endif %}"><a class="waves-effect" href="{{ path('howto') }}">{% trans %}howto{% endtrans %}</a></li>
+            <li class="bold {% if currentRoute == 'developer' %}active{% endif %}"><a class="waves-effect" href="{{ path('developer') }}">{% trans %}Developer{% endtrans %}</a></li>
             <li class="bold"><a class="waves-effect" class="icon icon-power" href="{{ path('fos_user_security_logout') }}" title="{% trans %}logout{% endtrans %}">{% trans %}logout{% endtrans %}</a></li>
         </ul>
         <div class="nav-wrapper nav-panels">