From 0c20f5bd97251a71f3dce0e0edb541323ab00b5a Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Thu, 30 May 2024 12:43:53 +0200
Subject: [PATCH] add settings url to key overview page
---
pass/public/styles/admin/key-overview.less | 9 +
pass/routes/admin/index.js | 1 +
pass/views/admin/key/overview.ejs | 221 +++++++++++----------
3 files changed, 131 insertions(+), 100 deletions(-)
diff --git a/pass/public/styles/admin/key-overview.less b/pass/public/styles/admin/key-overview.less
index a704b95..4ade74e 100644
--- a/pass/public/styles/admin/key-overview.less
+++ b/pass/public/styles/admin/key-overview.less
@@ -95,6 +95,15 @@
}
}
+ div.settings-url {
+ display: flex;
+
+ >input {
+ flex-grow: 1;
+ padding-inline: .5rem;
+ }
+ }
+
div#payments {
display: grid;
gap: 3rem;
diff --git a/pass/routes/admin/index.js b/pass/routes/admin/index.js
index 9ab3a4f..0ee9418 100644
--- a/pass/routes/admin/index.js
+++ b/pass/routes/admin/index.js
@@ -404,6 +404,7 @@ router.use("/key/:key", (req, res, next) => {
});
}
});
+ res.locals.key_url = `https://metager.de/meta/settings/load-settings?key=${key.get_key()}`;
next();
});
});
diff --git a/pass/views/admin/key/overview.ejs b/pass/views/admin/key/overview.ejs
index 3e2b349..87ce699 100644
--- a/pass/views/admin/key/overview.ejs
+++ b/pass/views/admin/key/overview.ejs
@@ -1,105 +1,126 @@
-<%- include('../../templates/page_header', {css:
-[`${baseDir}/styles/admin/base.css`,
-`${baseDir}/styles/admin/key-overview.css`], js:
-[`${baseDir}/js/admin/key-overview.js`]}); %>
-<div id="admin-container">
- <ul class="breadcrumps">
- <li>
- <a href="<%= baseDir _%>/admin/">
- <%= req.t("breadcrumps.overview", {ns: "admin"}) _%>
- </a>
- </li>
- <li><%= req.t("breadcrumps.key-management", {ns: "admin"}) _%></li>
- </ul>
- <div id="key-info">
- <h1><%= key.get_key() _%></h1>
- <h2>
- <%= req.t("key.key-overview.charge", {ns: "admin", token:
- key.get_charge()}) _%>
- </h2>
- <%_ if(typeof success !== "undefined") { %>
- <div class="charge-success">
- <%= req.t("key.key-overview.charge-success", {ns: "admin"}) _%>
- </div>
- <%_ } _%>
- <div id="charges">
- <%_ for(let i = 0; i < key.get_charge_orders().length; i++) { _%>
- <div class="charge">
- <div class="charge-amount">
- <%= key.get_charge_orders()[i].amount _%>
- </div>
- <div>
- <%= req.t("key.key-overview.expiration", {ns: "admin", expiration:
- key.get_charge_orders()[i].expiration.format("DD.MM.YYYY HH:mm:ss")})
- _%>
- </div>
- <form method="POST" action="<%= `${baseDir}/admin/key/${key.get_key()}/remove-charge`%>">
- <input type="hidden" name="payment_reference" value="<%= key.get_charge_orders()[i].payment_reference_id _%>" />
- <button type="submit">
- <%= req.t("key.key-overview.delete", {ns: "admin"}) _%>
- </button>
- </form>
- </div>
- <%_ } _%>
- </div>
- </div>
- <form method="POST" id="charge-form">
- <h3 class="heading">
- <%= req.t("key.key-overview.charge-form.heading", {ns: "admin"}) _%>
- </h3>
- <div class="hint">
- <%= req.t("key.key-overview.charge-form.hint", {ns: "admin"}) _%>
- </div>
- <%_ if(typeof errors !== "undefined") { _%>
- <ul id="errors">
- <%_ for(let i = 0; i < errors.length; i++) { _%>
- <li class="error"><%= errors[i].param + ": " + errors[i].msg _%></li>
- <%_ } _%>
+<%- include('../../templates/page_header', {css: [`${baseDir}/styles/admin/base.css`,
+ `${baseDir}/styles/admin/key-overview.css`], js: [`${baseDir}/js/admin/key-overview.js`]}); %>
+ <div id="admin-container">
+ <ul class="breadcrumps">
+ <li>
+ <a href="<%= baseDir _%>/admin/">
+ <%= req.t("breadcrumps.overview", {ns: "admin" }) _%>
+ </a>
+ </li>
+ <li>
+ <%= req.t("breadcrumps.key-management", {ns: "admin" }) _%>
+ </li>
</ul>
- <%_ } _%>
- <div class="input-group">
- <label for="amount"><%= req.t("key.key-overview.charge-form.amount.label", {ns: "admin"})
- _%></label>
- <input type="number" name="amount" id="amount" min="0" step="1" placeholder="1000" />
- </div>
- <div>oder</div>
- <div class="input-group">
- <label for="price"><%= req.t("key.key-overview.charge-form.price.label", {ns: "admin"})
- _%></label>
- <input type="number" name="price" id="price" min="0" step="0.01" placeholder="10.00" />
+ <div id="key-info">
+ <h1>
+ <%= key.get_key() _%>
+ </h1>
+ <div class="input-group settings-url">
+ <input id="setting-url" type="text" readonly value="<%= key_url %>" />
+ <button class="copy button" data-target="setting-url"><img src="<%= baseDir _%>/images/copy.svg" />
+ <div>
+ <%= req.t("key.copy-url", {ns: "key" }) _%>
+ </div>
+ </button>
+ </div>
+ <h2>
+ <%= req.t("key.key-overview.charge", {ns: "admin" , token: key.get_charge()}) _%>
+ </h2>
+ <%_ if(typeof success !=="undefined" ) { %>
+ <div class="charge-success">
+ <%= req.t("key.key-overview.charge-success", {ns: "admin" }) _%>
+ </div>
+ <%_ } _%>
+ <div id="charges">
+ <%_ for(let i=0; i < key.get_charge_orders().length; i++) { _%>
+ <div class="charge">
+ <div class="charge-amount">
+ <%= key.get_charge_orders()[i].amount _%>
+ </div>
+ <div>
+ <%= req.t("key.key-overview.expiration", {ns: "admin" , expiration:
+ key.get_charge_orders()[i].expiration.format("DD.MM.YYYY HH:mm:ss")}) _%>
+ </div>
+ <form method="POST" action="<%= `${baseDir}/admin/key/${key.get_key()}/remove-charge`%>">
+ <input type="hidden" name="payment_reference"
+ value="<%= key.get_charge_orders()[i].payment_reference_id _%>" />
+ <button type="submit">
+ <%= req.t("key.key-overview.delete", {ns: "admin" }) _%>
+ </button>
+ </form>
+ </div>
+ <%_ } _%>
+ </div>
</div>
- <button class="button" type="submit">
- <%= req.t("key.key-overview.charge-form.submit", {ns: "admin"}) _%>
- </button>
- </form>
- <%_ if(payments.length > 0) { _%>
- <div id="payments">
- <h1 class="heading">
- <%= req.t("key.key-overview.payments.heading", {ns: "admin"}) _%>
- </h1>
- <%_ for(let i = 0; i < payments.length; i++) { _%>
- <div class="payment">
- <div class="payment_id_name">ID</div>
- <div class="payment_public_id_name">Public ID</div>
- <div class="payment_price_name">Betrag</div>
- <div class="payment_processor_id_name">Zahlungsdienstleister ID</div>
- <div class="payment_created_at_name">Eingangsdatum</div>
- <div class="payment_id"><%= payments[i].id _%></div>
- <div class="payment_public_id"><%= payments[i].public_id _%></div>
- <div class="payment_price"><%= new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(payments[i].price) _%></div>
- <div class="payment_processor_id_id">
- <%- payments[i].payment_processor_id _%>
+ <form method="POST" id="charge-form">
+ <h3 class="heading">
+ <%= req.t("key.key-overview.charge-form.heading", {ns: "admin" }) _%>
+ </h3>
+ <div class="hint">
+ <%= req.t("key.key-overview.charge-form.hint", {ns: "admin" }) _%>
</div>
- <div class="payment_created_at_id">
- <%= payments[i].created_at.format("DD.MM.YYYY HH:mm:ss") _%>
+ <%_ if(typeof errors !=="undefined" ) { _%>
+ <ul id="errors">
+ <%_ for(let i=0; i < errors.length; i++) { _%>
+ <li class="error">
+ <%= errors[i].param + ": " + errors[i].msg _%>
+ </li>
+ <%_ } _%>
+ </ul>
+ <%_ } _%>
+ <div class="input-group">
+ <label for="amount">
+ <%= req.t("key.key-overview.charge-form.amount.label", {ns: "admin" }) _%>
+ </label>
+ <input type="number" name="amount" id="amount" min="0" step="1" placeholder="1000" />
+ </div>
+ <div>oder</div>
+ <div class="input-group">
+ <label for="price">
+ <%= req.t("key.key-overview.charge-form.price.label", {ns: "admin" }) _%>
+ </label>
+ <input type="number" name="price" id="price" min="0" step="0.01" placeholder="10.00" />
+ </div>
+ <button class="button" type="submit">
+ <%= req.t("key.key-overview.charge-form.submit", {ns: "admin" }) _%>
+ </button>
+ </form>
+ <%_ if(payments.length> 0) { _%>
+ <div id="payments">
+ <h1 class="heading">
+ <%= req.t("key.key-overview.payments.heading", {ns: "admin" }) _%>
+ </h1>
+ <%_ for(let i=0; i < payments.length; i++) { _%>
+ <div class="payment">
+ <div class="payment_id_name">ID</div>
+ <div class="payment_public_id_name">Public ID</div>
+ <div class="payment_price_name">Betrag</div>
+ <div class="payment_processor_id_name">Zahlungsdienstleister ID</div>
+ <div class="payment_created_at_name">Eingangsdatum</div>
+ <div class="payment_id">
+ <%= payments[i].id _%>
+ </div>
+ <div class="payment_public_id">
+ <%= payments[i].public_id _%>
+ </div>
+ <div class="payment_price">
+ <%= new Intl.NumberFormat('de-DE', { style: 'currency' , currency: 'EUR' }).format(payments[i].price) _%>
+ </div>
+ <div class="payment_processor_id_id">
+ <%- payments[i].payment_processor_id _%>
+ </div>
+ <div class="payment_created_at_id">
+ <%= payments[i].created_at.format("DD.MM.YYYY HH:mm:ss") _%>
+ </div>
+ <details class="payment_processor_data">
+ <summary>Zahlungsdienstleister Antwort</summary>
+ <p>
+ <%= payments[i].payment_processor_data _%>
+ </p>
+ </details>
+ </div>
+ <%_ } _%>
</div>
- <details class="payment_processor_data">
- <summary>Zahlungsdienstleister Antwort</summary>
- <p><%= payments[i].payment_processor_data _%></p>
- </details>
- </div>
- <%_ } _%>
+ <%_ } _%>
</div>
- <%_ } _%>
-</div>
-<%- include('../../templates/page_footer'); -%>
\ No newline at end of file
+ <%- include('../../templates/page_footer'); -%>
\ No newline at end of file
--
GitLab