commit update
This commit is contained in:
Kevin Feiler
@@ -1,258 +1,450 @@
|
||||
{**
|
||||
* KeyHelp Manager - Client Area Template
|
||||
*
|
||||
* Zeigt Login-Details und Account-Statistiken für Kunden an
|
||||
* KeyHelp Manager - Modern Client Area Template
|
||||
* @author Kevin Feiler / AVVGO
|
||||
* @copyright 2024 Kevin Feiler / AVVGO
|
||||
*}
|
||||
|
||||
<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">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
{if $error}
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-exclamation-triangle"></i> {$error}
|
||||
<style>
|
||||
.kh-container {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.kh-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
color: white;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kh-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
.kh-card-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.kh-card-subtitle {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.kh-login-btn {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: none;
|
||||
padding: 14px 28px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.kh-login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.kh-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.kh-info-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.kh-info-card:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.kh-info-label {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.kh-info-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.kh-info-input {
|
||||
flex: 1;
|
||||
border: 2px solid #e5e7eb;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
transition: all 0.2s ease;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.kh-info-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.kh-icon-btn {
|
||||
background: #f3f4f6;
|
||||
border: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.kh-icon-btn:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.kh-icon-btn.success {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.kh-stats-section {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.kh-stats-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.kh-stat-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.kh-stat-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.kh-stat-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.kh-stat-value {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
}
|
||||
|
||||
.kh-progress-bar {
|
||||
height: 8px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.kh-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 100px;
|
||||
transition: width 0.6s ease;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kh-progress-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.kh-progress-fill.warning {
|
||||
background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
|
||||
}
|
||||
|
||||
.kh-progress-fill.danger {
|
||||
background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
|
||||
}
|
||||
|
||||
.kh-metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.kh-metric {
|
||||
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.kh-metric-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.kh-metric-label {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.kh-error {
|
||||
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
|
||||
border: 1px solid #fca5a5;
|
||||
color: #991b1b;
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.kh-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 100px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.kh-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.kh-info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.kh-stat-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="kh-container">
|
||||
{if $error}
|
||||
<div class="kh-error">
|
||||
<svg width="24" height="24" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div>{$error}</div>
|
||||
</div>
|
||||
{else}
|
||||
<div class="kh-card">
|
||||
<div class="kh-card-title">
|
||||
<svg width="32" height="32" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
KeyHelp Hosting
|
||||
<span class="kh-badge">ACTIVE</span>
|
||||
</div>
|
||||
{else}
|
||||
<p class="kh-card-subtitle">{$domain}</p>
|
||||
<a href="{$login_url}" target="_blank" class="kh-login-btn">
|
||||
<svg width="18" height="18" fill="currentColor" viewBox="0 0 20 20" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
|
||||
<path fill-rule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Open Control Panel
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{* Login-Informationen *}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4><i class="fas fa-sign-in-alt"></i> Login-Informationen</h4>
|
||||
<hr>
|
||||
<div class="kh-info-grid">
|
||||
<div class="kh-info-card">
|
||||
<div class="kh-info-label">Username</div>
|
||||
<div class="kh-info-value">
|
||||
<input type="text" class="kh-info-input" value="{$username}" readonly id="kh-username">
|
||||
<button class="kh-icon-btn" onclick="copyToClipboard('kh-username')" title="Copy">
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</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 class="kh-info-card">
|
||||
<div class="kh-info-label">Password</div>
|
||||
<div class="kh-info-value">
|
||||
<input type="password" class="kh-info-input" value="{$password}" readonly id="kh-password">
|
||||
<button class="kh-icon-btn" onclick="togglePassword()" title="Show/Hide">
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20" id="eye-icon">
|
||||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
|
||||
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="kh-icon-btn" onclick="copyToClipboard('kh-password')" title="Copy">
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/>
|
||||
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top: 10px;">
|
||||
<div class="col-sm-4 text-right">
|
||||
<strong>Benutzername:</strong>
|
||||
{if $stats}
|
||||
<div class="kh-stats-section">
|
||||
<div class="kh-stats-title">
|
||||
<svg width="24" height="24" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
|
||||
</svg>
|
||||
Resource Usage
|
||||
</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 class="kh-stat-card">
|
||||
<div class="kh-stat-header">
|
||||
<span class="kh-stat-label">💾 Disk Space</span>
|
||||
<span class="kh-stat-value">{$stats.disk_used_formatted} / {$stats.disk_limit_formatted}</span>
|
||||
</div>
|
||||
<div class="kh-progress-bar">
|
||||
<div class="kh-progress-fill {if $stats.disk_percent >= 90}danger{elseif $stats.disk_percent >= 75}warning{/if}" style="width: {$stats.disk_percent}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kh-stat-card">
|
||||
<div class="kh-stat-header">
|
||||
<span class="kh-stat-label">📊 Bandwidth</span>
|
||||
<span class="kh-stat-value">{$stats.bandwidth_used_formatted} / {$stats.bandwidth_limit_formatted}</span>
|
||||
</div>
|
||||
<div class="kh-progress-bar">
|
||||
<div class="kh-progress-fill {if $stats.bandwidth_percent >= 90}danger{elseif $stats.bandwidth_percent >= 75}warning{/if}" style="width: {$stats.bandwidth_percent}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kh-metrics-grid">
|
||||
<div class="kh-metric">
|
||||
<div class="kh-metric-value">{$stats.domains}</div>
|
||||
<div class="kh-metric-label">🌐 Domains</div>
|
||||
</div>
|
||||
<div class="kh-metric">
|
||||
<div class="kh-metric-value">{$stats.databases}</div>
|
||||
<div class="kh-metric-label">🗄️ Databases</div>
|
||||
</div>
|
||||
<div class="kh-metric">
|
||||
<div class="kh-metric-value">{$stats.email_accounts}</div>
|
||||
<div class="kh-metric-label">📧 Email Accounts</div>
|
||||
</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>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{* JavaScript für Funktionalität *}
|
||||
<script type="text/javascript">
|
||||
function togglePassword(fieldId) {
|
||||
var field = document.getElementById(fieldId);
|
||||
var icon = document.getElementById(fieldId + '-icon');
|
||||
<script>
|
||||
function togglePassword() {
|
||||
const field = document.getElementById('kh-password');
|
||||
const icon = document.getElementById('eye-icon');
|
||||
|
||||
if (field.type === "password") {
|
||||
field.type = "text";
|
||||
icon.classList.remove('fa-eye');
|
||||
icon.classList.add('fa-eye-slash');
|
||||
if (field.type === 'password') {
|
||||
field.type = 'text';
|
||||
icon.innerHTML = '<path d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"/><path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"/>';
|
||||
} else {
|
||||
field.type = "password";
|
||||
icon.classList.remove('fa-eye-slash');
|
||||
icon.classList.add('fa-eye');
|
||||
field.type = 'password';
|
||||
icon.innerHTML = '<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>';
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(fieldId) {
|
||||
var field = document.getElementById(fieldId);
|
||||
const field = document.getElementById(fieldId);
|
||||
const button = event.currentTarget;
|
||||
|
||||
field.select();
|
||||
field.setSelectionRange(0, 99999); // Für mobile Geräte
|
||||
field.setSelectionRange(0, 99999);
|
||||
|
||||
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');
|
||||
button.classList.add('success');
|
||||
button.innerHTML = '<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
|
||||
|
||||
setTimeout(function() {
|
||||
btn.innerHTML = originalHTML;
|
||||
btn.classList.remove('btn-success');
|
||||
}, 1500);
|
||||
setTimeout(() => {
|
||||
button.classList.remove('success');
|
||||
button.innerHTML = '<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/><path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/></svg>';
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
alert('Kopieren fehlgeschlagen. Bitte manuell kopieren.');
|
||||
console.error('Copy failed:', err);
|
||||
}
|
||||
|
||||
// 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