feat(ui): introducing dark-mode and refactor some template details and css

- chore: increase to 9.7.0 - reconcile with main after rebase
- chore: reconcile fixes to containers.twig from main after rebase
- refactor(layout): increment CSS version from v2 to v3

Signed-off-by: ernolf <raphael.gradenwitz@googlemail.com>

php/public/img/logo.svg

@@ -1 +0,0 @@
-<svg width="256" height="128" version="1.1" viewBox="0 0 256 128" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke-width="22"><circle cx="40" cy="64" r="26" stroke="#ffffff" fill="none"/><circle cx="216" cy="64" r="26" stroke="#ffffff" fill="none"/><circle cx="128" cy="64" r="46" stroke="#ffffff" fill="none"/></g></svg>

php/public/img/nextcloud-logo.svg

@@ -0,0 +1,4 @@
+<svg id="nextcloud-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 100" width="142" height="100">
+  <g id="logo" stroke="currentColor" fill="none" stroke-width="11" transform="scale(1.109)"><circle cx="20" cy="32" r="13"/><circle cx="64" cy="32" r="23"/><circle cx="108" cy="32" r="13"/></g>
+  <g id="Nextcloud" fill="currentColor" transform="translate(-3.4, -3.4) scale(1.17)"><path d="M15.4,67.4c-0.4,0-0.5,0.2-0.5,0.6v14.6c0,0.4,0.2,0.5,0.5,0.5h0.4c0.4,0,0.5-0.2,0.5-0.5V70.4   l7.9,12.3c0,0.1,0.1,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0.1c0,0,0,0,0.1,0c0,0,0,0,0,0c0.1,0,0.1,0,0.2,0h0.4   c0.4,0,0.5-0.2,0.5-0.5V68c0-0.4-0.2-0.6-0.5-0.6h-0.4c-0.4,0-0.6,0.2-0.6,0.6v12.1l-7.9-12.3c0,0-0.1-0.1-0.1-0.1   c-0.1-0.1-0.2-0.2-0.4-0.2L15.4,67.4z M110.8,67.6c-0.4,0-0.2,0.2-0.2,0.6v5c0,0.5,0,0.9,0,0.9h0c0,0-1-2.2-3.6-2.2   c-2.9,0-5,2.3-4.9,5.7c0,3.4,1.9,5.8,4.8,5.8c2.9,0,3.8-2.3,3.8-2.3h0.1c0,0-0.1,0.3-0.1,0.7v0.9c0,0.4,0.2,0.5,0.6,0.5h0.4   c0.4,0,0.5-0.2,0.5-0.6V68.2c0-0.4-0.6-0.6-0.9-0.6H110.8z M71.8,67.7c-0.4,0-0.1,0.2-0.1,0.6v12.3c0,2.4,1.6,2.7,2.5,2.7   c0.4,0,0.6-0.2,0.6-0.6v-0.4c0-0.4-0.2-0.5-0.5-0.5c-0.5-0.1-1.2-0.2-1.2-1.6v-12c0-0.4-0.6-0.6-0.9-0.6L71.8,67.7z M53.8,69   c-0.4,0-0.6,0.2-0.6,0.6v2.6v1.3v5.7c0,2.6,1.5,4.1,3.9,4.1c0.5,0,0.6-0.1,0.6-0.5v-0.3c0-0.4-0.1-0.5-0.6-0.6   c-0.9-0.1-2.4-0.4-2.4-2.9v-5.5h2.3c0.4,0,0.6-0.1,0.6-0.5v-0.2c0-0.4-0.2-0.6-0.6-0.6h-2.3v-2.6c0-0.4-0.1-0.6-0.5-0.6L53.8,69z    M33.8,71.8c-3,0-5.4,2.2-5.5,5.8c0,3.4,2.5,5.8,5.8,5.8c1.8,0,3.1-0.8,3.7-1.2c0.3-0.2,0.3-0.5,0.2-0.7l-0.2-0.2   c-0.2-0.3-0.4-0.4-0.7-0.2c-0.5,0.4-1.5,1-2.9,1c-2.3,0-4.2-1.6-4.3-4.4h8c0.3,0,0.6-0.3,0.6-0.6C38.4,73.9,36.8,71.8,33.8,71.8z    M65,71.8c-3.3,0-5.8,2.4-5.8,5.8c0,3.4,2.5,5.8,5.8,5.8c2,0,3.4-1,3.9-1.4c0.3-0.3,0.3-0.5,0.1-0.8L68.8,81   c-0.2-0.3-0.4-0.4-0.7-0.2C67.6,81.3,66.6,82,65,82c-2.4,0-4.3-1.8-4.3-4.4c0-2.7,1.9-4.5,4.3-4.5c1.3,0,2.3,0.7,2.8,1   c0.3,0.2,0.6,0.2,0.8-0.1l0.2-0.3c0.3-0.3,0.2-0.6-0.1-0.8C68.1,72.6,66.9,71.8,65,71.8L65,71.8z M81.9,71.8   c-3.2,0-5.8,2.5-5.8,5.7c0,3.3,2.6,5.8,5.8,5.8c3.2,0,5.8-2.5,5.8-5.8C87.8,74.3,85.1,71.8,81.9,71.8z M49.5,72   c-0.1,0-0.2,0.1-0.4,0.2l-2,2.4l-1.5,1.8l-2.3-2.7L42,72.2c-0.1-0.1-0.2-0.2-0.4-0.2c-0.1,0-0.3,0-0.4,0.2l-0.3,0.3   c-0.3,0.2-0.3,0.5,0,0.7l2,2.4l1.7,2l-2.5,2.9c0,0,0,0,0,0L40.9,82c-0.2,0.3-0.2,0.6,0.1,0.8l0.3,0.3c0.3,0.2,0.5,0.2,0.7-0.1   l2-2.4l1.5-1.8l2.3,2.7c0,0,0,0,0,0l1.2,1.5c0.2,0.3,0.5,0.3,0.8,0.1l0.3-0.3c0.3-0.2,0.3-0.5,0-0.7l-2-2.4l-1.7-2l2.5-2.9   c0,0,0,0,0,0l1.2-1.5c0.2-0.3,0.2-0.6-0.1-0.8l-0.3-0.3C49.7,72,49.6,71.9,49.5,72L49.5,72z M90.7,72c-0.4,0-0.5,0.2-0.5,0.6v6.5   c0,2.9,2.1,4.3,4.7,4.3c2.6,0,4.7-1.4,4.7-4.3v-6.5c0.1-0.4-0.1-0.6-0.5-0.6h-0.4c-0.4,0-0.6,0.2-0.6,0.6v6.1   c0,1.7-1.1,3.3-3.3,3.3c-2.1,0-3.3-1.6-3.3-3.3v-6.1c0-0.4-0.2-0.6-0.6-0.6L90.7,72z M33.8,73c1.6,0,3,1.2,3.1,3.5h-6.9   C30.3,74.3,31.9,73,33.8,73z M81.9,73.1c2.4,0,4.3,1.9,4.3,4.4c0,2.6-1.9,4.5-4.3,4.5c-2.4,0-4.3-2-4.3-4.5   C77.6,75.1,79.6,73.1,81.9,73.1z M107.1,73.1c2.4,0,3.5,2.2,3.5,4.4c0,3.2-1.7,4.5-3.6,4.5c-2.1,0-3.5-1.8-3.5-4.5   C103.5,74.8,105.1,73.1,107.1,73.1z"/></g>
+</svg>

