Update home page routing (#186)

closes #183

frontend/src/index.ts

@@ -214,7 +214,7 @@ export class App extends LiteElement {
           class="max-w-screen-lg mx-auto px-3 box-border h-12 flex items-center justify-between"
         >
           <div>
-            <a href="/archives" @click="${this.navLink}"
+            <a href="/" @click="${this.navLink}"
               ><h1 class="text-sm font-medium">
                 ${msg("Browsertrix Cloud")}
               </h1></a
@@ -384,15 +384,13 @@ export class App extends LiteElement {
         ></btrix-reset-password>`;
 
       case "home":
-        return html`<div class="w-full flex items-center justify-center">
+        return html`<btrix-home
-          <sl-button
+          class="w-full md:bg-neutral-50"
-            type="primary"
+          @navigate=${this.onNavigateTo}
-            size="large"
+          @logged-in=${this.onLoggedIn}
-            @click="${() => this.navigate("/log-in")}"
+          .authState=${this.authService.authState}
-          >
+          .userInfo="${this.userInfo}"
-            ${msg("Log In")}
+        ></btrix-home>`;
-          </sl-button>
-        </div>`;
 
       case "archives":
         return html`<btrix-archives
@@ -466,9 +464,10 @@ export class App extends LiteElement {
 
     this.authService.logout();
     this.authService = new AuthService();
+    this.userInfo = undefined;
 
     if (redirect) {
-      this.navigate("/");
+      this.navigate("/log-in");
     }
   }
 

frontend/src/pages/archives.ts

@@ -20,41 +20,11 @@ export class Archives extends LiteElement {
   @state()
   private archiveList?: ArchiveData[];
 
-  @state()
-  private isInviteComplete?: boolean;
-
   async firstUpdated() {
     this.archiveList = await this.getArchives();
   }
 
   render() {
-    if (!this.archiveList || !this.userInfo) {
-      return html`
-        <div class="flex items-center justify-center my-24 text-4xl">
-          <sl-spinner></sl-spinner>
-        </div>
-      `;
-    }
-
-    if (this.userInfo.isAdmin && !this.archiveList.length) {
-      return html`
-        <div class="bg-white">
-          <header
-            class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8"
-          >
-            <h1 class="text-2xl font-medium">${msg("Archives")}</h1>
-            <p class="mt-4 text-neutral-600">
-              ${msg("Invite users to start archiving.")}
-            </p>
-          </header>
-          <hr />
-        </div>
-        <main class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border">
-          ${this.renderAdminOnboarding()}
-        </main>
-      `;
-    }
-
     return html`
       <div class="bg-white">
         <header
@@ -65,7 +35,13 @@ export class Archives extends LiteElement {
         <hr />
       </div>
       <main class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border">
-        ${this.renderArchives()}
+        ${this.archiveList
+          ? this.renderArchives()
+          : html`
+              <div class="flex items-center justify-center my-24 text-4xl">
+                <sl-spinner></sl-spinner>
+              </div>
+            `}
       </main>
     `;
   }
@@ -106,32 +82,6 @@ export class Archives extends LiteElement {
     `;
   }
 
-  private renderAdminOnboarding() {
-    if (this.isInviteComplete) {
-      return html`
-        <div class="border rounded-lg bg-white p-4 md:p-8">
-          <h2 class="text-2xl font-medium mb-4">${msg("Invite a User")}</h2>
-          <sl-button @click=${() => (this.isInviteComplete = false)}
-            >${msg("Send another invite")}</sl-button
-          >
-        </div>
-      `;
-    }
-    return html`
-      <div class="border rounded-lg bg-white p-4 md:p-8">
-        <h2 class="text-2xl font-medium mb-4">${msg("Invite a User")}</h2>
-        <p class="mb-4 text-neutral-600 text-sm">
-          ${msg("Each user will manage their own archive.")}
-        </p>
-
-        <btrix-invite-form
-          .authState=${this.authState}
-          @success=${() => (this.isInviteComplete = true)}
-        ></btrix-invite-form>
-      </div>
-    `;
-  }
-
   async getArchives(): Promise<ArchiveData[]> {
     const data = await this.apiFetch("/archives", this.authState!);
 

frontend/src/pages/home.ts

@@ -0,0 +1,96 @@
+import { state, property } from "lit/decorators.js";
+import { msg, localized } from "@lit/localize";
+
+import type { AuthState } from "../utils/AuthService";
+import type { CurrentUser } from "../types/user";
+import LiteElement, { html } from "../utils/LiteElement";
+
+@localized()
+export class Home extends LiteElement {
+  @property({ type: Object })
+  authState?: AuthState;
+
+  @property({ type: Object })
+  userInfo?: CurrentUser;
+
+  @state()
+  private isInviteComplete?: boolean;
+
+  connectedCallback() {
+    if (this.authState) {
+      super.connectedCallback();
+    } else {
+      this.navTo("/log-in");
+    }
+  }
+
+  render() {
+    if (this.userInfo) {
+      if (this.userInfo.isAdmin === true) {
+        return this.renderLoggedInAdmin();
+      }
+
+      if (this.userInfo.isAdmin === false) {
+        return this.renderLoggedInNonAdmin();
+      }
+    }
+
+    return html`
+      <div class="bg-white" role="presentation">
+        <header
+          class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8"
+        >
+          <h1 class="text-2xl font-medium h-8"></h1>
+        </header>
+        <hr />
+      </div>
+    `;
+  }
+
+  private renderLoggedInAdmin() {
+    return html`
+      <div class="bg-white">
+        <header
+          class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8"
+        >
+          <h1 class="text-2xl font-medium">${msg("Welcome")}</h1>
+        </header>
+        <hr />
+      </div>
+      <main class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border">
+        <div class="border rounded-lg bg-white p-4 md:p-8">
+          <h2 class="text-xl font-medium mb-4">${msg("Invite a User")}</h2>
+
+          ${this.isInviteComplete
+            ? html`
+                <sl-button @click=${() => (this.isInviteComplete = false)}
+                  >${msg("Send another invite")}</sl-button
+                >
+              `
+            : html`
+                <p class="mb-2 text-neutral-600 text-sm">
+                  ${msg("Invite users to start archiving.")}
+                </p>
+                <p class="mb-4 text-neutral-600 text-sm">
+                  ${msg("Each user will manage their own archive.")}
+                </p>
+
+                <btrix-invite-form
+                  .authState=${this.authState}
+                  @success=${() => (this.isInviteComplete = true)}
+                ></btrix-invite-form>
+              `}
+        </div>
+      </main>
+    `;
+  }
+
+  private renderLoggedInNonAdmin() {
+    return html`
+      <btrix-archives
+        .authState="${this.authState}"
+        .userInfo="${this.userInfo}"
+      ></btrix-archives>
+    `;
+  }
+}

frontend/src/pages/index.ts

@@ -1,3 +1,6 @@
+import { Home } from "./home";
+customElements.define("btrix-home", Home);
+
 import(/* webpackChunkName: "sign-up" */ "./sign-up").then(({ SignUp }) => {
   customElements.define("btrix-sign-up", SignUp);
 });

frontend/src/routes.ts

@@ -21,4 +21,4 @@ export const ROUTES = {
   usersInvite: "/users/invite",
 } as const;
 
-export const DASHBOARD_ROUTE = ROUTES.archives;
+export const DASHBOARD_ROUTE = ROUTES.home;