259 lines
10 KiB
Smarty
259 lines
10 KiB
Smarty
{**
|
|
* 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>
|