Fix Authenticator remove button
parent
493fea8994
commit
b488fe24a2
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<link rel="icon" href="${url.resourcesPath}/img/pub.solar.svg" />
|
||||
|
||||
<link href="${url.resourcesPath}/css/index.css?v3" rel="stylesheet" />
|
||||
<link href="${url.resourcesPath}/css/index.css?v4" rel="stylesheet" />
|
||||
|
||||
<script defer src="${url.resourcesPath}/js/background.js" type="text/javascript"></script>
|
||||
<script defer src="${url.resourcesPath}/js/i18n.js" type="text/javascript"></script>
|
||||
|
|
|
|||
242
account/totp.ftl
242
account/totp.ftl
|
|
@ -1,131 +1,131 @@
|
|||
<#import "template.ftl" as layout>
|
||||
<@layout.mainLayout active='totp' bodyClass='totp'; section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<h2>${msg("authenticatorTitle")}</h2>
|
||||
</div>
|
||||
<#if totp.otpCredentials?size == 0>
|
||||
<div class="col-md-2 subtitle">
|
||||
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
|
||||
</div>
|
||||
</#if>
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<h2>${msg("authenticatorTitle")}</h2>
|
||||
</div>
|
||||
<#if totp.otpCredentials?size == 0>
|
||||
<div class="col-md-2 subtitle">
|
||||
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
|
||||
<#if totp.enabled>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<#if totp.otpCredentials?size gt 1>
|
||||
<tr>
|
||||
<th colspan="4">${msg("configureAuthenticators")}</th>
|
||||
</tr>
|
||||
<#else>
|
||||
<tr>
|
||||
<th colspan="3">${msg("configureAuthenticators")}</th>
|
||||
</tr>
|
||||
</#if>
|
||||
</thead>
|
||||
<tbody>
|
||||
<#list totp.otpCredentials as credential>
|
||||
<tr>
|
||||
<td class="provider">${msg("mobile")}</td>
|
||||
<#if totp.otpCredentials?size gt 1>
|
||||
<td class="provider">${credential.id}</td>
|
||||
</#if>
|
||||
<td class="provider">${credential.userLabel!}</td>
|
||||
<td class="action">
|
||||
<form action="${url.totpUrl}" method="post" class="form-inline">
|
||||
<input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
|
||||
<input type="hidden" id="submitAction" name="submitAction" value="Delete">
|
||||
<input type="hidden" id="credentialId" name="credentialId" value="${credential.id}">
|
||||
<button id="remove-mobile" class="ps-button ps-button_small">
|
||||
${msg("doRemove")}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</#list>
|
||||
</tbody>
|
||||
</table>
|
||||
<#else>
|
||||
|
||||
<hr/>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<p>${msg("totpStep1")}</p>
|
||||
|
||||
<ul>
|
||||
<#list totp.supportedApplications as app>
|
||||
<li>${msg(app)}</li>
|
||||
</#list>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<#if mode?? && mode = "manual">
|
||||
<li>
|
||||
<p>${msg("totpManualStep2")}</p>
|
||||
<pre class="ps-mono"><code>${totp.totpSecretEncoded}</code></pre>
|
||||
<p><a href="${totp.qrUrl}" id="mode-barcode">${msg("totpScanBarcode")}</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>${msg("totpManualStep3")}</p>
|
||||
<ul>
|
||||
<li id="kc-totp-type">${msg("totpType")}: ${msg("totp." + totp.policy.type)}</li>
|
||||
<li id="kc-totp-algorithm">${msg("totpAlgorithm")}: ${totp.policy.getAlgorithmKey()}</li>
|
||||
<li id="kc-totp-digits">${msg("totpDigits")}: ${totp.policy.digits}</li>
|
||||
<#if totp.policy.type = "totp">
|
||||
<li id="kc-totp-period">${msg("totpInterval")}: ${totp.policy.period}</li>
|
||||
<#elseif totp.policy.type = "hotp">
|
||||
<li id="kc-totp-counter">${msg("totpCounter")}: ${totp.policy.initialCounter}</li>
|
||||
</#if>
|
||||
</ul>
|
||||
</li>
|
||||
<#else>
|
||||
<li>
|
||||
<p>${msg("totpStep2")}</p>
|
||||
<p><img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"></p>
|
||||
<p><a href="${totp.manualUrl}" id="mode-manual">${msg("totpUnableToScan")}</a></p>
|
||||
</li>
|
||||
</#if>
|
||||
<li>
|
||||
<p>${msg("totpStep3")}</p>
|
||||
<p>${msg("totpStep3DeviceName")}</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<hr/>
|
||||
|
||||
<form action="${url.totpUrl}" class="ps-container" method="post">
|
||||
<input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
|
||||
<div class="ps-form-group">
|
||||
<label for="totp" class="ps-form-group--label">${msg("authenticatorCode")} <span class="required">*</span></label>
|
||||
|
||||
<input type="text" class="ps-input" id="totp" name="totp" autocomplete="off" autofocus>
|
||||
<input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}"/>
|
||||
</div>
|
||||
|
||||
<#if totp.enabled>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<#if totp.otpCredentials?size gt 1>
|
||||
<tr>
|
||||
<th colspan="4">${msg("configureAuthenticators")}</th>
|
||||
</tr>
|
||||
<#else>
|
||||
<tr>
|
||||
<th colspan="3">${msg("configureAuthenticators")}</th>
|
||||
</tr>
|
||||
</#if>
|
||||
</thead>
|
||||
<tbody>
|
||||
<#list totp.otpCredentials as credential>
|
||||
<tr>
|
||||
<td class="provider">${msg("mobile")}</td>
|
||||
<#if totp.otpCredentials?size gt 1>
|
||||
<td class="provider">${credential.id}</td>
|
||||
</#if>
|
||||
<td class="provider">${credential.userLabel!}</td>
|
||||
<td class="action">
|
||||
<form action="${url.totpUrl}" method="post" class="form-inline">
|
||||
<input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
|
||||
<input type="hidden" id="submitAction" name="submitAction" value="Delete">
|
||||
<input type="hidden" id="credentialId" name="credentialId" value="${credential.id}">
|
||||
<button id="remove-mobile" class="btn btn-default">
|
||||
<i class="pficon pficon-delete"></i>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</#list>
|
||||
</tbody>
|
||||
</table>
|
||||
<#else>
|
||||
<div class="ps-form-group" ${messagesPerField.printIfExists('userLabel',properties.kcFormGroupErrorClass!)}">
|
||||
<label for="userLabel" class="ps-form-group--label">${msg("totpDeviceName")} <#if totp.otpCredentials?size gte 1><span class="required">*</span></#if></label>
|
||||
|
||||
<hr/>
|
||||
<input type="text" class="ps-input" id="userLabel" name="userLabel" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<p>${msg("totpStep1")}</p>
|
||||
|
||||
<ul>
|
||||
<#list totp.supportedApplications as app>
|
||||
<li>${msg(app)}</li>
|
||||
</#list>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<#if mode?? && mode = "manual">
|
||||
<li>
|
||||
<p>${msg("totpManualStep2")}</p>
|
||||
<pre class="ps-mono"><code>${totp.totpSecretEncoded}</code></pre>
|
||||
<p><a href="${totp.qrUrl}" id="mode-barcode">${msg("totpScanBarcode")}</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>${msg("totpManualStep3")}</p>
|
||||
<ul>
|
||||
<li id="kc-totp-type">${msg("totpType")}: ${msg("totp." + totp.policy.type)}</li>
|
||||
<li id="kc-totp-algorithm">${msg("totpAlgorithm")}: ${totp.policy.getAlgorithmKey()}</li>
|
||||
<li id="kc-totp-digits">${msg("totpDigits")}: ${totp.policy.digits}</li>
|
||||
<#if totp.policy.type = "totp">
|
||||
<li id="kc-totp-period">${msg("totpInterval")}: ${totp.policy.period}</li>
|
||||
<#elseif totp.policy.type = "hotp">
|
||||
<li id="kc-totp-counter">${msg("totpCounter")}: ${totp.policy.initialCounter}</li>
|
||||
</#if>
|
||||
</ul>
|
||||
</li>
|
||||
<#else>
|
||||
<li>
|
||||
<p>${msg("totpStep2")}</p>
|
||||
<p><img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"></p>
|
||||
<p><a href="${totp.manualUrl}" id="mode-manual">${msg("totpUnableToScan")}</a></p>
|
||||
</li>
|
||||
</#if>
|
||||
<li>
|
||||
<p>${msg("totpStep3")}</p>
|
||||
<p>${msg("totpStep3DeviceName")}</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<hr/>
|
||||
|
||||
<form action="${url.totpUrl}" class="ps-container" method="post">
|
||||
<input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
|
||||
<div class="ps-form-group">
|
||||
<label for="totp" class="ps-form-group--label">${msg("authenticatorCode")} <span class="required">*</span></label>
|
||||
|
||||
<input type="text" class="ps-input" id="totp" name="totp" autocomplete="off" autofocus>
|
||||
<input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}"/>
|
||||
<div class="ps-form-group">
|
||||
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
|
||||
<div class="">
|
||||
<button type="submit"
|
||||
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
|
||||
id="saveTOTPBtn" name="submitAction" value="Save">${msg("doSave")}
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}"
|
||||
id="cancelTOTPBtn" name="submitAction" value="Cancel">${msg("doCancel")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ps-form-group" ${messagesPerField.printIfExists('userLabel',properties.kcFormGroupErrorClass!)}">
|
||||
<label for="userLabel" class="ps-form-group--label">${msg("totpDeviceName")} <#if totp.otpCredentials?size gte 1><span class="required">*</span></#if></label>
|
||||
|
||||
<input type="text" class="ps-input" id="userLabel" name="userLabel" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div class="ps-form-group">
|
||||
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
|
||||
<div class="">
|
||||
<button type="submit"
|
||||
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
|
||||
id="saveTOTPBtn" name="submitAction" value="Save">${msg("doSave")}
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}"
|
||||
id="cancelTOTPBtn" name="submitAction" value="Cancel">${msg("doCancel")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</#if>
|
||||
|
||||
</@layout.mainLayout>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.ps-button {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
border: 2px solid var(--foreground);
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.5em 1em;
|
||||
line-height: 1.2em;
|
||||
border: 0.125em solid var(--foreground);
|
||||
border-radius: 1.5em;
|
||||
background-color: var(--background-darker-2);
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
&_primary {
|
||||
border: 4px solid var(--foreground);
|
||||
border: 0.25em solid var(--foreground);
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-weight: bold;
|
||||
|
|
@ -24,4 +24,9 @@
|
|||
color: var(--background);
|
||||
}
|
||||
}
|
||||
|
||||
&_small {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.25em 0.7em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<link rel="icon" href="${url.resourcesPath}/img/pub.solar.svg" />
|
||||
|
||||
<link href="${url.resourcesPath}/css/index.css?v3" rel="stylesheet" />
|
||||
<link href="${url.resourcesPath}/css/index.css?v4" rel="stylesheet" />
|
||||
|
||||
<script defer src="${url.resourcesPath}/js/background.js" type="text/javascript"></script>
|
||||
<script defer src="${url.resourcesPath}/js/i18n.js" type="text/javascript"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue