CalvinBackup/anonymous_github
1
0
Fork 0
mirror of https://github.com/tdurieux/anonymous_github.git synced 2026-09-12 13:48:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: clarify GitHub connections and account navigation

Browse Source
This commit is contained in:
tdurieux
2026-09-10 16:04:44 +02:00
parent 2ffd051bbe
commit bcc7abc975
9 changed files with 153 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/asset-manifest.json
+2 -2
View File
@@ -1,8 +1,8 @@
{
"core.min.js": "core.c5bd53363a.min.js",
"vendor.min.js": "vendor.cbc8c2964d.min.js",
"vendor.min.js": "vendor.9b912f1d9e.min.js",
"mermaid.min.js": "mermaid.f848a72d16.min.js",
"all.min.css": "all.7ac8730b9a.min.css",
"all.min.css": "all.f8e40e3668.min.css",
"markdown.min.js": "markdown.ad7b1d71c3.min.js",
"pdf.min.js": "pdf.eaa7573247.min.js",
"notebook.min.js": "notebook.8844e2735f.min.js",
public/css/all.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
public/css/style.css
+69
View File
@@ -7030,3 +7030,72 @@ body {
.overview-page .ov-kpi-row { grid-template-columns: 1fr 1fr; }
.overview-page .ov-services-grid { grid-template-columns: 1fr 1fr; }
}
/* Keep account access secondary to creating an anonymization. */
.dashboard-heading-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-bottom: 12px; }
.dashboard-heading-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.dashboard-connections-link { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; color: var(--ink-muted); font-size: 12px; line-height: 1.5; }
.dashboard-connections-link:hover { color: var(--accent); text-decoration: none; }
.dashboard-connections-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 767px) {
.dashboard-heading-actions { align-items: flex-start; padding-bottom: 0; gap: 4px; }
.dashboard-connections-link { min-height: 44px; }
}
.paper-settings-connection-link { display: flex; align-items: center; gap: 12px; padding: 18px 0; color: var(--color); font-size: 14px; }
.paper-settings-connection-link > i { color: var(--ink-muted); font-size: 18px; }
.paper-settings-connection-link > span:first-of-type { flex: 1; }
.paper-settings-connection-link small { display: block; margin-top: 4px; color: var(--ink-muted); font-size: 12px; }
.paper-settings-connection-link:hover { color: var(--accent); text-decoration: none; }
.paper-settings-connection-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* GitHub connections use the same open sections as account settings. */
.connections-heading { margin-bottom: 36px; }
.connections-heading .paper-page-title { font-size: clamp(38px, 4.5vw, 56px); margin-bottom: 12px; }
.connections-heading .paper-page-lede { font-size: 15px; }
.connections-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; border-top: 1px solid var(--border-color); padding-top: 28px; }
.connections-grid > section { min-width: 0; }
.connection-top, .connection-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.connection-top { margin-bottom: 24px; min-height: 28px; }
.connection-top > i { color: var(--ink-muted); font-size: 24px; }
.connection-top > .fa-key { font-size: 18px; }
.connection-title { margin-bottom: 10px; }
.connections-page h2 { font-family: inherit; font-size: 21px; font-weight: 600; letter-spacing: -.5px; margin: 0; }
.connections-page p { font-size: 14px; line-height: 1.65; color: var(--ink-muted); }
.connection-badge { background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; border-radius: 5px; padding: 4px 8px; white-space: nowrap; }
.connection-badge-muted { background: var(--paper-bg-alt); color: var(--ink-muted); }
.connection-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-muted); }
.connection-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.connection-status.is-connected { color: var(--status-ready); }
.connection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 22px 0 16px; }
.connections-page .btn { font-size: 13px; padding: 9px 13px; white-space: normal; }
.connections-page .connection-help, .connection-revoke p { font-size: 12px; }
.connection-link { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; background: transparent; color: var(--accent); font-size: 13px; line-height: 1.6; font-weight: 500; text-align: left; cursor: pointer; }
.connection-link:hover { color: var(--link-hover-color); text-decoration: underline; }
.connection-link:disabled { color: var(--ink-muted); opacity: .65; cursor: not-allowed; text-decoration: none; }
.connection-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.connection-installations { list-style: none; padding: 0; margin: 18px 0; border-top: 1px solid var(--border-soft); }
.connection-installations li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0; font-size: 12px; border-bottom: 1px solid var(--border-soft); }
.connection-revoke { border-top: 1px solid var(--border-soft); padding-top: 18px; margin-top: 24px; }
.connection-danger { color: var(--status-error); }
.connection-resources { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border-color); }
.connection-count { color: var(--ink-muted); font-size: 12px; }
.connection-empty { display: flex; align-items: center; gap: 18px; padding: 20px 0; margin: 22px 0; }
.connection-empty > i { font-size: 22px; color: var(--ink-muted); }
.connection-empty h3 { font-size: 14px; font-weight: 600; margin: 0 0 5px; }
.connection-empty p { font-size: 12px; margin: 0; }
.connection-empty > a { margin-left: auto; flex-shrink: 0; }
.connection-resource { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--border-color); }
.connection-resource-name { flex: 1; min-width: 180px; overflow-wrap: anywhere; font-size: 14px; }
.connection-resource-name small { display: block; color: var(--ink-muted); font-size: 11px; margin-top: 5px; }
.connection-resource-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.connection-resource-actions .connection-help { flex-basis: 100%; }
.connections-page .connection-footnote { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; font-size: 12px; }
@media (max-width: 767px) {
.connections-grid { grid-template-columns: 1fr; gap: 28px; }
.connections-grid > section + section { border-top: 1px solid var(--border-color); padding-top: 28px; }
.connection-empty { flex-wrap: wrap; }
.connection-empty > div { flex: 1; min-width: 180px; }
.connection-empty > a { margin-left: 40px; }
.connection-resource-actions { flex-basis: 100%; }
}
public/partials/connections.htm
+51 -38
View File
@@ -1,44 +1,57 @@
<div class="container page paper-page">
<div class="paper-crumbs"><a href="/dashboard">My work</a> / GitHub connections</div>
<h1 class="paper-page-title">GitHub <em>connections</em></h1>
<p>Connect the GitHub account you use here. Your anonymizations and URLs stay the same.</p>
<p class="alert alert-danger" role="alert" v-if="connectionError">{{ connectionError }}</p>
<div class="container paper-page connections-page">
<div class="paper-crumbs"><a href="/dashboard">My work</a> / <span class="here">GitHub connections</span></div>
<header class="connections-heading">
<h1 class="paper-page-title">GitHub <em>connections</em></h1>
<p class="paper-page-lede">Manage how GitHub shares your code. Your anonymizations and URLs stay the same.</p>
</header>
<p class="paper-inline-alert paper-inline-alert-error" role="alert" v-if="connectionError">{{ connectionError }}</p>
<p role="status" v-if="!connections &amp;&amp; !connectionError">Loading your connections…</p>
<button class="btn btn-outline-ink" v-if="!connections &amp;&amp; connectionError" :disabled="busy" @click="loadConnections()">Try again</button>
<div v-if="connections">
<section class="paper-settings-section" v-if="connections.appEnabled">
<h2>Read-only GitHub App</h2>
<p v-if="connections.appError" role="alert">{{ connections.appError }}. Reconnect to restore access.</p>
<a class="btn btn-ink" target="_self" href="/github/app/login">{{ connections.appConnected ? 'Reconnect GitHub account' : 'Connect GitHub account' }}</a>
<a class="btn" v-if="connections.appConnected" target="_self" href="/github/app/install">Allow repositories on GitHub</a>
<p class="mt-2">GitHub opens directly to the access screen. Select repositories and confirm. Organization access may require an administrator's approval.</p>
<ul>
<li v-for="installation in connections.installations" :key="installation.id">
{{ installation.account }} {{ installation.suspended ? '(suspended)' : '' }} —
<a target="_self" :href="'/github/app/install?installationId=' + installation.id">Add or remove repository access</a>
</li>
</ul>
<button class="btn" :disabled="busy" @click="loadConnections()">Refresh access after approval</button>
</section>
<section class="paper-settings-section">
<h2>Legacy OAuth</h2>
<p>{{ connections.oauthConnected ? 'Connected' : 'Not connected' }}. Existing OAuth anonymizations continue to use this connection.</p>
<a v-if="connections.oauthEnabled" target="_self" href="/github/login" class="btn">Connect legacy OAuth</a>
<p v-if="connections.gistCount">{{ connections.gistCount }} gist(s) still require OAuth.</p>
<button v-if="connections.oauthConnected &amp;&amp; connections.appConnected" class="btn" :disabled="busy || connections.gistCount || connections.resources.some(r => r.connection === 'oauth')" @click="disconnectOAuth()">Revoke OAuth access</button>
<p>Migrate all dependent resources before revoking OAuth. Revocation removes GitHub's broad OAuth repository grant.</p>
</section>
<section class="paper-settings-section">
<h2>Repository connections</h2>
<p>Check read-only access, then switch each resource. Connecting the App alone does not change existing resources.</p>
<p>Removing GitHub access stops fetching new source content. Already published anonymized content follows its existing expiration and removal settings.</p>
<div v-for="resource in connections.resources" :key="resource.type + resource.id" class="mb-3">
<strong>{{ resource.id }}</strong> — {{ resource.name }} ({{ resource.type }})<br>
Connection: {{ resource.connection === 'github-app' ? 'GitHub App (read-only)' : 'Legacy OAuth' }}
<div v-if="resource.connection === 'oauth' &amp;&amp; connections.appEnabled &amp;&amp; connections.appConnected">
<button class="btn" :disabled="busy" @click="changeConnection(resource, 'github-app', true)">Check read-only access</button>
<button v-if="resource.eligible" class="btn btn-ink" :disabled="busy" @click="changeConnection(resource, 'github-app', false)">Switch to read-only access</button>
<div class="connections-grid">
<section v-if="connections.appEnabled">
<div class="connection-top"><i class="fab fa-github" aria-hidden="true"></i><span class="connection-badge">Recommended</span></div>
<div class="connection-title"><h2>GitHub App</h2><span class="connection-status" :class="{'is-connected': connections.appConnected &amp;&amp; !connections.appError}">{{ connections.appError ? 'Needs attention' : connections.appConnected ? 'Connected' : 'Not connected' }}</span></div>
<p>Read-only access to the repositories you choose.</p>
<p class="paper-inline-alert paper-inline-alert-error" v-if="connections.appError" role="alert">{{ connections.appError }}. Reconnect to restore access.</p>
<div class="connection-actions">
<a class="btn btn-ink" v-if="connections.appConnected &amp;&amp; !connections.appError" target="_self" href="/github/app/install">Manage repository access <i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
<a :class="connections.appConnected &amp;&amp; !connections.appError ? 'connection-link' : 'btn btn-ink'" target="_self" href="/github/app/login">{{ connections.appConnected ? 'Reconnect account' : 'Connect GitHub account' }}</a>
</div>
<button v-if="resource.connection === 'github-app' &amp;&amp; connections.oauthConnected" class="btn" :disabled="busy" @click="changeConnection(resource, 'oauth', false)">Switch to existing OAuth access</button>
<p class="connection-help">Choose repositories on GitHub. Organization access may need an administrator's approval.</p>
<ul class="connection-installations" v-if="connections.installations?.length">
<li v-for="installation in connections.installations" :key="installation.id"><div><strong>{{ installation.account }}</strong><span v-if="installation.suspended"> · Suspended</span></div><a target="_self" :href="'/github/app/install?installationId=' + installation.id">Manage access <span class="sr-only">for {{ installation.account }}</span> &rarr;</a></li>
</ul>
<button class="connection-link" :disabled="busy" @click="loadConnections()"><i class="fas fa-sync-alt" aria-hidden="true"></i> Refresh access</button>
</section>
<section>
<div class="connection-top"><i class="fas fa-key" aria-hidden="true"></i><span class="connection-badge connection-badge-muted">Legacy</span></div>
<div class="connection-title"><h2>GitHub OAuth</h2><span class="connection-status" :class="{'is-connected': connections.oauthConnected}">{{ connections.oauthConnected ? 'Connected' : 'Not connected' }}</span></div>
<p>For existing OAuth anonymizations and gists.</p>
<p class="connection-help">This connection uses GitHub's broader repository permissions. Existing work keeps using it until you switch below.</p>
<a v-if="connections.oauthEnabled" target="_self" href="/github/login" class="btn btn-outline-ink">{{ connections.oauthConnected ? 'Reconnect OAuth' : 'Connect legacy OAuth' }}</a>
<div class="connection-revoke" v-if="connections.oauthConnected">
<p v-if="connections.gistCount">{{ connections.gistCount }} gist(s) still require OAuth.</p>
<p>Switch all dependent repositories before revoking access. Gists still require OAuth.</p>
<button v-if="connections.appConnected" class="connection-link connection-danger" :disabled="busy || connections.gistCount || connections.resources.some(r => r.connection === 'oauth')" @click="disconnectOAuth()">Revoke OAuth access</button>
</div>
</section>
</div>
<section class="connection-resources">
<div class="connection-title"><h2>Repository connections</h2><span class="connection-count">{{ connections.resources?.length || 0 }} resources</span></div>
<p>Check access, then switch each resource to the GitHub App.</p>
<div class="connection-empty" v-if="!connections.resources?.length"><i class="fas fa-code-branch" aria-hidden="true"></i><div><h3>No repository connections yet</h3><p>Your repositories and pull requests will appear here once you anonymize them.</p></div><a class="connection-link" href="/anonymize">New anonymization &rarr;</a></div>
<div class="connection-resource" v-for="resource in connections.resources" :key="resource.type + resource.id">
<div class="connection-resource-name"><strong>{{ resource.name || resource.id }}</strong><small>{{ resource.type }} · {{ resource.id }}</small></div>
<span class="connection-badge" :class="{'connection-badge-muted': resource.connection === 'oauth'}">{{ resource.connection === 'github-app' ? 'Read-only App' : 'Legacy OAuth' }}</span>
<div class="connection-resource-actions" v-if="resource.connection === 'oauth' &amp;&amp; connections.appEnabled &amp;&amp; connections.appConnected">
<button class="btn btn-outline-ink" :disabled="busy" @click="changeConnection(resource, 'github-app', true)">Check read-only access</button>
<button v-if="resource.eligible" class="btn btn-ink" :disabled="busy" @click="changeConnection(resource, 'github-app', false)">Switch to read-only access</button>
<span class="connection-help" role="status" v-if="resource.eligible === false">Access unavailable. Allow this repository on GitHub, then check again.</span>
</div>
<button v-if="resource.connection === 'github-app' &amp;&amp; connections.oauthConnected" class="connection-link" :disabled="busy" @click="changeConnection(resource, 'oauth', false)">Use OAuth</button>
</div>
<p class="connection-footnote"><i class="fas fa-info-circle" aria-hidden="true"></i> Removing access stops new fetches from GitHub. Published content keeps its current expiration and removal settings.</p>
</section>
</div>
</div>
public/partials/dashboard.htm
+8 -5
View File
@@ -7,13 +7,16 @@
<h1 class="paper-page-title">Your <em>anonymizations</em></h1>
<p class="paper-page-lede">Every repository, pull request, and gist you&rsquo;ve mirrored, with live status and stats.</p>
</div>
<a href="/anonymize" class="btn btn-ink">
<i class="fa fa-plus-circle mr-1" aria-hidden="true"></i> New anonymization
</a>
<div class="dashboard-heading-actions">
<a href="/anonymize" class="btn btn-ink">
<i class="fa fa-plus-circle" aria-hidden="true"></i> New anonymization
</a>
<a href="/connections" class="dashboard-connections-link">
<i class="fab fa-github" aria-hidden="true"></i> GitHub connections <span aria-hidden="true">&rarr;</span>
</a>
</div>
</div>
<p class="mt-3"><a href="/connections">Manage GitHub connections and read-only access</a></p>
<!-- Quota -->
<div class="quota-row" v-if="quota">
<div class="quota-item" v-for="(q, index) in [
public/partials/header.htm
+4 -1
View File
@@ -75,11 +75,14 @@
</a>
<div class="dropdown-menu dropdown-menu-right user-menu" aria-labelledby="navbarDropdownMenuLink">
<h6 class="dropdown-header">Signed in as @{{ user?.username }}</h6>
<a class="dropdown-item" href="/connections">GitHub connections</a>
<a class="dropdown-item" href="/profile">
<i class="fas fa-sliders-h" aria-hidden="true"></i>
<span>Settings<small>Defaults, quotas, account</small></span>
</a>
<a class="dropdown-item" href="/connections">
<i class="fab fa-github" aria-hidden="true"></i>
<span>GitHub connections<small>Repository access and OAuth</small></span>
</a>
<a class="dropdown-item" href="/claim">
<i class="fas fa-link" aria-hidden="true"></i>
<span>Claim an anonymization<small>Attach an existing mirror to your account</small></span>
public/partials/profile.htm
+6
View File
@@ -165,6 +165,12 @@ jane.smith@example.org" v-field="{ state: viewState, set: value =&gt; { terms =
<a class="btn btn-outline-ink" href="/api/user/logout" target="_self">Sign out</a>
</div>
<a class="paper-settings-connection-link" href="/connections">
<i class="fab fa-github" aria-hidden="true"></i>
<span>GitHub connections<small>Manage repository access and legacy OAuth.</small></span>
<span aria-hidden="true">&rarr;</span>
</a>
<div class="paper-danger-zone">
<div class="paper-danger-head">Delete account</div>
<p class="paper-danger-copy">
public/script/vendor.min.js
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long