Refactor email account sidebar (#4154)

* Increase default height of "Proxy Extensions" field

* Prevent log category label wrapping

* Update comment

* Remove 1s delay before showing error text

* More consistent overflows

* Refactor email credentials sidebar

* Use dataset

* Tidy

build.js

@@ -1,7 +1,7 @@
 /* eslint-env node */
 /* eslint-disable no-console */
 
-// Build JS and CSS using esbuild and PostCSS
+// Build JS and CSS using esbuild and Lightning CSS
 import { promises as fs } from 'node:fs';
 import path from 'node:path';
 import browserslist from 'browserslist';

install/common/templates/web/skel/document_errors/403.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -107,7 +103,7 @@
 						</svg>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">Access Denied</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>You do not have permission to view this page.</p>
 						<p>Please check your credentials and try again.</p>
 						<section class="footer"><strong>Error Code:</strong> 403</section>

install/common/templates/web/skel/document_errors/404.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -107,7 +103,7 @@
 						</svg>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">Page Not Found</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>Oops! We couldn't find the page that you're looking for.</p>
 						<p>Please check the address and try again.</p>
 						<section class="footer"><strong>Error Code:</strong> 404</section>

install/common/templates/web/skel/document_errors/410.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -107,7 +103,7 @@
 						</svg>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">Resource is Gone</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>Oops! The requested resource is no longer available.</p>
 						<p>Please check the address and try again.</p>
 						<section class="footer"><strong>Error Code:</strong> 410</section>

install/common/templates/web/skel/document_errors/50x.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -107,7 +103,7 @@
 						</svg>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">Internal Server Error</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>Oops! Something went wrong.</p>
 						<p>
 							The server encountered an internal error or misconfiguration and was unable to

install/common/templates/web/skel/public_html/index.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -107,7 +103,7 @@
 						</svg>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">We're working on it!</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>This site is currently under construction.</p>
 						<p>Please check back soon.</p>
 						<section class="footer"><strong>Domain:</strong> %domain%</section>

install/common/templates/web/suspend/index.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -107,7 +103,7 @@
 						</svg>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">This site is currently suspended</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>If you are the owner of this site, please contact support for more information.</p>
 					</div>
 				</div>

install/common/templates/web/unassigned/index.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -109,7 +105,7 @@
 						</i>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">Success!</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>Your new web server is ready to use.</p>
 					</div>
 				</div>

web/css/src/dependencies/animate.css

@@ -4,7 +4,6 @@
 
 :root {
 	--animate-duration: 1s;
-	--animate-delay: 1s;
 	--animate-repeat: 1;
 }
 
@@ -12,11 +11,6 @@
 	animation-duration: 1s;
 	animation-duration: var(--animate-duration);
 	animation-fill-mode: both;
-
-	&.animate__delay-1s {
-		animation-delay: 1s;
-		animation-delay: var(--animate-delay);
-	}
 }
 
 .animate__fadeIn {

web/css/src/themes/dark.css

@@ -339,6 +339,19 @@
 	text-shadow: 0 1px rgb(0 0 0 / 95%);
 }
 
+/* Clipboard component
+   ========================================================================== */
+
+.clipboard {
+	& .clipboard-input {
+		border-color: #606060;
+	}
+}
+
+.clipboard-button {
+	background-color: #353535;
+}
+
 /* Server summary component
    ========================================================================== */
 

web/css/src/themes/default.css

@@ -1400,14 +1400,13 @@
 	.sidebar-right-grid {
 		display: grid;
 		gap: 50px;
-		grid-template-columns: 2fr 350px;
+		grid-template-columns: 2fr 340px;
 	}
 
 	.sidebar-right-grid-content {
 	}
 
 	.sidebar-right-grid-sidebar {
-		max-width: 385px;
 	}
 }
 
@@ -1950,6 +1949,43 @@
 	right: 110px;
 }
 
