@boopkit/cap-oauth-server 0.1.0

package/scaffold/styles/oauth-server.css

@@ -0,0 +1,345 @@
+/**
+ * @boopkit/cap-oauth-server — the consent screen's styles.
+ *
+ * Deliberately the same register as cap-users' `auth.css`: one centred card on
+ * a plain page, the same radii, the same brand tokens, the same weight of type.
+ * That is the point rather than laziness — this page belongs to the application
+ * it is rendered in, and a user meets it in the middle of a flow they started
+ * somewhere else on the same site. A page that looked like a protocol console
+ * would read as a different site at the exact moment they are deciding whether
+ * to trust one.
+ *
+ * THE ONE RULE THAT IS NOT TASTE. `.consent-icon` fixes the icon box's size and
+ * `.consent-icon-image` fills it with `object-fit: cover`. Under open dynamic
+ * registration `logo_uri` is supplied by an unauthenticated stranger, and a
+ * 4000px image, a 1px image or a tall thin one must all produce the same
+ * layout. The image never gets a say in how much room it has.
+ */
+
+.consent-page {
+  @apply flex flex-1 items-center justify-center px-4 py-12;
+}
+
+.consent-card {
+  @apply w-full max-w-md rounded-xl bg-white p-8 shadow-md;
+}
+
+.consent-card--error {
+  @apply text-center;
+}
+
+/* === Client identity === */
+
+.consent-header {
+  @apply mb-6 flex flex-col items-center text-center;
+}
+
+/* Fixed. See the header — this is the hostile-input defence, not styling. */
+.consent-icon {
+  @apply mb-3 flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden
+         rounded-xl border border-gray-200 bg-gray-50;
+}
+
+.consent-icon-image {
+  @apply h-full w-full object-cover;
+}
+
+.consent-icon-monogram {
+  @apply text-xl font-semibold text-gray-500;
+}
+
+.consent-title {
+  @apply text-xl font-semibold text-gray-900;
+}
+
+.consent-subtitle {
+  @apply mt-1 text-sm text-gray-500;
+}
+
+.consent-description {
+  @apply mt-2 text-sm text-gray-600;
+}
+
+/*
+ * Provenance. The modifier classes exist so an application can make an
+ * unverified self-registration look different from an operator-configured
+ * client without editing the template.
+ */
+.consent-provenance {
+  @apply mt-3 rounded-md bg-gray-50 px-3 py-2 text-xs text-gray-500;
+}
+
+.consent-provenance--dynamic {
+  @apply bg-amber-50 text-amber-800;
+}
+
+/* === Scopes === */
+
+.consent-scopes {
+  @apply mt-6;
+}
+
+.consent-scopes-title {
+  @apply text-xs font-semibold uppercase tracking-wide text-gray-400;
+}
+
+.consent-scope-list {
+  @apply mt-2 flex flex-col gap-2;
+}
+
+.consent-scope {
+  @apply rounded-md bg-gray-50 px-3 py-2 text-sm text-gray-700;
+}
+
+/*
+ * The fallback state: the application published no words for this scope, so the
+ * page is showing the raw string. It is marked rather than hidden, because the
+ * developer's boot warning is the fix and the user should at least see that
+ * this line is machine text.
+ */
+.consent-scope--undescribed {
+  @apply font-mono text-xs text-gray-500;
+}
+
+/* === The coverage statement, before the buttons === */
+
+.consent-coverage {
+  @apply mt-5 text-xs leading-relaxed text-gray-500;
+}
+
+/* === Actions === */
+
+.consent-actions {
+  @apply mt-6 flex flex-col gap-2;
+}
+
+.consent-form {
+  @apply flex flex-col gap-3;
+}
+
+.consent-form--auth {
+  @apply mt-6;
+}
+
+.consent-auth-prompt {
+  @apply text-sm text-gray-600;
+}
+
+.consent-input {
+  @apply w-full rounded-lg border border-gray-300 px-3 py-2 text-sm
+         placeholder-gray-400 focus:outline-none focus:ring-1;
+  &:focus {
+    border-color: var(--color-brand-500);
+    --tw-ring-color: var(--color-brand-500);
+  }
+}
+
+.consent-approve {
+  @apply w-full rounded-lg px-4 py-2 text-sm font-medium text-white
+         focus:outline-none focus:ring-2 focus:ring-offset-2;
+  background-color: var(--color-brand-600);
+  &:hover {
+    background-color: var(--color-brand-700);
+  }
+  &:focus {
+    --tw-ring-color: var(--color-brand-500);
+  }
+}
+
+.consent-deny {
+  @apply w-full rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium
+         text-gray-700 transition-colors hover:bg-gray-50;
+}
+
+.consent-switch {
+  @apply mt-4 w-full text-center text-sm text-gray-500 hover:underline;
+}
+
+.consent-providers {
+  @apply mt-4;
+}
+
+/* === Messages === */
+
+.consent-messages {
+  @apply mb-4;
+}
+
+.consent-error {
+  @apply rounded-md bg-red-50 px-3 py-2 text-sm text-red-700;
+}
+
+.consent-notice {
+  @apply rounded-md bg-green-50 px-3 py-2 text-sm text-green-800;
+}
+
+.consent-links {
+  @apply mt-6 text-center text-xs text-gray-400;
+}
+
+.consent-links a {
+  @apply hover:underline;
+}
+
+/**
+ * === The connected-clients screen, and the disconnect confirmation ===
+ *
+ * A list page rather than a card page, so it takes the wider `max-w-2xl` that a
+ * settings surface wants — but the same radii, the same grays and the same
+ * brand tokens as the consent card, because it is the other half of one story
+ * and a user arrives here having seen that card.
+ *
+ * The confirmation page reuses `.consent-card` outright and adds only what is
+ * different about it: a confirm button in red rather than in the brand colour.
+ * That is the one thing that must not be "tidied" into `.consent-approve` — the
+ * brand button is what a person taps to proceed with something they want, and
+ * this page is asking them to break something. Cancel keeps `.consent-deny`, so
+ * the two do not carry equal weight; it sits directly under the confirm, full
+ * width, because a person who arrived here by mistake should not have to aim.
+ */
+
+.connections-page {
+  @apply mx-auto w-full max-w-2xl px-4 py-10;
+}
+
+.connections-header {
+  @apply mb-6;
+}
+
+.connections-title {
+  @apply text-2xl font-semibold text-gray-900;
+}
+
+.connections-subtitle {
+  @apply mt-1 text-sm text-gray-500;
+}
+
+.connections-notice {
+  @apply mb-6 rounded-md bg-green-50 px-4 py-3 text-sm text-green-800;
+}
+
+/* The coverage statement. Above the list, because it governs every row. */
+.connections-coverage {
+  @apply mb-6 rounded-md bg-gray-50 px-4 py-3 text-xs leading-relaxed text-gray-500;
+}
+
+.connections-section {
+  @apply mb-10;
+}
+
+/*
+ * The separation that makes "separate sections" true to look at rather than
+ * only true in the markup. A rule and a gap, not a heavier container: the
+ * previously-connected list is meant to recede.
+ */
+.connections-section--previous {
+  @apply border-t border-gray-200 pt-8;
+}
+
+.connections-section-title {
+  @apply text-xs font-semibold uppercase tracking-wide text-gray-400;
+}
+
+.connections-section-note {
+  @apply mt-1 text-xs text-gray-500;
+}
+
+.connections-empty {
+  @apply rounded-xl border border-dashed border-gray-200 px-6 py-10 text-center text-sm text-gray-500;
+}
+
+.connection-list {
+  @apply flex flex-col gap-3;
+}
+
+.connection-list--previous {
+  @apply mt-3;
+}
+
+.connection-item {
+  @apply flex items-start gap-4 rounded-xl border border-gray-200 bg-white p-5 shadow-sm;
+}
+
+/*
+ * Quieter, and deliberately so. A disconnected client is history rather than
+ * inventory: it stays legible, it does not compete with a live connection.
+ */
+.connection-item--previous {
+  @apply border-gray-100 bg-gray-50 p-4 shadow-none;
+}
+
+/* Fixed, for the same reason `.consent-icon` is. The image never gets a say. */
+.connection-icon {
+  @apply flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden
+         rounded-lg border border-gray-200 bg-gray-50;
+}
+
+.connection-icon-image {
+  @apply h-full w-full object-cover;
+}
+
+.connection-icon-monogram {
+  @apply text-sm font-semibold text-gray-500;
+}
+
+.connection-body {
+  @apply min-w-0 flex-1;
+}
+
+.connection-name {
+  @apply text-base font-semibold text-gray-900;
+}
+
+.connection-item--previous .connection-name {
+  @apply text-sm font-medium text-gray-600;
+}
+
+.connection-meta {
+  @apply mt-0.5 text-xs text-gray-500;
+}
+
+.connection-provenance {
+  @apply mt-2 text-xs text-gray-500;
+}
+
+.connection-provenance--dynamic {
+  @apply text-amber-700;
+}
+
+.connection-scopes-title {
+  @apply mt-3 text-xs font-semibold uppercase tracking-wide text-gray-400;
+}
+
+.connection-scope-list {
+  @apply mt-1 flex flex-col gap-1;
+}
+
+.connection-scope {
+  @apply text-sm text-gray-700;
+}
+
+.connection-scope--undescribed {
+  @apply font-mono text-xs text-gray-500;
+}
+
+.connection-disconnect {
+  @apply shrink-0 rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium
+         text-gray-700 transition-colors hover:border-red-300 hover:bg-red-50 hover:text-red-700;
+}
+
+/* === The confirmation page === */
+
+.disconnect-consequence {
+  @apply mt-2 text-sm leading-relaxed text-gray-600;
+}
+
+.disconnect-confirm {
+  @apply w-full rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white
+         transition-colors hover:bg-red-700 focus:outline-none focus:ring-2
+         focus:ring-red-500 focus:ring-offset-2;
+}
+
+/* A link styled as the reassuring button. `.consent-deny` carries the rest. */
+.disconnect-cancel {
+  @apply block text-center no-underline;
+}

