feat: Login with a personal access token (#471)

* chore: Update path to /login-enterprise

* feat: Login with a personal access token

* feat: Add helpText to login with token form

* chore: Fix/Write more tests

* chore: Add more tests

* feat: Improve UI for light/dark mode

Author: manosim

src/app.tsx

@@ -10,6 +10,7 @@ import { AppContext, AppProvider } from './context/App';
 import { Loading } from './components/Loading';
 import { LoginEnterpriseRoute } from './routes/LoginEnterprise';
 import { LoginRoute } from './routes/Login';
+import { LoginWithToken } from './routes/LoginWithToken';
 import { NotificationsRoute } from './routes/Notifications';
 import { SettingsRoute } from './routes/Settings';
 import { Sidebar } from './components/Sidebar';
@@ -45,7 +46,8 @@ export const App = () => {
             <PrivateRoute path="/" exact component={NotificationsRoute} />
             <PrivateRoute path="/settings" exact component={SettingsRoute} />
             <Route path="/login" component={LoginRoute} />
-            <Route path="/enterpriselogin" component={LoginEnterpriseRoute} />
+            <Route path="/login-enterprise" component={LoginEnterpriseRoute} />
+            <Route path="/login-token" component={LoginWithToken} />
           </Switch>
         </div>
       </Router>

src/components/fields/FieldInput.tsx

@@ -1,49 +1,54 @@
-import * as React from 'react';
+import React from 'react';
 import { Field } from 'react-final-form';
 
 export interface IProps {
   name: string;
-  type: string;
+  type?: string;
   label: string;
   placeholder?: string;
+  helpText?: React.ReactNode | string;
   required?: boolean;
 }
 
-export class FieldInput extends React.PureComponent<IProps> {
-  public static defaultProps = {
-    type: 'text',
-    placeholder: '',
-    required: false,
-  };
+export const FieldInput: React.FC<IProps> = ({
+  label,
+  name,
+  placeholder = '',
+  helpText,
+  type = 'text',
+  required = false,
+}) => {
+  return (
+    <Field name={name}>
+      {({ input, meta: { touched, error } }) => (
+        <div className="mt-2">
+          <label
+            className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+            htmlFor={input.name}
+          >
+            {label}
+          </label>
 
-  render() {
-    const { label, name, placeholder } = this.props;
+          <input
+            type={type}
+            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"
+            id={input.name}
+            placeholder={placeholder}
+            required={required}
+            {...input}
+          />
 
-    return (
-      <Field name={name}>
-        {({ input, meta: { touched, error } }) => (
-          <div className="mt-2">
-            <label
-              className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
-              htmlFor={input.name}
-            >
-              {label}
-            </label>
+          {helpText && (
+            <div className="mt-3 text-gray-700 dark:text-gray-200 text-xs">
+              {helpText}
+            </div>
+          )}
 
-            <input
-              type="text"
-              className="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200 focus:outline-none"
-              id={input.name}
-              placeholder={placeholder}
-              {...input}
-            />
-
-            {touched && error && (
-              <div className="text-red-500 text-xs italic">{error}</div>
-            )}
-          </div>
-        )}
-      </Field>
-    );
-  }
-}
+          {touched && error && (
+            <div className="mt-2 text-red-500 text-xs italic">{error}</div>
+          )}
+        </div>
+      )}
+    </Field>
+  );
+};

src/context/App.test.tsx

@@ -5,6 +5,7 @@ import { AppContext, AppProvider } from './App';
 import { AuthState, SettingsState } from '../types';
 import { mockAccounts, mockSettings } from '../__mocks__/mock-state';
 import { useNotifications } from '../hooks/useNotifications';
+import * as apiRequests from '../utils/api-requests';
 import * as comms from '../utils/comms';
 import * as storage from '../utils/storage';
 
@@ -29,6 +30,7 @@ describe('context/App.tsx', () => {
 
   describe('api methods', () => {
     const updateSettingMock = jest.fn();
+    const apiRequestAuthMock = jest.spyOn(apiRequests, 'apiRequestAuth');
 
     const fetchNotificationsMock = jest.fn();
     const markNotificationMock = jest.fn();
@@ -164,6 +166,57 @@ describe('context/App.tsx', () => {
         'github.com'
       );
     });
+
+    it('should call validateToken', async () => {
+      apiRequestAuthMock.mockResolvedValueOnce(null);
+
+      const TestComponent = () => {
+        const { validateToken } = useContext(AppContext);
+
+        return (
+          <button
+            onClick={() =>
+              validateToken({ hostname: 'github.com', token: '123-456' })
+            }
+          >
+            Test Case
+          </button>
+        );
+      };
+
+      const { getByText } = customRender(<TestComponent />);
+
+      fireEvent.click(getByText('Test Case'));
+
+      await waitFor(() =>
+        expect(fetchNotificationsMock).toHaveBeenCalledTimes(2)
+      );
+
+      expect(apiRequestAuthMock).toHaveBeenCalledTimes(1);
+      expect(apiRequestAuthMock).toHaveBeenCalledWith(
+        'https://api.github.com/notifications',
+        'HEAD',
+        '123-456'
+      );
+    });
+  });
+
+  it('should call logout', async () => {
+    const clearStateMock = jest.spyOn(storage, 'clearState');
+
+    const TestComponent = () => {
+      const { logout } = useContext(AppContext);
+
+      return <button onClick={logout}>Test Case</button>;
+    };
+
+    const { getByText } = customRender(<TestComponent />);
+
+    act(() => {
+      fireEvent.click(getByText('Test Case'));
+    });
+
+    expect(clearStateMock).toHaveBeenCalledTimes(1);
   });
 
   it('should call updateSetting', async () => {

src/context/App.tsx

@@ -11,9 +11,11 @@ import {
   Appearance,
   AuthOptions,
   AuthState,
+  AuthTokenOptions,
   SettingsState,
 } from '../types';
-import { authGitHub, getToken } from '../utils/auth';
+import { apiRequestAuth } from '../utils/api-requests';
+import { addAccount, authGitHub, getToken } from '../utils/auth';
 import { clearState, loadState, saveState } from '../utils/storage';
 import { setAppearance } from '../utils/appearance';
 import { setAutoLaunch } from '../utils/comms';
@@ -39,6 +41,7 @@ interface AppContextState {
   isLoggedIn: boolean;
   login: () => void;
   loginEnterprise: (data: AuthOptions) => void;
+  validateToken: (data: AuthTokenOptions) => void;
   logout: () => void;
 
   notifications: AccountNotifications[];
@@ -110,16 +113,31 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     const { token } = await getToken(authCode);
     setAccounts({ ...accounts, token });
     saveState({ ...accounts, token }, settings);
-  }, [accounts]);
+  }, [accounts, settings]);
 
   const loginEnterprise = useCallback(
     async (data: AuthOptions) => {
       const { authOptions, authCode } = await authGitHub(data);
-      const { token } = await getToken(authCode, authOptions);
-      setAccounts({ ...accounts, token });
-      saveState({ ...accounts, token }, settings);
+      const { token, hostname } = await getToken(authCode, authOptions);
+      const updatedAccounts = addAccount(accounts, token, hostname);
+      setAccounts(updatedAccounts);
+      saveState(updatedAccounts, settings);
+    },
+    [accounts, settings]
+  );
+
+  const validateToken = useCallback(
+    async ({ token, hostname }: AuthTokenOptions) => {
+      await apiRequestAuth(
+        `https://api.${hostname}/notifications`,
+        'HEAD',
+        token
+      );
+      const updatedAccounts = addAccount(accounts, token, hostname);
+      setAccounts(updatedAccounts);
+      saveState(updatedAccounts, settings);
     },
-    [accounts]
+    [accounts, settings]
   );
 
   const logout = useCallback(() => {
@@ -169,6 +187,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         isLoggedIn,
         login,
         loginEnterprise,
+        validateToken,
         logout,
 
         notifications,

src/routes/Login.test.tsx

@@ -63,6 +63,6 @@ describe('routes/Login.tsx', () => {
     fireEvent.click(getByLabelText('Login with GitHub Enterprise'));
 
     expect(pushMock).toHaveBeenCalledTimes(1);
-    expect(pushMock).toHaveBeenCalledWith('/enterpriselogin');
+    expect(pushMock).toHaveBeenCalledWith('/login-enterprise');
   });
 });

src/routes/Login.tsx

@@ -41,15 +41,23 @@ export const LoginRoute: React.FC = () => {
         onClick={loginUser}
         aria-label="Login with GitHub"
       >
-        <span>Login to GitHub</span>
+        Login to GitHub
       </button>
 
       <button
         className={loginButtonClass}
-        onClick={() => history.push('/enterpriselogin')}
+        onClick={() => history.push('/login-enterprise')}
         aria-label="Login with GitHub Enterprise"
       >
-        <span>Login to GitHub Enterprise</span>
+        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"
+        onClick={() => history.push('/login-token')}
+        aria-label="Login with Personal Token"
+      >
+        <small>or login with a personal token</small>
       </button>
     </div>
   );

src/routes/LoginEnterprise.tsx

@@ -89,7 +89,7 @@ export const LoginEnterpriseRoute: React.FC = () => {
           type="submit"
           title="Login Button"
         >
-          <span>Login</span>
+          Login
         </button>
       </form>
     );