feat(Partners): Add a page for the partner API

components/Header.js

@@ -11,6 +11,9 @@ const Header = (props) => (
     <StyledLink href="/guide">
       <a className={props.guide && 'active'}>API Guide</a>
     </StyledLink>
+    <StyledLink href="/partners">
+      <a className={props.partners && 'active'}>Partners API</a>
+    </StyledLink>
     <StyledLink href="/reference">
       <a className={props.reference ? 'active' : 'not'}>API Reference</a>
     </StyledLink>
@@ -62,4 +65,3 @@ const Wrapper = styled.div`
 const StyledLink = styled(Link)`
   ${props => props.active && 'color: red !important;'}
 `;
-

components/Layout.js

@@ -29,6 +29,7 @@ const Layout = (props) => (
     <Header
       home={props.home}
       guide={props.guide}
+      partners={props.partners}
       reference={props.reference}
       tools={props.tools}
     />

pages/guide.js

@@ -363,8 +363,8 @@ const Index = () => (
     <h2>First contact</h2>
     <p>
       You can simply hit the Sencrop API
-      by simply opening ou ping endpoint
-      in you browser:<br/>
+      by simply opening our ping endpoint
+      in your browser:<br/>
       <a href="{PING_ENDPOINT}"
       >{PING_ENDPOINT}</a>
     </p>
@@ -402,7 +402,7 @@ const Index = () => (
       in.
     </p>
     <p>
-      We will soon provide you a interface
+      We will soon provide you an interface
       to manage your applications token but
       in the meanwhile, you can open the
       developer console and copy/paste this

pages/partners.js

@@ -0,0 +1,131 @@
+import Link from 'next/link'
+import Layout from '../components/Layout'
+
+import SyntaxHighlighter, { registerLanguage } from "react-syntax-highlighter/dist/light"
+import js from 'react-syntax-highlighter/dist/languages/javascript'
+import docco from 'react-syntax-highlighter/dist/styles/docco'
+
+registerLanguage('javascript', js);
+
+const CURL_SENCROP_TOKEN_REQUEST = `
+curl https://api.sencrop.com/v1/partners/1/tokenRequests \
+  -X POST --data '{"email":"nicolas@sencrop.com"}' \
+  -H 'Content-Type: application/json' \
+  -u 'alibaba:open_sesame'
+`;
+
+const CURL_SENCROP_TOKEN_CLAIM = `
+curl https://api.sencrop.com/v1/partners/1/tokens \
+  -X POST --data '{"email":"nicolas@sencrop.com", "code": "P6YEES"}' \
+  -H 'Content-Type: application/json' \
+  -u 'alibaba:open_sesame'
+`;
+
+const SENCROP_TOKEN_CLAIM_PAYLOAD = `{
+{
+  "userId":1,
+  "organisationId":1,
+  "token":"aac64190008c7f7b216ce91e7f1dec37ea615f1a3f5630cfc2ded6232badbb703c11a0c8dd2bbd5a8abb10d44427ae21131b3fd43cfe6fcebcc1fc84d89f10b6d6c85cd3f704cffc8486831d35f831f06ec9dd7d3e5c9e8f0fcc3658f1055cfe1516ee159120b964a40af7c462589edcd1243869ccd294144244c9426d3d6dc0",
+  "expirationDate":"2018-03-03T08:08:48.062Z"
+}
+`;
+
+const Partners = () => (
+  <Layout title={ 'API Guide' } description={
+`Quick tour of the parners API.`.replace(/\n/, '')
+} partners>
+    <h1>Partners API</h1>
+    <p>
+      The Sencrop API allows a simpler
+      authorization delegation process for
+      its partners program.
+    </p>
+    <p>
+      The partners API requires you to contact
+      us before being allowed to use it. To do
+      so, please <a href="https://app.sencrop.com/signup"
+      >create an
+      account</a> and <a href="https://sencrop.typeform.com/to/XzDjNC"
+      >contact us then</a>.
+    </p>
+    and <p>
+      After contacting us, you will get.
+    </p>
+    <ol>
+      <li>
+        your API credentials (client id and
+        client secret) to interact with the
+        partners API authorization server,
+      </li>
+      <li>
+        and your API token to interact with our
+        REST API on your own data.
+      </li>
+    </ol>
+    <p>
+      Those informations will soon be manageable
+      by your side but in the meanwhile, please
+      contact us to renew it.
+    </p>
+    <h2>Delegation flow</h2>
+    <p>
+      Obtaining a token from our users,
+      involves 4 distinct steps.
+    </p>
+    <p>
+      First, you must collect the Sencrop
+      user email via your own UI (remember
+      to require the email they used to
+      subscribe to Sencrop).
+    </p>
+    <p>
+      Then, create a token request. This will
+      trigger an SMS to the user with a 6 chars
+      authorization code.
+    </p>
+    <p>
+      Finally ask users for that code and call our
+      token claim endpoint. It will provide you
+      a token allowing you to act on the behalf
+      of that user.
+    </p>
+    <h3>Requesting a token</h3>
+    <p>
+      To request a token just call the following
+      endpoint with your API client id and secret:
+    </p>
+    <SyntaxHighlighter language="bash" style={docco}>{
+      CURL_SENCROP_TOKEN_REQUEST
+    }</SyntaxHighlighter>
+    <p>
+      This will send a SMS to the user with
+      an authorization code.
+    </p>
+    <h3>Creating a token</h3>
+    <p>
+      To create the token just call the following
+      endpoint with your API client id and secret:
+    </p>
+    <SyntaxHighlighter language="bash" style={docco}>{
+      CURL_SENCROP_TOKEN_CLAIM
+    }</SyntaxHighlighter>
+    <SyntaxHighlighter language="javascript" style={docco}>{
+      SENCROP_TOKEN_CLAIM_PAYLOAD
+    }</SyntaxHighlighter>
+    <p>
+      That token allows your to access the user
+      data through the
+      API. <Link href="/guide"><a>See our API
+      guide</a></Link> for more information
+      on its usage.
+    </p>
+    <p>
+      The full endpoints documentation can
+      be found in the <Link href="/reference"><a>API
+      reference</a></Link> under the partners
+      tag.
+    </p>
+  </Layout>
+)
+
+export default Partners