php/public/style.css

@@ -1,12 +1,58 @@
+:root {
+    --color-nextcloud-blue: #0082c9;
+    --color-nextcloud-logo: var(--color-nextcloud-blue);
+    --color-main-background: white;
+    --color-input-background: white;
+    --color-main-text: black;
+    --color-main-border: black;
+    --color-main-border-hover: var(--color-main-border);
+    --color-error: #db0606;
+    --color-error-hover: #df2525;
+    --color-error-text: #c20505;
+    --color-success: #46ba61;
+    --color-running: #ffd000;
+    --color-info: #0071ad;
+    --color-info-hover: #00aaef;
+    --color-border-maxcontrast: #7d7d7d;
+    --border: .5px;
+    --border-hover: 2px;
+    --border-radius: 7px;
+    --border-radius-large: 12px;
+    --default-font-size: 13px;
+    --checkbox-size: 16px;
+    --max-width: 500px;
+}
+
+[data-theme="dark"] {
+    --color-main-background: #171717;
+    --color-input-background: #ebebeb;
+    --color-main-text: #ebebeb;
+    --color-nextcloud-logo: var(--color-main-text);
+    --color-main-border: var(--color-border-maxcontrast);
+    --color-main-border-hover: var(--color-main-text);
+    --color-error: #ff3333;
+    --color-error-hover: #ff6666;
+    --color-error-text: #ff8080;
+    --color-info: #00aeff;
+    --color-info-hover: #33beff;
+    --border-hover: var(--border);
+}
+
 html, body {
     padding: 0;
     margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Cantarell, Ubuntu, Helvetica Neue, Arial, Noto Color Emoji, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;;
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    background-color: var(--color-main-background);
+    color: var(--color-main-text);
 }
 
 a {
     text-decoration: none;
-    color: #0082c9;
+    color: var(--color-info);
+}
+
+a:hover {
+    color: var(--color-info-hover);
 }
 
 a.button,
