Merge pull request #18 from ThePythonLedger/feature-optional-github-login

Added optional GitHub login

Author: razorblade23

src/components/GitHubAuthModal/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
-import GitHubAuthModal from '../GitHubAuthModal';
+import LoginModal from '../LoginModal';
 import { useTracker } from '../../context/TrackerContext';
 
 const GitHubMark = () => (
@@ -16,40 +16,61 @@ const GitHubMark = () => (
   </svg>
 );
 
+// Generic person glyph for local-mode sessions, which have no avatar of
+// their own.
+const PersonIcon = () => (
+  <svg
+    viewBox="0 0 16 16"
+    width="16"
+    height="16"
+    className={styles.icon}
+    aria-hidden="true"
+  >
+    <path
+      fill="currentColor"
+      d="M8 8a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0 1.5c-3.03 0-6 1.5-6 3.75V15h12v-1.75c0-2.25-2.97-3.75-6-3.75Z"
+    />
+  </svg>
+);
+
 export default function GitHubConnectButton() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { progress } = useTracker();
+  const session = progress?.session;
 
-  // Determine if the user is already "logged in" by checking for a token
-  const isConnected = !!progress?.token;
-
-  if (isConnected) {
+  if (session?.authMode === 'github') {
     // Once connected, this doubles as the entry point to /profile —
     // it's the only nav element that links there.
     return (
       <Link to="/profile" className={`${styles.connectBtn} ${styles.connected}`}>
-        {progress.user?.avatar_url ? (
-          <img src={progress.user.avatar_url} alt="" className={styles.avatar} />
+        {session.avatarUrl ? (
+          <img src={session.avatarUrl} alt="" className={styles.avatar} />
         ) : (
           <GitHubMark />
         )}
-        <span>{progress.user?.login ?? 'GitHub Connected'}</span>
+        <span>{session.username}</span>
+      </Link>
+    );
+  }
+
+  if (session?.authMode === 'local') {
+    return (
+      <Link to="/profile" className={`${styles.connectBtn} ${styles.connected} ${styles.localConnected}`}>
+        <PersonIcon />
+        <span>{session.username}</span>
       </Link>
     );
   }
 
   return (
     <>
       <button className={styles.connectBtn} onClick={() => setIsModalOpen(true)}>
-        <GitHubMark />
-        <span>Connect GitHub</span>
+        <PersonIcon />
+        <span>Log In</span>
       </button>
 
       {/* The modal is rendered at the root level here, waiting to pop up */}
-      <GitHubAuthModal
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-      />
+      <LoginModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
     </>
   );
 }

src/components/GitHubConnectButton/index.js

@@ -23,7 +23,7 @@
   background-color: #131518;
 }
 
-/* Styled state when token exists in LocalStorage */
+/* Styled state when a GitHub session exists */
 .connectBtn.connected {
   background-color: #2da44e;
   border-color: rgba(27, 31, 36, 0.15);
@@ -33,6 +33,16 @@
   background-color: #2c974b;
 }
 
+/* Local-mode sessions aren't GitHub-branded, so they get a neutral
+   accent color instead of GitHub green. */
+.connectBtn.localConnected {
+  background-color: var(--ifm-color-primary, #0969da);
+}
+
+.connectBtn.localConnected:hover {
+  background-color: var(--ifm-color-primary-dark, #085ec4);
+}
+
 .icon {
   flex-shrink: 0;
 }

src/components/GitHubConnectButton/styles.module.css

@@ -0,0 +1,106 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './styles.module.css';
+
+const CLASSIC_TOKEN_URL =
+  'https://github.com/settings/tokens/new?scopes=gist&description=The%20Python%20Ledger%20Sync';
+
+/**
+ * Renders the "paste a GitHub PAT" flow: instructions, a token input,
+ * and a status area. Doesn't know or care whether it's logging in fresh
+ * or upgrading an existing local account — the caller supplies
+ * `onSubmit(pat)`, which should verify the token and return the GitHub
+ * user object (or throw).
+ */
+export default function GitHubPatForm({ onSubmit, onSuccess, submitLabel = 'Validate and Connect' }) {
+  const [token, setToken] = useState('');
+  const [status, setStatus] = useState({ state: 'idle', message: '' });
+  const isMountedRef = useRef(true);
+
+  useEffect(
+    () => () => {
+      isMountedRef.current = false;
+    },
+    []
+  );
+
+  const handleSubmit = async () => {
+    const trimmed = token.trim();
+    if (!trimmed) {
+      setStatus({ state: 'error', message: 'Paste a token first.' });
+      return;
+    }
+    setStatus({ state: 'validating', message: 'Validating token with GitHub...' });
+    try {
+      const user = await onSubmit(trimmed);
+      // The caller (e.g. the profile page's upgrade section) may stop
+      // rendering this form the instant the session flips to
+      // 'github' — in that case there's nothing left to update.
+      if (!isMountedRef.current) return;
+      setStatus({ state: 'success', message: `Token verified. Connected as ${user.login}!` });
+      onSuccess?.(user);
+    } catch (error) {
+      if (!isMountedRef.current) return;
+      setStatus({ state: 'error', message: error.message || 'Invalid token. Please check and try again.' });
+    }
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <section className={styles.securityNotice}>
+        <h3>🔐 Security & Privacy Notice</h3>
+        <p>
+          This site uses <strong>client-side tracking</strong>. Your Personal Access Token (PAT) is stored{' '}
+          <em>only</em> in your browser's local storage and is sent directly to the GitHub API. It is{' '}
+          <strong>never</strong> transmitted to our servers.
+        </p>
+      </section>
+
+      <section className={styles.instructions}>
+        <h3>How to Generate Your Token</h3>
+        <ol>
+          <li>
+            Go to{' '}
+            <a href={CLASSIC_TOKEN_URL} target="_blank" rel="noopener noreferrer">
+              GitHub's classic token page
+            </a>{' '}
+            (pre-filled with the <code>gist</code> scope).
+          </li>
+          <li>
+            Click <strong>&quot;Generate token&quot;</strong>.
+          </li>
+          <li>Copy the generated token and paste it below.</li>
+        </ol>
+        <p className={styles.scopeNote}>
+          Cloud sync backs your progress up to a private Gist, which needs a <strong>classic</strong> token
+          with the <code>gist</code> scope — fine-grained tokens don't support Gists yet. Any token works
+          for just verifying your identity, but only a classic <code>gist</code>-scoped token can back up
+          your progress.
+        </p>
+      </section>
+
+      <section className={styles.tokenInputArea}>
+        <label htmlFor="patInput">Paste your PAT (ghp_... or github_pat_...) here:</label>
+        <input
+          type="password"
+          id="patInput"
+          value={token}
+          onChange={(e) => setToken(e.target.value)}
+          placeholder="ghp_aBC123..."
+        />
+      </section>
+
+      {status.message && (
+        <div className={`${styles.statusMessage} ${styles[status.state]}`}>{status.message}</div>
+      )}
+
+      <button
+        type="button"
+        className={styles.primaryButton}
+        onClick={handleSubmit}
+        disabled={status.state === 'validating'}
+      >
+        {status.state === 'validating' ? 'Verifying...' : submitLabel}
+      </button>
+    </div>
+  );
+}