From 79878240682b2f7e335db4edd4c6a4ed8044a170 Mon Sep 17 00:00:00 2001
From: Ruben Verborgh <ruben@verborgh.org>
Date: Mon, 19 Sep 2022 20:15:30 +0200
Subject: [PATCH] fix: Clarify application consent screen.

---
 .../identity/email-password/consent.html.ejs  | 92 ++++++++++---------
 templates/scripts/util.js                     | 10 ++
 templates/styles/main.css                     | 39 +++++++-
 3 files changed, 96 insertions(+), 45 deletions(-)

diff --git a/templates/identity/email-password/consent.html.ejs b/templates/identity/email-password/consent.html.ejs
index b38a888f1..543203e8b 100644
--- a/templates/identity/email-password/consent.html.ejs
+++ b/templates/identity/email-password/consent.html.ejs
@@ -1,8 +1,12 @@
-<h1>Authorize</h1>
-<p id="webId">Your WebID: </p>
-<p>The following client wants to do authorized requests in your name:</p>
-<ul id="clientInfo">
-</ul>
+<h1>An application is requesting access</h1>
+<p>
+  Your WebID is <strong id="webId"></strong>
+</p>
+<p>
+  Do you trust this application
+  to read and write data on your behalf?
+</p>
+<dl id="client"></dl>
 <form method="post" id="mainForm">
   <p class="error" id="error"></p>
 
@@ -15,52 +19,54 @@
   </fieldset>
 
   <p class="actions">
-    <button autofocus type="submit" name="submit">Consent</button>
-    <button onclick="logOut(event)">Log in with a different account</button>
+    <button id="authorize" type="submit" autofocus>Authorize</button>
+    <button id="cancel" type="button">Cancel</button>
+    <button id="switch" type="button" class="alternate">Use a different WebID</button>
   </p>
 </form>
 
 <script>
-  async function logOut(e) {
-    e.preventDefault();
+  // Wire up elements
+  const elements = getElements();
+  elements.cancel.addEventListener('click', logOut);
+  elements.switch.addEventListener('click', logOut);
+  addPostListener('mainForm', 'error', '', () => {
+    throw new Error('Expected a location field in the response.');
+  });
+
+  // Retrieve and display client information
+  (async() => {
+    const res = await fetch('', { headers: { accept: 'application/json' } });
+    const { webId, client } = await res.json();
+    showWebId(webId);
+    showClientInfo('Name', client.client_name);
+    showClientInfo('ID', client.client_id);
+  })();
+
+  // Updates the user's WebID in the UI
+  function showWebId(webId) {
+    elements.webId.innerText = webId;
+  }
+
+  // Adds client info to the UI
+  function showClientInfo(label, value) {
+    if (value) {
+      const dt = document.createElement('dt');
+      const dd = document.createElement('dd')
+      dt.innerText = label;
+      dd.innerText = value;
+      elements.client.append(dt, dd);
+    }
+  }
+
+  // Logs the user out
+  async function logOut(event) {
     const res = await fetch('', {
       method: 'POST',
       headers: { accept: 'application/json', 'content-type': 'application/json' },
       body: JSON.stringify({ logOut: true }),
     });
-    const json = await res.json();
-    location.href = json.location;
+    const body = await res.json();
+    location.href = body.location;
   }
 </script>
-
-<script>
-  function addWebId(webId) {
-    const p = document.getElementById('webId');
-    const strong = document.createElement('strong')
-    strong.appendChild(document.createTextNode(webId));
-    p.appendChild(strong);
-  }
-
-  const clientInfo = document.getElementById('clientInfo');
-  function addClientInfo(text, value) {
-    if (value) {
-      const li = document.createElement('li');
-      const strong = document.createElement('strong')
-      strong.appendChild(document.createTextNode(value));
-      li.appendChild(document.createTextNode(`${text}: `));
-      li.appendChild(strong);
-      clientInfo.appendChild(li);
-    }
-  }
-
-  // Update the client information
-  (async() => {
-    const res = await fetch('', { headers: { accept: 'application/json' } });
-    const { webId, client } = await res.json();
-    addWebId(webId);
-    addClientInfo('Name', client.client_name);
-    addClientInfo('ID', client.client_id);
-  })()
-
-  addPostListener('mainForm', 'error', '', () => { throw new Error('Expected a location field in the response.') });
-</script>
diff --git a/templates/scripts/util.js b/templates/scripts/util.js
index 2b07423b5..117315be7 100644
--- a/templates/scripts/util.js
+++ b/templates/scripts/util.js
@@ -1,3 +1,13 @@
+/**
+ * Returns an object that maps IDs to the corresponding element.
+ *
+ * @param ...ids - IDs of the element (empty to retrieve all elements)
+ */
+function getElements(...ids) {
+  ids = ids.length ? ids : [...document.querySelectorAll("[id]")].map(e => e.id);
+  return Object.fromEntries(ids.map(id => [id, document.getElementById(id)]));
+}
+
 /**
  * Acquires all data from the given form and POSTs it as JSON to the target URL.
  * In case of failure this function will throw an error.
diff --git a/templates/styles/main.css b/templates/styles/main.css
index 77d8a1bf2..7e5e21ed4 100644
--- a/templates/styles/main.css
+++ b/templates/styles/main.css
@@ -138,6 +138,20 @@ ul ul, ol ul {
   padding-left: 1em;
 }
 
+dl {
+  padding: 0 0 0 2em;
+  margin: .75em 0 0;
+}
+dl dt {
+  font-weight: bold;
+  float: left;
+  clear: left;
+  min-width: 4em;
+}
+dl dt:after {
+  content: ": ";
+}
+
 pre {
   overflow-x: scroll;
 }
@@ -207,12 +221,30 @@ button {
   border: 0px;
   background-color: var(--solid-purple);
   color: white;
-
-  font-weight: 600;
 }
 button:hover {
   background-color: var(--solid-blue);
 }
+button[type=submit] {
+  font-weight: 600;
+}
+
+button.alternate {
+  display: block;
+  padding: 0;
+  margin: .5em 0;
+
+  background: none;
+  color: var(--solid-purple);
+  font-weight: normal;
+}
+button.alternate:hover {
+  color: var(--solid-blue);
+}
+
+input:focus, button:focus {
+  outline: var(--solid-blue) solid 1.5px;
+}
 
 form p.actions {
   margin: .5em 0 1em 11em;
@@ -222,6 +254,9 @@ form p.error {
   color: #ad0f0f;
   font-weight: 600;
 }
+form p.error:empty {
+  display :none;
+}
 
 form ul.actions {
   padding: 0;