Add the "server info" settings

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

4 files changed, 194 insertions, 7 deletions

diff --git a/settings/css/_server-info.scss b/settings/css/_server-info.scss
new file mode 100644
index 00000000000..c9f89bd566a
--- /dev/null
+++ b/settings/css/_server-info.scss
@@ -0,0 +1,95 @@
+.server-info-settings {
+	.label {
+		display: block;
+	}
+
+	.form-input {
+		margin-bottom: 10px;
+		width: 100%;
+	}
+
+	.margin-bottom {
+		margin-bottom: 15px;
+	}
+
+	.form-actions {
+		text-align: right;
+
+		.button {
+			align-items: center;
+			display: inline-flex;
+			margin: 0;
+			transition: background-color 500ms linear;
+
+			.default-label,
+			.working-label,
+			.success-label,
+			.error-label {
+				align-items: center;
+				gap: 4px;
+			}
+
+			.working-label,
+			.success-label,
+			.error-label {
+				display: none;
+			}
+		}
+
+		.button-working,
+		.button-success,
+		.button-error {
+			background-color: $color-background-dark;
+			color: $color-text-lighter;
+			opacity: 1;
+
+			.default-label {
+				display: none;
+			}
+		}
+
+		.button-working {
+			.working-label {
+				display: inline-flex;
+			}
+		}
+
+		.button-success {
+			background-color: $color-success;
+			border-color: darken($color-success, 10%);
+			color: $color-primary-text-dark;
+
+			.success-label {
+				display: inline-flex;
+			}
+		}
+
+		.button-error {
+			background-color: $color-error;
+			border-color: darken($color-error, 10%);
+			color: $color-primary-text-dark;
+
+			.error-label {
+				display: inline-flex;
+			}
+		}
+	}
+
+	@media (min-width: 1000px) {
+		.label {
+			display: inline-block;
+			text-align: right;
+			width: 175px;
+		}
+
+		.form-input {
+			margin-left: 5px;
+			width: 225px;
+		}
+
+		.form-actions {
+			margin-left: 180px;
+			width: 225px;
+		}
+	}
+}
diff --git a/settings/css/_where-is-your-data.scss b/settings/css/_where-is-your-data.scss
new file mode 100644
index 00000000000..7414f6d36d6
--- /dev/null
+++ b/settings/css/_where-is-your-data.scss
@@ -0,0 +1,6 @@
+.where-is-your-data {
+	// @todo replace by common link style as soon as available
+	a:not(.icon-info) {
+		border-bottom: 1px dotted;
+	}
+}
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 65e66370887..589985aaddc 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -2,6 +2,9 @@
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 
+@import "server-info";
+@import "where-is-your-data";
+
 input {
 	&#openid, &#webdav {
 		width: 20em;
@@ -1624,10 +1627,3 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 		}
 	}
 }
-
-.where-is-your-data {
-	// @todo replace by common Nextcloud link style as soon as available
-	a {
-		border-bottom: 1px dotted;
-	}
-}
diff --git a/settings/templates/settings/admin/server-info.php b/settings/templates/settings/admin/server-info.php
new file mode 100644
index 00000000000..9c2b3fe4318
--- /dev/null
+++ b/settings/templates/settings/admin/server-info.php
@@ -0,0 +1,90 @@
+<?php ?>
+
+<div class="section server-info-settings">
+	<h2><?php p($l->t('Server info')); ?></h2>
+	<p class="settings-hint">
+		<?php p($l->t('Enter common info about your Nextcloud instance here. These info are visible to all users.')) ?>
+	</p>
+	<form>
+		<div class="margin-bottom">
+			<label class="label" for="location"><?php p($l->t('Server location')); ?></label>
+			<input
+				class="form-input"
+				id="location"
+				name="location"
+				type="text"
+				maxlength="100"
+				placeholder="<?php p($l->t('country')); ?>">
+		</div>
+		<div>
+			<label class="label" for="provider"><?php p($l->t('Service provider')); ?></label>
+			<input
+				class="form-input"
+				id="provider"
+				name="provider"
+				type="text"
+				maxlength="100"
+				placeholder="<?php p($l->t('company or person')); ?>">
+		</div>
+		<div>
+			<label class="label" for="providerWebsite"><?php p($l->t('Website')); ?></label>
+			<input
+				class="form-input"
+				id="providerWebsite"
+				name="providerWebsite"
+				type="url"
+				maxlength="200"
+				placeholder="<?php p($l->t('link to website')); ?>">
+		</div>
+		<div class="margin-bottom">
+			<label class="label" for="providerPrivacyLink"><?php p($l->t('Link to privacy policy')); ?></label>
+			<input
+				class="form-input"
+				id="providerPrivacyLink"
+				name="providerPrivacyLink"
+				type="url"
+				maxlength="200"
+				placeholder="<?php p($l->t('link to privacy policy')); ?>">
+		</div>
+		<div class="margin-bottom">
+			<label class="label" for="admin"><?php p($l->t('Admin contact')); ?></label>
+			<select class="form-input" name="admin">
+				<option>Michael Weimann</option>
+				<option>Max Mustermann</option>
+				<option>Peter Petrowski</option>
+			</select>
+		</div>
+		<div class="form-actions">
+			<button id="test123" class="button">
+				<span class="default-label">
+					<?php p($l->t('Save')); ?>
+				</span>
+				<span class="working-label">
+					<span class="icon-loading-small-dark"></span>
+					<?php p($l->t('saving…')); ?>
+				</span>
+				<span class="success-label">
+					<span class="icon-checkmark-white"></span>
+					<?php p($l->t('saved')); ?>
+				</span>
+				<span class="error-label">
+					<span class="icon-error-white"></span>
+					<?php p($l->t('error saving settings')); ?>
+				</span>
+			</button>
+			<script>
+				const button = $('#test123');
+				button.on('click', (event) => {
+					event.stopImmediatePropagation();
+					event.preventDefault();
+					button.prop('disabled', true);
+					button.addClass('button-working');
+					setTimeout(() => {
+						button.removeClass('button-working');
+						button.addClass('button-success');
+					}, 1500);
+				});
+			</script>
+		</div>
+	</form>
+</div>