Display all authenticated apps for a user on their account page

lib/armadietto.js

@@ -139,7 +139,7 @@
 
   async dispatch (req, res) {
     const method = req.method.toUpperCase();
     const uri = url.parse(req.url, true);
 
     const startBasePath = new RegExp('^/?' + this._basePath + '/?');
     let match;
@@ -195,6 +195,12 @@
       if (method === 'POST') return users.register();
     }
 
+    if (uri.pathname === 'account') {
+      const users = new Users(this, req, res);
+      if (method === 'GET') return users.showLoginForm();
+      if (method === 'POST') return users.showAccountPage();
+    }
+
     match = uri.pathname.match(/^storage\/([^/]+)(.*)$/);
     if (match) {
       const username = decodeURIComponent(match[1]).split('@')[0];

lib/assets/style.css

@@ -785,3 +785,16 @@ button[name="deny"]:focus {
 #switch.light::before {
   content: url('sprite.svg#icon-moon');
 }
+.deemphasize {
+	color: #a6a6a6;
+	font-size: 0.8em;
+}
+.favicon {
+	width: 32px;
+	height: 32px;
+	vertical-align: middle;
+}
+
+.account-info td {
+	font-size: 0.8em;
+}

lib/controllers/users.js

@@ -27,6 +27,62 @@
       });
     }
   }
+
+  async showLoginForm () {
+    if (this.redirectToSSL()) return;
+    this.renderHTML(200, 'login.html', { params: this.params, error: null });
+  }
+
+  async showAccountPage () {
+    if (this.blockUnsecureRequest()) return;
+
+    const expandedPermissions = {
+      'r': 'Read',
+      'w': 'Write'
+    };
+
+    try {
+      await this.server._store.authenticate(this.params);
+      const authData = await this.server._store.readAuth(this.params.username);
+      // this is a bit of a monster but it formats the somewhat unwieldy auth.json
+      // for a user into something that looks like:
+      // {
+      //   "params": {"username": string},
+      //   "host": string,
+      //   "sessions: [
+      //     "clientId": string,    <- the url for the app as per the spec
+      //     "permissions": [
+      //       {
+      //         "folder": string,
+      //         "permissions": ["Read", "Write"]    <- the permission array may contain one/both
+      //       }
+      //     ]
+      //   ]
+      // }
+      //
+      // We're doing this transform just to make it easier on the view side to
+      // iterate over things.
+      this.renderHTML(200, 'account.html', {
+        params: { username: this.params.username },
+        host: this.getHost(),
+        sessions: authData.sessions ? Object.keys(authData.sessions).map(k => {
+          return {
+            clientId: authData.sessions[k].clientId,
+            permissions: Object.keys(authData.sessions[k].permissions).map(folder => {
+              return {
+                folder: folder,
+                permissions: Object.keys(authData.sessions[k].permissions[folder]).filter(perm => {
+                  return authData.sessions[k].permissions[folder][perm];
+                }).map(v => expandedPermissions[v])
+              };
+            })
+          };
+        }) : []
+      });
+    } catch (error) {
+      this.renderHTML(409, 'login.html', { params: this.params, error });
+    }
+  }
 }
 
 module.exports = Users;

lib/views/account.html

@@ -0,0 +1,29 @@
+<h2>Account Info</h2>
+
+<p>Your storage account: <%= params.username %>@<%= host %></p>
+
+<table class="account-info">
+	<thead>
+		<tr>
+			<th>Application</th>
+			<th>Permissions</th>
+		</tr>
+	</thead>
+	<tbody>
+	<% sessions.forEach(function(session) { %>
+		<tr>
+			<td>
+				<img src="<%= session.clientId %>/favicon.ico" alt="Favicon for <%= session.clientId %>" class="favicon">
+				<a href="<%= session.clientId %>" target="_blank"><%= session.clientId %></a>
+			</td>
+			<td>
+				<% session.permissions.forEach(folder => { %>
+				<%= folder.folder %> <span class="deemphasize">
+					(<%= folder.permissions.join(', ') %>)
+				</span>
+				<% }); %>
+			</td>
+		</tr>
+	<% }); %>
+	</tbody>
+</table>

lib/views/layout.html

@@ -32,6 +32,12 @@ <h1>
 
       <nav role="navigation">
         <ul>
+          <li>
+            <a href="<%= basePath %>/">Home</a>
+          </li>
+		      <li>
+            <a href="<%= basePath %>/account">Account</a>
+          </li>
           <% if (signup) { %>
             <li class="login">
               <a class="signup" href="<%= basePath %>/signup">Sign up</a>

lib/views/login.html

@@ -0,0 +1,19 @@
+<h2>Log In</h2>
+
+<form method="post" action="<%= basePath %>/account">
+  <% if (error) { %>
+    <p class="error"><%= error.message %></p>
+  <% } %>
+
+  <table>
+    <tr>
+      <th scope="row"><label for="username">Username</label></th>
+      <td><input type="text" id="username" name="username" value="<%= params.username || '' %>"></td>
+    </tr>
+    <tr>
+      <th scope="row"><label for="password">Password</label></th>
+      <td><input type="password" id="password" name="password" value=""></td>
+    </tr>
+  </table>
+  <p><input type="submit" value="Go"></p>
+</form>