From 6d7b6cc8b9a7df7e5ac2d3e152f6605ad09250c3 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 11 Apr 2024 15:58:25 +0000
Subject: [PATCH] refactor: improve PAT login experience (#999)

---
 src/components/fields/FieldInput.tsx          |  2 +-
 src/routes/LoginWithToken.test.tsx            |  4 +-
 src/routes/LoginWithToken.tsx                 | 61 ++++++++++++-------
 .../LoginEnterprise.test.tsx.snap             |  6 +-
 .../LoginWithToken.test.tsx.snap              | 56 +++++++++--------
 5 files changed, 75 insertions(+), 54 deletions(-)

diff --git a/src/components/fields/FieldInput.tsx b/src/components/fields/FieldInput.tsx
index 930932784..669c07630 100644
--- a/src/components/fields/FieldInput.tsx
+++ b/src/components/fields/FieldInput.tsx
@@ -31,7 +31,7 @@ export const FieldInput: FC<IProps> = ({
 
           <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"
+            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={input.name}
             placeholder={placeholder}
             required={required}
diff --git a/src/routes/LoginWithToken.test.tsx b/src/routes/LoginWithToken.test.tsx
index 6b5c5e44e..cb50d13db 100644
--- a/src/routes/LoginWithToken.test.tsx
+++ b/src/routes/LoginWithToken.test.tsx
@@ -72,7 +72,7 @@ describe('routes/LoginWithToken.tsx', () => {
     expect(validate(values).token).toBe('Invalid token.');
   });
 
-  it("should click on the 'personal access tokens' link and open the browser", async () => {
+  it("should click on the 'Generate a PAT' link and open the browser", async () => {
     render(
       <AppContext.Provider value={{ validateToken: mockValidateToken }}>
         <MemoryRouter>
@@ -81,7 +81,7 @@ describe('routes/LoginWithToken.tsx', () => {
       </AppContext.Provider>,
     );
 
-    fireEvent.click(screen.getByText('personal access tokens'));
+    fireEvent.click(screen.getByText('Generate a PAT'));
 
     expect(openExternalMock).toHaveBeenCalledTimes(1);
   });
diff --git a/src/routes/LoginWithToken.tsx b/src/routes/LoginWithToken.tsx
index fa533303d..2f05eaded 100644
--- a/src/routes/LoginWithToken.tsx
+++ b/src/routes/LoginWithToken.tsx
@@ -10,6 +10,8 @@ import type { AuthTokenOptions } from '../types';
 import { openExternalLink } from '../utils/comms';
 import { Constants } from '../utils/constants';
 
+import { format } from 'date-fns';
+
 interface IValues {
   token?: string;
   hostname?: string;
@@ -53,6 +55,9 @@ export const LoginWithToken: FC = () => {
   const renderForm = (formProps: FormRenderProps) => {
     const { handleSubmit, submitting, pristine, values } = 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
@@ -60,25 +65,21 @@ export const LoginWithToken: FC = () => {
           label="Token"
           placeholder="The 40 characters token generated on GitHub"
           helpText={
-            <>
-              To generate a token, go to GitHub,{' '}
-              <button
-                type="button"
-                className="underline hover:text-gray-500 dark:hover:text-gray-300  cursor-pointer"
-                onClick={() =>
-                  openLink(
-                    'https://github.com/settings/tokens/new?scopes=notifications,read:user,repo&description=gitify_token',
-                  )
-                }
-              >
-                personal access tokens
-              </button>{' '}
-              and create one with the {Constants.AUTH_SCOPE.length} scopes{' '}
-              <span className="underline font-extrabold text-yellow-500">
-                {Constants.AUTH_SCOPE.join(', ')}{' '}
-              </span>
-              .
-            </>
+            <div>
+              <div>
+                Create a Personal Access Token on GitHub and paste above.
+              </div>
+              <div>
+                The required scopes will be selected for you.{' '}
+                <button
+                  type="button"
+                  className={`px-2 py-1 my-2 text-xs ${buttonClasses}`}
+                  onClick={() => openLink(getNewTokenURL())}
+                >
+                  Generate a PAT
+                </button>
+              </div>
+            </div>
           }
         />
 
@@ -86,7 +87,14 @@ export const LoginWithToken: FC = () => {
           name="hostname"
           label="Hostname"
           placeholder="github.company.com"
-          helpText="Defaults to github.com. Change only if you are using GitHub for Enterprise."
+          helpText={
+            <div>
+              <div>Defaults to github.com.</div>
+              <div className="italic">
+                Change only if you are using GitHub Enterprise Server.
+              </div>
+            </div>
+          }
         />
 
         {!isValidToken && (
@@ -96,7 +104,7 @@ export const LoginWithToken: FC = () => {
         )}
 
         <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"
+          className={`float-right px-4 py-2 my-4 ${buttonClasses}`}
           title="Submit Button"
           disabled={submitting || pristine}
           type="submit"
@@ -134,7 +142,7 @@ export const LoginWithToken: FC = () => {
         </button>
 
         <h3 className="text-lg font-semibold">
-          Login with personal access token
+          Login with Personal Access Token
         </h3>
       </div>
 
@@ -153,3 +161,12 @@ export const LoginWithToken: FC = () => {
     </div>
   );
 };
+
+function getNewTokenURL(): string {
+  const date = format(new Date(), 'PP p');
+  const newTokenURL = new URL('https://github.com/settings/tokens/new');
+  newTokenURL.searchParams.append('description', `Gitify (Created on ${date})`);
+  newTokenURL.searchParams.append('scopes', Constants.AUTH_SCOPE.join(','));
+
+  return newTokenURL.toString();
+}
diff --git a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
index c913860c7..109d0a93e 100644
--- a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`routes/LoginEnterprise.tsx renders correctly 1`] = `
           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"
+          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]}
@@ -80,7 +80,7 @@ exports[`routes/LoginEnterprise.tsx renders correctly 1`] = `
           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"
+          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]}
@@ -102,7 +102,7 @@ exports[`routes/LoginEnterprise.tsx renders correctly 1`] = `
           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"
+          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]}
diff --git a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
index 79dadca98..369691186 100644
--- a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
     <h3
       className="text-lg font-semibold"
     >
-      Login with personal access token
+      Login with Personal Access Token
     </h3>
   </div>
   <div
@@ -58,7 +58,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
           Token
         </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"
+          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="token"
           name="token"
           onBlur={[Function]}
@@ -72,27 +72,22 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
         <div
           className="mt-3 text-gray-700 dark:text-gray-200 text-xs"
         >
-          To generate a token, go to GitHub,
-           
-          <button
-            className="underline hover:text-gray-500 dark:hover:text-gray-300  cursor-pointer"
-            onClick={[Function]}
-            type="button"
-          >
-            personal access tokens
-          </button>
-           
-          and create one with the 
-          3
-           scopes
-           
-          <span
-            className="underline font-extrabold text-yellow-500"
-          >
-            read:user, notifications, repo
-             
-          </span>
-          .
+          <div>
+            <div>
+              Create a Personal Access Token on GitHub and paste above.
+            </div>
+            <div>
+              The required scopes will be selected for you.
+               
+              <button
+                className="px-2 py-1 my-2 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]}
+                type="button"
+              >
+                Generate a PAT
+              </button>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -105,7 +100,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
           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"
+          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]}
@@ -119,11 +114,20 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
         <div
           className="mt-3 text-gray-700 dark:text-gray-200 text-xs"
         >
-          Defaults to github.com. Change only if you are using GitHub for Enterprise.
+          <div>
+            <div>
+              Defaults to github.com.
+            </div>
+            <div
+              className="italic"
+            >
+              Change only if you are using GitHub Enterprise Server.
+            </div>
+          </div>
         </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"
+        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}
         title="Submit Button"
         type="submit"