feat(login): add help docs to login flows

gitify-app · May 17, 2024 · f75cedb · f75cedb
1 parent e96fca2
commit f75cedb
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 32 deletions.
diff --git a/src/routes/LoginEnterprise.tsx b/src/routes/LoginEnterprise.tsx
@@ -1,6 +1,6 @@
 const ipcRenderer = require('electron').ipcRenderer;
 
-import { ArrowLeftIcon } from '@primer/octicons-react';
+import { ArrowLeftIcon, BookIcon } from '@primer/octicons-react';
 
 import { type FC, useCallback, useContext, useEffect } from 'react';
 import { Form, type FormRenderProps } from 'react-final-form';
@@ -9,6 +9,10 @@ import { useNavigate } from 'react-router-dom';
 import { FieldInput } from '../components/fields/FieldInput';
 import { AppContext } from '../context/App';
 import type { AuthOptions } from '../types';
+import { openExternalLink } from '../utils/comms';
+
+const GITHUB_DOCS_URL =
+  'https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authenticating-to-the-rest-api-with-an-oauth-app';
 
 interface IValues {
   hostname?: string;
@@ -65,9 +69,16 @@ export const LoginEnterpriseRoute: FC = () => {
     }
   }, [enterpriseAccounts]);
 
+  const openLink = useCallback((url: string) => {
+    openExternalLink(url);
+  }, []);
+
   const renderForm = (formProps: FormRenderProps) => {
     const { handleSubmit, submitting, pristine } = formProps;
 
+    const buttonClasses =
+      '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';
+
     return (
       <form onSubmit={handleSubmit}>
         <FieldInput
@@ -84,14 +95,27 @@ export const LoginEnterpriseRoute: FC = () => {
           placeholder="ABC123DEF456"
         />
 
-        <button
-          className="float-right px-4 py-2 my-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none"
-          title="Login Button"
-          disabled={submitting || pristine}
-          type="submit"
-        >
-          Login
-        </button>
+        <div className="flex justify-between items-center">
+          <div className="text-xs italic hover:text-blue-500 justify-center items-center">
+            <button
+              type="button"
+              className={`px-2 py-1 text-xs ${buttonClasses}`}
+              onClick={() => openLink(GITHUB_DOCS_URL)}
+            >
+              <BookIcon size={12} /> Docs
+            </button>
+          </div>
+          <div>
+            <button
+              className="float-right px-4 py-2 my-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none"
+              title="Login Button"
+              disabled={submitting || pristine}
+              type="submit"
+            >
+              Login
+            </button>
+          </div>
+        </div>
       </form>
     );
   };

diff --git a/src/routes/LoginWithToken.tsx b/src/routes/LoginWithToken.tsx
@@ -1,4 +1,4 @@
-import { ArrowLeftIcon } from '@primer/octicons-react';
+import { ArrowLeftIcon, BookIcon } from '@primer/octicons-react';
 
 import { type FC, useCallback, useContext, useState } from 'react';
 import { Form, type FormRenderProps } from 'react-final-form';
@@ -12,6 +12,9 @@ import { Constants } from '../utils/constants';
 
 import { format } from 'date-fns';
 
+const GITHUB_DOCS_URL =
+  'https://docs.github.com/en/enterprise-server@3.13/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens';
+
 interface IValues {
   token?: string;
   hostname?: string;
@@ -103,14 +106,27 @@ export const LoginWithToken: FC = () => {
           </div>
         )}
 
-        <button
-          className={`float-right px-4 py-2 my-4 ${buttonClasses}`}
-          title="Submit Button"
-          disabled={submitting || pristine}
-          type="submit"
-        >
-          Submit
-        </button>
+        <div className="flex justify-between items-center">
+          <div className="text-xs italic hover:text-blue-500 justify-center items-center">
+            <button
+              type="button"
+              className={`px-2 py-1 text-xs ${buttonClasses}`}
+              onClick={() => openLink(GITHUB_DOCS_URL)}
+            >
+              <BookIcon size={12} /> Docs
+            </button>
+          </div>
+          <div>
+            <button
+              className={`float-right px-4 py-2 my-4 ${buttonClasses}`}
+              title="Submit Button"
+              disabled={submitting || pristine}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
       </form>
     );
   };

diff --git a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
diff --git a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap