From 92471bf44a15df2d60e01db8bc254bdfb6890c7b Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 21 May 2024 09:36:58 -1000
Subject: [PATCH] refactor(auth): update ux and terminology (#1122)

---
 src/app.tsx                                   |  11 +-
 src/components/fields/Button.tsx              |  19 +-
 .../fields/__snapshots__/Button.test.tsx.snap |   8 +-
 src/routes/Login.test.tsx                     |  21 +-
 src/routes/Login.tsx                          |  55 ++--
 ...se.test.tsx => LoginWithOAuthApp.test.tsx} |  20 +-
 ...inEnterprise.tsx => LoginWithOAuthApp.tsx} |  74 +++--
 ... => LoginWithPersonalAccessToken.test.tsx} |  23 +-
 ...n.tsx => LoginWithPersonalAccessToken.tsx} |  69 +++--
 src/routes/Settings.test.tsx                  |   6 +-
 src/routes/Settings.tsx                       |  13 +-
 src/routes/__snapshots__/Login.test.tsx.snap  |  63 ++++-
 .../LoginEnterprise.test.tsx.snap             | 243 -----------------
 .../LoginWithOAuthApp.test.tsx.snap           | 254 ++++++++++++++++++
 ...oginWithPersonalAccessToken.test.tsx.snap} | 165 ++++++------
 .../__snapshots__/Settings.test.tsx.snap      |   4 +-
 16 files changed, 565 insertions(+), 483 deletions(-)
 rename src/routes/{LoginEnterprise.test.tsx => LoginWithOAuthApp.test.tsx} (92%)
 rename src/routes/{LoginEnterprise.tsx => LoginWithOAuthApp.tsx} (70%)
 rename src/routes/{LoginWithToken.test.tsx => LoginWithPersonalAccessToken.test.tsx} (90%)
 rename src/routes/{LoginWithToken.tsx => LoginWithPersonalAccessToken.tsx} (76%)
 delete mode 100644 src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
 create mode 100644 src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
 rename src/routes/__snapshots__/{LoginWithToken.test.tsx.snap => LoginWithPersonalAccessToken.test.tsx.snap} (53%)

diff --git a/src/app.tsx b/src/app.tsx
index 9ae971b14..2980aa530 100644
--- a/src/app.tsx
+++ b/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>
diff --git a/src/components/fields/Button.tsx b/src/components/fields/Button.tsx
index eb669725e..4b54cafb8 100644
--- a/src/components/fields/Button.tsx
+++ b/src/components/fields/Button.tsx
@@ -5,17 +5,18 @@ 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'}
@@ -23,9 +24,17 @@ export const Button: FC<IButton> = (props: IButton) => {
       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>
   );
diff --git a/src/components/fields/__snapshots__/Button.test.tsx.snap b/src/components/fields/__snapshots__/Button.test.tsx.snap
index b85c1edc7..42d15e21c 100644
--- a/src/components/fields/__snapshots__/Button.test.tsx.snap
+++ b/src/components/fields/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`components/fields/Button.tsx should render with icon 1`] = `
 <button
   aria-label="button"
-  className="undefined 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"
+  className="undefined 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"
   onClick={[Function]}
   title="button"
   type="button"
@@ -13,7 +13,7 @@ exports[`components/fields/Button.tsx should render with icon 1`] = `
     className="mr-1"
     fill="currentColor"
     focusable="false"
