Add DeviceTrustWeb passthrough component #40608
Conversation
avatus
added
the
no-changelog
| DownloadLink, | ||
| } from 'shared/components/DownloadConnect/DownloadConnect'; | ||
|
|
||
| export const DeviceTrustConnectPassthrough = ({ |
There was a problem hiding this comment.
I added this component to the shared package because I will also be exporting the dialog that will be used in Connect to authorize in the final PR. I can be convinced otherwise
web/packages/shared/components/AuthorizeDeviceWeb/AuthorizeDeviceWeb.story.tsx
Show resolved
Hide resolved
web/packages/shared/components/AuthorizeDeviceWeb/AuthorizeDeviceWeb.tsx
Show resolved
Hide resolved
web/packages/shared/components/AuthorizeDeviceWeb/AuthorizeDeviceWeb.tsx
Outdated
Show resolved
Hide resolved
web/packages/shared/components/AuthorizeDeviceWeb/AuthorizeDeviceWeb.tsx
Outdated
Show resolved
Hide resolved
web/packages/shared/components/AuthorizeDeviceWeb/AuthorizeDeviceWeb.tsx
Outdated
Show resolved
Hide resolved
| <Box | ||
| css={` | ||
| text-align: center; | ||
| width: 100%; | ||
| position: absolute; | ||
| bottom: 24px; | ||
| `} | ||
| > |
There was a problem hiding this comment.
I see people do this a lot - does const Whatever = styled(Box)``; not work?
There was a problem hiding this comment.
It does work, and I suppose it can be better. I've never been a fan of having what looks like a "component" but really its just wrapped css somewhere else in the file. I prefer seeing the css explicitly in the thing I'm designing. However, I can update if we wanna keep a standard
There was a problem hiding this comment.
I'm the opposite, I prefer styled components wrap other styled components instead of inline CSS in the JSX (otherwise we might as well use Tailwind)
There was a problem hiding this comment.
we might as well use Tailwind
Don't tease me with a good time.
I'll update to wrapped. I think devving with the inline works and once I'm happy with changes, moving to a wrapped is a good workflow for me 👍
There was a problem hiding this comment.
I wrapped them all except link since it was a one-liner
web/packages/shared/components/AuthorizeDeviceWeb/AuthorizeDeviceWeb.tsx
Outdated
Show resolved
Hide resolved
| > | ||
| continue without device trust{' '} | ||
| </Link> | ||
| but you will not be able to connect to Teleport protected resources. |
There was a problem hiding this comment.
"Teleport protected resources" seems to me like everything connected to Teleport
There was a problem hiding this comment.
Agreed. Kenny wrote this, let me reach out to him and ask. Porbably something as simple as "you will not be able to connect to resources that require Device Trust"
web/packages/shared/components/AuthorizeDeviceWeb/AuthorizeDeviceWeb.tsx
Outdated
Show resolved
Hide resolved
| </Flex> | ||
| <Box> | ||
| <Text fontSize={3}> | ||
| Don't have Teleport Connect yet?{' '} |
public-teleport-github-review-bot
bot
removed the request for review
from rudream
avatus
force-pushed
the
avatus/passthrough
branch
from
5380177 to
e159e84
Compare
figma link
This PR adds the "passthrough page" component for the device trust web authentication piece. This page will be what users see after logging into the web UI and a device trust token is returned in the response.
The final PR will be actually creating the route/feature that implements this component in e and passes it off to Connect but that will come together once this PR, #40438, and #40420 are in
Also, i snuck a prop update to our TopBar into this PR. the topbar will be displayed but with no components besides the logo so I added an optional prop to hide everything in the top bar but the Logo. that way, the logo functions the same way on this page as any other page (responsiveness and what not)
https://github.com/gravitational/teleport.e/issues/3236