Shenanigans required for serving console from nexus

.github/workflows/packer.yaml

@@ -46,7 +46,7 @@ jobs:
           CLOUDFLARE_TOKEN: ${{secrets.CLOUDFLARE_TOKEN}}
           SSL_CERT: ${{secrets.SSL_CERT}}
           SSL_KEY: ${{secrets.SSL_KEY}}
-          API_VERSION: 561d8d6b19c01a273b6b039628d1ff7b6b295b4e
+          API_VERSION: 439169b9522852b0582634b692260c7b8853eff2
 
       # get the image information from gcloud
       - name: Get image information

app/docs/nexus-openapi.json

@@ -174,6 +174,28 @@
         }
       }
     },
+    "/login": {
+      "post": {
+        "operationId": "spoof_login",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/LoginParams"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {}
+      }
+    },
+    "/logout": {
+      "post": {
+        "operationId": "logout",
+        "responses": {}
+      }
+    },
     "/organizations": {
       "get": {
         "description": "List all organizations.",
@@ -3110,6 +3132,15 @@
         "minLength": 1,
         "maxLength": 11
       },
+      "LoginParams": {
+        "type": "object",
+        "properties": {
+          "username": {
+            "type": "string"
+          }
+        },
+        "required": ["username"]
+      },
       "Name": {
         "title": "A name used in the API",
         "description": "Names must begin with a lower case ASCII letter, be composed exclusively of lowercase ASCII, uppercase ASCII, numbers, and '-', and may not end with a '-'.",

app/pages/LoginPage.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { useNavigate } from 'react-router'
+
+import { useApiMutation } from '@oxide/api'
+import { Button, Warning12Icon, Success16Icon } from '@oxide/ui'
+import { useToast } from '../hooks'
+
+/**
+ * Placeholder login page for demo purposes.
+ *
+ * The demo login form is only in the console bundle for the convenience of
+ * using existing tooling and using the generated API client. In the real rack,
+ * login will go through the customer's IdP; no form controlled by us will be
+ * involved. If Nexus *does* end up serving a login form, e.g., for use by
+ * admins before the IdP is set up, that will be a separate bundle with minimal
+ * JS (ideally so minimal we could inline it in the HTML response) and it would
+ * not use the generated API client at all. It could even use an HTML form POST.
+ *
+ * Login and logout endpoints are only a temporary addition to the OpenAPI spec.
+ */
+export default function LoginPage() {
+  const navigate = useNavigate()
+  const addToast = useToast()
+  const loginPost = useApiMutation('spoofLogin', {
+    onSuccess: () => {
+      addToast({
+        title: 'Logged in',
+        icon: <Success16Icon />,
+        timeout: 4000,
+      })
+      navigate('/')
+    },
+    onError: () => {
+      addToast({
+        title: 'Bad credentials',
+        icon: <Warning12Icon />,
+        variant: 'error',
+        timeout: 4000,
+      })
+    },
+  })
+
+  const logout = useApiMutation('logout', {
+    onSuccess: () => {
+      addToast({
+        title: 'Logged out',
+        icon: <Success16Icon />,
+        timeout: 4000,
+      })
+    },
+  })
+  return (
+    <div className="w-full justify-center flex">
+      <div className="my-48 w-96 space-y-4">
+        <h3 className="text-display-xl mb-2 text-center">Log in as</h3>
+        <Button
+          type="submit"
+          variant="solid"
+          className="w-full"
+          disabled={loginPost.isLoading}
+          onClick={() =>
+            loginPost.mutate({ loginParams: { username: 'privileged' } })
+          }
+        >
+          Privileged
+        </Button>
+        <Button
+          type="submit"
+          variant="dim"
+          className="w-full"
+          disabled={loginPost.isLoading}
+          onClick={() =>
+            loginPost.mutate({ loginParams: { username: 'unprivileged' } })
+          }
+        >
+          Unprivileged
+        </Button>
+        <Button
+          type="submit"
+          variant="ghost"
+          className="w-full"
+          disabled={loginPost.isLoading}
+          onClick={() =>
+            loginPost.mutate({ loginParams: { username: 'other' } })
+          }
+        >
+          Bad Request
+        </Button>
+        <Button
+          type="submit"
+          variant="link"
+          className="w-full"
+          disabled={loginPost.isLoading}
+          onClick={() => logout.mutate({})}
+        >
+          Log out
+        </Button>
+      </div>
+    </div>
+  )
+}

app/pages/OrgPage.tsx

@@ -22,7 +22,7 @@ export default function OrgPage() {
       </PageHeader>
 
       <div className="space-x-4">
-        <Link to={`/orgs/${orgName}/projects/new`} className={buttonStyle()}>
+        <Link to="projects/new" className={buttonStyle()}>
           Create project
         </Link>
       </div>

app/pages/ProjectsPage.tsx

@@ -46,10 +46,7 @@ const ProjectsPage = () => {
       <PageHeader className="mb-10">
         <PageTitle icon={<Folder24Icon title="Projects" />}>Projects</PageTitle>
         <div className="flex items-center">
-          <Link
-            to={`/orgs/${orgName}/projects/new`}
-            className={buttonStyle({ variant: 'ghost' })}
-          >
+          <Link to="new" className={buttonStyle({ variant: 'ghost' })}>
             New Project
           </Link>
           <button className="p-3 flex items-center">
@@ -66,10 +63,7 @@ const ProjectsPage = () => {
           >
             <section className="p-4">
               <header className="mb-12">
-                <Link
-                  to={`/orgs/${orgName}/projects/${item.name}`}
-                  className="text-display-xl"
-                >
+                <Link to={item.name} className="text-display-xl">
                   {item.name}
                 </Link>
               </header>

app/routes.tsx

@@ -19,6 +19,7 @@ function lazyLoad(importFunc: () => Promise<{ default: React.ComponentType }>) {
   )
 }
 
+import LoginPage from './pages/LoginPage'
 import InstanceCreatePage from './pages/instances/create'
 import InstanceStorage from './pages/instances/Storage'
 // Recharts is 350 KB
@@ -63,6 +64,8 @@ const instanceCrumb = (m: RouteMatch) => m.params.instanceName!
 /** React Router route config in JSX form */
 export const routes = (
   <Routes>
+    <Route path="login" element={<LoginPage />} />
+
     <Route
       index
       element={<Navigate to="/orgs/maze-war/projects" replace={true} />}