+/* Clipboard component
+   ========================================================================== */
+
+.clipboard {
+	display: flex;
+
+	& .clipboard-input {
+		cursor: default;
+		border-color: #e9e9e9;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}
+
+.clipboard-button {
+	display: flex;
+	align-items: center;
+	border: 0;
+	border-top-right-radius: var(--border-radius-base);
+	border-bottom-right-radius: var(--border-radius-base);
+	background-color: #e9e9e9;
+	padding-left: 8px;
+	padding-right: 8px;
+	font-size: 0.75rem;
+	color: var(--color-text);
+
+	&:hover {
+		& .fas {
+			color: var(--color-text-link-hover);
+		}
+	}
+
+	& .fas {
+		font-size: 0.8rem;
+	}
+}
+
 /* Values List component
    ========================================================================== */
 
@@ -2056,6 +2092,11 @@
 	border: 1px solid #d9d9d9;
 	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 	border-radius: var(--border-radius-base);
+
+	& .form-control {
+		box-shadow: none;
+		padding: 5px 10px;
+	}
 }
 
 /* Box collapse component

web/css/src/utilities.css

@@ -65,10 +65,6 @@
 	white-space: nowrap !important;
 }
 
-.u-overflow {
-	overflow: auto !important;
-}
-
 .u-mt15 {
 	margin-top: 15px !important;
 }

web/error/403.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -107,7 +103,7 @@
 						</svg>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">Access Denied</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>You do not have permission to view this page.</p>
 						<p>Please check your credentials and try again.</p>
 						<section class="footer"><strong>Error Code:</strong> 403</section>

web/error/404.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -107,7 +103,7 @@
 						</svg>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">Page Not Found</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>Oops! We couldn't find the page that you're looking for.</p>
 						<p>Please check the address and try again.</p>
 						<section class="footer"><strong>Error Code:</strong> 404</section>

web/error/410.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -107,7 +103,7 @@
 						</svg>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">Resource is Gone</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>Oops! The requested resource is no longer available.</p>
 						<p>Please check the address and try again.</p>
 						<section class="footer"><strong>Error Code:</strong> 410</section>

web/error/50x.html

@@ -77,10 +77,6 @@
 				font-size: 0.7em;
 			}
 
-			.animate__delay-1s {
-				animation-delay: 1s;
-			}
-
 			@keyframes fadeIn {
 				from {
 					opacity: 0;
@@ -107,7 +103,7 @@
 						</svg>
 					</div>
 					<h1 class="animate__animated animate__fadeIn">Internal Server Error</h1>
-					<div class="description-text animate__animated animate__fadeIn animate__delay-1s">
+					<div class="description-text animate__animated animate__fadeIn">
 						<p>Oops! Something went wrong.</p>
 						<p>
 							The server encountered an internal error or misconfiguration and was unable to

web/js/src/clipboardCopy.js

@@ -0,0 +1,47 @@
+export default function handleClipboardCopy() {
+	const copyInputs = document.querySelectorAll('.js-copy-input');
+	const copyButtons = document.querySelectorAll('.js-copy-button');
+
+	// Iterate over each input and button pair
+	copyInputs.forEach((copyInput, index) => {
+		let inputFocused = false;
+
+		// Ensure corresponding button exists
+		if (!copyButtons[index]) {
+			return;
+		}
+		const copyButton = copyButtons[index];
+
+		// Copy on focus and allow for partial selection
+		copyInput.addEventListener('click', () => {
+			if (!inputFocused) {
+				copyInput.select();
+				inputFocused = true;
+				// Reset inputFocused when input loses focus
+				copyInput.addEventListener(
+					'blur',
+					() => {
+						inputFocused = false;
+					},
+					{ once: true },
+				);
+			}
+		});
+
+		// Copy to clipboard on button click
+		copyButton.addEventListener('click', () => {
+			navigator.clipboard.writeText(copyInput.value).then(() => {
+				// Temporarily change button content
+				const buttonIcon = copyButton.innerHTML;
+				copyButton.innerHTML = 'Copied!';
+				copyButton.disabled = true;
+
+				// Revert button content after 2 seconds
+				setTimeout(() => {
+					copyButton.innerHTML = buttonIcon;
+					copyButton.disabled = false;
+				}, 2000);
+			});
+		});
+	});
+}

web/js/src/copyCreds.js

@@ -1,7 +1,7 @@
 import { debounce } from './helpers';
 
 // Monitor "Account" and "Password" inputs on "Add/Edit Mail Account"
-// page and update the sidebar "Account" and "Password" output
+// page and update the sidebar "Account" and "Password" inputs
 export default function handleCopyCreds() {
 	monitorAndUpdate('.js-account-input', '.js-account-output');
 	monitorAndUpdate('.js-password-input', '.js-password-output');
@@ -16,7 +16,11 @@ function monitorAndUpdate(inputSelector, outputSelector) {
 	}
 
 	function updateOutput(value) {
-		outputElement.textContent = value;
+		const postfix = outputElement.dataset.postfix;
+		if (value && postfix) {
+			value += postfix;
+		}
+		outputElement.value = value;
 	}
 
 	inputElement.addEventListener(

web/js/src/index.js

@@ -3,6 +3,7 @@ import focusFirstInput from './focusFirstInput';
 import handleAddIpLists from './addIpLists';
 import handleConfirmAction from './confirmAction';
 import handleCopyCreds from './copyCreds';
+import handleClipboardCopy from './clipboardCopy';
 import handleCronGenerator from './cronGenerator';
 import handleDatabaseHints from './databaseHints';
 import handleDiscardAllMail from './discardAllMail';
@@ -34,6 +35,7 @@ function initListeners() {
 	handleAddIpLists();
 	handleConfirmAction();
 	handleCopyCreds();
+	handleClipboardCopy();
 	handleCronGenerator();
 	handleDiscardAllMail();
 	handleDnsRecordHint();

web/templates/includes/email-settings-panel.php

@@ -0,0 +1,101 @@
+<div class="panel">
+	<h2 class="u-text-H3 u-mb10"><?= _("Common Account Settings") ?></h2>
+	<p class="u-mb10">
+		<?= _("Connect to this account using credentials:") ?>
+	</p>
+	<div class="u-mb10">
+		<label for="email_settings_username"><?= _("Username") ?></label>
+		<div class="clipboard">
+			<input type="text" class="form-control clipboard-input js-copy-input js-account-output" name="email_settings_username" id="email_settings_username" value="<?= htmlentities(trim($v_account, "'")) ?>@<?= htmlentities(trim($v_domain, "'")) ?>" data-postfix="@<?= htmlentities(trim($v_domain, "'")) ?>" readonly>
+			<button type="button" class="clipboard-button js-copy-button" title="<?= _("Copy to clipboard") ?>">
+				<i class="fas fa-copy"></i>
+			</button>
+		</div>
+	</div>
+	<div class="u-mb10">
+		<label for="email_settings_password"><?= _("Password") ?></label>
+		<div class="clipboard">
+			<input type="text" class="form-control clipboard-input js-copy-input js-password-output" name="email_settings_password" id="email_settings_password" readonly>
+			<button type="button" class="clipboard-button js-copy-button" title="<?= _("Copy to clipboard") ?>">
+				<i class="fas fa-copy"></i>
+			</button>
+		</div>
+	</div>
+	<?php if ($_SESSION["WEBMAIL_SYSTEM"]) { ?>
+		<div class="u-mb10">
+			<label for="email_settings_webmail"><?= _("Webmail") ?></label>
+			<div class="clipboard">
+				<input type="text" class="form-control clipboard-input js-copy-input" name="email_settings_webmail" id="email_settings_webmail" value="http://<?= htmlentities($v_webmail_alias) ?>" readonly>
+				<button type="button" class="clipboard-button js-copy-button" title="<?= _("Copy to clipboard") ?>">
+					<i class="fas fa-copy"></i>
+				</button>
+			</div>
+		</div>
+	<?php } ?>
+	<div class="u-mb20">
+		<label for="email_settings_hostname"><?= _("Hostname") ?></label>
+		<div class="clipboard">
+			<input type="text" class="form-control clipboard-input js-copy-input" name="email_settings_hostname" id="email_settings_hostname" value="mail.<?= htmlentities($v_domain) ?>" readonly>
+			<button type="button" class="clipboard-button js-copy-button" title="<?= _("Copy to clipboard") ?>">
+				<i class="fas fa-copy"></i>
+			</button>
+		</div>
+	</div>
+	<h2 class="u-text-H3 u-mb10"><?= _("IMAP Settings") ?></h2>
+	<ul class="values-list u-mb20">
+		<li class="values-list-item">
+			<span class="values-list-label"><?= _("Authentication") ?></span>
+			<span class="values-list-value"><?= _("Normal password") ?></span>
+		</li>
+		<li class="values-list-item">
+			<span class="values-list-label">SSL/TLS</span>
+			<span class="values-list-value"><?= _("Port") ?> 993</span>
+		</li>
+		<li class="values-list-item">
+			<span class="values-list-label">STARTTLS</span>
+			<span class="values-list-value"><?= _("Port") ?> 143</span>
+		</li>
+		<li class="values-list-item">
+			<span class="values-list-label"><?= _("No encryption") ?></span>
+			<span class="values-list-value"><?= _("Port") ?> 143</span>
+		</li>
+	</ul>
+	<h2 class="u-text-H3 u-mb10"><?= _("POP3 Settings") ?></h2>
+	<ul class="values-list u-mb20">
+		<li class="values-list-item">
+			<span class="values-list-label"><?= _("Authentication") ?></span>
+			<span class="values-list-value"><?= _("Normal password") ?></span>
+		</li>
+		<li class="values-list-item">
+			<span class="values-list-label">SSL/TLS</span>
+			<span class="values-list-value"><?= _("Port") ?> 995</span>
+		</li>
+		<li class="values-list-item">
+			<span class="values-list-label">STARTTLS</span>
+			<span class="values-list-value"><?= _("Port") ?> 110</span>
+		</li>
+		<li class="values-list-item">
+			<span class="values-list-label"><?= _("No encryption") ?></span>
+			<span class="values-list-value"><?= _("Port") ?> 110</span>
+		</li>
+	</ul>
+	<h2 class="u-text-H3 u-mb10"><?= _("SMTP Settings") ?></h2>
+	<ul class="values-list">
+		<li class="values-list-item">
+			<span class="values-list-label"><?= _("Authentication") ?></span>
+			<span class="values-list-value"><?= _("Normal password") ?></span>
+		</li>
+		<li class="values-list-item">
+			<span class="values-list-label">SSL/TLS</span>
+			<span class="values-list-value"><?= _("Port") ?> 465</span>
+		</li>
+		<li class="values-list-item">
+			<span class="values-list-label">STARTTLS</span>
+			<span class="values-list-value"><?= _("Port") ?> 587</span>
+		</li>
+		<li class="values-list-item">
+			<span class="values-list-label"><?= _("No encryption") ?></span>
+			<span class="values-list-value"><?= _("Port") ?> 25</span>
+		</li>
+	</ul>
+</div>

web/templates/pages/add_mail_acc.php

@@ -116,86 +116,7 @@
 					</div>
 				</div>
 				<div class="sidebar-right-grid-sidebar">
-					<div class="panel js-mail-info">
-						<h2 class="u-text-H3 u-mb10"><?= _("Common Account Settings") ?></h2>
-						<ul class="values-list u-mb20">
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Username") ?></span>
-								<span class="values-list-value u-overflow"><span class="js-account-output"></span>@<?= htmlentities(trim($v_domain, "'")) ?></span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Password") ?></span>
-								<span class="values-list-value u-overflow"><span class="js-password-output"></span></span>
-							</li>
-							<?php if ($_SESSION["WEBMAIL_SYSTEM"]) { ?>
-								<li class="values-list-item">
-									<span class="values-list-label"><?= _("Webmail") ?></span>
-									<span class="values-list-value"><a href="http://<?= htmlentities($v_webmail_alias) ?>" target="_blank">http://<?= htmlentities($v_webmail_alias) ?></a></span>
-								</li>
-							<?php } ?>
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Hostname") ?></span>
-								<span class="values-list-value">mail.<?= htmlentities($v_domain) ?></span>
-							</li>
-						</ul>
-						<h2 class="u-text-H3 u-mb10"><?= _("IMAP Settings") ?></h2>
-						<ul class="values-list u-mb20">
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Authentication") ?></span>
-								<span class="values-list-value"><?= _("Normal password") ?></span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">SSL/TLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 993</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">STARTTLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 143</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("No encryption") ?></span>
-								<span class="values-list-value"><?= _("Port") ?> 143</span>
-							</li>
-						</ul>
-						<h2 class="u-text-H3 u-mb10"><?= _("POP3 Settings") ?></h2>
-						<ul class="values-list u-mb20">
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Authentication") ?></span>
-								<span class="values-list-value"><?= _("Normal password") ?></span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">SSL/TLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 995</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">STARTTLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 110</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("No encryption") ?></span>
-								<span class="values-list-value"><?= _("Port") ?> 110</span>
-							</li>
-						</ul>
-						<h2 class="u-text-H3 u-mb10"><?= _("SMTP Settings") ?></h2>
-						<ul class="values-list">
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Authentication") ?></span>
-								<span class="values-list-value"><?= _("Normal password") ?></span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">SSL/TLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 465</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">STARTTLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 587</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("No encryption") ?></span>
-								<span class="values-list-value"><?= _("Port") ?> 25</span>
-							</li>
-						</ul>
-					</div>
+					<?php require $_SERVER["HESTIA"] . "/web/templates/includes/email-settings-panel.php"; ?>
 				</div>
 			</div>
 		</div>

web/templates/pages/edit_mail_acc.php

@@ -121,86 +121,7 @@
 					</div>
 				</div>
 				<div class="sidebar-right-grid-sidebar">
-					<div class="panel js-mail-info">
-						<h2 class="u-text-H3 u-mb10"><?= _("Common Account Settings") ?></h2>
-						<ul class="values-list u-mb20">
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Username") ?></span>
-								<span class="values-list-value u-overflow"><span class="js-account-output"></span>@<?= htmlentities(trim($v_domain, "'")) ?></span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Password") ?></span>
-								<span class="values-list-value u-overflow"><span class="js-password-output"></span></span>
-							</li>
-							<?php if ($_SESSION["WEBMAIL_SYSTEM"]) { ?>
-								<li class="values-list-item">
-									<span class="values-list-label"><?= _("Webmail") ?></span>
-									<span class="values-list-value"><a href="http://<?= htmlentities($v_webmail_alias) ?>" target="_blank">http://<?= htmlentities($v_webmail_alias) ?></a></span>
-								</li>
-							<?php } ?>
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Hostname") ?></span>
-								<span class="values-list-value">mail.<?= htmlentities($v_domain) ?></span>
-							</li>
-						</ul>
-						<h2 class="u-text-H3 u-mb10"><?= _("IMAP Settings") ?></h2>
-						<ul class="values-list u-mb20">
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Authentication") ?></span>
-								<span class="values-list-value"><?= _("Normal password") ?></span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">SSL/TLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 993</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">STARTTLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 143</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("No encryption") ?></span>
-								<span class="values-list-value"><?= _("Port") ?> 143</span>
-							</li>
-						</ul>
-						<h2 class="u-text-H3 u-mb10"><?= _("POP3 Settings") ?></h2>
-						<ul class="values-list u-mb20">
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Authentication") ?></span>
-								<span class="values-list-value"><?= _("Normal password") ?></span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">SSL/TLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 995</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">STARTTLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 110</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("No encryption") ?></span>
-								<span class="values-list-value"><?= _("Port") ?> 110</span>
-							</li>
-						</ul>
-						<h2 class="u-text-H3 u-mb10"><?= _("SMTP Settings") ?></h2>
-						<ul class="values-list">
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("Authentication") ?></span>
-								<span class="values-list-value"><?= _("Normal password") ?></span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">SSL/TLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 465</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label">STARTTLS</span>
-								<span class="values-list-value"><?= _("Port") ?> 587</span>
-							</li>
-							<li class="values-list-item">
-								<span class="values-list-label"><?= _("No encryption") ?></span>
-								<span class="values-list-value"><?= _("Port") ?> 25</span>
-							</li>
-						</ul>
-					</div>
+					<?php require $_SERVER["HESTIA"] . "/web/templates/includes/email-settings-panel.php"; ?>
 				</div>
 			</div>
 		</div>

web/templates/pages/edit_web.php

@@ -348,7 +348,7 @@
 							</div>
 							<div class="u-mb10">
 								<label for="v_proxy_ext" class="form-label"><?= _("Proxy Extensions") ?></label>
-								<textarea class="form-control" name="v_proxy_ext" id="v_proxy_ext"><?php if (!empty($v_proxy_ext)) { echo htmlentities(trim($v_proxy_ext, "'"));} else { echo 'jpg, jpeg, gif, png, ico, svg, css, zip, tgz, gz, rar, bz2, exe, pdf, doc, xls, ppt, txt, odt, ods, odp, odf, tar, bmp, rtf, js, mp3, avi, mpeg, flv, html, htm'; } ?></textarea>
+								<textarea class="form-control u-min-height100" name="v_proxy_ext" id="v_proxy_ext"><?php if (!empty($v_proxy_ext)) { echo htmlentities(trim($v_proxy_ext, "'"));} else { echo 'jpg, jpeg, gif, png, ico, svg, css, zip, tgz, gz, rar, bz2, exe, pdf, doc, xls, ppt, txt, odt, ods, odp, odf, tar, bmp, rtf, js, mp3, avi, mpeg, flv, html, htm'; } ?></textarea>
 							</div>
 						</div>
 					<?php } ?>

web/templates/pages/list_log.php

@@ -104,7 +104,7 @@
 				</div>
 				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("Date") ?>:</span>
-					<time datetime="<?= htmlspecialchars($data[$key]["DATE"]) ?>">
+					<time datetime="<?= htmlspecialchars($data[$key]["DATE"]) ?>" class="u-text-no-wrap">
 						<?= translate_date($data[$key]["DATE"]) ?>
 					</time>
 				</div>
@@ -116,7 +116,9 @@
 				</div>
 				<div class="units-table-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("Category") ?>:</span>
-					<?= htmlspecialchars($data[$key]["CATEGORY"]) ?>
+					<span class="u-text-no-wrap">
+						<?= htmlspecialchars($data[$key]["CATEGORY"]) ?>
+					</span>
 				</div>
 				<div class="units-table-cell">
 					<span class="u-hide-desktop u-text-bold"><?= _("Message") ?>:</span>