package/scaffold/views/oauth-connected-clients.hbs

@@ -0,0 +1,98 @@
+{{!--
+  @boopkit/cap-oauth-server — the connected-clients screen.
+
+  Three things on this page are load-bearing rather than decorative, and a
+  redesign has to keep all three:
+
+    1. The COVERAGE STATEMENT. Grants are keyed on the user, so a connected
+       application reaches every account that person reaches. A list of client
+       names with no such sentence invites the natural wrong guess — that a
+       connector reaches only the account they were looking at when they
+       approved it.
+    2. The PREVIOUSLY CONNECTED section. Revocation is soft and the audit trail
+       is the reason it is soft; a screen that showed only live grants would hide
+       the ended rows from the only person who wants them.
+    3. Disconnect is a LINK to a confirmation page, never a form button here.
+       One-way doors get their own page. Nothing on this page performs a write.
+--}}
+<div class="connections-page">
+  <div class="connections-header">
+    <h1 class="connections-title">Connected applications</h1>
+    <p class="connections-subtitle">
+      Applications you have given access to your account.
+    </p>
+  </div>
+
+  {{#if disconnected}}
+    <div class="connections-notice">
+      {{disconnected}} has been disconnected. It can no longer act on your behalf.
+    </div>
+  {{/if}}
+
+  <p class="connections-coverage">{{coverage}}</p>
+
+  <section class="connections-section">
+    {{#if hasConnected}}
+      <ul class="connection-list">
+        {{#each connected}}
+          <li class="connection-item">
+            <div class="connection-icon">
+              {{#if logoUri}}
+                <img class="connection-icon-image" src="{{logoUri}}" alt="" referrerpolicy="no-referrer" />
+              {{else}}
+                <span class="connection-icon-monogram">{{monogram}}</span>
+              {{/if}}
+            </div>
+
+            <div class="connection-body">
+              <h2 class="connection-name">{{name}}</h2>
+              <p class="connection-meta">Connected on {{connectedOn}}</p>
+              <p class="connection-provenance connection-provenance--{{mode}}">{{provenance}}</p>
+
+              <h3 class="connection-scopes-title">It can</h3>
+              <ul class="connection-scope-list">
+                {{#each scopes}}
+                  <li class="connection-scope{{#unless described}} connection-scope--undescribed{{/unless}}">
+                    {{description}}
+                  </li>
+                {{else}}
+                  <li class="connection-scope">Sign you in and confirm who you are.</li>
+                {{/each}}
+              </ul>
+            </div>
+
+            {{!-- A link, not a form. The write lives on the confirmation page. --}}
+            <a class="connection-disconnect" href="{{disconnectPath}}">Disconnect</a>
+          </li>
+        {{/each}}
+      </ul>
+    {{else}}
+      <p class="connections-empty">
+        You have not connected any applications yet. When you do, they will appear here
+        and you can disconnect them at any time.
+      </p>
+    {{/if}}
+  </section>
+
+  {{#if hasPrevious}}
+    <section class="connections-section connections-section--previous">
+      <h2 class="connections-section-title">Previously connected</h2>
+      <p class="connections-section-note">
+        These applications no longer have access. They are kept here as a record of what
+        was once connected.
+      </p>
+      <ul class="connection-list connection-list--previous">
+        {{#each previous}}
+          <li class="connection-item connection-item--previous">
+            <div class="connection-body">
+              <h3 class="connection-name">{{name}}</h3>
+              <p class="connection-meta">
+                Connected on {{connectedOn}} · Disconnected on {{disconnectedOn}}
+              </p>
+            </div>
+          </li>
+        {{/each}}
+      </ul>
+    </section>
+  {{/if}}
+</div>

package/scaffold/views/oauth-consent-error.hbs

@@ -0,0 +1,22 @@
+{{!--
+  @boopkit/cap-oauth-server — the authorization request we could not answer.
+
+  Reached only when the request named no usable client or an unregistered
+  redirect URI, which is the one case RFC 6749 forbids answering with a
+  redirect: sending an error to an unverified redirect URI is the open redirect.
+  So the person is told here instead, on our own page.
+
+  The message names what was wrong with the request and nothing about the
+  registry — a page that distinguished "no such client" from "that client is
+  suspended" would be an enumeration oracle for whoever is probing.
+--}}
+<div class="consent-page">
+  <section class="consent-card consent-card--error">
+    <h1 class="consent-title">This connection request could not be completed</h1>
+    <p class="consent-error">{{errorMessage}}</p>
+    <p class="consent-description">
+      Nothing has been shared and no access has been granted. Go back to the application
+      that sent you here and try connecting again.
+    </p>
+  </section>
+</div>

package/scaffold/views/oauth-consent.hbs

@@ -0,0 +1,138 @@
+{{!--
+  @boopkit/cap-oauth-server — the consent screen.
+
+  One page, three variants. The card at the top is identical in all three; what
+  changes below it is whether the user is approving, signing in, or creating an
+  account. Everything the authorization request carried travels in hidden fields
+  inside each form, so the request never has to round-trip through a `?next=`
+  parameter — see the controller's header for why that matters.
+
+  Three things on this page are load-bearing rather than decorative, and a
+  redesign has to keep all three:
+
+    1. The icon sits in a FIXED box. Its size comes from `.consent-icon` and
+       never from the image, because under open registration the image is
+       supplied by an unauthenticated stranger.
+    2. The provenance line says where this client's claims came from. Without it
+       a self-registered client is displayed exactly like an operator-configured
+       one, which makes the page a phishing surface.
+    3. The coverage statement sits BEFORE the buttons. Grants are keyed on the
+       user, so this reaches every account they reach — a person must not
+       discover that afterwards.
+--}}
+<div class="consent-page">
+  <section class="consent-card">
+
+    <header class="consent-header">
+      <div class="consent-icon">
+        {{#if client.logoUri}}
+          <img class="consent-icon-image" src="{{client.logoUri}}" alt="" referrerpolicy="no-referrer" />
+        {{else}}
+          <span class="consent-icon-monogram">{{client.monogram}}</span>
+        {{/if}}
+      </div>
+      <h1 class="consent-title">{{client.name}}</h1>
+      <p class="consent-subtitle">wants to connect to your account</p>
+    </header>
+
+    {{#if errorMessage}}
+      <div class="consent-messages">
+        <div class="consent-error">{{errorMessage}}</div>
+      </div>
+    {{/if}}
+
+    {{#if justSignedIn}}
+      <div class="consent-messages">
+        <div class="consent-notice">You are signed in. Approve the request below to continue.</div>
+      </div>
+    {{/if}}
+
+    {{#if client.description}}
+      <p class="consent-description">{{client.description}}</p>
+    {{/if}}
+
+    <p class="consent-provenance consent-provenance--{{client.mode}}">{{client.provenance}}</p>
+
+    <div class="consent-scopes">
+      <h2 class="consent-scopes-title">It is asking to</h2>
+      <ul class="consent-scope-list">
+        {{#each scopes}}
+          <li class="consent-scope{{#unless described}} consent-scope--undescribed{{/unless}}">
+            {{description}}
+          </li>
+        {{else}}
+          <li class="consent-scope">Sign you in and confirm who you are.</li>
+        {{/each}}
+      </ul>
+    </div>
+
+    <p class="consent-coverage">
+      This applies to your account here, including any organisation or team you belong to
+      now or join later. You can disconnect it at any time.
+    </p>
+
+    {{#if isAuthenticated}}
+      <div class="consent-actions">
+        <form class="consent-form consent-form--approve" method="POST" action="{{action}}">
+          {{#each hiddenFields}}<input type="hidden" name="{{name}}" value="{{value}}" />{{/each}}
+          <input type="hidden" name="action" value="approve" />
+          <button class="consent-approve" type="submit">Approve</button>
+        </form>
+        {{!-- Cancel is a protocol response, not a navigation: it posts back so
+             the waiting client is told, rather than left to time out. --}}
+        <form class="consent-form consent-form--deny" method="POST" action="{{action}}">
+          {{#each hiddenFields}}<input type="hidden" name="{{name}}" value="{{value}}" />{{/each}}
+          <input type="hidden" name="action" value="deny" />
+          <button class="consent-deny" type="submit">Cancel</button>
+        </form>
+      </div>
+    {{/if}}
+
+    {{#if isLogin}}
+      <form class="consent-form consent-form--auth" method="POST" action="{{action}}">
+        {{#each hiddenFields}}<input type="hidden" name="{{name}}" value="{{value}}" />{{/each}}
+        <input type="hidden" name="action" value="login" />
+        <p class="consent-auth-prompt">Sign in to continue.</p>
+        <input class="consent-input" type="email" name="email" placeholder="Email" autofocus value="{{email}}" required />
+        <input class="consent-input" type="password" name="password" placeholder="Password" required />
+        <button class="consent-approve" type="submit">Sign in</button>
+      </form>
+
+      {{#if oauthProviders}}
+        <div class="consent-providers">{{> oauth-providers}}</div>
+      {{/if}}
+
+      <form class="consent-form consent-form--switch" method="POST" action="{{action}}">
+        {{#each hiddenFields}}<input type="hidden" name="{{name}}" value="{{value}}" />{{/each}}
+        <input type="hidden" name="action" value="showSignup" />
+        <button class="consent-switch" type="submit">Don't have an account? Sign up</button>
+      </form>
+    {{/if}}
+
+    {{#if isSignup}}
+      <form class="consent-form consent-form--auth" method="POST" action="{{action}}">
+        {{#each hiddenFields}}<input type="hidden" name="{{name}}" value="{{value}}" />{{/each}}
+        <input type="hidden" name="action" value="signup" />
+        <p class="consent-auth-prompt">Create an account to continue.</p>
+        <input class="consent-input" type="email" name="email" placeholder="Email" autofocus value="{{email}}" required />
+        <input class="consent-input" type="password" name="password" placeholder="Password" required />
+        <input class="consent-input" type="password" name="passwordConfirmation" placeholder="Confirm password" required />
+        <button class="consent-approve" type="submit">Create account</button>
+      </form>
+
+      <form class="consent-form consent-form--switch" method="POST" action="{{action}}">
+        {{#each hiddenFields}}<input type="hidden" name="{{name}}" value="{{value}}" />{{/each}}
+        <input type="hidden" name="action" value="showLogin" />
+        <button class="consent-switch" type="submit">Already have an account? Sign in</button>
+      </form>
+    {{/if}}
+
+    {{#if client.policyUri}}
+      <p class="consent-links">
+        <a href="{{client.policyUri}}" rel="noopener noreferrer nofollow" target="_blank">Privacy policy</a>
+        {{#if client.tosUri}} · <a href="{{client.tosUri}}" rel="noopener noreferrer nofollow" target="_blank">Terms</a>{{/if}}
+      </p>
+    {{/if}}
+
+  </section>
+</div>

package/scaffold/views/oauth-disconnect-confirm.hbs

@@ -0,0 +1,57 @@
+{{!--
+  @boopkit/cap-oauth-server — the disconnect confirmation page.
+
+  A dedicated page rather than an inline button on the list row, and rather than
+  a native confirm(). Disconnecting is not undoable, and the consequence is not
+  visible from a row in a list: whatever that application was doing stops
+  mid-way, and getting it back means walking the whole authorization flow again.
+  The page's job is to name the client and that consequence before the commit.
+
+  Nothing here is destructive until the form is submitted. Reaching this page
+  changes nothing.
+--}}
+<div class="consent-page">
+  <section class="consent-card">
+
+    <header class="consent-header">
+      <div class="consent-icon">
+        {{#if connection.logoUri}}
+          <img class="consent-icon-image" src="{{connection.logoUri}}" alt="" referrerpolicy="no-referrer" />
+        {{else}}
+          <span class="consent-icon-monogram">{{connection.monogram}}</span>
+        {{/if}}
+      </div>
+      <h1 class="consent-title">Disconnect {{connection.name}}?</h1>
+      <p class="consent-subtitle">It will lose access to your account immediately.</p>
+    </header>
+
+    <p class="disconnect-consequence">
+      {{connection.name}} stops being able to act on your behalf on its very next request,
+      including anything it is part-way through. To use it again you will have to connect
+      it and approve it a second time.
+    </p>
+
+    <div class="consent-scopes">
+      <h2 class="consent-scopes-title">What it can do today</h2>
+      <ul class="consent-scope-list">
+        {{#each connection.scopes}}
+          <li class="consent-scope{{#unless described}} consent-scope--undescribed{{/unless}}">
+            {{description}}
+          </li>
+        {{else}}
+          <li class="consent-scope">Sign you in and confirm who you are.</li>
+        {{/each}}
+      </ul>
+    </div>
+
+    <p class="consent-coverage">{{coverage}}</p>
+
+    <div class="consent-actions">
+      <form class="consent-form" method="POST" action="{{action}}">
+        <button class="disconnect-confirm" type="submit">Disconnect</button>
+      </form>
+      <a class="consent-deny disconnect-cancel" href="{{cancelPath}}">Keep it connected</a>
+    </div>
+
+  </section>
+</div>