first work on dashboard template (admin and customer)

Signed-off-by: Michael Kaufmann <d00p@froxlor.org>

admin_index.php

@@ -185,7 +185,8 @@ if ($page == 'overview') {
 	}
 
 	// @fixme add all the overview/dashboard data from above
-	UI::TwigBuffer('admin/index.html.twig');
+	UI::Twig()->addGlobal('userinfo', $userinfo);
+	UI::TwigBuffer('user/index.html.twig');
 	UI::TwigOutputBuffer();
 } elseif ($page == 'change_password') {
 

customer_index.php

@@ -22,6 +22,7 @@ require './lib/init.php';
 use Froxlor\Database\Database;
 use Froxlor\Settings;
 use Froxlor\Api\Commands\Customers as Customers;
+use Froxlor\UI\Panel\UI;
 
 if ($action == 'logout') {
 	$log->logAction(\Froxlor\FroxlorLogger::USR_ACTION, LOG_NOTICE, 'logged out');
@@ -58,15 +59,11 @@ if ($page == 'overview') {
 		"standardsubdomain" => $userinfo['standardsubdomain']
 	));
 
-	$domains = '';
 	$domainArray = array();
-
 	while ($row = $domain_stmt->fetch(PDO::FETCH_ASSOC)) {
 		$domainArray[] = $idna_convert->decode($row['domain']);
 	}
-
 	natsort($domainArray);
-	$domains = implode(',<br />', $domainArray);
 
 	// standard-subdomain
 	$stdsubdomain = '';
@@ -120,21 +117,13 @@ if ($page == 'overview') {
 
 	$userinfo['custom_notes'] = ($userinfo['custom_notes'] != '') ? nl2br($userinfo['custom_notes']) : '';
 
-	$services_enabled = "";
+	UI::Twig()->addGlobal('userinfo', $userinfo);
-	$se = array();
+	UI::TwigBuffer('user/index.html.twig', [
-	if ($userinfo['imap'] == '1')
+		'domains' => $domainArray,
-		$se[] = "IMAP";
+		'stdsubdomain' => $stdsubdomain
-	if ($userinfo['pop3'] == '1')
+	]);
-		$se[] = "POP3";
+	UI::TwigOutputBuffer();
-	if ($userinfo['phpenabled'] == '1')
-		$se[] = "PHP";
-	if ($userinfo['perlenabled'] == '1')
-		$se[] = "Perl/CGI";
-	if ($userinfo['api_allowed'] == '1')
-		$se[] = '<a href="customer_index.php?s=' . $s . '&page=apikeys">API</a>';
-	$services_enabled = implode(", ", $se);
 
-	eval("echo \"" . \Froxlor\UI\Template::getTemplate('index/index') . "\";");
 } elseif ($page == 'change_password') {
 
 	if (isset($_POST['send']) && $_POST['send'] == 'send') {

lib/init.php

@@ -436,19 +436,20 @@ if (AREA == 'admin' || AREA == 'customer') {
 UI::Twig()->addGlobal('nav_entries', $navigation);
 
 $js = "";
-if (is_array($_themeoptions) && array_key_exists('js', $_themeoptions['variants'][$themevariant]) && is_array($_themeoptions['variants'][$themevariant]['js'])) {
+$css = "";
-	foreach ($_themeoptions['variants'][$themevariant]['js'] as $jsfile) {
+if (is_array($_themeoptions) && array_key_exists('js', $_themeoptions['variants'][$themevariant])) {
-		if (file_exists('templates/' . $theme . '/assets/js/' . $jsfile)) {
+	if (is_array($_themeoptions['variants'][$themevariant]['js'])) {
-			$js .= '<script type="text/javascript" src="templates/' . $theme . '/assets/js/' . $jsfile . '"></script>' . "\n";
+		foreach ($_themeoptions['variants'][$themevariant]['js'] as $jsfile) {
+			if (file_exists('templates/' . $theme . '/assets/js/' . $jsfile)) {
+				$js .= '<script type="text/javascript" src="templates/' . $theme . '/assets/js/' . $jsfile . '"></script>' . "\n";
+			}
 		}
 	}
-}
+	if (is_array($_themeoptions['variants'][$themevariant]['css'])) {
-
+		foreach ($_themeoptions['variants'][$themevariant]['css'] as $cssfile) {
-$css = "";
+			if (file_exists('templates/' . $theme . '/assets/css/' . $cssfile)) {
-if (is_array($_themeoptions) && array_key_exists('css', $_themeoptions['variants'][$themevariant]) && is_array($_themeoptions['variants'][$themevariant]['css'])) {
+				$css .= '<link href="templates/' . $theme . '/assets/css/' . $cssfile . '" rel="stylesheet" type="text/css" />' . "\n";
-	foreach ($_themeoptions['variants'][$themevariant]['css'] as $cssfile) {
+			}
-		if (file_exists('templates/' . $theme . '/assets/css/' . $cssfile)) {
-			$css .= '<link href="templates/' . $theme . '/assets/css/' . $cssfile . '" rel="stylesheet" type="text/css" />' . "\n";
 		}
 	}
 }

templates/Froxlor/admin/index.html.twig

@@ -1,20 +0,0 @@
-{% extends "Froxlor/userarea.html.twig" %}
-
-{% block content %}
-    {% if get_setting('panel.is_configured') == 0 and userinfo.adminsession == 1 and userinfo.change_serversettings == 1 %}
-        <div class="alert alert-info position-relative p-5">
-            <h3>Willkommen bei Froxlor!</h3>
-            <p class="lead mb-5">Damit Froxlor mit dem Backend vernünftig kommunizieren kann, musst du dieses noch Konfigurieren.</p>
-            <a class="btn btn-lg btn-light text-info" href="{{ linker({'section': 'configfiles', 'page': 'configfiles'}) }}">Jetzt konfigurieren</a>
-            <aside class="position-absolute bottom-0 end-0 p-5">
-                <i class="fa fa-hat-wizard fa-5x"></i>
-            </aside>
-        </div>
-    {% endif %}
-
-    <div class="card">
-        <div class="card-body">
-            <p>Test</p>
-        </div>
-    </div>
-{% endblock %}

templates/Froxlor/config.json

@@ -15,7 +15,7 @@
 			"css": [
 				"main.css",
 				"dark.css",
-                "custom.css"
+				"custom.css"
 			],
 			"js": [
 				"main.js",

templates/Froxlor/footer.html.twig

@@ -8,7 +8,7 @@
 				{{ call_static('\\Froxlor\\Froxlor', 'getFullVersion') }}
 			{% endif %}
 		{% endif %}
-		&copy; 2009-{{ "now"|date("Y") }} by <a href="https://www.froxlor.org/" rel="external">the Froxlor Team</a>
+		&copy; 2009-{{ "now"|date("Y") }} by <a href="https://www.froxlor.org/" rel="external">the Froxlor Team</a><br>
 		{% if install_mode is not defined %}
 			{% if (get_setting('panel.imprint_url') != '') %}
 				<a href="{{ get_setting('panel.imprint_url') }}" target="_blank" class="footer-link">{{ lng('imprint') }}</a>

templates/Froxlor/sidebarmenu.html.twig

@@ -11,7 +11,7 @@
 							<ul class="flex-column ps-3 nav">
 								{% for item in mitems.items %}
 									<li class="nav-item">
-										<a class="nav-link text-light pb-0 {% if item.active == 1 %}font-weight-bold{% endif %}" href="{{ item.url }}">{{ item.label }}</a>
+										<a class="nav-link text-light pb-0 {% if item.active == 1 %}font-weight-bold{% endif %}" href="{{ item.url|raw }}">{{ item.label }}</a>
 									</li>
 								{% endfor %}
 							</ul>
@@ -19,7 +19,7 @@
 					</li>
 				{% else %}
 					<li class="nav-item">
-						<a class="nav-link text-light {% if mitems.active == 1 %}active{% endif %}" href="{% if mitems.url is not empty %}{{ mitems.url }}{% else %}#{% endif %}" {% if mitems.target is not empty %} target="{{ mitems.target }}" {% endif %}>
+						<a class="nav-link text-light {% if mitems.active == 1 %}active{% endif %}" href="{% if mitems.url is not empty %}{{ mitems.url|raw }}{% else %}#{% endif %}" {% if mitems.target is not empty %} target="{{ mitems.target }}" {% endif %}>
 							{% if mitems.icon is not empty %}
 								<span class="{{ mitems.icon }}"></span>
 							{% endif %}
@@ -32,15 +32,15 @@
 	<hr>
 	<div class="dropdown">
 		<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
-			<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
+			<i class="fa-solid fa-user me-3"></i>
-			<strong>d00p</strong>
+			<strong>{{ userinfo.loginname }}</strong>
 		</a>
 		<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
 			<li><a class="dropdown-item" href="#">New project...</a></li>
 			<li><a class="dropdown-item" href="#">Settings</a></li>
 			<li><a class="dropdown-item" href="#">Profile</a></li>
 			<li><hr class="dropdown-divider"></li>
-			<li><a class="dropdown-item" href="#">Sign out</a></li>
+			<li><a class="dropdown-item" href="{{ linker({'section': 'index', 'action': 'logout'}) }}">{{ lng('login.logout') }}</a></li>
 		</ul>
 	</div>
-</div>
+</div>

templates/Froxlor/user/index.html.twig

@@ -0,0 +1,168 @@
+{% extends "Froxlor/userarea.html.twig" %}
+
+{% block content %}
+	{% if get_setting('panel.is_configured') == 0 and userinfo.adminsession == 1 and userinfo.change_serversettings == 1 %}
+		<div class="alert alert-info position-relative p-5">
+			<h3>Willkommen bei Froxlor!</h3>
+			<p class="lead mb-5">Damit Froxlor mit dem Backend vernünftig kommunizieren kann, musst du dieses noch Konfigurieren.</p>
+			<a class="btn btn-lg btn-light text-info" href="{{ linker({'section': 'configfiles', 'page': 'configfiles'}) }}">Jetzt konfigurieren</a>
+			<aside class="position-absolute bottom-0 end-0 p-5">
+				<i class="fa fa-hat-wizard fa-5x"></i>
+			</aside>
+		</div>
+	{% endif %}
+
+	<div class="row">
+		<div class="col-12 col-md-8">
+			<div class="card">
+				<div class="card-body">
+					<p>Test</p>
+				</div>
+			</div>
+		</div>
+		<div class="col-12 col-md-4">
+
+			{% if (userinfo.adminsession == 1 and get_setting('admin.show_news_feed') == 1) or (userinfo.adminsession == 0 and get_setting('customer.show_news_feed') == 1) %}
+				{# newsfeed #}
+			{% endif %}
+
+			{% if userinfo.adminsession == 1 %}
+				{# custom notes #}
+				{% if userinfo.custom_notes is not empty and userinfo.custom_notes_show == 1 %}
+					<div class="card bg-info text-dark">
+						<div class="card-body">
+							{{ userinfo.custom_notes }}
+						</div>
+					</div>
+				{% endif %}
+
+				{# systemdetails #}
+
+			{% else %}
+
+				{# account info #}
+				<div class="card">
+					<div class="card-header">
+						<i class="fa-solid fa-user"></i>
+						{{ lng('index.accountdetails') }}
+					</div>
+					<div class="card-body">
+						<ul class="list-group list-group-flush">
+							<li class="list-group-item d-flex justify-content-between align-items-start">
+								<div class="ms-2 me-auto">
+									<div class="fw-bold">{{ lng('login.username') }}</div>
+									{{ userinfo.loginname }}
+								</div>
+							</li>
+							<li class="list-group-item d-flex justify-content-between align-items-start">
+								<div class="ms-2 me-auto">
+									<div class="fw-bold">{{ lng('customer.email') }}</div>
+									{{ userinfo.email }}
+								</div>
+							</li>
+							<li class="list-group-item d-flex justify-content-between align-items-start">
+								<div class="ms-2 me-auto">
+									<div class="fw-bold">{{ lng('customer.services') }}</div>
+									{% if userinfo.imap == 1 %}
+										<span class="badge bg-success">IMAP</span>
+									{% endif %}
+									{% if userinfo.pop3 == 1 %}
+										<span class="badge bg-success">POP3</span>
+									{% endif %}
+									{% if userinfo.phpenabled == 1 %}
+										<span class="badge bg-success">PHP</span>
+									{% endif %}
+									{% if userinfo.perlenabled == 1 %}
+										<span class="badge bg-success">Perl/CGI</span>
+									{% endif %}
+									{% if userinfo.api_allowed == 1 %}
+										<a href="{{ linker({'section':'index','page':'apikeys'}) }}">
+											<span class="badge bg-success">API</span>
+										</a>
+									{% endif %}
+								</div>
+							</li>
+							{% if stdsubdomain is not empty %}
+								<li class="list-group-item d-flex justify-content-between align-items-start">
+									<div class="ms-2 me-auto">
+										<div class="fw-bold">{{ lng('admin.stdsubdomain') }}</div>
+										{{ stdsubdomain }}
+									</div>
+								</li>
+							{% endif %}
+							<li class="list-group-item d-flex justify-content-between align-items-start">
+								<div class="ms-2 me-auto">
+									<div class="fw-bold">{{ lng('customer.domains') }}</div>
+									{% for domain in domains %}
+										{{ domain }}<br>
+									{% endfor %}
+								</div>
+								<span class="badge bg-primary rounded-pill">{{ domains|length }}</span>
+							</li>
+						</ul>
+					</div>
+				</div>
+
+				<div class="card mt-3">
+					<div class="card-header">
+						<i class="fa-solid fa-id-card"></i>
+						{{ lng('index.customerdetails') }}
+					</div>
+					<div class="card-body">
+						<ul class="list-group list-group-flush">
+							{% if userinfo.customernumber is not empty %}
+								<li class="list-group-item d-flex justify-content-between align-items-start">
+									<div class="ms-2 me-auto">
+										<div class="fw-bold">{{ lng('customer.customernumber') }}</div>
+										{{ userinfo.customernumber }}
+									</div>
+								</li>
+							{% endif %}
+							{% if userinfo.company is not empty %}
+								<li class="list-group-item d-flex justify-content-between align-items-start">
+									<div class="ms-2 me-auto">
+										<div class="fw-bold">{{ lng('customer.company') }}</div>
+										{{ userinfo.company }}
+									</div>
+								</li>
+							{% endif %}
+							{% if userinfo.name is not empty %}
+								<li class="list-group-item d-flex justify-content-between align-items-start">
+									<div class="ms-2 me-auto">
+										<div class="fw-bold">{{ lng('customer.name') }}</div>
+										{{ userinfo.firstname }}
+										{{ userinfo.name }}
+									</div>
+								</li>
+							{% endif %}
+							{% if userinfo.street is not empty %}
+								<li class="list-group-item d-flex justify-content-between align-items-start">
+									<div class="ms-2 me-auto">
+										<div class="fw-bold">{{ lng('customer.street') }}</div>
+										{{ userinfo.street }}
+									</div>
+								</li>
+							{% endif %}
+							{% if userinfo.city is not empty %}
+								<li class="list-group-item d-flex justify-content-between align-items-start">
+									<div class="ms-2 me-auto">
+										<div class="fw-bold">{{ lng('customer.zipcode') }}/{{ lng('customer.city') }}</div>
+										{{ userinfo.zipcode }}
+										{{ userinfo.city }}
+									</div>
+								</li>
+							{% endif %}
+							{% if userinfo.custom_notes is not empty and userinfo.custom_notes_show == 1 %}
+								<li class="list-group-item list-group-item-info d-flex justify-content-between align-items-start">
+									<div class="ms-2 me-auto">
+										{{ userinfo.custom_notes }}
+									</div>
+								</li>
+							{% endif %}
+						</ul>
+					</div>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+{% endblock %}