feat: unify GitHub sign-in and connect OAuth for gists

public/asset-manifest.json

@@ -1,6 +1,6 @@
 {
   "core.min.js": "core.c5bd53363a.min.js",
-  "vendor.min.js": "vendor.cc9fc42458.min.js",
+  "vendor.min.js": "vendor.3188bc70a6.min.js",
   "mermaid.min.js": "mermaid.f848a72d16.min.js",
   "all.min.css": "all.87fb103470.min.css",
   "markdown.min.js": "markdown.ad7b1d71c3.min.js",

public/i18n/locale-en.json

@@ -130,7 +130,7 @@
     "invalid_webhook_signature": "The webhook signature is invalid.",
     "webhook_processing_failed": "Webhook processing failed. Retry the delivery.",
     "github_app_authorization_cancelled": "GitHub authorization was cancelled.",
-    "github_account_link_required": "This username belongs to an existing account. Sign in with legacy GitHub OAuth to keep access to your existing anonymizations, then connect the read-only GitHub App from GitHub connections.",
+    "github_account_link_required": "Verify your existing account with your previous GitHub connection. Future sign-ins will use the GitHub App.",
     "github_app_refresh_busy": "GitHub credentials are being renewed. Please retry shortly.",
     "github_grant_revocation_failed": "Unable to revoke the GitHub grant. Please retry.",
     "another_login_required": "Connect and verify another sign-in method before disconnecting OAuth.",

public/partials/anonymize.htm

@@ -24,6 +24,12 @@
       <small class="form-text" style="color: var(--ink-muted);">
         Repository, pull request (…/pull/42) and gist (gist.github.com/…) URLs are all accepted.
       </small>
+      <aside class="alert alert-info" role="status" v-if="detectedType === 'gist' &amp;&amp; gistOAuthRequired">
+        <p>Connect GitHub OAuth to access gists. Your account and existing anonymizations stay the same, and your draft will be restored when you return.</p>
+        <p>GitHub's legacy OAuth connection includes write access to private repositories.</p>
+        <button type="button" class="btn btn-ink" @click="connectGistOAuth()" v-if="githubConnections?.oauthEnabled">Connect GitHub OAuth to access gists</button>
+        <p v-else>GitHub OAuth is currently unavailable. Please try again later.</p>
+      </aside>
       <aside class="repo-access-details" aria-label="GitHub access" v-if="!sourceUrl &amp;&amp; githubConnections?.appEnabled &amp;&amp; githubConnections.appConnected &amp;&amp; githubConnections.oauthConnected">
         <div class="repo-access-main">
           <div class="repo-access-controls">

public/partials/signin.htm

@@ -7,8 +7,13 @@
       <p class="paper-page-lede">Sign in to create and manage your anonymizations.</p>
     </header>
     <div class="auth-options">
-      <p class="auth-existing" role="note" v-if="site_options?.GITHUB_APP_ENABLED &amp;&amp; site_options?.GITHUB_OAUTH_ENABLED">Already have an account? Sign in with <a target="_self" href="/github/login">legacy GitHub OAuth</a> to keep access to your anonymizations. You can connect the read-only App from GitHub connections after signing in.</p>
-      <section v-if="site_options?.GITHUB_APP_ENABLED">
+      <section v-if="accountRecovery">
+        <h2>Verify your existing account</h2>
+        <p>We found an existing account. Verify it with your previous GitHub connection to keep your anonymizations. Future sign-ins will use the GitHub App.</p>
+        <a class="btn btn-ink auth-continue" target="_self" href="/github/login?recover=1" v-if="site_options?.GITHUB_OAUTH_ENABLED">Verify with previous GitHub connection</a>
+        <p v-else>Account verification is currently unavailable. Please try again later.</p>
+      </section>
+      <section v-if="site_options?.GITHUB_APP_ENABLED &amp;&amp; !accountRecovery">
         <div class="connection-top"><i class="fab fa-github" aria-hidden="true"></i><span class="connection-badge">Read-only access</span></div>
         <h2>Continue with GitHub</h2>
         <p>Connect through the GitHub App with read-only repository access.</p>
@@ -17,12 +22,12 @@
           <li><i class="fas fa-check" aria-hidden="true"></i> No permission to write to your code</li>
         </ul>
         <a class="btn btn-ink auth-continue" target="_self" href="/github/app/login">Sign in with GitHub <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
-        <small>Select your repositories after signing in.</small>
+        <small>Your existing anonymizations and connections stay with your account.</small>
       </section>
-      <section class="auth-legacy" v-if="site_options?.GITHUB_OAUTH_ENABLED">
-        <div class="connection-title"><h2>Legacy OAuth</h2><span class="connection-badge connection-badge-muted">For gists &amp; existing accounts</span></div>
-        <p>Use this connection for gists or your existing OAuth setup. GitHub's private repository scope includes write access.</p>
-        <a class="connection-link" target="_self" href="/github/login">Continue with OAuth <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
+      <section class="auth-legacy" v-if="!site_options?.GITHUB_APP_ENABLED &amp;&amp; site_options?.GITHUB_OAUTH_ENABLED &amp;&amp; !accountRecovery">
+        <div class="connection-title"><h2>Continue with GitHub</h2></div>
+        <p>Sign in to access your account. GitHub OAuth includes write access to private repositories.</p>
+        <a class="connection-link" target="_self" href="/github/login">Sign in with GitHub <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
       </section>
       <p role="status" v-if="site_options &amp;&amp; !site_options.GITHUB_APP_ENABLED &amp;&amp; !site_options.GITHUB_OAUTH_ENABLED">GitHub sign-in is currently unavailable. Please try again later.</p>
     </div>

public/script/app.js

@@ -284,7 +284,7 @@ export const homeController = function (state, http, location, window, timeout)
       };
       // Signed-out visitors cannot open the dashboard; send them to sign in.
       state.featureHref = function (f) {
-        return f.needsUser && !state.user ? "/github/login" : f.href;
+        return f.needsUser && !state.user ? "/signin" : f.href;
       };
       state.featureTarget = function (f) {
         return f.needsUser && !state.user ? "_self" : f.target || undefined;
@@ -890,10 +890,18 @@ export const anonymizeController = function (state, http, html, params, location
       state.sourceUrl = "";
       state.githubConnection = undefined;
       state.githubConnections = null;
-      state.grantGitHubAccess = () => {
+      state.gistOAuthRequired = false;
+      const saveGitHubDraft = () => {
         const draft = {};
         for (const key of ["sourceUrl", "terms", "repoId", "pullRequestId", "gistId", "source", "options", "conference", "githubConnection"]) draft[key] = state[key];
         sessionStorage.setItem("github-access-draft", JSON.stringify({ path: location.path(), savedAt: Date.now(), draft }));
+      };
+      state.connectGistOAuth = () => {
+        saveGitHubDraft();
+        window.location.href = "/github/login?returnTo=" + encodeURIComponent(location.path());
+      };
+      state.grantGitHubAccess = () => {
+        saveGitHubDraft();
         const returnTo = location.path();
         const repository = parseRepoFullName(state.sourceUrl) || "";
         const route = state.githubConnections?.appConnected ? "/github/app/install" : "/github/app/login";
@@ -1110,7 +1118,7 @@ export const anonymizeController = function (state, http, html, params, location
                 state.options.expirationDate = new Date(res.data.options.expirationDate);
               }
               if (await restoreGitHubDraft()) return;
-              state.details = (await http.get(`/api/gist/source/${res.data.source.gistId}`)).data;
+              await getGistDetails();
 
             },
             () => { location.url("/404"); }
@@ -1142,6 +1150,7 @@ export const anonymizeController = function (state, http, html, params, location
         state.readme = "";
         state.html_readme = "";
         state.detectedType = null;
+        state.gistOAuthRequired = false;
 
         let o;
         try {
@@ -1449,12 +1458,23 @@ export const anonymizeController = function (state, http, html, params, location
         const o = parseGithubUrl(state.sourceUrl);
         try {
           resetValidity();
+          state.gistOAuthRequired = false;
+          if (state.githubConnections?.oauthConnected === false) {
+            state.gistOAuthRequired = true;
+            setValidity("sourceUrl", "missing", false);
+            return;
+          }
           const res = await http.get(`/api/gist/source/${o.gistId}`);
           state.details = res.data;
           if (!state.gistId) {
             state.gistId = "gist-" + o.gistId.substring(0, 6) + "-" + generateRandomId(4);
           }
         } catch (error) {
+          if (error.data?.error === "github_oauth_required") {
+            state.gistOAuthRequired = true;
+            setValidity("sourceUrl", "missing", false);
+            return;
+          }
           if (error.data) {
             translate("ERRORS." + error.data.error).then((translation) => {
               state.addToast({ title: "Error", date: new Date(), body: translation });
@@ -2832,3 +2852,8 @@ export const connectionsController = function (state, http) {
   };
   state.loadConnections();
 };
+
+export const signinController = function (state, http) {
+  state.accountRecovery = false;
+  http.get("/github/account-recovery").then(res => { state.accountRecovery = res.data.required; }).catch(() => {});
+};

public/script/routes.js

@@ -3,7 +3,7 @@ import * as admin from "./admin.js";
 
 export const pageRoutes = [
 {path: "/connections", template: "partials/connections.htm", title: "GitHub connections – Anonymous GitHub", preserveExplorer: false, setup: (state, services) => pages.connectionsController(state, services.http)},
-{path: "/signin", template: "partials/signin.htm", title: "Sign in – Anonymous GitHub", preserveExplorer: false, setup: () => {}},
+{path: "/signin", template: "partials/signin.htm", title: "Sign in – Anonymous GitHub", preserveExplorer: false, setup: (state, services) => pages.signinController(state, services.http)},
 {path: "/", template: "partials/home.htm", title: "Anonymous GitHub – Share the code, not the author", preserveExplorer: false, setup: (state, services) => pages.homeController(state, services.http, services.location, services.window, services.timeout)},
 {path: "/dashboard", template: "partials/dashboard.htm", title: "Your anonymizations – Anonymous GitHub", preserveExplorer: false, setup: (state, services) => pages.unifiedDashboardController(state, services.http, services.location, services.promises, services.window, services.quotaService)},
 {"path":"/pr-dashboard","redirect":"/dashboard"},