@@ -1,25 +1,37 @@
 import * as React from 'react'
+import { Dialog } from '@alifd/next'
 import useFetch from '../../services/hooks/useFetch'
 import * as TT from 'typings/tutorial'
 import LoadingPage from '../Loading'
 
 interface Props {
 url: string
 onLoadSummary(data: TT.Tutorial): void
+onReturnToSelection(): void
 }
 
 const LoadTutorialSummary = (props: Props) => {
 const { data, error, loading } = useFetch<TT.Tutorial>(props.url)
+if (!data) {
+return (
+<Dialog
+title="Tutorial Not Found"
+visible={true}
+closeable={false}
+footerActions={['ok']}
+onOk={props.onReturnToSelection}
+>
+No data returned for tutorial
+</Dialog>
+)
+}
 if (loading) {
 return <LoadingPage text="Loading tutorial summary..." />
 }
 if (error) {
 console.log(`Failed to load tutorial summary: ${error}`)
 return <div>Error loading summary</div>
 }
-if (!data) {
-return <div>No data returned for tutorial</div>
-}
 props.onLoadSummary(data)
 return null
 }

@@ -9,14 +9,23 @@ interface Props {
 onTutorialLoad(url: string): void
 }
 
+const urlRegex = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)\.json/
+
 const TutorialUrl = (props: Props) => {
 const [url, setUrl] = React.useState(props.defaultUrl)
+const [inputState, setInputState] = React.useState<undefined | 'success' | 'error'>()
+
 const onSubmit = (e: any) => {
 e.preventDefault()
 logger(`Tutorial url: ${url}`)
 props.onTutorialLoad(url)
 }
 
+const handleChange = (text: string) => {
+setUrl(text)
+!!text.match(urlRegex) ? setInputState('success') : setInputState('error')
+}
+
 return (
 // @ts-ignore seems to be an onSubmit event ts error in lib
 <Form style={{ maxWidth: '600px' }} onSubmit={onSubmit}>
@@ -25,11 +34,12 @@ const TutorialUrl = (props: Props) => {
 size="large"
 placeholder="https://raw.usercontent.com/coderoad/fcc-learn-npm/master/coderoad-config.json"
 defaultValue={props.defaultUrl}
-onChange={setUrl}
+onChange={handleChange}
+state={inputState}
 aria-label="input url path to coderoad config.json"
 />
 </FormItem>
-<Button htmlType="submit" type="primary">
+<Button htmlType="submit" type="primary" disabled={inputState !== 'success'}>
 Load
 </Button>{' '}
 &nbsp;&nbsp;

@@ -58,7 +58,9 @@ const SelectTutorialPage = (props: Props) => {
 setTab={setTab}
 />
 )}
-{page === 'loading' && url && <LoadTutorialSummary url={url} onLoadSummary={onLoadSummary} />}
+{page === 'loading' && url && (
+<LoadTutorialSummary url={url} onLoadSummary={onLoadSummary} onReturnToSelection={() => setPage('form')} />
+)}
 {page === 'summary' && data && <TutorialOverview onNext={onNext} tutorial={data} onClear={onClear} />}
 </div>
 )