ui: Added modal component, added a logging you in/out to try it.

marko/components/menu/component.js

@@ -0,0 +1,16 @@
+module.exports = class {
+  onCreate() {
+    this.state = {
+      loggingIn: false,
+      loggingOut: false,
+    }
+  }
+
+  loginClicked() {
+    this.state.loggingIn = true
+  }
+
+  logoutClicked() {
+    this.state.loggingOut = true
+  }
+}

marko/components/menu/index.marko

@@ -3,8 +3,15 @@
   <if(input.user != null)>
     <menu-gap />
     <menu-header>User</menu-header>
-    <menu-link if(!input.user.loggedIn) icon="L" href="/auth/login">Login</menu-link>
-    <menu-link if(input.user.loggedIn) icon="L" href="/auth/logout">Logout <span class="weak">(${input.user.name})</span></menu-link>
+    <menu-link if(!input.user.loggedIn) icon="L" href="/auth/login" on-click("loginClicked")>Login</menu-link>
+    <menu-link if(input.user.loggedIn) icon="L" href="/auth/logout" on-click("logoutClicked")>Logout <span class="weak">(${input.user.name})</span></menu-link>
+  
+    <modal enabled=state.loggingIn notification title="Logging you in..." on-close("closeModal")>
+      <p>You may be redirected to Auth0 if it's been a while.</p>
+    </modal>
+    <modal enabled=state.loggingOut notification title="Logging you out..." on-close("closeModal")>
+      <p>You can probably log back in without entering your info if you're quick.</p>
+    </modal>
   </if>
   <else-if(!input.allowNoUser)>
     <menu-blurb class="error">input.user is missing!</menu-blurb>