-    height={14}
+    height={16}
     style={
       {
         "display": "inline-block",
@@ -23,7 +23,7 @@ exports[`components/fields/Button.tsx should render with icon 1`] = `
       }
     }
     viewBox="0 0 16 16"
-    width={14}
+    width={16}
   >
     <path
       d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
@@ -36,7 +36,7 @@ exports[`components/fields/Button.tsx should render with icon 1`] = `
 exports[`components/fields/Button.tsx should render without icon 1`] = `
 <button
   aria-label="button"
-  className="undefined 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"
+  className="undefined 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"
   onClick={[Function]}
   title="button"
   type="button"
diff --git a/src/routes/Login.test.tsx b/src/routes/Login.test.tsx
index d469fc55b..f9aecf086 100644
--- a/src/routes/Login.test.tsx
+++ b/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');
   });
 });
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index 3de4d5f7c..b6741bc12 100644
--- a/src/routes/Login.tsx
+++ b/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>
   );
 };
diff --git a/src/routes/LoginEnterprise.test.tsx b/src/routes/LoginWithOAuthApp.test.tsx
similarity index 92%
rename from src/routes/LoginEnterprise.test.tsx
rename to src/routes/LoginWithOAuthApp.test.tsx
index 97b313640..63f7a256a 100644
--- a/src/routes/LoginEnterprise.test.tsx
+++ b/src/routes/LoginWithOAuthApp.test.tsx
@@ -6,7 +6,7 @@ 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', () => ({
@@ -14,7 +14,7 @@ jest.mock('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>,
     );
diff --git a/src/routes/LoginEnterprise.tsx b/src/routes/LoginWithOAuthApp.tsx
similarity index 70%
rename from src/routes/LoginEnterprise.tsx
rename to src/routes/LoginWithOAuthApp.tsx
index a91c7e0ec..a51057da7 100644
--- a/src/routes/LoginEnterprise.tsx
+++ b/src/routes/LoginWithOAuthApp.tsx
@@ -32,6 +32,7 @@ interface IFormErrors {
 
 export const validate = (values: IValues): IFormErrors => {
   const errors: IFormErrors = {};
+
   if (!values.hostname) {
     errors.hostname = 'Required';
   } else if (
@@ -59,7 +60,7 @@ export const validate = (values: IValues): IFormErrors => {
   return errors;
 };
 
-export const LoginEnterpriseRoute: FC = () => {
+export const LoginWithOAuthApp: FC = () => {
   const {
     accounts: { enterpriseAccounts },
     loginEnterprise,
@@ -83,20 +84,17 @@ export const LoginEnterpriseRoute: FC = () => {
           label="Hostname"
           placeholder="github.company.com"
           helpText={
-            <div>
-              <div className="mb-1">
-                <Button
-                  name="Create new OAuth App"
-                  label="Create new OAuth App"
-                  class="px-2 py-1 text-xs"
-                  disabled={!values.hostname}
-                  icon={PersonIcon}
-                  size={12}
-                  url={getNewOAuthAppURL(values.hostname)}
-                />{' '}
-                then{' '}
-                <span className="italic">generate a new client secret</span>.
-              </div>
+            <div className="mb-1">
+              <Button
+                name="Create new OAuth App"
+                label="Create new OAuth App"
+                disabled={!values.hostname}
+                icon={PersonIcon}
+                size={12}
+                url={getNewOAuthAppURL(values.hostname)}
+              />{' '}
+              on GitHub then paste your{' '}
+              <span className="italic">client id and client secret</span> below.
             </div>
           }
         />
@@ -109,28 +107,25 @@ export const LoginEnterpriseRoute: FC = () => {
           placeholder="ABC123DEF456"
         />
 
-        <div className="flex justify-between items-center">
-          <div className="text-xs italic hover:text-blue-500 justify-center items-center">
-            <Button
-              name="Docs"
-              label="GitHub Docs"
-              class="px-2 py-1 text-xs"
-              icon={BookIcon}
-              size={12}
-              url={Constants.GITHUB_DOCS.OAUTH_URL}
-            />
-          </div>
-          <div className="justify-center items-center">
-            <Button
-              name="Login"
-              label="Login"
-              class="float-right px-4 py-2 my-4"
-              icon={SignInIcon}
-              size={14}
-              disabled={submitting || pristine}
-              type="submit"
-            />
-          </div>
+        <div className="flex justify-between items-end">
+          <Button
+            name="Docs"
+            label="GitHub Docs"
+            class="mt-2"
+            icon={BookIcon}
+            size={12}
+            url={Constants.GITHUB_DOCS.OAUTH_URL}
+          />
+
+          <Button
+            name="Login"
+            label="Login"
+            class="px-4 py-2 mt-2 !text-sm"
+            icon={SignInIcon}
+            size={16}
+            disabled={submitting || pristine}
+            type="submit"
+          />
         </div>
       </form>
     );
@@ -160,7 +155,10 @@ export const LoginEnterpriseRoute: FC = () => {
           />
         </button>
 
-        <h3 className="text-lg font-semibold">Login with GitHub Enterprise</h3>
+        <h3 className="text-lg font-semibold justify-center">
+          <PersonIcon size={20} className="mr-2" />
+          Login with OAuth App
+        </h3>
       </div>
 
       <div className="flex-1 px-8">
diff --git a/src/routes/LoginWithToken.test.tsx b/src/routes/LoginWithPersonalAccessToken.test.tsx
similarity index 90%
rename from src/routes/LoginWithToken.test.tsx
rename to src/routes/LoginWithPersonalAccessToken.test.tsx
index eb969083f..6c0a4eae5 100644
--- a/src/routes/LoginWithToken.test.tsx
+++ b/src/routes/LoginWithPersonalAccessToken.test.tsx
@@ -11,7 +11,10 @@ import { MemoryRouter } from 'react-router-dom';
 import TestRenderer from 'react-test-renderer';
 
 import { AppContext } from '../context/App';
-import { LoginWithToken, validate } from './LoginWithToken';
+import {
+  LoginWithPersonalAccessToken,
+  validate,
+} from './LoginWithPersonalAccessToken';
 
 const mockNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
@@ -19,7 +22,7 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockNavigate,
 }));
 
-describe('routes/LoginWithToken.tsx', () => {
+describe('routes/LoginWithPersonalAccessToken.tsx', () => {
   const openExternalMock = jest.spyOn(shell, 'openExternal');
 
   const mockValidateToken = jest.fn();
@@ -33,7 +36,7 @@ describe('routes/LoginWithToken.tsx', () => {
   it('renders correctly', () => {
     const tree = TestRenderer.create(
       <MemoryRouter>
-        <LoginWithToken />
+        <LoginWithPersonalAccessToken />
       </MemoryRouter>,
     );
 
@@ -43,7 +46,7 @@ describe('routes/LoginWithToken.tsx', () => {
   it('let us go back', () => {
     render(
       <MemoryRouter>
-        <LoginWithToken />
+        <LoginWithPersonalAccessToken />
       </MemoryRouter>,
     );
 
@@ -77,7 +80,7 @@ describe('routes/LoginWithToken.tsx', () => {
       render(
         <AppContext.Provider value={{ validateToken: mockValidateToken }}>
           <MemoryRouter>
-            <LoginWithToken />
+            <LoginWithPersonalAccessToken />
           </MemoryRouter>
         </AppContext.Provider>,
       );
@@ -95,7 +98,7 @@ describe('routes/LoginWithToken.tsx', () => {
       render(
         <AppContext.Provider value={{ validateToken: mockValidateToken }}>
           <MemoryRouter>
-            <LoginWithToken />
+            <LoginWithPersonalAccessToken />
           </MemoryRouter>
         </AppContext.Provider>,
       );
@@ -112,7 +115,7 @@ describe('routes/LoginWithToken.tsx', () => {
     render(
       <AppContext.Provider value={{ validateToken: mockValidateToken }}>
         <MemoryRouter>
-          <LoginWithToken />
+          <LoginWithPersonalAccessToken />
         </MemoryRouter>
       </AppContext.Provider>,
     );
@@ -138,7 +141,7 @@ describe('routes/LoginWithToken.tsx', () => {
     render(
       <AppContext.Provider value={{ validateToken: mockValidateToken }}>
         <MemoryRouter>
-          <LoginWithToken />
+          <LoginWithPersonalAccessToken />
         </MemoryRouter>
       </AppContext.Provider>,
     );
@@ -162,7 +165,7 @@ describe('routes/LoginWithToken.tsx', () => {
   it('should render the form with errors', () => {
     render(
       <MemoryRouter>
-        <LoginWithToken />
+        <LoginWithPersonalAccessToken />
       </MemoryRouter>,
     );
 
@@ -183,7 +186,7 @@ describe('routes/LoginWithToken.tsx', () => {
     render(
       <AppContext.Provider value={{ validateToken: mockValidateToken }}>
         <MemoryRouter>
-          <LoginWithToken />
+          <LoginWithPersonalAccessToken />
         </MemoryRouter>
       </AppContext.Provider>,
     );
diff --git a/src/routes/LoginWithToken.tsx b/src/routes/LoginWithPersonalAccessToken.tsx
similarity index 76%
rename from src/routes/LoginWithToken.tsx
rename to src/routes/LoginWithPersonalAccessToken.tsx
index 919706d54..5fc1b6ac9 100644
--- a/src/routes/LoginWithToken.tsx
+++ b/src/routes/LoginWithPersonalAccessToken.tsx
@@ -29,11 +29,6 @@ interface IFormErrors {
 
 export const validate = (values: IValues): IFormErrors => {
   const errors: IFormErrors = {};
-  if (!values.token) {
-    errors.token = 'Required';
-  } else if (!/^[A-Z0-9_]{40}$/i.test(values.token)) {
-    errors.token = 'Invalid token.';
-  }
 
   if (!values.hostname) {
     errors.hostname = 'Required';
@@ -45,10 +40,16 @@ export const validate = (values: IValues): IFormErrors => {
     errors.hostname = 'Invalid hostname.';
   }
 
+  if (!values.token) {
+    errors.token = 'Required';
+  } else if (!/^[A-Z0-9_]{40}$/i.test(values.token)) {
+    errors.token = 'Invalid token.';
+  }
+
   return errors;
 };
 
-export const LoginWithToken: FC = () => {
+export const LoginWithPersonalAccessToken: FC = () => {
   const { validateToken } = useContext(AppContext);
   const navigate = useNavigate();
   const [isValidToken, setIsValidToken] = useState<boolean>(true);
@@ -63,10 +64,8 @@ export const LoginWithToken: FC = () => {
           label="Hostname"
           placeholder="github.company.com"
           helpText={
-            <div>
-              <div className="italic mt-1">
-                Change only if you are using GitHub Enterprise Server.
-              </div>
+            <div className="italic mt-1">
+              Change only if you are using GitHub Enterprise Server.
             </div>
           }
         />
@@ -81,7 +80,6 @@ export const LoginWithToken: FC = () => {
                 <Button
                   name="Generate a PAT"
                   label="Generate a PAT"
-                  class="px-2 py-1 text-xs"
                   disabled={!values.hostname}
                   icon={KeyIcon}
                   size={12}
@@ -102,34 +100,30 @@ export const LoginWithToken: FC = () => {
           </div>
         )}
 
-        <div className="flex justify-between items-center">
-          <div className="text-xs italic hover:text-blue-500 justify-center items-center">
-            <Button
-              name="Docs"
-              label="GitHub Docs"
-              class="px-2 py-1 text-xs"
-              icon={BookIcon}
-              size={12}
-              url={Constants.GITHUB_DOCS.PAT_URL}
-            />
-          </div>
-          <div className="justify-center items-center">
-            <Button
-              name="Login"
-              label="Login"
-              class="float-right px-4 py-2 my-4"
-              icon={SignInIcon}
-              size={14}
-              disabled={submitting || pristine}
-              type="submit"
-            />
-          </div>
+        <div className="flex justify-between items-end">
+          <Button
+            name="Docs"
+            label="GitHub Docs"
+            class="mt-2"
+            icon={BookIcon}
+            size={12}
+            url={Constants.GITHUB_DOCS.PAT_URL}
+          />
+          <Button
+            name="Login"
+            label="Login"
+            class="px-4 py-2 mt-2 !text-sm"
+            icon={SignInIcon}
+            size={16}
+            disabled={submitting || pristine}
+            type="submit"
+          />
         </div>
       </form>
     );
   };
 
-  const submit = useCallback(async (data: IValues) => {
+  const login = useCallback(async (data: IValues) => {
     setIsValidToken(true);
     try {
       await validateToken(data as AuthTokenOptions);
@@ -155,7 +149,8 @@ export const LoginWithToken: FC = () => {
           />
         </button>
 
-        <h3 className="text-lg font-semibold">
+        <h3 className="text-lg font-semibold justify-center">
+          <KeyIcon size={18} className="mr-2" />
           Login with Personal Access Token
         </h3>
       </div>
@@ -163,10 +158,10 @@ export const LoginWithToken: FC = () => {
       <div className="flex-1 px-8">
         <Form
           initialValues={{
-            token: '',
             hostname: Constants.DEFAULT_AUTH_OPTIONS.hostname,
+            token: '',
           }}
-          onSubmit={submit}
+          onSubmit={login}
           validate={validate}
         >
           {renderForm}
diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx
index 1539de752..9f2566057 100644
--- a/src/routes/Settings.test.tsx
+++ b/src/routes/Settings.test.tsx
@@ -447,7 +447,7 @@ describe('routes/Settings.tsx', () => {
       );
     });
 
-    it('should go to the enterprise login route', async () => {
+    it('should go to the login with oauth app route', async () => {
       await act(async () => {
         render(
           <AppContext.Provider
@@ -463,8 +463,8 @@ describe('routes/Settings.tsx', () => {
         );
       });
 
-      fireEvent.click(screen.getByTitle('Login with GitHub Enterprise'));
-      expect(mockNavigate).toHaveBeenNthCalledWith(1, '/login-enterprise', {
+      fireEvent.click(screen.getByTitle('Login with OAuth App'));
+      expect(mockNavigate).toHaveBeenNthCalledWith(1, '/login-oauth-app', {
         replace: true,
       });
     });
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index c39ddfa53..910569b0b 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -81,8 +81,8 @@ export const SettingsRoute: FC = () => {
     ipcRenderer.send('app-quit');
   }, []);
 
-  const goToEnterprise = useCallback(() => {
-    return navigate('/login-enterprise', { replace: true });
+  const loginWithOAuthApp = useCallback(() => {
+    return navigate('/login-oauth-app', { replace: true });
   }, []);
 
   const footerButtonClass =
@@ -293,13 +293,10 @@ export const SettingsRoute: FC = () => {
           <button
             type="button"
             className={footerButtonClass}
-            title="Login with GitHub Enterprise"
-            onClick={goToEnterprise}
+            title="Login with OAuth App"
+            onClick={loginWithOAuthApp}
           >
-            <PersonAddIcon
-              size={20}
-              aria-label="Login with GitHub Enterprise"
-            />
+            <PersonAddIcon size={20} aria-label="Login with OAuth App" />
           </button>
 
           <button
diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
index 63533836e..86ae8b221 100644
--- a/src/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/routes/__snapshots__/Login.test.tsx.snap
@@ -56,23 +56,70 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
     <br />
      on your menu bar.
   </div>
+  <div
+    className="font-semibold text-center text-sm italic"
+  >
+    Login with
+  </div>
   <button
-    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"
+    aria-label="Login with Personal Access Token"
+    className="py-2 mt-2 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"
     onClick={[Function]}
-    title="Login with Personal Token"
+    title="Login with Personal Access Token"
     type="button"
   >
-    Login with Personal Access Token
+    <svg
+      aria-hidden="true"
+      className="mr-1"
+      fill="currentColor"
+      focusable="false"
+      height={14}
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={14}
+    >
+      <path
+        d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+      />
+    </svg>
+    Personal Access Token
   </button>
   <button
-    aria-label="Login with GitHub Enterprise"
-    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"
+    aria-label="Login with OAuth App"
+    className="py-2 mt-2 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"
     onClick={[Function]}
-    title="Login with GitHub Enterprise"
+    title="Login with OAuth App"
     type="button"
   >
-    Login to GitHub Enterprise
+    <svg
+      aria-hidden="true"
+      className="mr-1"
+      fill="currentColor"
+      focusable="false"
+      height={14}
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={14}
+    >
+      <path
+        d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+      />
+    </svg>
+    OAuth App
   </button>
 </div>
 `;
diff --git a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
deleted file mode 100644
index b5a7bc654..000000000
--- a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
+++ /dev/null
@@ -1,243 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`routes/LoginEnterprise.tsx renders correctly 1`] = `
-<div
-  className="flex-1 bg-white dark:bg-gray-dark dark:text-white"
->
-  <div
-    className="flex justify-between items-center mt-4 py-2 mx-8"
-  >
-    <button
-      className="focus:outline-none"
-      onClick={[Function]}
-      title="Go Back"
-      type="button"
-    >
-      <svg
-        aria-label="Go Back"
-        className="hover:text-gray-400"
-        fill="currentColor"
-        focusable="false"
-        height={20}
-        role="img"
-        style={
-          {
-            "display": "inline-block",
-            "overflow": "visible",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={20}
-      >
-        <path
-          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-        />
-      </svg>
-    </button>
-    <h3
-      className="text-lg font-semibold"
-    >
-      Login with GitHub Enterprise
-    </h3>
-  </div>
-  <div
-    className="flex-1 px-8"
-  >
-    <form
-      onSubmit={[Function]}
-    >
-      <div
-        className="mb-4"
-      >
-        <label
-          className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
-          htmlFor="hostname"
-        >
-          Hostname
-        </label>
-        <input
-          className="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
-          id="hostname"
-          name="hostname"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          placeholder="github.company.com"
-          required={false}
-          type="text"
-          value=""
-        />
-        <div
-          className="mt-3 text-gray-700 dark:text-gray-200 text-xs"
-        >
-          <div>
-            <div
-              className="mb-1"
-            >
-              <button
-                aria-label="Create new OAuth App"
-                className="px-2 py-1 text-xs 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"
-                disabled={true}
-                onClick={[Function]}
-                title="Create new OAuth App"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  className="mr-1"
-                  fill="currentColor"
-                  focusable="false"
-                  height={14}
-                  style={
-                    {
-                      "display": "inline-block",
-                      "overflow": "visible",
-                      "userSelect": "none",
-                      "verticalAlign": "text-bottom",
-                    }
-                  }
-                  viewBox="0 0 16 16"
-                  width={14}
-                >
-                  <path
-                    d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
-                  />
-                </svg>
-                Create new OAuth App
-              </button>
-               
-              then
-               
-              <span
-                className="italic"
-              >
-                generate a new client secret
-              </span>
-              .
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="mb-4"
-      >
-        <label
-          className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
-          htmlFor="clientId"
-        >
-          Client ID
-        </label>
-        <input
-          className="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
-          id="clientId"
-          name="clientId"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          placeholder="123456789"
-          required={false}
-          type="text"
-          value=""
-        />
-      </div>
-      <div
-        className="mb-4"
-      >
-        <label
-          className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
-          htmlFor="clientSecret"
-        >
-          Client Secret
-        </label>
-        <input
-          className="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
-          id="clientSecret"
-          name="clientSecret"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          placeholder="ABC123DEF456"
-          required={false}
-          type="text"
-          value=""
-        />
-      </div>
-      <div
-        className="flex justify-between items-center"
-      >
-        <div
-          className="text-xs italic hover:text-blue-500 justify-center items-center"
-        >
-          <button
-            aria-label="GitHub Docs"
-            className="px-2 py-1 text-xs 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"
-            onClick={[Function]}
-            title="GitHub Docs"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="mr-1"
-              fill="currentColor"
-              focusable="false"
-              height={14}
-              style={
-                {
-                  "display": "inline-block",
-                  "overflow": "visible",
-                  "userSelect": "none",
-                  "verticalAlign": "text-bottom",
-                }
-              }
-              viewBox="0 0 16 16"
-              width={14}
-            >
-              <path
-                d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
-              />
-            </svg>
-            Docs
-          </button>
-        </div>
-        <div
-          className="justify-center items-center"
-        >
-          <button
-            aria-label="Login"
-            className="float-right px-4 py-2 my-4 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"
-            disabled={true}
-            onClick={[Function]}
-            title="Login"
-            type="submit"
-          >
-            <svg
-              aria-hidden="true"
-              className="mr-1"
-              fill="currentColor"
-              focusable="false"
-              height={14}
-              style={
-                {
-                  "display": "inline-block",
-                  "overflow": "visible",
-                  "userSelect": "none",
-                  "verticalAlign": "text-bottom",
-                }
-              }
-              viewBox="0 0 16 16"
-              width={14}
-            >
-              <path
-                d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
-              />
-            </svg>
-            Login
-          </button>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-`;
diff --git a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
new file mode 100644
index 000000000..dc9f6d4dd
--- /dev/null
+++ b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -0,0 +1,254 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
+<div
+  className="flex-1 bg-white dark:bg-gray-dark dark:text-white"
+>
+  <div
+    className="flex justify-between items-center mt-4 py-2 mx-8"
+  >
+    <button
+      className="focus:outline-none"
+      onClick={[Function]}
+      title="Go Back"
+      type="button"
+    >
+      <svg
+        aria-label="Go Back"
+        className="hover:text-gray-400"
+        fill="currentColor"
+        focusable="false"
+        height={20}
+        role="img"
+        style={
+          {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={20}
+      >
+        <path
+          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+        />
+      </svg>
+    </button>
+    <h3
+      className="text-lg font-semibold justify-center"
+    >
+      <svg
+        aria-hidden="true"
+        className="mr-2"
+        fill="currentColor"
+        focusable="false"
+        height={20}
+        style={
+          {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={20}
+      >
+        <path
+          d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+        />
+      </svg>
+      Login with OAuth App
+    </h3>
+  </div>
+  <div
+    className="flex-1 px-8"
+  >
+    <form
+      onSubmit={[Function]}
+    >
+      <div
+        className="mb-4"
+      >
+        <label
+          className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+          htmlFor="hostname"
+        >
+          Hostname
+        </label>
+        <input
+          className="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+          id="hostname"
+          name="hostname"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="github.company.com"
+          required={false}
+          type="text"
+          value=""
+        />
+        <div
+          className="mt-3 text-gray-700 dark:text-gray-200 text-xs"
+        >
+          <div
+            className="mb-1"
+          >
+            <button
+              aria-label="Create new OAuth App"
+              className="undefined 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"
+              disabled={true}
+              onClick={[Function]}
+              title="Create new OAuth App"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="mr-1"
+                fill="currentColor"
+                focusable="false"
+                height={12}
+                style={
+                  {
+                    "display": "inline-block",
+                    "overflow": "visible",
+                    "userSelect": "none",
+                    "verticalAlign": "text-bottom",
+                  }
+                }
+                viewBox="0 0 16 16"
+                width={12}
+              >
+                <path
+                  d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+                />
+              </svg>
+              Create new OAuth App
+            </button>
+             
+            on GitHub then paste your
+             
+            <span
+              className="italic"
+            >
+              client id and client secret
+            </span>
+             below.
+          </div>
+        </div>
+      </div>
+      <div
+        className="mb-4"
+      >
+        <label
+          className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+          htmlFor="clientId"
+        >
+          Client ID
+        </label>
+        <input
+          className="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+          id="clientId"
+          name="clientId"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="123456789"
+          required={false}
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="mb-4"
+      >
+        <label
+          className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+          htmlFor="clientSecret"
+        >
+          Client Secret
+        </label>
+        <input
+          className="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+          id="clientSecret"
+          name="clientSecret"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="ABC123DEF456"
+          required={false}
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="flex justify-between items-end"
+      >
+        <button
+          aria-label="GitHub Docs"
+          className="mt-2 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"
+          onClick={[Function]}
+          title="GitHub Docs"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            className="mr-1"
+            fill="currentColor"
+            focusable="false"
+            height={12}
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={12}
+          >
+            <path
+              d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
+            />
+          </svg>
+          Docs
+        </button>
+        <button
+          aria-label="Login"
+          className="px-4 py-2 mt-2 !text-sm 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"
+          disabled={true}
+          onClick={[Function]}
+          title="Login"
+          type="submit"
+        >
+          <svg
+            aria-hidden="true"
+            className="mr-1"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
+            />
+          </svg>
+          Login
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;
diff --git a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
similarity index 53%
rename from src/routes/__snapshots__/LoginWithToken.test.tsx.snap
rename to src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index d92a91a2b..64ac93269 100644
--- a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
+exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
 <div
   className="flex-1 bg-white dark:bg-gray-dark dark:text-white"
 >
@@ -37,8 +37,29 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
       </svg>
     </button>
     <h3
-      className="text-lg font-semibold"
+      className="text-lg font-semibold justify-center"
     >
+      <svg
+        aria-hidden="true"
+        className="mr-2"
+        fill="currentColor"
+        focusable="false"
+        height={18}
+        style={
+          {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={18}
+      >
+        <path
+          d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+        />
+      </svg>
       Login with Personal Access Token
     </h3>
   </div>
@@ -72,12 +93,10 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
         <div
           className="mt-3 text-gray-700 dark:text-gray-200 text-xs"
         >
-          <div>
-            <div
-              className="italic mt-1"
-            >
-              Change only if you are using GitHub Enterprise Server.
-            </div>
+          <div
+            className="italic mt-1"
+          >
+            Change only if you are using GitHub Enterprise Server.
           </div>
         </div>
       </div>
@@ -109,7 +128,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
             <div>
               <button
                 aria-label="Generate a PAT"
-                className="px-2 py-1 text-xs 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"
+                className="undefined 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"
                 disabled={false}
                 onClick={[Function]}
                 title="Generate a PAT"
@@ -120,7 +139,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
                   className="mr-1"
                   fill="currentColor"
                   focusable="false"
-                  height={14}
+                  height={12}
                   style={
                     {
                       "display": "inline-block",
@@ -130,7 +149,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
                     }
                   }
                   viewBox="0 0 16 16"
-                  width={14}
+                  width={12}
                 >
                   <path
                     d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
@@ -150,77 +169,69 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
         </div>
       </div>
       <div
-        className="flex justify-between items-center"
+        className="flex justify-between items-end"
       >
-        <div
-          className="text-xs italic hover:text-blue-500 justify-center items-center"
+        <button
+          aria-label="GitHub Docs"
+          className="mt-2 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"
+          onClick={[Function]}
+          title="GitHub Docs"
+          type="button"
         >
-          <button
-            aria-label="GitHub Docs"
-            className="px-2 py-1 text-xs 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"
-            onClick={[Function]}
-            title="GitHub Docs"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="mr-1"
-              fill="currentColor"
-              focusable="false"
-              height={14}
-              style={
-                {
-                  "display": "inline-block",
-                  "overflow": "visible",
-                  "userSelect": "none",
-                  "verticalAlign": "text-bottom",
-                }
+          <svg
+            aria-hidden="true"
+            className="mr-1"
+            fill="currentColor"
+            focusable="false"
+            height={12}
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
               }
-              viewBox="0 0 16 16"
-              width={14}
-            >
-              <path
-                d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
-              />
-            </svg>
-            Docs
-          </button>
-        </div>
-        <div
-          className="justify-center items-center"
-        >
-          <button
-            aria-label="Login"
-            className="float-right px-4 py-2 my-4 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"
-            disabled={true}
-            onClick={[Function]}
-            title="Login"
-            type="submit"
+            }
+            viewBox="0 0 16 16"
+            width={12}
           >
-            <svg
-              aria-hidden="true"
-              className="mr-1"
-              fill="currentColor"
-              focusable="false"
-              height={14}
-              style={
-                {
-                  "display": "inline-block",
-                  "overflow": "visible",
-                  "userSelect": "none",
-                  "verticalAlign": "text-bottom",
-                }
+            <path
+              d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
+            />
+          </svg>
+          Docs
+        </button>
+        <button
+          aria-label="Login"
+          className="px-4 py-2 mt-2 !text-sm 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"
+          disabled={true}
+          onClick={[Function]}
+          title="Login"
+          type="submit"
+        >
+          <svg
+            aria-hidden="true"
+            className="mr-1"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            style={
+              {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
               }
-              viewBox="0 0 16 16"
-              width={14}
-            >
-              <path
-                d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
-              />
-            </svg>
-            Login
-          </button>
-        </div>
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          >
+            <path
+              d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
+            />
+          </svg>
+          Login
+        </button>
       </div>
     </form>
   </div>
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 232a45311..ad0209460 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -514,11 +514,11 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
     <div>
       <button
         class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
-        title="Login with GitHub Enterprise"
+        title="Login with OAuth App"
         type="button"
       >
         <svg
-          aria-label="Login with GitHub Enterprise"
+          aria-label="Login with OAuth App"
           class="octicon octicon-person-add"
           fill="currentColor"
           focusable="false"