extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-07-01 15:00:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

getting started modal (#835)

Browse Source
This commit is contained in:
Michael Quigley
2025-02-06 12:01:34 -05:00
parent 8a0a6f5400
commit ab9a4fe08b
2 changed files with 72 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
ui/src/GettingStartedModal.tsx
View File

@ -1,5 +1,7 @@
import {modalStyle} from "./styling/theme.ts";
import {Box, Grid2, Modal, Typography} from "@mui/material";
import ClipboardText from "./ClipboardText.tsx";
import useApiConsoleStore from "./model/store.ts";
interface GettingStartedModalProps {
close: () => void;
@ -7,11 +9,79 @@ interface GettingStartedModalProps {
}
const GettingStartedModal = ({ close, isOpen }: GettingStartedModalProps) => {
const user = useApiConsoleStore(store => store.user);
return (
<Modal open={isOpen} onClose={close}>
<Box sx={{ ...modalStyle }}>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography variant="h5"><strong>Getting Started with zrok</strong></Typography>
<Typography variant="h5"><strong>Getting Started Quickly</strong></Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<h4>Step 1: Download a zrok Binary</h4>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
The official zrok binaries are published on GitHub:
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<a href="https://github.com/openziti/zrok/releases">https://github.com/openziti/zrok/releases</a>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<h4>Step 2: Enable Your Operating System Shell</h4>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
Create a zrok "environment" by using the <code>zrok enable</code> command:
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<pre>
$ zrok enable {user.token} <ClipboardText text={"zrok enable " + user.token}/>
</pre>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<h4>Step 3: Share</h4>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
Use the <code>zrok share</code> command to share network connectivity and files (see the
<code>--help</code> in the CLI for details: <code>zrok share --help</code>:
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<pre>
$ zrok share public --backend-mode web . <ClipboardText text={"zrok share public --backend-mode web ."} />
</pre>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
Share the generated URL, allowing secure access to the current directory.
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
<h4>Need More Help?</h4>
</Typography>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography>
Visit the <a href="https://docs.zrok.io/docs/getting-started" target="_">Getting Started Guide</a>
<span> </span>in the <a href="https://docs.zrok.io" target="_">zrok Documentation</a> for more help.
</Typography>
</Grid2>
</Box>
</Modal>

2
ui/src/NavBar.tsx
View File

@ -89,8 +89,8 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
<Button color="inherit" onClick={handleClick}>{ visualizer ? <VisualizerIcon /> : <TabularIcon /> }</Button>
</Tooltip>
</Grid2>
{ !nodes || nodes.length > 1 ? helpButton : gettingStartedButton }
{ limited ? limitedIndicator : null }
{ !nodes || nodes.length > 1 ? helpButton : gettingStartedButton }
<Grid2 display="flex" justifyContent="right">
<Tooltip title="Logout">
<Button color="inherit" onClick={logout}><LogoutIcon /></Button>