refactor: temporarily disable oauth login method (#952)

* refactor: temporarily disable oauth login until we re-implement

* refactor: temporarily disable oauth login until we re-implement

* add fixme and reference to open gh issues

* dynamically insert AUTH_SCOPE count

Author: setchy

src/routes/Login.tsx

@@ -1,14 +1,14 @@
 const { ipcRenderer } = require('electron');
 
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { AppContext } from '../context/App';
 import { Logo } from '../components/Logo';
 
 export const LoginRoute: React.FC = () => {
   const navigate = useNavigate();
-  const { isLoggedIn, login } = useContext(AppContext);
+  const { isLoggedIn } = useContext(AppContext);
 
   useEffect(() => {
     if (isLoggedIn) {
@@ -17,16 +17,17 @@ export const LoginRoute: React.FC = () => {
     }
   }, [isLoggedIn]);
 
-  const loginUser = useCallback(async () => {
+  // FIXME: Temporarily disable Login with GitHub (OAuth) as it's currently broken and requires a rewrite - see #485 #561 #747
+  /* const loginUser = useCallback(async () => {
     try {
       await login();
     } catch (err) {
       // Skip
     }
-  }, []);
+  }, []); */
 
   const loginButtonClass =
-    'w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none';
+    'w-50 px-2 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none';
 
   return (
     <div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark dark:text-white">
@@ -36,13 +37,26 @@ export const LoginRoute: React.FC = () => {
         GitHub Notifications <br /> on your menu bar.
       </div>
 
+      {
+        // FIXME: Temporarily disable Login with GitHub (OAuth) as it's currently broken and requires a rewrite - see #485 #561 #747
+        /*      
       <button
         className={loginButtonClass}
         title="Login with GitHub"
         aria-label="Login with GitHub"
         onClick={loginUser}
       >
         Login to GitHub
+      </button> */
+      }
+
+      <button
+        className={loginButtonClass}
+        title="Login with Personal Token"
+        aria-label="Login with Personal Token"
+        onClick={() => navigate('/login-token')}
+      >
+        Login with Personal Access Token
       </button>
 
       <button
@@ -53,15 +67,6 @@ export const LoginRoute: React.FC = () => {
       >
         Login to GitHub Enterprise
       </button>
-
-      <button
-        className="bg-none hover:text-gray-800 dark:text-gray-100 dark:hover:text-gray-300 mt-4 focus:outline-none"
-        title="Login with Personal Token"
-        aria-label="Login with Personal Token"
-        onClick={() => navigate('/login-token')}
-      >
-        <small>or login with a personal token</small>
-      </button>
     </div>
   );
 };

src/routes/LoginWithToken.tsx

@@ -71,11 +71,11 @@ export const LoginWithToken: React.FC = () => {
               >
                 personal access tokens
               </a>{' '}
-              and create one with the{' '}
+              and create one with the {Constants.AUTH_SCOPE.length} scopes{' '}
               <span className="underline font-extrabold text-yellow-500">
                 {Constants.AUTH_SCOPE.join(', ')}{' '}
               </span>
-              scopes.
+              .
             </>
           }
         />
@@ -130,7 +130,9 @@ export const LoginWithToken: React.FC = () => {
           />
         </button>
 
-        <h3 className="text-lg font-semibold">Login with an access token</h3>
+        <h3 className="text-lg font-semibold">
+          Login with personal access token
+        </h3>
       </div>
 
       <div className="flex-1 px-8">

src/routes/__snapshots__/Login.test.tsx.snap

@@ -56,30 +56,20 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
      on your menu bar.
   </div>
   <button
-    aria-label="Login with GitHub"
-    className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
+    aria-label="Login with Personal Token"
+    className="w-50 px-2 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
     onClick={[Function]}
-    title="Login with GitHub"
+    title="Login with Personal Token"
   >
-    Login to GitHub
+    Login with Personal Access Token
   </button>
   <button
     aria-label="Login with GitHub Enterprise"
-    className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
+    className="w-50 px-2 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
     onClick={[Function]}
     title="Login with GitHub Enterprise"
   >
     Login to GitHub Enterprise
   </button>
-  <button
-    aria-label="Login with Personal Token"
-    className="bg-none hover:text-gray-800 dark:text-gray-100 dark:hover:text-gray-300 mt-4 focus:outline-none"
-    onClick={[Function]}
-    title="Login with Personal Token"
-  >
-    <small>
-      or login with a personal token
-    </small>
-  </button>
 </div>
 `;

src/routes/__snapshots__/LoginWithToken.test.tsx.snap

@@ -38,7 +38,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
     <h3
       className="text-lg font-semibold"
     >
-      Login with an access token
+      Login with personal access token
     </h3>
   </div>
   <div
@@ -80,15 +80,17 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
             personal access tokens
           </a>
            
-          and create one with the
+          and create one with the 
+          3
+           scopes
            
           <span
             className="underline font-extrabold text-yellow-500"
           >
             read:user, notifications, repo
              
           </span>
-          scopes.
+          .
         </div>
       </div>
       <div