eightball/all-in-one
1
0
Fork 0
mirror of https://github.com/nextcloud/all-in-one.git synced 2025-12-19 22:16:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

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

Browse source 
- 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>
This commit is contained in:
ernolf 2024-10-08 18:49:37 +02:00
parent 10495fd56e
commit 1f144b9ee7
No known key found for this signature in database
GPG key ID: 0B145139A170715C
13 changed files with 988 additions and 727 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
php/public/img/Background_Light.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 661 KiB

BIN
php/public/img/jenna-kim-the-globe-dark.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 176 KiB

BIN
php/public/img/jenna-kim-the-globe.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 97 KiB

3
php/public/img/logo-blue.svg
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

1
php/public/img/logo.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 330 B

4
php/public/img/nextcloud-logo.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

351
php/public/style.css
View file

@ -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;
width: 16px;
vertical-align: text-bottom
}
.status {
height: var(--checkbox-size);
width: var(--checkbox-size);
vertical-align: text-bottom;
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;
background: white none;
border-radius: var(--border-radius);
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/Background_Light.jpg");
background-image: url("img/jenna-kim-the-globe.webp");
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;
max-width: 100%;
padding-left: 50px;
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;
background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%);
position: fixed;
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 */
}

26
php/public/toggle-dark-mode.js Normal file
View file

@ -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);

12
php/templates/already-installed.twig
View file

@ -1,5 +1,13 @@
{% extends "layout.twig" %}
{% block body %}
Already installed.
{% endblock %}
<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 %}

1232
php/templates/containers.twig
View file

File diff suppressed because it is too large Load diff

8
php/templates/layout.twig
View file

@ -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>
</html>

56
php/templates/login.twig
View file

@ -1,28 +1,28 @@
{% extends "layout.twig" %}
{% block body %}
<div class="login-wrapper">
<div class="login">
<img alt="Nextcloud logo" src="/img/logo-blue.svg" style="margin-left: auto;margin-right: auto;display: block;">
<h1>Nextcloud AIO Login</h1>
{% if is_login_allowed == true %}
<p>Log in using your Nextcloud AIO passphrase:</p>
<form method="POST" action="/api/auth/login" class="xhr">
<input type="password" autocomplete="current-password" name="password" placeholder="Password" id="master-password" oninput="showPassword('master-password')">
<input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
<input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
<input type="submit" class="button" value="Log in" />
</form>
{% else %}
<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>
If that is not possible, you can unblock the login by running<br><strong>sudo docker stop nextcloud-aio-apache</strong></p>
{% endif %}
</div>
</div>
<script type="text/javascript" src="before-unload.js"></script>
<div id="overlay">
<div class="loader"></div>
</div>
{% endblock %}
{% extends "layout.twig" %}
{% block body %}
<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>
<h1>Nextcloud AIO Login</h1>
{% if is_login_allowed == true %}
<p>Log in using your Nextcloud AIO passphrase:</p>
<form method="POST" action="/api/auth/login" class="xhr">
<input type="password" autocomplete="current-password" name="password" placeholder="Password" id="master-password" oninput="showPassword('master-password')">
<input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
<input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
<input type="submit" class="button" value="Log in" />
</form>
{% else %}
<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>
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 %}

22
php/templates/setup.twig
View file

@ -1,14 +1,16 @@
{% extends "layout.twig" %}
{% block body %}
<div class="login-wrapper">
<div class="login">
<img alt="Nextcloud logo" src="/img/logo-blue.svg" style="margin-left: auto;margin-right: auto;display: block;">
<h1>All-in-One setup</h1>
<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>
<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>
<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>
<h1>All-in-One setup</h1>
<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>
<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 %}
{% endblock %}