Move things around

web/client.js

@@ -1,103 +1,11 @@
 /* eslint-env browser */
-import { html, render, useState } from 'uland-isomorphic'
+import { html, render } from 'uland-isomorphic'
 import { useUser } from './hooks/useUser.js'
-import { useLSP } from './hooks/useLSP.js'
 
 export function homepage () {
-  const state = useLSP()
   const { user, loading, error: userError } = useUser()
-  const [loggingOut, setLoggingOut] = useState(false)
-  const [loggingIn, setLoggingIn] = useState(false)
-
-  // console.log({ state, user, loading, userError })
-
-  async function logout (ev) {
-    ev.preventDefault()
-    setLoggingOut(true)
-
-    try {
-      await fetch(`${state.apiUrl}/logout`, {
-        method: 'post',
-        credentials: 'include'
-      })
-
-      state.user = null
-    } catch (err) {
-      console.log(err)
-    } finally {
-      setLoggingOut(false)
-    }
-  }
-
-  async function login (ev) {
-    ev.preventDefault()
-    setLoggingIn(true)
-
-    const user = ev.currentTarget.user.value
-    const password = ev.currentTarget.password.value
-
-    try {
-      const response = await fetch(`${state.apiUrl}/login`, {
-        method: 'post',
-        headers: {
-          'content-type': 'application/json'
-        },
-        body: JSON.stringify({ user, password }),
-        credentials: 'include'
-      })
-
-      if (response.ok && response.status === 201) {
-        const body = await response.json()
-        state.user = body?.user
-      } else {
-        throw new Error(`${response.status} ${response.statusText} ${await response.text()}`)
-      }
-    } catch (err) {
-      console.log(err)
-    } finally {
-      setLoggingIn(false)
-    }
-  }
 
   return html`
-    ${!user
-      ? html`
-        <div>
-        <form class="login-form" id="login-form" onsubmit=${login}>
-        <fieldset ?disabled=${loggingIn}>
-          <legend>Log in:</legend>
-          <div>
-            <label>
-              Email or Username:
-              <input type="text" name="user" />
-            </label>
-          </div>
-          <div>
-            <label>
-              Password:
-              <input type="password" name="password">
-            </label>
-          </div>
-          <div class="button-cluster">
-            <input name="submit-button" type="submit">
-          </div>
-          <div class="error-box"></div>
-        </fieldset>
-      </form>
-      </div>
-      <div>
-        <a href='/register'>Register</a>
-      </div>
-      `
-      : null
-    }
-    ${user
-      ? html`
-        <div>Logged in as ${user.username}</div>
-        <div><button onclick=${logout} ?disabled=${loggingOut}>Logout</button>
-        `
-      : null
-    }
     ${userError
       ? html`<div>${JSON.stringify(userError, null, ' ')}</div>`
       : null
@@ -107,6 +15,10 @@ export function homepage () {
         ? html`<div>loading</div>`
         : null
     }
+    <div class="bc-placeholder">
+      <div>${user ? `Hello ${user.username}` : 'Coming soon'}</div>
+      <div class="bc-big-bread">🥖</div>
+    </div>
 `
 }
 

web/components/header.js

@@ -0,0 +1,57 @@
+import { html } from 'uland-isomorphic'
+import { useUser } from '../hooks/useUser.js'
+import { useWindow } from '../hooks/useWindow.js'
+import { useLSP } from '../hooks/useLSP'
+
+export function header () {
+  const { user, loading } = useUser()
+  const window = useWindow()
+  const state = useLSP()
+
+  return html`
+  <nav class="bc-header-nav">
+    <div class="bc-header-start">
+      <div class="round">
+        <span>🥖 </span>
+        <a href="/">Breadcrum</a>
+      </div>
+      ${user ? html`<div>(${user.username})</div>` : null}
+    </div>
+    <div class="bc-header-end">
+      ${loading
+        ? html`<div>...</div>`
+        : !user
+          ? html`
+            ${
+              window?.location?.pathname !== '/login/'
+                ? html`
+                  <div>
+                    <a href='/login'>login</a>
+                  </div>
+                `
+                : null
+            }
+            ${
+              window?.location?.pathname !== '/login/' && window?.location?.pathname !== '/register/' && !state.disableRegistration
+                ? html`
+                  <div>/</div>
+                `
+                : null
+            }
+            ${
+              window?.location?.pathname !== '/register/' && !state.disableRegistration
+                ? html`
+                  <div>
+                    <a href='/register'>register</a>
+                  </div>
+                `
+                : null
+            }`
+          : html`
+            <div><a href='/logout'>logout</a></div>`
+      }
+
+    </div>
+  </nav>
+  `
+}

web/global.client.js

@@ -1,5 +1,7 @@
 import { toggleTheme } from 'mine.css'
 import 'fragmentions'
+import { render } from 'uland-isomorphic'
+import { header } from './components/header.js'
 
 window.toggleTheme = toggleTheme
 
@@ -13,3 +15,7 @@ async function requestStorageAccess () {
 }
 
 requestStorageAccess()
+
+if (typeof window !== 'undefined') {
+  render(document.querySelector('.bc-header'), header)
+}

