From 22f4916ac4cd3f57bfe9e6c9e636ba36b5daee03 Mon Sep 17 00:00:00 2001 From: Nimish <85357445+nimish-ks@users.noreply.github.com> Date: Sun, 8 Dec 2024 01:40:59 +0530 Subject: [PATCH] feat: webauth improvements (#404) * feat: change error title * feat: error descriptions updates * feat: re-did the manual auth steps for phase cloud and self-hosted * feat: print the pat in a clicommand codebox * feat: added cli auth docs link and made changes to the footer buttons and links * chore: imports * chore: getHostname import * feat: flex spacing * feat: imported step 2 title * feat: misc changes to the instructions * feat: text emerald links * feat: switch to unordered list * feat: updated CliCommand component to handle longer tokens and wrapping * Update frontend/app/webauth/[requestCode]/page.tsx Co-authored-by: Rohan Chaturvedi * Update frontend/app/webauth/[requestCode]/page.tsx Co-authored-by: Rohan Chaturvedi * Update frontend/app/webauth/[requestCode]/page.tsx Co-authored-by: Rohan Chaturvedi * Update frontend/app/webauth/[requestCode]/page.tsx Co-authored-by: Rohan Chaturvedi * Update frontend/app/webauth/[requestCode]/page.tsx Co-authored-by: Rohan Chaturvedi --------- Co-authored-by: Rohan Chaturvedi --- frontend/app/webauth/[requestCode]/page.tsx | 126 +++++++++++++------ frontend/components/dashboard/CliCommand.tsx | 38 ++++-- 2 files changed, 111 insertions(+), 53 deletions(-) diff --git a/frontend/app/webauth/[requestCode]/page.tsx b/frontend/app/webauth/[requestCode]/page.tsx index 67b9d609f..b066404b7 100644 --- a/frontend/app/webauth/[requestCode]/page.tsx +++ b/frontend/app/webauth/[requestCode]/page.tsx @@ -9,8 +9,9 @@ import OnboardingNavbar from '@/components/layout/OnboardingNavbar' import { RoleLabel } from '@/components/users/RoleLabel' import { organisationContext } from '@/contexts/organisationContext' import { CreateNewUserToken } from '@/graphql/mutations/users/createUserToken.gql' - +import { CliCommand } from '@/components/dashboard/CliCommand' import { copyToClipBoard } from '@/utils/clipboard' +import { isCloudHosted, getHostname } from '@/utils/appConfig' import { OrganisationKeyring, getUserKxPublicKey, @@ -321,56 +322,101 @@ export default function WebAuth({ params }: { params: { requestCode: string } })

- CLI Authentication error + CLI Authentication failed

- Something went wrong authenticating with the CLI. Please try the following steps: + CLI authentication could not be completed from this page. Please follow these steps to retry the authentication:

-
    -
  1. - Retry authentication with{' '} - handleCopy('phase auth --mode token')} - > - phase auth --mode token - - . -
    2. -
  2. Paste the following token into your terminal when prompted:
    3. -
-
-
-
- user token -
- {userToken && ( - - )} -
+
+
+
+ + 1 + +

+ Exit out of the CLI by pressing Ctrl+C +

- {userToken} +
+ +
+
+ + 2 + +

Retry authentication manually via the token mode:

+
+ +
+ {isCloudHosted() ? ( +
    +
  • + Choose your Phase instance type as: ☁️ Phase Cloud +
    • +
  • + Enter your email address: handleCopy(session?.user?.email || '')}>{session?.user?.email} +
    • +
+ ) : ( +
    +
  • + Choose your Phase instance type as: 🛠️ Self Hosted +
    • +
  • + Enter the host: handleCopy(getHostname() || '')}>{getHostname()} +
    • +
  • + Enter your email address: handleCopy(session?.user?.email || '')}>{session?.user?.email} +
    • +
+ )} +
+
+
+
+ + 3 + +

+ When prompted, paste your Personal Access Token (PAT): +

+
+
-
-
Still having issues? Get in touch.
- )} diff --git a/frontend/components/dashboard/CliCommand.tsx b/frontend/components/dashboard/CliCommand.tsx index 5137e7a93..06a0ead1e 100644 --- a/frontend/components/dashboard/CliCommand.tsx +++ b/frontend/components/dashboard/CliCommand.tsx @@ -1,22 +1,34 @@ import CopyButton from 'components/common/CopyButton' -export const CliCommand = (props: { command: string; comment?: string; prefix?: string }) => { - const prefix = props.prefix || 'phase' +export const CliCommand = (props: { + command: string; + comment?: string; + prefix?: string; + wrap?: boolean; +}) => { + const prefix = props.prefix ?? 'phase' + const wrap = props.wrap ?? false - const prefixedCommand = `${prefix} ${props.command}` + const prefixedCommand = prefix ? `${prefix} ${props.command}` : props.command return (
- 
-        {prefix} {props.command}{' '}
-        {props.comment && (
-          
-            {'#'}
-            {props.comment}
-          
-        )}
-
-
+
+ 
+          {prefix && (
+            {prefix}
+          )}
+          {prefix && ' '}
+          {props.command}{' '}
+          {props.comment && (
+            
+              {'#'}
+              {props.comment}
+            
+          )}
+
+
+