--- /dev/null
+'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);
+};