web/global.css

@@ -33,6 +33,16 @@ _::-webkit-full-page-media, _:future, :root .bc-page-container {
   border-bottom: dotted 1px var(--accent-midground);
 }
 
+.bc-header-nav {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bc-header-start,.bc-header-end {
+  display: flex;
+  gap: 0.2em;
+}
+
 .bc-main {
   flex-grow: 1;
   width: 100%;

web/global.vars.js

@@ -1,5 +1,6 @@
 export default async () => {
   return {
-    siteName: 'breadcrum.net'
+    siteName: 'breadcrum.net',
+    disableRegistration: true
   }
 }

web/hooks/useWindow.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'uland-isomorphic'
+
+export function useWindow () {
+  const wr = (typeof window !== 'undefined') ? window : null
+  const [w, setW] = useState(wr)
+
+  useEffect(() => {
+    setW(wr)
+  }, [wr])
+
+  return w
+}

web/lib/state.js

@@ -3,7 +3,8 @@ import lsp from 'local-storage-proxy'
 export const state = lsp('breadcrum', {
   defaults: {
     user: null,
-    apiUrl: '/api'
+    apiUrl: '/api',
+    disableRegistration: true
   },
   lspReset: 1
 })

web/login/client.js

@@ -1 +1,91 @@
-console.log('login page')
+/* eslint-env browser */
+import { html, render, useState, useEffect } from 'uland-isomorphic'
+import { useUser } from '../hooks/useUser.js'
+import { useLSP } from '../hooks/useLSP.js'
+
+export function loginPage () {
+  const state = useLSP()
+  const { user, loading, error: userError } = useUser()
+  const [loggingIn, setLoggingIn] = useState(false)
+
+  useEffect(() => {
+    if (user && !loading) window.location.replace('/')
+  }, [user])
+
+  async function login (ev) {
+    ev.preventDefault()
+    setLoggingIn(true)
+
+    const user = ev.currentTarget.user.value
+    const password = ev.currentTarget.password.value
+
+    try {
+      const response = await fetch(`${state.apiUrl}/login`, {
+        method: 'post',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: JSON.stringify({ user, password }),
+        credentials: 'include'
+      })
+
+      if (response.ok && response.status === 201) {
+        const body = await response.json()
+        state.user = body?.user
+      } else {
+        throw new Error(`${response.status} ${response.statusText} ${await response.text()}`)
+      }
+    } catch (err) {
+      console.log(err)
+    } finally {
+      setLoggingIn(false)
+    }
+  }
+
+  return html`
+    ${!user
+      ? html`
+        <div>
+        <form class="login-form" id="login-form" onsubmit=${login}>
+        <fieldset ?disabled=${loggingIn}>
+          <legend>Log in:</legend>
+          <div>
+            <label>
+              Email or Username:
+              <input type="text" name="user" />
+            </label>
+          </div>
+          <div>
+            <label>
+              Password:
+              <input type="password" name="password">
+            </label>
+          </div>
+          <div class="button-cluster">
+            <input name="submit-button" type="submit">
+          </div>
+          <div class="error-box"></div>
+        </fieldset>
+      </form>
+      </div>
+      `
+      : html`
+        <div>Logged in as ${user.username}</div>
+        <div>Redirecting to <a href="/">/</a></button>
+        `
+    }
+    ${userError
+      ? html`<div>${JSON.stringify(userError, null, ' ')}</div>`
+      : null
+    }
+    ${
+      loading
+        ? html`<div>loading</div>`
+        : null
+    }
+`
+}
+
+if (typeof window !== 'undefined') {
+  render(document.querySelector('.bc-main'), loginPage)
+}

web/login/page.js

@@ -1,7 +1,8 @@
 import { html } from 'uland-isomorphic'
+import { loginPage } from './client.js'
 
 export default async function () {
   return html`
-  <div>login page page</div>
+  ${loginPage()}
   `
 }

web/logout/client.js

@@ -0,0 +1,46 @@
+/* eslint-env browser */
+import { html, render, useEffect } from 'uland-isomorphic'
+import { useUser } from '../hooks/useUser.js'
+import { useLSP } from '../hooks/useLSP.js'
+
+export function logout () {
+  const state = useLSP()
+  const { user } = useUser()
+
+  useEffect(() => {
+    const logout = async () => {
+      try {
+        await fetch(`${state.apiUrl}/logout`, {
+          method: 'post',
+          credentials: 'include'
+        })
+      } finally {
+        state.user = null
+        window.location.replace('/')
+      }
+    }
+
+    logout().catch(err => {
+      console.error(err)
+    })
+  }, [])
+
+  return html`
+    ${!user
+      ? html`
+        <div>
+          Logged out
+        </div>
+      `
+      : html`
+        <div>
+          Logging out of ${user.username}
+        </div>
+      `
+    }
+`
+}
+
+if (typeof window !== 'undefined') {
+  render(document.querySelector('.bc-main'), logout)
+}

web/logout/page.js

@@ -0,0 +1,6 @@
+import { html } from 'uland-isomorphic'
+import { logout } from './client.js'
+
+export default async function () {
+  return html`${logout()}`
+}