Fix instructions for Manual steps (#196)

* Fix Manual steps
gravitational · Nov 14, 2020 · 7b8522d · 7b8522d
1 parent 36cd631
commit 7b8522d
Show file tree

Hide file tree

Showing 12 changed files with 196 additions and 112 deletions.
diff --git a/packages/teleport/src/Apps/AddApp/AddApp.tsx b/packages/teleport/src/Apps/AddApp/AddApp.tsx
@@ -16,11 +16,11 @@
 
 import React from 'react';
 import { Flex } from 'design';
-import * as Icons from 'design/Icon';
 import Dialog, { DialogTitle } from 'design/Dialog';
 import useTeleport from 'teleport/useTeleport';
-import { TabIcon } from 'teleport/components/Tabs';
 import Manually from './Manually';
+import * as Icons from 'design/Icon';
+import { TabIcon } from 'teleport/components/Tabs';
 import Automatically from './Automatically';
 import useAddApp, { State } from './useAddApp';
 

diff --git a/packages/teleport/src/Apps/AddApp/Automatically/Automatically.tsx b/packages/teleport/src/Apps/AddApp/Automatically/Automatically.tsx
@@ -16,14 +16,21 @@
 
 import React, { KeyboardEvent } from 'react';
 import TextSelectCopy from 'teleport/components/TextSelectCopy';
-import { Text, Flex, Alert, ButtonSecondary, ButtonPrimary } from 'design';
+import {
+  Link,
+  Text,
+  Flex,
+  Alert,
+  ButtonSecondary,
+  ButtonPrimary,
+} from 'design';
 import Validation, { Validator } from 'shared/components/Validation';
 import FieldInput from 'shared/components/FieldInput';
 import { DialogContent, DialogFooter } from 'design/Dialog';
 import { Attempt } from 'shared/hooks/useAttemptNext';
-
 export default function Automatically(props: Props) {
   const { cmd, onClose, attempt, expires } = props;
+
   const [name, setName] = React.useState('');
   const [uri, setUri] = React.useState('');
 
@@ -73,9 +80,13 @@ export default function Automatically(props: Props) {
             </Flex>
             {!cmd && (
               <Text mb="3">
-                Provide the name and URL of your application to generate a
-                script that will automatically install and configure the App
-                service on the server that can access your application.
+                Teleport can automatically set up application access. Provide
+                the name and URL of your application to generate our
+                auto-installer script.
+                <Text mt="1">
+                  This script will install the Teleport agent to provide secure
+                  access to your application.
+                </Text>
               </Text>
             )}
             {attempt.status === 'failed' && (
@@ -85,11 +96,11 @@ export default function Automatically(props: Props) {
               <>
                 <Text mb="3">
                   Use the script below to add an application to your cluster.{' '}
-                  <br />
                   The script will be valid for
                   <Text bold as="span">
                     {` ${expires}`}.
                   </Text>
+                  {renderUrl(name)}
                 </Text>
                 <TextSelectCopy text={cmd} mb={2} />
               </>
@@ -127,6 +138,18 @@ export default function Automatically(props: Props) {
   );
 }
 
+function renderUrl(name = '') {
+  const url = `https://${name}.${window.location.host}`;
+  return (
+    <Text>
+      This app will be available on {`  `}
+      <Link target="_blank" href={url}>
+        {`${url}`}
+      </Link>
+    </Text>
+  );
+}
+
 const requiredAppUri = value => () => {
   if (!value || value.length === 0) {
     return {

diff --git a/packages/teleport/src/Apps/AddApp/Manually/Manually.tsx b/packages/teleport/src/Apps/AddApp/Manually/Manually.tsx
@@ -18,10 +18,10 @@ import React from 'react';
 import { Text, Box, ButtonSecondary, Link } from 'design';
 import { DialogContent, DialogFooter } from 'design/Dialog';
 import TextSelectCopy from 'teleport/components/TextSelectCopy';
-import cfg from 'teleport/config';
 import * as links from 'teleport/services/links';
 
 export default function Manually({ version, onClose }: Props) {
+  const host = window.document.location.host;
   return (
     <>
       <DialogContent minHeight="240px" flex="0 0 auto">
@@ -50,7 +50,7 @@ export default function Manually({ version, onClose }: Props) {
             {' - Login to Teleport'}
             <TextSelectCopy
               mt="2"
-              text={`tsh login --proxy=${cfg.proxyCluster} --auth=local`}
+              text={`tsh login --proxy=${host} --auth=local`}
             />
           </Box>
           <Box mb={4}>
@@ -60,16 +60,30 @@ export default function Manually({ version, onClose }: Props) {
             {' - Generate a join token'}
             <TextSelectCopy mt="2" text="tctl tokens add --type=app" />
           </Box>
-          <Box>
+          <Box mb="4">
             <Text bold as="span">
               Step 4
             </Text>
-            {` - Install Teleport on target server, and start it with the following parameters`}
+            {` - Start the Teleport agent with the following parameters`}
             <TextSelectCopy
               mt="2"
-              text={`teleport start --roles=app --token=<generated-app-join-token> --auth-server=${cfg.proxyCluster} `}
+              text={`teleport start --roles=app --app-name=[example-app] --app-uri=http://localhost:8080 --token=[generated-join-token] --auth-server=${host} `}
             />
           </Box>
+          <Box>
+            <Text bold as="span"></Text>
+            {`* Note: For a self-hosted Teleport version, you may need to update DNS and obtain a TLS certificate for this application.
+            Learn more about application access `}
+            <Link
+              href={
+                'https://gravitational.com/teleport/docs/application-access/'
+              }
+              target="_blank"
+              mr="2"
+            >
+              here
+            </Link>
+          </Box>
         </Box>
       </DialogContent>
       <DialogFooter>