Shankiyani/initial popup

assets/static/css/reset.css

@@ -0,0 +1,30 @@
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body,
+p,
+ol,
+ul {
+  margin: 0;
+  font-weight: normal;
+  padding: 3.125rem 0;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+

assets/static/css/style.css

@@ -0,0 +1,66 @@
+.container {
+  width: 80%;
+  max-width: 75rem;
+  margin: 0 auto;
+}
+
+.title {
+  text-align: center;
+}
+
+.flex-outer {
+  list-style-type: none;
+  padding: 0;
+  max-width: 50rem;
+  margin: 0 auto;
+}
+
+.content-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.flex-outer > .content-row:not(:last-child) {
+  margin-bottom: 1.25rem;
+}
+
+.content-label {
+  padding: 0.5rem;
+  font-weight: 300;
+  letter-spacing: 0.1rem;
+  text-transform: uppercase;
+  flex: 1 0 7.5rem;
+  max-width: 13.75rem;
+}
+
+.form-btns * {
+  margin-left: 1rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  background: #333;
+  color: #f2f2f2;
+  text-transform: uppercase;
+  letter-spacing: 0.1rem;
+  border-radius: 0.125rem;
+}
+
+.flex-outer > .content-row > .content-label + * {
+  flex: 1 0 13.75rem;
+}
+
+.content-row .content-error {
+  font-weight: 300;
+  flex: 1 0 7.5rem;
+  max-width: 13.75rem;
+}
+
+.flex-outer > .content-row .content-select,
+.flex-outer > .content-row .content-input {
+  padding: 1rem;
+}
+
+.form-btns {
+  display: flex;
+  justify-content: flex-end;
+}

assets/static/images/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/mstile-150x150.png"/>
+      <TileColor>#da532c</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

assets/static/images/favicons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

assets/static/js/popup.js

@@ -0,0 +1,36 @@
+// Copyright 2023 The Authors (see AUTHORS file)
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const urlParams = new URLSearchParams(window.location.search);
+
+window.addEventListener("DOMContentLoaded", async () => {
+  // leverage the URL parameter provided from the request and set it to the target origin
+  const encodedUriComponent = urlParams.get("origin");
+  if (!encodedUriComponent) {
+    alert("An origin URL parameter must be provided.")
+    window.close();
+    return;
+  }
+
+  const targetOrigin = decodeURIComponent(encodedUriComponent);
+  if (!targetOrigin) {
+    alert("Decoded URL parameter is invalid.")
+    window.close();
+    return;
+  }
+
+  // set values for the following hidden input elements, will be persisted to the next page
+  document.getElementById("origin").value = targetOrigin;
+  document.getElementById("windowname").value = window.name;
+}, true);

assets/static/js/success.js

@@ -0,0 +1,39 @@
+// Copyright 2023 The Authors (see AUTHORS file)
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const scriptTag = document.querySelector("#success");
+const targetOrigin = scriptTag.getAttribute("origin");
+const token = scriptTag.getAttribute("token");
+const windowName = scriptTag.getAttribute("window-name");
+if (!targetOrigin) {
+  alert("You must pass a target origin from your application to successfully retrieve a token.")
+} else if (!windowName) {
+  alert("You must pass a window name from your application to successfully retrieve a token.")
+} else if (!token) {
+  alert("Something went wrong, unable to retrieve a token.")
+} else {
+  window.opener.postMessage(
+    JSON.stringify({
+      // notify the requestor of the window name that was provided, 
+      // client should check this as a sanity check
+      source: windowName,
+      payload: {
+        token,
+      },
+    }),
+    targetOrigin
+  );
+}
+window.close();
+

assets/templates/_head.html.tmpl

@@ -0,0 +1,26 @@
+{{ define "head" }}
+<meta charset="utf-8">
+<meta name="viewport"
+  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover, target-densityDpi=device-dpi">
+<meta name="robots" content="noindex, nofollow, noarchive">
+<meta property="og:title" content="{{ .PageTitle }}" />
+<meta name="apple-mobile-web-app-capable" property="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" property="apple-mobile-web-app-status-bar-style"
+  media="(prefers-color-scheme: light)" content="white">
+<meta name="apple-mobile-web-app-status-bar-style" property="apple-mobile-web-app-status-bar-style"
+  media="(prefers-color-scheme: dark)" content="black">
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
+<link rel="icon" type="image/png" sizes="192x192" href="/assets/static/images/favicons/android-chrome-192x192.png">
+<link rel="icon" type="image/png" sizes="512x512" href="/assets/static/images/favicons/android-chrome-512x512.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/static/images/favicons/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/static/images/favicons/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/assets/static/images/favicons/favicon-16x16.png">
+<link rel="manifest" href="/assets/static/images/favicons/site.webmanifest">
+<link rel="mask-icon" href="/assets/static/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="theme-color" content="#ffffff">
+<meta name="msapplication-config" content="/assets/static/images/favicons/browserconfig.xml" />
+<meta name="msapplication-TileColor" content="#c7b3d2">
+<meta name="msapplication-TileImage" content="mstile-144x144.png">
+{{ end }}

assets/templates/forbidden.html.tmpl

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ template "head" . }}
+  <meta property="og:description" content="Error page" />
+  <meta name="description" content="Error page">
+  <title>{{ .PageTitle }}</title>
+</head>
+
+<body>
+  <div>{{ .Message }}</div>
+</body>
+
+</html>