@@ -15,19 +61,24 @@ input[type="submit"] {
     width: auto;
     height: 34px;
     cursor: pointer;
-    background-color: #0082c9;
+    background-color: var(--color-nextcloud-blue);
     font-weight: bold;
-    border-radius: 8px;
+    border-radius: var(--border-radius);
     margin: 3px 3px 3px 0;
-    font-size: 14px;
+    font-size: var(--default-font-size);
     color: white;
-    border: .5px solid black;
+    border: .5px solid var(--color-main-border);
     outline: none;
 }
 
 a.button:focus,
 input[type="submit"]:focus {
-    border: 1px solid black;
+    border: 1px solid var(--color-main-border);
+}
+
+a.button:hover,
+input[type="submit"]:hover {
+    background-color: var(--color-info-hover);
 }
 
 summary {
@@ -41,38 +92,36 @@ ul {
 
 li {
     padding-bottom: 5px;
+    text-indent: 0;
+    padding-left: 0;
 }
 
 span.error {
-    background-color: #e9322d;
+    background-color: var(--color-error);
 }
 
 div.toast.error {
-    border-left-color: #e9322d;
+    border-left-color: var(--color-error);
 }
 
 .status {
     display: inline-block;
-    height: 16px;
+    height: var(--checkbox-size);
-    width: 16px;
+    width: var(--checkbox-size);
-    vertical-align: text-bottom
+    vertical-align: text-bottom;
-}
-
-.status {
     border-radius: 50%
 }
 
-
 span.success {
-    background-color: #46ba61;
+    background-color: var(--color-success);
 }
 
 span.running {
-    background-color: rgb(255, 208, 0);
+    background-color: var(--color-running);
 }
 
 div.toast.success {
-    border-left-color: #46ba61;
+    border-left-color: var(--color-success);
 }
 
 div.toast {
@@ -84,19 +133,36 @@ div.toast {
     margin-top: 45px;
     position: fixed;
     z-index: 1000;
-    border-radius: 3px;
+    border-radius: var(--border-radius);
-    background: white none;
+    background: var(--color-main-background) none;
+    color: var(--color-main-text);
+}
+
+.nextcloud-logo {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    color: var(--color-nextcloud-logo);
+}
+
+.fallback-text {
+   display: none;
+}
+
+svg:not(:has(use)) .fallback-text {
+    display: block;
 }
 
 .login {
     padding: 50px;
-    background-color: white;
+    background-color: var(--color-main-background);
+    color: var(--color-main-text);
     width: 500px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    border-radius: 12px;
+    border-radius: var(--border-radius-large);
 }
 
 .login > .monospace {
@@ -104,33 +170,6 @@ div.toast {
     font-size: 17px;
 }
 
-form {
-    margin: 0;
-}
-
-input[type="text"],
-input[type="password"],
-select {
-    padding-left: 8px;
-    padding-right: 8px;
-    height: 34px;
-    margin-bottom: 15px;
-    border-radius: 8px;
-    border: .5px solid black;
-}
-
-textarea {
-    border-radius: 8px;
-    border: .5px solid black;
-}
-
-input[type="text"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
-    border: 1px solid black;
-}
-
 .login > form > input[type="password"],
 .login > form > input[type="text"],
 .login > form > input[type="submit"] {
@@ -153,34 +192,113 @@ select:focus {
     align-content: center;
 }
 
-.login-wrapper {
+.wrapper {
     min-height: 100dvh;
     min-width: 100vw;
     position: fixed;
     width: 100vw;
-    height: auto;
+    background-image: url("img/jenna-kim-the-globe.webp");
-    background-image: url("img/Background_Light.jpg");
-
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+html[data-theme="dark"] .wrapper {
+    background-image: url("img/jenna-kim-the-globe-dark.webp");
+}
+
+form {
+    margin: 0;
+}
+
+input[type="text"],
+input[type="password"],
+select {
+    padding-left: 8px;
+    padding-right: 8px;
+    height: 34px;
+    margin-bottom: 15px;
+    border-radius: var(--border-radius);
+    border: var(--border) solid var(--color-border-maxcontrast);
+    background: var(--color-main-background);
+    color: var(--color-main-text);
+}
+
+input[type="text"]:hover,
+input[type="password"]:hover,
+select:hover {
+    border: var(--border-hover) solid var(--color-main-border-hover);
+}
+
+textarea {
+    border-radius: var(--border-radius);
+    border: .5px solid var(--color-main-border);
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+    border: 1px solid var(--color-main-border);
+}
+
+/* Scroll bar for dark mode */
+html[data-theme="dark"] ::-webkit-scrollbar {
+    width: 8px; /* Width of the scroll bar */
+}
+
+html[data-theme="dark"] ::-webkit-scrollbar-thumb {
+    background-color: #444; /* Dark mode scrollbar thumb color */
+    border-radius: 4px; /* Rounded corners for the thumb */
+}
+
+html[data-theme="dark"] ::-webkit-scrollbar-track {
+    background-color: #333; /* Dark mode scrollbar track color */
+}
+
+/* Scroll bar for light mode */
+::-webkit-scrollbar {
+    width: 8px; /* Width of the scroll bar */
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #888; /* Light mode scrollbar thumb color */
+    border-radius: 4px; /* Rounded corners for the thumb */
+}
+
+::-webkit-scrollbar-track {
+    background-color: #f0f0f0; /* Light mode scrollbar track color */
+}
+
+.container {
+    margin: 20px auto;
+    padding: 2px;
+    max-width: calc(var(--max-width) + 108px);
+    background-color: var(--color-main-background);
+    border-radius: var(--border-radius-large);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-height: calc(100dvh - 40px);
+    overflow: hidden;
 }
 
 main {
-    padding: 20px;
+    padding-left: 50px;
-    max-width: 100%;
+    padding-right: 50px;
+    background-color: transparent; /* transparent, since color comes from outer container */
+    color: var(--color-main-text);
+    max-height: calc(100dvh - 44px);
+    overflow-y: auto;
+    box-sizing: border-box;
     word-break: break-word;
-    max-width: 500px;
+    max-width: calc(var(--max-width) + 100px);
     margin: 0 auto;
 }
 
 .logo {
-    background-image: url('/img/logo.svg');
+    color: white;
     height: 50px;
-    background-repeat: no-repeat;
-    display: inline-flex;
-    background-size: contain;
-    background-position: center center;
     width: 62px;
     position: absolute;
     left: 12px;
@@ -189,16 +307,62 @@ main {
 }
 
 header {
-    background-color: #0082c9;
+    position: fixed;
-    background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%);
+    top: 0;
+    width: 100%;
+    background-color: transparent;
     height: 50px;
     justify-content: space-between;
     align-items: center;
     display: flex;
+    padding: 0 20px;
+    z-index: 1000;
 }
 
 header > form {
-    margin: 0 8px;
+    margin-left: auto;
+    margin-right: 30px;
+}
+
+input[type="checkbox"] {
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    -webkit-appearance: none; /* remove default styling */
+    -moz-appearance: none;
+    appearance: none;
+    border: 1px solid var(--color-nextcloud-blue);
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+    vertical-align: middle; /* align checkbox vertically with text */
+    margin-top: -1px; /* adjust for better alignment */
+}
+
+input[type="checkbox"]:checked {
+    background-color: var(--color-nextcloud-blue);
+    border-color: var(--color-border-maxcontrast);
+}
+
+input[type="checkbox"]:checked::after {
+    content: ''; /* Create a pseudo-element for the checkmark */
+    position: absolute; /* Position it absolutely */
+    left: 4px; /* Positioning of the checkmark */
+    top: 0; /* Positioning of the checkmark */
+    width: 4px; /* Width of the checkmark */
+    height: 9px; /* Height of the checkmark */
+    border: solid white; /* Color of the checkmark */
+    border-width: 0 2px 3px 0; /* Create the checkmark shape */
+    transform: rotate(45deg); /* Rotate to form a checkmark */
+}
+
+input[type="checkbox"]:hover {
+    border-color: var(--color-info-hover);
+}
+
+label {
+    cursor: pointer;
+    margin-left: 4px;
+    line-height: var(--checkbox-size);
 }
 
 .loading {
@@ -223,7 +387,7 @@ header > form {
 .loader {
     border: 16px solid #f3f3f3;
     border-radius: 50%;
-    border-top: 16px solid #0082c9;
+    border-top: 16px solid var(--color-nextcloud-blue);
     width: 120px;
     height: 120px;
     -webkit-animation: spin 2s linear infinite; /* Safari */
@@ -243,3 +407,58 @@ header > form {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
+/* General theme button styling */
+#theme-toggle {
+    position: fixed; /* Keep the button in the same position */
+    right: 30px; /* Adjust the distance from the right */
+    bottom: 30px; /* Adjust the distance from the bottom */
+    background-color: transparent; /* Make the background transparent */
+    border: none; /* Remove border */
+    font-size: 36px; /* Adjust font size */
+    cursor: pointer; /* Change cursor to pointer */
+    outline: none;
+}
+
+/* Icon styling: default state */
+#theme-icon {
+    display: inline-block;
+    border-radius: 50%; /* Round shape */
+    position: relative; /* For the pseudo-element positioning */
+    transition: box-shadow 0.3s, background-color 0.3s; /* Smooth transition for hover effect */
+    opacity: 0.6; /* Slightly transparent by default */
+    filter: grayscale(100%); /* Make the icon black and white */
+}
+
+/* Create the inner glow effect with ::after */
+#theme-icon::after {
+    content: ''; /* Empty content for the pseudo-element */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0px; /* Invisible dot */
+    height: 0px; /* Invisible dot */
+    background-color: transparent; /* Invisible by default */
+    border-radius: 50%; /* Circle shape */
+    transform: translate(-50%, -50%); /* Center the dot */
+    transition: box-shadow 0.3s, background-color 0.3s; /* Smooth transition for hover */
+}
+
+/* Hover effect for both light and dark modes */
+#theme-toggle:hover #theme-icon {
+    position: relative; /* Ensures stacking order */
+    filter: grayscale(0%); /* Restore full color */
+    opacity: 1; /* Fully visible on hover */
+    z-index: 1; /* Ensures the icon is on top of the shadow */
+}
+
+/* Inner glow when hovered */
+#theme-toggle:hover #theme-icon::after {
+    box-shadow: 0 0 40px 40px rgba(128, 128, 128, 0.4); /* Blur effect from inside */
+    background-color: rgba(128, 128, 128, 0.2); /* Light glow inside */
+}
+
+/* Remove hover effects when not hovering */
+#theme-toggle:not(:hover) #theme-icon {
+    opacity: 0.6; /* Slightly transparent */
+}

php/public/toggle-dark-mode.js

@@ -0,0 +1,26 @@
+// Function to toggle theme
+function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = (currentTheme === 'dark') ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+
+    // Change the icon based on the current theme
+    const themeIcon = document.getElementById('theme-icon');
+    themeIcon.textContent = newTheme === 'dark' ? '☀️' : '🌙'; // Switch between moon and sun icons
+}
+
+// Function to apply saved theme from localStorage
+function applySavedTheme() {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+        document.documentElement.setAttribute('data-theme', savedTheme);
+
+        // Ensure the icon is set correctly based on the saved theme
+        const themeIcon = document.getElementById('theme-icon');
+        themeIcon.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
+    }
+}
+
+// Apply theme when the page loads
+document.addEventListener('DOMContentLoaded', applySavedTheme);

php/templates/already-installed.twig

@@ -1,5 +1,13 @@
 {% extends "layout.twig" %}
 
 {% block body %}
-    Already installed.
+    <div class="login">
+        <svg class="nextcloud-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 100" width="142" height="100"">
+            <use href="/img/nextcloud-logo.svg#logo"></use>
+            <use href="/img/nextcloud-logo.svg#Nextcloud"></use>
+            <text x="10" y="50" fill="var(--color-nextcloud-logo)" class="fallback-text">Nextcloud Logo</text>
+        </svg>
+        <h2>Nextcloud All-In-One is already installed</h2>
+        <a href="/" class="button">Open Nextcloud AIO</a>
+    </div>
 {% endblock %}

php/templates/layout.twig

@@ -1,12 +1,16 @@
 <html>
     <head>
         <title>AIO</title>
-        <link rel="stylesheet" href="/style.css?v2" media="all" />
+        <link rel="stylesheet" href="/style.css?v3" media="all" />
         <link rel="icon" href="/img/favicon.png">
         <script type="text/javascript" src="forms.js"></script>
     </head>
 
     <body>
+        <div class="wrapper">
             {% block body %}{% endblock %}
+        </div>
+        <button id="theme-toggle" onclick="toggleTheme()"><span id="theme-icon"/></button>
+        <script type="text/javascript" src="toggle-dark-mode.js"></script>
     </body>
 </html>

php/templates/login.twig

@@ -1,28 +1,28 @@
 {% extends "layout.twig" %}
 
 {% block body %}
-    <div class="login-wrapper">
+    <div class="login">
-        <div class="login">
+        <svg class="nextcloud-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 100" width="142" height="100"">
-            <img alt="Nextcloud logo" src="/img/logo-blue.svg" style="margin-left: auto;margin-right: auto;display: block;">
+            <use href="/img/nextcloud-logo.svg#logo"></use>
-            <h1>Nextcloud AIO Login</h1>
+            <use href="/img/nextcloud-logo.svg#Nextcloud"></use>
-            {% if is_login_allowed == true %}
+            <text x="10" y="50" fill="var(--color-nextcloud-logo)" class="fallback-text">Nextcloud Logo</text>
-                <p>Log in using your Nextcloud AIO passphrase:</p>
+        </svg>
-                <form method="POST" action="/api/auth/login" class="xhr">
+        <h1>Nextcloud AIO Login</h1>
-                    <input type="password" autocomplete="current-password" name="password" placeholder="Password" id="master-password" oninput="showPassword('master-password')">
+        {% if is_login_allowed == true %}
-
+            <p>Log in using your Nextcloud AIO passphrase:</p>
-                    <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
+            <form method="POST" action="/api/auth/login" class="xhr">
-                    <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
+                <input type="password" autocomplete="current-password" name="password" placeholder="Password" id="master-password" oninput="showPassword('master-password')">
-                    <input type="submit" class="button" value="Log in" />
+                <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
-                </form>
+                <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-            {% else %}
+                <input type="submit" class="button" value="Log in" />
-                <p>The login is blocked since Nextcloud is running.<br>Please use the <a href="https://github.com/nextcloud/all-in-one#how-to-easily-log-in-to-the-aio-interface"><strong>automatic login</strong></a> from your Nextcloud.<br><br>
+            </form>
-                If that is not possible, you can unblock the login by running<br><strong>sudo docker stop nextcloud-aio-apache</strong></p>
+        {% else %}
-            {% endif %}
+            <p>The login is blocked since Nextcloud is running.<br>Please use the <a href="https://github.com/nextcloud/all-in-one#how-to-easily-log-in-to-the-aio-interface"><strong>automatic login</strong></a> from your Nextcloud.<br><br>
-        </div>
+            If that is not possible, you can unblock the login by running<br><strong>sudo docker stop nextcloud-aio-apache</strong></p>
+        {% endif %}
     </div>
     <script type="text/javascript" src="before-unload.js"></script>
     <div id="overlay">
         <div class="loader"></div>
     </div>
 {% endblock %}
-

php/templates/setup.twig

@@ -1,14 +1,16 @@
 {% extends "layout.twig" %}
 
 {% block body %}
-    <div class="login-wrapper">
+    <div class="login">
-        <div class="login">
+        <svg class="nextcloud-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 100" width="142" height="100"">
-            <img alt="Nextcloud logo" src="/img/logo-blue.svg" style="margin-left: auto;margin-right: auto;display: block;">
+            <use href="/img/nextcloud-logo.svg#logo"></use>
-            <h1>All-in-One setup</h1>
+            <use href="/img/nextcloud-logo.svg#Nextcloud"></use>
-            <p>The official Nextcloud installation method. Nextcloud All-in-One provides easy deployment and maintenance with most features included in this one Nextcloud instance.</p>
+            <text x="10" y="50" fill="var(--color-nextcloud-logo)" class="fallback-text">Nextcloud Logo</text>
-            <p>⚠️ <strong>Please note down the passphrase to access the AIO interface and don't lose it!</strong></p>
+        </svg>
-            <strong>Passphrase</strong><br/><span class="monospace">{{ password }}</span><br>
+        <h1>All-in-One setup</h1>
-            <a href="/" class="button" target="_blank" rel="noopener">Open Nextcloud AIO login ↗</a>
+        <p>The official Nextcloud installation method. Nextcloud All-in-One provides easy deployment and maintenance with most features included in this one Nextcloud instance.</p>
-        </div>
+        <p>⚠️ <strong>Please note down the passphrase to access the AIO interface and don't lose it!</strong></p>
+        <strong>Passphrase</strong><br/><span class="monospace">{{ password }}</span><br>
+        <a href="/" class="button" target="_blank" rel="noopener">Open Nextcloud AIO login ↗</a>
     </div>
 {% endblock %}