Improve routing

src/browser/pages/browse.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-import { RouteComponentProps } from "react-router"
 import { FilesResponse } from "../../common/api"
 import { HttpError } from "../../common/http"
 import { getFiles } from "../api"
@@ -8,14 +7,14 @@ import { RequestError } from "../components/error"
 /**
  * File browser.
  */
-export const Browse: React.FunctionComponent<RouteComponentProps> = (props) => {
+export const Browse: React.FunctionComponent = (props) => {
   const [response, setResponse] = React.useState<FilesResponse>()
   const [error, setError] = React.useState<HttpError>()
 
   React.useEffect(() => {
     getFiles()
       .then(setResponse)
-      .catch((e) => setError(e.message))
+      .catch(setError)
   }, [props])
 
   return (

src/browser/pages/home.tsx

@@ -1,22 +1,20 @@
 import * as React from "react"
-import { RouteComponentProps } from "react-router"
+import { Application } from "../../common/api"
 import { authenticate } from "../api"
 
-export const Home: React.FunctionComponent<RouteComponentProps> = (props) => {
+export interface HomeProps {
+  app?: Application
+}
+
+export const Home: React.FunctionComponent<HomeProps> = (props) => {
   React.useEffect(() => {
-    authenticate()
-      .then(() => {
-        // TEMP: Always redirect to VS Code.
-        props.history.push("./vscode/")
-      })
-      .catch(() => {
-        props.history.push("./login/")
-      })
+    authenticate().catch(() => undefined)
   }, [])
 
   return (
     <div className="orientation-guide">
       <div className="welcome">Welcome to code-server.</div>
+      {props.app && !props.app.loaded ? <div className="loader">loading...</div> : undefined}
     </div>
   )
 }

src/browser/pages/login.css

@@ -4,9 +4,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  font-weight: 700;
   justify-content: center;
-  text-transform: uppercase;
 }
 
 .login-form > .field {
@@ -16,13 +14,13 @@
 }
 
 .login-form > .field-error {
-  margin-top: 10px;
+  margin-top: 1em;
 }
 
 .login-form > .field > .input {
   border: 1px solid #b6b6b6;
   box-sizing: border-box;
-  padding: 10px;
+  padding: 1em;
   flex: 1;
 }
 
@@ -31,5 +29,11 @@
   border: 1px solid #b6b6b6;
   box-sizing: border-box;
   margin-left: -1px;
-  padding: 10px 20px;
+  padding: 1em 2em;
+}
+
+.login-header {
+  align-items: center;
+  color: #b6b6b6;
+  margin-bottom: 1em;
 }

src/browser/pages/login.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-import { RouteComponentProps } from "react-router"
 import { HttpError } from "../../common/http"
 import { authenticate } from "../api"
 import { FieldError } from "../components/error"
@@ -7,35 +6,25 @@ import { FieldError } from "../components/error"
 /**
  * Login page. Will redirect on success.
  */
-export const Login: React.FunctionComponent<RouteComponentProps> = (props) => {
+export const Login: React.FunctionComponent = () => {
   const [password, setPassword] = React.useState<string>("")
   const [error, setError] = React.useState<HttpError>()
 
-  function redirect(): void {
-    // TEMP: Always redirect to VS Code.
-    console.log("is authed")
-    props.history.push("../vscode/")
-    // const params = new URLSearchParams(window.location.search)
-    // props.history.push(params.get("to") || "/")
-  }
-
   async function handleSubmit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
     event.preventDefault()
-    authenticate({ password })
-      .then(redirect)
-      .catch(setError)
+    authenticate({ password }).catch(setError)
   }
 
   React.useEffect(() => {
-    authenticate()
-      .then(redirect)
-      .catch(() => {
-        // Do nothing; we're already at the login page.
-      })
+    authenticate().catch(() => undefined)
   }, [])
 
   return (
     <form className="login-form" onSubmit={handleSubmit}>
+      <div className="login-header">
+        <div className="main">Welcome to code-server</div>
+        <div className="sub">Please log in below</div>
+      </div>
       <div className="field">
         <input
           autoFocus

src/browser/pages/missing.css

@@ -0,0 +1,8 @@
+.missing-message {
+  align-items: center;
+  color: #b6b6b6;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+}

src/browser/pages/missing.tsx

@@ -0,0 +1,9 @@
+import * as React from "react"
+
+export const Missing: React.FunctionComponent = () => {
+  return (
+    <div className="missing-message">
+      <div className="message">404</div>
+    </div>
+  )
+}