X-Git-Url: https://git.squeep.com/?p=squeep-authentication-module;a=blobdiff_plain;f=lib%2Ftemplate%2Fsettings-html.js;fp=lib%2Ftemplate%2Fsettings-html.js;h=c5bb6c082909bd92274ca3242a76c33b3764e574;hp=0000000000000000000000000000000000000000;hb=53ef948ea83106e82d55e60d6695a15e94bf725e;hpb=842a3da269de1ab82e9a2a12aae8ed5677f064d8

diff --git a/lib/template/settings-html.js b/lib/template/settings-html.js
new file mode 100644
index 0000000..c5bb6c0
--- /dev/null
+++ b/lib/template/settings-html.js
@@ -0,0 +1,108 @@
+'use strict';
+
+/* eslint-disable no-unused-vars */
+
+const { TemplateHelper: th } = require('@squeep/html-template-helper');
+const { TOTP } = require('@squeep/totp');
+
+function updatePasswordSection(ctx, htmlOptions) {
+  return `\t\t\t<section class="settings-update-password">
+\t\t\t\t<h2>Password</h2>
+\t\t\t\t<form method="POST">
+\t\t\t\t\t<fieldset>
+\t\t\t\t\t\t<legend>Update Password</legend>
+\t\t\t\t\t\t<label for="credential-current">Current Password:</label>
+\t\t\t\t\t\t<input type="password" id="credential-current" name="credential-current" value="">
+\t\t\t\t\t\t<br>
+\t\t\t\t\t\t<label for="credential-new">New Password:</label>
+\t\t\t\t\t\t<input type="password" id="credential-new" name="credential-new" value="">
+\t\t\t\t\t\t<br>
+\t\t\t\t\t\t<label for="credential-new-2">Confirm New Password:</label>
+\t\t\t\t\t\t<input type="password" id="credential-new-2" name="credential-new-2" value="">
+\t\t\t\t\t\t<br>
+\t\t\t\t\t\t<button type="submit" name="credential" value="update">Update</button>
+\t\t\t\t\t</fieldset>
+\t\t\t\t</form>
+\t\t\t</section>`;
+}
+
+
+function enableOTPSection(ctx, htmlOptions) {
+  return `\t\t\t<section class="settings-otp">
+\t\t\t\t<h2>OTP 2FA</h2>
+\t\t\t\t<form method="POST">
+\t\t\t\t\t<fieldset>
+\t\t\t\t\t\t<legend>Enable OTP</legend>
+\t\t\t\t\t\t<button type="submit" name="otp" value="enable">Enable OTP</button>
+\t\t\t\t\t</fieldset>
+\t\t\t\t</form>
+\t\t\t</section>`;
+}
+
+
+function confirmOTPSection(ctx, htmlOptions) {
+  const { secret, svg, uri } = TOTP.createKeySVG({
+    accountname: ctx.authenticationId,
+  }, ctx.otpConfirmKey, 'base32');
+  return `\t\t\t<section class="settings-otp">
+\t\t\t\t<h2>OTP 2FA</h2>
+\t\t\t\t<form method="POST">
+\t\t\t\t\t<fieldset>
+\t\t\t\t\t<legend>Confirm OTP Key</legend>
+\t\t\t\t\t\t<div>
+\t\t\t\t\t\t\t<details>
+\t\t\t\t\t\t\t\t<summary>Show Key</summary>
+\t\t\t\t\t\t\t\tOTP Key (base32): <code>${secret}</code>
+\t\t\t\t\t\t\t\t<div>
+\t\t\t\t\t\t\t\t\tURI: <code>${uri}</code>
+\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t</details>
+\t\t\t\t\t\t</div>
+\t\t\t\t\t\t<div class="otp-key-qr">
+${svg}
+\t\t\t\t\t\t</div>
+\t\t\t\t\t\t<br>
+\t\t\t\t\t\t<label for="otp-token">Enter OTP token to enable:</label>
+\t\t\t\t\t\t<input id="otp-token" name="otp-token" type="text" value="">
+\t\t\t\t\t\t<br>
+\t\t\t\t\t\t<input type="hidden" name="otp-box" value="${ctx.otpConfirmBox}">
+\t\t\t\t\t\t<button type="submit" name="otp" value="confirm">Confirm OTP</button>
+\t\t\t\t\t</fieldset>
+\t\t\t\t</form>
+\t\t\t</section>`;
+}
+
+
+function disableOTPSection(ctx, htmlOptions) {
+  return `\t\t\t<section class="settings-otp">
+\t\t\t\t<h2>OTP 2FA</h2>
+\t\t\t\t<p>OTP is currrently enabled.  It may be removed here.</p>
+\t\t\t\t<form method="POST">
+\t\t\t\t\t<button type="submit" name="otp" value="disable">Disable OTP</button>
+\t\t\t\t</form>
+\t\t\t</section>`;
+}
+
+
+function OTPSection(ctx, htmlOptions) {
+  const OTPToggle = ctx.otpKey ? disableOTPSection : enableOTPSection;
+  const OTPContent = ctx.otpConfirmBox ? confirmOTPSection : OTPToggle;
+  return '\t\t\t<section class="settings-otp">' +
+    OTPContent(ctx, htmlOptions) +
+    '\t\t\t</section>';
+}
+
+
+module.exports = (ctx, options) => {
+  const htmlOptions = {
+    pageTitle: options.manager.pageTitle,
+    logoUrl: options.manager.logoUrl,
+    footerEntries: options.manager.footerEntries,
+  };
+  const mainContent = [
+    OTPSection(ctx, htmlOptions),
+    updatePasswordSection(ctx, htmlOptions),
+  ];
+
+  return th.htmlPage(1, ctx, htmlOptions, mainContent);
+};