extend account pages

This commit is contained in:
Daniel Seifert 2024-09-09 00:10:31 +02:00
parent f23bd1339c
commit 0b0f15605f
Signed by: DanielS
GPG Key ID: 6A513E13AEE66170
3 changed files with 158 additions and 123 deletions

View File

@ -1,8 +1,16 @@
{% capture append = "oxidBlock_content" %}
<h1 class="page-header">{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}</h1>
<div class="container-xxl py-5">
<div class="row">
<h1 class="h3 page-header col pl-0 ml-3">
{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}
</h1>
<div class="col-12 col-sm-3 button-col">
{% include "page/account/inc/account_menu.html.twig" with {active_link: "d3totp"} %}
</div>
</div>
{% set totp = user.d3GetTotp() %}
{% set totp = user.d3GetSessionedTotp() %}
{% set userid = user.getId() %}
{{ totp.loadByUserId(userid) }}
@ -28,123 +36,135 @@
{% endif %}
</style>
{% block d3_account_totp %}
<form action="{{ oViewConf.getSelfActionLink() }}" name="d3totpform" class="form-horizontal" method="post">
<div class="hidden">
{{ oViewConf.getHiddenSid()|raw }}
{{ oViewConf.getNavFormParams() }}
<input type="hidden" id="fncname" name="fnc" value="">
<input type="hidden" name="cl" value="{{ oViewConf.getActiveClassName() }}">
</div>
<script type="text/javascript">
function toggle(id) {
var div1 = document.getElementById(id);
if(document.getElementById('totp_use').checked) {
div1.style.display = 'block';
} else {
div1.style.display = 'none';
}
}
</script>
<p>
<input id="totp_use" value="1" type="checkbox" name="totp_use" {% if totp.getId() %} checked{% endif %} {% if false == totp.getId() %}onclick="$('.registerNew').toggle(); $('.submitBtn').toggle();"{% endif %}>
<label for="totp_use">{{ translate({ ident: "D3_TOTP_ACCOUNT_USE" }) }}</label>
</p>
{% if false == totp.getId() %}
<div class="registerNew {# flow #} panel panel-default {# wave #} card">
<div class="{# flow #} panel-heading {# wave #} card-header">
{{ translate({ ident: "D3_TOTP_REGISTERNEW" }) }}
<div class="card card-lg">
<div class="card-body">
{% block d3_account_totp %}
<form action="{{ oViewConf.getSelfActionLink() }}" name="d3totpform" class="form-horizontal" method="post">
<div class="hidden">
{{ oViewConf.getHiddenSid()|raw }}
{{ oViewConf.getNavFormParams()|raw }}
<input type="hidden" id="fncname" name="fnc" value="">
<input type="hidden" name="cl" value="{{ oViewConf.getActiveClassName() }}">
</div>
<div class="{# flow #} panel-body {# wave #} card-body">
<dl>
<dt>
{{ translate({ ident: "D3_TOTP_QRCODE" }) }}&nbsp;
</dt>
<dd>
{{ totp.getQrCodeElement() }}
</dd>
</dl>
<p>
{{ translate({ ident: "D3_TOTP_QRCODE_HELP" }) }}
</p>
<hr>
<p>
<input id="totp_use" value="1" type="checkbox" name="totp_use" {% if totp.getId() %} checked{% endif %} {% if false == totp.getId() %}onclick="toggle('registerNew'); toggle('submitBtn');"{% endif %}>
<label for="totp_use">{{ translate({ ident: "D3_TOTP_ACCOUNT_USE" }) }}</label>
</p>
<dl>
<dt>
<label for="secret">{{ translate({ ident: "D3_TOTP_SECRET" }) }}</label>
</dt>
<dd>
<textarea rows="3" cols="50" id="secret" name="secret" class="editinput" readonly="readonly">{{ totp.getSecret() }}</textarea>
</dd>
</dl>
<p>
{{ translate({ ident: "D3_TOTP_SECRET_HELP" }) }}
</p>
{% if false == totp.getId() %}
<div class="registerNew {# apex #} card" id="registerNew">
<div class="{# apex #} card-header">
{{ translate({ ident: "D3_TOTP_REGISTERNEW" }) }}
</div>
<div class="{# apex #} card-body">
<dl>
<dt>
{{ translate({ ident: "D3_TOTP_QRCODE" }) }}&nbsp;
</dt>
<dd>
{{ totp.getQrCodeElement()|raw }}
</dd>
</dl>
<p>
{{ translate({ ident: "D3_TOTP_QRCODE_HELP" }) }}
</p>
<hr>
<hr>
<dl>
<dt>
<label for="otp">{{ translate({ ident: "D3_TOTP_CURROTP" }) }}</label>
</dt>
<dd>
<input type="text" class="editinput" size="6" maxlength="6" id="otp" name="otp" value="" {{ readonly }}>
</dd>
</dl>
<p>
{{ translate({ ident: "D3_TOTP_CURROTP_HELP" }) }}
</p>
</div>
</div>
{% endif %}
<dl>
<dt>
<label for="secret">{{ translate({ ident: "D3_TOTP_SECRET" }) }}</label>
</dt>
<dd>
<textarea rows="3" cols="50" id="secret" name="secret" class="editinput" readonly="readonly">{{ totp.getSecret() }}</textarea>
</dd>
</dl>
<p>
{{ translate({ ident: "D3_TOTP_SECRET_HELP" }) }}
</p>
{% if totp.getId() %}
{% block d3_account_totp_deletenotes %}
<div class="{# flow #} panel panel-default {# wave #} card">
<div class="{# flow #} panel-heading {# wave #} card-header">
{{ translate({ ident: "D3_TOTP_REGISTEREXIST" }) }}
<hr>
<dl>
<dt>
<label for="otp">{{ translate({ ident: "D3_TOTP_CURROTP" }) }}</label>
</dt>
<dd>
<input type="text" class="editinput" size="6" maxlength="6" id="otp" name="otp" value="" {{ readonly }}>
</dd>
</dl>
<p>
{{ translate({ ident: "D3_TOTP_CURROTP_HELP" }) }}
</p>
</div>
</div>
<div class="{# flow #} panel-body {# wave #} card-body">
{{ translate({ ident: "D3_TOTP_REGISTERDELETE_DESC" }) }}
</div>
</div>
{% endblock %}
{% block d3_account_totp_backupcodes %}
<div class="{# flow #} panel panel-default {# wave #} card">
<div class="{# flow #} panel-heading {# wave #} card-header">
{{ translate({ ident: "D3_TOTP_BACKUPCODES" }) }}
</div>
<div class="{# flow #} panel-body {# wave #} card-body">
{% if oView.getBackupCodes() %}
{% block d3_account_totp_backupcodes_list %}
<label for="backupcodes">{{ translate({ ident: "D3_TOTP_BACKUPCODES_DESC" }) }}</label>
<textarea id="backupcodes" rows="10" cols="20">{{ oView.getBackupCodes() }}</textarea>
{% endblock %}
{% else %}
{% block d3_account_totp_backupcodes_info %}
{{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT", args: oView.getAvailableBackupCodeCount() }) }}<br>
{{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT_DESC" }) }}
{% endblock %}
{% endif %}
</div>
</div>
{% endblock %}
{% endif %}
<p class="submitBtn">
<button type="submit" class="btn btn-primary"
{% if totp.getId() %}
onclick="
if(false is same as(document.getElementById('totp_use').checked && false === confirm('{{ translate({ ident: "D3_TOTP_REGISTERDELETE_CONFIRM" }) }}')) {return false;}
)
document.getElementById('fncname').value = 'delete';
"
{% else %}
onclick="document.getElementById('fncname').value = 'create';"
{% endif %}
>
{{ translate({ ident: "D3_TOTP_ACCOUNT_SAVE" }) }}
</button>
</p>
</form>
{% endblock %}
{% if totp.getId() %}
{% block d3_account_totp_deletenotes %}
<div class="{# apex #} card">
<div class="{# apex #} card-header">
{{ translate({ ident: "D3_TOTP_REGISTEREXIST" }) }}
</div>
<div class="{# apex #} card-body">
{{ translate({ ident: "D3_TOTP_REGISTERDELETE_DESC" }) }}
</div>
</div>
{% endblock %}
{% block d3_account_totp_backupcodes %}
<div class="{# apex #} card">
<div class="{# apex #} card-header">
{{ translate({ ident: "D3_TOTP_BACKUPCODES" }) }}
</div>
<div class="{# apex #} card-body">
{% if oView.getBackupCodes() %}
{% block d3_account_totp_backupcodes_list %}
<label for="backupcodes">{{ translate({ ident: "D3_TOTP_BACKUPCODES_DESC" }) }}</label>
<textarea id="backupcodes" rows="10" cols="20">{{ oView.getBackupCodes() }}</textarea>
{% endblock %}
{% else %}
{% block d3_account_totp_backupcodes_info %}
{{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT", args: oView.getAvailableBackupCodeCount() }) }}<br>
{{ translate({ ident: "D3_TOTP_AVAILBACKUPCODECOUNT_DESC" }) }}
{% endblock %}
{% endif %}
</div>
</div>
{% endblock %}
{% endif %}
<div class="mb-3 submitBtn" id="submitBtn">
<button type="submit" class="btn btn-primary"
{% if totp.getId() %}
onclick="
if(false === document.getElementById('totp_use').checked && false === confirm('{{ translate({ ident: "D3_TOTP_REGISTERDELETE_CONFIRM" }) }}')) {return false;}
document.getElementById('fncname').value = 'delete';
"
{% else %}
onclick="document.getElementById('fncname').value = 'create';"
{% endif %}
>
{{ translate({ ident: "D3_TOTP_ACCOUNT_SAVE" }) }}
</button>
</div>
</form>
{% endblock %}
</div>
</div>
</div>
{% endcapture %}
{% capture append = "oxidBlock_sidebar" %}
{% include "page/account/inc/account_menu.html.twig" with {active_link: "d3totp"} %}
{% endcapture %}
{% include "layout/page.html.twig" with {sidebar: "Left"} %}

View File

@ -1,11 +1,19 @@
{{ parent() }}
{% extends "page/account/dashboard.html.twig" %}
<div class="card">
<div class="card-header">
<a href="{{ seo_url({ ident: oViewConf.getSelfLink()|cat("cl=d3_account_totp") }) }}">{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}</a>
<a href="{{ seo_url({ ident: oViewConf.getSslSelfLink()|cat("cl=d3_account_totp") }) }}" class="btn btn-outline-dark btn-sm float-right edit-button">
<i class="fa fa-arrow-right"></i>
</a>
{% block account_dashboard_col2 %}
{{ parent() }}
<div class="col mb-3">
<div class="card card-lg h-100">
<h2 class="h4 card-header card-title">{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}</h2>
<div class="card-body">
<div class="card-text mb-3">
{{ translate({ ident: "D3_TOTP_ACCOUNT_DESC" }) }}
</div>
<a class="btn btn-outline-primary stretched-link" href="{{ seo_url({ ident: oViewConf.getSelfLink()|cat("cl=d3_account_totp") }) }}">
{{ translate({ ident: "MORE" }) }}
</a>
</div>
</div>
</div>
<div class="card-body">{{ translate({ ident: "D3_TOTP_ACCOUNT_DESC" }) }}</div>
</div>
{% endblock %}

View File

@ -1,4 +1,11 @@
{{ parent() }}
<li class="list-group-item{% if active_link == "d3totp" %} active{% endif %}">
<a class="{# wave #} list-group-link" href="{{ seo_url({ ident: oViewConf.getSelfLink()|cat("cl=d3_account_totp") }) }}" title="{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}">{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}</a>
</li>
{% extends "page/account/inc/account_menu.html.twig" %}
{% block account_menu %}
{{ parent() }}
<a class="dropdown-item{% if active_link == "d3totp" %} active{% endif %}"
href="{{ seo_url({ ident: oViewConf.getSelfLink()|cat("cl=d3_account_totp") }) }}"
title="{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}"
>
{{ translate({ ident: "D3_TOTP_ACCOUNT" }) }}
</a>
{% endblock %}