refactor(auth): update ux and terminology

src/app.tsx

@@ -11,8 +11,8 @@ import { Loading } from './components/Loading';
 import { Sidebar } from './components/Sidebar';
 import { AppContext, AppProvider } from './context/App';
 import { LoginRoute } from './routes/Login';
-import { LoginEnterpriseRoute } from './routes/LoginEnterprise';
-import { LoginWithToken } from './routes/LoginWithToken';
+import { LoginWithOAuthApp } from './routes/LoginWithOAuthApp';
+import { LoginWithPersonalAccessToken } from './routes/LoginWithPersonalAccessToken';
 import { NotificationsRoute } from './routes/Notifications';
 import { SettingsRoute } from './routes/Settings';
 
@@ -51,12 +51,13 @@ export const App = () => {
                 </RequireAuth>
               }
             />
+
             <Route path="/login" element={<LoginRoute />} />
             <Route
-              path="/login-enterprise"
-              element={<LoginEnterpriseRoute />}
+              path="/login-personal-access-token"
+              element={<LoginWithPersonalAccessToken />}
             />
-            <Route path="/login-token" element={<LoginWithToken />} />
+            <Route path="/login-oauth-app" element={<LoginWithOAuthApp />} />
           </Routes>
         </div>
       </Router>

src/components/fields/Button.tsx

@@ -5,27 +5,36 @@ import { openExternalLink } from '../../utils/comms';
 export interface IButton {
   name: string;
   label: string;
+  class?: string;
   icon?: Icon;
-  url?: string;
   size?: number;
-  class?: string;
+  url?: string;
+  onClick?: () => void;
   disabled?: boolean;
   type?: 'button' | 'submit';
 }
 
 export const Button: FC<IButton> = (props: IButton) => {
   const baseClass =
-    'rounded bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer';
+    'rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1';
   return (
     <button
       type={props.type ?? 'button'}
       title={props.label}
       aria-label={props.label}
       className={`${props.class} ${baseClass}`}
       disabled={props.disabled}
-      onClick={() => props.url && openExternalLink(props.url)}
+      onClick={() => {
+        if (props.url) {
+          return openExternalLink(props.url);
+        }
+
+        if (props.onClick) {
+          return props.onClick();
+        }
+      }}
     >
-      {props.icon && <props.icon className="mr-1" size={props.size && 14} />}
+      {props.icon && <props.icon className="mr-1" size={props.size ?? 14} />}
       {props.name}
     </button>
   );

src/routes/Login.test.tsx

@@ -49,15 +49,30 @@ describe('routes/Login.tsx', () => {
     expect(mockNavigate).toHaveBeenNthCalledWith(1, '/', { replace: true });
   });
 
-  it('should navigate to login with github enterprise', () => {
+  it('should navigate to login with personal access token', () => {
     render(
       <MemoryRouter>
         <LoginRoute />
       </MemoryRouter>,
     );
 
-    fireEvent.click(screen.getByLabelText('Login with GitHub Enterprise'));
+    fireEvent.click(screen.getByLabelText('Login with Personal Access Token'));
 
-    expect(mockNavigate).toHaveBeenNthCalledWith(1, '/login-enterprise');
+    expect(mockNavigate).toHaveBeenNthCalledWith(
+      1,
+      '/login-personal-access-token',
+    );
+  });
+
+  it('should navigate to login with oauth app', () => {
+    render(
+      <MemoryRouter>
+        <LoginRoute />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Login with OAuth App'));
+
+    expect(mockNavigate).toHaveBeenNthCalledWith(1, '/login-oauth-app');
   });
 });

src/routes/Login.tsx

@@ -3,7 +3,9 @@ const { ipcRenderer } = require('electron');
 import { type FC, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { KeyIcon, PersonIcon } from '@primer/octicons-react';
 import { Logo } from '../components/Logo';
+import { Button } from '../components/fields/Button';
 import { AppContext } from '../context/App';
 
 export const LoginRoute: FC = () => {
@@ -26,9 +28,6 @@ export const LoginRoute: FC = () => {
     }
   }, []); */
 
-  const loginButtonClass =
-    '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">
       <Logo className="w-16 h-16" isDark />
@@ -37,38 +36,34 @@ export const LoginRoute: FC = () => {
         GitHub Notifications <br /> on your menu bar.
       </div>
 
+      <div className="font-semibold text-center text-sm italic">Login with</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"
+        /*    
+       <Button
+        name="GitHub"
+        icon={MarkGitHubIcon}
+        label="Login with GitHub"
+        class="w-50 px-2 py-2 my-2 text-xs"
         onClick={loginUser}
-      >
-        Login to GitHub
-      </button> */
+      />  
+      */
       }
 
-      <button
-        type="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
-        type="button"
-        className={loginButtonClass}
-        title="Login with GitHub Enterprise"
-        aria-label="Login with GitHub Enterprise"
-        onClick={() => navigate('/login-enterprise')}
-      >
-        Login to GitHub Enterprise
-      </button>
+      <Button
+        name="Personal Access Token"
+        icon={KeyIcon}
+        label="Login with Personal Access Token"
+        class="py-2 mt-2"
+        onClick={() => navigate('/login-personal-access-token')}
+      />
+      <Button
+        name="OAuth App"
+        icon={PersonIcon}
+        label="Login with OAuth App"
+        class="py-2 mt-2"
+        onClick={() => navigate('/login-oauth-app')}
+      />
     </div>
   );
 };

src/routes/LoginEnterprise.test.tsx → src/routes/LoginWithOAuthApp.test.tsx

@@ -6,15 +6,15 @@ import { shell } from 'electron';
 import { mockedEnterpriseAccounts } from '../__mocks__/mockedData';
 import { AppContext } from '../context/App';
 import type { AuthState } from '../types';
-import { LoginEnterpriseRoute, validate } from './LoginEnterprise';
+import { LoginWithOAuthApp, validate } from './LoginWithOAuthApp';
 
 const mockNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockNavigate,
 }));
 
-describe('routes/LoginEnterprise.tsx', () => {
+describe('routes/LoginWithOAuthApp.tsx', () => {
   const openExternalMock = jest.spyOn(shell, 'openExternal');
 
   const mockAccounts: AuthState = {
@@ -33,7 +33,7 @@ describe('routes/LoginEnterprise.tsx', () => {
     const tree = TestRenderer.create(
       <AppContext.Provider value={{ accounts: mockAccounts }}>
         <MemoryRouter>
-          <LoginEnterpriseRoute />
+          <LoginWithOAuthApp />
         </MemoryRouter>
       </AppContext.Provider>,
     );
@@ -45,7 +45,7 @@ describe('routes/LoginEnterprise.tsx', () => {
     render(
       <AppContext.Provider value={{ accounts: mockAccounts }}>
         <MemoryRouter>
-          <LoginEnterpriseRoute />
+          <LoginWithOAuthApp />
         </MemoryRouter>
       </AppContext.Provider>,
     );
@@ -84,7 +84,7 @@ describe('routes/LoginEnterprise.tsx', () => {
       render(
         <AppContext.Provider value={{ accounts: mockAccounts }}>
           <MemoryRouter>
-            <LoginEnterpriseRoute />
+            <LoginWithOAuthApp />
           </MemoryRouter>
         </AppContext.Provider>,
       );
@@ -98,7 +98,7 @@ describe('routes/LoginEnterprise.tsx', () => {
       render(
         <AppContext.Provider value={{ accounts: mockAccounts }}>
           <MemoryRouter>
-            <LoginEnterpriseRoute />
+            <LoginWithOAuthApp />
           </MemoryRouter>
         </AppContext.Provider>,
       );
@@ -117,7 +117,7 @@ describe('routes/LoginEnterprise.tsx', () => {
     const { rerender } = render(
       <AppContext.Provider value={{ accounts: mockAccounts }}>
         <MemoryRouter>
-          <LoginEnterpriseRoute />
+          <LoginWithOAuthApp />
         </MemoryRouter>
       </AppContext.Provider>,
     );
@@ -132,7 +132,7 @@ describe('routes/LoginEnterprise.tsx', () => {
         }}
       >
         <MemoryRouter>
-          <LoginEnterpriseRoute />
+          <LoginWithOAuthApp />
         </MemoryRouter>
       </AppContext.Provider>,
     );
@@ -146,7 +146,7 @@ describe('routes/LoginEnterprise.tsx', () => {
     render(
       <AppContext.Provider value={{ accounts: mockAccounts }}>
         <MemoryRouter>
-          <LoginEnterpriseRoute />
+          <LoginWithOAuthApp />
         </MemoryRouter>
       </AppContext.Provider>,
     );
@@ -172,7 +172,7 @@ describe('routes/LoginEnterprise.tsx', () => {
     render(
       <AppContext.Provider value={{ accounts: mockAccounts }}>
         <MemoryRouter>
-          <LoginEnterpriseRoute />
+          <LoginWithOAuthApp />
         </MemoryRouter>
       </AppContext.Provider>,
     );