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

2018-09-16 18:34:20 +02:00
parent ff4f4549e4
commit bde67f5617
6 changed files with 91 additions and 5 deletions
@@ -0,0 +1,16 @@
+module.exports = class {
+  onCreate() {
+    this.state = {
+      loggingIn: false,
+      loggingOut: false,
+    }
+  }
+
+  loginClicked() {
+    this.state.loggingIn = true
+  }
+
+  logoutClicked() {
+    this.state.loggingOut = true
+  }
+}
@@ -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>
@@ -0,0 +1,5 @@
+module.exports = class {
+  closeModal() {
+    this.emit("close")
+  }
+}
@@ -0,0 +1,11 @@
+<if(input.enabled)>
+  <div class=["overlay", (input.notification ? "notification-overlay" : "normal-overlay")]>
+    <div class="overlay-options color-menu">
+      <div if(input.closable) on-click("closeModal")>X</div>
+    </div>
+    <h1 class="color-primary" if(input.title)>${input.title}</h1>
+    <div class="modal color-text">
+      <include(input.renderBody) />
+    </div>
+  </div>
+</if>
@@ -0,0 +1,47 @@
+div.overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding-top: 4em;
+  z-index: 999;
+
+  background-color: rgba(0, 0, 0, 0.75);
+
+  overflow-y: auto;
+
+  h1 {
+    text-align: center;
+  }
+  
+  div.modal {
+    width: 60ch;
+    max-width: 95%;
+    margin: auto;
+  }
+
+  div.overlay-options {
+    width: 60ch;
+    max-width: 95%;
+    margin: auto;
+    text-align: right;
+
+    div {
+      opacity: 0.75;
+      user-select: none;
+      cursor: pointer;
+    }
+    div:hover {
+      opacity: 1;
+    }
+  }
+}
+
+div.overlay.notification-overlay {
+  padding-top: 20%;
+
+  div.modal {
+    text-align: center;
+  }
+}