Adding a popup authentication option.

2020-10-28 05:11:47 +01:00
parent 2c4c87927d
commit 6b4ad81940
11 changed files with 267 additions and 87 deletions
--- a/views/src/popup/popup.hbs
+++ b/views/src/popup/popup.hbs
@ -0,0 +1,24 @@
+<html>
+
+
+<head>
+   <title>Popup Auth</title>
+   <meta charset="utf8" />
+   <meta name="viewport" content="width=device-width,initial-scale=1" />
+</head>
+
+<body>
+   <div class="card">
+      <div class="title">
+         <h1>Allow <span id="hostname" style="font-weight: bold;">LOADING...</span> to authenticate you?</h1>
+      </div>
+      <div>
+         <div style="text-align: right;">
+            <button onclick="allow()" class="mdc-button mdc-button--raised blue-button">Allow</button>
+            <button onclick="deny()" class="mdc-button mdc-button--raised blue-button">Deny</button>
+         </div>
+      </div>
+   </div>
+</body>
+
+</html>
--- a/views/src/popup/popup.js
+++ b/views/src/popup/popup.js
@ -0,0 +1,32 @@
+async function getJWT(client_id, hostname) {
+   hostname = encodeURIComponent(hostname);
+   client_id = encodeURIComponent(client_id);
+
+   const res = await fetch(
+      `/api/user/jwt?client_id=${client_id}&origin=${hostname}`
+   ).then((res) => res.json());
+
+   return res;
+}
+
+let acceptPromise;
+
+window.allow = () => acceptPromise();
+window.deny = () => window.close();
+
+function start() {
+   let started = false;
+   window.addEventListener("message", async (msg) => {
+      if (!started) {
+         started = true;
+         const url = new URL(msg.origin);
+         document.getElementById("hostname").innerText = url.hostname;
+         await new Promise((yes) => (acceptPromise = yes));
+         const res = await getJWT(msg.data.client_id, url.hostname);
+         msg.source.postMessage(res, msg.origin);
+         window.close();
+      }
+   });
+}
+
+start();
--- a/views/src/popup/popup.scss
+++ b/views/src/popup/popup.scss
@ -0,0 +1,63 @@
+@import "@material/button/mdc-button";
+.blue-button {
+   background: #4a89dc !important;
+}
+
+.grey-button {
+   background: #797979 !important;
+}
+
+hr {
+   //  display: block;
+   //  height: 1px;
+   border: 0;
+   border-top: 1px solid #b8b8b8;
+   //  margin: 1em 0;
+   //  padding: 0;
+}
+body {
+   font-family: Helvetica;
+   background: #eee;
+   -webkit-font-smoothing: antialiased;
+}
+
+.title {
+   text-align: center;
+}
+
+h1,
+h3 {
+   font-weight: 300;
+}
+
+h1 {
+   color: #636363;
+}
+
+ul {
+   list-style: none;
+   padding-left: 0;
+}
+
+.scope_title {
+   margin-top: 0;
+   margin-bottom: 0;
+   padding-left: 5px;
+}
+
+.scope_description {
+   margin-top: 0;
+   padding-left: 15px;
+   font-size: 13px;
+   color: #202020;
+}
+
+.card {
+   max-width: 480px;
+   margin: 4em auto;
+   padding: 3em 2em 2em 2em;
+   background: #fafafa;
+   border: 1px solid #ebebeb;
+   box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px,
+      rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
+}