feat: Initial commit of KeyHelp Manager module
This commit is contained in:
Kevin Feiler
258
modules/servers/keyhelpmanager/templates/clientarea.tpl
Normal file
258
modules/servers/keyhelpmanager/templates/clientarea.tpl
Normal file
@@ -0,0 +1,258 @@
|
||||
{**
|
||||
* KeyHelp Manager - Client Area Template
|
||||
*
|
||||
* Zeigt Login-Details und Account-Statistiken für Kunden an
|
||||
*}
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<i class="fas fa-server"></i> KeyHelp Hosting Account
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
|
||||
{if $error}
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-exclamation-triangle"></i> {$error}
|
||||
</div>
|
||||
{else}
|
||||
|
||||
{* Login-Informationen *}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4><i class="fas fa-sign-in-alt"></i> Login-Informationen</h4>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4 text-right">
|
||||
<strong>KeyHelp Login-URL:</strong>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<a href="{$login_url}" target="_blank" class="btn btn-success btn-sm">
|
||||
<i class="fas fa-external-link-alt"></i> {$login_url}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top: 10px;">
|
||||
<div class="col-sm-4 text-right">
|
||||
<strong>Benutzername:</strong>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" value="{$username}" readonly id="kh-username">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button" onclick="copyToClipboard('kh-username')" title="Kopieren">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top: 10px;">
|
||||
<div class="col-sm-4 text-right">
|
||||
<strong>Passwort:</strong>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group">
|
||||
<input type="password" class="form-control" value="{$password}" readonly id="kh-password">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button" onclick="togglePassword('kh-password')" title="Anzeigen/Verbergen">
|
||||
<i class="fas fa-eye" id="kh-password-icon"></i>
|
||||
</button>
|
||||
<button class="btn btn-default" type="button" onclick="copyToClipboard('kh-password')" title="Kopieren">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top: 10px;">
|
||||
<div class="col-sm-4 text-right">
|
||||
<strong>Domain:</strong>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<code>{$domain}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{* Account-Statistiken *}
|
||||
{if $stats}
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col-md-12">
|
||||
<h4><i class="fas fa-chart-bar"></i> Account-Statistiken</h4>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{* Speicherplatz *}
|
||||
{if $stats.disk_used}
|
||||
<div class="row" style="margin-top: 15px;">
|
||||
<div class="col-sm-4 text-right">
|
||||
<strong>Speicherplatz:</strong>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="progress" style="margin-bottom: 5px;">
|
||||
<div class="progress-bar {if $stats.disk_percent >= 90}progress-bar-danger{elseif $stats.disk_percent >= 75}progress-bar-warning{else}progress-bar-success{/if}"
|
||||
role="progressbar"
|
||||
aria-valuenow="{$stats.disk_percent}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
style="width: {$stats.disk_percent}%">
|
||||
{$stats.disk_percent}%
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
{$stats.disk_used} von {$stats.disk_limit} verwendet
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{* Bandbreite / Traffic *}
|
||||
{if $stats.bandwidth_used}
|
||||
<div class="row" style="margin-top: 15px;">
|
||||
<div class="col-sm-4 text-right">
|
||||
<strong>Traffic (Monat):</strong>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="progress" style="margin-bottom: 5px;">
|
||||
<div class="progress-bar {if $stats.bandwidth_percent >= 90}progress-bar-danger{elseif $stats.bandwidth_percent >= 75}progress-bar-warning{else}progress-bar-info{/if}"
|
||||
role="progressbar"
|
||||
aria-valuenow="{$stats.bandwidth_percent}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
style="width: {$stats.bandwidth_percent}%">
|
||||
{$stats.bandwidth_percent}%
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
{$stats.bandwidth_used} von {$stats.bandwidth_limit} verwendet
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{* Weitere Statistiken *}
|
||||
<div class="row" style="margin-top: 20px;">
|
||||
<div class="col-sm-4 col-xs-6 text-center">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h3 class="text-primary" style="margin: 0;">
|
||||
<i class="fas fa-globe"></i> {$stats.domains}
|
||||
</h3>
|
||||
<small class="text-muted">Domains</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6 text-center">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h3 class="text-success" style="margin: 0;">
|
||||
<i class="fas fa-database"></i> {$stats.databases}
|
||||
</h3>
|
||||
<small class="text-muted">Datenbanken</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-12 text-center">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h3 class="text-info" style="margin: 0;">
|
||||
<i class="fas fa-envelope"></i> {$stats.email_accounts}
|
||||
</h3>
|
||||
<small class="text-muted">E-Mail-Konten</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{* Schnellzugriff-Button *}
|
||||
<div class="row" style="margin-top: 20px;">
|
||||
<div class="col-md-12 text-center">
|
||||
<a href="{$login_url}" target="_blank" class="btn btn-primary btn-lg">
|
||||
<i class="fas fa-sign-in-alt"></i> Jetzt zu KeyHelp einloggen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{* JavaScript für Funktionalität *}
|
||||
<script type="text/javascript">
|
||||
function togglePassword(fieldId) {
|
||||
var field = document.getElementById(fieldId);
|
||||
var icon = document.getElementById(fieldId + '-icon');
|
||||
|
||||
if (field.type === "password") {
|
||||
field.type = "text";
|
||||
icon.classList.remove('fa-eye');
|
||||
icon.classList.add('fa-eye-slash');
|
||||
} else {
|
||||
field.type = "password";
|
||||
icon.classList.remove('fa-eye-slash');
|
||||
icon.classList.add('fa-eye');
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(fieldId) {
|
||||
var field = document.getElementById(fieldId);
|
||||
field.select();
|
||||
field.setSelectionRange(0, 99999); // Für mobile Geräte
|
||||
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
|
||||
// Visuelles Feedback
|
||||
var btn = event.target.closest('button');
|
||||
var originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = '<i class="fas fa-check"></i>';
|
||||
btn.classList.add('btn-success');
|
||||
|
||||
setTimeout(function() {
|
||||
btn.innerHTML = originalHTML;
|
||||
btn.classList.remove('btn-success');
|
||||
}, 1500);
|
||||
} catch (err) {
|
||||
alert('Kopieren fehlgeschlagen. Bitte manuell kopieren.');
|
||||
}
|
||||
|
||||
// Deselektiere das Feld
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.panel {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.input-group-btn button {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
line-height: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.text-right {
|
||||
text-align: left !important;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user