Refactor email account sidebar (hestiacp#4154)

AlecRust · web-flow · commit 7a09373de3f0 · 2023-11-12T21:12:26.000Z
* 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
diff --git a/build.js b/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';
diff --git a/install/common/templates/web/skel/document_errors/403.html b/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>
diff --git a/install/common/templates/web/skel/document_errors/404.html b/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>
diff --git a/install/common/templates/web/skel/document_errors/410.html b/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>
diff --git a/install/common/templates/web/skel/document_errors/50x.html b/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
diff --git a/install/common/templates/web/skel/public_html/index.html b/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>
diff --git a/install/common/templates/web/suspend/index.html b/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>
diff --git a/install/common/templates/web/unassigned/index.html b/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>
diff --git a/web/css/src/dependencies/animate.css b/web/css/src/dependencies/animate.css
@@ -4,19 +4,13 @@
 
 :root {
 	--animate-duration: 1s;
-	--animate-delay: 1s;
 	--animate-repeat: 1;
 }
 
 .animate__animated {
 	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 {
diff --git a/web/css/src/themes/dark.css b/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
    ========================================================================== */
 
diff --git a/web/css/src/themes/default.css b/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
diff --git a/web/css/src/utilities.css b/web/css/src/utilities.css
@@ -65,10 +65,6 @@
 	white-space: nowrap !important;
 }
 
-.u-overflow {
-	overflow: auto !important;
-}
-
 .u-mt15 {
 	margin-top: 15px !important;
 }
diff --git a/web/error/403.html b/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>
diff --git a/web/error/404.html b/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>
diff --git a/web/error/410.html b/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>
diff --git a/web/error/50x.html b/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
diff --git a/web/js/src/clipboardCopy.js b/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);
+			});
+		});
+	});
+}
diff --git a/web/js/src/copyCreds.js b/web/js/src/copyCreds.js
diff --git a/web/js/src/index.js b/web/js/src/index.js
diff --git a/web/templates/includes/email-settings-panel.php b/web/templates/includes/email-settings-panel.php
diff --git a/web/templates/pages/add_mail_acc.php b/web/templates/pages/add_mail_acc.php
diff --git a/web/templates/pages/edit_mail_acc.php b/web/templates/pages/edit_mail_acc.php
diff --git a/web/templates/pages/edit_web.php b/web/templates/pages/edit_web.php
diff --git a/web/templates/pages/list_log.php b/web/templates/pages/list_log.php