assets/templates/popup.html.tmpl

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  {{ template "head" . }}
+  <meta property="og:description" content="Justification Verification System form used for minting tokens." />
+  <meta name="description" content="Justification Verification System form used for minting tokens.">
+  <link rel="stylesheet" type="text/css" href="/assets/static/css/reset.css">
+  <link rel="stylesheet" type="text/css" href="/assets/static/css/style.css">
+  <title>{{ .PageTitle }}</title>
+</head>
+
+<body>
+  {{ $context := . }}
+  <div class="container">
+    <h1 class="title">{{ .PageTitle }}</h1>
+    <form action="/popup" method="post">
+      <ul class="flex-outer">
+
+        <!-- Username -->
+        <li class="content-row">
+          <label class="content-label" for="username">Username</label>
+          <label class="content-data" for="username">TODO username</label>
+        </li>
+
+        <!-- Category row -->
+        <li class="content-row">
+          <label class="content-label" for="category">Category</label>
+          <select class="content-select" id="category" name="category">
+            {{ range $index, $element := .Content.Categories }}
+            {{ if eq $element.Key $context.Category }}
+            <option value="{{ $element.Key }}" selected="selected">{{ $element.Text }}</option>
+            {{ else }}
+            <option value="{{ $element.Key }}">{{ $element.Text }}</option>
+            {{ end }}
+            {{ end }}
+          </select>
+        </li>
+        {{ if .Errors.Category }}
+        <li class="content-row">
+          <label class="content-error" style="color:red;">{{ .Errors.Category }}</label>
+        </li>
+        {{ end }}
+
+        <!-- Reason row -->
+        <li class="content-row">
+          <label class="content-label" for="reason">Reason</label>
+          <input class="content-input" type="text" id="reason" name="reason" placeholder="i.e. issue/xxxxx">
+        </li>
+        {{ if .Errors.Reason }}
+        <li class="content-row">
+          <label class="content-error" style="color:red;">{{ .Errors.Reason }}</label>
+        </li>
+        {{ end }}
+
+        <!-- TTL row -->
+        <li class="content-row">
+          <label class="content-label" for="ttl">TTL</label>
+          <select class="content-select" id="ttl" name="ttl">
+            {{ range $index, $element := .Content.TTLs }}
+            {{ if eq $element.Key $context.TTL }}
+            <option value="{{ $element.Key }}" selected="selected">{{ $element.Text }}</option>
+            {{ else }}
+            <option value="{{ $element.Key }}">{{ $element.Text }}</option>
+            {{ end }}
+            {{ end }}
+          </select>
+        </li>
+        {{ if .Errors.TTL }}
+        <li class="content-row">
+          <label class="content-error" style="color:red;">{{ .Errors.TTL }}</label>
+        </li>
+        {{ end }}
+
+        <!-- Action buttons -->
+        <div class="form-btns">
+          <input class="secondary-btn" type="reset" value="Reset">
+          <input class="primary-btn" type="submit" value="Submit">
+        </div>
+      </ul>
+
+      <!-- Hidden fields -->
+      <input type="hidden" id="origin" name="origin" value="">
+      <input type="hidden" id="windowname" name="windowname" value="">
+
+    </form>
+  </div>
+  <script src="/assets/static/js/popup.js" type="text/javascript"></script>
+</body>
+
+</html>