git.squeep.com Git - squeep-indie-auther/blob - src/template/admin-html.js

   1 'use strict';
   2
   3 /**
   4  * This renders the administrative view for an account,
   5  * allowing for adding profile URIs, custom scope bundles,
   6  * and management of issued tokens.
   7  */
   8
   9 const th = require('./template-helper');
  10
  11
  12 function renderProfileLI(profile) {
  13   return `\t<li><a class="uri" name="${profile}">${profile}</a></li>`;
  14 }
  15
  16
  17 function renderProfileScopeIndicator(profile, scope, selected) {
  18   const checked = selected ? ' checked' : '';
  19   return `\t\t<td>
  20 \t\t\t<input type="checkbox" id="${profile}-${scope}" name="scopes-${profile}" value="${scope}"${checked}>
  21 \t\t</td>`;
  22 }
  23
  24 function renderScopeRow(scope, details, profiles) {
  25   return `\t<tr class="scope">
  26 ${(profiles || []).map((profile) => renderProfileScopeIndicator(profile, scope, details.profiles.includes(profile))).join('\n')}
  27 \t\t<th scope="row"><label>${scope}<label></th>
  28 \t\t<td class="description">${details.description}</td>
  29 \t\t<td>${details.application}</td>
  30 \t\t<td class="scope-actions">` +
  31     (details.isManuallyAdded ? `
  32 \t\t\t<button name="action" value="delete-scope-${encodeURIComponent(scope)}">Delete</button>
  33 ` : '') + `
  34 \t\t</td>
  35 \t</tr>`;
  36 }
  37
  38
  39 function renderProfileHeader(profile) {
  40   return `<th class="vertical uri">
  41 \t\t${profile}
  42 </th>`;
  43 }
  44
  45
  46 function scopeIndexTable(scopeIndex, profiles) {
  47   return `<table>
  48 <thead>
  49 \t<tr>
  50 ${(profiles || []).map((profile) => renderProfileHeader(profile)).join('\n')}
  51 \t\t<th>Scope</th>
  52 \t\t<th>Description</th>
  53 \t\t<th>Application</th>
  54 \t\t<th class="scope-actions"></th>
  55 \t</tr>
  56 </thead>
  57 <tbody>
  58 ${Object.entries(scopeIndex).sort(th.scopeCompare).map(([scope, details]) => renderScopeRow(scope, details, profiles)).join('\n')}
  59 </tbody>
  60 </table>`;
  61 }
  62
  63 function _tokenType(token) {
  64   if (token.resource) {
  65     return 'ticket-token';
  66   }
  67   if (!token.isToken) {
  68     return 'profile';
  69   }
  70   return 'token';
  71 }
  72
  73 function renderTokenRow(token) {
  74   const createdTitle = token.refreshed ? 'Refreshed At' : 'Created At';
  75   const createdDate = token.refreshed ? token.refreshed : token.created;
  76   return `\t\t<tr>
  77 <td>${_tokenType(token)}</td>
  78 \t\t\t<td class="uri">${token.clientId}</td>
  79 \t\t\t<td class="uri">${token.profile}</td>
  80 <td class="scope">${(token.scopes || []).join(', ')}</td>
  81 \t\t\t<td class="code">${token.codeId}</td>
  82 \t\t\t<td>${th.timeElement(createdDate, { title: createdTitle })}</td>
  83 \t\t\t<td>${th.timeElement(token.expires, { title: 'Expires At' })}</td>
  84 \t\t\t<td>${token.isRevoked}</td>
  85 <td>${token.resource ? token.resource : ''}</td>
  86 \t\t\t<td>` + (
  87     token.isRevoked ? '' : `
  88 \t\t\t\t<button name="action" value="revoke-${token.codeId}">Revoke</button>`) + `
  89 \t\t\t</td>
  90 \t\t</tr>`;
  91 }
  92
  93 function noTokensRows() {
  94   return [`\t\t<tr>
  95 \t\t\t<td colspan="100%" class="centered">(No active or recent tokens.)</td>
  96 \t\t</tr>`];
  97 }
  98
  99 function tokenTable(tokens) {
 100   const tokenRows = tokens?.length ? tokens.map((token) => renderTokenRow(token)) : noTokensRows();
 101   return `<table>
 102 \t<thead>
 103 \t\t<tr>
 104 <th>Type</th>
 105 \t\t\t<th>Client Identifier</th>
 106 \t\t\t<th>Profile</th>
 107 <th>Scopes</th>
 108 \t\t\t<th>Code</th>
 109 \t\t\t<th>Created or Refreshed</th>
 110 \t\t\t<th>Expires</th>
 111 \t\t\t<th>Revoked</th>
 112 <th>Resource</th>
 113 \t\t\t<th></th>
 114 \t\t</tr>
 115 \t</thead>
 116 \t<tbody>
 117 ${tokenRows.join('\n')}
 118 \t</tbody>
 119 </table>`;
 120 }
 121
 122 function mainContent(ctx) {
 123   return `<section>
 124 \t<h2>Profiles</h2>
 125 \t<ul>
 126 \t${(ctx.profilesScopes?.profiles || []).map((p) => renderProfileLI(p)).join('\n')}
 127 \t</ul>
 128 \t<form action="" method="POST">
 129 \t\t<fieldset>
 130 \t\t\t<legend>Add New Profile</legend>
 131 \t\t\t<div>
 132 \t\t\t\tThe profile identity URIs associated with this account.
 133 \t\t\t\tEach must indicate this service as the authorization endpoint.
 134 \t\t\t</div>
 135 \t\t\t<br>
 136 \t\t\t<label for="profile">Profile URL:</label>
 137 \t\t\t<input type="url" id="profile" name="profile" size="96">
 138 \t\t\t<button name="action" value="new-profile">Add Profile</button>
 139 \t\t</fieldset>
 140 \t</form>
 141 </section>
 142 <section>
 143 \t<h2>Scopes</h2>
 144 \t<form action="" method="POST">
 145 \t\t<details>
 146 \t\t<summary>
 147 \t\tScopes Associated with Profiles for Convenience
 148 \t\t</summary>
 149 \t\t\t<fieldset>
 150 \t\t\t\t<legend>Manage Additional Profile Scope Availability</legend>
 151 \t\t\t\t<div>
 152 \t\t\t\t\tThis table lists pre-defined scopes which you can choose to add to any authorization request, whether the client requested them or not.
 153 \t\t\t\t\tSelecting one for a profile makes it conveniently available for quick inclusion when authorizing a client request.
 154 \t\t\t\t\tAny scope not in this table or not selected for a profile can always be added in the ad hoc field on the authorization request.
 155 \t\t\t\t</div>
 156 \t\t\t\t<br>
 157 \t\t${scopeIndexTable(ctx.profilesScopes.scopeIndex, ctx.profilesScopes.profiles)}
 158 \t\t\t\t<button name="action" value="save-scopes">Save</button>
 159 \t\t\t</fieldset>
 160 \t\t</form>
 161 \t\t<br>
 162 \t\t<form action="" method="POST">
 163 \t\t\t<fieldset>
 164 \t\t\t\t<legend>Add New Scope</legend>
 165 \t\t\t\t<label for="scope">Scope:</label>
 166 \t\t\t\t<input type="text" id="scope" name="scope">
 167 \t\t\t\t<label for="description">Description:</label>
 168 \t\t\t\t<input type="text" id="description" name="description">
 169 \t\t\t\t<label for="application">Application:</label>
 170 \t\t\t\t<input type="text" id="application" name="application">
 171 \t\t\t\t<button name="action" value="new-scope">Add Scope</button>
 172 \t\t\t</fieldset>
 173 \t\t</details>
 174 \t</form>
 175 </section>
 176 <section>
 177 \t<h2>Tokens</h2>
 178 \t<form action="" method="POST">
 179 ${tokenTable(ctx.tokens)}
 180 \t</form>
 181 </section>`;
 182 }
 183
 184
 185 /**
 186  *
 187  * @param {Object} ctx
 188  * @param {Object} ctx.profilesScopes.scopeIndex
 189  * @param {String[]} ctx.profilesScopes.profiles
 190  * @param {Object[]} ctx.tokens
 191  * @param {Object} options
 192  * @param {Object} options.manager
 193  * @param {String} options.manager.pageTitle
 194  * @param {String} options.manager.logoUrl
 195  * @param {String[]} options.manager.footerEntries
 196  * @returns {String}
 197  */
 198 module.exports = (ctx, options) => {
 199   const htmlOptions = {
 200     pageTitle: options.manager.pageTitle,
 201     logoUrl: options.manager.logoUrl,
 202     footerEntries: options.manager.footerEntries,
 203     navLinks: [
 204       {
 205         text: 'Ticket',
 206         href: 'ticket',
 207       },
 208     ],
 209   };
 210   const content = [
 211     mainContent(ctx),
 212   ];
 213   return th.htmlPage(1, ctx, htmlOptions, content);
 214 };