Enhance documentation and create a form to create a new client

src/Wallabag/CoreBundle/Controller/DeveloperController.php

@@ -5,17 +5,17 @@ namespace Wallabag\CoreBundle\Controller;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+use Wallabag\ApiBundle\Entity\Client;
+use Wallabag\CoreBundle\Form\Type\ClientType;
 
 class DeveloperController extends Controller
 {
     /**
-     * @param Request $request
-     *
      * @Route("/developer", name="developer")
      *
      * @return \Symfony\Component\HttpFoundation\Response
      */
-    public function indexAction(Request $request)
+    public function indexAction()
     {
         return $this->render('WallabagCoreBundle:Developer:index.html.twig');
     }
@@ -29,26 +29,38 @@ class DeveloperController extends Controller
      */
     public function createClientAction(Request $request)
     {
-        $clientManager = $this->container->get('fos_oauth_server.client_manager.default');
-        $client = $clientManager->createClient();
-        $client->setRedirectUris(array('http://www.example.com'));
-        $client->setAllowedGrantTypes(array('token', 'authorization_code'));
-        $clientManager->updateClient($client);
+        $em = $this->getDoctrine()->getManager();
+        $client = new Client();
+        $clientForm = $this->createForm(ClientType::class, $client);
+        $clientForm->handleRequest($request);
 
-        return $this->render('WallabagCoreBundle:Developer:client.html.twig', array(
+        if ($clientForm->isValid()) {
+            $client->setAllowedGrantTypes(array('token', 'authorization_code'));
+            $em->persist($client);
+            $em->flush();
+
+            $this->get('session')->getFlashBag()->add(
+                'notice',
+                'New client created.'
+            );
+
+            return $this->render('WallabagCoreBundle:Developer:client_parameters.html.twig', array(
                 'client_id' => $client->getPublicId(),
                 'client_secret' => $client->getSecret(),
             ));
         }
 
+        return $this->render('WallabagCoreBundle:Developer:client.html.twig', array(
+            'form' => $clientForm->createView(),
+        ));
+    }
+
     /**
-     * @param Request $request
-     *
      * @Route("/developer/howto/first-app", name="howto-firstapp")
      *
      * @return \Symfony\Component\HttpFoundation\Response
      */
-    public function howtoFirstAppAction(Request $request)
+    public function howtoFirstAppAction()
     {
         return $this->render('WallabagCoreBundle:Developer:howto_app.html.twig');
     }

src/Wallabag/CoreBundle/Form/Type/ClientType.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace Wallabag\CoreBundle\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\CallbackTransformer;
+use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\Form\Extension\Core\Type\UrlType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class ClientType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder
+            ->add('redirect_uris', UrlType::class, array('required' => true))
+            ->add('save', SubmitType::class)
+        ;
+
+        $builder->get('redirect_uris')
+            ->addModelTransformer(new CallbackTransformer(
+                function ($originalUri) {
+                    return $originalUri;
+                },
+                function ($submittedUri) {
+                    return array($submittedUri);
+                }
+            ))
+        ;
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver->setDefaults(array(
+            'data_class' => 'Wallabag\ApiBundle\Entity\Client',
+        ));
+    }
+
+    public function getBlockPrefix()
+    {
+        return 'client';
+    }
+}

src/Wallabag/CoreBundle/Resources/public/themes/_global/css/prism.css

@@ -0,0 +1,131 @@
+/* http://prismjs.com/download.html?themes=prism-dark&languages=markup+css+clike+javascript+bash+php+yaml */
+/**
+ * prism.js Dark theme for JavaScript, CSS and HTML
+ * Based on the slides of the talk “/Reg(exp){2}lained/”
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: white;
+	background: none;
+	text-shadow: 0 -.1em .2em black;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+pre[class*="language-"],
+:not(pre) > code[class*="language-"] {
+	background: hsl(30, 20%, 25%);
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border: .3em solid hsl(30, 20%, 40%);
+	border-radius: .5em;
+	box-shadow: 1px 1px .5em black inset;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .15em .2em .05em;
+	border-radius: .3em;
+	border: .13em solid hsl(30, 20%, 40%);
+	box-shadow: 1px 1px .3em -.1em black inset;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: hsl(30, 20%, 50%);
+}
+
+.token.punctuation {
+	opacity: .7;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol {
+	color: hsl(350, 40%, 70%);
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: hsl(75, 70%, 60%);
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: hsl(40, 90%, 60%);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: hsl(350, 40%, 70%);
+}
+
+.token.regex,
+.token.important {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.deleted {
+	color: red;
+}
+

src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client.html.twig

@@ -8,13 +8,20 @@
         <div class="card-panel settings">
 
             <div class="row">
-                <h3>My client parameters</h3>
-                <p>Here are your client parameters.</p>
-                <ul>
-                    <li>Client ID: {{ client_id }}</li>
-                    <li>Client secret: {{ client_secret }}</li>
-                </ul>
-                <a class="waves-effect waves-light btn" href="{{ path('developer') }}">Back to Developer main page</a>
+                <p>{% trans %}You will 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>
+                <div class="hidden">{{ form_rest(form) }}</div>
+
+                <a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{% trans %}Back{% endtrans %}</a>
+                <button class="btn waves-effect waves-light" type="submit" name="action">
+                    {% trans %}Create new client{% endtrans %}
+                </button>
             </div>
 
         </div>

src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client_parameters.html.twig

@@ -0,0 +1,25 @@
+{% 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>
+                <p><strong>{% trans %}Make sure to copy these parameters now. You won’t be able to see them again!{% endtrans %}</strong></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('howto-firstapp') }}" class="btn waves-effect waves-light">{% trans %}Read the howto "Create my first application"{% endtrans %}</a>
+            </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+{% endblock %}

src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/howto_app.html.twig

@@ -2,6 +2,11 @@
 
 {% block title %}{% trans %}How to create my first application{% endtrans %}{% endblock %}
 
+{% block css %}
+    {{ parent() }}
+    <link rel="stylesheet" href="{{ asset('bundles/wallabagcore/themes/_global/css/prism.css') }}">
+{% endblock %}
+
 {% block content %}
 <div class="row">
     <div class="col s12">
@@ -13,22 +18,16 @@
                 <p>To create this token, you need <a href="{{ path('create_client') }}">to create a new client</a>.</p>
                 <p>Now, create your token (replace client_id, client_secret, username and password with the good values):</p>
                 <p>
-                    <code>
-                        <pre>
-http POST http://v2.wallabag.org/oauth/v2/token \
+                    <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
-                        </pre>
-                    </code>
+    password=yourPassw0rd</code></pre>
                 </p>
                 <p>The API will return a response like this:</p>
                 <p>
-                    <code>
-                        <pre>
-HTTP/1.1 200 OK
+                    <pre><code class="language-bash">HTTP/1.1 200 OK
 Cache-Control: no-store, private
 Connection: close
 Content-Type: application/json
@@ -44,25 +43,20 @@ X-Powered-By: PHP/5.5.9-1ubuntu4.13
     "refresh_token": "ODBjODU1NWUwNmUzZTBkNDQ5YWVlZTVlMjQ2Y2I0OWM2NTM1ZGM2M2Y3MDhjMTViM2U2MzYxYzRkMDk5ODRlZg",
     "scope": null,
     "token_type": "bearer"
-}
-                        </pre>
-                    </code>
+}</code></pre>
                 </p>
                 <p>The access_token is useful to do a call to the API endpoint. For example:</p>
                 <p>
-                    <code>
-                        <pre>
-http GET http://v2.wallabag.org/api/entries.json \
-    "Authorization:Bearer ZWFjNjA3ZWMwYWVmYzRkYTBlMmQ3NTllYmVhOGJiZDE0ZTg1NjE4MjczOTVlNzM0ZTRlMWQ0MmRlMmYwNTk5Mw"
-                        </pre>
-                    </code>
+                    <pre><code class="language-bash">http GET http://v2.wallabag.org/api/entries.json \
+    "Authorization:Bearer ZWFjNjA3ZWMwYWVmYzRkYTBlMmQ3NTllYmVhOGJiZDE0ZTg1NjE4MjczOTVlNzM0ZTRlMWQ0MmRlMmYwNTk5Mw"</code></pre>
                 </p>
                 <p>This call will return all the entries for your user.</p>
                 <p>If you want to see all the API endpoints, you can have a look <a href="{{ path('nelmio_api_doc_index') }}">to our API documentation</a>.</p>
-                <p><a class="waves-effect waves-light btn" href="{{ path('developer') }}">Back to Developer main page</a></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('bundles/wallabagcore/themes/_global/js/prism.js') }}"></script>
 {% endblock %}

src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/index.html.twig

@@ -8,18 +8,18 @@
         <div class="card-panel settings">
 
             <div class="row">
-                <h3>Welcome to the wallabag API</h3>
+                <h3>{% trans %}Welcome to the wallabag API{% endtrans %}</h3>
 
-                <h4>Documentation</h4>
+                <h4>{% trans %}Documentation{% endtrans %}</h4>
 
                 <ul>
-                    <li><a href="{{ path('howto-firstapp') }}">How to create my first application</a></li>
-                    <li><a href="{{ path('nelmio_api_doc_index') }}">View full API documentation</a></li>
+                    <li><a href="{{ path('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>My clients</h4>
+                <h4>{% trans %}Clients{% endtrans %}</h4>
                 <ul>
-                    <li><a href="{{ path('create_client') }}">Create a new client</a></li>
+                    <li><a href="{{ path('create_client') }}">{% trans %}Create a new client{% endtrans %}</a></li>
                 </ul>
 
             </div>