Skip to content

Commit

Permalink
feat: webauth improvements (#404)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>

* Update frontend/app/webauth/[requestCode]/page.tsx

Co-authored-by: Rohan Chaturvedi <[email protected]>

* Update frontend/app/webauth/[requestCode]/page.tsx

Co-authored-by: Rohan Chaturvedi <[email protected]>

* Update frontend/app/webauth/[requestCode]/page.tsx

Co-authored-by: Rohan Chaturvedi <[email protected]>

* Update frontend/app/webauth/[requestCode]/page.tsx

Co-authored-by: Rohan Chaturvedi <[email protected]>

---------

Co-authored-by: Rohan Chaturvedi <[email protected]>
  • Loading branch information
@nimish-ks @rohan-chaturvedi
nimish-ks and rohan-chaturvedi authored Dec 7, 2024
1 parent 3602484 commit 22f4916
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 53 deletions.
126 changes: 86 additions & 40 deletions frontend/app/webauth/[requestCode]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -321,56 +322,101 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
<FaExclamationTriangle className="text-amber-500" size="40" />
</div>
<h1 className="text-black dark:text-white text-4xl font-semibold">
CLI Authentication error
CLI Authentication failed
</h1>
<p className="text-neutral-500 text-base">
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:
</p>
</div>

<ol className="text-left list-decimal list-inside text-black dark:text-white space-y-2">
<li>
Retry authentication with{' '}
<code
className="text-emerald-500 cursor-pointer"
onClick={() => handleCopy('phase auth --mode token')}
>
phase auth --mode token
</code>
.
</li>
<li>Paste the following token into your terminal when prompted:</li>
</ol>
<div className="py-0">
<div className="bg-blue-200 dark:bg-blue-400/10 shadow-inner p-3 rounded-lg">
<div className="w-full flex items-center justify-between pb-4">
<span className="uppercase text-xs tracking-widest text-gray-500">user token</span>
<div className="flex gap-4">
{userToken && (
<Button variant="outline" onClick={() => handleCopy(userToken)}>
<MdContentCopy /> Copy
</Button>
)}
</div>
<div className="space-y-6">
<div className="space-y-2">
<div className="flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-neutral-500/20 text-sm font-medium">
1
</span>
<p className="text-black dark:text-white">
Exit out of the CLI by pressing <code className="font-mono font-bold">Ctrl+C</code>
</p>
</div>
<code className="text-xs break-all text-blue-500 ph-no-capture">{userToken}</code>
</div>

<div className="space-y-6">
<div className="flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-neutral-500/20 text-sm font-medium">
2
</span>
<p className="text-black dark:text-white">Retry authentication manually via the <code className="font-mono font-bold">token</code> mode:</p>
</div>
<CliCommand command="auth --mode token" />
<div className="pl-8 text-neutral-500 text-sm space-y-2">
{isCloudHosted() ? (
<ul className="list-disc list-inside space-y-2">
<li>
Choose your Phase instance type as: <b>☁️ Phase Cloud</b>
</li>
<li>
Enter your email address: <code className="text-emerald-500 cursor-pointer font-mono" onClick={() => handleCopy(session?.user?.email || '')}>{session?.user?.email}</code>
</li>
</ul>
) : (
<ul className="list-disc list-inside space-y-2">
<li>
Choose your Phase instance type as: <b>🛠️ Self Hosted</b>
</li>
<li>
Enter the host: <code className="text-emerald-500 cursor-pointer font-mono" onClick={() => handleCopy(getHostname() || '')}>{getHostname()}</code>
</li>
<li>
Enter your email address: <code className="text-emerald-500 cursor-pointer font-mono" onClick={() => handleCopy(session?.user?.email || '')}>{session?.user?.email}</code>
</li>
</ul>
)}
</div>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-neutral-500/20 text-sm font-medium">
3
</span>
<p className="text-black dark:text-white">
When prompted, paste your Personal Access Token (PAT):
</p>
</div>
<CliCommand
command={userToken}
prefix=""
wrap={true}
/>
</div>
</div>

<div className="space-y-2 pt-20 text-center">
<div className="text-neutral-500 text-sm">Still having issues? Get in touch.</div>
<div className="flex items-center gap-2 justify-center">
<a href="https://slack.phase.dev" target="_blank" rel="noreferrer">
<Button variant="secondary">
<SiSlack /> Slack
</Button>
</a>
<a href="https://github.com/phasehq" target="_blank" rel="noreferrer">
<Button variant="secondary">
<SiGithub /> GitHub
</Button>
<div className="space-y-4 pt-16">
<div className="text-center">
<a
href="https://docs.phase.dev/cli/commands#auth"
target="_blank"
rel="noreferrer"
className="text-sm text-emerald-500 hover:text-emerald-400 transition ease"
>
Phase CLI authentication documentation
</a>
</div>
<div className="text-center">
<div className="text-neutral-500 text-sm">Still having issues? Get in touch.</div>
<div className="flex items-center gap-2 justify-center mt-2">
<a href="https://slack.phase.dev" target="_blank" rel="noreferrer">
<Button variant="secondary">
<SiSlack /> Slack
</Button>
</a>
<a href="https://github.com/phasehq" target="_blank" rel="noreferrer">
<Button variant="secondary">
<SiGithub /> GitHub
</Button>
</a>
</div>
</div>
</div>
</div>
)}
Expand Down
38 changes: 25 additions & 13 deletions frontend/components/dashboard/CliCommand.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="group relative rounded-lg border border-neutral-500/40 bg-zinc-300/50 dark:bg-zinc-800/50 p-4 text-left text-sm text-zinc-900 dark:text-zinc-100">
<pre className="whitespace-pre-wrap">
<span className="text-emerald-800 dark:text-emerald-300">{prefix}</span> {props.command}{' '}
{props.comment && (
<span className="text-neutral-500">
{'#'}
{props.comment}
</span>
)}
</pre>
<div className="absolute right-4 top-3.5 ">
<div className={`${!wrap ? 'overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-neutral-600' : ''}`}>
<pre className={`${wrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}>
{prefix && (
<span className="text-emerald-800 dark:text-emerald-300">{prefix}</span>
)}
{prefix && ' '}
{props.command}{' '}
{props.comment && (
<span className="text-neutral-500">
{'#'}
{props.comment}
</span>
)}
</pre>
</div>
<div className="absolute right-4 top-3.5">
<CopyButton value={prefixedCommand} />
</div>
</div>
Expand Down

0 comments on commit 22f4916

Please sign in to comment.