Enhance documentation and create a form to create a new client

8 files changed, 267 insertions, 45 deletions

diff --git a/src/Wallabag/CoreBundle/Controller/DeveloperController.php b/src/Wallabag/CoreBundle/Controller/DeveloperController.php
index edbcec4b..3b9da318 100644
--- a/src/Wallabag/CoreBundle/Controller/DeveloperController.php
+++ b/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);
+
+        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(
-            'client_id' => $client->getPublicId(),
-            'client_secret' => $client->getSecret(),
+            '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');
     }
diff --git a/src/Wallabag/CoreBundle/Form/Type/ClientType.php b/src/Wallabag/CoreBundle/Form/Type/ClientType.php
new file mode 100644
index 00000000..79feae65
--- /dev/null
+++ b/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';
+    }
+}
diff --git a/src/Wallabag/CoreBundle/Resources/public/themes/_global/css/prism.css b/src/Wallabag/CoreBundle/Resources/public/themes/_global/css/prism.css
new file mode 100644
index 00000000..65075559
--- /dev/null
+++ b/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;
+}
+
diff --git a/src/Wallabag/CoreBundle/Resources/public/themes/_global/js/prism.js b/src/Wallabag/CoreBundle/Resources/public/themes/_global/js/prism.js
new file mode 100644
index 00000000..0235e52d
--- /dev/null
+++ b/src/Wallabag/CoreBundle/Resources/public/themes/_global/js/prism.js
@@ -0,0 +1,9 @@
+/* http://prismjs.com/download.html?themes=prism-dark&languages=markup+css+clike+javascript+bash+php+yaml */
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e){var t=n.util.type(e);switch(t){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=n.util.clone(e[r]));return a;case"Array":return e.map&&e.map(function(e){return n.util.clone(e)})}return e}},languages:{extend:function(e,t){var a=n.util.clone(n.languages[e]);for(var r in t)a[r]=t[r];return a},insertBefore:function(e,t,a,r){r=r||n.languages;var l=r[e];if(2==arguments.length){a=arguments[1];for(var i in a)a.hasOwnProperty(i)&&(l[i]=a[i]);return l}var o={};for(var s in l)if(l.hasOwnProperty(s)){if(s==t)for(var i in a)a.hasOwnProperty(i)&&(o[i]=a[i]);o[s]=l[s]}return n.languages.DFS(n.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,t,a,r){r=r||{};for(var l in e)e.hasOwnProperty(l)&&(t.call(e,l,e[l],a||l),"Object"!==n.util.type(e[l])||r[n.util.objId(e[l])]?"Array"!==n.util.type(e[l])||r[n.util.objId(e[l])]||(r[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,l,r)):(r[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,null,r)))}},plugins:{},highlightAll:function(e,t){var a={callback:t,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};n.hooks.run("before-highlightall",a);for(var r,l=a.elements||document.querySelectorAll(a.selector),i=0;r=l[i++];)n.highlightElement(r,e===!0,a.callback)},highlightElement:function(t,a,r){for(var l,i,o=t;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1],i=n.languages[l]),t.className=t.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=t.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var s=t.textContent,u={element:t,language:l,grammar:i,code:s};if(!s||!i)return n.hooks.run("complete",u),void 0;if(n.hooks.run("before-highlight",u),a&&_self.Worker){var c=new Worker(n.filename);c.onmessage=function(e){u.highlightedCode=e.data,n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(u.element),n.hooks.run("after-highlight",u),n.hooks.run("complete",u)},c.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=n.highlight(u.code,u.grammar,u.language),n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(t),n.hooks.run("after-highlight",u),n.hooks.run("complete",u)},highlight:function(e,t,r){var l=n.tokenize(e,t);return a.stringify(n.util.encode(l),r)},tokenize:function(e,t){var a=n.Token,r=[e],l=t.rest;if(l){for(var i in l)t[i]=l[i];delete t.rest}e:for(var i in t)if(t.hasOwnProperty(i)&&t[i]){var o=t[i];o="Array"===n.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var u=o[s],c=u.inside,g=!!u.lookbehind,f=0,h=u.alias;u=u.pattern||u;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){g&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,b=y+v,k=d.slice(0,y+1),w=d.slice(b+1),_=[p,1];k&&_.push(k);var P=new a(i,c?n.tokenize(m,c):m,h);_.push(P),w&&_.push(w),Array.prototype.splice.apply(r,_)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o="";for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",n.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+Prism.languages.markup={comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=.$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
+Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\w\W]*?>)[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
+Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
+Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\w\W]*?>)[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
+!function(e){var t={variable:[{pattern:/\$?\(\([\w\W]+?\)\)/,inside:{variable:[{pattern:/(^\$\(\([\w\W]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b-?(?:0x[\dA-Fa-f]+|\d*\.?\d+(?:[Ee]-?\d+)?)\b/,operator:/--?|-=|\+\+?|\+=|!=?|~|\*\*?|\*=|\/=?|%=?|<<=?|>>=?|<=?|>=?|==?|&&?|&=|\^=?|\|\|?|\|=|\?|:/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\([^)]+\)|`[^`]+`/,inside:{variable:/^\$\(|^`|\)$|`$/}},/\$(?:[a-z0-9_#\?\*!@]+|\{[^}]+\})/i]};e.languages.bash={shebang:{pattern:/^#!\s*\/bin\/bash|^#!\s*\/bin\/sh/,alias:"important"},comment:{pattern:/(^|[^"{\\])#.*/,lookbehind:!0},string:[{pattern:/((?:^|[^<])<<\s*)(?:"|')?(\w+?)(?:"|')?\s*\r?\n(?:[\s\S])*?\r?\n\2/g,lookbehind:!0,inside:t},{pattern:/(["'])(?:\\\\|\\?[^\\])*?\1/g,inside:t}],variable:t.variable,"function":{pattern:/(^|\s|;|\||&)(?:alias|apropos|apt-get|aptitude|aspell|awk|basename|bash|bc|bg|builtin|bzip2|cal|cat|cd|cfdisk|chgrp|chmod|chown|chroot|chkconfig|cksum|clear|cmp|comm|command|cp|cron|crontab|csplit|cut|date|dc|dd|ddrescue|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|du|egrep|eject|enable|env|ethtool|eval|exec|expand|expect|export|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|getopts|git|grep|groupadd|groupdel|groupmod|groups|gzip|hash|head|help|hg|history|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|jobs|join|kill|killall|less|link|ln|locate|logname|logout|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|make|man|mkdir|mkfifo|mkisofs|mknod|more|most|mount|mtools|mtr|mv|mmv|nano|netstat|nice|nl|nohup|notify-send|nslookup|open|op|passwd|paste|pathchk|ping|pkill|popd|pr|printcap|printenv|printf|ps|pushd|pv|pwd|quota|quotacheck|quotactl|ram|rar|rcp|read|readarray|readonly|reboot|rename|renice|remsync|rev|rm|rmdir|rsync|screen|scp|sdiff|sed|seq|service|sftp|shift|shopt|shutdown|sleep|slocate|sort|source|split|ssh|stat|strace|su|sudo|sum|suspend|sync|tail|tar|tee|test|time|timeout|times|touch|top|traceroute|trap|tr|tsort|tty|type|ulimit|umask|umount|unalias|uname|unexpand|uniq|units|unrar|unshar|uptime|useradd|userdel|usermod|users|uuencode|uudecode|v|vdir|vi|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yes|zip)(?=$|\s|;|\||&)/,lookbehind:!0},keyword:{pattern:/(^|\s|;|\||&)(?:let|:|\.|if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)(?=$|\s|;|\||&)/,lookbehind:!0},"boolean":{pattern:/(^|\s|;|\||&)(?:true|false)(?=$|\s|;|\||&)/,lookbehind:!0},operator:/&&?|\|\|?|==?|!=?|<<<?|>>|<=?|>=?|=~/,punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];]/};var a=t.variable[1].inside;a["function"]=e.languages.bash["function"],a.keyword=e.languages.bash.keyword,a.boolean=e.languages.bash.boolean,a.operator=e.languages.bash.operator,a.punctuation=e.languages.bash.punctuation}(Prism);
+Prism.languages.php=Prism.languages.extend("clike",{keyword:/\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|private|protected|parent|throw|null|echo|print|trait|namespace|final|yield|goto|instanceof|finally|try|catch)\b/i,constant:/\b[A-Z0-9_]{2,}\b/,comment:{pattern:/(^|[^\\])(?:\/\*[\w\W]*?\*\/|\/\/.*)/,lookbehind:!0}}),Prism.languages.insertBefore("php","class-name",{"shell-comment":{pattern:/(^|[^\\])#.*/,lookbehind:!0,alias:"comment"}}),Prism.languages.insertBefore("php","keyword",{delimiter:/\?>|<\?(?:php)?/i,variable:/\$\w+\b/i,"package":{pattern:/(\\|namespace\s+|use\s+)[\w\\]+/,lookbehind:!0,inside:{punctuation:/\\/}}}),Prism.languages.insertBefore("php","operator",{property:{pattern:/(->)[\w]+/,lookbehind:!0}}),Prism.languages.markup&&(Prism.hooks.add("before-highlight",function(e){"php"===e.language&&(e.tokenStack=[],e.backupCode=e.code,e.code=e.code.replace(/(?:<\?php|<\?)[\w\W]*?(?:\?>)/gi,function(a){return e.tokenStack.push(a),"{{{PHP"+e.tokenStack.length+"}}}"}))}),Prism.hooks.add("before-insert",function(e){"php"===e.language&&(e.code=e.backupCode,delete e.backupCode)}),Prism.hooks.add("after-highlight",function(e){if("php"===e.language){for(var a,n=0;a=e.tokenStack[n];n++)e.highlightedCode=e.highlightedCode.replace("{{{PHP"+(n+1)+"}}}",Prism.highlight(a,e.grammar,"php").replace(/\$/g,"$$$$"));e.element.innerHTML=e.highlightedCode}}),Prism.hooks.add("wrap",function(e){"php"===e.language&&"markup"===e.type&&(e.content=e.content.replace(/(\{\{\{PHP[0-9]+\}\}\})/g,'<span class="token php">$1</span>'))}),Prism.languages.insertBefore("php","comment",{markup:{pattern:/<[^?]\/?(.*?)>/,inside:Prism.languages.markup},php:/\{\{\{PHP[0-9]+\}\}\}/}));
+Prism.languages.yaml={scalar:{pattern:/([\-:]\s*(![^\s]+)?[ \t]*[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)[^\r\n]+(?:\3[^\r\n]+)*)/,lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:/(\s*[:\-,[{\r\n?][ \t]*(![^\s]+)?[ \t]*)[^\r\n{[\]},#]+?(?=\s*:\s)/,lookbehind:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:/([:\-,[{]\s*(![^\s]+)?[ \t]*)(\d{4}-\d\d?-\d\d?([tT]|[ \t]+)\d\d?:\d{2}:\d{2}(\.\d*)?[ \t]*(Z|[-+]\d\d?(:\d{2})?)?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(:\d{2}(\.\d*)?)?)(?=[ \t]*($|,|]|}))/m,lookbehind:!0,alias:"number"},"boolean":{pattern:/([:\-,[{]\s*(![^\s]+)?[ \t]*)(true|false)[ \t]*(?=$|,|]|})/im,lookbehind:!0,alias:"important"},"null":{pattern:/([:\-,[{]\s*(![^\s]+)?[ \t]*)(null|~)[ \t]*(?=$|,|]|})/im,lookbehind:!0,alias:"important"},string:{pattern:/([:\-,[{]\s*(![^\s]+)?[ \t]*)("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')(?=[ \t]*($|,|]|}))/m,lookbehind:!0},number:{pattern:/([:\-,[{]\s*(![^\s]+)?[ \t]*)[+\-]?(0x[\da-f]+|0o[0-7]+|(\d+\.?\d*|\.?\d+)(e[\+\-]?\d+)?|\.inf|\.nan)[ \t]*(?=$|,|]|})/im,lookbehind:!0},tag:/![^\s]+/,important:/[&*][\w]+/,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./};
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
index 08d1cb15..061f4631 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/client.html.twig
+++ b/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>
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..8e3966b9
--- /dev/null
+++ b/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 %}
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
index 2db15b16..497bb308 100644
--- 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
@@ -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 %}
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
index 3507b654..b983883f 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Developer/index.html.twig
+++ b/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>