mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
enhance ui
*minify css and js *add password svg dark mode * w3c validation : remove aria-checked, update some roles and aria-label, avoid duplicate id, add roles and descriptions, update script... *fix live / date choice disabled class on logs page
This commit is contained in:
Jordan Blasenhauer
parent
e3d21c647a
commit
29c88027ee
26 changed files with 340 additions and 4886 deletions
File diff suppressed because one or more lines are too long
|
|
@ -1,284 +1,3 @@
|
|||
.datepicker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.datepicker.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.datepicker-dropdown {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.datepicker-dropdown.datepicker-orient-top {
|
||||
padding-top: 0;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.datepicker-picker {
|
||||
display: inline-block;
|
||||
border-radius: 0;
|
||||
background-color: #fefefe;
|
||||
}
|
||||
|
||||
.datepicker-dropdown .datepicker-picker {
|
||||
box-shadow: 0 0 0 1px #cacaca;
|
||||
}
|
||||
|
||||
.datepicker-picker span {
|
||||
display: block;
|
||||
flex: 1;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.datepicker-main {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.datepicker-footer {
|
||||
box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.datepicker-grid,
|
||||
.datepicker-view .days-of-week,
|
||||
.datepicker-view,
|
||||
.datepicker-controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.datepicker-grid {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.datepicker-view .days .datepicker-cell,
|
||||
.datepicker-view .dow {
|
||||
flex-basis: 14.2857142857%;
|
||||
}
|
||||
|
||||
.datepicker-view.datepicker-grid .datepicker-cell {
|
||||
flex-basis: 25%;
|
||||
}
|
||||
|
||||
.datepicker-cell,
|
||||
.datepicker-view .week {
|
||||
height: 2.25rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.datepicker-title {
|
||||
box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
|
||||
background-color: #e6e6e6;
|
||||
padding: 0.375rem 0.75rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.datepicker-header .datepicker-controls {
|
||||
padding: 2px 2px 0;
|
||||
}
|
||||
|
||||
.datepicker-controls .button {
|
||||
margin: 0;
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
|
||||
background-color: #fefefe;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.datepicker-controls .button:hover,
|
||||
.datepicker-controls .button:focus {
|
||||
background-color: #d8d8d8;
|
||||
}
|
||||
|
||||
.datepicker-controls .button:hover[disabled],
|
||||
.datepicker-controls .button:focus[disabled] {
|
||||
opacity: 0.25;
|
||||
background-color: #fefefe;
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.datepicker-header .datepicker-controls .button {
|
||||
border-color: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.datepicker-footer .datepicker-controls .button {
|
||||
margin: calc(0.375rem - 1px) 0.375rem;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.datepicker-controls .view-switch {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.datepicker-controls .prev-btn,
|
||||
.datepicker-controls .next-btn {
|
||||
padding-right: 0.375rem;
|
||||
padding-left: 0.375rem;
|
||||
width: 2.25rem;
|
||||
}
|
||||
|
||||
.datepicker-controls .prev-btn.disabled,
|
||||
.datepicker-controls .next-btn.disabled {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.datepicker-view .dow {
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
color: #064059;
|
||||
}
|
||||
|
||||
.datepicker-view .week {
|
||||
width: 2.25rem;
|
||||
color: #8a8a8a;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 22.5rem) {
|
||||
.datepicker-view .week {
|
||||
width: 1.96875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-grid {
|
||||
width: 15.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 22.5rem) {
|
||||
.calendar-weeks + .days .datepicker-grid {
|
||||
width: 13.78125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-cell:not(.disabled):hover {
|
||||
background-color: #f8f8f8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.datepicker-cell.focused:not(.selected) {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.datepicker-cell.selected,
|
||||
.datepicker-cell.selected:hover {
|
||||
background-color: #1779ba;
|
||||
color: #fefefe;
|
||||
font-weight: semibold;
|
||||
}
|
||||
|
||||
.datepicker-cell.disabled {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.datepicker-cell.prev:not(.disabled),
|
||||
.datepicker-cell.next:not(.disabled) {
|
||||
color: #cacaca;
|
||||
}
|
||||
|
||||
.datepicker-cell.prev.selected,
|
||||
.datepicker-cell.next.selected {
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
|
||||
border-radius: 0;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(
|
||||
.disabled
|
||||
):hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.datepicker-cell.today:not(.selected) {
|
||||
background-color: #d7ecfa;
|
||||
}
|
||||
|
||||
.datepicker-cell.today:not(.selected):not(.disabled) {
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
.datepicker-cell.today.focused:not(.selected) {
|
||||
background-color: #cbe7f9;
|
||||
}
|
||||
|
||||
.datepicker-cell.range-end:not(.selected),
|
||||
.datepicker-cell.range-start:not(.selected) {
|
||||
background-color: #767676;
|
||||
color: #fefefe;
|
||||
}
|
||||
|
||||
.datepicker-cell.range-end.focused:not(.selected),
|
||||
.datepicker-cell.range-start.focused:not(.selected) {
|
||||
background-color: #707070;
|
||||
}
|
||||
|
||||
.datepicker-cell.range-start {
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.datepicker-cell.range-end {
|
||||
border-radius: 0 0 0 0;
|
||||
}
|
||||
|
||||
.datepicker-cell.range {
|
||||
border-radius: 0;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.datepicker-cell.range.disabled {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
|
||||
.datepicker-cell.range.focused {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
|
||||
.datepicker-cell.range.today {
|
||||
background-color: #b3dbf6;
|
||||
}
|
||||
|
||||
.datepicker-view.datepicker-grid .datepicker-cell {
|
||||
height: 4.5rem;
|
||||
line-height: 4.5rem;
|
||||
}
|
||||
|
||||
.datepicker-input.in-edit {
|
||||
border-color: #a4a4a4;
|
||||
}
|
||||
|
||||
.datepicker-input.in-edit:focus,
|
||||
.datepicker-input.in-edit:active {
|
||||
box-shadow: 0 0 0.25em 0.25em rgba(164, 164, 164, 0.2);
|
||||
}
|
||||
.datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{position:absolute;top:0;left:0;z-index:100;padding-top:4px}.datepicker-dropdown.datepicker-orient-top{padding-top:0;padding-bottom:4px}.datepicker-picker{display:inline-block;border-radius:0;background-color:#fefefe}.datepicker-dropdown .datepicker-picker{box-shadow:0 0 0 1px #cacaca}.datepicker-picker span{display:block;flex:1;border:0;border-radius:0;cursor:default;text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{box-shadow:inset 0 1px 1px rgba(10,10,10,.1);background-color:#e6e6e6}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap;width:15.75rem}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%;height:4.5rem;line-height:4.5rem}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{box-shadow:inset 0 -1px 1px rgba(10,10,10,.1);background-color:#e6e6e6;padding:.375rem .75rem;text-align:center;font-weight:700}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{margin:.4rem 0;background-color:#fefefe;color:#707070}.datepicker-controls .button:focus,.datepicker-controls .button:hover{background-color:#d8d8d8}.datepicker-controls .button:focus[disabled],.datepicker-controls .button:hover[disabled]{opacity:.25;background-color:#fefefe;margin-top:.4rem;margin-bottom:.4rem;color:#707070}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-footer .datepicker-controls .button{margin:calc(.375rem - 1px) .375rem;border-radius:0;width:100%;font-size:.75rem}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-right:.375rem;padding-left:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{height:1.5rem;line-height:1.5rem;font-size:.875rem;font-weight:700;color:#064059}.datepicker-view .week{width:2.25rem;color:#8a8a8a;font-size:.75rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f8f8f8;cursor:pointer}.datepicker-cell.focused:not(.selected),.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused,.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(
|
||||
.disabled
|
||||
):hover{background-color:#f1f1f1}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#1779ba;color:#fefefe;font-weight:semibold}.datepicker-cell.disabled{color:#e6e6e6}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#cacaca}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e5e5e5}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){border-radius:0;background-color:#f7f7f7}.datepicker-cell.today:not(.selected){background-color:#d7ecfa}.datepicker-cell.today:not(.selected):not(.disabled){color:#8a8a8a}.datepicker-cell.today.focused:not(.selected){background-color:#cbe7f9}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#767676;color:#fefefe}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#707070}.datepicker-cell.range-end,.datepicker-cell.range-start{border-radius:0}.datepicker-cell.range{border-radius:0;background-color:#e6e6e6}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#e0e0e0}.datepicker-cell.range.disabled{color:#cdcdcd}.datepicker-cell.range.focused{background-color:#d9d9d9}.datepicker-cell.range.today{background-color:#b3dbf6}.datepicker-input.in-edit{border-color:#a4a4a4}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em rgba(164,164,164,.2)}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,10 @@
|
|||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("../webfonts/OpenSans.ttf");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "Open Sans", sans-serif !important;
|
||||
font-display: swap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,15 +27,21 @@ class Menu {
|
|||
toggle() {
|
||||
this.sidebarEl.classList.toggle("-translate-x-full");
|
||||
if (this.sidebarEl.classList.contains("-translate-x-full")) {
|
||||
this.sidebarEl.setAttribute("aria-expanded", "false");
|
||||
this.sidebarEl.setAttribute("aria-hidden", "true");
|
||||
this.toggleBtn.setAttribute("aria-expanded", "false");
|
||||
this.closeBtn.setAttribute("aria-expanded", "false");
|
||||
} else {
|
||||
this.sidebarEl.setAttribute("aria-expanded", "true");
|
||||
this.sidebarEl.setAttribute("aria-hidden", "false");
|
||||
this.toggleBtn.setAttribute("aria-expanded", "true");
|
||||
this.closeBtn.setAttribute("aria-expanded", "true");
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.toggleBtn.setAttribute("aria-expanded", "false");
|
||||
this.closeBtn.setAttribute("aria-expanded", "false");
|
||||
this.sidebarEl.classList.add("-translate-x-full");
|
||||
this.sidebarEl.setAttribute("aria-expanded", "false");
|
||||
this.sidebarEl.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -105,9 +111,9 @@ class News {
|
|||
src="${img}"
|
||||
alt="image"
|
||||
/>
|
||||
<h3 role="link"
|
||||
<span role="link"
|
||||
onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
|
||||
class="cursor-pointer mt-3 mb-1 text-xl dark:text-white tracking-wide">${title}</h3>
|
||||
class="cursor-pointer mt-3 mb-1 text-xl dark:text-white tracking-wide">${title}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div role="link"
|
||||
|
|
@ -137,23 +143,29 @@ class Sidebar {
|
|||
this.closeBtn = document.querySelector(btnCloseAtt);
|
||||
this.openBtn.addEventListener("click", this.open.bind(this));
|
||||
this.closeBtn.addEventListener("click", this.close.bind(this));
|
||||
init();
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.sidebarEl.setAttribute("aria-expand", "false");
|
||||
this.openBtn.setAttribute("aria-expanded", "false");
|
||||
this.closeBtn.setAttribute("aria-expanded", "false");
|
||||
this.sidebarEl.setAttribute("aria-hidden", "false");
|
||||
}
|
||||
|
||||
open() {
|
||||
this.openBtn.setAttribute("aria-expanded", "true");
|
||||
this.closeBtn.setAttribute("aria-expanded", "true");
|
||||
this.sidebarEl.classList.add("translate-x-0");
|
||||
this.sidebarEl.classList.remove("translate-x-90");
|
||||
this.sidebarEl.setAttribute("aria-expand", "true");
|
||||
this.sidebarEl.setAttribute("aria-hidden", "false");
|
||||
}
|
||||
|
||||
close() {
|
||||
this.openBtn.setAttribute("aria-expanded", "false");
|
||||
this.closeBtn.setAttribute("aria-expanded", "false");
|
||||
this.sidebarEl.classList.add("translate-x-90");
|
||||
this.sidebarEl.classList.remove("translate-x-0");
|
||||
this.sidebarEl.setAttribute("aria-expand", "false");
|
||||
this.sidebarEl.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -390,26 +402,25 @@ class Banner {
|
|||
}
|
||||
}
|
||||
|
||||
const setCheckbox = new Checkbox();
|
||||
const setSelect = new Select();
|
||||
const setPassword = new Password();
|
||||
const setDisabledPop = new DisabledPop();
|
||||
const setNews = new News();
|
||||
const setDarkM = new darkMode();
|
||||
const setFlash = new FlashMsg();
|
||||
const setBanner = new Banner();
|
||||
const setLoader = new Loader();
|
||||
const setMenu = new Menu();
|
||||
|
||||
const setNewsSidebar = new Sidebar(
|
||||
"[data-sidebar-info]",
|
||||
"[data-sidebar-info-open]",
|
||||
"[data-sidebar-info-close]"
|
||||
);
|
||||
|
||||
const setCheckbox = new Checkbox();
|
||||
const setSelect = new Select();
|
||||
const setPassword = new Password();
|
||||
const setDisabledPop = new DisabledPop();
|
||||
|
||||
const setFlashSidebar = new Sidebar(
|
||||
"[data-flash-sidebar]",
|
||||
"[data-flash-sidebar-open]",
|
||||
"[data-flash-sidebar-close]"
|
||||
);
|
||||
const setNews = new News();
|
||||
const setDarkM = new darkMode();
|
||||
const setFlash = new FlashMsg();
|
||||
|
||||
const setBanner = new Banner();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { Checkbox, Select } from "./utils/form.js";
|
||||
|
||||
class Dropdown {
|
||||
constructor(prefix = "logs") {
|
||||
this.prefix = prefix;
|
||||
|
|
@ -37,7 +35,7 @@ class Dropdown {
|
|||
const btn = e.target.closest("button");
|
||||
const btnValue = btn.getAttribute("value");
|
||||
const btnSetting = btn.getAttribute(
|
||||
`data-${this.prefix}-setting-select-dropdown-btn`,
|
||||
`data-${this.prefix}-setting-select-dropdown-btn`
|
||||
);
|
||||
//stop if same value to avoid new fetching
|
||||
const isSameVal = this.isSameValue(btnSetting, btnValue);
|
||||
|
|
@ -58,7 +56,7 @@ class Dropdown {
|
|||
|
||||
closeAllDrop() {
|
||||
const drops = document.querySelectorAll(
|
||||
`[data-${this.prefix}-setting-select-dropdown]`,
|
||||
`[data-${this.prefix}-setting-select-dropdown]`
|
||||
);
|
||||
drops.forEach((drop) => {
|
||||
drop.classList.add("hidden");
|
||||
|
|
@ -66,8 +64,8 @@ class Dropdown {
|
|||
document
|
||||
.querySelector(
|
||||
`svg[data-${this.prefix}-setting-select="${drop.getAttribute(
|
||||
`data-${this.prefix}-setting-select-dropdown`,
|
||||
)}"]`,
|
||||
`data-${this.prefix}-setting-select-dropdown`
|
||||
)}"]`
|
||||
)
|
||||
.classList.remove("rotate-180");
|
||||
});
|
||||
|
|
@ -75,7 +73,7 @@ class Dropdown {
|
|||
|
||||
isSameValue(btnSetting, value) {
|
||||
const selectCustom = document.querySelector(
|
||||
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`,
|
||||
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`
|
||||
);
|
||||
const currVal = selectCustom.textContent;
|
||||
return currVal === value ? true : false;
|
||||
|
|
@ -83,30 +81,30 @@ class Dropdown {
|
|||
|
||||
setSelectNewValue(btnSetting, value) {
|
||||
const selectCustom = document.querySelector(
|
||||
`[data-${this.prefix}-setting-select="${btnSetting}"]`,
|
||||
`[data-${this.prefix}-setting-select="${btnSetting}"]`
|
||||
);
|
||||
selectCustom.querySelector(
|
||||
`[data-${this.prefix}-setting-select-text]`,
|
||||
`[data-${this.prefix}-setting-select-text]`
|
||||
).textContent = value;
|
||||
}
|
||||
|
||||
hideDropdown(btnSetting) {
|
||||
//hide dropdown
|
||||
const dropdownEl = document.querySelector(
|
||||
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
|
||||
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`
|
||||
);
|
||||
dropdownEl.classList.add("hidden");
|
||||
dropdownEl.classList.remove("flex");
|
||||
//svg effect
|
||||
const dropdownChevron = document.querySelector(
|
||||
`svg[data-${this.prefix}-setting-select="${btnSetting}"]`,
|
||||
`svg[data-${this.prefix}-setting-select="${btnSetting}"]`
|
||||
);
|
||||
dropdownChevron.classList.remove("rotate-180");
|
||||
}
|
||||
|
||||
changeDropBtnStyle(btnSetting, selectedBtn) {
|
||||
const dropdownEl = document.querySelector(
|
||||
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
|
||||
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`
|
||||
);
|
||||
//reset dropdown btns
|
||||
const btnEls = dropdownEl.querySelectorAll("button");
|
||||
|
|
@ -116,7 +114,7 @@ class Dropdown {
|
|||
"bg-primary",
|
||||
"dark:bg-primary",
|
||||
"text-gray-300",
|
||||
"text-gray-300",
|
||||
"text-gray-300"
|
||||
);
|
||||
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
|
||||
});
|
||||
|
|
@ -124,7 +122,7 @@ class Dropdown {
|
|||
selectedBtn.classList.remove(
|
||||
"bg-white",
|
||||
"dark:bg-slate-700",
|
||||
"text-gray-700",
|
||||
"text-gray-700"
|
||||
);
|
||||
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
|
||||
}
|
||||
|
|
@ -135,10 +133,10 @@ class Dropdown {
|
|||
.getAttribute(`data-${this.prefix}-setting-select`);
|
||||
//toggle dropdown
|
||||
const dropdownEl = document.querySelector(
|
||||
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`,
|
||||
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`
|
||||
);
|
||||
const dropdownChevron = document.querySelector(
|
||||
`svg[data-${this.prefix}-setting-select="${attribute}"]`,
|
||||
`svg[data-${this.prefix}-setting-select="${attribute}"]`
|
||||
);
|
||||
dropdownEl.classList.toggle("hidden");
|
||||
dropdownEl.classList.toggle("flex");
|
||||
|
|
@ -173,7 +171,7 @@ class FetchLogs {
|
|||
constructor(prefix = "logs") {
|
||||
this.prefix = prefix;
|
||||
this.instance = document.querySelector(
|
||||
`[data-${this.prefix}-setting-select-text="instances"]`,
|
||||
`[data-${this.prefix}-setting-select-text="instances"]`
|
||||
);
|
||||
this.instanceName = "";
|
||||
this.updateInp = document.querySelector("input#update-date");
|
||||
|
|
@ -188,7 +186,7 @@ class FetchLogs {
|
|||
this.lastUpdate = Date.now() - 86400000;
|
||||
this.container = document.querySelector(`[data-${this.prefix}-settings]`);
|
||||
this.logListContainer = document.querySelector(
|
||||
`[data-${this.prefix}-list]`,
|
||||
`[data-${this.prefix}-list]`
|
||||
);
|
||||
this.submitDate = document.querySelector("button[data-submit-date]");
|
||||
this.submitLive = document.querySelector("button[data-submit-live]");
|
||||
|
|
@ -218,7 +216,7 @@ class FetchLogs {
|
|||
"data-submit-live",
|
||||
this.submitLive.getAttribute("data-submit-live") === "yes"
|
||||
? "no"
|
||||
: "yes",
|
||||
: "yes"
|
||||
);
|
||||
|
||||
if (this.submitLive.getAttribute("data-submit-live") === "yes") {
|
||||
|
|
@ -275,8 +273,8 @@ class FetchLogs {
|
|||
});
|
||||
|
||||
//live update disabled if to date is set
|
||||
this.liveUpdateInp.addEventListener("input", (e) => {
|
||||
this.liveUpdateInp.checked
|
||||
this.liveUpdateInp.addEventListener("change", (e) => {
|
||||
this.liveUpdateInp.getAttribute("value") === "yes"
|
||||
? this.toDateInp.setAttribute("disabled", "")
|
||||
: this.toDateInp.removeAttribute("disabled");
|
||||
});
|
||||
|
|
@ -314,7 +312,7 @@ class FetchLogs {
|
|||
.querySelector(`[data-${this.prefix}-list]`)
|
||||
.scrollTo(
|
||||
0,
|
||||
document.querySelector(`[data-${this.prefix}-list]`).scrollHeight,
|
||||
document.querySelector(`[data-${this.prefix}-list]`).scrollHeight
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -323,7 +321,7 @@ class FetchLogs {
|
|||
//case from date defined only
|
||||
if (this.toDate) {
|
||||
res = await fetch(
|
||||
`${location.href}/${this.instanceName}?from_date=${this.fromDate}&to_date=${this.toDate}`,
|
||||
`${location.href}/${this.instanceName}?from_date=${this.fromDate}&to_date=${this.toDate}`
|
||||
);
|
||||
const data = await res.json();
|
||||
return await this.showLogsDate(data);
|
||||
|
|
@ -331,7 +329,7 @@ class FetchLogs {
|
|||
//case from date and to date defined
|
||||
if (!this.toDate) {
|
||||
res = await fetch(
|
||||
`${location.href}/${this.instanceName}?from_date=${this.fromDate}`,
|
||||
`${location.href}/${this.instanceName}?from_date=${this.fromDate}`
|
||||
);
|
||||
const data = await res.json();
|
||||
return await this.showLogsDate(data);
|
||||
|
|
@ -341,7 +339,7 @@ class FetchLogs {
|
|||
async getLogsSinceLastUpdate() {
|
||||
const response = await fetch(
|
||||
`${location.href}/${this.instanceName}` +
|
||||
(this.lastUpdate ? `?last_update=${this.lastUpdate}` : ""),
|
||||
(this.lastUpdate ? `?last_update=${this.lastUpdate}` : "")
|
||||
);
|
||||
const data = await response.json();
|
||||
return await this.showLogsLive(data);
|
||||
|
|
@ -437,7 +435,7 @@ class Filter {
|
|||
const btn = e.target.closest("button");
|
||||
const btnValue = btn.getAttribute("value");
|
||||
const btnSetting = btn.getAttribute(
|
||||
`data-${this.prefix}-setting-select-dropdown-btn`,
|
||||
`data-${this.prefix}-setting-select-dropdown-btn`
|
||||
);
|
||||
|
||||
this.lastType = btnValue;
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ class ServiceModal {
|
|||
//modal forms
|
||||
this.formNewEdit = this.modal.querySelector("[data-services-modal-form]");
|
||||
this.formDelete = this.modal.querySelector(
|
||||
"[data-services-modal-form-delete]",
|
||||
"[data-services-modal-form-delete]"
|
||||
);
|
||||
this.submitBtn = document.querySelector(
|
||||
"button[data-services-modal-submit]",
|
||||
"button[data-services-modal-submit]"
|
||||
);
|
||||
//container
|
||||
this.container = document.querySelector("main");
|
||||
|
|
@ -134,7 +134,7 @@ class ServiceModal {
|
|||
"delete-btn",
|
||||
"valid-btn",
|
||||
"edit-btn",
|
||||
"info-btn",
|
||||
"info-btn"
|
||||
);
|
||||
this.submitBtn.classList.add(btnType);
|
||||
}
|
||||
|
|
@ -158,9 +158,20 @@ class ServiceModal {
|
|||
|
||||
//SET VALUE
|
||||
if (inp.getAttribute("type") === "checkbox") {
|
||||
defaultVal === "yes"
|
||||
? inp.setAttribute("aria-checked", "true")
|
||||
: inp.setAttribute("aria-checked", "false");
|
||||
try {
|
||||
if (inp.hasAttribute("aria-checked")) {
|
||||
defaultVal === "yes"
|
||||
? inp.setAttribute("aria-checked", "true")
|
||||
: inp.setAttribute("aria-checked", "false");
|
||||
}
|
||||
} catch (err) {}
|
||||
|
||||
try {
|
||||
defaultVal === "yes"
|
||||
? inp.setAttribute("data-checked", "true")
|
||||
: inp.setAttribute("data-checked", "false");
|
||||
} catch (err) {}
|
||||
|
||||
inp.setAttribute("value", defaultVal);
|
||||
inp.setAttribute("data-method", defaultMethod);
|
||||
inp.checked = true;
|
||||
|
|
@ -183,15 +194,15 @@ class ServiceModal {
|
|||
//click the custom select dropdown to update select value
|
||||
select.parentElement
|
||||
.querySelector(
|
||||
`button[data-setting-select-dropdown-btn][value='${defaultVal}']`,
|
||||
`button[data-setting-select-dropdown-btn][value='${defaultVal}']`
|
||||
)
|
||||
.click();
|
||||
|
||||
//set state to custom visible el
|
||||
const btnCustom = document.querySelector(
|
||||
`[data-setting-select=${select.getAttribute(
|
||||
"data-setting-select-default",
|
||||
)}]`,
|
||||
"data-setting-select-default"
|
||||
)}]`
|
||||
);
|
||||
|
||||
this.setDisabledDefault(btnCustom, defaultMethod);
|
||||
|
|
@ -222,8 +233,9 @@ class ServiceModal {
|
|||
|
||||
if (action === "delete") {
|
||||
this.showDeleteForm();
|
||||
formEl.querySelector(`[data-services-modal-text]`).textContent =
|
||||
`Are you sure you want to delete ${serviceName} ?`;
|
||||
formEl.querySelector(
|
||||
`[data-services-modal-text]`
|
||||
).textContent = `Are you sure you want to delete ${serviceName} ?`;
|
||||
const nameInp = formEl.querySelector(`input[name="SERVER_NAME"]`);
|
||||
nameInp.setAttribute("value", serviceName);
|
||||
nameInp.value = serviceName;
|
||||
|
|
@ -311,9 +323,20 @@ class ServiceModal {
|
|||
inp.tagName === "INPUT" &&
|
||||
inp.getAttribute("type") === "checkbox"
|
||||
) {
|
||||
value === "yes"
|
||||
? inp.setAttribute("aria-checked", "true")
|
||||
: inp.setAttribute("aria-checked", "false");
|
||||
try {
|
||||
if (inp.hasAttribute("aria-checked")) {
|
||||
value === "yes"
|
||||
? inp.setAttribute("aria-checked", "true")
|
||||
: inp.setAttribute("aria-checked", "false");
|
||||
}
|
||||
} catch (err) {}
|
||||
|
||||
try {
|
||||
value === "yes"
|
||||
? inp.setAttribute("data-checked", "true")
|
||||
: inp.setAttribute("data-checked", "false");
|
||||
} catch (err) {}
|
||||
|
||||
inp.setAttribute("value", value);
|
||||
inp.setAttribute("data-method", method);
|
||||
inp.checked = true;
|
||||
|
|
@ -322,7 +345,7 @@ class ServiceModal {
|
|||
if (inp.tagName === "SELECT") {
|
||||
inp.parentElement
|
||||
.querySelector(
|
||||
`button[data-setting-select-dropdown-btn][value='${value}']`,
|
||||
`button[data-setting-select-dropdown-btn][value='${value}']`
|
||||
)
|
||||
.click();
|
||||
inp.setAttribute("data-method", method);
|
||||
|
|
@ -425,7 +448,7 @@ class Multiple {
|
|||
const attName = btn.getAttribute(`data-${this.prefix}-multiple-add`);
|
||||
//get all multiple groups
|
||||
const multipleEls = document.querySelectorAll(
|
||||
`[data-${this.prefix}-settings-multiple*="${attName}"]`,
|
||||
`[data-${this.prefix}-settings-multiple*="${attName}"]`
|
||||
);
|
||||
//case no schema
|
||||
if (multipleEls.length <= 0) return;
|
||||
|
|
@ -437,7 +460,7 @@ class Multiple {
|
|||
//and keep the highest num
|
||||
multipleEls.forEach((container) => {
|
||||
const ctnrName = container.getAttribute(
|
||||
"data-services-settings-multiple",
|
||||
"data-services-settings-multiple"
|
||||
);
|
||||
const num = this.getSuffixNumOrFalse(ctnrName);
|
||||
if (!isNaN(num) && num > topNum) topNum = num;
|
||||
|
|
@ -448,7 +471,7 @@ class Multiple {
|
|||
const setNum = +currNum === 0 ? `` : `_${currNum}`;
|
||||
//the default (schema) group is the last group
|
||||
const schema = document.querySelector(
|
||||
`[data-${this.prefix}-settings-multiple="${attName}_SCHEMA"]`,
|
||||
`[data-${this.prefix}-settings-multiple="${attName}_SCHEMA"]`
|
||||
);
|
||||
//clone schema to create a group with new num
|
||||
const schemaClone = schema.cloneNode(true);
|
||||
|
|
@ -486,7 +509,7 @@ class Multiple {
|
|||
.hasAttribute(`data-${this.prefix}-multiple-delete`)
|
||||
) {
|
||||
const multContainer = e.target.closest(
|
||||
"[data-services-settings-multiple]",
|
||||
"[data-services-settings-multiple]"
|
||||
);
|
||||
multContainer.remove();
|
||||
}
|
||||
|
|
@ -508,13 +531,13 @@ class Multiple {
|
|||
? name.replace(`_${splitName[splitName.length - 1]}`, "").trim()
|
||||
: name.trim();
|
||||
const relateSetting = document.querySelector(
|
||||
`[data-setting-container=${nameSuffixLess}_SCHEMA]`,
|
||||
`[data-setting-container=${nameSuffixLess}_SCHEMA]`
|
||||
);
|
||||
const relateCtnr = relateSetting.closest(
|
||||
"[data-services-settings-multiple]",
|
||||
"[data-services-settings-multiple]"
|
||||
);
|
||||
const relateCtnrName = relateCtnr.getAttribute(
|
||||
"data-services-settings-multiple",
|
||||
"data-services-settings-multiple"
|
||||
);
|
||||
//then we sort the setting on the right container name by suffixe number
|
||||
if (!(relateCtnrName in sortMultiples)) {
|
||||
|
|
@ -532,7 +555,7 @@ class Multiple {
|
|||
addOneMultGroup() {
|
||||
const settings = document.querySelector("[data-services-modal-form]");
|
||||
const multAddBtns = settings.querySelectorAll(
|
||||
"[data-services-multiple-add]",
|
||||
"[data-services-multiple-add]"
|
||||
);
|
||||
multAddBtns.forEach((btn) => {
|
||||
//check if already one (SCHEMA exclude so length >= 2)
|
||||
|
|
@ -547,7 +570,7 @@ class Multiple {
|
|||
|
||||
showMultByAtt(att) {
|
||||
const multContainers = document.querySelectorAll(
|
||||
`[data-services-settings-multiple^=${att}]`,
|
||||
`[data-services-settings-multiple^=${att}]`
|
||||
);
|
||||
multContainers.forEach((container) => {
|
||||
if (
|
||||
|
|
@ -561,7 +584,7 @@ class Multiple {
|
|||
|
||||
toggleMultByAtt(att) {
|
||||
const multContainers = document.querySelectorAll(
|
||||
`[data-services-settings-multiple^=${att}]`,
|
||||
`[data-services-settings-multiple^=${att}]`
|
||||
);
|
||||
multContainers.forEach((container) => {
|
||||
if (
|
||||
|
|
@ -577,7 +600,7 @@ class Multiple {
|
|||
//get schema settings
|
||||
const multiples = {};
|
||||
const schemaSettings = document.querySelectorAll(
|
||||
`[data-setting-container$="SCHEMA"]`,
|
||||
`[data-setting-container$="SCHEMA"]`
|
||||
);
|
||||
// loop on every schema settings
|
||||
schemaSettings.forEach((schema) => {
|
||||
|
|
@ -603,11 +626,11 @@ class Multiple {
|
|||
setMultipleToDOM(sortMultObj) {
|
||||
//we loop on each multiple that contains values to render to DOM
|
||||
for (const [schemaCtnrName, multGroupBySuffix] of Object.entries(
|
||||
sortMultObj,
|
||||
sortMultObj
|
||||
)) {
|
||||
//we need to access the DOM schema container
|
||||
const schemaCtnr = document.querySelector(
|
||||
`[data-services-settings-multiple="${schemaCtnrName}"]`,
|
||||
`[data-services-settings-multiple="${schemaCtnrName}"]`
|
||||
);
|
||||
//now we have to loop on each multiple settings group
|
||||
for (const [suffix, settings] of Object.entries(multGroupBySuffix)) {
|
||||
|
|
@ -623,14 +646,14 @@ class Multiple {
|
|||
for (const [name, data] of Object.entries(settings)) {
|
||||
//get setting container of clone container
|
||||
const settingContainer = schemaCtnrClone.querySelector(
|
||||
`[data-setting-container="${name}"]`,
|
||||
`[data-setting-container="${name}"]`
|
||||
);
|
||||
//replace input info and disabled state
|
||||
this.setSetting(
|
||||
data["value"],
|
||||
data["method"],
|
||||
data["global"],
|
||||
settingContainer,
|
||||
settingContainer
|
||||
);
|
||||
}
|
||||
//send schema clone to DOM and show it
|
||||
|
|
@ -645,7 +668,7 @@ class Multiple {
|
|||
"data-services-settings-multiple",
|
||||
schemaCtnrClone
|
||||
.getAttribute("data-services-settings-multiple")
|
||||
.replace("_SCHEMA", suffix),
|
||||
.replace("_SCHEMA", suffix)
|
||||
);
|
||||
|
||||
//rename title
|
||||
|
|
@ -659,18 +682,18 @@ class Multiple {
|
|||
|
||||
//rename setting container
|
||||
const settingCtnrs = schemaCtnrClone.querySelectorAll(
|
||||
"[data-setting-container]",
|
||||
"[data-setting-container]"
|
||||
);
|
||||
settingCtnrs.forEach((settingCtnr) => {
|
||||
settingCtnr.setAttribute(
|
||||
"data-setting-container",
|
||||
settingCtnr
|
||||
.getAttribute("data-setting-container")
|
||||
.replace("_SCHEMA", suffix),
|
||||
.replace("_SCHEMA", suffix)
|
||||
);
|
||||
settingCtnr.setAttribute(
|
||||
"id",
|
||||
settingCtnr.getAttribute("id").replace("_SCHEMA", suffix),
|
||||
settingCtnr.getAttribute("id").replace("_SCHEMA", suffix)
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -712,9 +735,20 @@ class Multiple {
|
|||
|
||||
//for settings input
|
||||
if (inp.getAttribute("type") === "checkbox") {
|
||||
value === "yes"
|
||||
? inp.setAttribute("aria-checked", "true")
|
||||
: inp.setAttribute("aria-checked", "false");
|
||||
try {
|
||||
if (inp.hasAttribute("aria-checked")) {
|
||||
value === "yes"
|
||||
? inp.setAttribute("aria-checked", "true")
|
||||
: inp.setAttribute("aria-checked", "false");
|
||||
}
|
||||
} catch (err) {}
|
||||
|
||||
try {
|
||||
value === "yes"
|
||||
? inp.setAttribute("data-checked", "true")
|
||||
: inp.setAttribute("data-checked", "false");
|
||||
} catch (err) {}
|
||||
|
||||
inp.setAttribute("value", value);
|
||||
inp.setAttribute("data-method", method);
|
||||
inp.checked = true;
|
||||
|
|
@ -736,15 +770,15 @@ class Multiple {
|
|||
//click the custom select dropdown btn value to update select value
|
||||
select.parentElement
|
||||
.querySelector(
|
||||
`button[data-setting-select-dropdown-btn][value='${defaultVal}']`,
|
||||
`button[data-setting-select-dropdown-btn][value='${defaultVal}']`
|
||||
)
|
||||
.click();
|
||||
|
||||
//set state to custom visible el
|
||||
const btnCustom = document.querySelector(
|
||||
`[data-setting-select=${select.getAttribute(
|
||||
"data-setting-select-default",
|
||||
)}]`,
|
||||
"data-setting-select-default"
|
||||
)}]`
|
||||
);
|
||||
|
||||
this.setDisabledMultServ(btnCustom, method, global);
|
||||
|
|
@ -780,10 +814,10 @@ class Multiple {
|
|||
selects.forEach((select) => {
|
||||
const method = select.getAttribute("data-default-method");
|
||||
const name = select.getAttribute(
|
||||
"data-services-setting-select-default",
|
||||
"data-services-setting-select-default"
|
||||
);
|
||||
const selDOM = document.querySelector(
|
||||
`button[data-services-setting-select='${name}']`,
|
||||
`button[data-services-setting-select='${name}']`
|
||||
);
|
||||
if (method === "ui" || method === "default") {
|
||||
selDOM.removeAttribute("disabled", "");
|
||||
|
|
@ -818,7 +852,7 @@ class Multiple {
|
|||
hiddenIfNoMultiples() {
|
||||
//hide multiple btn if no multiple exist on a plugin
|
||||
const multiples = document.querySelectorAll(
|
||||
`[data-${this.prefix}-settings-multiple]`,
|
||||
`[data-${this.prefix}-settings-multiple]`
|
||||
);
|
||||
multiples.forEach((container) => {
|
||||
if (container.querySelectorAll(`[data-setting-container]`).length <= 0)
|
||||
|
|
@ -830,7 +864,7 @@ class Multiple {
|
|||
|
||||
removePrevMultiples() {
|
||||
const multiPlugins = document.querySelectorAll(
|
||||
`[data-${this.prefix}-settings-multiple]`,
|
||||
`[data-${this.prefix}-settings-multiple]`
|
||||
);
|
||||
multiPlugins.forEach((multiGrp) => {
|
||||
if (
|
||||
|
|
@ -868,7 +902,7 @@ const setModal = new ServiceModal();
|
|||
const format = new FormatValue();
|
||||
const setFilterGlobal = new FilterSettings(
|
||||
"settings-filter",
|
||||
"[data-service-content='settings']",
|
||||
"[data-service-content='settings']"
|
||||
);
|
||||
|
||||
const setMultiple = new Multiple("services");
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -29,9 +29,19 @@ class Checkbox {
|
|||
|
||||
//set custom input hidden value
|
||||
const newValue = checkboxEl.getAttribute("value");
|
||||
newValue === "yes"
|
||||
? checkboxEl.setAttribute("aria-checked", "true")
|
||||
: checkboxEl.setAttribute("aria-checked", "false");
|
||||
try {
|
||||
if (checkboxEl.hasAttribute("aria-checked")) {
|
||||
newValue === "yes"
|
||||
? checkboxEl.setAttribute("aria-checked", "true")
|
||||
: checkboxEl.setAttribute("aria-checked", "false");
|
||||
}
|
||||
} catch (err) {}
|
||||
|
||||
try {
|
||||
newValue === "yes"
|
||||
? checkboxEl.setAttribute("data-checked", "true")
|
||||
: checkboxEl.setAttribute("data-checked", "false");
|
||||
} catch (err) {}
|
||||
|
||||
//force checked for submit
|
||||
checkboxEl.checked = true;
|
||||
|
|
@ -52,18 +62,18 @@ class Select {
|
|||
try {
|
||||
if (!e.target.closest("button")) {
|
||||
const selectEls = document.querySelectorAll(
|
||||
"div[data-setting-select-dropdown]",
|
||||
"div[data-setting-select-dropdown]"
|
||||
);
|
||||
selectEls.forEach((select) => {
|
||||
select.classList.add("hidden");
|
||||
select.classList.remove("flex");
|
||||
});
|
||||
const btnEls = document.querySelectorAll(
|
||||
"button[data-setting-select]",
|
||||
"button[data-setting-select]"
|
||||
);
|
||||
btnEls.forEach((btn) => {
|
||||
const dropdownChevron = btn.querySelector(
|
||||
`svg[data-setting-select]`,
|
||||
`svg[data-setting-select]`
|
||||
);
|
||||
dropdownChevron.classList.remove("rotate-180");
|
||||
});
|
||||
|
|
@ -87,7 +97,7 @@ class Select {
|
|||
.hasAttribute(`data-setting-select-dropdown-btn`)
|
||||
) {
|
||||
const btn = e.target.closest(
|
||||
`button[data-setting-select-dropdown-btn]`,
|
||||
`button[data-setting-select-dropdown-btn]`
|
||||
);
|
||||
const btnValue = btn.getAttribute("value");
|
||||
|
||||
|
|
@ -116,7 +126,7 @@ class Select {
|
|||
|
||||
//close dropdown
|
||||
const dropdownChevron = selectCustom.querySelector(
|
||||
`svg[data-setting-select]`,
|
||||
`svg[data-setting-select]`
|
||||
);
|
||||
dropdownChevron.classList.remove("rotate-180");
|
||||
|
||||
|
|
@ -139,7 +149,7 @@ class Select {
|
|||
});
|
||||
//select new one
|
||||
const newOption = selectEl.querySelector(
|
||||
`option[value="${selectedValue}"]`,
|
||||
`option[value="${selectedValue}"]`
|
||||
);
|
||||
newOption.selected = true;
|
||||
newOption.setAttribute("selected", "");
|
||||
|
|
|
|||
|
|
@ -46,18 +46,18 @@
|
|||
|
||||
.checkbox {
|
||||
@apply cursor-pointer disabled:cursor-default
|
||||
relative dark:border-slate-600 dark:bg-slate-700 z-10 aria-checked:z-0 w-5 h-5
|
||||
text-base rounded-1.4 aria-checked:bg-primary aria-checked:border-primary
|
||||
dark:aria-checked:bg-primary dark:aria-checked:border-primary duration-250 float-left
|
||||
relative dark:border-slate-600 dark:bg-slate-700 z-10 data-checked:z-0 w-5 h-5
|
||||
text-base rounded-1.4 data-checked:bg-primary data-checked:border-primary
|
||||
dark:data-checked:bg-primary dark:data-checked:border-primary duration-250 float-left
|
||||
mt-1 appearance-none border border-gray-300 bg-white bg-contain bg-center
|
||||
bg-no-repeat align-top transition-all disabled:bg-gray-400
|
||||
disabled:border-gray-400 dark:disabled:bg-gray-800
|
||||
dark:disabled:border-gray-800 disabled:text-gray-700
|
||||
dark:disabled:text-gray-300
|
||||
aria-checked:disabled:bg-gray-400
|
||||
aria-checked:disabled:border-gray-400 dark:aria-checked:disabled:bg-gray-800
|
||||
dark:aria-checked:disabled:border-gray-800 aria-checked:disabled:text-gray-700
|
||||
dark:aria-checked:disabled:text-gray-300;
|
||||
data-checked:disabled:bg-gray-400
|
||||
data-checked:disabled:border-gray-400 dark:data-checked:disabled:bg-gray-800
|
||||
dark:data-checked:disabled:border-gray-800 data-checked:disabled:text-gray-700
|
||||
dark:data-checked:disabled:text-gray-300;
|
||||
}
|
||||
|
||||
.custom-select-btn {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,9 @@ module.exports = {
|
|||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
data: {
|
||||
checked: "checked=true",
|
||||
},
|
||||
aria: {
|
||||
checked: 'checked="true"',
|
||||
},
|
||||
|
|
|
|||
7
src/ui/templates/flashs.html
vendored
7
src/ui/templates/flashs.html
vendored
|
|
@ -6,6 +6,7 @@
|
|||
>
|
||||
<button
|
||||
aria-controls="sidebar-flash"
|
||||
aria-expanded="false"
|
||||
aria-label="Open flash action sidebar"
|
||||
data-flash-sidebar-open
|
||||
class="transition scale-90 sm:scale-100 dark:brightness-95 p-3 text-xl bg-white shadow-sm cursor-pointer rounded-circle text-slate-700"
|
||||
|
|
@ -34,13 +35,13 @@
|
|||
<aside
|
||||
id="sidebar-flash"
|
||||
data-flash-sidebar
|
||||
aria-expanded="false"
|
||||
aria-hidden="true"
|
||||
class="translate-x-90 -right-0 transition z-sticky dark:bg-slate-850 dark:brightness-110 shadow-3xl max-w-full w-90 ease fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white bg-clip-border px-0.5"
|
||||
>
|
||||
<!-- close btn-->
|
||||
<button aria-label="close flash sidebar" data-flash-sidebar-close>
|
||||
<button aria-controls="sidebar-flash" aria-expanded="false" aria-label="close flash sidebar" data-flash-sidebar-close>
|
||||
<svg
|
||||
class="pointer-events-none fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
|
||||
class=" fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
|
|
|
|||
2
src/ui/templates/footer.html
vendored
2
src/ui/templates/footer.html
vendored
|
|
@ -1,4 +1,4 @@
|
|||
<footer class="relative w-full mt-16 lg:mt-0">
|
||||
<footer class="relative w-full mt-16 lg:mt-4">
|
||||
<div class="w-full px-6 mx-auto">
|
||||
<div
|
||||
class="flex flex-col items-center lg:flex-row justify-center lg:justify-between"
|
||||
|
|
|
|||
4
src/ui/templates/head.html
vendored
4
src/ui/templates/head.html
vendored
|
|
@ -34,8 +34,8 @@
|
|||
{% elif current_endpoint == "logs" %}
|
||||
<link rel="stylesheet" type="text/css" href="./css/flatpickr.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./css/flatpickr.dark.css" />
|
||||
<script async type="module" src="./js/utils/flatpickr.js"></script>
|
||||
<script type="module" src="./js/logs.js"></script>
|
||||
<script defer src="./js/utils/flatpickr.js"></script>
|
||||
<script defer src="./js/logs.js"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
|
|
|
|||
12
src/ui/templates/instances.html
vendored
12
src/ui/templates/instances.html
vendored
|
|
@ -34,15 +34,15 @@ instances_batched %}
|
|||
<div role="grid" class="grid grid-cols-1 gap-2 mt-4 mb-6 ml-1">
|
||||
<!-- detail -->
|
||||
<div
|
||||
role="gridcell"
|
||||
role="row"
|
||||
class="flex flex-col items-center sm:flex-row col-span-1 py-1 sm:py-0"
|
||||
>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 dark:opacity-80"
|
||||
>
|
||||
TYPE
|
||||
</p>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out pl-2 col-span-1 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-white dark:opacity-80"
|
||||
>
|
||||
{{ instance._type }}
|
||||
|
|
@ -51,15 +51,15 @@ instances_batched %}
|
|||
<!-- end detail -->
|
||||
<!-- detail -->
|
||||
<div
|
||||
role="gridcell"
|
||||
role="row"
|
||||
class="flex flex-col items-center sm:flex-row col-span-1 py-1 sm:py-0"
|
||||
>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 dark:opacity-90"
|
||||
>
|
||||
HOSTNAME
|
||||
</p>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out pl-2 col-span-1 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-white dark:opacity-90"
|
||||
>
|
||||
{{ instance.hostname }}
|
||||
|
|
|
|||
24
src/ui/templates/jobs.html
vendored
24
src/ui/templates/jobs.html
vendored
|
|
@ -72,7 +72,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500"
|
||||
>
|
||||
<span
|
||||
aria-label="current filter state value"
|
||||
aria-description="current filter state value"
|
||||
id="{{current_endpoint}}-success"
|
||||
data-name="{{current_endpoint}}-success"
|
||||
data-{{current_endpoint}}-setting-select-text="success"
|
||||
|
|
@ -139,7 +139,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500"
|
||||
>
|
||||
<span
|
||||
aria-label="current reload filter value"
|
||||
aria-description="current reload filter value"
|
||||
id="{{current_endpoint}}-reload"
|
||||
data-name="{{current_endpoint}}-reload"
|
||||
data-{{current_endpoint}}-setting-select-text="reload"
|
||||
|
|
@ -236,29 +236,29 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
</p>
|
||||
<!-- end header-->
|
||||
<!-- list -->
|
||||
<ul role="grid" class="col-span-12 w-full" data-{{current_endpoint}}-list>
|
||||
<ul class="col-span-12 w-full" data-{{current_endpoint}}-list>
|
||||
{% for job_name, value in jobs.items() %}
|
||||
<!-- job item-->
|
||||
<li
|
||||
role="row"
|
||||
|
||||
class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5"
|
||||
>
|
||||
<p
|
||||
role="gridcell"
|
||||
|
||||
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0 my-1"
|
||||
data-{{current_endpoint}}-name
|
||||
>
|
||||
{{job_name}}
|
||||
</p>
|
||||
<p
|
||||
role="gridcell"
|
||||
|
||||
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0 my-1"
|
||||
data-{{current_endpoint}}-last_run
|
||||
>
|
||||
{{value['last_run']}}
|
||||
</p>
|
||||
<p
|
||||
role="gridcell"
|
||||
|
||||
class="dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
|
||||
data-{{current_endpoint}}-every
|
||||
>
|
||||
|
|
@ -266,7 +266,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
</p>
|
||||
{% if value["reload"] %}
|
||||
<p
|
||||
role="gridcell"
|
||||
|
||||
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
|
||||
data-{{current_endpoint}}-reload="true"
|
||||
>
|
||||
|
|
@ -283,7 +283,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
|
||||
{%endif %} {% if not value["reload"] %}
|
||||
<p
|
||||
role="gridcell"
|
||||
|
||||
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
|
||||
data-{{current_endpoint}}-reload="false"
|
||||
>
|
||||
|
|
@ -299,7 +299,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
</p>
|
||||
{% endif %} {% if value["success"] %}
|
||||
<p
|
||||
role="gridcell"
|
||||
|
||||
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
|
||||
data-{{current_endpoint}}-success="true"
|
||||
>
|
||||
|
|
@ -315,7 +315,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
</p>
|
||||
{% elif not value["success"] %}
|
||||
<p
|
||||
role="gridcell"
|
||||
|
||||
class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
|
||||
data-{{current_endpoint}}-success="false"
|
||||
>
|
||||
|
|
@ -331,7 +331,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
</p>
|
||||
{% endif %}
|
||||
<div
|
||||
role="gridcell"
|
||||
|
||||
class="relative dark:text-gray-400 text-sm col-span-3 m-0 my-1"
|
||||
data-{{current_endpoint}}-files
|
||||
>
|
||||
|
|
|
|||
4
src/ui/templates/logs.html
vendored
4
src/ui/templates/logs.html
vendored
|
|
@ -152,14 +152,14 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
|
|||
<div class="col-span-12 w-full justify-center flex mt-2">
|
||||
<button
|
||||
data-submit-date
|
||||
id="submit-settings"
|
||||
id="submit-data"
|
||||
class="tracking-widest dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
|
||||
>
|
||||
Submit Date
|
||||
</button>
|
||||
<button
|
||||
data-submit-live="no"
|
||||
id="submit-settings"
|
||||
id="submit-live"
|
||||
class="hidden tracking-widest dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
|
||||
>
|
||||
Go Live
|
||||
|
|
|
|||
7
src/ui/templates/menu.html
vendored
7
src/ui/templates/menu.html
vendored
|
|
@ -4,6 +4,7 @@
|
|||
<!-- float button-->
|
||||
<button
|
||||
aria-controls="sidebar-menu"
|
||||
aria-expanded="false"
|
||||
aria-label="Open menu sidebar"
|
||||
data-sidebar-menu-toggle
|
||||
class="transition-all scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 xl:hidden fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-16 sm:top-[4.5rem] right-5 sm:right-6 z-990 rounded-circle text-slate-700"
|
||||
|
|
@ -25,13 +26,13 @@
|
|||
<aside
|
||||
data-sidebar-menu
|
||||
class="transition-all mt-[4.5rem] fixed flex inset-y-0 flex-wrap justify-between w-full p-0 my-4 overflow-y-auto antialiased duration-200 -translate-x-full bg-white border-0 shadow-xl dark:shadow-none dark:bg-slate-850 dark:brightness-110 max-w-64 z-[1000] xl:ml-6 rounded-2xl xl:left-0 xl:translate-x-0"
|
||||
aria-expanded="false"
|
||||
aria-hidden="true"
|
||||
id="sidebar-menu"
|
||||
>
|
||||
<!-- close btn-->
|
||||
<button aria-label="close menu sidebar" data-sidebar-menu-close>
|
||||
<button aria-controls="sidebar-menu" aria-expanded="false" aria-label="close menu sidebar" data-sidebar-menu-close>
|
||||
<svg
|
||||
class="xl:hidden pointer-events-none fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-6 w-6 top-4 right-4"
|
||||
class="xl:hidden fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-6 w-6 top-4 right-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
|
|
|
|||
12
src/ui/templates/news.html
vendored
12
src/ui/templates/news.html
vendored
|
|
@ -2,6 +2,7 @@
|
|||
<button
|
||||
data-sidebar-info-open
|
||||
aria-controls="sidebar-news"
|
||||
aria-expanded="false"
|
||||
aria-label="Open news sidebar"
|
||||
class="transition-all scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-[4.5rem] right-5 sm:right-40 xl:right-6 z-990 rounded-circle text-slate-700"
|
||||
>
|
||||
|
|
@ -20,14 +21,17 @@
|
|||
<!-- right sidebar -->
|
||||
<aside
|
||||
id="sidebar-news"
|
||||
aria-expanded="false"
|
||||
aria-hidden="true"
|
||||
data-sidebar-info
|
||||
class="translate-x-90 -right-0 transition z-sticky dark:bg-slate-850 dark:brightness-110 shadow-3xl max-w-full w-90 ease fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white bg-clip-border px-0.5"
|
||||
>
|
||||
<!-- close btn-->
|
||||
<button aria-label="close news sidebar" data-sidebar-info-close>
|
||||
<button
|
||||
aria-controls="sidebar-news"
|
||||
aria-expanded="false"
|
||||
aria-label="close news sidebar" data-sidebar-info-close>
|
||||
<svg
|
||||
class="pointer-events-none fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
|
||||
class="fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
|
|
@ -83,7 +87,7 @@
|
|||
>
|
||||
<h5 class="mb-4 dark:text-white font-bold">JOIN THE NEWSLETTER</h5>
|
||||
<div class="flex">
|
||||
<label for="EMAIL" class="hidden">EMAIL</label>
|
||||
<label for="newsletter-email" class="sr-only">EMAIL</label>
|
||||
<input
|
||||
type="text"
|
||||
id="newsletter-email"
|
||||
|
|
|
|||
2
src/ui/templates/plugins.html
vendored
2
src/ui/templates/plugins.html
vendored
|
|
@ -149,7 +149,7 @@ include "plugins_modal.html" %}
|
|||
class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500"
|
||||
>
|
||||
<span
|
||||
aria-label="current type"
|
||||
aria-description="current type"
|
||||
id="types"
|
||||
data-name="types"
|
||||
data-{{current_endpoint}}-setting-select-text="types"
|
||||
|
|
|
|||
132
src/ui/templates/profile.html
vendored
132
src/ui/templates/profile.html
vendored
|
|
@ -27,62 +27,6 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
maxlength="256"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
data-input-group
|
||||
class="flex flex-col relative col-span-12 md:col-span-6 lg:col-span-4 px-4 my-2 md:px-6 md:my-3 md:col-span-6 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
Password
|
||||
</h5>
|
||||
<label class="sr-only" for="profile_password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="profile_password"
|
||||
name="profile_password"
|
||||
class="col-span-12 regular-input"
|
||||
placeholder="enter password"
|
||||
value="{{ password }}"
|
||||
pattern="^(?=.*?\d)(?=.*?[ !\u0022#$%&'\(\)*+,.\/:;<=>?@\[\\\]^_`\u007B\u007C\u007D\u007E\u002D]).{8,}$"
|
||||
minlength="8"
|
||||
disabled
|
||||
/>
|
||||
<div
|
||||
data-setting-password-container
|
||||
class="absolute flex right-8 h-5 w-5 top-[60%]"
|
||||
>
|
||||
<button
|
||||
data-setting-password="visible"
|
||||
class="h-5 w-5 flex items-center align-middle"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
<path
|
||||
d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
data-setting-password="invisible"
|
||||
class="hidden -translate-y-0.2 scale-110 h-5 w-5 items-center align-middle"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<path
|
||||
d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5c0-53-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -110,9 +54,9 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
Username
|
||||
New Username
|
||||
</h5>
|
||||
<label class="sr-only" for="admin_username">Username</label>
|
||||
<label class="sr-only" for="admin_username">New Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="admin_username"
|
||||
|
|
@ -126,6 +70,64 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
/>
|
||||
</div>
|
||||
<!-- end username inpt-->
|
||||
<!-- password inpt-->
|
||||
<div
|
||||
data-input-group
|
||||
class="flex flex-col relative col-span-12 md:col-span-6 lg:col-span-4 px-4 my-2 md:px-6 md:my-3 md:col-span-6 lg:px-6 lg:my-3 max-w-[400px] w-full"
|
||||
>
|
||||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
Current password
|
||||
</h5>
|
||||
<label class="sr-only" for="curr_password">Current password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="curr_password"
|
||||
name="curr_password"
|
||||
class="col-span-12 regular-input"
|
||||
placeholder="enter password"
|
||||
value=""
|
||||
pattern="^(?=.*?\d)(?=.*?[ !\u0022#$%&'\(\)*+,.\/:;<=>?@\[\\\]^_`\u007B\u007C\u007D\u007E\u002D]).{8,}$"
|
||||
minlength="8"
|
||||
required
|
||||
/>
|
||||
<div
|
||||
data-setting-password-container
|
||||
class="absolute flex right-8 h-5 w-5 top-[60%] lg:top-11"
|
||||
>
|
||||
<button
|
||||
data-setting-password="visible"
|
||||
class="h-5 w-5 flex items-center align-middle dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
<path
|
||||
d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
data-setting-password="invisible"
|
||||
class="hidden -translate-y-0.2 scale-110 h-5 w-5 items-center align-middle"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<path
|
||||
d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5c0-53-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end password inpt-->
|
||||
<!-- password inpt-->
|
||||
<div
|
||||
data-input-group
|
||||
|
|
@ -136,7 +138,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
>
|
||||
New password
|
||||
</h5>
|
||||
<label class="sr-only" for="admin_password">New Password</label>
|
||||
<label class="sr-only" for="admin_password">New password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="admin_password"
|
||||
|
|
@ -150,7 +152,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
/>
|
||||
<div
|
||||
data-setting-password-container
|
||||
class="absolute flex right-8 h-5 w-5 top-[60%] lg:top-11"
|
||||
class="absolute flex right-8 h-5 w-5 top-[60%] md:top-[45%] lg:top-11"
|
||||
>
|
||||
<button
|
||||
data-setting-password="visible"
|
||||
|
|
@ -158,7 +160,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none"
|
||||
class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
|
|
@ -172,7 +174,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
class="hidden -translate-y-0.2 scale-110 h-5 w-5 items-center align-middle"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none"
|
||||
class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
|
|
@ -192,7 +194,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
<h5
|
||||
class="text-base my-1 transition duration-300 ease-in-out text-md font-bold m-0"
|
||||
>
|
||||
Confirm New Password
|
||||
Confirm new password
|
||||
</h5>
|
||||
<label class="sr-only" for="admin_password_check"
|
||||
>Confirm new password
|
||||
|
|
@ -218,7 +220,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none"
|
||||
class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
|
|
@ -232,7 +234,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
|
|||
class="hidden -translate-y-0.2 scale-110 h-5 w-5 items-center align-middle"
|
||||
>
|
||||
<svg
|
||||
class="fill-primary pointer-events-none"
|
||||
class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
|
|
|
|||
50
src/ui/templates/services.html
vendored
50
src/ui/templates/services.html
vendored
|
|
@ -43,13 +43,13 @@
|
|||
class="w-full grid grid-cols-12 justify-items-center sm:justify-items-start gap-2 mt-4 mb-6 ml-3 sm:ml-1"
|
||||
>
|
||||
<!-- detail -->
|
||||
<div role="gridcell" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p
|
||||
<div role="row" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
Reverse proxy
|
||||
</p>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['USE_REVERSE_PROXY']['value'] == 'yes' %}
|
||||
|
|
@ -80,13 +80,13 @@
|
|||
</div>
|
||||
<!-- end detail -->
|
||||
<!-- detail -->
|
||||
<div role="gridcell" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p
|
||||
<div role="row" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
Serve files
|
||||
</p>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['SERVE_FILES']['value'] == 'yes' %}
|
||||
|
|
@ -118,13 +118,13 @@
|
|||
</div>
|
||||
<!-- end detail -->
|
||||
<!-- detail -->
|
||||
<div role="gridcell" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p
|
||||
<div role="row" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
Remote PHP
|
||||
</p>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['REMOTE_PHP']['value'] != '' %}
|
||||
|
|
@ -154,13 +154,13 @@
|
|||
</div>
|
||||
<!-- end detail -->
|
||||
<!-- detail -->
|
||||
<div role="gridcell" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p
|
||||
<div role="row" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
HTTPS
|
||||
</p>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['AUTO_LETS_ENCRYPT']['value'] == 'yes' or service['USE_CUSTOM_SSL']['value'] == 'yes' or service['GENERATE_SELF_SIGNED_SSL']['value'] == 'yes' %}
|
||||
|
|
@ -190,13 +190,13 @@
|
|||
</div>
|
||||
<!-- end detail -->
|
||||
<!-- detail -->
|
||||
<div role="gridcell" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p
|
||||
<div role="row" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
ModSecurity
|
||||
</p>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['USE_MODSECURITY']['value'] == 'yes' %}
|
||||
|
|
@ -226,13 +226,13 @@
|
|||
</div>
|
||||
<!-- end detail -->
|
||||
<!-- detail -->
|
||||
<div role="gridcell" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p
|
||||
<div role="row" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
Bad Behavior
|
||||
</p>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['USE_BAD_BEHAVIOR']['value'] == 'yes' %}
|
||||
|
|
@ -262,16 +262,16 @@
|
|||
</div>
|
||||
<!-- end detail -->
|
||||
<!-- detail -->
|
||||
<div role="gridcell" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p
|
||||
<div role="row" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
Limit req
|
||||
</p>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['USE_LIMIT_REQ']['value'] == 'yes' %}$
|
||||
{% if service['USE_LIMIT_REQ']['value'] == 'yes' %}
|
||||
<span class="sr-only">yes</span>
|
||||
|
||||
<svg
|
||||
|
|
@ -300,13 +300,13 @@
|
|||
</div>
|
||||
<!-- end detail -->
|
||||
<!-- detail -->
|
||||
<div role="gridcell" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p
|
||||
<div role="row" class="flex items-center col-span-12 sm:col-span-6">
|
||||
<p role="gridcell"
|
||||
class="font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500"
|
||||
>
|
||||
DNSBL
|
||||
</p>
|
||||
<p
|
||||
<p role="gridcell"
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 pl-2 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-500 "
|
||||
>
|
||||
{% if service['USE_DNSBL']['value'] == 'yes' %}
|
||||
|
|
|
|||
26
src/ui/templates/settings_plugins.html
vendored
26
src/ui/templates/settings_plugins.html
vendored
|
|
@ -74,10 +74,10 @@ data-plugin-item="{{plugin['id']}}"
|
|||
{% if value['type'] == "password" %}
|
||||
<div data-setting-password-container class="absolute flex right-2 h-5 w-5">
|
||||
<button type="button" data-setting-password="visible" class="h-5 w-5 flex items-center align-middle" type="button">
|
||||
<svg class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg>
|
||||
<svg class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg>
|
||||
</button>
|
||||
<button type="button" data-setting-password="invisible" class="hidden -translate-y-0.2 scale-110 h-5 w-5 items-center align-middle">
|
||||
<svg class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5c0-53-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5z"/></svg>
|
||||
<svg class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5c0-53-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{%endif%}
|
||||
|
|
@ -93,7 +93,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
id="{{setting}}" name="{{setting}}" data-setting-select-default="{{value['id']}}" data-type="form-select" id="{{setting}}" name="{{setting}}"
|
||||
class="hidden">
|
||||
{% for item in value['select'] %}
|
||||
<option value="{{item}}" {% if global_config[setting]['value'] and global_config[setting]['value'] == item or not global_config[setting]['value'] and value['default'] == item %} selected{% endif %}>{{item}}</option>
|
||||
<option {% if not item %}label="empty" {% endif %} value="{{item}}" {% if global_config[setting]['value'] and global_config[setting]['value'] == item or not global_config[setting]['value'] and value['default'] == item %} selected{% endif %}>{{item}}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<!-- end default hidden-->
|
||||
|
|
@ -104,7 +104,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
{% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default' %} disabled {% endif %} data-setting-select="{{value['id']}}"
|
||||
data-default-value="{{global_config[setting]['value']}}"
|
||||
data-default-method="{{global_config[setting]['method']}}"
|
||||
aria-controls="{{settings}}-dropdown"
|
||||
aria-controls="{{value['id']}}-dropdown"
|
||||
class="custom-select-btn"
|
||||
>
|
||||
{% for item in value['select'] %} {% if global_config[setting]['value'] and
|
||||
|
|
@ -115,7 +115,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
>{{global_config[setting]['value']}}</span
|
||||
>
|
||||
{% elif not global_config[setting]['value'] and value['default'] == item %}
|
||||
<span aria-label="current value"
|
||||
<span aria-description="current value"
|
||||
data-setting-select-text="{{value['id']}}"
|
||||
data-value="{{value['default']}}"
|
||||
>{{value['default']}}</span
|
||||
|
|
@ -136,7 +136,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
</button>
|
||||
<!-- dropdown-->
|
||||
<div
|
||||
id="{{settings}}-dropdown"
|
||||
id="{{value['id']}}-dropdown"
|
||||
role="listbox"
|
||||
data-setting-select-dropdown="{{value['id']}}"
|
||||
class="hidden z-[20] absolute h-full flex-col w-full mt-2"
|
||||
|
|
@ -180,7 +180,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
setting in ["AUTOCONF_MODE", "SWARM_MODE", "KUBERNETES_MODE"] or global_config[setting]['method'] != 'ui' and global_config[setting]['method']
|
||||
!= 'default' %} disabled {% endif %}
|
||||
|
||||
aria-checked="{% if global_config[setting]['value'] == "yes" %}true{% else %}false{% endif %}"
|
||||
data-checked="{% if global_config[setting]['value'] == "yes" %}true{% else %}false{% endif %}"
|
||||
checked
|
||||
id="checkbox-{{value['id']}}"
|
||||
|
||||
|
|
@ -290,10 +290,10 @@ data-plugin-item="{{plugin['id']}}"
|
|||
{% if value['type'] == "password" %}
|
||||
<div data-setting-password-container class="absolute flex right-2 h-5 w-5">
|
||||
<button type="button"data- setting-password="visible" class="h-5 w-5 flex items-center align-middle" type="button">
|
||||
<svg class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg>
|
||||
<svg class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg>
|
||||
</button>
|
||||
<button type="button" data-setting-password="invisible" class="hidden -translate-y-0.2 scale-110 h-5 w-5 items-center align-middle">
|
||||
<svg class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5c0-53-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5z"/></svg>
|
||||
<svg class="fill-primary pointer-events-none dark:fill-blue-500 hover:brightness-75 transition-all" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5c0-53-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{%endif%}
|
||||
|
|
@ -308,7 +308,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
id="{{setting}}_SCHEMA" name="{{setting}}_SCHEMA" data-select-default="{{value['id']}}" data-type="form-select" id="{{setting}}" name="{{setting}}"
|
||||
class="hidden">
|
||||
{% for item in value['select'] %}
|
||||
<option value="{{item}}" {% if value['default'] == item %} selected {% endif %}>{{item}}</option>
|
||||
<option {% if not item %}label="empty" {% endif %} value="{{item}}" {% if value['default'] == item %} selected {% endif %}>{{item}}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<!-- end default hidden-->
|
||||
|
|
@ -318,11 +318,11 @@ data-plugin-item="{{plugin['id']}}"
|
|||
<button
|
||||
data-setting-select="{{value['id']}}"
|
||||
data-default-value="{{value['default']}}"
|
||||
aria-controls="{{settings}}-dropdown"
|
||||
aria-controls="{{value['id']}}-dropdown"
|
||||
class="custom-select-btn"
|
||||
>
|
||||
{% for item in value['select'] %} {% if value['default'] == item %}
|
||||
<span aria-label="current value"
|
||||
<span aria-description="current value"
|
||||
data-setting-select-text="{{value['id']}}"
|
||||
data-value="{{value['default']}}"
|
||||
>{{value['default']}}</span
|
||||
|
|
@ -342,7 +342,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
<!-- end chevron -->
|
||||
</button>
|
||||
<!-- dropdown-->
|
||||
<div id="{{settings}}-dropdown"
|
||||
<div id="{{value['id']}}-dropdown"
|
||||
role="listbox"
|
||||
data-setting-select-dropdown="{{value['id']}}"
|
||||
class="hidden z-[20] absolute h-full flex-col w-full mt-2"
|
||||
|
|
|
|||
2
src/ui/templates/settings_tabs.html
vendored
2
src/ui/templates/settings_tabs.html
vendored
|
|
@ -49,7 +49,7 @@
|
|||
aria-controls="tab-dropdown-mobile"
|
||||
class="settings-tabs-mobile-btn"
|
||||
>
|
||||
<span aria-label="current tab" class="settings-tabs-mobile-btn-text">{% if current_endpoint == "global-config" %}general {% endif %} </span>
|
||||
<span aria-description="current tab" class="settings-tabs-mobile-btn-text">{% if current_endpoint == "global-config" %}general {% endif %} </span>
|
||||
<!-- chevron -->
|
||||
<svg
|
||||
|
||||
|
|
|
|||
20
src/ui/templates/setup.html
vendored
20
src/ui/templates/setup.html
vendored
|
|
@ -980,14 +980,14 @@
|
|||
--tw-text-opacity: 1;
|
||||
color: rgb(73 80 87 / var(--tw-text-opacity));
|
||||
}
|
||||
.checkbox[aria-checked="true"] {
|
||||
.checkbox[data-checked="true"] {
|
||||
z-index: 0;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(8 85 119 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(8 85 119 / var(--tw-bg-opacity));
|
||||
}
|
||||
.checkbox:disabled[aria-checked="true"] {
|
||||
.checkbox:disabled[data-checked="true"] {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(206 212 218 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
|
|
@ -1009,13 +1009,13 @@
|
|||
--tw-text-opacity: 1;
|
||||
color: rgb(210 214 218 / var(--tw-text-opacity));
|
||||
}
|
||||
:is(.dark .checkbox[aria-checked="true"]) {
|
||||
:is(.dark .checkbox[data-checked="true"]) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(8 85 119 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(8 85 119 / var(--tw-bg-opacity));
|
||||
}
|
||||
:is(.dark .checkbox:disabled[aria-checked="true"]) {
|
||||
:is(.dark .checkbox:disabled[data-checked="true"]) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(37 47 64 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
|
|
@ -1411,7 +1411,7 @@
|
|||
type="checkbox"
|
||||
id="auto_lets_encrypt"
|
||||
name="auto_lets_encrypt"
|
||||
aria-checked="false"
|
||||
data-checked="false"
|
||||
class="checkbox"
|
||||
value="no"
|
||||
/>
|
||||
|
|
@ -1483,7 +1483,7 @@
|
|||
this.updateCheck("unknown");
|
||||
// get resume
|
||||
const api = `http${
|
||||
this.sslCheck.getAttribute("aria-checked") === "true" ? "s" : ""
|
||||
this.sslCheck.getAttribute("data-checked") === "true" ? "s" : ""
|
||||
}://${this.servInp.value}/setup/check`;
|
||||
fetch(api)
|
||||
.then((res) => {
|
||||
|
|
@ -1552,7 +1552,7 @@
|
|||
|
||||
updateResume() {
|
||||
this.resumeEl.textContent = `http${
|
||||
this.sslCheck.getAttribute("aria-checked") === "true" ? "s" : ""
|
||||
this.sslCheck.getAttribute("data-checked") === "true" ? "s" : ""
|
||||
}://${this.servInp.value}${this.urlInp.value}`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1624,8 +1624,8 @@
|
|||
//set custom input hidden value
|
||||
const newValue = checkboxEl.getAttribute("value");
|
||||
newValue === "yes"
|
||||
? checkboxEl.setAttribute("aria-checked", "true")
|
||||
: checkboxEl.setAttribute("aria-checked", "false");
|
||||
? checkboxEl.setAttribute("data-checked", "true")
|
||||
: checkboxEl.setAttribute("data-checked", "false");
|
||||
|
||||
//force checked for submit
|
||||
checkboxEl.checked = true;
|
||||
|
|
@ -1690,7 +1690,7 @@
|
|||
// Else, send form and wait for response
|
||||
|
||||
const api = `http${
|
||||
this.sslCheck.getAttribute("aria-checked") === "true" ? "s" : ""
|
||||
this.sslCheck.getAttribute("data-checked") === "true" ? "s" : ""
|
||||
}://${this.servInp.value}${this.urlInp.value}`;
|
||||
|
||||
fetch(window.location.href, {
|
||||
|
|
|
|||
Loading…
Reference in a new issue