ensure that scope parameter is passed along. List them out nicely on the authorize page.

public/elements.css

@@ -32,6 +32,10 @@ p {
   line-height: 1.6;
 }
 
+li {
+  line-height: 1.6;
+}
+
 input {
   background-color: var(--blinding-dawn);
   border: 0;

src/authorization.handler.js

@@ -24,7 +24,9 @@ const showAppToAuthorize = async (request, h) => {
   }
   // try to get any hcard data about the service you are trying to login to.
   const hcard = await hcardService(client_id)
-  const context = { ...request.query, hcard }
+  const { scope: scopeString = '' } = request.query
+  const scopeAsList = scopeString.split(' ').map(scope => ({ scope }))
+  const context = { ...request.query, hcard, scopeAsList }
   console.log({ context })
   return h.view('authorize', context)
 }

views/authorize.hbs

@@ -24,6 +24,20 @@
     <input type="hidden" name="client_id" value="{{client_id}}">
     <input type="hidden" name="redirect_uri" value="{{redirect_uri}}">
     <input type="hidden" name="state" value="{{state}}">
+    <input type="hidden" name="scope" value="{{scope}}">
+
+    {{#if scopeAsList.length }}
+      <p>Also, the site asked for permission to perform actions on your behalf.</p>
+      <p>Permissions requested (scope):</p>
+      <p>
+      <ul>
+      {{#each scopeAsList}}
+        <li>{{scope}}</li>
+      {{/each}}
+      </ul>
+      </p>
+    {{/if}}
+
     <div class="c-authorize-buttons u-margin-bottom">
       <a href="/logout">Logout</a>
       <button type="submit">Authorize site</button>

views/login.hbs

@@ -8,6 +8,7 @@
     <input type="hidden" name="redirect_uri" value="{{redirect_uri}}">
     <input type="hidden" name="state" value="{{state}}">
     <input type="hidden" name="response_type" value="{{response_type}}">
+    <input type="hidden" name="scope" value="{{scope}}">
     <label for="username">Username:</label>
     <input type="text" name="username" value="" required>
     <label for="password">Password:</label>